1. Inicio
  2. CSS
  3. Diseño Web
  4. HTML
  5. JavaScript
  6. Miscelanea
  7. Recursos
  8. SEO
  9. Usabilidad

Chica mirando HTML sin poder entenderloimagen de istockphoto

¿Que es HTML?

HTML signifca: Hypertext Markup language que en español sería algo así como Lenguaje de Etiquetas de Hipertexto.
Hoy veremos qué es HTML, y para que sirve.

¿Que es un Lenguaje de Etiquetas?

Lo que escribes (el HTML).

Sabes que el HTML es la clave para hacer que un navegador muestre tus páginas, pero ¿como es que se ve el HTML?

Imagina que quieres crear una página para un nuevo café (HTML café) un lugar con internet inalámbrico, donde puedes sentarte a escuchar buena música y charlar con tus amigos sobre HTML o CSS.

Esto es lo que escribirías en HTML:

código HTML

Y esto sería lo que ves en el navegador

cómo el navegador interpreta el código HTML

No espero que sepas HTML en este momento, esto es sólo para que tengas una idea de como se ve, luego cubriremos todo con más detalle. Por el momento compara la imagen del HTML con la imagen de lo que muestra navegador.

¿Entonces HTML son sólo un montón de etiquetas?

En principio sí, recuerda que el HTML es un lenguaje de etiquetas, pero también está la parte de hipertexto, pero ya tocaremos eso más adelante.

No veo la indentación en el navegador ¿A donde se fue?

No, no la ves, eso se debe a que los navegadores ignoran la mayoría de espacios, tabulaciones y saltos de linea y usan la estructura de tu HTML para darle forma a la página.

Entonces, ¿Por que usé tabulaciones y saltos de línea en mi código?

Pues porque eso hace el código más ordenado y legible.

¿<h1>, <h2>, que es eso?

Son encabezados, y hay seis: desde <h1> hasta <h6>

¿Y para que sirve el <p>?

<p> le dice al navegador que se trata de un párrafo.

¿Y ese elemento tan complicado
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>?

Ya hablaremos de eso en su momento, por ahora basta saber que sin eso la pagina se vería así.

el navegador no muestra acentos ni caracteres en español si el HTML no tiene el elemento <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>

¿Notas que no se muestran ni los tildes ni la ñ?

Una etiqueta consiste en el nombre de la etiqueta rodeado por paréntesis angulares, esos son
< (menor que) y > (mayor que).

Por ejemplo, <h1> es la etiqueta inicial que comienza el encabezado y </h1> es la etiqueta de cierre que lo termina, sabemos que es una etiqueta de cierre porque viene después del contenido y tiene un "/" antes del h1. todas las etiquetas de cierre tienen un "/".

Todo junto se llama elemento, en este caso lo llamamos elemento <h1>

En resumen, para describirle al navegador la estructura de una página web, usa pares de etiquetas alrededor del contenido.

Recuerda:

ELEMENTO = ETIQUETA INICIAL + CONTENIDO + ETIQUETA FINAL

¿Que pasa con el elemento <img>, no tiene etiqueta de cierre?

¡Buena pregunta!, hay ciertos elementos como por ejemplo <img> que usan una notación diferente, no te preocupes por eso ahora, lo comentaremos luego.

¿Que es hypertexto?

Nada importante, sólo TODA LA BASE DE LA WEB

para eso tenemos a nuestra buena amiga, la etiqueta <a> que se encarga de crear enlaces entre páginas... pero ya veremos eso en la siguiente entrada de este tutorial.

Etiquetas:

Comentarios

deja un comentario

  1. Avatar de Juan Juan

    Me encuentro comenzando el cursado de Webmaster y entré a esta página para buscar datos sobre HTML...los felicito por la información, es clara y consistente. Directo a mis favoritos.
    Gracias! Saludos .-

  2. Avatar de elektrorate elektrorate

    ahora el html es mas claro para.... mi vi la luz
    buena profe

  3. Avatar de Tere Tere

    No puedo creer que haya encontrado esta página. No tenía idea de cómo agregarle detalles a un blog que estoy armando, porque ignoro por completo todo lo referente a html. Pero por fin una persona como vos se apiada y nos hace simple el camino. Prometo ser una buena alumna y enviarte mi trabajo al final. Muchas gracias, Germán!!!!

  4. Avatar de Germán Germán

    Hola Tere,

    Muchas gracias a ti, no sabes como me alegró leer un comentario como el tuyo.
    Espero que me envíes el trabajo al final :P y cuenta conmigo para ayudarte.

    Saludos!

  5. Avatar de Norma Norma

    Gracias!! Estoy iniciando en html y me ha sido de gran ayuda :=)

Deja un comentario

Algunos recursos para Diseñadores Web

Firebug
Genial extensión de Firefox que permite ver y editar HTML y CSS de cualquier página, entre otras cosas.
Web Developer Toolbar
Extensión de Firefox, agrega una barra de menu con muchas herramientas utiles para diseño y desarrollo web.
YSlow
Complemento para Firebug creado por Yahoo, da estadísticas de la velocidad de carga de la página así como sugerencias para mejorarla (requiere Firebug).
W3C Markup Validation Service
Valida tu HTML o XHTML, una herramienta indispensable.

Entra a la página de recursos para diseñadores web y mira la lista completa

¿Quien escribe Aprendiendo Web?

Germán MartínezHola, soy Germán Martínez, diseñador web y fundador de PreZentit.com, la primera aplicación web 2.0 creada en Perú.

La idea de Aprendiendo Web, es ser una fuente de información en español de estándares y buenas prácticas, así como de las últimas tendencias en diseño web.

Me apasiona el (X)HTML, CSS, SEO y todo lo que tenga que ver con diseño y desarrollo web.

-12.126668, -77.029910