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