Issuu on Google+

Resumen de HTML. Para crear nuestra página web de forma manual con HTML, necesitaremos abrir el bloc de notas donde iremos colocando los códigos. Las primeras etiquetas que abremos de colocar son <html> <body> Y al final: </body> </html> Será dentro de estas eetiquetas donde colocaremos las demás. Existe asimismo una etiqueta especial por si queremos ponerle titulo a la pagina para que salga en la pestaña del buscador dicha etiqueta es <head><title> aquí colocaríamos el titulo de nuestra pagina</title> </head> la cual va entre la tiqueta de html y body es la única que veremos en este manual que se coloca entre dichas etiquetas: De momento nuestro bloc de notas debería tener un aspecto parecido a este:

Y la web resultante seria algo asi:


(para que se vea el documento del bloc de notas como una web le daba a: archivo>guardar como> en tipo de texto ponemos todos los programas y en nombre loquesea.html si no ponemos .HTML no se verá ya guardamos y lo abriríamos con nuestro navegador predeterminado)

Dentro de la etiqueta body podemos utilizar las siguientes subetiquetas: <p> aquí escribimos normal </p> <b> aquí se escribiría en negrita</b> <u> aquí escribiría subrayado</u> Todas estas etiquetas pueden ser anidadas <b>Esto sólo está en negrita <u>y esto en negrita y subrayado</u></b>

Nuestra página tendría la siguiente apariencia:


Si queremos hacer un salto de pagina utilizaremos <br> escrito al final de cada párrafo que queremos que “salte” Ejemplo:


Alineación. Etiqueta Align.

<p align="center">Texto alineado al centro</p> <p align="right">Texto alineado a la derecha</p> <p align="left">Texto alineado a la izquierda</p> Una forma de simplificar nuestro código y de evitar introducir continuamente el atributo align sobre cada una de nuestras etiquetas es utilizando la etiqueta <div>. Ej: Así, el código: <p align="right">Parrafo1</p> <p align="right"> Parrafo2</p> <p align="right"> Parrafo3</p> es equivalente a: <div align="right"> <p>Parrafo1</p> <p>Parrafo2</p> <p>Parrafo3</p> </div> La pagina quedaría asi:


Encabezados. Hay varios tipos de encabezados, que se diferencian en el tamaño de la letra que utilizan. La etiqueta en concreto es la <h1>, para los encabezados más grandes, <h2> para los de segundo nivel y así hasta <h6> que es el encabezado más pequeño. Los encabezados, como otras etiquetas de HTML, soportan el atributo align. Vemos un ejemplo de encabezado de nivel 2 alineado al centro. <h2 align="center">Encabezado de nivel 2</h2>


Ejemplo:


Subíndices y superíndices. Este tipo de formato resulta de extremada utilidad para textos científicos. Las etiquetas empleadas son: <sup> y </sup> para los superíndices <sub> y </sub> para los subíndices

Ejemplo:

Color, tamaño y tipo de letra Esto se hace a partir de la etiqueta <font> y su cierre correspondiente atributos principales de esta etiqueta:

Atributo FACE Define el tipo de letra <font face="Comic Sans MS,arial,verdana">Este texto tiene otra tipografía</font> Atributo SIZE. Define el tamaño de la letra. <font size=4>Este texto es más grande</font> Atributo COLOR.


<font color="red">Este texto está en rojo</font>

Ejemplo:

Atributos para fondos • •

bgcolor: especificamos un color de fondo para la página background: sirve para indicar la colocación de una imagen como fondo de la página.

Nota importante estas etiquetas se ponen dentro de la etiqueta body quedaría algo asi:


Color del texto • • • •

text: este atributo sirve para asignar el color del texto de la página link: el color de los enlaces que no han sido visitados vlink: el color de los enlaces visitados alink: es el color de los enlaces activos

Enlaces en HTML Para colocar un enlace, nos serviremos de las etiquetas <a> y </a>. Dentro de la etiqueta de apertura deberemos especificar asimismo el destino del enlace. Este destino será introducido bajo forma de atributo, el cual lleva por nombre href. A destacar que los enlaces no tienen porque estar dirigidos siempre a paginas web pueden asimismo dirigirse a otros archivos que se encuentren subordinados al principal o destinados a sitios para que al pinchar sobre ellos el usuario puede descargar archivos…. Y asi numerosas posibilidades. La sintaxis general de un enlace es por tanto de la forma: <a href="destino">contenido</a>


Otra etiqueta a destacar es la etiqueta img src que sirve para poner una imagen Ej: <img src="loquesea.jpg "> QuedarĂ­a algo asi:


Tablas: Las tablas son descritas por líneas de izquierda a derecha. Cada una de estas líneas es definida por otra etiqueta y su cierre: <tr> y </tr> Asimismo, dentro de cada línea, habrá diferentes celdas. Cada una de estas celdas será definida por otro par de etiquetas: <td> y </td>. Dentro de estas etiquetas será donde coloquemos nuestro contenido.

Ejemplo de tabla:


Atributos height y width. Definen la altura y anchura respectivamente de la imagen en pixels. Ejemplo:


resumen