oletusWEBos.es - Lecciones paso a paso para crear tu web. Tutoriales de Dreamweaver, HTML y CSS
Curso HTML - Lección 6: Otros elementos
Bueno, bueno, veo que te atrae esto del HTMl si has llegado hasta aquí por algo será ¿no?. Por cierto ¿conseguiste crear alguna página tu solo? Si no fuiste capaz aquí te dejo un ejemplo:
<head>
<title>Recetario</title>
</head>
<body>
<h1>Carnes</h1>
<p>En esta sección encontrarás todas las recetas que tienen como principal ingrediente la carne</p>
<h2>Cordero asado</h2>
<p>Ingredientes: 1 pierna de cordero, 1 cebolla, 1/2 vaso de vino blanco, sal, etc...</p>
</body>
</html>
¿Aprendemos más elementos?
Claro que si!!! veamos unos cuantos elementos más.
Un elemento muy usado en las páginas web para resaltar algo es usar el texto en negrita, ¿como lo hacemos? muy fácil, usaremos la etiqueta de incio <b> y su etiqueta de cierre </b>
Ejemplo 1:
y así es como lo veras en el navegador:
¿Y si queremos usar varios elementos a la vez?
Pues no tendríamos ningun problema, siempre y cuando pongamos las etiquetas de inicio y las de cierre correctamente para no confundir al navegador y a nosotros mismos.
Ejemplo 2:
Si deseas que el texto se visualice enfatizado y en negrita tendrías que usar el siguiente código:
Y así es como lo verías en el navegador:
Como ya te he comentado alguna vez existen algunos elementos que no necesitan etiqueta de cierre, si no que se abren y se cierran con la misma etiqueta. Uno ya hemos hablado de el <br /> lo que hacia era darnos un salto de linea y aquí te enseño uno nuevo <hr /> que lo usaremos para trazar una linea horizontal.
Ejemplo 3:
y así lo veriamos en el navegador:
y abajo un poco más de texto en la siguiente línea
Como crear listas
Podemos crear listas ordenadas y desordenadas mediante los elementos ol, ul y li
ol quiere decir "lista ordenada" y numera cada elemento de la lista, ul significa "lista desordenada" e inserta unas viñetas para cada elemento de la lista y por último li significa "elemento de lista". Ya se que esto parece muy complicado pero nada más lejos de la realidad. Veamos unos ejemplos para aclararnos un poco:
Ejemplo 4:
<li>Primer elemento de lista</li>
<li>Segundo elemento de lista</li>
<li>Tercer elemento de lista</li>
</ol>
y en el navegador se verá así:
- Primer elemento de lista
- Segundo elemento de lista
- Tercer elemento de lista
Ejemplo 5:
<li>Un elemento de lista</li>
<li>Otro elemento de lista</li>
<li>Ultimo elemento de lista</li>
</ul>
y en el navegador se verá así:
- Un elemento de lista
- Otro elemento de lista
- Ultimo elemento de lista
¿Qué nuevos elementos hemos aprendido?
En el siguiente cuadro verás los seis nuevos elementos que hemos aprendido, no quiero ser pesado pero experimenta por ti mismo estos nuevos elemento con los que ya sabes y verás como poco a poco tus páginas van cogiendo "color":
<b>Texto en negrita</b>
<br />Salto de línea
<hr />Línea horizontal
<ul>Lista sin ordenar</ul>
<ol>Lista ordenada</ol>
<li>Elemento de lista</li>
Quiero aprender más!!!
- Avanzar a Lección 7: Atributos
- Retroceder a Lección 5: ¿Qué hemos aprendido?
©oletusWEBos 2009 all right reserved | Contácta con oletusWEBos.es
Design By: JTole®