Las etiquetas del HTML
Aviso, esto no es cierto, pero en esta parte del curso usaremos HTML y XHTML como sinónimos, más adelante explicaremos las implicaciones de esto 
, de momento no te compliques.
El XHTML es un lenguaje de marcado o de etiquetas, esto básicamente quiere decir que funciona de la siguiente forma:
a) con etiquetas de apertura y cierre, que encierran texto :
1 | <etiqueta>texto</etiqueta> |
o
b) con etiqueta auto cerradas
1 | <etiqueta /> |
Hay que aclarar que las etiquetas XHTML pueden ser escritas en mayúsculas o minúsculas. Aunque es considerado una buena practica escribirlas siempre en minúsculas.
Ahora vamos a crear nuestra primera, con links y todo!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <html>
<head>
<title>Mi primera pagina<title>
</head>
<body>
<h1>Mi primera pagina</h1>
<p>
Guau esto es increíble miren voy a poner
un link <a href="http://tecnologiaslibres.net"> a TecnologiasLibres justo aquí</a>
</p>
<p>
Yo soy otro párrafo y me gustaría
destacar <strong>esto<strong>.
</p>
</body>
</html> |
Si bien la pagina anterior es bastante, sencilla y ya habíamos visto algo en el capitulo anterior, tiene algo que se podria definir como la piedra angular de la web, los links
, pero mejor expliquemos primero linea a linea esta pagina web :
- 1: apertura del html
- 3: apertura de la cabecera
- 4: apertura y cierre de title aqui definimos el titulo, este titulo es el que vera los buscadores etre otras cosas, no confundir con el encabezado de la pagina o <h1> que veremos más adelante.
- 5: cierre de la cabecera
- 7: apertura de body, aquí es donde empieza la parte “visible” de la pagina
- 8: “Mi primera pagina” flanqueado por etiqueta h1, h1 significa que es el titulo más importante de la pagina web, <h2> ..es o son los 2º títulos más importante de la pagina web, <h3> .. es o son los 3º … así hasta llegar a <h6> que son los menos importantes
- 9: apertura de <p>, esta etiqueta es para crear párrafos
- 11: aqui usamos la etiqueta a, para generar un link, el formato es el siguiente <a href=”pagina web”>Nombre del link</a>
- 16: apertura de <strong> texto destacado y cierre de </strong>
Indentación del codigo HTML
Sección agregada debido a pregunta de alfbusquiel
La verdad es que al navegador web le da lo mismo que la pagina anterior la escribamos así :
1 2 3 4 | <html><head><title>Mi primera pagina<title>
</head><body><h1>Mi primera pagina</h1><p>Guau esto es increíble miren voy a poner
un link <a href="http://tecnologiaslibres.net"> a TecnologiasLibres justo aquí</a></p><p>Yo soy otro párrafo y me gustaría destacar <strong>esto<strong>.
</p> </body></html> |
Igual mostraría lo mismo el navegador, sin embargo para los humanos es muy difícil de leer así, por eso es que se usa la indentación, que no es mas que agregar espacios en blancos para que se vea mas legible, con un ejemplo lo entenderemos
1 2 3 4 5 6 7 8 9 10 11 12 | <etiqueta>
<sub-etiiqueta>
<sub-sub-etiiqueta>
</sub-sub-etiiqueta>
</sub-etiqueta>
<sub-etiiqueta>
lalalall
</sub-etiiqueta>
</etiqueta> |
Tarea crear un pagina web con lo aprendido en este curso, probar los diferentes <h1>,<h2>,<h3>,<h4> …
Y recuerden, dudas, sugerencias o similares, tan solo deja un comentario o envíame un twiit a mi twitter
¿Quieres leer más artículos como éste? ¡Suscríbete!
