DISEÑO WEB I: FAMILIARIZÁNDONOS CON EL CÓDIGO HTML (1)

El HTML es un lenguaje básico en código que nos permite poder elaborar nuestras propias páginas o contenido web. No se necesitan de programas específicos para crearlo, basta con un simple editor de textos como cualquier programa word, una hoja de texto simple, etc. para crear un  codigo de forma rudimentaria.

Lo básico será guardar nuestro texto o transformarlo para que pueda ser leido como html por un navegador. El navegador, sencillamente se encarga de interpretar o descifrar este código y nos muestra una página tal y como la vemos en internet. Digamos que el codigo es como el esqueleto interno que no vemos o cerebro de una web y el que dicta la apariencia y el contenido de la misma.

CÓDIGO BÁSICO PARA EMPEZAR:

La forma básica del código HTML son las «etiquetas», escritas entre corchetes angulares reconocibles (<,>). Cuando queremos dar una especificación u orden a algún contenido como por ejemplo que un texto sea presentado como un titular o una palabra vaya en negrita, normalmente irá anidado entre dos etiquetas, una de apertura (<..>) y otra de cierre (</..>):

<apertura>contenido</cierre>

Es esencial que todas las etiquetas que se abren se cierren, y lo hagan de la siguiente manera "</...>" para que el código pueda ser interpretado correctamente, de lo contrario no le acabamos de dar la orden a nuestro contenido.

<b>texto en negrita</b> : 

texto en negrita (se recomienda también la etiqueta <strong>)

<i>texto en cursiva</i> : 
texto en cursiva

<u>texto subrayado</u>; <s>texto tachado</s>

<h1>Titular o encabezado 1</h1> :

Titular o encabezado 1

<h2>Titular o encabezado 2</h2> :

Titular o encabezado 2

*U otros <h3>, <h4>, etc.

<p>Párrafo de texto</p> :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque, dolor non porttitor aliquet, nibh libero hendrerit purus, ac dictum elit nunc eget libero. Pellentesque et risus vel felis aliquam auctor sit amet ut nunc. Suspendisse potenti.

Praesent a pulvinar urna. Aliquam elit est, egestas at tempor luctus, porttitor vitae est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum consequat metus. Cras dignissim sagittis augue vitae iaculis.

<a>Hipervínculo o enlace</a> :

Hipervínculo o enlace (Dentro o fuera de nuestra página)

La etiqueta <a> irá acompañada del atributo src="" de la siguiente manera <a src="sitio a enlazar">contenido</a>, donde definiremos el sitio donde queremos enlazar.
Ejemplo anterior : <a src="http://www.artsgrafiques.org/">Hipervínculo o enlace</a>

<img src="ruta de la imagen"/> :

Donde el atributo src="" indica la ruta en la que se encuentra la imagen, se encuentre en la web o en nuestro ordenador. Si la obtenemos de internet la ruta será la URL de la imágen:
En el ejemplo anterior : <img src="http://blog.gettyimages.com/wp-content/uploads/2009/06/gettyimages_824042352.jpg" />

<font face="Arial" size="5" color="#BB0000">Cambiar la fuente, el color y tamaño</font>: 
Cambiar la fuente, el color y tamaño

<br /> Salto de linea (una etiqueta única)

<ul><li>.(Crear una lista); <ol><li>.(Crear un lista numerada) :

<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>

• Elemento 1
• Elemento 2
• Elemento 3
• Elemento 4

<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ol>

1. Elemento 1
2. Elemento 2
3. Elemento 3
4. Elemento 4

<table><tr><td>contenido</td></tr></table>. Tabla

*Las etiquetas pueden ir anidadas unas dentro de otras, pudiendo combinar el código de forma que le vayamos dando apariencia a nuestro documento.
Dentro de las etiquetas podemos dar ordenes de atributos como en el ejemplo de <font face="" size="" color=""></font> donde aparte de definir la fuente, podemos elegir atributos de tamaño, color, alineado, etc.