Tags que forman la parte visible de una página web (body)
Esta parte es un poco más larga, pero simplemente por que hay mucha más variedad de tags que vamos a utilizar para poder crear una página web. No te preocupes ya que verás que los nombre son fáciles y se puede crear una página web con no demasiados tags.
<div></div>
Posiblemente el más importante que te vas a encontrar. Con este tag podemos posicionar prácticamente cualquier cosa con la estructura que queramos. Lo primero a tener en mente es que una capa div es como un cuadrado donde pondremos cualquier contenido (incluso otras capas div) y con la que podremos crear cualquier forma, por ejemplo una página con un bloque de una anchura determinada que lo englobe todo en el centro, otro para el header y el menú superior, otro para el contenido que tendrá dos dentro de el uno a un lado con la barra lateral o sidebar y otro con el contenido principal, y luego otro abajo para el footer con varios bloques a modo de columnas.
Con hojas de estilo css bien utilizadas se puede crear cualquier modelo de página web, y con capas div se ha conseguido sustituir a las tablas que ya no son recomendadas en la programación. Más adelante veremos como usar las capas div y entenderlas para crear nuestros diseños.
<div>
<div>Un contenido</div>
<div>Otro contenido</div>
</div><h1></h1>, <h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>
Muy importantes también son los títulos del contenido, nos ayuda este tag a estructurar de forma visual el contenido y a que los buscadores entiendan que unas partes del texto forman parte de otras. Tenemos el ejemplo muy claro si abrimos el Office y probamos a poner un título 1, título 2, etc. Veremos que cuanto más grande es el número, más pequeño se vuelve el título y sirve para esquematizar.
<h1>Título principal de toda la página</h1>
<h2>Subsección primera</h2>
<h3>Dentro de la primera subsección</h2>
<h3>También dentro de la primera subsección</h2>
<h2>Subsección segunda</h2>
<h3>Dentro de la segunda subsección</h2>
<h2>Subsección tercera</h2>
<h3>Dentro de la tercerasubsección</h2><p></p>
Este tag se utiliza para delimitar un párrafo de texto, en muchas ocasiones nos olvidamos de el, pero deberíamos utilizarlo siempre ya que nos permite controlar mejor la estructura del contenido en nuestro sitio.
<p>Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met</p> <p>Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met</p> <p>Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum</p>
<a></a>
Conocido comunmente como enlace de texto o link, es la etiqueta que se encarga de crear links entre páginas, por ejemplo en esta web los textos que se colorean en azul dentro del contenido de la página son enlaces y con ellos podemos poner acceso a otras partes de la web. También se utilizan por ejemplo para crear los menús.
<a href="https://www.vichaunter.org" title="Blog programación">Blog de programación</a> <p>Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met,<a href="https://www.vichaunter.org" title="Blog programación">Blog de programación</a>, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met, Lorem ipsum dolor akis met</p>
<ul></ul>, <li></li> y <ol></ol>
Estas se utilizan para crear listas numeradas (o con puntos, imágenes etc). El tag ul se encarga de englobar toda la lista, mientras que li y ol se utilizan para encuadrar cada línea de ese contenido. De esta forma podemos crear filas ilimitadas para nuestras listas, así como esquematizar contenidos.
<ul>
<li>primero</li>
<li>segundo</li>
<li>tercero</li>
</ul>
<ul>
<ol>primero</ol>
<ol>segundo</ol>
<ol>tercero</ol>
</ul><img />
Tag utilizado exclusivamente para colocar imágenes dentro del contenido de nuestra web. Podemos meterlo dentro de cualquier otro conjunto de etiquetas como divs, p, li, etc para posicionarlas en los lugares que queramos. Imagínate por ejemplo los artículos de Wikipedia y piensa en que tienen las imágenes intercaladas con el texto. Todos estos efectos se consiguen con capas div y css.
<div>
<img src="//www.vichaunter.org/concursos/images/play-facebook.png" alt="imagen aquí" />
</div><form></form>
Con estos tags se crean formularios y dentro de ellos colocaremos todos los otros tags que conforman los campos del formulario. Se pueden combinar con párrafos, listas, enlaces, etc. Dentro del formulario encontramos varios otros tags que debemos conocer y veremos más adelante:
- <input />: para crear campos de introducción de texto
- <select></select>: para crear menús desplegables, cajas de selección, etc.
- <option></option>: estos campos van dentro del campo select, y son los valores que nos mostrará.
- <textarea></textarea>: muestra un área de texto para escribir contenido más largo que unas palabras.
Dentro de los valores input, para crear áreas de texto, líneas de texto, botones, utilizaremos el atributo type=»», y en el indicaremos qué tipo de area es.
<form>
<input type="text" name="campo1" /><br/>
<input type="hidden" name="campo2" /><br/>
<textarea name="campo3" /></textarea><br/>
<select name="campo4">
<option value="1">opcion 1</option>
<option value="2">opcion 2</option>
<option value="3">opcion 3</option>
</select><br/>
<input type="submit" value="buscar" /><br/>
</form><br />
Este tag nos ayuda a incrustar un salto de línea entre dos tags que hayamos creado en la página, para que uno se muestre en la línea siguiente al otro. También sirve para crear un salto de línea en mitar de un texto por ejemplo. No debería ser usado ya que hay otras formas de conseguir esto, pero en ocasiones suele ser bastante útil. (usado en el ejemplo de formularios).
Formatos de texto con tags html
Hay varios tags que nos ayudar a crear diferentes efectos en el texto como cuando trabajamos con office, la lista que vamos a ver es la siguiente:
- <b></b>: convierte en negrita un texto
- <i></i>: texto en itálica
<p>Lorem ipsum <b>dolor</b> akis met, Lorem ipsum dolor <i>akis met</i>, Lorem ipsum dolor akis met, <b>Lorem</b> ipsum dolor akis met, Lorem ipsum dolor akis met, <i>Lorem ipsum dolor akis met</i></p>
Además de todos estos tags, podemos incluir algunos que hemos visto en el header como <script> o <style>, aunque lo ideal es no utilizarlos dentro del cuerpo de la página, los navegadores lo interpretan de forma correcta.
TAREA: A modo deberes puedes coger cada porción de código que te he ofrecido, y crear un archivo .html en tu ordenador con el bloc de notas. Una vez creado solo tienes que copiar la estructura principal de la web expuesta arriba y probar los diferentes códigos dentro de las etiquetas body. Para cargarlo haz doble click sobre el o abrelo con cualquier navegador web. Puedes exponer tus dudas e impresiones en los comentarios o este hilo del foro.
Por el momento estas son las que vamos a utilizar. Puede que me esté dejando alguna y por ello esta lista de tags queda abierta a futuras modificaciones, pero lo veremos segun avancemos en nuestra programación. Por el momento con solamente estos tags, se puede crear un diseño para una página web como el que nos puede ofrecer una plantilla profesional, eso sí, siempre combinándolo con CSS y podemos añadir también Javascript.
