HTML Css 2016

Por qu aprender HTML?
Cada pgina web que ves est escrita en un lenguaje llamado HTML. Imagina que HTML es el
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 de la parte derecha hay una pestaa llamada test.html. Este es el archivo en el cual
escribiremos nuestro HTML. Ves el cdigo con los smbolos de <>? Eso es HTML! Al igual que
cualquier otro lenguaje, tiene su propia sintaxis (reglas para la comunicacin) especial.
Cuando presionemos Ejecutar, la pestaa de resultados actuar como un navegador de Internet
(*p. ej, * Chrome, 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. A la derecha tenemos un archivotest.html.
2. Cambia el texto en la lnea 3 por lo que quieras!
3. Tambin hay una pestaa de 'Resultados'. Funciona igual que un navegador.
4. Presiona Ejecutar, y vers como el archivo test.html se vera en un navegador. Viste? Las
etiquetas<strong></strong> convirtieron nuestro texto en negrilla!
1. <!DOCTYPE html>
2. <strong>Puedes cambiar este texto si lo deseas.</strong>
3. <br>
4. <strong> HOLA ME LLAMO DANNY </strong>
HTML y CSS
HTML significa HyperText Markup Language (lenguaje de marcado de

hipertexto). Hipertexto quiere decir "texto que contiene enlaces." Cada vez que haces clic en una
palabra que te lleva a una nueva pgina web, haz hecho clic en un hipertexto!
Un lenguaje de marcado es un lenguaje de programacin usado para que el texto haga ms que
solamente aparecer en una pgina; puede convertir el texto en imgenes, enlaces, tablas, listas, y
mucho ms. El lenguaje de marcado que aprenderemos es HTML.
Qu es lo que hace bonita a una pgina web? Eso es CSSCascading Style Sheets (hojas de estilo
en cascada). Imagina que es la piel y el maquillaje que cubre los huesos del HTML. Primero
aprenderemos HTML, despus, en cursos posteriores, nos ocuparemos del CSS.
La primera cosa que debemos hacer es configurar el esqueleto de la pgina.

a. Escribe siempre <!DOCTYPE html> en la primera lnea. Esto le dice al navegador cul es el
lenguaje que est leyendo (en este caso, HTML).
b. Escribe siempre <html> en la segunda lnea. Esto comienza el documento de HTML.
c. Escribe siempre </html> en la ltima lnea. Esto finaliza el documento de HTML.
Instrucciones
1. Coloca las tres etiquetas que mencionamos arriba en test.html.
2. En medio de la segunda y la ltima lnea (en medio de <html> y </html>), puedes escribir
cualquier mensaje que desees.
1. <!DOCTYPE html>
2. <html>
3. <p>HI FRIENDS</p>
4. </html>
Terminologa bsica
Para aprender ms HTML, debemos aprender cmo hablar sobre HTML. Ya viste que usamos
mucho los smbolos<>.
Las cosas adentro de <> se llaman etiquetas.
Las etiquetas casi siempre vienen en pares: una etiqueta de inicio y una etiqueta de cierre.
Un ejemplo de una etiqueta de inicio: <html>
Un ejemplo de una etiqueta de cierre: </html>
Imagina que las etiquetas son como parntesis; cuando abres uno, debes cerrarlo. Las etiquetas
tambin pueden anidarse, as que debes cerrarlas en el orden correcto: la etiqueta abierta ms
recientemente debe ser la primera que se cierre, como en el ejemplo de abajo.
El ltimo ejercicio nos ense cmo configurar el archivo HTML. Todo lo que haremos ahora
ir en medio de<html> y </html>.
La prctica hace al maestro! Una cosa ms:
Instrucciones
1. Coloca la etiqueta !DOCTYPE HTML.
2. Coloca las etiquetas html de inicio y de cierre.
3. Escribe lo que quieras en medio de las etiquetas html.
4. Presiona Ejecutar para ver tu trabajo!
Haz la cabecera
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: la cabecera y el cuerpo. Vamos a
concentrarnos en la cabecera.
a. Tiene una etiqueta de inicio y una de cierre.
b. La cabecera incluye informacin importante, como el ttulo de la pgina web.
c. El ttulo son las palabras que vemos en la etiqueta (por ejemplo, el ttulo de esta pgina es
"Introduccin a HTML").
Instrucciones
1. Aade una etiqueta de cabecera de inicio y una de cierre. Consulta la Sugerencia para
saber ms.
2. En medio de las etiquetas de cabecera, aade etiquetas de inicio y de cierre para el ttulo.
3. En medio de las etiquetas de ttulo, escribe el nombre de tu pgina web como Pgina Web.
4. Presiona ejecutar. Observa cmo la pestaa Resultados cambia su nombre!
<!DOCTYPE html>
<html>
<head>
<title>pgina web de malo hasta los huesos s.a.</title>
</head>
</html>
Prrafos en el cuerpo
Hemos configurado muchas de las cosas bsicas de tu archivo HTML para ti. Lo hicimos para que
no te enfadaras con nosotros por tanta repeticin; aprndelas muy bien!
Hemos aprendido acerca de las etiquetas de inicio y de cierre. Cuando colocamos contenido en
medio de las etiquetas, el trozo completo de cdigo es llamado un elemento.
elemento = <etiqueta de inicio> + contenido + <etiqueta de cierre>
Observa que ahora tenemos las dos etiquetas del ttulo y del cuerpo! El contenido en el cuerpo es
lo que ser visible en la pgina real.
Instrucciones
1. Escribe el nombre de tu pgina en medio de las etiquetas del ttulo. Puede ser cualquier
cosa!
2. Coloca las etiquetas de cierre y de inicio del cuerpo debajo de la etiqueta de cierre de
cabecera.
3. Vamos a crear prrafos dentro del cuerpo! Cada prrafo requiere etiquetas de inicio y de
cierre: <p> y</p>. Colocamos el contenido en medio de las etiquetas.
4. En medio de las etiquetas de cuerpo, crea dos prrafos y escribe contenido en cada prrafo.
(Para esto se requerirn 2 pares de etiquetas p).
<!DOCTYPE html>
<html>
<head> <title> MY LOVE </title></head>
<P>HTML Y CSS</P>
<body>
<p>Buscndote</p>
<p>Amndote</p>
</body>
</html>
Prrafos y encabezados
Definitivamente estamos haciendo un buen progreso! Hemos aprendido cundo y por qu
usamos HTML. Tambin hemos aprendido cmo:
a. Configurar un archivo HTML con etiquetas
b. Ponerle un ttulo a la pgina web (en la cabecera, o <head>)
c. Crear prrafos (en el cuerpo, o<body>)
El siguiente paso es colocarle encabezados a nuestros prrafos, usando las etiquetas de encabezado.
Vamos a comenzar con la etiqueta<h1>, que marca una cosa como la ms importante. (Todos
saben que la fuente ms importante es la ms grande!)
Instrucciones
1. Pregntate a ti mismo: cul es el ttulo de esta pgina?
2. Crea un encabezado en la seccin del cuerpo. Para hacerlo, crea una etiqueta <h1>.
3. Ponle un encabezado a tu contenido. Puede ser cualquier cosa!
4. Cierra el elemento con una etiqueta de cierre </h1>. (Tu encabezado ahora debe estar en
medio de <h1> y </h1>.)
5. Debajo del encabezado, crea dos prrafos con el contenido que quieras.
<!DOCTYPE html>
<html>
<head><title>Encabezados y Prrafos</title></head>
<body>
<h1><p>Hola querido amigo</p></h1>
<p>Como te va mi amor</p>
</body>
</html>
Ms sobre los encabezados!

En realidad, HTML nos permite tener ms de un tamao de encabezado. Hay seis tamaos de
encabezado: <h1> es el jefe de todos y <h6> es un enclenque!
<h1> - El Presidente Ejecutivo
<h2> - El Vicepresidente Elegante
<h3> - El director de algo
<h4> - El de gerencia intermedia
<h5> - El humilde asistente
<h6> - El que les lleva caf a los dems
A continuacin te pediremos que aadas encabezados de varios tamaos. Puedes escribir lo que
quieras como encabezados!
Instrucciones
1. Actualmente tu cdigo tiene un encabezado <h1> y dos prrafos.
2. Aade un encabezado <h3> antes del segundo prrafo.
3. Aade un encabezado <h5>despus del segundo prrafo, y luego aade un tercer prrafo
despus de este encabezado.
<!DOCTYPE html>
<html>
<head>
<title>
Encabezados y Prrafos
</title>
</head>
<body>
<h3><p>Como te va mi amor</p></h3>
<h5><p>En el silencio</p></h5>
</body>
</html>
Usando todos los encabezados

Buen trabajo! Hasta ahora hemos usado encabezados de tres tamaos diferentes. Dado que en
total son seis tamaos de encabezados, deberamos usarlos todos. (Incluso <h6>, nuestro humilde
practicante encabezado que lleva caf, necesita sentirse til.)
Instrucciones
1. Aade tres encabezados ms al cdigo, haciendo uso de <h2>, <h4> y<h6>. Asegrate de
cerrar todas tus etiquetas!
2. Aade un prrafo corto debajo de cada encabezado. No olvides que los prrafos necesitan
etiquetas de inicio y de cierre <p></p>!
<!DOCTYPE html>
<html>
<head><title>Encabezados y Prrafos</title></head>
<body>
<h2><p>Como te va</p></h2>
<h3><p>Que haces tan lejos</p></h3>
<h4><p>Mi vida es un desierto</p></h4>
<h5><p>Sin ti</p></h5>
<h6><p>Sin ti</p></h6>
</body>
</html>
Repaso de mitad de leccin

Has hecho un trabajo fantstico! Aqu hay un resumen rpido de las cosas que hemos aprendido:
1. HTML se usa para dale estructura a los sitios web.
2. Abrimos los archivos HTML usando un navegador, y el navegador traduce el archivo (nos
lo muestra).
3. Los archivos HTML tienen una cabecera y un cuerpo (as como t tienes una cabeza y un
cuerpo!)
4. En la cabecera encontramos las etiquetas <title>, y las usamos para especificar el nombre
de la pgina web.
5. Cmo hacer encabezados y prrafos.
Instrucciones
1. Aade un ttulo en medio de las etiquetas de ttulo.
2. Crea un encabezado de tamao<h3> en el cuerpo. Haz que tu encabezado diga lo que
quieras! (Pero no te olvides de cerrarlo.)
3. Crea tres prrafos y llnalos con contenido (p.ej, sobre carros, tu mascota, tu ciudad
favorita para ir de viaje lo que quieras!)
<!DOCTYPE html>
<html>
<head> <title>Por ti html</title></head><body>
<h3><p>Tengo todo para ser feliz</p></h3>
<p>FERRARI</p>
<p>NISSAN</p>
<p>FORD</p>
</body>
</html>
Aadiendo imgenes
Puedes aadir imgenes a tus sitios web para hacer que se vean ultras fantsticos. Solamente
necesitas una etiqueta de imagen, como: <img>. Esta etiqueta es un poco diferente a las dems. En
vez de colocar el contenido en medio de las etiquetas, le dices a la etiquetas dnde est la imagen,
usando src.
Mira bien la etiqueta a la derecha le aade a la pgina una imagen de un pato de goma! (Puedes
verlo haciendo clic en la pestaa Resultados)
Ves la direccin web (o URL, por localizador de recursos uniforme) despus de src=? Es
"http://bit.ly/PK1euu". Le dice a la etiqueta <img> de dnde obtener la imagen!
Instrucciones
Aade una segunda imagen debajo de la primera. (Asegrate de que sea antes de la etiqueta de
cierre de cuerpo!) Puedes escoger la imagen que quieras. Solamente busca una imagen en lnea, y
luego coloca la URL de esa imagen despus de src = (asegrate de ponerla entre comillas, como
se muestra).
<!DOCTYPE html>
<html>
<head> <title></title></head>
<body>
<img src="http://bit.ly/PK1euu"></img>
</body>
</html>
Haz clic en esa imagen

Bien hecho! Ahora ya sabes cmo aadir imgenes a tu sitio web. Pero, qu tal si quisieras darle
clic a esa imagen para que te llevara a algn otro sitio?
La etiqueta <a></a> es la que se usa para crear hipervnculos (o simplemente enlaces) en las
pginas web. stas son las palabras o imgenes en las que haces clic que te lleven a una nueva
pgina!
Al igual que con <img>, <a> tiene unatributo que indica el enlace a dnde vamos. En lugar
de src, <a> usahref, de esta manera:
<a href="http://www.codecademy.com">Aprende a programar!</a>
src significa "source" (fuente). Le dice al enlace <img> de dnde proviene la imagen!
href significa "hypertext reference" (referencia de hipertexto). Recuerdas cuando dijimos que el
hipertexto (es decir, los enlaces) es texto sobre el cual puedes hacer clic? Pues href le dice a ese
enlace a dnde ir! El texto despus de href es la direccin web, y el texto en medio de <a> y </a> es
el texto sobre el que haces clic.
Instrucciones
Aqu est cmo convertir una imagen en un enlace: coloca una etiqueta <a href=""> antes de tus
etiquetas <img>y una etiqueta </a> despus de ellas. En medio de las comillas despus dehref=,
escribe la direccin de tu sitio web favorito!
<html>
<head><title>Paginita</title></head>
<body>
<a href="Patito"><img src="http://bit.ly/PK1euu"></img></a>
</body>
</html>
Imgenes y enlaces
Bien hecho! Cercirate de que entiendes las imgenes y los enlaces antes de continuar con el
repaso.
Instrucciones
1. Aade dos imgenes en medio de las etiquetas de cuerpo. Una debe ser un enlace; la otra
no. El enlace puede conducir a cualquier sitio que quieras.
2. Despus de las dos imgenes, crea un enlace que simplemente sea una lnea de texto.
Puede conducir a cualquier sitio que quieras.
3. Si necesitas ayuda verifica la Sugerencia.
<!DOCTYPE html>
<html>
<head><title></title> </head>
<body>
<a href="Patito"><img src="http://bit.ly/PK1euu"></img></a>
<a href="Texto">Patitos</a>
</body>
</html>
PHYTON
Bienvenido al "Flying Circus"
Python es un lenguaje de programacin flexible y poderoso, que puedes usar en desarrollo web/de
Internet, para escribir interfaces grficas de usuario (GUI) de escritorio, crear juegos, y mucho ms.
Python es:
De alto nivel, lo que quiere decir que leer y escribir en Python es realmente fcil; se parece
mucho al ingls comn y corriente!
Interpretado: quiere decir que no necesitas un compilador para escribir y ejecutar Python!
Puedes escribirlo aqu, en Codecademy, o incluso en tu propio computador (muchos ya vienen
con el intrprete Python incorporado; ms adelante en esta leccin hablaremos del intrprete).
Variables
Uno de los conceptos ms bsicos en programacin son las variables. Una variable es una
palabra/identificador que capta un nico valor. Por ejemplo, digamos que para tu programa
necesitas el nmero 5, pero no lo vas a usar de inmediato. Puedes establecer una variable,
digamos jamon, para que capte el valor 5 y guardarla para usarla ms tarde, as:
jamon = 5
Es fcil declarar variables en Python; solamente tienes que escribir un nombre/identificador,
como jamon, y usar = para asignarle un valor, y listo!
Instrucciones
Establece la variable mi_variable con el valor 10.
Presiona el botn "Ejecutar" para ejecutar tu cdigo.
Orientado a los objetos, quiere decir que les permite a los usuarios manipular estructuras de
datos llamadas objetos, para construir y ejecutar programas. Ms adelante aprenderemos ms
sobre los objetos.
Divertido de usar. El nombre de Python viene de la comedia britnica Monty Python's Flying
Circus, y el cdigo y los tutoriales de ejemplo a menudo incluyen bromas del programa, con el fin
de hacer que el aprendizaje del lenguaje sea ms interesante.
Para este curso no se requieren conocimientos previos de Python en particular, ni de programacin
o informtica en general.
Instrucciones
Listo para Python? Haz clic en "Ejecutar" para continuar!
Mi_variable=10
Tipos de datos
Grandioso! Ahora, cada vez que lo necesitemos, podemos tomar el
valor10 refirindonos al nombremi_variable.
En este caso, el tipo de datos demi_variable es entero (un nmero entero positivo o
negativo). Hay tres tipos de datos en Python que nos interesan en este
momento: enteros,reales (nmeros fraccionarios escritos con un punto decimal,
como 1.970), ybooleanos (que pueden ser True oFalse).
Los programas de computador, en gran parte, son creados para manipular datos. Por
lo tanto, es importante entender los diferentes tipos de datos que podemos incorporar
en nuestros programas.
Nunca uses las comillas (' o ") con los booleanos, y siempre usa mayscula
inicial! Python distingue entre maysculas y minsculas. Usaremos las comillas
cuando lleguemos a los strings, los cuales veremos en la siguiente unidad.
Instrucciones
Establece las siguientes variables con los correspondientes valores:
1. mi_ent con el valor 7

2. mi_real con el valor 1.23
3. mi_bool con el valor True
mi_ent=7
mi_real=1.23
mi_bool=True

HTML Css 2016

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML Css 2016

Hochgeladen von

Copyright:

Verfügbare Formate

Por qu aprender HTML?

HTML significa HyperText Markup Language (lenguaje de marcado de

La primera cosa que debemos hacer es configurar el esqueleto de la pgina.

Ms sobre los encabezados!

Usando todos los encabezados

Repaso de mitad de leccin

Haz clic en esa imagen

1. mi_ent con el valor 7

Das könnte Ihnen auch gefallen