<!doctype html>Un documento HTML consta de letras y palabras encerradas con "<...>". Su elemento principal es:
<html>Por lo general cada elemento tiene una etiqueta de apertura y otra de cierre:
<html> ... </html>Todo lo que esta dentro del anterior elemento constituirá el documento HTML. Una vez concluido nuestro documento HTML podremos comprobar si el código es correcto a través del sitio web:
Markup Validation Service (W3C)
1. Pagina web básica (Hola Mundo)
<!doctype html> <html> <head> <title>Mi primera pagina web</title> </head> <body> <h1>Mi pagina web</h1> <p>Hola Mundo, bienvenido a mi pagina web</p> </body> </html>
Declaramos que es un documento HTML5 con el encabezado:
<!doctype html>El siguiente paso es declarar el elemento raíz, dentro se encuentra toda nuestra pagina web:
<html> ... </html>Una vez dentro de nuestro documento HTML5 podríamos dividir los siguientes pasos en dos partes, la primera parte seria la cabeza del documento. Puede contener el titulo de la pagina, idioma, información de estilo, programas de ayuda, ... Para ello se usa el siguiente elemento:
<head> ... </head>En este caso solo hemos declarado el título de la pagina web, que sera visible en la pestaña de nuestro navegador:
<title>Mi primera pagina web</title>Y la segunda parte de nuestro documento seria el cuerpo, es decir, el corazón de nuestra pagina web. Consta de varios elementos HTML tales como textos, imágenes, enlaces, tablas, sonidos, vídeos, ...
<body> ... </body>En este caso hemos declarado un título y un párrafo:
<h1>Mi pagina web</h1>
<p>Hola Mundo, bienvenido a mi pagina web</p>
Si guardamos el ejemplo anterior en un archivo llamado "primeraweb.html" y lo abrimos con el navegador, podremos ver la siguiente imagen:
2. Elementos HTML mas usados
| Elemento | Nombre | Descripción |
|---|---|---|
| <a> | Anchor | Crea un enlace |
| <br> | Line break | Introduce un salto de linea |
| <div> | Section of a page | Crea áreas generales o divisiones lógicas, como un encabezado, menú, área de contenido, pie de pagina, ... |
| <form> | Web form | Crea un formulario web para aceptar la entrada del usuario |
| <h1> through <h6> |
Heading | Permite crear encabezados o títulos |
| <hr> | Hard Rule | Crea una linea horizontal |
| <img> | Image | Contenedor para una imagen |
| <input> | Input | Elemento para aceptar la entrada del usuario |
| <link> | Resource link | Enlace a un recurso de la pagina |
| <p> | Paragraph | Crea párrafos de texto |
| <script> | Script tag | Secuencia de comandos web o un programa |
| <span> | Span | Crea un contenedor para un elemento, suele usarse en combinación con información de estilo |
<h1>, <h" through <h6> Se usa normalmente para títulos.
<p>, <span>, <div> Son apropiados para un texto mas largo, como un párrafo.
<p> y <div> Se llaman elementos de bloque ya que ocupan todo el ancho de la linea de la pagina, por lo tanto nada puede aparecer a su lado. Sin embargo con el elemento <span> esto cambia ya que permite tener a su lado otros elementos.
El salto de linea <br> no contiene elemento de cierre.
Para añadir un espacio en HTML se usa " " aunque a veces podemos encontrar " ". Sin embargo hay mejores maneras de obtener un espacio en HTML, mediante el uso de CSS.
El símbolo "<" usa la sintaxis "<" y para escribir ">" usamos ">".
Para escribir un comentario: <!-- ... -->
Aquí podemos encontrar una lista de elementos HTML: Elementos HTML
3. Como crear listas o tablas
Los elementos mas comunes para crear listas o tablas son los siguientes:
| Elemento | Nombre | Descripción |
|---|---|---|
| <li> | List item | Usado en conjunto con <ul> <ol> permite crear listas de información |
| <ol> | Order list | Permite crear listas ordenadas, se usa junto a <li> |
| <ul> | Unordered list | Usado en conjunto con <ol y <li> permite crear listas sin ningún orden |
| <table> | Table | Usado junto a <tr>, <td> y otros elementos nos permite crear tablas para mostrar la información |
| <td> | Table cell | Crea una celda en una fila de la tabla |
| <th> | Table header | Crea una celda de encabezado en la tabla |
| <tr> | Table row | Crea una fila en la tabla |
3.1 Atributos
Los atributos ayudan a definir los elementos. Es una manera un poco primitiva usar atributos para darle estilo a los elementos, una mejor manera es hacerlo mediante el uso de CSS.
Por ejemplo para añadir un borde a la tabla usaremos el atributo border dentro del elemento table:
<table border="1"> ... <table>
3.2 Ejemplo de lista
<!doctype html> <html> <head> <title>Ejemplo de lista</title> </head> <body> <ul> <li>Tomates</li> <li>Lechuga</li> <li>Manzanas</li> <li>Limones</li> </ul> </body> </html>
Destacar en el ejemplo que estamos usando el elemento <ul> para crear una lista sin ningún orden, y posteriormente usamos el elemento <li> para crear artículos en la lista.
Si guardamos el ejemplo anterior en un archivo llamado "listaSinOrden.html" y lo abrimos con el navegador podremos ver la siguiente imagen:
3.3 Ejemplo de lista ordenada
Vamos a coger el ejemplo anterior y sustituimos el elemento <ul> por <ol>. Guardamos los cambios en un archivo llamado "listaConOrden.html" y veremos lo siguiente en el navegador:
3.4 Ejemplo de tabla
<!doctype html> <html> <head> <title>Mi primera tabla</title> </head> <body> <h1>Mi tabla</h1> <table border="1"> <tr> <th>Pais</th> <th>Capital</th> </tr> <tr> <td>Italia</td> <td>Roma</td> </tr> <tr> <td>Alemania</td> <td>Berlin</td> </tr> <tr> <td>Francia</td> <td>Paris</td> </tr> </table> </body> </html>
En el ejemplo hemos usado el elemento <h1> para crear un titulo y el elemento <table> junto con el atributo "border" para crear una tabla muy simple. Si guardamos el ejemplo en un archivo llamado "tabla.html" veremos lo siguiente en el navegador:
4. Añadir enlaces a nuestra web
Para crear enlaces debemos hacer uso del elemento <a> junto a su atributo "href"
4.1 Enlace a otra web
<!doctype html> <html> <head> <title>Enlace</title> </head> <body> <p>Esto es un enlace a: <a href='http://elbauldeandroid.blogspot.com.es'>El Baul de Android</a></p> </body> </html>
En este caso hemos usado un párrafo <p> y dentro escribimos un texto y hacemos uso del elemento <a> para crear el enlace hacia otra web. Guardamos el ejemplo en un archivo html y lo abrimos con el navegador:
4.2 Enlace a un archivo
<!doctype html> <html> <head> <title>Enlace a Mi tabla</title> </head> <body> <p>Esto es un enlace a: <a href='tabla.html'>Mi tabla</a></p> </body> </html>
Guardamos el ejemplo y lo colocamos en la misma carpeta que el archivo "tabla.html". En el navegador lo vemos como en la imagen de abajo y si pinchamos en el enlace, automáticamente nos abrirá nuestro archivo "tabla.html"
En este caso, al encontrarse los dos archivos en la misma carpeta, hemos creado un vinculo relativo y para ello no hemos tenido que usar "http://". Si por el contrario los archivos estuvieran en carpetas diferentes la solución seria crear un vinculo absoluto y para ello tendríamos que especificar la ruta del archivo (/tablas/tabla.html).
4.3 Enlace en nueva pestaña
Si al pinchar un enlace queremos que se abra en una nueva pestaña simplemente tendremos que añadir al elemento <a> el atributo "target" con un valor especial: "_blank"
Podemos coger el ejemplo 4.1 y modificar el elemento <a> añadiendo el nuevo atributo, veremos como esta vez se abre en una nueva pestaña:
<p>Esto es un enlace a: <a target="_blank" href='http://elbauldeandroid.blogspot.com.es'>El Baul de Android</a></p>
4.4 Enlaces en la propia pagina web
Si la pagina web es muy larga, podemos crear enlaces para poder subir o bajar automáticamente a un texto, imagen, sección, ...
<!doctype html> <html> <head> <title>Enlaces</title> </head> <body> <ul> <li><a href='#uno'>Seccion 1</a></li> <li><a href='#dos'>Seccion 2</a></li> <li><a href='#tres'>Seccion 3</a></li> </ul> <p><a name='uno'>Aqui se encuentra la seccion 1</a><p> <p><a name='dos'>Aqui se encuentra la seccion 2</a><p> <p><a name='tres'>Aqui se encuentra la seccion 3</a><p> </body> </html>
En este ejemplo hemos creado una lista con tres enlaces a una sección de la propia pagina web.
Indicamos en el atributo "href" que es un enlace dentro de la pagina web a través del carácter "#" seguido de una etiqueta.
Mas adelante referenciamos ese enlace a nuestro recurso, en este caso hemos creado un párrafo. Y para referenciarlo simplemente usamos el atributo "name" indicando la etiqueta del enlace.
Imaginemos que entre cada párrafo que hemos creado hay un espacio de 100 lineas, al pinchar en un enlace de nuestra lista, automáticamente nos mandara al párrafo que hayamos seleccionado.
El ejemplo se vería de la siguiente manera (no se puede apreciar el efecto ya que todo se encuentra visible, seria recomendable crear unos cuantos espacios entre los párrafos para ver el efecto de estos enlaces):
5. Añadir imágenes a nuestra web
Para añadir imágenes se usa el elemento <img> junto con el atributo "src" con el que indicaremos donde se encuentra la imagen. Dicho elemento no contiene etiqueta de cierre, aunque a veces nos podemos encontrar con "/>" o ">", las dos son validas.
Debe contener siempre el atributo "alt" para indicar a los motores de búsqueda una pequeña descripción de la imagen.
Al subir imágenes a nuestra web deberemos tener en cuenta varios factores:
Debe contener siempre el atributo "alt" para indicar a los motores de búsqueda una pequeña descripción de la imagen.
Al subir imágenes a nuestra web deberemos tener en cuenta varios factores:
Tipo de imagen: los mas compatibles son JPG, GIF, PNG
Resolución: alto y ancho de la misma
Tamaño (mb): cuanto menos ocupe mejor
Evitar espacios en nombres de archivo de imagen
5.1 Ejemplo de imagen
<!doctype html> <html> <head> <title>Imagen de Android</title> </head> <body> <h1>Androide Key Lime Pie</h1> <img src='android.jpg' alt='Android Key Lime Pie'> </body> </html>
Guardamos el archivo y lo colocamos en la misma carpeta que la imagen "android.jpg". El resultado es el siguiente:
No hay comentarios:
Publicar un comentario