HTML Programacion Codigos

<!
DOCTYPE html>
<strong>hola esta es programacion en htlm</strong>
Instrucciones
1. Coloc 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.
<!DOCTYPE html>
<html> hola mi nombnre es tomas</html>
Hac 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
Agreguemos una etiqueta y un ttulo a nuestra pgina web. Si te trabs en alguna parte hac
clic ms abajo en Te trabaste? Te damos un consejo para ver un ejemplo.
1. Agreg una etiqueta de inicio <head> y una de cierre </head>.
2. En medio de las etiquetas <head> de inicio y de cierre, agreg una etiqueta de ttulo
<title> de inicio y una etiqueta </title> de cierre.
3. Entre las etiquetas <title>, escrib un ttulo para tu pgina web. Por ejemplo, Mi
pgina web.
4. Hac 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 ingress 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:
<html>
<head>
<title>Mi pgina web</title>
</head>
<body>
</body>
</html>
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, cre una etiqueta <h1>.
2. Agreg contenido.
3. Cerr 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 agreg dos prrafos, con cualquier contenido,
usando las etiquetas <p>.
<!DOCTYPE html>
<html>
<head>
<title>
Encabezados & Prrafos
</title>
</head>
<body>
<h1>hola mundo</h1>
<p>"programacion hml"</p>
<p>con tomas</p>
</body>
</html>
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.
<!DOCTYPE html>
<html>
<head>
<title>
Encabezados & Prrafos
</title>
</head>
<body>
<h1>hola mundo</h1>
<p>"programacion hml"</p>
<h3>tierra</h3>
<p>con tomas</p>
<h5>marte</h5>
<p>planeta ovni</p>
</body>
</html>
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.
<!DOCTYPE html>
<html>
<head>
<title>
Encabezados y prrafos
</title>
</head>
<body>
<h3> Encabezados y prrafos</h3>
<p>mi perro</p>
<p>ladra</p>
<p>siempre</p>
</body>
</html>
rectamente 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>
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.
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.
Finalmente aparece la etiqueta </a> de cierre.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="http://animeflv.net/"
<img src="http://im.ziffdavisinternational.com/ign_es/screenshot/l/los-20mejores-openings-de-series-anime-parte-2/los-20-mejores-openings-de-seriesanime-parte-2_kt9h.jpg" /></a>
<img src="http://im.ziffdavisinternational.com/ign_es/screenshot/l/los-20mejores-openings-de-series-anime-parte-2/los-20-mejores-openings-de-seriesanime-parte-2_kt9h.jpg"/>
<a href="http://animeflv.net/ " >MI SITIO WEB FAVORITO</a>
</body>
</html>
Instrucciones
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.
Agreg una descripcin de tu enlace.
Cerr el elemento con una etiqueta </a> de cierre.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="http://www.codecademy.com">Mi sitio web favorito</a>
</body>
</html>
Agregar imgenes
Pods 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 indics 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" />.
Mir la etiqueta que est a la derecha: le agrega una imagen de un pato de goma a la pgina.
(Pods 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 hac clic con el
botn derecho sobre una imagen y eleg "Copiar el URL de la imagen". Peg ese URL entre
comillas despus de src= para insertarlo con tu etiqueta de imagen <img>.
Instrucciones
Agreg una segunda imagen debajo de la primera. (Asegurate de que sea antes de la
etiqueta </body> de cierre del cuerpo).
Si no se te ocurre una buena imagen, us este ninja:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="http://s3.amazonaws.com/codecademyblog/assets/f3a16fb6.jpg"/>
<img src="http://s3.amazonaws.com/codecademyblog/assets/ninja_zpsa5dbe37a.jpg"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href=link> es para poner el vinculo en la imagen //
<a href="http://animeflv.net/">
<img src="http://im.ziffdavisinternational.com/ign_es/screenshot/l/los-20mejores-openings-de-series-anime-parte-2/los-20-mejores-openings-de-seriesanime-parte-2_kt9h.jpg"/></a>
</body>
</html>
Mi pagina web
<!DOCTYPE html>
<html>
<head>
<title>
encabezados y parrafo
</title>
</head>
<body>
<h1>mi pagina web</h1>
<p> mi pagina web es sencilla</p>
<a href="http://animeflv.net/">
<img src="http://im.ziffdavisinternational.com/ign_es/screenshot/l/los-20mejores-openings-de-series-anime-parte-2/los-20-mejores-openings-de-seriesanime-parte-2_kt9h.jpg"/></a>
</body>
</html>
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, cre 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>.
<!DOCTYPE html>
<html>
<head>
<title>Listas</title>
</head>
<body>
<h1>Lista de mis comidas preferidas</h1>
<ol>
<li>Me gustan las milanesas</li>
<li>Me gustan las
empanadas</li>
<li>Me gusta el locro</li>
<li>Me gusta el asado</li>
</ol>
<h2>ista de mis comidas preferidas</h2>
<ol>
<li>my home</li>
<li>my inochi</li>
<li>my sekai</li>
</ol>
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.
<!DOCTYPE html>
<html>
<head>
<title>my page</title>
</head>
<body>
<h3>Los famosos ms insoportables de la
televisin</h3>
<ol>
<li>tomas</li>
<li>jerardo</li>
<li>patricia</li>
</ol>
<h2>Las 3 cosas que ms me gusta hacer los domingo</h2>
<ol>
<li>games </li>
<li>programation</li>
<li>electronic</li>
</ol>
</body>
</html>
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>
<!DOCTYPE html>
<html>
<head>
<title>Listas no ordenadas</title>
</head>
<body>
<h1>Algunos pensamientos al azar</h1>

<p>las lista que se hace acontinuacion es la
especialidad que me gusta aprender</p>
<u1>
<li>electronic</li>
<li>programation</li>
<li>games</li>
</u1>
</body>
</html>
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
<ol>
<li>liksta de nombres de chica</li>
<ul>
<li>maria</li>
<li>fernanda</li>
<li>sol</li>
</ul>
<li>lista de nombres de chicos</li>
<ul>
<li>tomas</li>
<li>juan</li>
<li>juan1</li>
</ul>
</ol>
</body>
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!

<p>Que sea visible para el usuario.</p>

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.
1. Cambi el color del encabezado a verde y su tamao a 16px.

2. Cambi el color del primer prrafo a violeta.
3. Cambi el color del segundo prrafo a rojo y su tamao de fuente a 10px.
<!DOCTYPE html>
<html>
<head>
<title>Cambiar colores</title>
</head>
<body>
<h1 style="color: green; font-size:16px">Ttulo
grande</h1>
<p style="color:violet;">Un oso gigante
y un patito eran amigos.<p>
<p style="color:red; fontsize:10px">Pero cuando crecieron se transformaron en archienemigos.</p>
</body>
</html>

HTML Programacion Codigos

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Programacion Codigos

Uploaded by

Copyright:

Available Formats

<!

Prrafos del cuerpo del archivo

2. Agreg un encabezado <h3> antes del segundo prrafo.

Repaso de mitad de leccin

Esto te hace acordar a algo?

<h1>Algunos pensamientos al azar</h1>

1. Los comentarios comienzan con , as:

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

1. Cambi el color del encabezado a verde y su tamao a 16px.

You might also like