Introducción al Desarrollo

Web: HTML y CSS HTML: conceptos básicos (parte 1)

Si ya has visto las dos partes del vídeo “Historia de la Web: su nacimiento”, sabrás que Tim

BernersLee es considerado el padre de la Web porque desarrolló las tres tecnologías

fundamentales en las que se basa la Web: HTML, HyperText Markup Language, el lenguaje

de marcado o etiquetado que se emplea para crear, para escribir, los documentos o páginas web.

URL, Uniform Resource Locator, el localizador de recursos uniforme, el sistema de localización

o direccionamiento de los documentos web.

Y HTTP, HyperText Transfer Protocol, el protocolo o lenguaje con el que se comunican el

navegador y el servidor web y que se emplea para transmitir los documentos web por Internet.

Con el lenguaje HTML se describe la estructura y el contenido, que puede ser texto, imágenes,

vídeos y otros componentes, de las páginas web. Con HTML no se define la presentación

visual de las páginas web.

Esto es muy importante que lo asimiles, así que te lo voy a repetir una vez más: el lenguaje

HTML se emplea únicamente para definir la estructura y el contenido o información de una

página web, la presentación visual no se define con HTML.

En la actualidad, el lenguaje HTML está desarrollado por el World Wide Web Consortium, el

W3C, el organismo internacional que vela por el correcto desarrollo de la Web.

En la página del W3C puedes encontrar mucha información sobre HTML, pero para empezar

no te lo recomiendo, porque te puede abrumar y asustar, ya que es un sitio web dirigido a

profesionales y expertos, no para principiantes.

Para empezar a aprender HTML puedes consultar documentación sobre HTML5 o sobre las

versiones anteriores HTML 4 o XHTML 1. Te conviene conocerlas todas, y las diferencias que

hay entre unas y otras, porque ahí fuera, en Internet, te vas a encontrar de todo. Para ser un

buen profesional necesitas conocer las tres versiones.

Para aprender HTML y otras tecnologías web te recomiendo el sitio web W3Schools. En este

sitio puedes encontrar un apartado de tutoriales. Después de ver los vídeos de este curso,

consulta el tutorial sobre HTML, al menos el apartado sobre conceptos básicos.

El lenguaje HTML está formado por etiquetas, que se escriben encerradas por los corchetes

angulares menor que y mayor que.

Desde que el lenguaje HTML se creó en el año 1990, el número de etiquetas que posee ha ido

aumentando y en la actualidad, en la versión HTML5, está formado por más de 100 etiquetas.

El elemento es el componente básico de una página web, una página web está compuesta por

un conjunto de elementos escritos en un orden concreto.

Un elemento se compone de una etiqueta inicial o de apertura, y una etiqueta final o de cierre.

La etiqueta final se define con una barra inclinada y el nombre de la etiqueta inicial.

La etiqueta inicial puede llevar atributos, pero la final nunca lleva. En HTML, los atributos

pueden llevar un valor. Por último, las etiquetas pueden tener contenido, que es todo lo que se

escriba entre la etiqueta inicial y final: el contenido puede estar formado por otras etiquetas de

HTML o puede ser simplemente texto.

Los elementos se pueden anidar, es decir, se pueden escribir unos dentro de otros, pero

respetando algunas reglas que tendrás que aprender.

En cualquier momento, puedes ver el código HTML de una página web cualquiera con la

opción “Ver código fuente” que puedes encontrar en la mayoría de los navegadores, a través

del menú contextual que puedes activar pulsando el botón derecho del ratón sobre una parte

vacía de una página web,

o a través del menú “Herramientas” en el caso del navegador Google Chrome y el menú “Ver”

en el resto de navegadores.

Al ver el código fuente de cualquier página lo normal es que al principio no entiendas nada y te

parezca chino. No te preocupes, a todos nos ha pasado eso al principio.

¿Cómo se aprende HTML? Pues igual que cualquier otro lenguaje, estudiando sus reglas, pero

sobre todo, viendo cómo otras personas lo usan y, por supuesto, usándolo.

Si no lo practicas, no lo aprenderás. Este es el primer consejo que te doy y el más importante:

practica, practica, practica y practica.

En este videotutorial vamos a empezar con las etiquetas esenciales para crear una página web

y con unas pocas etiquetas para poder escribir texto.

La etiqueta <html> es la etiqueta principal, sólo puede existir una y toda la página web debe

escribirse entre la etiqueta inicial y final de html.

La etiqueta <head> define la primera parte de una página web, la cabecera. Normalmente lo

que se escribe en la cabecera no aparece representado en la página web cuando se visualiza

en un navegador web, sino que se emplea para definir los metadatos, información sobre la

página o instrucciones sobre cómo procesar la página web. Dentro de la cabecera se puede

escribir la etiqueta <title> que es obligatoria, sólo puede haber una, y se emplea para definir el

título de la página.

Por último, la etiqueta <body> define la segunda parte de una página web, el cuerpo. Lo que se

escribe en el cuerpo sí que aparece representado en la página web cuando se visualiza en un

navegador web.

Las etiquetas <h1>, <h2>, y así hasta <h6>, se emplean para definir los encabezados o títulos

en la página. Existen seis niveles de importancia, siendo <h1> el más importante, y <h6> el

nivel menos importante. Normalmente, usarás los niveles <h1>, <h2> y <h3>, y es muy raro

que tengas que usar los niveles <h4>, <h5> y <h6>.

La etiqueta <p> se emplea para definir un párrafo de texto. Y la etiqueta <strong>, que ya la hemos

 visto antes, se emplea para destacar un fragmento de texto importante mientras que la etiqueta <em>

se emplea para definir un texto enfatizado.

¿Cuándo un texto está destacado o es enfatizado? Aunque en el estándar de HTML se

aconsejan algunos usos de las etiquetas <strong> y <em>, al final cada autor desarrolla su

propio estilo y decide cuándo utilizar una u otra.

Con todas estas etiquetas ya podemos hacer páginas web sencillas, que es lo que vamos a

hacer en la siguiente parte de este videotutorial. Recuerda que este vídeo forma parte del curso

“Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

AVISO IMPORTANTE

Este documento, su texto y gráficos e imágenes, puede ser utilizado bajo una licencia Creative Commons de tipo

Atribución, NoComercial.

En caso de utilizarse este material o de la creación de un derivado, la atribución se debe

respetar citando la fuente como “Actívate, Google España 2016” y expresamente, si es posible, mediante un enlace

activo a http://google.es/activate . Revisado, enero 2016.