resumen

17
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:

description

resumen de html

Transcript of resumen

Page 1: resumen

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:

Page 2: resumen

(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:

Page 3: resumen
Page 4: resumen

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

Page 5: resumen

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:

Page 6: resumen

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ásgrandes, <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>

Page 7: resumen

Ejemplo:

Page 8: resumen

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 letraEsto 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>

Page 9: resumen

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:

Page 10: resumen
Page 11: resumen

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>

Page 12: resumen

Otra etiqueta a destacar es la etiqueta img src que sirve para poner una imagen

Ej: <img src="loquesea.jpg ">

Quedaría algo asi:

Page 13: resumen

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:

Page 14: resumen

Atributos height y width.

Definen la altura y anchura respectivamente de la imagen en pixels.

Ejemplo: