Los comienzos siempre son difíciles... ¿Qué programa
necesito para escribir una página web? ¿Por dónde empiezo? ¿Qué pasa si me
equivoco? ¿Puedo romper algo?
Poco a poco, antes de correr hay que aprender a caminar.
En el siguiente vídeo se explica que HTML se emplea para definir la estructura y el contenido o información de una
página web, la presentación visual no se define con HTML (esto es muy
importante que lo recuerdes, no lo olvides). También se muestra la estructura
de un elemento (etiqueta) y se explican las etiquetas básicas (html, head,
title, body, h1, h2, h3, h4, h5, h6, p, strong, em).
Nota: Si la presentación visual no se define con HTML,
¿entonces con qué se define? Se define con CSS (Cascading Style Sheets), y no
te preocupes, eso te lo explicaremos más adelante. Ahora, recuerda, poco a
poco.
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).
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 (http://www.w3schools.com/html/default.asp). 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í se te muestra
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, en la línea 82 tenemos dos elementos de tipo
<strong>,
81 <div
class="span4">
82 <p>Un curso nuevo de tipo MOOC, <strong>totalmente
gratuito</strong> y
disponible en la Web (<strong>curso online</strong>),
83 con el que vas a aprender los
conceptos básicos del desarrollo de aplicaciones web.</p>
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 (línea 82) contiene estos
dos elementos de tipo <strong>.
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: <strong> y esta etiqueta final o de cierre: </strong>
. 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 qué ocurre lo mismo con este otro texto
“curso online” que también aparece marcado por la etiqueta <strong>.
Cuando se visualiza en el navegador, “curso online” también aparece destacado
en negrita. Estas dos etiquetas están anidadas, están dentro del párrafo que
podemos ver en el ejemplo, es decir dentro del párrafo comprendido entre las
etiquetas <p> y </p>. Como
verás las etiquetas no se visualizan en la página, solo son instrucciones de lo
que tiene que salir en la página.
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, práctica
y práctica.
En este video tutorial 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 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 el más importante <h1>, y el nivel menos
importante <h6>. 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 video
tutorial.