Tip:
Highlight text to annotate it
X
Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante,
y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te
voy a ayudar con tus primeros pasos con el lenguaje de etiquetado HTML.
Antes de empezar, me gustaría recordarte algunos de los sitios web en los que puedes
encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo,
a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.
Si ya has visto las dos partes del vídeo “Historia de la Web: su nacimiento”, sabrás
que Tim Berners-Lee 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.
Cuando busques información sobre HTML, recuerda que en la actualidad se está desarrollando
la versión 5, que se espera que alcance el rango de recomendación oficial en el año
2014. Aunque todavía no esté terminada su especificación, ya puedes empezar a usarlo,
aunque con mucho cuidado.
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.
En este ejemplo, la etiqueta se llama p y define un párrafo de texto de la página.
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 como en este ejemplo.
Los elementos se pueden anidar, es decir, se pueden escribir unos dentro de otros, pero
respetando algunas reglas que tendrás que aprender. Por ejemplo, esto que vemos es un
fragmento del código HTML de una página web, en concreto, de la página principal
del curso iDESWEB.
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.
Aquí te muestro un fragmento del código de la página principal del curso iDESWEB.
Con lo visto hasta ahora, ya deberías de reconocer qué es un elemento. Por ejemplo,
aquí tenemos dos elementos de tipo , que se emplea para destacar una parte del
texto, y deberías saber que se pueden anidar, es decir, que se pueden escribir unos elementos
dentro de otros, como en este ejemplo en el que este párrafo contiene estos dos elementos
de tipo .
Fíjate en este ejemplo cómo se corresponde el código HTML con lo que luego se ve en
la página web.
Aquí tenemos este texto, “totalmente gratuito”, que es el contenido de este elemento strong,
aparece marcado por esta etiqueta de inicio y esta etiqueta final
o de cierre. Cuando se visualiza la página web, el navegador muestra, pinta, el texto
“totalmente gratuito” destacado, en este caso en negrita. Eso es así porque la función,
la semántica, el significado de la etiqueta es destacar el texto que contiene.
Podemos ver que ocurre lo mismo con este otro texto “curso online” que también aparece
marcado por la etiqueta . Cuando se visualiza en el navegador, “curso online”
también aparece destacado en negrita. Estas dos etiquetas están anidadas, están
dentro de este párrafo que podemos ver aquí. Todo este texto, y todo este otro texto, que
se corresponde, cuando se visualiza la página web, con todo este texto que forma el primer
párrafo.
A continuación tenemos otro párrafo, el que contiene el texto “Aprende HTML, CSS,
JavaScript, PHP, y los principios básicos del diseño” que se corresponde con el segundo
párrafo. Y por último tenemos este texto “Empezamos
el 10 de septiembre”, que podemos ver que se visualiza, el navegador lo muestra destacado,
lo muestra en negrita. Ya puedes imaginar cómo está este texto etiquetado, como está
marcado en el código fuente HTML. Efectivamente, “Empezamos el 10 de septiembre” aparece
encerrado entre las etiquetas de inicio y la etiqueta de cierre.
Y a su vez todo ello forma este tercer párrafo
de texto.
El lenguaje HTML es un lenguaje, y como tal, tiene su vocabulario, sus palabras con sus
significados, y su gramática, sus reglas que nos indican cómo podemos combinar sus
palabras para formar textos complejos.
¿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 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 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 que es obligatoria, sólo puede haber una, y se emplea para definir
el título de la página.
Por último, la etiqueta 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 , , y así hasta , se emplean para definir los encabezados o
títulos en la página. Existen seis niveles de importancia, siendo el más importante,
y el nivel menos importante. Normalmente, usarás los niveles , y , y es
muy raro que tengas que usar los niveles , y .
La etiqueta se emplea para definir un párrafo de texto.
Y la etiqueta , que ya la hemos visto antes, se emplea para destacar un fragmento
de texto importante mientras que la etiqueta 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 y , 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.