Vamos ahora a probar otros tags muy comunes a la hora de hacer html.
<ul></ul> Lista en Desorden
En inglés significa Unordered List, lista sin orden, su función es crear una lista con viñetas, la lista se definen con el tag <li></li> ,que significa list, de esta manera:
<ul><li>Viñeta 1</li><li>Viñeta 2</li><li>Viñeta 3</li></ul>
NOTA: Recordar siempre abrir el tag <ul> y cerrarlo </ul> al final de que se haya establecido la lista <li></li>.
- Abrir el documento holamundo.html que habíamos creado
- Escribir 3 objetivos que queremos lograr con estos talleres, usando tres viñetas.
- Abrirlo en el navegador y verificar que todo se muestre de la manera correcta
<ol></ol> Lista Ordenada
En inglés significa Ordered List y en español, lista ordenada, su función es enumerar los elementos de una lista, los elementos de la lista se definen con el tag <li></li> ,que significa list, de esta manera:
<ol><li>Uno</li><li>Dos</li><li>Tres</li></ol>
Aquí le estamos indicando al navegador: “a continuación habrá una lista ordenada y esta lista es Uno, Dos, Tres. Con el tag de cierre </ol> indicamos que hasta allí llegará la lista ordenada.
- Abrir el documento holamundo.html que habíamos creado
- Debemos escribir una lista de pasos en orden, que sentimos que debemos realizar para cumplir con los objetivos planteados, usando el <ol>.
- Abrirlo en el navegador y verificar que todo se muestre de la manera correcta
<img/>Imagen
Con este tag definiremos que queremos introducir una imagen, este y otros tag no cumplencon la regla del tag de abertura y el tag de cierre.
En esta dirección podremos observar una lista de tags y cuando leamos, podremos notar que hay ciertos tags como el <br/> <img/> que tienen el “/” despues de la palabra.
Esto sucede porque no requieren el tag de abertura, sino, que basta solamente con un tag que se cierre al final.
Para aprender del tag <img> es necesario conocer un concepto que no habíamos mencionado hasta el momento, que es el de atributo.
Atributo
Un atributo como concepto general, es lo que tiene algo o alguien, por ejemplo, una persona tiene como atributo su tamaño, nombre, edad, peso etc.
Un carro tiene como atributo el color, la marca, modelo etc.
Los atributos en html, se usa con este mismo concepto.
El tag <img> tiene atributos, pues si pensamos en una imagen por ejemplo, podemos identificar atributos como altura, ancho. En el ambiente de programación una imagen tendría otro atributo muy importante que es la dirección de donde vamos a adquirir la imagen.
Esta dirección puede ser:
- Link de la web: el html es capaz de mostrar una imagen que ya este alojada en la web.
- Desde una carpeta en nuestra computadora: tendríamos que indicarle la dirección de la carpeta adonde esta la imagen. Recomendamos para mayor facilidad de esta practica colocar la imagen en el mismo folder o carpeta adonde tenemos nuestro documento .html para que sea mas fácil de encontrar.
Leer esta página para comprender mas a fondo el uso de los atributos en el tag <img/>http://www.webestilo.com/html/cap6a.phtml
- Encontrar una imagen de ustedes, del celular, de facebook etc..
- Añadirle una foto a nuestro archivo holamundo.html, para indicarle la dirección de donde está nuestra imagen podemos usar cualquiera de los 2 métodos explicados anteriormente.
Al final debemos tener un bonito documento en html con nuestro nombre, los objetivos, los pasos y una imagen de nosotros.
Si quieres puedes cambiar el orden, por ejemplo la imagen arriba, el nombre al final, como gustes, recuerda que el orden en el <body> depende de tu misma estructura.
.jpg)
.jpg)
.jpg)
No hay comentarios:
Publicar un comentario