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!
¿Preguntas?
al abrir y al cerrar y estan al lado del margen y el resto del texto separado ¿eso que significa? las etiquetas y tambien estan dos espacios mas separado que el texto que hay entre ellas ¿eso por que? la verdad me imagino por que pero me gustaria saberlo seguro.muy buen trabajo
cuando abrir y al cerrar me refiero a las etiquetas html y la de los dos espacios a las etiquetas head,body y p por alguna razon no han salido en el comentario anterior me imagino que sera por que las he escrito con los corchetes.no lo sabia
@alfbusquiel eso se llama indentación, muy buena tu pregunta, es solo para ser más ordenado y entender mejor lo que se escribe, nada más
.
Actualización: agregue una explicación de que es la indentación en el post
ya me ha quedado claro gracias
Salu2!
no me funciona en opera…
uso debian
@Gómez Hyuuga grac, me alegro que te guste
@pablo que es lo que no te funciona!, se un poco más claro, podrías por ejemplo poner un screenshot de lo que muestra tu navegador!
[...] Sintaxis del HTML y Mi primera pagina en HTML [...]
Porque me muestra los acentos de esta manera??????
http://i142.photobucket.com/albums/r95/Jrballesteros05/Acentos.png
@Jesús te respondo en el próximo capitulo del curso oka, lo estoy redactando
http://www.tecnologiaslibres.net/curso-para-aprender-html-xhtml/ índice del curso
Usando
[...] #2 Sintaxis del HTML y Mi primera pagina en HTML [...]
Usando
Estoy tratando de aprender lo de html, he ehcho todos los pasos como dice el curso, llego a guardarlo pero queda con la extension txt y cuando abro lo que guarde sigue lo mismo escrito no se traduce en nada como supuestamente tendria que estar use explorer y firefox y con ninguno de los dos tuve resultados. Que puede ser me ayudas?
Gracias. Glo
Usando
A mi me pasa lo mismo que a Glo