Manual Html

Lo primero que deberemos escribir en nuestro editor será lo siguiente:

?
1
2
3

Mi primera página web

Todo lo que se encuentra entre < y > son etiquetas de html. La primera etiqueta que debemos poner es la de html, que nos indicará que lo que estamos creando es un html.

Seguidamente añadimos los elementos head y body en el documento:

?
1
2
3
4
5
6
7




Miprimera página web



Ahora añadiremos dentro del head, el title, que será el título que nos aparecerá en las pestañas de nuestro navegador:

?
1
2
3
4
5
6
7
8


Aprendiendo html


Mi primera página web



NOTA: Antes de seguir, guardaremos nuestro documento con la extensión .html, por ejemplo podría llamarse: miprimerapaginaweb.html .
Así cuando la abramos concualquier navegador [botón derecho sobre el archivo -> abrir con -> (elegimos el navegador que queramos)] podremos ver cómo nos está quedando:



Esta es la estructura básica que tiene que tener una página web, ahora iremos viendo las distintas etiquetas básicas para nuestro primer html. Y el DOCTYPE.

3. DOCTYPE

Para que nuestro documento sea válido y cumpla los estándares,necesitaremos colocar antes de la etiqueta que hemos colocado de html, alguno de los DTD que existen para distintas versiones de html, nosotros elegiremos el siguiente:

DTD transicional para XHTML 1.0:

?
1
2
3
4
5
6
7
8
9



Aprendiendo html


Mi primera página web



NOTA: Un DOCTYPE o DTD, abreviatura de definición de tipo de documento, define los bloques deconstrucción de un documento HTML o XHTML y le dice a los navegadores y a los validadores qué versión de HTML o XHTML utiliza nuestro documento.

4. Etiquetas básicas html

Ahora sí, vamos a ir viendo las distintas etiquetas y vamos a ir creando una página web básica.

Lo que vamos a ver será:
Etiquetar encabezados
Negrita, cursiva, párrafo y salto de línea
Añadir una imagen
Crear listas
Crearun vínculo a una página web
Crear tablas
Etiquetar encabezados

Para diferenciar la importancia de varios encabezados dentro del mismo documento, utilizaremos los 6 tipos de encabezados disponibles, del h1 al h6, tal y como se ve a continuación:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27



Aprendiendo htmlMi primera página web
Texto en este párrafo

Encabezado de nivel 2
Texto en este párrafo

Encabezado de nivel 3
Texto en este párrafo

Encabezado de nivel 4
Texto en este párrafo

Encabezado de nivel 5
Texto en este párrafo

Encabezado de nivel 6
Texto en este párrafo




NOTA: la etiqueta p significa párrafo, es decir, lo que esté dentro deesa etiqueta formará un párrafo que se separará del resto con un salto de línea implícito en dicha etiqueta.

Y nos quedará de la siguiente manera:



NOTA: Utilice h1 sólo para el título y h2 y h3 para el resto de encabezados. Pero siempre en orden, no se salte encabezados, detrás de h2 debería de haber un h3, etc.

Negrita, cursiva, párrafo y salto de línea

Negrita

Para poner unapalabra o frase en negrita, la etiqueta será la b, de este modo:

?
1
Este texto estará en negrita pero éste no

Y nos quedará lo siguiente:



Es decir, que todo lo que coloquemos entre la etiqueta b (de bold) nos aparecerá en negrita.

Cursiva

Del mismo modo para poner en cursiva alguna palabra o frase usaremos la etiqueta i, de este modo:

?
1
Este texto estará en cursivapero éste no

Y nos quedará lo siguiente:



Es decir, que todo lo que coloquemos entre la etiqueta i (de italic) nos aparecerá en cursiva.

NOTA: Podemos usar varias etiquetas para una misma palabra o frase, por ejemplo:

?
1
Este texto estará en cursiva y negrita pero éste no


Párrafo y salto de línea

Para crear un párrafo, la etiqueta es la p, que ya incluye el salto de...