HTML Programacion Codigos

<!DOCTYPE html> <strong>hola esta es programacion en htlm</strong>

Instrucciones1. Colocá las tres líneas que mencionamos arriba, en la pestaña test.html que ahora

está vacía. 2. Entre la segunda y la última línea (entre <html> y </html>) podés 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 información sobre el archivo HTML, como por ejemplo su título. El título es lo que vemos en la barra de títulos del buscador o pestaña de la página. Por ejemplo, el título de esta página es "Conceptos básicos de HTML | Codecademy".

Instrucciones

Agreguemos una etiqueta y un título a nuestra página web. Si te trabás en alguna parte hacé clic más 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 título

<title> de inicio y una etiqueta </title> de cierre.3. Entre las etiquetas <title>, escribí un título para tu página web. Por ejemplo, “Mi

página web”.4. Hacé clic en “Guardar y enviar” para continuar.

Párrafos 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 información sobre tu archivo HTML, como, por ejemplo, el título.

El cuerpo es donde ingresás el contenido, como textos, imágenes y enlaces. El contenido del cuerpo es lo que se verá en la página real.

El cuerpo va dentro de las etiquetas , inmediatamente después de las etiquetas de título, así:

<html> <head> <title>Mi página web</title> </head> <body> </body></html>

Párrafos y encabezados

¡Definitivamente estamos avanzando mucho! Aprendimos cuándo y por qué usamos HTML. También aprendimos cómo:a. Configurar un archivo HTML con etiquetasb. Ponerle un título a la página web (en el encabezado o <head>) c. Crear párrafos (en el cuerpo o <body> con etiquetas <p>)En el siguiente paso pondremos encabezados a nuestros párrafos usando las etiquetas de encabezado. Vamos a comenzar con la etiqueta . Lo que aparece entre estas etiquetas tendrá la letra más grande.

Instrucciones

1. En la sección 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 párrafos, con cualquier contenido,

usando las etiquetas <p>.

<!DOCTYPE html><html>

<head><title>

Encabezados & Párrafos</title>

</head><body>

<h1>hola mundo</h1><p>"programacion hml"</p><p>con tomas</p>

</body></html>

Instrucciones

1. Tu código por ahora tiene un solo encabezado <h1> y dos párrafos.2. Agregá un encabezado <h3> antes del segundo párrafo.3. Agregá un encabezado <h5> después del segundo párrafo y un tercer párrafo

después de este encabezado.

<!DOCTYPE html>

<html><head>

<title>Encabezados & Párrafos

</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 lección

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 título <title> y las usamos para especificar el nombre de la página web.05. Cómo hacer encabezados y párrafos.


<head><title> Encabezados y párrafos</title>

</head><body> <h3> Encabezados y párrafos</h3> <p>mi perro</p> <p>ladra</p> <p>siempre</p></body>

</html>

rectamente a otro sitio web? Tenés que usar hipervínculos. También los podemos llamar vínculos, 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 adónde querés que vaya, en este caso http://www.codecademy.com. Después hay una descripción de tu enlace entre tu etiqueta <a> de apertura y tu etiqueta </a> de cierre. Ahí es donde podés 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-20-mejores-openings-de-series-anime-parte-2/los-20-mejores-openings-de-series-anime-parte-2_kt9h.jpg" /></a><img src="http://im.ziffdavisinternational.com/ign_es/screenshot/l/los-20-mejores-openings-de-series-anime-parte-2/los-20-mejores-openings-de-series-anime-parte-2_kt9h.jpg"/><a href="http://animeflv.net/ " >MI SITIO WEB FAVORITO</a>

</body></html>

Instrucciones

En la sección 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 descripción 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 imágenes

Podés agregar imágenes a tus sitios web para que queden más atractivos.

Usamos una etiqueta de imagen, como: <img>. Esta etiqueta es un poco diferente de las demás. En vez de colocar el contenido en medio de las etiquetas, le indicás a la etiqueta dónde buscar la imagen, usando src. También 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 página. (Podés verlo haciendo clic en el botón de “Vista previa”).

¿Ves la dirección web (o URL, por localizador de recursos uniforme) después de src=? Es "http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg ". Le dice a la etiqueta <img> dónde obtener la imagen.

Cada imagen en la web tiene su propio URL de imagen. Simplemente hacé clic con el botón derecho sobre una imagen y elegí "Copiar el URL de la imagen". Pegá ese URL entre comillas después 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:



</head><body>

<img src="http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg"/><img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/>

</body></html><!DOCTYPE html><html>


</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-20-mejores-openings-de-series-anime-parte-2/los-20-mejores-openings-de-series-anime-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-20-mejores-openings-de-series-anime-parte-2/los-20-mejores-openings-de-series-anime-parte-2_kt9h.jpg"/></a></body></html>

Listas ordenadas

¡Bien! Ahora vamos a aprender cómo hacer listas ordenadas. Una lista ordenada es simplemente una lista que está numerada, como la que aparece acá abajo.

1. En la línea 8, comenzamos la lista ordenada con la etiqueta de inicio <ol>.2. En las líneas 9 - 12, encerramos (es decir, rodeamos) cada elemento con etiquetas

<li> y </li>.3. Como cada ítem de la lista solo está en una línea, ponemos todo el elemento en una

línea.4. En la línea 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 párrafos como cosas que podemos usar en el cuerpo de HTML.

Instrucciones

1. En la línea 14, creá un encabezado de tamaño <h2> que se llame "Lista de mis comidas preferidas".

2. Desde la línea 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 más insoportables de la televisión”.

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 más me

gusta hacer los domingos”.5. Ahora hacé una lista ordenada de esto también.


<head><title>my page</title>

</head><body> <h3>Los famosos más insoportables de la televisión</h3> <ol> <li>tomas</li> <li>jerardo</li> <li>patricia</li> </ol>

<h2>Las 3 cosas que más 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 viñetas?

<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 línea 19 creá una lista no ordenada.2. Tu lista no ordenada debe tener dos ítems: "Nombres favoritos de varón" 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 más arriba como ejemplos de cómo 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 línea 1 en un comentario. ¡No modifiques el texto de la línea 3!



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



Tamaño de fuente

Acordate de que <p> y </p> son etiquetas de inicio y de cierre.

Les podemos dar a las etiquetas más instrucciones incluyendo atributos en la etiqueta de inicio. Un atributo es simplemente una característica o una descripción 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 tamaño del texto. ¿Cómo? Usamos el atributo style. Lo escribimos igual al tamaño de letra (font-size), seguido de dos puntos, del tamaño que deseamos, y finalizamos con px (abreviatura de "píxeles"). Por ejemplo:

<p style = "font-size: 12px">

Instrucciones

1. En la línea 7, hacé que el tamaño del texto sea de 10px.2. En la línea 8, hacé que el tamaño del texto sea de 20px.3. En la línea 9, hacé que el tamaño del texto sea de 40px.

Si tenés problemas con el tamaño 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 tamaño a 16px.2. Cambiá el color del primer párrafo a violeta.3. Cambiá el color del segundo párrafo a rojo y su tamaño de fuente a 10px.


<head><title>Cambiar colores</title>

</head><body>

<h1 style="color: green; font-size:16px">Título grande</h1>

<p style="color:violet;">Un oso gigante y un patito eran amigos.<p>

<p style="color:red; font-size:10px">Pero cuando crecieron se transformaron en archienemigos.</p>

</body></html>

Documents

HTML Programacion Codigos