Html

HTML, son as siglas de HyperText Markup Language («lenguaje de marcas de hipertexto»). É a linguaxe coa que se escriben as páxinas web. É unha linguaxe que permite escribir texto de forma estructurada, e que está composto por etiquetas, que marcan o inicio e o fin de cada elemento do documento.

A estrutura básica dunha páxina é:

<!DOCTYPE html>
<html lang=«es»> Indica o inicio do documento
<head> Inicio da cabeceira.
                <meta charset=«utf-8»>
                         <title> Inicio do título do documento. </title> Final do título do documento.
<link rel=  «stylesheet» type= «text/css» href= «estilos.css»>
<script type«tex/javascript» src= «script/javascript.js» ></script>
</head> Final da cabeceira do documento.
              <body> Inicio do corpo do documento.

<br style=»clear:both»/>
                          <h1> </h1> Dános o tipo de letra máis grande.
                          <h2> </h2>
                          <h3> </h3>
                          <h4> </h4>
                          <h5> </h5>
                           <h6> </h6> Dános o tipo de letra máis pequeno.
<div> </div>
<span> </span>
                <p> <br></p> Este é o primeiro parágrafo con salto de liña.
                             <hr> traza unha liña horizontal
         <a href=«http://licorestito.com/» target=«_blank»>Preme aquí</a>
 <table border=«1px» cellpadding=«20px»> Tabla con borde de 1 pixel e marxen de 20 pixeis
               <tr>
                  <th> </th> Encabezado da columna 1 fila 1
                 <th> </th> Encabezado da columna 2 fila 1
                  <td> </td> Contido da columna 1 fila 2
                  <td> </td> Contido da columna 2 fila 2
              </tr>
              <tr>
                  <td> </td> Contido da columna 1 fila 3
                  <td> </td> Contido da columna 2 fila 4
              </tr>
</table>
                   <ol> Lista ordenada con numeros
                                   <li>
                                   <li>
                                   <li>
                </ol>
               <ol type = A > Lista ordenada con letras mayusculas
                                  <li>
                                  <li>
                                  <li>
              </ol>
              <ul type = disk > Lista desordenada con marca circulo
                                 <li>
                                 <li>
              </ul>
             <ul type = square> Lista desordenada con marca cadrado
                                <li>
                                <li>
             </ul>
                      <!– Esto é un comentario–>
               </body> Final do corpo do documento.
</html> Final do documento.

Agora vexamos como funcionan estas etiquetas.

Entre as etiquetas <html> e </html> estará comprendido o resto do código HTML da páxina. A cabeceira da páxina utilízase para agrupar información sobre ela, como pode ser o título, está formada polas etiquetas <head> e </head>. A etiqueta <head> vai xusto debaixo da etiqueta <html>.
O título da páxina escríbese entre as etiquetas <title> e </title>.
As etiquetas < h1 > < /h1 > ata  < h6 > < /h6 >defínennos o tamaño dun título ou cabeceira.
A etiqueta <p> </p> define os parágrafos. O salto de liña está definido coa etiqueta <br> É utilizado cando queremos cortar unha liña sen necesidade de rematar co parágrafo.
A etiqueta <hr> permítenos trazar unha liña horizontal.
Para incluír un Hiperenlace utilízase a etiqueta < a></a >. O texto ou imaxe que se encontre dentro dos límites desta etiqueta se pulsamos co rato, realizarase a función de hiperenlace indicada pola etiqueta < a></a >. Esta directiva ten o parámetro href que indica o lugar onde nos levará o Hiperenlace se o pulsamos. Exemplo: <a href = «http://licorestito.com/» > <img src = «imaxe.gif»></a>
Un Hiperenlace tamén pode levarnos a unha zona da nosa páxina. Para iso debemos marcar en nosa paxina as diferentes seccións nas que se divide. Farémolo co parámetro name. Exemplo: <a name=«destino1«>Parte 1</a>  ou <a href = «#seccion1»> Parte1</a>
Tamén podemos facer que o Hiperenlace de como resultado o envío dun correo electrónico a unha dirección de correo determinada. Exemplo: <a href = «mailto: nome@tito.com»>Envíame as túas suxestións</a>
O atributo target utilízase para definir onde queremos que se abra o documento ao premer sobre o enlace.
Existen tres tipos de listas, ordenadas, sen ordenar e de definición. As listas ordenadas representarán os elementos da lista numerando cada un deles segundo o lugar que ocupan na lista. Para este tipo de lista utilízase a etiqueta <ol> </ol>. Cada un dos elementos da lista irá precedido da directiva <li>. A directiva <ol> pode conter o parámetro type que indica a marca que antecede a cada elemento da lista:1,a,A,i,I
As listas desordenadas representan os elementos da lista cunha marca que antecede cada un deles. Utilízase a directiva < ul> </ul > para delimitar a lista, e <li> para indicar cada un dos elementos. A directiva <ul> pode conter o parámetro type que indica a marca que antecede a cada elemento da lista: disk, circle ou square.

Moitas etiquetas levan atributos. Estas provén de maior información aos elementos HTML.
Os atributos sempre van coa estrutura: nombre=»valor» e sempre van na etiqueta de apertura. Os valores sempre hai que poñelos entre comiñas. Exemplo: <body bgcolor=«#F2D882»>Hola mundo <b>Este texto é en grosa</b></body>

Para incluír unha imaxe na nosa Web utilizamos a etiqueta <img> a cal ten varios parámetros. Exemplo: <img src=«Stop.gif» alt= «Coidado !!» 
src = «imaxe» Nome do ficheiro gráfico a mostrar.
alt = «Texto»
align = TOP / MIDDLE / BOTTOM | Indica como se aliñará o texto que siga á imaxe.
border =  «bordo» da imaxe.
height =  alto da imaxe en puntos ou en porcentaxe.
width =  ancho da imaxe en puntos ou en porcentaxe.
hspace = numero de espazos horizontais, en puntos.
vspace =  número de puntos verticais que separasen a imaxe do texto que o siga e a anteceda.
ismap / usemap= A imaxe é un MAPA.

Para incluír comentarios na páxina Web utilízase a directiva <!–      –>
A etiqueta <font> </font> permítenos variar o tamaño, a cor, e o tipo de letra dun texto determinado. Utiliza para iso os parámetros size, color e face.
size = «valor» Dá ao texto un tamaño en puntos.
color = «código de cor» Escribe o texto na cor cuxo código se especifica.
face = «nome de font» Escribe o texto no tipo de letra especificado.

Atributos do texto:

<b> </b> Negrita  |  tamén serve : <strong> </strong>
<big>
 </big> Texto grande
<em>
 </em> Texto resaltado
<small>
 </small> Texto pequeno
<del>
 </del>  Texto tachado |  tamén serve <s> </s> |  tamén serve  <strike> <strike>
<i> </i> Cursiva  |  tamén serve:  <cite> </cite>
<tt> </tt> Teletype
<ins> </ins> Subliñado | tamén serve: <u> <u>
<blink> </blink> Parpadeo
<sup> </sup> Superindice
<suv> </sub> Subindice
<center> </center> Centrado
<code> </code> Texto en código de computadora
<kbd> </kbd> Texto del teclado
<samp> </samp> Texto exemplo de código de computadora
<var> <var> Define unha variable
<pre> </pre> Texto preformateado

Tutorial básico de HTML desde cero por: Lievano San