-
Ahora que ya conoces la estructura básica de una página html, vamos a darle contenido. Podemos empezar por
agregar un título, y para esto tenemos 6 distintas etiquetas:
<h1> <h2> <h3> <h4> <h5>
<h6>
en donde <h1> es el título más grande y <h6> el más pequeño. Y recuerda siempre cerrar las etiquetas que encierren
algún tipo de texto.
-
Seguramente queramos agregar algún bloque de texto después del título, y esto lo podemos hacer con la
etiqueta <p> que nos ayuda a crear un párrafo en nuestra página desde que abre hasta que cierra:
<p>contenido del párrafo</p>
-
Bien, ya que sabemos como agregar texto a nuestra página sería bueno poder agregar una bonita
imagen para que el usuario vea de qué hablamos, y para esto usamos entonces la etiqueta <img>
que nos permite insertar una imagen a nuestra página.
esta etiqueta no tiene cierre, y tiene los atributos:
-
src: adentro de este atributo se proporciona el nombre de la imagen y si es necesario
la carpeta en donde se encuentre.
-
alt: se utiliza este atributo para describir a la imagen en el navegador en caso de que
esta no se muestre.
-
width y height: Estos atributos son usados para darle un ancho y largo a la imagen
respectivamente.
<img src="nombre_de_imagen.pgn/jpg"
alt="Descripción" width="300" height="150">
-
Muchas veces queremos redirigir al usuario a otra página, ya sea nuestra o de alguien mas, y eso se hace
creando un vínculo con la etiqueta <a> </a> que a su vez contiene el atributo href
que es utilizado para especificar la dirección del enlace, y entre las etiquetas de abierto y cerrado
se describe el nombre que quieras que tenga tu enlace, o puedes también poner una imagen:
<a href="URL"> nombre_del_enlace </a>
-
Por último, una de las cosas más básicas de HTML son las listas. Si, las listas nos permiten tener ordenamiento
de algunas ideas que tengamos, por ejemplo, me gustaría hacer una lista de las novias que he tenido, bueno no porque
sino la lista probablemente estaría vacía, mejor quiero una de las cosas que me gustan, así:
Jugar Fútbol
Programar
La comida
Leer
hacer ejercicio
estudiar
Como puedes ver podemos hacer listas ordenadas y desordenadas; para las listas desordenadas usamos
dos etiquetas: la principal <ul> </ul> y dentro de esta la etiqueta <li></li>
que es en donde va el contenido de cada viñeta:
<ul>
<li>contenido</li>
<li>contenido</li>
</ul>
En el caso de las listas ordenadas utilizamos la etiqueta <ol> </ol> y la misma etiqueta
<li></li> para el contenido de la lista:
<ol>
<li>contenido</li>
<li>contenido</li>
</ol>
