1.

- Introdución
HTML é a "lingua materna" do teu navegador. Para abreviar unha longa historia, podemos dicir que un científico chamado Tim Berners-Le inventou HTML alá por 1990. O obxectivo era facilitar a científicos de diferentes universidades o acceso aos documentos de investigación de cada un deles. O proxecto obtivo un éxito moito maior do que Tim Berners-Le nunca chegase a imaxinar. Ao inventar HTML, este científico sentou as bases da web tal e como a coñecemos hoxe en día. HTML é unha linguaxe que fai posible presentar información (por exemplo, investigacións cientíticas) en Internet. O que ves ao visualizar unha páxina en Internet é a interpretación que fai o navegador do código HTML. Para ver o código HTML dunha páxina só tes que picar na opción "Ver" da barra de menús e elixir "Código fonte" (en Internet Explorer). Se queres crear sitios web, non hai outra solución que aprender HTML. Mesmo se usas un programa como Dreamweaver, por exemplo, para a creación de sitios web, posuír uns coñecementos básicos de HTML fai a vida moito máis doada e os teus sitios web moito mellores. A boa noticia é que HTML é doado de aprender e de usar. HTML é a abreviatura de "HyperText Mark-up Language", é dicir, "Linguaxe de marcado hipertextual", e isto xa é máis do que necesitas saber a estas alturas. En todo caso, para manter unha boa orde, imos explicar que significa con maior detalle.

Hiper é o contrario de lineal. Nos bos vellos tempos os programas de ordenador se ejectutaban de forma lineal: cando o programa executara unha acción seguía ata a seguinte liña, e despois desta á seguinte, e á seguinte,... HTML, non obstante, é diferente: pódese ir onde un queira cando un queira. Texto explícase por si só. Marcado é o que fas co texto. Márcase o texto do mesmo modo programa de edición de textos con encabezados, viñetas, grosa, etc. Linguaxe é o que é HTML. Esta linguaxe fai uso de moitos termos en inglés. que nun

• •

ACCIÓN FORMATIVA: 2013/2957 CONFECCIÓN E PUBLICACIÓN DE PÁXINAS WEB MODULO 1: CONSTRUCCIÓN DE PÁXINAS WEB

Está composta polo identificador ou nome da etiqueta. A súa sintaxe é: < identificador atributo1 atributo2.1. e unha etiqueta de peche. 1.1. os elementos están formados por unha etiqueta de inicio. -Elementos e etiquetas Os elementos proporcionan a estrutura ao documento HTML e indican ao navegador como queres que se presente o teu sitio web.>.. Tamén é posible aniñar etiquetas. A etiqueta de final está delimitada polos carácteres < / e >. A súa sintaxe é: </Identificador> Cada un dos elementos da páxina atoparase entre unha etiqueta de comezo e a súa correspondente etiqueta de peche. a excepción dalgúns elementos que non necesitan etiqueta de peche. inserir etiquetas entre outras etiquetas de comezo e de peche. e pode conter unha serie de atributos opcionais que permiten engadir certas propiedades. Arial. Polo xeral. A etiqueta de comezo está delimitada polos carácteres < e >. a de comezo de elemento e a de fin ou peche de elemento. é dicir.> aniñada dentro da etiqueta <p. Existen dous tipos de etiquetas.1. MS Sans Serif">Benviidos</font></p > Este código daría como resultado o seguinte texto: ACCIÓN FORMATIVA: 2013/2957 CONFECCIÓN E PUBLICACIÓN DE PÁXINAS WEB MODULO 1: CONSTRUCCIÓN DE PÁXINAS WEB . ou valores HTML predefinidos. > Os atributos da etiqueta de comezo seguen unha sintaxe predefinida e poden tomar calquera valor propio do usuario... -Etiquetas As etiquetas ou marcas delimitan cada un dos elementos que compoñen un documento HTML.1. o contido.. e non contén atributos. A continuación temos un exemplo no que temos a etiqueta <font.: < p align="center"><font color="#993366" size="4" face="Comic Sans MS. Está composta polo identificador ou nome da etiqueta.

Mozilla.Estandares HTML pódese codificar de moitas maneiras diferentes. Opera and Netscape. antes de pechar esta etiqueta puxemos a <font. pola súa banda. que non funcionaban noutros navegadores. cando se escribe código HTML conforme cos estándares do W3C. cunha cota de mercado de máis do 90%. as etiquetas non se poden cruzar.> debemos pechar a etiqueta etiqueta <font. E os navegadores poden interpretar HTML de todas esas mesmas maneiras.. de seguir uns estándares comúns. en poucas palabras. é dicir. Pero Microsoft decantouse por ofrecer o seu navegador de forma gratuíta (algo sempre moi popular) e Internet Explorer pronto pasou a ser o navegador máis popular. nin se preocupaba. como. A partir das versións 4 e 5 de Internet Explorer.. é unha forma de escribir HTML nova e mellor estructurada. O resto é historia. 2. continuou a competencia con Netscape e presentou un navegador. Ao igual que o fan os demais navegadores. a versión 3. pero tamén soporta os estándares HTML do W3C. Netscape era o navegador dominante. cando para ter un navegador o había que pagar. Todo o contrario.. Por aquel entón. Así pois. Pero este foi un camiño longo e difícil. segue tendo os seus propios elementos estraños. As primeiras versións do navegador de Microsoft. Agora é Internet Explorer o que acapara máis do 90% de cota de mercado. o Internet Explorer. Netscape inventou os seus propios elementos estraños. Por parte do Consorcio do World Wide Web (W3C). no noso exemplo empezamos pola etiqueta <p. Pasado un tempo. .>.2.. Nos vellos tempos. Non obstante.0 e. Poderíase dicir que HTML ten moitos dialectos. creamos sitios web que se poden ver en todos os navegadores. Durante moitos anos Microsoft deixou de lado Internet case por completo. o estándar HTML con maior soporte eran a versión 2. producíronse intentos para crear un estándar común de HTML.>. Microsoft propúxose soportar cada vez máis os estándares do W3C. Netscape non tiña por que preocuparse..). tanto nos actuais coma nos futuros.. Esta é a razón de que algúns sitios web se visualizan de forma diferente en navegadores diferentes. por exemplo. ACCIÓN FORMATIVA: 2013/2957 CONFECCIÓN E PUBLICACIÓN DE PÁXINAS WEB MODULO 1: CONSTRUCCIÓN DE PÁXINAS WEB . Netscape. non conseguiu desenvolver un nova versión do seu navegador e seguiu distribuíndo a desfasada versión 4. que. fundado por Tim Berners-Le.É importante aniñar ben as etiquetas. non eran moitos mellores que as de Netscape á hora de soportar os estándares HTML. Linguaxe de marcado hipertextual extensible.> polo que antes de pechar a etiqueta <p. máis tarde.01 e XHTML (Extensible HyperText Mark-up Language. Hoxe en día os estándares HTML son a versión 4.

dtd " > ACCIÓN FORMATIVA: 2013/2957 CONFECCIÓN E PUBLICACIÓN DE PÁXINAS WEB MODULO 1: CONSTRUCCIÓN DE PÁXINAS WEB . tan ben como moitos elementos e calidades presentational comunmente usados. Segundo estándares do HTML. O HTML 2. O "DOCTYPE" comeza o documento do HTML e dille a un Validator qué versión do HTML utilizar na comprobación de sintaxe do documento. < !DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> Isto declara o documento para ser HTML 2. os marcos.01 Transitional//EN" "http://www.01 Frameset. a W3C recoméndao para que se siga a "norma".2 limitou a axuda para as follas do estilo e ningunha axuda para as características do HTML 4 tales como marcos e internacionalización. Aquí vaise mostrar simplemente os DOCTYPE que haberá que usar ao principio do documento HTML segundo a versión que se queira seguir. o HTML 3.2.org/TR/html4/loose. Aínda que isto non é estritamente necesario. -Elixir un DOCTYPE..w3.01 Frameset//EN" "http://www. 2.dtd " > Isto declara o documento para ser HTML 4.w3. Non obstante. e a internacionalización.2 Final//EN"> Isto declara o documento para ser HTML 3.org/TR/html4/frameset. < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3. cada documento do HTML require un tipo declaración do documento.0.1..Indicar a versión Segundo o W3C os ficheiros HTML (páxinas Web normais) deben ter unha serie de "cabeceiras" ou identificadores da versión que se utiliza. < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.2 é apoiado ben pola maioría dos browsers en uso.. .2. O HTML 3.0 é apoiado extensamente polos browsers pero carece a axuda para as táboas.2. O HTML 4 Frameset é unha variante de HTML 4 transitorio para os documentos que utilizan marcos (frames). < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.

O HTML 4 transitorio recoñece a axuda relativamente pobre do browser para as follas do estilo.01//EN" "http://www.Isto declara o documento para ser HTML 4.01 estrito. Os elementos. Así pois.w3. No exemplo anterior o idioma usado é o inglés ("en"). as calidades. A DTD tamén é importante á hora de validar as túas páxinas web. -Validación Ao inserir a DTD nas túas páxinas sempre poderás comprobar o código HTML para revisar posibles erros usando o validador gratuíto do W3C.01 transitorio.01 que acentúa a estrutura sobre a presentación.dtd"> <html xmlns="http://www. que presenta un listado de códigos de todos os idiomas do mundo. e brancos do acoplamiento. 2. Coa DTD. elementos desaprobados. texto</p> </body> </html> Co atributo lang especifícase en qué idioma se escribiu o documento. ACCIÓN FORMATIVA: 2013/2957 CONFECCIÓN E PUBLICACIÓN DE PÁXINAS WEB MODULO 1: CONSTRUCCIÓN DE PÁXINAS WEB . Exemplo 1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. usa o exemplo anterior como equipo para todos os documentos futuros que vaias crear.org/TR/html4/strict.01 // EN" "http://www. < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. os marcos. os autores poden alcanzar os documentos accesibles.w3. permitindo que moitas características da presentación do HTML sexan utilizadas como transición cara a HTML 4 estrito.org/1999/xhtml" lang="en"> <head> <title>Título</title> </head> <body> <p>texto.dtd " > Isto declara o documento para ser HTML 4.3. Para isto úsase o estándar ISO 639. Escribindo en HTML 4 estrito. estruturalmente ricos.w3.org/TR/html4/strict. O HTML 4 transitorio inclúe todos os elementos e calidades de HTML 4 estrito pero agrega calidades presentational. O HTML 4.01 estrito é axustado abaixo da versión do HTML 4. o navegador sabe con exactitude como interpretar e mostrar o código HTML. e as brancos están totalmente desaprobados en HTML 4.

e valídaa.. O validador non é só útil para localizar erros. </Head> <Body> . A estrutura básica dunha páxina é: <Html> <Head> . podería ser que nunca chegases a ver un erro no teu propio navegador. Con este tipo de navegadores.. Non obstante. Por exemplo: <Html> . </Html> ACCIÓN FORMATIVA: 2013/2957 CONFECCIÓN E PUBLICACIÓN DE PÁXINAS WEB MODULO 1: CONSTRUCCIÓN DE PÁXINAS WEB . Ao mesmo tempo. se non. Entre as etiquetas <html> e </html> estará comprendido o resto do código HTML da páxina.1. Comete algún erro que outro a propósito para ver que acontece. -Estrutura dunha páxina Web Ao longo deste tema imos aprender a crear unha páxina básica. outros navegadores poderían intentar mostralas de forma diferente ou non as mostrar en absoluto. -Identificador do tipo de documento <html> Todas as páxinas web escritas en HTML teñen que ter a extensión html ou htm.w3. 3. Valida sempre as túas páxinas para asegurarche de que se mostrarán de forma correcta.Para probalo. O validador pode servirche de grande axuda para atopar erros que nin sequera sabías que existían. Se o código HTML é correcto recibirás unha mensaxe de parabén..org e escibe a dirección (o URL) da túa páxina ou sobe o arquivo html. 3.. recibirás un informe de erros que che indicará qué erro se produciu e onde se localiza o mesmo. abre a páxina do validator. teñen que ter as etiquetas <html> e </html>. </Body> </Html> Agora vexamos como funcionan estas etiquetas.. Algúns navegadores intentan compensar a falta de destreza entre os desenvolvedor web solucionando erros no código HTML e mostrando as páxinas como supoñen que deberían visualizarse..

Está formada polas etiquetas <head> e </head>. </Html> Entre as etiquetas <head> e </head>. Por exemplo: <Html> <Head> <Title> ACCIÓN FORMATIVA: 2013/2957 CONFECCIÓN E PUBLICACIÓN DE PÁXINAS WEB MODULO 1: CONSTRUCCIÓN DE PÁXINAS WEB . as etiquetas que podemos atopar e máis se utilizan son: • • <Link>. A etiqueta <head> vai xusto debaixo da etiqueta <html>.. Estas etiquetas han de estar dentro da cabeceira. é dicir. <Meta> (se desexas saber para que serve e como utilizar esta etiqueta. • 3. cando a páxina estea cargada nel.2.3. -Cabeceira da páxina <head> A cabeceira da páxina utilízase para agrupar información sobre ela. <style>. <script> (estas etiquetas verémolas máis adiante). Por exemplo: <Html> <Head> . entre as etiquetas <head> e </head>. como podeser o título.1.. Para asignar un título a unha páxina é necesario escribir o texto desexado entre as etiquetas <title> e </title>.. </Head> . consúltao aquí ) e a etiqueta <Title> que che explicamos a continuación. -Título da páxina <title> O título da páxina é o que aparecerá na parte superior da ventá do navegador.2..

o seguinte código indica que o autor da páxina e especifica algunhas palabras clave a ser consultadas polos buscadores: <Html> <Head> .2.. .. "Descrición". A través desta etiqueta poden especificarse os atributos name e content. buscando coincidencias co que o usuario pretende atopar. é preferible que o tipo de información se especifique en inglés. Para indicar o tipo de información podemos utilizar calquera palabra que desexemos. pero é posible inserir varias etiquetas <meta> nun mesmo documento.. </Html> 3..2. < meta name="author" content="Autro "> < meta name="description" content="Curso de HTML "> ACCIÓN FORMATIVA: 2013/2957 CONFECCIÓN E PUBLICACIÓN DE PÁXINAS WEB MODULO 1: CONSTRUCCIÓN DE PÁXINAS WEB . e o atributo content indica o valor da devandita información.Curso de HTML </Title> </Head> . Os buscadores consultan a información da etiqueta <meta> das páxinas. A etiqueta <meta> ha de estar entre as etiquetas <head> e </head>. Pero debido a que a maioría de buscadores están en inglés. "Palabras clave". Os tipos de información máis utilizados son os seguintes: Tipo Author Classification Description Generator Keywords Significado Autor da páxina Palabras para clasificar a páxina nos buscadores Descrición do contido da páxina Programa utilizado para crear a páxina Palabras claves A etiqueta <meta> non necesita etiqueta de peche. Esta información pode ser utilizada polos buscadores. O atributo name indica o tipo de información. Por exemplo. Para cada etiqueta <meta> só é posible indicar un tipo de información e o seu valor. como pode ser "Autor". etc.A etiqueta <Meta> A etiqueta <meta> utilízase para engadir información sobre a páxina.

o texto da páxina. 3.3. Neste caso utilízase o atributo http-equiv.com). o navegador realizaría a función de actualizar a páxina. < meta http-equiv="Refresh" content="5. os formularios. imaxinemos que por algún motivo queremos que a nosa páxina se actualice automaticamente cada 30 segundos. etc. Nese caso.pagina..com "> </Head> . Poderiamos utilizar o seguinte código: <Html> <Head> . en lugar do atributo name.. as imaxes. pero cargando a que se atopase na nova dirección (URL=http://www. e queremos que cando algún usuario visite a páxina na dirección antiga.. etiqueta.. Por exemplo. é dicir o que queremos que se visualice.Corpo do documento <body> O corpo do documento contén a información propia do documento. < meta http-equiv="Refresh" content="30 " > </Head> . A etiqueta <meta> tamén se utiliza para indicarlle ao navegador algunha información ou algunha acción que debe realizar.pagina. aos 5 segundos o navegador o redirixa automaticamente á dirección nova.. ... Nese caso poderiamos inserir o seguinte código na páxina que se atopa na dirección antiga: <Html> <Head> .< meta name="keywords" content=" HTML. ACCIÓN FORMATIVA: 2013/2957 CONFECCIÓN E PUBLICACIÓN DE PÁXINAS WEB MODULO 1: CONSTRUCCIÓN DE PÁXINAS WEB . deberiamos utilizar a acción Refresh (actualizar).. Agora imaxinemos que cambiamos a dirección na que se atopa nosa páxina web. URL=http://www.. Deste modo. páxina web "> </Head> ..

ACCIÓN FORMATIVA: 2013/2957 CONFECCIÓN E PUBLICACIÓN DE PÁXINAS WEB MODULO 1: CONSTRUCCIÓN DE PÁXINAS WEB .Todos estes elementos teñen que atoparse entre as etiquetas <body> e </body>. ou a que número ou nome se corresponde cada un deles. A cor de fondo pode establecerse a través do atributo bgcolor. Por exemplo. Se non sabes como representar as cores en hexadecimal... < body bgcolor="#0000FF " > . Por exemplo: <Html> <Head> <Title> Curso de HTML </Title> </Head> <Body> ... </Body> </Html> Sería equivalente a poñer: . para facer que a cor de fondo dunha páxina sexa de cor azul.. podes consultalo o final dos apuntes. ao que é posible asignarlle unha cor representada en hexadecimal ou por un nome predefinido.. </Body> </Html> A través da etiqueta <body> é posible establecer a cor ou a imaxe de fondo da páxina... indicando a ruta na que se atopa a imaxe. < body bgcolor="blue " > . </Body> </Html> A imaxe de fondo pode establecerse a través do atributo background. teremos que escribir: ... que van xusto debaixo da cabeceira.

gif " > . teremos que escribir: . para facer que unha páxina non teña marxe superior. Estes atributos adoitan utilizarse para eliminar a marxe... que se atopa no mesmo directorio no que se atopa gardada a páxina. </Body> </Html> Entre o borde da ventá e o contido da páxina existe unha marxe. o tamaño en pixeis do cal pode modificarse mediante os atributos leftmargin (marxe esquerda) e topmargin (marxe superior). teremos que escribir: .gif...gif " > . para facer que a cor do texto dunha páxina sexa de cor vermella. Por exemplo. para o cal deben valer cero. Estes atributos non funcionan para o navegador Netscape. teremos que escribir: . para facer que a imaxe de fondo dunha páxina sexa a imaxe fondo. pero si os atributos marginwidth (anchura da marxe) e marginheight (altura da marxe)... </Body> </Html> A través da etiqueta <body> tamén é posible establecer a cor do texto da páxina a través do atributo text. < body background="imagenes/fondo.Por exemplo.... < body background="fondo.. e se atope dentro da carpeta imagenes. teremos que escribir: . que si se atopa no mesmo directorio que a páxina. Por exemplo.. ACCIÓN FORMATIVA: 2013/2957 CONFECCIÓN E PUBLICACIÓN DE PÁXINAS WEB MODULO 1: CONSTRUCCIÓN DE PÁXINAS WEB ... </Body> </Html> No caso de que a imaxe non se atope no mesmo directorio que a páxina. < body text="#FF0000 " > .. <body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0"> ... e teña unha marxe esquerda de 20 pixeis.

</Body> </Html> ACCIÓN FORMATIVA: 2013/2957 CONFECCIÓN E PUBLICACIÓN DE PÁXINAS WEB MODULO 1: CONSTRUCCIÓN DE PÁXINAS WEB .