Si no sabes absolutamente nada de diseño de paginas web y quieres aprender, estas en el lugar correcto, en este tutorial aprenderás desde cero como funcionan y de que están hechas las paginas web.
¿Qué es HTML?
HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web
Wikipedia.org
Nota: este tutorial es solamente una introduccion, si te interesa mas el tema puedes pasarte por los demás tutoriales de HTML.
Elementos HTML:
Los documentos HTML estan compuestos por elementos, estos a su vez por etiquetas, atributos y el contenido del elemento:
<p class="texto">Soy un texto dummy</p>
Este es un elemento de párrafo, <p> viene de paragraph. Todas los elementos tienen como inicial sus nombres en ingles.
Comentarios en HTML
Es importante en un lenguaje de programación que se sepa usar comentarios ya que estos sirven como guia. Un comentario en HTML empieza con <!—y termina con –>
Ejemplo:
<!-- Esto es un comentario -->
Una pagina HTML completa
Continuando con este tutorial abre el editor de textos que prefieras (bloc de notas, notepad++, etc) y escribe el siguiente código:
<head> <title>Barra de titulo</title> </head> <body> <!-- este es un texto comentado --> <h1>Bienvenido a mi pagina</h1> <p class="texto">Soy un texto dummy</p> </body> </html>
Luego guardalo con extensión .html, lo abres con el navegador de tu preferencia y deberías de ver algo asi:
Explicación
1. La definición del tipo de documento: <!DOCTYPE html>
Define el tipo de documento, siempre debe de ir en las primeras líneas de código.
2. Elemento raíz: <html></html>
Elemento raíz, que dependen de todos los elementos visibles de la pagina web, dentro de ellas tenemos el <head> y <body>.
3. Cabeza: <head></head>
El head contiene datos propios del documento, aunque es invisible la información que va en el head influye a la pagina, aquí es donde va la etiqueta <title></title> que es lo que muestra la barra de titulo, también es aquí donde se incluyen los archivos CSS y Javascript.
4. El contenido de la pagina web: <body></body>
Dentro de este elemento <body> se encuentra todo lo visible de la pagina web.
5. El titulo de la pagina dentro del body: <h1></h1>
h1 significa Heading 1 y es el elemento mas crucial para el correcto posicionamiento web.
6. Por ultimo el parrafo: <p></p>
El elemento paragraph sirve para contener parrafos.
Eso seria todo con este tutorial, si quieres ver toda la lista de elementos HTML e información mas detallada sigue este enlace.