programación en html 2
TRANSCRIPT
PROGRAMACIÓN EN HTML
Capítulo 2:HTML Básico
Material desarrollado por el profesor Luis Carlos Flórez ToroImagen tomada de : www.mastermagazine.info
Repaso
Hemos utilizado las siguientes etiquetas, ¿Podrías explicar la función de cada una de ellas?• <!doctype html>• <html>• <head>• <body>• <title>• <p>
Imagen tomada de http://formaciondevendedoresempresarios.blogspot.com
Encabezados <h#>
Abre en el Bloc de Notas el documento que iniciamos en la práctica anterior, cambia las etiquetas del título “MIS REFRANES, reemplazando <p> por <h1> (también al cerrar la etiqueta)
H1 define el texto como un Título o encabezado de nivel 1. Prueba a modificar el formato cada uno de los refranes, reemplazando <p> por <h2>, <h3> y <h4> respectivamente.Guarda en bloc de notas y observa en el navegador el resultado.
<!doctype html><html> <head> <title> hola mundo </title> </head>
<body>
<h1> MIS REFRANES </h1> <p> Hijo de tigre sale pintado</p> <p> Quien ríe de último no entendió el chiste</p> <p> camarón que se duerme …</p> </body>
</html>
ACTIVIDAD 31. Crea un nuevo documento en bloc de notas, escribiendo la estructura
básica de un html.2. Utilizando encabezados de 1 a 6, has un listado de 6 equipos de fútbol,
ordenandolo desde el que más te gusta hasta el que menos te gusta. (Nota: Si no te gusta el fútbol, puedes hacer el mismo ejercicio con otros deportes o con cantantes o ciudades, entre otras opciones)
El resultado debe ser similar a este:
Listas Ordenadas <ol>
Para enumerar una lista de elementos en html se utiliza la etiqueta <ol> (order list)
Escribe en un documento nuevo la estructura básica de un html.Luego, dentro del body escribe un encabezado con el título: LAS COSAS QUE ME GUSTAN.Después abre y cierra una lista ordenada, como se muestra en la imagen…
<!doctype html><html> <head> <title> hola mundo </title> </head>
<body> <h1> LAS COSAS QUE ME GUSTAN </h1>
<ol>
</ol>
</body>
</html>
Listas Ordenadas <li>
Cada uno de los elementos de una lista ordenada, se encierra dentro de una etiqueta <li>, que significa line (linea)
(En la imagen solo se muestra la parte del código que corresponde a la lista ordenada).Escribe al menos 3 líneas, donde nos cuentes las cosas que te gustan. Luego guarda tu documento y observa en el browser el resultado
<ol><li> los atardeceres </li><li> los perros </li><li> la sonrisa de mi mamá </li>
</ol>
ACTIVIDAD 41. Completa el documento anterior, creando una nueva lista, con las cosas
que te desagradan. El resultado debe ser similar al que se muestra en la siguiente imagen:
Webgrafía
• http://apps.co• http://www.codeacademy.com• http://www.wikipedia.org• http://aulaclic.es
Imagen tomada de grup2-master-tic.wikispaces.com