Tutorial HTML

Por qu aprender HTML?
Cada pgina web que miras est escrita en un lenguaje llamado HTML. HTML es como un
esqueleto que le da estructura a cada pgina web. En este curso, usaremos HTML para
aadir prrafos, encabezados, imgenes y enlaces a una pgina web.
En el editor que puedes ver a la derecha hay una pestaa llamada test.html. Este es el
archivo en el cual vamos a escribir nuestro HTML. Ves el cdigo con los smbolos <>?
Eso es HTML. Como cualquier otro lenguaje, tiene su propia sintaxis (reglas para la
comunicacin) especial.
Cuando hacemos clic en Guardar y enviar, la ventana de resultados acta como
un navegador de Internet (como por ej. Crome, Firefox, Internet Explorer). La funcin de
un navegador es transformar el cdigo que est entest.html en una pgina web
reconocible. El navegador sabe cmo distribuir la pgina siguiendo la sintaxis HTML.
Instrucciones
1.
2.
A la derecha tenemos un archivo test.html.

Cambia el texto de la lnea 2 (la partecita que aparece entre <strong> y </strong>)
por lo que quieras.
3.
Hacer clic en Guardar y enviar y vas a ver cmo se vera en un navegador el
archivo test.html. Viste? Las etiquetas <strong></strong>resaltaron nuestro texto con
letra negrita.
HTML y CSS
HTML significa Hyper Text
Markup Language (Lenguaje de marcado de
hipertexto). Hipertexto quiere decir "texto que contiene enlaces". Cada vez que hacs clic
en una palabra que te lleva a otra pgina web, ests haciendo clic en un hipertexto.
Un lenguaje de marcado es un lenguaje de programacin usado para que el texto haga
algo ms que aparecer en una pgina: puede convertir texto en imgenes, enlaces,
cuadros, listas, y mucho ms. El lenguaje de marcado que aprenderemos es HTML.
Qu es lo que hace que una pgina web sea linda? Las CSS Cascading Style Sheets
(Hojas de estilo en cascada). Imaginate que es la piel y el maquillaje que cubre los huesos
del HTML. Primero vamos a aprender HTML y despus, en otros cursos, nos vamos a
ocupar de las CSS.
Lo primero que debemos hacer es configurar el esqueleto de la pgina.
a. Escrib siempre <!DOCTYPE html> en la primera lnea. Esto le dice al navegador qu
lenguaje
est
leyendo
(en
este
caso,
HTML).
b. Escrib siempre <html> en la lnea siguiente. Esto comienza el documento de HTML.
c. Escrib siempre </html> en la ltima lnea. Esto finaliza el documento de HTML.
Instrucciones
1.
Coloca las tres lneas que mencionamos arriba, en la pestaa test.html que ahora
est vaca.
2.
Entre la segunda y la ltima lnea (entre <html> y </html>) pods escribir cualquier
mensaje que quieras.
Terminologa bsica
Para aprender ms HTML, debemos aprender cmo hablar sobre HTML. Ya viste que
usamos mucho los smbolos<>.
El texto dentro de <> se llama etiqueta.
Las etiquetas casi siempre vienen de a pares: una etiqueta de inicio y una etiqueta de
cierre.
Un ejemplo de una etiqueta de inicio es: <html>
Un ejemplo de una etiqueta de cierre es: </html>
Imagina que las etiquetas son como parntesis; cuando abrs uno, despus tienes que
cerrarlo. Las etiquetas tambin pueden anidarse, as que tienes que cerrarlas en el orden
correcto: la ltima etiqueta que abriste debe ser la primera que cierres, como se muestra
en este ejemplo:
<primera etiqueta><segunda etiqueta>Algn texto</segunda etiqueta></primera etiqueta>
El ltimo ejercicio nos ense cmo configurar el archivo HTML. Todo lo que agreguemos
ahora ir en medio de <html> y </html>.
Instrucciones
1.
2.
3.
4.
Coloca la etiqueta <!DOCTYPE HTML>

Coloca las etiquetas </html> de inicio y de cierre.
Escrib lo que quieras en medio de las etiquetas <html>.
Hacer clic en Guardar y enviar para ver tu trabajo.
Hacer el encabezado
Todo dentro de nuestro archivo HTML ir en medio de las etiquetas de inicio <html> y de
cierre </html>.
El archivo siempre consiste de dos partes: el encabezado y el cuerpo. Vamos a empezar
con el encabezado.
El encabezado tiene informacin sobre el archivo HTML, como por ejemplo su ttulo. El
ttulo es lo que vemos en la barra de ttulos del buscador o pestaa de la pgina. Por
ejemplo, el ttulo de esta pgina es "Conceptos bsicos de HTML | Codecademy".
Instrucciones
Agrega una etiqueta de inicio <head> y una de cierre </head>.
1. En medio de las etiquetas <head> de inicio y de cierre, agrega una etiqueta de ttulo
<title> de inicio y una etiqueta </title> de cierre.
2. Entre las etiquetas <title>, escrib un ttulo para tu pgina web. Por ejemplo, Mi
pgina web.
3. Hacer clic en Guardar y enviar para continuar.
Prrafos del cuerpo del archivo

Muy bien! Para repasar, recordemos que un archivo HTML tiene un encabezado y un
cuerpo. El encabezado es donde se ingresa la informacin sobre tu archivo HTML, como,
por ejemplo, el ttulo. El cuerpo es donde ingresas el contenido, como textos, imgenes y
enlaces. El contenido del cuerpo es lo que se ver en la pgina real.
El cuerpo va dentro de las etiquetas, inmediatamente despus de las etiquetas de ttulo,
as:
Instrucciones
1. Debajo de la etiqueta </head> de cierre coloca una etiqueta <body> de inicio y una
etiqueta </body> de cierre, como en el ejemplo de arriba.
2. Dentro del cuerpo crea dos prrafos. Cada prrafo empieza con una etiqueta <p> de
inicio y termina con una etiqueta </p> de cierre. Podemos ingresar contenido entre
las etiquetas, as:
Prrafos y encabezados
Definitivamente estamos avanzando mucho! Aprendimos cundo y por qu usamos
HTML. Tambin aprendimos cmo:
a. Configurar un archivo HTML con etiquetas
b. Ponerle un ttulo a la pgina web (en el encabezado o <head>)
c. Crear prrafos (en el cuerpo o <body> con etiquetas <p>)
En el siguiente paso pondremos encabezados a nuestros prrafos usando las etiquetas
de encabezado. Vamos a comenzar con la etiqueta. Lo que aparece entre estas etiquetas
tendr la letra ms grande.
Instrucciones
1. En la seccin del cuerpo escrib un encabezado. Para esto, crea una etiqueta <h1>.
2. Agrega contenido.
3. Cierra ese elemento con una etiqueta de cierre de encabezado. El contenido que
agregaste debe quedar entre <h1> y </h1>.)
4. Debajo de las etiquetas de encabezado agrega dos prrafos, con cualquier contenido,
usando las etiquetas <p>.
Ms sobre encabezados
En realidad, HTML nos permite tener ms de un tamao de encabezados. Hay seis tamaos
de encabezados: <h1> es el ms grande, de mayor jerarqua y <h6> es el ms chiquito, de
menor jerarqua.
<h1> - El Presidente
<h2> - El Vicepresidente
<h3> - El Director
<h4> - El Vicedirector
<h5> - El Empleado
<h6> - El Cadete
A continuacin te pediremos que agregues encabezados de varios tamaos. Escrib lo que
quieras como encabezado.
Instrucciones
1. Tu cdigo por ahora tiene un solo encabezado <h1> y dos prrafos.
2. Agreg un encabezado <h3> antes del segundo prrafo.
3. Agreg un encabezado <h5> despus del segundo prrafo y un tercer prrafo
despus de este encabezado.
Usar todos los encabezados

Como en total hay seis tamaos de encabezados, deberamos usarlos todos.
Instrucciones
1. Agrega tres encabezados ms al cdigo, usando <h2>, <h4> y <h6>. Asegrate de
cerrar todas tus etiquetas.
2. Agrega un prrafo corto abajo de cada encabezado. No te olvides de que los
prrafos necesitan etiquetas <p></p> de inicio y de cierre.
Repaso de mitad de leccin

Hiciste un trabajo impresionante. Este es un resumen de lo aprendido:
01. HTML se usa para darle estructura a los sitios web.
02. Abrimos los archivos HTML usando un navegador, y el navegador reproduce el archivo
(nos lo muestra).
03. Los archivos HTML tienen un encabezado <head> y un cuerpo <body> (Igual que
nosotros, que tenemos cabeza y cuerpo).
04. En el encabezado tenemos las etiquetas de ttulo <title> y las usamos para especificar
el nombre de la pgina web.
05. Cmo hacer encabezados y prrafos.
Instrucciones
1. Agreg un ttulo entre las etiquetas de ttulo <title>.
2. Cre un encabezado de tamao <h3> en el cuerpo. En el encabezado pods escribir
lo que quieras (pero no te olvides de cerrarlo).
3. Cre tres prrafos usando las etiquetas <p> y llenalos con contenido (por ej., sobre
autos, tu mascota, tu ciudad favorita para ir de viaje, lo que quieras)
Visitar otros lugares

Qu pasara si quisieras mandar al usuario a otra parte de tu sitio web o directamente a
otro sitio web? Tens que usar hipervnculos. Tambin los podemos llamar vnculos, para
abreviar.
<a href="http://www.codecademy.com">Mi sitio web favorito</a>
1. Primero hay una etiqueta de apertura <a> y esa etiqueta tiene un atributo que se
llama href. El valor href le dice a tu enlace adnde quers que vaya, en este caso
http://www.codecademy.com.
2. Despus hay una descripcin de tu enlace entre tu etiqueta <a> de apertura y tu
etiqueta </a> de cierre. Ah es donde pods hacer clic.
3. Finalmente aparece la etiqueta </a> de cierre.
Instrucciones
1. En la seccin del cuerpo, cre un enlace. Para hacerlo, agreg una etiqueta <a>.
Indicale a tu enlace un sitio web estableciendo el valor del atributo href.
2. Agreg una descripcin de tu enlace.
3. Cerr el elemento con una etiqueta </a> de cierre.
Agregar imgenes
Puedes agregar imgenes a tus sitios web para que queden ms atractivos.
Usamos una etiqueta de imagen, como: <img>. Esta etiqueta es un poco diferente de las
dems. En vez de colocar el contenido en medio de las etiquetas, le indicas a la etiqueta
dnde buscar la imagen, usando src. Tambin es diferente porque no hay etiqueta de cierre.
Tiene una barra / en la etiqueta para cerrarla: <img src="url" />.
Mira la etiqueta que est a la derecha: le agrega una imagen de un pato de goma a la pgina.
(Puedes verlo haciendo clic en el botn de Vista previa).
Ves la direccin web (o URL, por localizador de recursos uniforme) despus de src=? Es
"http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg ". Le dice a la
etiqueta <img> dnde obtener la imagen.
Cada imagen en la web tiene su propio URL de imagen. Simplemente hacer clic con el
botn derecho sobre una imagen y eleg "Copiar el URL de la imagen". Pega ese URL entre
comillas despus de src= para insertarlo con tu etiqueta de imagen <img>.
Instrucciones
Agrega una segunda imagen debajo de la primera. (Asegrate de que sea antes de la
etiqueta </body> de cierre del cuerpo).
Si no se te ocurre una buena imagen, usa este ninja:
Hac clic en esa imagen
Muy bien! Ahora ya sabes cmo agregar enlaces e imgenes a tu sitio web. Pero, qu tal
si quisieras convertir esa imagen en un enlace? Por ejemplo:
<a href=" http://www.buenosaires.gob.ar">
<img src="http://s3.amazonaws.com/codecademyblog/assets/f3a16fb6.jpg"/>
</a>
1. Primero abrimos nuestra etiqueta <a> e dirigimos href a

http://www.codecademy.com/ otra vez.
2. Pero esta vez, en lugar de usar texto dentro de la etiqueta <a>, usamos una etiqueta
de imagen <img>.
3. Finalmente colocamos la etiqueta de cierre </a>.
Ahora, cuando hagas clic en el pato amarillo irs a http://www.codecademy.com
colocar una etiqueta HTML dentro de otra se denomina anidado.
Instrucciones
1. En la seccin del cuerpo crea una etiqueta <a>.
2. Eleg un sitio web adonde dirigir tu enlace, como <a
href="http://www.codecademy.com">.
3. Ahora cre tu etiqueta <img> entre tu etiqueta <a> de inicio y tu etiqueta </a> de
cierre. No te olvides del src!
4. Finalmente cerr la etiqueta </a> despus de la etiqueta <img>
Imgenes y enlaces
1. Entre las etiquetas <body> del cuerpo agreg dos imgenes utilizando la etiqueta
<img>. Una debe ser un enlace; la otra no. El enlace puede ir adonde quieras.
2. Despus de tus dos imgenes, cre un enlace que simplemente sea una lnea de
texto. Puede llevarte adonde quieras. Si necesitas ayuda le el Consejo.
Los enlaces funcionan as:
<a href="URL del sitio web"></a>
Pods encerrar una imagen con un enlace:
<a href="URL del sitio web"><img src="URL de la imagen" /></a>
Ejemplo de pgina web
En la siguiente imagen muestra un ejercicio parecido al anterior. Ahora se crea

una web personalizada donde se aplica una imagen, 2 url.
Introduccin
Vamos a seguir aprendiendo ms HTML. Ya vimos un montn: cmo configurar las

etiquetas <head> y <body>, cmo hacer encabezados y prrafos, y cmo agregar imgenes
y enlaces.
En este curso vamos a aprender lo siguiente:
a. cmo hacer listas ordenadas y desordenadas
b. cmo cambiar el tamao, color y tipo de fuente
c. cmo cambiar el color del fondo
d. cmo alinear el texto
Instrucciones
1. Vamos a empezar por agregar un ttulo <title> en el encabezado <head>.
2. En el cuerpo, inclu un prrafo (usando <p>). Escrib lo que quieras!
Acurdate de la indentacin
Ahora es un buen momento para hablar de la indentacin, es decir, el espaciado que hay
desde el margen en cada lnea. Vas a ver que cuando ponemos etiquetas dentro de otras
etiquetas, las indentamos todava ms. Esto ayuda a que tu cdigo se pueda leer mejor!
Mir a la derecha las indentaciones que pusimos en el editor. Trat de copiar este estilo de
indentaciones cuando ests escribiendo HTML, para no confundirte.
Listas ordenadas
Bien! Ahora vamos a aprender cmo hacer listas ordenadas. Una lista ordenada es
simplemente una lista que est numerada, como la que aparece ac abajo.
1. En la lnea 8, comenzamos la lista ordenada con la etiqueta de inicio <ol>.
2. En las lneas 9 - 12, encerramos (es decir, rodeamos) cada elemento con etiquetas
<li> y </li>.
3. Como cada tem de la lista solo est en una lnea, ponemos todo el elemento en una
lnea.
4. En la lnea 13, finalizamos la lista ordenada con la etiqueta de cierre </ol>.
Qu te parece esto? Ahora podemos agregar listas ordenadas a los encabezados y a los
prrafos como cosas que podemos usar en el cuerpo de HTML.
Instrucciones
1. En la lnea 14, crea un encabezado de tamao <h2> que se llame "Lista de mis
comidas preferidas".
2. Desde la lnea 15, crea una lista ordenada usando la etiqueta <ol>.
3. Tu lista ordenada debe tener tres tems, cada uno encerrado (es decir, rodeado) por
etiquetas <li>.
Otra
ordenada
lista
Las listas ordenadas nos parecen, de verdad, excelentes. A quin no le gusta un poquito de
orden? As que vamos a practicar un poco ms. Si te olvidaste de qu es una lista ordenada,
pods volver a mirar la seccin anterior.
Instrucciones
1. Dale un titulo a tu pagina y en la etiqueta <body> cre una etiqueta <h3> con el
texto: Los famosos ms insoportables de la televisin.
2. Hac una lista ordenada con la etiqueta <ol> de las 3 personas de la TV que menos
te gusten. Acordate: deben ir entre las etiquetas de listas <li>.
3. Acordate de cerrar tu lista con la etiqueta </ol>
4. Debajo de esta lista, hac un encabezado <h2> que diga Las 3 cosas que ms me
gusta hacer los domingos.
5. Ahora hac una lista ordenada de esto tambin.
Listas no ordenadas
Aprendimos a hacer listas ordenadas. Pero si el orden no importa? Si solamente
queremos usar vietas?
<h2>Ingredientes para empanadas de carne</h2>
<ul>
<li>Carne picada</li>
<li>Cebollas</li>
</ul>
Esto te hace acordar a algo?

1. Primero abrimos una lista con una etiqueta <ul> de listas no ordenadas
2. Para cada tem que queremos agregar a la lista usamos una etiqueta de tem de lista
<li> con texto en el medio.
3. Luego le decimos al explorador que terminamos de hacer la lista con la etiqueta de

cierre </ul>
Instrucciones
1. En tu etiqueta <body> del cuerpo, insert una etiqueta <h1> y escrib 'Algunos
pensamientos al azar dentro de esa etiqueta.
2. Debajo de la etiqueta <h1> escrib un prrafo usando la etiqueta <p>, que describa la
lista que vas a hacer.
3. Finalmente cre una lista no ordenada con la etiqueta , que contenga una lista de
cuatro pensamientos al azar, cada uno de los cuales debe colocarse dentro de una
etiqueta .
Listas dentro de una lista

Hiciste listas ordenadas y no ordenadas. Excelente trabajo!
Qu pasa si tens una lista ordenada, pero cada tem de esa lista tambin tiene anidada una
lista no ordenada? Anidado significa 'dentro' de la lista. En el editor hay un ejemplo. Hac
clic en Guardar y enviar para ver cmo queda.
Acordate: ya has anidado etiquetas. Cuando anids etiquetas la ltima etiqueta que abrs es
la primera que tens que cerrar. Mir este ejemplo:
`<ul><li>Empanadas</li></ul>`
Instrucciones
1. En la lnea 19 cre una lista no ordenada.
2. Tu lista no ordenada debe tener dos tems: "Nombres favoritos de varn" y
"Nombres favoritos de mujer".
3. Crea una lista ordenada debajo de cada tem de la lista no ordenada. Us la lista
ordenada para especificar tus 3 nombres favoritos de chicos y tus 3 nombres
favoritos de chicas. Us las listas anidadas que ves ms arriba como ejemplos de
cmo hacer esto.
Hacer
comentarios
Vimos mucho sobre listas. Vamos a cambiar de tema y a hacer un poco de estilo. Si te
acuerdas, dijimos que HTML es el esqueleto de la pgina web y que CSS te permite darle al
esqueleto algo de piel y de maquillaje.
Pero es posible hacer algo de CSS inline (en lnea). Esto simplemente quiere decir que
podemos darle algo de estilo a nuestro archivo HTML sin preocuparnos por un archivo CSS
aparte. Vamos a aprender esto primero, as aprender CSS despus te resulta ms fcil.
Antes de meternos de lleno en las fuentes, es importante aprender cmo hacer comentarios.
Pods incluir algunas notas cortas en tu cdigo HTML, que el navegador no mostrar. Pero
estarn en el cdigo para ayudarte a recordar porqu hiciste ciertas cosas.
Instrucciones
1. Los comentarios comienzan con , as:

1. Convert el texto de la lnea 1 en un comentario. No modifiques el texto de la lnea

3!
Tamao de fuente
Acordate de que <p> y </p> son etiquetas de inicio y de cierre.
Les podemos dar a las etiquetas ms instrucciones incluyendo atributos en la etiqueta de

inicio. Un atributo es simplemente una caracterstica o una descripcin del contenido que
aparece en el elemento. Ya viste los atributos con src en la etiqueta <img> y href en la
etiqueta <a>.
Vamos a cambiar el tamao del texto. Cmo? Usamos el atributo style. Lo escribimos
igual al tamao de letra (font-size), seguido de dos puntos, del tamao que deseamos, y
finalizamos con px (abreviatura de "pxeles"). Por ejemplo:
<p style = "font-size: 12px">
Instrucciones
1. En la lnea 7, hac que el tamao del texto sea de 10px.
Si tens problemas con el tamao de las fuentes, ajust el zoom de tu buscador haciendo
clic en Cmd-0 o Ctrl-0.
Color de fuente
Lo mejor del atributo style es que lo usamos un montn. Adems podemos usarlo con
muchas etiquetas diferentes, no solamente con <p>. Ahora vamos a cambiar los colores del
texto en un encabezado.
Para cambiar el color del texto, simplemente agrega el atributo style en la etiqueta de inicio
y despus hacer que el estilo sea igual a "color:blue" (color azul) o cualquier color que
quieras. Por ejemplo:
<h2 style="color:red">
Y qu tal si quers cambiar el color y el tamao del texto? Fcil. Solo tens que agregar un
punto y coma entre medio. Por ejemplo:
<h2 style="color: green; font-size:12px">
Nota: No escribas algo as:
<h2 <h2 style="color: green; font-size:12px">
Si anidas tus etiquetas HTML incorrectamente, como en el ejemplo, tu cdigo no se

aceptar.
Instrucciones
1. Cambia el color del encabezado a verde y su tamao a 16px.
2. Cambia el color del primer prrafo a violeta.
3. Cambia el color del segundo prrafo a rojo y su tamao de fuente a 10px.

Tutorial HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Tutorial HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Por qu aprender HTML?

A la derecha tenemos un archivo test.html.

Coloca la etiqueta <!DOCTYPE HTML>

Prrafos del cuerpo del archivo

Usar todos los encabezados

Repaso de mitad de leccin

Visitar otros lugares

Hac clic en esa imagen

1. Primero abrimos nuestra etiqueta <a> e dirigimos href a

Ejemplo de pgina web

En la siguiente imagen muestra un ejercicio parecido al anterior. Ahora se crea

Vamos a seguir aprendiendo ms HTML. Ya vimos un montn: cmo configurar las

Esto te hace acordar a algo?

3. Luego le decimos al explorador que terminamos de hacer la lista con la etiqueta de

Listas dentro de una lista

1. Convert el texto de la lnea 1 en un comentario. No modifiques el texto de la lnea

Les podemos dar a las etiquetas ms instrucciones incluyendo atributos en la etiqueta de

Nota: No escribas algo as:

<h2 <h2 style="color: green; font-size:12px">

Si anidas tus etiquetas HTML incorrectamente, como en el ejemplo, tu cdigo no se

Você também pode gostar