Contenido de una página web
Es importante escribir correctamente dentro de una página y sobre todo utilizar el HTML correctamente, pues si nuestra página contiene errores, es decir, no cumple los estándares web, es posible que nuestra posición en buscadores se vea afectada, o lo que es peor, que en cada navegador se vea de una forma diferente, por ello, si desde el principio cogemos buenas costumbres a la hora de maquetar una página web, en el futuro evitaremos problemas mayores.
Lo primero que tenemos que entender es que HTML no entiende los finales de línea, luego si nosotros nos pusiéramos a escribir, aunque lo hiciéramos en diferentes líneas, a la hora de mostrarse en un navegador, nuestra página lo haría todo seguido.
Saltos de línea
Para separar el contenido dentro de la misma página tenemos dos opciones con HTML, por un lado, utilizar el equivalente a salto de línea, que sería <br/>
Esta etiqueta también se puede encontrar como <br> (sin la línea del final) pero las especificaciones para HTML estricto requieren que sea <br/> luego como vamos a hacer una página perfectamente válida para cualquier navegador, seguiremos las directrices más exigentes.
La otra posibilidad para separar texto dentro de una página web es utilizando la etiqueta de párrafo que viene definida por <p> </p>
Los bloques de texto ubicados entre <p></p> se separarán por una línea en blanco (simulando párrafos)
Deberíamos evitar introducir el texto directamente en la etiqueta body, intentando en la medida de lo posible meterlo dentro de etiquetas como <p></p> o equivalentes.
Estilos de letra
Podemos definir distintos estilos al texto, por ejemplo
- Cursiva <i></i>
- Negrita <b></b>
- Subrayado <u></u>
E incluso podemos insertar texto con un determinado estilo o formato y evitar que cambie utilizando las etiquetas <pre></pre>
Cabeceras
Podemos pensar en una cabecera como un título, suele usarse para resaltar texto importante como títulos, subtítulos,… por defecto HTML trae una serie de cabeceras, definidas como <h1>, <h2>, <h3>…
Si no ha sido modificado mediante css, h1 será la más grande y según vayamos aumentando el número que acompaña a la h, el tamaño de la cabecera irá descendiendo.
<h1>Coche</H1>
<h2>Ford</h2>
<p>Este coche es americano</p>
<p>Es muy fiable</p><h2>Seat</h2>
Este coche es español<br/>
Se conduce muy bien
Con este ejemplo entendemos el uso, sencillo, de estas etiquetas.
Listas
HTML también nos provee del uso de listas para mostrar de forma ordenada un conjunto de elementos, tenemos varios tipos de listas
Listas ordenadas
Estas listas se caracterizan por que a cada elmento se le asigna un valor numérico, por lo que podremos distinguir fácilmente unos de otros
- Ejemplo1
- Ejemplo2
- Ejemplo3
- Ejemplo4
Las etiquetas correspondientes a este ejemplo serían las siguientes
<ol>
<li>Ejemplo1 </li>
<li>Ejemplo2 </li>
<li>Ejemplo3 </li>
<li>Ejemplo4 </li>
</ol>
Listas sin ordenar
En estas listas por el contrario todos los elementos se encuetran al mismo nivel, no hay ordenación
- Ejemplo1
- Ejemplo2
- Ejemplo3
- Ejemplo4
El código sería
<ul>
<li>Ejemplo1 </li>
<li>Ejemplo2 </li>
<li>Ejemplo3 </li>
<li>Ejemplo4 </li>
</ul>
Las listas pueden anidarse cuanto queramos, haciendo sublistas.
Listas de definición
Si queremos definir un término, podemos hacer uso de este tipo de lista cuya sintaxis es la siguiente
- Engranaje
- Mecanismo utilizado para…
- Tornillo
- Pieza de metal necesaria para…
El código para generar estas listas sería el siguiente:
<dl> <dt>Engranaje </dt><dd>Mecanismo utilizado para… </dd></dl>
<dl> <dt>Tornillo</dt> <dd>Pieza de metal necesaria para… </dd> </dl>
Separadores horizontales
Si queremos separar un texto de otro de una forma más visual que utilizando <p></p> podemos hacer uso de un separador horizontal.
El código para generarlo sería:
<hr size=”20″, width=”200″>
Esta etiqueta admite dos parámetros
- size - es el ancho, el grosor que tendrá el separador
- width - es el largo, si queremos que ocupe toda la pantalla podemos utilizar 100%
HTML admite muchos más posibilidades, pero lo iremos viendo junto con otros temas relacionados, como CSS o Javascript.
Comparte este artículo
