Lenguaje de Programacion HTML 1

HTML1de48
LenguajesdeprogramacinHTMLyCSS
Parte1:ConceptosbsicosdeHTML5
Cmocrearpginasweb?
NuncahasodohablardeHTML,oslovagamentedelmismo?
No te asustes, las explicaciones vienen desde el primer captulo ... la prctica sigue justo
despus.
Empezamos por la presentacin de cmo funcionan los sitios web, entonces vamos a
descargartodoslosprogramas(gratis)paratrabajarbien.
Alfinaldeestaseccin,sabrsinsertartexto,enlaceseimgenes.
Cmopuedocrearsitiosweb?
Elprimercaptulodeestadocumentacinparaprincipiantes,teensearacrearunsitio.
Vamos a pasar algn tiempo juntos, todo depender de lo rpido que aprendas. Si lees esta
documentacin regularmente y a buen ritmo, terminars en una o dos semanas. Pero si
necesitas un pocoms detiempo, no te preocupes: la principal esquevayasatupropioritmo,
conpreferenciaenpasarunbuenrato.
Tesugieroquecomiencesconlaspreguntasmssencillas,perotambinlasmsimportantes:
Funcionamientodesitiosweb
Cmo funcionan los sitiosweb? Notengas miedo de hacer preguntas,incluso sipiensasque
son absurdas. Esmuy importante hablar un poco antes deentrardellenoeneldiseodelsitio.
Estoy seguro de que visitas sitios web a diario. Para ello, se ejecuta un programa llamado
navegador web, (Chrome, Firefox, Opera, ) haciendo clic en uno de los iconos que se
muestran en la siguiente figura y que es habitual que estn disponibles en la mayora de
ordenadores.
___________________________________________________________________________
DesarrolloAplicacionesWeb.RafaelMenndezBarzanallanaAsensio.DIS.UMU
HTML2de48
Con el navegador, se puede visitar cualquier sitio web. Por ejemplo, un explorador muestra
sitios como Wikipedia,unperidicodelaciudadenqueresidoomipginaenlaUniversidad de
Murcia.
Hoy en da, cualquier persona sabe acceder a la Web ... pero quin sabe realmente cmo
funcionainternet?Cmocrearpginaswebcomoesta?
Has odo hablarde HTML yCSS,tiene estoqueverconelfuncionamientodesitiosweb?Por
supuesto! Estosson los lenguajes de programacin quepermiten crear sitios web. Todos los
sitios web se basan en estos lenguajes, que son la base de los sitios de internet. HTML fue
inventado por Tim BernersLee en 1991, quien todava sigue de cerca la evolucin de la Web.
Cre el World Wide Web Consortium (W3C), que define las nuevas versiones de internet
relacionadas con los.lenguajes de programacin Tambin ha creado ms recientemente, la
___________________________________________________________________________
HTML3de48
FundacinWorldWideWeb,quehaceelseguimientoyanlisisdelaevolucindelaWeb.
Mucha genteconfunde (errneamente) internet y la Web.DebessaberquelaWebespartede
internet. Es un gran paquete que incluye, entre otros: la Web, correoselectrnicos,mensajera
instantnea,etc.TimBernersLeenoeselinventordeinternet,es"solo"inventordelaWeb.
HTML y CSS son la base del funcionamiento de casi todos los sitios web. Cuando visitas un
sitio mediante un navegador, debes saber que, detrs de las escenas, las ruedas se activan
para permitir que el sitio web se muestre. El ordenador se basa en loqueseindicaenHTMLy
CSS para saber lo que ha de mostrar, la figura siguiente indica parte del cdigo de la pgina
mostradapreviamente.
HTMLyCSSsondos "lenguajes"quenecesitassaberparaelaborarsitiosweb.Eselnavegador
web el que har la traduccin (intrprete)entreloslenguajesdeprogramacinyloquese veen
la pantalla. Puedes estar preguntndote por qu se precisa saber dos lenguajes para crear
sitiosweb?Voyaresponderya.
HTMLyCSS:doslenguajesparalacreacindeunsitioweb
Para crearun sitioweb,debesdarinstruccionesalordenador.Nobastaconescribireltextoque
seha incluidoenelsitio(comoloharaenunprocesadordetextos),tambindebeindicardnde
colocarestetexto,insertarimgenes,crearenlacesentrepginas,etc.
___________________________________________________________________________
HTML4de48
LasfuncionesdeHTMLyCSS
Para explicar al ordenador lo que quieres hacer, tendrs que utilizar un lenguaje de
programacin que comprendas. Y es aqu donde las cosas se ponen difciles, porque vas a
tenerqueaprenderdos.
Por qu se crearon dos? Uno habra bastado, no? Manejar dos lenguajes ser el doble de
complejo y el doble de tiempo para aprender ... pero no es el caso. Lo aseguro, si hay dos
lenguajes es, en cambio, para facilitar las cosas. Vamos a tratar con dos lenguajes que son
complementarios,yaquetienenfuncionesdiferentes:
HTML (HyperText Markup Language): apareci por primera vez en 1991 en ellanzamientode
la Web. Su funcin es lagestinyorganizacindelcontenido.AsqueenHTMLpuedes escribir
loquedeseasmostrarenlapgina:texto,enlaces,imgenes
Sepodradecir:"Esteesmittulo,esteesmimen,aquest eltextoprincipaldelapgina,aqu
hayunavisualizacindelaimagen,etc.".
CSS (Cascading Style Sheets, tambin conocidas como hojas de estilo): el papelde CSS es
gestionar la aparienciade la pgina web (diseo,posicionamiento,colores,tamaodetexto...).
EstelenguajehacomplementadoelcdigoHTMLdesde1996.
Tambin puedes haber odo hablar de XHTML. Esta es una variante de HTML que es ms
rigurosayqueesunpocomscomplicadademanejar.
En pocas palabras, el HTML apareci por primera vez en 1991. A principios de 2000, la
organizacin W3C lanz el XHTMLindicandoqueseraelfuturo...,peronosedifundicomose
esperaba.En2009XHTMLsalidelaW3CydecidiregresaraHTMLparahacerloevolucionar.
Hay mucha confusin entorno a estos lenguajes, ya que son muy similares. No es uno mejor
que el otro, hay dos maneras de hacer las cosas. Aqu vamos atrabajar conlaltima versin
deHTML(HTML5)queahoraesellenguajedelfuturo,quetodosestisinvitadosautilizar.
Se puede crear un sitio web nicamente en HTML, pero no va a quedar muy esttico por la
formacomoaparecerlainformacin.EstaeslaraznporlaqueCSSsiemprelocompleta.
Para hacerse una idea,la figura siguiente muestra cmo se velamismapginasinCSSycon
CSS.
___________________________________________________________________________
HTML5de48
HTML defineelcontenido, CCSpermiteorganizarelcontenido ydefinirlapresentacin:elcolor,

la imagen de fondo, los mrgenes, el tamao del texto Como te puedes imaginar, CSS
necesita una pgina HTML para funcionar. Es por eso que lo primeroquese aprende son los
conceptosbsicosdeHTMLantesdelograrelcuidadodeladecoracinenCSS.
Lasprimeras pginasnosernlasmsagradablesestticamente,peroaquinleimporta.Esto
nodurarmuchotiempo.
DiferentesversionesdeHTMLyCSS
Con el tiempo, HTML y CSS han evolucionado. La primera versin de HTML (HTML 1.0) ni
siquieraofrecalaposibilidaddemostrarlasimgenes.
Unamuybrevehistoriadeestoslenguajesparaconocimientogeneral:
HTML1:eslaprimeraversincreadaporTimBernersLeeen1991.
HTML 2: la segunda versin de HTML apareci en 1994 y se termin en 1996 con la
aparicin de HTML 3.0, esta es la versin que en realidad plantea las bases de las
siguientes versiones de HTML. Las reglas y el funcionamiento de esta versin estn
dadasporelW3C(mientrasquelaprimeraversinfuecreadaporunapersona).
___________________________________________________________________________
HTML6de48
HTML 3: apareci en1996, esta nuevaversindeHTML,aademuchasposibilidadesal

lenguaje como tablas,applets, scripts, posicionamientodetextoalrededordeimgenes,
etc.
HTML 4: Esta es laversinmscomndeHTML(enconcreto,esHTML4.01). Apareci
por primera vez en 1998 y propone el uso de marcos (que dividen una pgina web en
varias partes), tablas ms complejas, mejoras en las formas, etc. Ms importante an,
estaversinpermiteporprimeravezutilizarhojasdeestilodelfamosoCSS.
HTML 5: es la ltima versin. An no est muy extendida, llama mucho la atencin
porque traemuchas mejoras como la posibilidad de incluir fcilmentevdeos,mejorarel
contenido, nuevas caractersticas para los formularios, etc. Esta es la versin que
vamos a describir en esta documentacin. EL estndar estar completado en el ao
2014.
CSS1:en1996,aparecilaprimeraversindeCSS.Enellaseestablecenlasbasesde
este lenguaje que permiten mejoras de presentacin en pginas web, tales como
colores,mrgenes,fuentes,etc.
CSS 2: apareci en 1999 y fue completado por CSS 2.1, esta nuevaversin de CSS,
aade numerosas opciones. Ahora se pueden utilizar tcnicas de posicionamiento muy
precisasquepermitenverloselementosenellugardeseadoenlapgina.
CSS 3: estaes laltimaversin,queagregacaractersticasmuy esperadas,talescomo
bordesredondeados,degradados,sombras,etc.
De HTML5 y CSS3 an no sehanfinalizado totalmente las versiones estandarizadasdeW3C.
Sin embargo, incluso sipuede haber cambios menores en estos lenguajes,terecomiendoque
comiences ahora con estas nuevas versiones. Sus contribuciones sonmuchas yvalelapena.
Adems,muchossitioswebprofesionalesseconstruyenhoyendaenlasversionesrecientes.
Editordetextos(programas)
Qu software necesito para crear mi sitio web? Tendr que romper mi huchaparacomprar
unsoftwaremuycomplejoquemellevarmesesentender?
En realidad, hay muchosprogramas dedicados a la creacin desitiosweb.Pero,aseguro,que
no tendrs que gastar un solo euro. Por qu ir por un software de pago y complicado, si ya
tienesencasatodoloquenecesitas?
Para iniciarse basta solo con ... el bloc de notas, o equivalente en otros sistemas operativos
distintos de Windows. Sin embargo, actualmente hay software ms potente y en realidad ya
nadieusaelblocdenotasparaescribirprogramas.
Podemosclasificarestosprogramasdecreacindesitioswebendoscategoras:
WYSIWYG (lo que ves es lo que obtienes se trata de programas muy fciles de usar, se
___________________________________________________________________________
HTML7de48
pueden crear sitios web sin tener que aprender el lenguaje en particular. Entre los ms
conocidos destaca Dreamweaver, su principal inconveniente es a menudo la bastante mala
calidad del cdigo HTML y CSS que se genera de forma automtica mediante estas
herramientas. Un diseador de sitios web de buena calidad, tarde o temprano precisar
conocimientosdeHTMLyCSS.Noesrecomendableelusodeestasherramientas.
Editores de texto: se trata de programas dedicados a la escritura de cdigo. Uno por lo
general, puede utilizarlos para varios lenguajes, no slo HTML y CSS. Han demostrado ser
poderosos aliados para los diseadores sitios de web. Invitamos a usar un editor de texto en
estecurso.
Algunosconsejos,siestsfrenteaunordenadorconWindows,MacOSXoLinux
Windows
Hay muchos editoresde textos, aqu no puedo presentar todos. Sin embargo, te invito a mirar
Notepad + +, uno de los ms usados
entre los disponibles para Windows. Este software es
sencilloygratuito.
Para descargarlo (recuerda slo hay versin para Windows), accede a Notepad ++ en el sitio
http://notepadplusplus.org/. Aparecer la opcin download y accediendo a ella, aparecer la
pantalla mostrada a continuacin, desde la que se iniciar el proceso de instalacin como
cualquierprogramadeWindows.
Una vez instalado se ejecuta accediendo en el escritorio al icono Notepad++, apareciendo el

programatalcomosemuestraacontinuacin:
___________________________________________________________________________
HTML8de48
Sugiero que hagas la siguiente operacin: ir a men>lenguaje>HTML. Esto permitir que el

software sepa que vasa escribir cdigo HTML, pues este lenguaje esunodeentrelosmuchos
delosquepermiteNotepad++.
Cuando se utiliza el software, ser el color de tu cdigo (figura siguiente), el que permitir
identificacionesmsfcilmente.
Por ahora, note preocupes por lo que significa todo este galimatas. Solo queradarunavisin
___________________________________________________________________________
HTML9de48
generaldelsoftware.
Hay otros editores de programas disponibles para Windows adems de Notepad ++ Si no te
conviene,puedesintentarelusode:
Aptana
Alleycode
jEdit
PSPad
ConTEXT
...ymuchosotrossibuscas"Editordetextos"enlaWeb.
MacOSX
Puedesprobarunodelossiguientesprogramas:
jEdit
Smultron
TextWrangler.
Linux
Los editores de texto son abundantes en Linux. Algunos de ellos estn instalados por defecto,
otros se pueden descargar fcilmente atravsdel centrodedescargas(Ubuntuenparticular)o
medianteelusodecomandoscomoaptget.
Algnsoftwarequepuedesprobar:
Aptana(recomendado)
Quanta+
gEdit
Kate
vim
Emacs
jEdit.
Navegadores.Porquesimportanteelnavegador?
El navegador es el programa que nos permite visualizar los sitios web. Como yahe explicado
anteriormente, el trabajo del navegador es leer el cdigo HTML y CSS (principalmente) para
mostrar una salida en pantalla. Si el CSS indica al navegador: "Los ttulos son rojos ", el
___________________________________________________________________________
HTML10de48
navegadormostrarlosttulosenrojo.
El papel del explorador es esencial. Uno no lo hara, pero un navegador es un programa
extremadamentecomplejo. De hecho, la comprensin del cdigo HTMLy CSSesunahazaa.
El principal problema, que rpidamente te das cuenta es que los diferentes navegadores no
muestran exactamente el mismo sitio de la misma manera. Has de tener el hbito de
comprobarconregularidadqueelsitiotrabajacorrectamenteenlamayoradelosnavegadores.
LosnavegadoresenordenadorestipoPC
Es aconsejable instalar varios navegadores en el ordenador para asegurarse de que el sitio
funciona correctamenteen cada uno de ellos. Engeneral,recomiendoprobarelsitiowebsobre
unabaseregularporlomenosGoogleChrome,MozillaFirefox,OperaeInternetExplorer.
La siguiente figura muestra una visin general del resultado producido por algunos de los
principalesnavegadoresenlapginadeGoogle.
Entenderlasdiferenciasentrenavegadores
Como se ha visto antes, los navegadores no siempre muestran elmismositioexactamentede
la misma manera. Por qu? Esto es porque los navegadores no siempre saben las ltimas
caractersticas de HTML y CSS. Por ejemplo, Internet Explorer (como es habitual en los
productos Microsoft) siemprehaquedadoalazagaenalgunasdelascaractersticasdeCSS(y
paradjicamente, fue tambin por delante de algunas otras). Para complicar las cosas,
coexistenmltiplesversionesdelnavegador:
Firefox2,Firefox3.5,Firefox3.6,Firefox4,Firefox18
InternetExplorer6,InternetExplorer7,InternetExplorer8,InternetExplorer9
Chrome8,Chrome9,Chrome10,.Chrome25
etc.
Cada versin es compatiblecon las nuevas caractersticas, pero si los usuarios noactualizan
sunavegador,lasituacinseconvierteenunproblemaparaloscreadoresdesitiosweb.
___________________________________________________________________________
HTML11de48
Chrome y Firefox han resuelto en gran medida el problema mediante la creacin de

actualizaciones automticas, sin intervencin del usuario. En Internet Explorer, los usuarios
estn an menos incentivados para actualizar sus navegadorespuesrequierenactualizar alas
ltimas versiones del sistema operativo Windows (Internet Explorer 9 no est disponiblepara
WindowsXP,porejemplo).
Sitios como When can I use http://caniuse.com/ incluyen una lista de caractersticas
compatibles con CSS de las diferentes versiones de cada navegador, como se indica en la
siguientefigura.
Caractersticasgestionadasporlosdiferentesnavegadores
Como puedes ver, es ... complicado. La mayor parte de las preocupaciones ms a menudo
provienen de las versiones anteriores de Internet Explorer (IE6, IE7, IE8). En este caso has de
verificar cmo el sitio se presenta como las versiones anteriores ... Espera lo inesperado!
Comprueba especialmente que se muestre el sitio sin errores, sin tratar de obtener
exactamentelamismarepresentacinenlasversionesanterioresdeestosnavegadores.
Hay un programaparaWindowsllamadoIETester(http://www.mydebugbar.com/wiki/IETester).
Se puede consultar elsitio debidoalasdiferentesversionesdeInternetExplorer.Tenencuenta
que este programa es relativamente inestable (se bloquea a menudo), pero tiene el mrito de
existir.
Losnavegadoreseneltelfonomvilcelular
___________________________________________________________________________
HTML12de48
En la mayora de los navegadores que he presentado,debemossaberqueexisten variantesde

estos navegadores diseados para telfonos mviles celulares, especialmente telfonos
inteligentesytabletas.
Ms y ms gente consultalos sitios web en el mvil o tableta, porloqueesnecesarioconocer
el mnimo funcionamientode losnavegadoresmviles.Dehecho,notesientasdesorientado:la
mayora de los navegadores en los telfonos inteligentes estn en el mismo equipo, son una
versin ms ligera adecuada para mvil. Depende del tipo de telfono, principalmente del
sistemaoperativo.
iPhone.En eliPhonedeApple,seutilizaelnavegadorSafariMobile.Estaesunaversin
ligeraysinembargomuycompleta.
Android. Los Android se benefician de Mobile Chrome. De nuevo, esta esunaversin
adaptadaalmvil.
Windows Phone. Internet Explorer Mobile. El principio es el mismo que para
navegadoresanteriores:sededicaalaversinmvil.
Blackberry. Los Blackberrysonlaexcepcinporquetienensupropionavegador(nohay
equivalente en el ordenador). Sin embargo, las versiones ms recientes de este
navegador se basan en un ncleo comn con Safari y Chrome (es el motor de
renderizado Webkit). Por lo tanto, la pantalla es en general similar a la propuesta por
SafariyChrome.
Los navegadoresmvilesadmitenlamayoradelasltimascaractersticasdeHTMLyCSS. La
actualizacin automtica ofrece garantas de que los usuarios de telfonos celulares mviles
estnactualizadosalasltimasversiones.
Entiende que existen diferencias entre estos navegadores en diferentes mviles, y es
aconsejable probar el sitio en estos dispositivos tambin. En particular, la pantalla es mucho
msestrecha,porloqueseverificarquetusitiosemuestracorrectamente.
Las pantallas tctiles de las tabletas estn equipadas con el mismo navegador, la pantalla es
msgrande.Deestemodo,porejemploeliPadseofrececonMobileSafari.
Enresumen
LaWebfueinventadaporTimBernersLeeenladcadade1990.
.Paracrearsitiosweb,usamosdoslenguajesdeprogramacin:
___________________________________________________________________________
HTML13de48
HTML:Puedesescribiryorganizarelcontenidodelapgina(prrafos,encabezados...)
CSSpermitedarformatoalapgina(color,tamao...).
HahabidovariasversionesdeHTMLyCSS.LasltimasversionessonHTML5yCSS3.
El navegador web esun programa que muestra los sitios Web.SeleeelcdigoHTMLyCSS
parasaberloquequedebemostrar.
Hay varios navegadores web: Google Chrome, Mozilla Firefox,Internet Explorer,Safari,Opera
...
Cadaunomuestralapginawebdeformaligeramentediferentedeotrosnavegadores.
En este curso vamos a aprender a usar HTML y CSS. Vamos a trabajar en un programa
llamado"editordetexto"(Aptana,Notepad++,jEdit,vim...).
___________________________________________________________________________
HTML14de48
TuprimerapginawebenHTML
Todo lo necesario es que hayas instalado algn software. Debes tener un editor de textospara
crear el sitio (como Notepad ++ oAptana)y probarvariosnavegadores(MozillaFirefox,Google
Chrome,Opera...).
En este captulo vamos a empezar a practicar. Vamos adescubrirlosfundamentosdeHTMLy
editar nuestra primera pgina web. As que, por supuesto, no esperamos lograr incluso una
pginawebexcepcionalenestesegundocaptulo,perotenpacienciaquevendr.
Crearunapginawebconeleditor
Vamos a entrar en posicin. Como he dicho,vamosacrear nuestro sitioenuneditordetextos.
Elsoftwaretieneunobjetivosimple:quepuedasescribirtexto.
Al seguir este curso, voy a trabajar en principio con Notepad++ y ms adelanteconAptana.Ya
vimospreviamentecomoseempezabaatrabajarconNotepad++.
Bueno, qu hacemos ahora? Qu est escrito en esa hojaen blanco? Vamos a hacer una
pequea prueba. Invito a escribir, puedes escribir la misma frase que yoo la que quieras, el
objetivoesescribiralgo.
Ahora, grabar el archivo. Para ello, es muy simple: como en todos los programas, tiene un
men Archivo> Guardar (o Ctrl S). Un cuadro de dilogo preguntar dnde deseas guardarel
archivo y con qu nombre. Guardar en el lugar donde se desee. Dael nombre del archivo que
quieras,quetermineen.html,ponprueba.html,porejemplo.
Recomiendo crear una carpeta nueva con los documentos que contienen los archivos de tu
sitio.Pormiparte,hecreadounacarpetadepruebadondepusemiarchivoprueba.html.
Ahora abre el explorador de archivos en la carpeta donde guardaste la pgina. Visualiza el
archivoqueacabasdecrear.ElarchivoenelexploradordeWindowssevisualiza:
El icono que representa el archivo depende del navegador web por defecto. En este caso, el
icono es el deOpera,minavegadorpordefecto bajoWindows,peroelarchivopuedetenerotro.
Tales iconos aparecen cuando el navegador principal es Firefox o Chrome, por ejemplo.
Simplemente haz doble clic en este archivo y ... el navegador se abre y,en la siguiente figura,
___________________________________________________________________________
HTML15de48
semuestraeltextoqueescribiste.
El texto aparece en la mismalnea, cuando desees que se escriba en dos lneas diferentesse
necesita algo ms. De hecho, para crear una pgina web no es suficiente con teclear el texto
como has hecho. Ademsdeestetexto,sedebenescribir deloquesellaman etiquetas(tags),
queledarninstruccionesalordenadorcomo"iralalnea","mostrarunaimagen",etc.
Etiquetasysusatributos
Es muy fcil. Obviamente, no basta escribir "slo" texto en el editor, tambin dars
instruccionesalordenador.EnHTML,seutilizaparaesolasetiquetas.
Etiquetas
Las pginas HTML se llena con lo que se denominan etiquetas. Estos son invisibles en la
pantalla paralos visitantes, pero permiten que el equipoentienda lo que sedesea mostrar. Las
etiquetas son fcilesde detectar. Estn rodeadas de"galones",esdecir,lossmbolos<y>,de
estamanera:
<etiqueta>
Para qu sirven? Indicanla naturaleza del texto que encierran.Se refieren,porejemplo:"Este
eselTtulodelapgina","Estaesunaimagen","Esteesunprrafodetexto",etc.
Haydostiposdeetiquetas:lasetiquetashurfanasylasetiquetasdedosendos
Etiquetasdedosendos
Seabren,contienentexto,ysecierran.Loqueaparececomo:
<title>Esteesunttulo</title>
Distinguimos una etiqueta de apertura (<title>) y una etiqueta de cierre (</ title>) que
indica que el ttulo termina.Todo lo quenoseencuentraentreestasdosetiquetasno.es
unttulo
___________________________________________________________________________
HTML16de48
Estonoesunttulode<title>Esteesunttulo</title>Estoessinttulo
Etiquetashurfanas
Estas son las etiquetas que ms se utilizan para insertar un elemento en un lugar
especfico (por ejemplo, una imagen). No es necesario delimitar el principioyelfindela
imagen,slosignificaqueelequipo"Inserteunaimagenaqu."
Unaetiquetahurfanaseescribeas:
<image/>
Nota que al final / no esobligatorio en HTML5. Podras escribir <image>. Noobstante,
para evitar el confundirse con el primer tipo de etiqueta, los diseadoresrecomiendan
estecomplementobarradiagonal(/)alfinaldelasetiquetashurfanas.
Atributos
Los atributos son unas etiquetas referentes a opciones. Se complementan para proporcionar
informacin adicional. El atributo se coloca despus del nombre de la etiqueta y tiene el mayor
valor,as:
<etiquetaatributo="valor">
De qu sirve? Toma la etiqueta <image /> que acabamos de ver. Slo que no se utiliza
mucho.Sepodraagregarunatributoqueespecifiqueelnombredelaimagenamostrar:
<imagenom="foto.jpg"/>
Elordenadorentoncesentiendequedebemostrarlaimagencontenidaenelarchivofoto.jpg.
En el caso del funcionamiento de etiquetas "pares", se ponen los atributos en la etiqueta de
apertura y no en la etiqueta de cerrado. Por ejemplo, este cdigo indica que la cita es de Neil
Armstrongydel21dejuliode1969:
<quoteautor="NeilArmstrong"date="21/07/1969">Esteesunpequeopasoparael
hombre,unsaltogiganteparalalahumanidad.</quote>
LasetiquetastienennombresrealesenIngls,quedescubrirsmsadelante.
EstructurabsicadeunapginaHTML5
___________________________________________________________________________
HTML17de48
Volviendo a nuestro editor de texto. Os invito a escribir o copiar y pegar el cdigo fuente
mostradoacontinuacin.EstecdigocorrespondeaunapginawebenHTML5:
CdigoHTML:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf8"/>
<title>PginadepruebaHTML5.RafaelBarzanallana</title>
</head>
<body>
</body>
</html>
Debes poner espacios al principio de algunas lneas para desplazar las etiquetas. No es
obligatorio y no tienen impacto en la visualizacin en pantalla, perohace que el cdigo fuente
sea ms legible. Esto se llama sangra. En el editor, basta con pulsar la tecla de tabulacin
(Tab)paraobtenerelmismoresultado.
Te dars cuenta que las etiquetas se abren y cierran en un orden especfico. Por ejemplo, el
<html> es el primero que se abre yes tambinelltimo que secierra(al finaldelcdigocon</
html>).Lasetiquetasdebensercerradasenelordeninversodesuapertura.Ejemplo:
<html>
<body>
</body>
</html>
Correcto. Una etiqueta que est abierta en el interior de otra tambin debe estar cerrada la
interior.
<html>
<body>
</html>
</body>
etiquetasincorrectas,seentremezclan.
No podras dar una explicacin de todas las etiquetas que acabas de copiar en el editor? Por
supuesto,notengasmiedodevertodasestasetiquetasalavez,voyaexplicarsupapel.
___________________________________________________________________________
HTML18de48
Tipodocumento
<!DOCTYPEhtml>
La primera lnea es eltipo de documento. Es esencial porque es loqueindica que se trata de
una pgina webHTML.En realidad noesunaetiquetacomocualquierotra(puescomienzacon
unsignodeexclamacin),sepuedeconsiderarqueesslolaexcepcinqueconfirmalaregla.
Esta lnea fuealgunaunavezuntipodedocumentomuycomplejo.Eraimposibleretenerlaenla
cabeza.
ParaXHTML1.0,setenaqueescribir:
<DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Strict//EN""Http://
www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
Como parte de HTML5, se decidisimplificarla, para el deleite de los desarrolladores. Cuando
se ve una etiqueta de tipo corto (<! DOCTYPE html>), significa que la pgina est escrita en
HTML5.
Etiqueta<html>
<html>
</html>
Este esel cdigodelaetiquetaprincipal. Abarcatodoelcontenidodeunapgina.Comopuedes
ver,laetiquetadecierre</html>seencuentraalfinaldecdigo.
Encabezado<head>ycuerpo<body>
Unapginawebconstadedospartes:
La cabecera <head>: esta seccin proporciona informacin general sobre la pgina,
como su ttulo, la codificacin (por gestin de caracteres especiales), etc.Estaseccin
suele ser bastante corta.Lainformacinenlacabeceranosemuestranenlapgina,se
tratadeinformacingeneralparaelequipo.Essinembargo,muyimportante.
El cuerpo <body>, aqu es donde se encuentra la parteprincipal de la pgina. Todo lo
que escribas aqu se mostrarenlapantalla.Esteeselinterior delcuerpodondevamos
aescribirlamayorpartedenuestrocdigo.
Porelmomento,elcuerpoestvaco(vermsadelante).Consideralaposibilidadporcontrade
otrasetiquetasenlacabecera.
___________________________________________________________________________
HTML19de48
Codificacin(charset)
Esta etiqueta especifica la codificacin utilizada en el archivo .html. Sin entrar en detalles, ya
que esto puede convertirse rpidamente en complicado,la codificacinindica cmo se guarda
el archivo. Determina la forma en que los caracteres especiales se mostrarn (acentos,
ideogramaschinosycaracteresjaponeses,rabes,etc.).
Existen varias tcnicas de codificacin con nombres extraos, el lenguaje utilizadoessegnla
norma ISO885915, 775 OEM, Windows 1253 ... Sin embargo, uno debe ser utilizado en la
actualidad tanto como seaposible: UTF8. Este mtododecodificacinmuestrasinningntipo
de problemas prcticamente todos los smbolos de todas las lenguas de nuestro planeta. Es
poresoquepongoUTF8enestaetiqueta.
Tambin se requiere que el archivo se guarde correctamente en UTF8. Este es elcaso con
mayor frecuencia en Linux por defecto, pero, en Windows, debes decrselo al software en
general.
Por si no lo haces para cada nuevo archivo, sugiero que vayas en Notepad++ al men
Configuracin>Preferencias> Archivo nuevo/Carpeta predeterminada. y selecciona UTF8 sin
BOM en la lista. Si tienes un problema de visualizacin en la pgina web,hayunproblemacon
codificacin. Asegrate deque la etiqueta indica UTF8 y queelarchivoseguardaenUTF8(el
editordetextoescapazdedecirle,Notepad++lohaceenelmendecodificacin).
Ttuloprincipaldelapgina
<title>
Esteesel ttulodelapgina,probablementeelmsimportante.Cadapginadebetenerunttulo
que describe loquecontiene.Esaconsejablemantenerelttulolosuficientementecorto (menos
de100caracteresengeneral).
El ttulo no aparece en la pgina visualizada, pero s en laparte superior del mismo(amenudo
en la pestaa del navegador). Guarda la pgina web y brela en tu navegador. Vers que el
ttulo aparece en la parte superior del navegador. Debes saber que elttulotambinapareceen
losresultadosdebsqueda,porlotantolaeleccindelttuloadecuadoesimportante.
Comentarios
Hemos aprendido acrear nuestra primerapginaHTML real enestecaptulo.Antesdeconcluir,
megustaraintroducirelprincipiodeloscomentarios.
___________________________________________________________________________
HTML20de48
Es un texto que simplemente sirve como nota. No se muestra, no esledoporelordenador,no

hacealterarlavisualizacindelapgina.Enpocaspalabras,esintil?,bueno,si.
Esto esparaqueelprogramadorylagentequeleeelcdigofuentedelapgina,puedausarlos
comentariosparadejarinformacinsobreelfuncionamientodelapgina.
Qu inters? Esto te ayudara recordar cmoestelaboradatupginasi regresasalcdigo
fuente despus de un largo tiempo de ausencia. No te ras, nos sucede a todos los
desarrolladores.
Insertaruncomentario
UncomentarioesunaetiquetaHTMLconunaformamuyespecial:
<Estoesuncomentario>
Puedes ponerlo donde quieras dentro del cdigofuente: no tiene ningn impacto en lapgina,
perosepuedeutilizarparaayudaraidentificarenelcdigofuente(sobretodosieslargo).
<!DOCTYPEhtml>
<html>
<head>
<Encabezado>
<title>PginadepruebaHTML5.RafaelBarzanallana</title>
</head>
<Findelacabecera>
<body>
</body>
</html>
Cualquierapuedevertuscomentarios...ytodoelcdigo.
Un punto importante: que todos pueden ver el cdigo HTMLdelapginacuandose publiqueen
una web. Simplemente haciendo clic botn derecho sobre la pgina y seleccionando "Ver
cdigo fuente de la pgina" (el texto indicado puede cambiar dependiendo del navegador).Se
puedeprobarestamanipulacinencualquiersitioweb,queseafuncional,100%garantizado.
Esto se explica fcilmente: el navegador debe obtener el cdigo HTML para lo que deseas
___________________________________________________________________________
HTML21de48
mostrar.ElcdigoHTMLparatodoslossitiosespblico.
La moraleja de la historia? Todoel mundo puedeverelcdigoHTMLynopuedesevitarlo.Por
lo tanto,nopongaslainformacinconfidencial comocontraseas,enloscomentarios...ycuida
detucdigofuente.
Cuando nos fijamos en el cdigo de algunos sitios web, no tengas miedo si piensas que no
cumple las mismas reglas que se presentan en esta documentacin.Todoslossitiosnoestn
escritos en HTML5 (ni mucho menos) y, a veces,algunos desarrolladores escriben su cdigo
muymal,nosiempresonejemplosaseguir.
Resumen
Usamos el editor de texto (Notepad + +, Aptana, jEdit, vim ...) para crear un archivo con la
extensinhtml(porej.:prueba.html).Estasernuestrapginaweb.
Este archivo se puede abrir en el navegador del sistema operativo simplemente haciendo
dobleclicenl.
Dentrodelarchivo,vamosaescribirelcontenidodenuestrapgina,conlasetiquetashtml.
Lasetiquetasvienenenmuchasformas:
<etiqueta> </ etiqueta> Se abren y cierranparadelimitarelcontenido(inicioyfinaldeun
ttulo,porejemplo).
<etiqueta/> etiquetas hurfanas (sin inserciones de una sola copia), que te permiten
insertarunelemento.enunlugarespecfico(porejemplo,unaimagen).
Las etiquetas estn a veces acompaada de atributos paraproporcionarorientacinadicional
(porejemplo:<imagename="foto.jpg"/>).
Unapginawebsecomponededosseccionesprincipales:unencabezado(<head>)ycuerpo
(<body>).
Unopuedeverelcdigofuentedecualquierpginawebhaciendoclicderechoyseleccionar:
Verlapginadecdigofuente.
___________________________________________________________________________
HTML22de48
Organizareltexto
La pgina en blancoes vlida, pero tu sitio web es probable que tenga xitolimitadosi lodejas
as. Vamos a descubrir muchas etiquetas HTMLenestecaptulo.Algunashanexistidodesdela
primeraversindeHTML,otrashansidorecientementeintroducidasenHTML5.
Vamosaver,sucesivamente,enestecaptulo:
cmoescribirprrafos
cmoestructurarlapginaconlosttulos
laformadedarimportanciaaciertaspalabrasdeltexto
cmoorganizarlainformacinenformadelista.
Prrafos
La mayora de las veces, el escribir textoen una pgina web se realiza dentro de los prrafos
HTML
HTMLofrecelaetiqueta<p>paradelimitarlosprrafos.
<p>Holaybienvenidosamiweb</p>
<p>significa"comienzodelprrafo"
</p>significa"finaldelprrafo."
Como ya he dicho anteriormente se escribe el contenido de la pgina web entre la etiqueta
<body> y la</body>. Asqueessuficiente ponernuestraseccindeentreestasdosetiquetas
yfinalmentetendremosnuestraprimerapginawebrealcontexto.
Tomaexactamenteelmismocdigodelcaptuloanterior,ypuedesaadirunprrafo:
<!DOCTYPEhtml>
<html>
<head>
<title>prrafos</title>
</head>
<body>
<p>Holaybienvenidosamiweb</p>
</body>
</html>
___________________________________________________________________________
HTML23de48
Intntalo,verselresultado.Estoesunbuencomienzo.
Peronosedetieneallelcamino.AhoravamosaveralgounpocoespecialenHTML:elsalto
delnea.Suenasimpleysinembargo,nofuncionarealmentecomounprocesadordetextos
Saltodelnea
EnHTML,sisepulsalateclaEnter,noinsertaunanuevalneacomoestsacostumbrado.
Pruebaestecdigo:
<!DOCTYPEhtml>
<html>
<head>
<title>Saltosdelneadeprueba</title>
</head>
<body>
<p>Holaybienvenidosamisitio!
Estaesmiprimeraprueba,serindulgentes.
Porfavor,estoyaprendiendopocoapococmofunciona.
Porahoraestunpocovaco,perovolverentresdasenlosque
habraprendidounascuantascosasms,teaseguroquetesorprendern
</p>
</body>
</html>
Como era de esperar, sin embargo, hay una buena manera de hacer los saltos de lnea en
HTML. De hecho, si se quiere escribir un segundo prrafo, slo hay que utilizar un <p> de
segundaetiqueta.
ElcdigoHTMLdebeserllenadoconlasetiquetasdeprrafofinal.Porejemplo:
<!DOCTYPEhtml>
<html>
<head>
<title>prrafos</title>
</head>
<body>
<p>Holaybienvenidosamisitio!
Estaesmiprimeraprueba
Porfavor,estoyaprendiendopocoapococmofunciona.</p>
___________________________________________________________________________
HTML24de48
<p>Porahoraestunpocovaco,vuelveentresdasenlosquehe
habraprendidounascuantascosasms,teaseguroquetesorprenders
</p>
</body>
</html>
ElresultadolopodrscomprobarusandoNotepad++ocualquierotroeditor.
Si slo quieroir a unalneadeunprrafoyquesalteunalnea,sinpasaraunnuevoprrafo.Se
dispone de <br> que es una etiqueta hurfanaquese utiliza paradecirquetenemosquesaltar
unalnea.
<html>
<head>
<title>Saltosdelnea</title>
</head>
<body>
<p>Holaybienvenidosamisitio!<br/>
Estaesmiprimerapruebaasqueperdona.
<p>Actualmenteesunpocovaco,perovolverentres
dasenlosquehabraprendidounascuantascosasms,teaseguroque
Tesorprenders</p>
</body>
</html>
Tericamente, puedes ponervarias<br/>enunafilaparalograrsaltosdevariaslneas,perose
considera una mala prctica que hace que el cdigo sea difcil de mantener. Para mover un
texto con ms precisin, se necesita el uso de CSS, ellenguajequecomplementaalHTMLdel
quesehablarmsadelante.
Entonces,questincluido?
</p>:paraorganizareltextoenprrafos
<br/>:parairalalnea.
Ahoraquepodemosescribirprrafos,vamosavercmopodemoscrearttulos.
Ttulos
Cuandoelcontenidodelapginaseamplaconvariosprrafos,serdifcilparalosvisitantes
___________________________________________________________________________
HTML25de48
identificarlos.Aquesdondelosttulossontiles.
En HTML, se pueden utilizarseis niveles diferentes de ttulos. Quiero indicar que puedesdecir:
"Este es un ttulo muy importante", "Este es un ttulo un poco menos importante", "Este es un
ttulo mucho menos importante", etc. Tienes seis etiquetas diferentes de ttulo:
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
<h1>:significa"comomuyimportante".Engeneral,seutilizaparavisualizarelttulodela
pginaalprincipio.
<h2>:significa"tanimportante".
<h3>:elmismo,escomoalgomenosimportante(sepodradecir,"subttulo").
<h4>:comomuchomenosimportante.
<h5>:elttulonoesimportante.
<h6>:ttulorealmente,perorealmentenoesimportanteenabsoluto.
Precaucin: No deben confundirse con la etiqueta del ttulo. La etiqueta del ttulo muestra la
barradettulodelapgina,comohemosvisto.
No te dejes engaar por todas esas etiquetas. De hecho, seis niveles de encabezados, es
mucho. En la prctica, personalmente, yo slo uso <h1> y <h2> <h3>, muy rara vez los otros
(nosesuelennecesitarseisnivelesdiferentesdetitulares).
Un navegador muestra el ttulo muy importante en tamao muy grande,el ttulo de un poco
menosimportanteentamaoalgomenor,etc.
No elijas tu etiqueta del ttulo de acuerdo con el tamaoqueseaplicaaltexto.Esesencial para
una buena estructura de la pgina, iniciar con un encabezado de nivel 1 (<h1>), entonces un
encabezadodenivel2(<h2>),etc.Nodebehabersubttulossinttuloprincipal.
Si deseas cambiar el tamao del texto, vamos a aprender a hacer esto conCSSunpocoms
adelante.
Tratadecrearunapginawebconttulosparaverloquesucede:
<html>
<head>
<title>Nivelesdettulos</title>
</head>
<body>
<h1>Ttulosperimportante</h1>
<h2>Ttuloimportante</h2>
___________________________________________________________________________
HTML26de48
<h3>Ttulounpocomenosimportante</h3>
<h4>Ttulonodemasiadoimportante</h4>
<h5>Ttulonoimportante</h5>
<h6>Ttuloquenoesrealmenteimportante</h6>
</body>
</html>
Vamos, yo te doy un ejemplo del uso en un sitio web (vers que no estoyutilizando todas las
etiquetas):
<html>
<head>
<title>PresentacindelsitiodeRafaelBarzanallana</title>
</head>
<body>
<h1>BienvenidoalSitiodeRafaelBarzanallana</h1>
<p>Holaybienvenidosamisitio.<br/>
Ques?elsitiodeRafaelBarzanallana,</p>
<h2>Cursosparaprincipiantes</h2>
<p>ElsitiodeRafaelBarzanallanaofreceelcursos(tutoriales)
paraprincipiantes:noseprecisanconocimientoprevioparaseguirlos.</p>
<p>Podrsaprender,aunquenosepasnada,acrearunapginaWeb</p>
<h2>Unacomunidadactiva</h2>
<p>Tienesproblemas,uncomponentedelcursoqueno
entiendesNecesitasayudaparacreartusitioweb?<br/>
Visitalosforos!Descubrirsquenoestssoloenestecaso,ysinduda
encuentrasaalguienqueteayudeasolucionarelproblema.</p>
</body>
</html>
En estos momentos la pginawebvatomandoforma.S, pero quierocentrarmittulo,escribiry
subrayar en rojo. Vamos a hacer todo esto cuando sepamos CSS (en la segunda parte del
curso). Debes saber que <h1> noquieredecir"TimesNewRomande16puntos",perosi"ttulo
importante".
___________________________________________________________________________
HTML27de48
Con CSS, puedes decir "quiero quemisttulosmsimportantessecentren,contextocolorrojo

y subrayados", en HTML, solo estructuramos nuestra pgina. Existen diferentes formas para
resaltareltextoentupgina.
Ponunpocodevalor
Para poner un poco de valor en tu texto, debes utilizar la etiqueta <em> </ em>. El
funcionamiento es muy simple: incluir las palabras a destacar con estas etiquetas. A partir de
unpequeoejemploanteriorpongoalgunaspalabrasdestacadas:
<html>
<head>
<title>nfasis</title>
</head>
<body>
Estaesmiprimeraprueba.
Porfavortenpaciencia,estoy<em>aprendiendopocoapoco<em>
cmofunciona.</p>
</body>
</html>
Como podrs ver si ejecutas el cdigo, utilizarlaetiqueta<em>tieneelefectodeponereltexto
en cursiva. De hecho, el explorador elige la forma de mostrar las palabras. Se dice que las
palabras son muy importantes y para destacar esta informacin, cambia elaspecto del textoa
cursiva.
Textoimportante
Para poner un texto como importante utiliza la etiqueta <strong> que significa "fuerte" o
"importante"siasloprefieres.Seutilizaexactamentedelamismamaneraque<em>:
<html>
<head>
<title>Importante</title>
</head>
<body>
Estaesmiprimeraprueba.
___________________________________________________________________________
HTML28de48
Porfavortenpaciencia,estoy<strong>aprendiendopocoa
poco</strong>cmofunciona.</p>
</body>
</html>
Seguramente vers que el texto aparece en negrita. De nuevo, la negrita es slo una
consecuencia. El navegador ha elegido para mostrar en negrita las palabras importantes que
hacenquesedestaquems.
La etiqueta <strong> no significa poner en negrita, sino "importante". Podemos decidir ms
tarde, con CSS,comoponerlaspalabras"importantes"deunamaneradiferentealanegrita,si
lodeseas.
Marcareltexto
La etiqueta <mark> pone de manifiesto visualmente una parte del texto. El extracto no se
considera necesariamente importante, pero se desea quese distinga claramente del resto de
texto. Esto puede ser til para resaltar un texto a buscar con posterioridad en el sitio, por
ejemplo.
<html>
<head>
<title>Textomarcado</title>
</head>
<body>
Estaesmiprimeraprueba,<mark>seaindulgente</mark>
</body>
</html>
De forma predeterminada, el efecto de <mark> es resaltar el texto. Podemos cambiar la
visualizacin de CSS(decidir resaltar, otro color,enmarcareltexto,etc.). Eselmismoprincipio
queloquedijeantesdelasetiquetas:indicanel significadodelaspalabrasynolaformaenque
debenaparecer.
Recuerda:HTMLparaelfondo,CSSparalaforma
Yo tal vez parezca unpoco pesado, pero es muy importantequeentendamos bien, porquelos
principiantes a menudo cometen el mismo error en esta etapa. Vieron las etiquetas <em>,
<strong>, <mark> ... y dicen: "muy bien, he descubierto cmo poner en cursiva, negrita, y la
___________________________________________________________________________
HTML29de48
formaderesaltartextoenHTML".
Y sin embargo ... esto no es as porqu son estas etiquetas? Ya s quevasadecir"S,pero
cuando uso <strong>el texto aparece en negrita, porloqueesennegrita.Ysinembargoesun
errorpensarqueestaetiquetaseutilizaparaeso.
El papel de las etiquetas es para indicar el sentido del texto. Por lo tanto, <strong> dice al
ordenador "Este texto es importante." Esoestodo. Y para mostrarqueeltextoesimportante,el
equipodecideponerloennegrita(peropuedeserqueloescribaenrojo).
Lamayoradelosnavegadoresmuestraneltextoimportanteennegrita,peronadalesobliga. No
entiendo. Cul es el punto en que el equipo sabe que un texto es importante? No es lo
suficientemente inteligente como para comprender. Piensa otra vez. Muchos programas
analizan el cdigo fuente de pginas web, comenzando con los robots de los motores de
bsqueda. Estos robots buscan en la web, leyendo el cdigo HTML para todos los sitios. Este
es el caso de las araas de Google y Yahoo, por ejemplo. Las palabras clave "importantes"
tienden a ser ms valiosas para ellos, as que si alguien hace una bsqueda con estas
palabras,esmsprobablequeaparezcanatravsdetusitio.
Por supuesto, esta es una explicacin aproximada y no pienses que el uso de la etiqueta
<strong> en absoluto, va a mejorar tu aparicin en un buscador. Basta con confiar en los
ordenadores:ellosentiendenloqueuntexto"importante"ypuedenutilizarestainformacin.
Entonces,cmohacerquelanegrita,aparezcaenrojo?TodoestosehaceconCSS.
Recuerda:
HTMLdefinelasustancia(elcontenidolgicodeloselementos)
CSSdefinelaforma(apariencia).
Veremos CSS ms adelante, por ahora nos centramos en HTML y etiquetas, que cada una
tieneunsignificadoenparticular.
___________________________________________________________________________
HTML30de48
Listas
Las listas a menudo permiten estructurar mejor nuestro texto y ordenar nuestra informacin.
Vamosadescubriraqudostiposdelistas:
listasnoordenadasolistasdevietasy
listasordenadasolistasnumeradasoenumeraciones.
Listanoordenada
Unalistanoordenadasepareceaesto:
Fresas
Frambuesas
Cerezas
Esteesunsistemaquenospermitecrearunalistadeelementossinningunanocindeorden
(nohayuna"primera"o"ltima).
Crearunalistasinordenesmuysimple.Slotienesqueutilizarlaetiqueta<ul>quesecierra
con</ul>.
Asqueempiezaaescribirlosiguiente:
<ul></ul>
Y ahora, estoesloquevamosahacer:escribimoscadaelementodelalistaentredosetiquetas
<li>< /li>. Cadaunade estas etiquetas debeestarentre<ul>y</ ul>.Seentiendedeinmediato
conesteejemplo:
<ul>
<li>Fresas</li>
<li>Frambuesas</li>
<li>Cerezas</li>
</ul>
Elresultadoeselsiguiente:
___________________________________________________________________________
HTML31de48
Ten en cuentaquelalistadebeestarcolocadadentrode<body></body>.Apartir deahora,no

pongotodoelcdigodepginaparaquesealegible.
Tenencuentaestasdosetiquetas:
<ul></ul>definentodalalista
<li></li>definenunelementodelalista.
Se pueden poner tantos elementos como se desee en lalista con vietas, no se limita a tres
elementoscomosehavistoenelejemplo.
Y ahora que sabes cmo crear una lista con vietas.Noestandifcilentendercmoanidaslas
etiquetas.
Para aquellos que necesiten hacer listas complejas, sabemos que se pueden anidar las listas
no ordenadas(crear una lista con vietas en una lista con vietas). Si deseas hacer eso, abre
unasegundaetiqueta<ul>dentrodeunelemento<li></li>.
Si cierras las etiquetas en el ordencorrecto,nohabr problemas.Sinembargo,estatcnicaes
unpocodifcildedominar.
Listaordenada
Una lista ordenada funciona del mismo modo, slo hay que realizar un cambio de etiqueta: el
bloque<ul></ul>debeserreemplazadoporelbloque<ol></ol>.
Dentro de la lista, nada ha cambiado: todava utiliza etiquetas <li> </li> para delimitar los
elementos.
El orden en el que colocar loselementos en la lista es importante. La primera <li> </li>serel
elementon1,elsegundosereln2,etc...
___________________________________________________________________________
HTML32de48
Como es muy intuitivo, admira la simplicidad de este ejemplo (los resultados en la figura
posterior):
<h1>Midadevagancia</h1>
<ol>
<li>melevanto.</li>
<li>comoybebo.</li>
<li>vuelvoalacama.</li>
</ol>
Encomparacinconelejemploanterior,todoloquetenasquecambiareslaetiqueta<ol>.
Para ms informacin, hay untercertipodelista,muchomsrara:unalista dedefiniciones.Se

trata de la etiquetas <dl> (para delimitar la lista), <dt> (para definir un trmino) y <dd> (para
delimitarladefinicindeestetrmino).
Resumen
HTML tiene muchas etiquetas que nos permiten organizar el texto de nuestra pgina. Estas
etiquetasdanindicacionestalescomo"Esteesunprrafo","Esteesunttulo",etc.
Losprrafossedefinenporlaetiqueta</
p>ylossaltosdelneaporlaetiqueta<br/>.
Hay seis niveles de encabezados, de <h1> </ h1> a <h6> </ h6> utilizarlos dependiendodel
tamaodelttulo.
___________________________________________________________________________
HTML33de48
Podemosenfatizarciertaspalabrasconetiquetas<strong>,<mark>y<em>.
Para crear listas, hay que usar la etiqueta <ul> (con vietas, sin orden) u <ol> (lista
ordenada).Loselementosseinsertanconunaetiqueta<li>paracadaelemento.
___________________________________________________________________________
HTML34de48
Crearenlaces
En el captulo anterior, hemos aprendido a crear una pgina HTML simple. Aunque no era
realmenteatractiva,eraunapginaHTMLrealdetodosmodos.
Como sabes, una pgina web consta de varias pginas. Cmopasar de una pgina a otra?
Con vnculos, porsupuesto.Enesteapartadonos limitaremosaaprenderacrearvnculosentre
nuestraspginas.
Supongo que todos saben lo que es un enlace: se trata de un texto sobre elquepuedeshacer
clicparairaotrapgina.
Uno puede hacer un enlace desde una pgina b.html a la a.html, pero tambin se puede
enlazar a otro sitio externo (por ejemplo, http://www.barzanallana.es).Enamboscasos,seve
quelaoperacineslamisma.
Enlaceaotrositio
Es fcil de reconocer los enlaces de la pgina: aparecen en pantalla escritos de una manera
diferente(pordefecto,enazulysubrayado)yuncursoraparecealhacerclicenl.
Sugiero probar el cdigo de enlace que conduce a mi pgina web personal, como la figura
siguiente.
Para el enlace, la etiqueta que utilizamos es muy sencilla de recordar: <a>. Sin embargo, se
debeagregarunatributo,href,paraindicarlapginadelenlaceaquedeberallevar.
Por ejemplo, en el cdigo de abajo hay un enlace que conduce a barzanallana.es situada en
http://www.barzanallana.es.Elcdigocompletodelacapturadepantallamostradaes:
___________________________________________________________________________
HTML35de48
<head>
<title>PruebadeenlacealsitiodeRafaelBarzanallana</title>
<metaname="GENERATOR"content="QuantaPlus">
<metahttpequiv="ContentType"content="text/htmlcharset=utf8">
</head>
<body>
<h1>Accesoaunsitiointeresante</h1>
<p>Buenosdas</p>
<p>Deseasvisitarunsitiosobre<ahref="http://www.barzanallana.es">
escepticismo</a>?</p>
<p>Estilparanoserengaado</p>
</body>
</html>
Por defecto, el enlace aparece resaltado en azul. Si ya has abierto previamente la pgina, el
enlace se muestra en color morado. Veremos cmoesta aparienciacambiacuandoseestudie
CSS.
Si deseas crear unvnculo a otro sitio, slo tenemos que copiar la direccin (llamada URL) en
http://. Ntese que algunos enlaces a veces empiezan con prefijos https:// (sitio seguro) o de
otrotipo(ftp://...).
Los enlaces que acabamos de ver se llaman enlaces absolutos, yaque muestra la direccin
completa. Ahora veremosquepodemos escribir los enlaces de unamaneraalgodiferente,que
sertilparahacerenlacesentrelaspginasdenuestrositio.
Unenlaceaotrapginadelmismositio
Hemos aprendido a crear enlaces a sitios ya existentes. Pero estoy seguro deque te gustara
hacerconexionesentredistintaspginasdelmismositio.
S, exactamente, cmopuedohacerunenlaceaotra pginademisitio?Nossudireccinen
http:// ..., acabo de empezar a crear mi pgina web aqu, almacenndola en el disco duro del
ordenador.En efecto, porel momento,vasacreartusitioentuordenador.Tuereselnicoque
puede verlo sin embargo, "una direccin web", comienza con http:// como la mayora de los
sitios.Afortunadamente,estononosimpidetrabajar.
Dospginas(archivosHTML)ubicadasenlamismacarpetaodirectorio.
Para empezar, vamos a crear dos archivos correspondientes a dos pginas HTML diferentes.
___________________________________________________________________________
HTML36de48
Como no estoy muy inspirado, los llamo pagina2.html y pagina1.html. As que vamos atener
estosdosarchivoseneldiscoenlamismacarpeta.
Cmoestablecerunvnculodesdelapgina1ala2sinhttp://enladireccin?Dehecho,es
fcil:siambosarchivosseencuentranenlamismacarpeta,bastaconescribirelenlacecomo
elnombredelarchivodedestinoalquequieresllevar.Porejemplo:<ahref="pagina2.html">.Se
dicequeesunvnculorelativo.
ElcdigoquevamosautilizarparaenlazarlosarchivosenHTML,pagina1.htmlypagina2.html,
esparalapgina1,porejemplo:
<p>Buenosdas.Deseasconsultarla<ahref="page2.html">pgina2</a>?</p>
yelcdigoenla2,porejemplo:
<h1>Bienvenidoalapgina2!</h1>
Dospginas(archivosHTML)encarpetasdiferentes
Las cosas se ponen un poco difciles si las pginas se encuentran en carpetas diferentes.
Idealmente, no deben estar demasiado lejos una de la otra(en una subcarpeta, por ejemplo).
Supongamosquelapagina2.htmlseencuentraenunasubcarpetallamadacontenido.
Enestecaso,elvnculodebeserescritoas:
<ahref="contenido/pagina2.html">
Sihubieravariassubcarpetasanidadas,sedeberaescribir,porejemplo,losiguiente:
<ahref="contenido/privado/pagina2.html">
Si el archivo de destino en el enlace se coloca en una carpeta que es "superior" en el rbol,
debesescribirdospuntos(no:)comoseindica:
<ahref="../pagina2.html">
Los enlaces relativos no sonmuy complicados de utilizar una vez que secapta la idea. Basta
con mirar a qu "nivel de la carpeta" est el archivo de destino para aprender a escribir tu
enlace.
Enlaceaunancla
Un ancla es una especie de lugar marcado que se puedeponer en las pginas HTML cuando
___________________________________________________________________________
HTML37de48
son muy largas. De hecho, vale la pena poner enlaces a sitios posteriores en lamismapgina
paraqueelvisitantepuedairdirectamentealalapartedeinters.
Para crear un ancla, slo tienes que aadir el atributo de identidad para una etiqueta quea su
vezservircomopuntodereferencia.Estopuedesercualquieretiqueta,porejemplounttulo.
Utiliza el atributo id para nombrar el ancla. Esto ser til entonces para hacerun enlace a ese
ancla.Porejemplo:
<h2id="miancla">Ttulo</h2>
Luego, bastacon crear unenlace, como decostumbre, peroestavezelatributohrefcontendr
unaalmohadilla(#)seguidadelnombredelancla.Ejemplo:
<href="#miancla">Iralancla</a>
Normalmente, si haces clic en el enlace,tellevarmsabajoenla mismapgina(siempreque
la pgina tenga el texto lo suficiente largo como para mover las barras dedesplazamiento de
formaautomtica).
Unapginademuestraconunagrancantidaddetextoyusodeanclas:
<h1>Migranpgina,sobrelosfraudesdelaspseudomedicinas</h1>
<p>Irdirectamentealaseccinquetratasobre:<br/>
<ahref="#homeopatia">Homeopata</a><br/>
<ahref="#acupuntura">Acupuntura</a><br/>
<ahref="#quiropractica">Quiroprctica</a><br/>
</p>
<h2id="homeopata"></h2>
<p>...(Hayunmontndetexto)...</p>
<h2id="acupuntura">acupuntura</h2>
<h2id="quiropractica">quiroprctica</h2>
Si no sucede nada al hacer clic en los enlaces es que no hay suficiente texto. En este caso,
puedes agregar a la pgina blablabla repetidas veces para aumentar la cantidad de texto, o
reducir el tamaode la ventana del navegadorparamostrarlasbarrasdedesplazamiento enel
lateral.
El atributo idse
utilizaparadarunnombre"nico"aunaetiqueta,parahacerusodepuntosde
referencia. Aqu seutiliza para enlazar a un ancla, pero en CSS, ser muy tilpara"identificar"
___________________________________________________________________________
HTML38de48
una etiqueta especfica. Sin embargo, no crees id con espacioso caracteres especiales, slo
tienes que utilizar,en la medida de loposibleletrasynmerosparaqueelvalorseareconocido
portodoslosnavegadores.
Enlaceaunanclasituadoenotrapgina
La idea es hacer un enlace que abre otra pgina y que llevedirectamente a un ancla situado
ms abajo en esa pgina. Enlaprcticaestoesbastantesimpledehacer:bastaconescribirel
nombredelapgina,seguidodeunsignoalmohadilla(#),seguidoporelnombredelancla.
Porejemplo:<ahref="anclas.html#parte2">...tellevaralapginaanclas.html,directamente
enelancla,denominadoparte2.
Estudiosdecasosprcticosdelautilizacindeenlaces
Voy a tratar de mostrar aqu algunos casos prcticos de uso de los enlaces. Por ejemplo,
sabes que es muy fcil hacer las conexiones que inician una descarga? Crear un nuevo
correoelectrnico?Quinabrirunanuevaventana?Vamosavertodoaqu.
Unenlacequemuestraunaburbujadeinformacinalpasarelratnporencima.
Se puede usar el atributo de ttulo que muestra una informacin sobreherramientascuandose
apunta a la relacin. Este atributo es opcional. Se obtendr un resultado como el siguiente
grfico.
La descripcinpuedesertilparainformaralosvisitantesantesdequelhubierahechoclicen
elenlace,incluso.
Cmoreproduciresteresultado:
Hola<p>.Tegustaravisitarel<ahref="http://www.escepticismo.es"title=
"Escepticismoypensamientocrtico">sitioEscepticismo</a></p>
Unenlacequeabreunanuevaventana
Es posible "forzar" abrir un enlace en una nueva ventana. Para ello, vamos a aadir target =
___________________________________________________________________________
HTML39de48
"_blank"en<a>:
Hola<p>.Tegustaravisitarel<ahref="http://www.esceptcismo.es"target=
"_blank">SitioEscepticismo</a>
<br/>
Elsitioseabrirenotraventana.</p>
Dependiendo de la configuracin del navegador, la pgina se abrir en una nueva ventana o
pestaa.Nosepuedeelegirentreabrirunanuevaventanaopestaanueva.
Sin embargo noes recomendable abusar de esta tcnica, ya que interfiere con la navegacin.
El propio visitante puede decidir si deseaabrirelenlace enunanuevaventana.SisepulsaShift
+clicelenlaceseabraenunanuevaventanaoCtrl+clicparaabrirenunapestaanueva.
Unenlaceparaenviarunemail
Si quieres que tus visitantes puedan enviar un correo electrnico, puedes utilizar los enlaces
mailto. Nada de cambiosenlaetiqueta,slotienesquecambiarelvalordelatributohrefdeesta
manera:
<p><ahref="mailto:ii@barzanallana.es">Enviaruncorreoelectrnico</a></p>
Si haces clic en el enlace, aparece un mensaje en blanco queseabreunanuevaventanapara
serenviadoasucorreoelectrnico.
Enlaceparadescargarunarchivo
Muchos se estarn preguntando cmo va esto de descargar un archivo. De hecho, se debe
proceder exactamente como si fuera un enlace a una pgina web, pero esta vez indicando el
delnombredelarchivoparadescargar.
Por ejemplo, supongamos que deseas descargar apuntes.rar. Slo tienes que colocar este
archivo en la misma carpeta de tu pgina de internet (o una subcarpeta) y poner un enlace a
estearchivo:
<p><ahref="apuntes.rar">Descargalosapuntes</a></p>
El navegador, al ver que no es una pgina web para mostrar, iniciarel proceso de descarga,
cuandohacesclicenelenlace.
Resumen
Los enlaces que permiten de cambiar de pgina aparecen, por defecto, escritos en azul y
___________________________________________________________________________
HTML40de48
subrayados.
Para insertar un enlacese utiliza etiqueta <a>conelatributohrefparaespecificarladireccin
delapginadedestino.Ejemplo:<ahref="http://www.barzanallana.es">.
Uno puede hacer un enlace a otra pgina del mismo sitio, simplemente introduciendo el
nombredelarchivo:<ahref="pagina2.html">.
Los enlacestambinpuedenllevaraotroslugaresenlamismapgina.Tenemosquecrearun
ancla conelatributoidpara"Marca"enalgnlugar delapgina,acontinuacin,vincular alancla
deestamanera:<ahref="#ancla">.
___________________________________________________________________________
HTML41de48
imgenes
Insertar una imagen en una pgina web es, es increblementefcil. Hay diferentes formatosde
imgenes que se pueden utilizar en los sitios web, y no debemos elegiral azar. De hecho, las
imgenes son a veces muy grandes para descargar, lo que ralentizael tiempo de carga de la
pgina(muchomsqueeltexto).
Paraasegurarsedequetuspginassepuedenleeryserrpidasdedescargar,sigue
activamentemiconsejo.
Losdiversosformatosdeimagen
Sabes lo que es un formato de imagen? Cuando tienes una imagen a tu alcance, se puede
guardar en varios formatos diferentes. El peso (en KB o incluso MBdelaimagensermayoro
menordependiendodelformatoelegidoylacalidaddelaimagen.
Por ejemplo, el programa dedibujo Paint (aunque esto estlejos de ser el mejor) puede elegir
entre varios formatos al guardar una imagen. Hay algunos programas que nos permiten la
eleccinentreunaampliavariedaddeformatosestndares.
Algunos formatos son ms adecuados que otros, dependiendo del tipo de imagen (fotografa,
dibujo, cine ...). Nuestro objetivoaqu es dar una vuelta por diferentes formatos utilizados en la
Web paraconocerlosysabenelegirelqueseadaptarmejoratusimgenes.Tenlaseguridad,
quenohaymuchosformatosdiferentes,porloquenosermuylargo.
Todas las imgenes publicadas en internet tienen en comn que se comprimen. Esto significa
queelordenadorhaceclculosparareducirlasyporlotantoseanmsrpidasdecargar.
ElformatoJPEG
Las imgenes en formato JPEG (JointPhotographic Expert Group)estnmuyextendidasenla
Web. Este formato est diseado para reducir el peso de imgenes (es decir el tamao del
archivo asociado), quepuede comprender ms de 16 millones de colores diferentes. La figura
siguienteesunaimagenguardadacomounarchivoJPEG.
___________________________________________________________________________
HTML42de48
LasimgenesJPEGseguardanconlaextensin.jpgojpeg.
Se ha de considerar que JPEG deteriora un poco la calidad de la imagen, de una manera
generalmente imperceptibles. Eso es lo que lo hace tan efectivo para reducirel tamao de las
fotografas.
Cuando se trata de una imagen, por lo general no puedes detectar la prdida de calidad. Por
contra, si no es una imagen,puede verlaimagenunpocoborrosa.Enestecaso,debesutilizar
elformatoPNG.
PNG
El formato PNG (Portable Network Graphics) es el ms nuevo de todos. Este formato es
adecuado para lamayora de los grficos (estoy tentado a decir "cualquier cosa quenoesuna
imagen"). PNG tienedosgrandesventajas:sepuedehacertransparenteynoafectaala calidad
delaimagen.
El PNG se invent para competircon otroformato,elGIF,del que habaquepagarderechosde
propiedad por usarlo. En efecto, PNG ha evolucionado y se ha convertido en el formato ms
potenteparagrabarlamayoradelasimgenes.
PNG se presenta en dos versiones, dependiendo del nmero de colores que la imagen debe
incluir:
PNGde8bits:256colores
PNGde24bits:16millonesdecolores(comounaimagenJPEG).
Una versin antigua de Internet Explorer (IE6) no puede mostrar correctamente imgenes de
24bit PNG transparentes. Este explorador tiende a ser menos y menos utilizado,pero an as
___________________________________________________________________________
HTML43de48
mantenerestainformacinenmente.
De hecho, si el formatoPNGde24bitpuedemostrartantoscolorescomounaimagenJPEG,y
adems se puede hacer transparente, sin afectar la calidad de la imagen...culeslaventaja
deJPEG?
La compresin JPEG es la ms poderosa para las fotos. Una foto guardada como JPEG se
cargar mucho ms rpida que si se ha guardado como PNG. Sugiero reservar el formato
JPEGparalasfotos.
GIF
Este formato es bastante viejo, estaba siendo ampliamente utilizado (y sigue siendo
ampliamente utilizado por costumbre). Hoy en da, PNG es en general, mucho mejor que las
imgenes GIF, son generalmente ms ligeros y la transparencia es mejor. Recomiendautilizar
PNGsiesposible.
El formato GIF est limitadoa256colores(mientrasqueelPNGhastamillonesdecolores).Sin
embargo,elGIFmantieneunaciertaventajasobreelPNG:quenopuedenseranimados.
WebP
Es un formatogrficoenformadecontenedor,quesoportatantocompresinconprdidacomo
sin ella .EstsiendodesarrolladoporGoogle,basndoseentecnologaadquiridaconlacompra
de On2 Technologies. Como derivado del formato de vdeo VP8, esun proyecto hermano del
formatoWebM,yestliberadobajolalicenciaBSD.
Hayunformatoadecuadoparacadaimagen
Enresumen,sehadeconsiderarelformatodeacuerdoconlaimagenquesedisponga:
Unafoto:usarJPEG
Grficosconpocoscolores(menosde256):UsarPNGde8bitso,posiblemente,GIF.
Grficosconmuchoscolores:UtilizarunarchivoPNGde24bits.
Imagenenmovimiento:utilizarunGIFanimado.
Erroresquedebenevitarse
Desterrarotrosformatos
___________________________________________________________________________
HTML44de48
Otros formatos no mencionados aqu, como formato de mapa de bits (BMP)estn prohibidos
porque a menudo no estn comprimidos, por lo tanto, son demasiado grandes. No estn del
todoadaptadosalaWeb.Podemosponerlosenunsitioperolacargaesmuytediosa.
Seleccionarcuidadosamenteelnombredelaimagen
Si quieres evitar problemas, toma el hbito de guardar los archivos con los nombres en
minsculas,sinespaciosoguiones,porejemplo:mifoto.png.
Sepuedensustituirlosespaciosconelcarcterdesubrayado("_")
Insertarunaimagen
Ahora, de vuelta alcdigo HTMLparadescubrirlamanerade colocarlasimgenesennuestras
pginas.
Cul es la etiqueta famosa que nos permitir insertar una imagen? Esta es <img />. Se trata
de un tipo de etiqueta hurfana (como <br/>). Eso significa que no es necesario escribirla en
pares como la mayorpartedeetiquetasquesehanvistohastaaqu.Enefecto,noesnecesario
definirunapartedeltexto,sloqueremosinsertarunaimagenenunlugarespecfico.
Laetiquetadebeiracompaadadedosatributosnecesarios:
src: le permite especificar el lugardonde se ubica la imagen que desees insertar. Se
puede configurar una ruta absoluta (por ejemplo, http://www.um.es/logo.jpg) o relativa a
la ruta (esto se suele hacer). As que si la imagen se encuentra en una subcarpeta de
imgenes,porejemplohabraqueescribir:src="imagenes/um.png"
alt: significa "texto alternativo". Siempre se debe especificar un texto alternativo a las
imgenes, es decir, untextobrevequedescribeloquecontienelaimagen.Estetextose
muestra en lugar de laimagen sino puede ser descargada (estopuede suceder), o en
los navegadores de las personas con discapacidad visual, que por desgracia no se
puede "ver" la imagen. Tambinayuda a los motores de bsqueda para las bsquedas
deimgenes.Paraum.png,loharaporejemplo:alt="UniversidaddeMurcia".
Las imgenes deben estar obligatoriamente dentro de un prrafo (</ p>). Un ejemplo de
insercindelaimagen:
Cdigo:HTML
<p>
Aquestunafotoquetomdurantemisltimasvacacionesenlaplaya:<br/>
<imgsrc="imagenes/playa.jpg"alt="FotodelaplayadeLuarca"/>
___________________________________________________________________________
HTML45de48
</p>
Pasa el ratn sobrelaimagenparaverladescripcin, aparece"FotodelaplayadeLuarca".En
pocas palabras, la insercin delaimagenesalgomuy fcilsiemprequesepamoscmoindicar
dondeestlaimagen,aligualquesehaaprendidoahacerconlosenlaces.
El mayor "problema" (si se le puede llamar un problema) es elegir la relacin de aspecto
correcta.
Imagenconenlace
Si la imagen es muy grande, es aconsejable mostrar en tu sitio una miniaturade la imagen. A
continuacin, se agrega un enlace en esta miniatura por lo que los visitantes puedan ver la
imagenentamaooriginal.
Hay muchos programas para la creacin de miniaturas de las imgenes. Por ejemplo Easy
Thumbnails. Lo usar para obtener dos versiones de una imagen, como lafigura siguiente: la
miniaturaylaimagenoriginal.
El origen y la imagen en miniatura las pongo en una carpeta llamada img, por ejemplo. Que
muestra la versin de montagne_miniymontagne,puedeshacerunenlaceamontagne.jpgque
eslaimagenampliadaquesemuestraalhacerpulsarenlaminiatura.
ElcdigoHTMLqueusoparaesto:
<p>
Quieresverlaimagenensutamaooriginal?Clicporencima<br/>
<ahref="img/montagne.jpg"><imgsrc="img/montagne_mini.jpg"alt="Fotode
montaasnevadas"title="Pulsaparaagrandar"/></a>
</p>
A veces, algunos navegadores optan por mostrar un color azul (o color prpura) muy poco
___________________________________________________________________________
HTML46de48
esttico alrededor de la imagen en la que puedes hacer clic. Afortunadamente, podemos

eliminarestemarco,graciasaCSS.
Lasfiguras
Al leer esta documentacin, ya te has encontrado varias veces con figuras. Estas son los
elementosquevienenaenriquecereltextoparacomplementarlainformacindelapgina.
Lasfiguraspuedenserdediferentestipos:
imgenes,cdigofuente,citaciones,etc.
En resumen, todo lo que sirve para ilustrar el texto es una figura. Vamos a ocuparnos aqu de
las imgenes, al contrario de lo que era de esperar, las cifras no son necesariamente
imgenes:uncdigofuentetambinilustraeltexto.
Creacindeunafigura
Recordemos el ejemplo de captura de pantalla del primer captulo, representado en la figura
siguiente.
___________________________________________________________________________
HTML47de48
EnHTML5,sedisponedelaetiqueta<figure>.Cmosepodrautilizar:
Cdigo:HTML
<figure>
<imgsrc="imagenes/um.png"alt="UniversidaddeMurcia/>
<figure/>
Una figura suele ir acompaada de una leyenda. Para aadir un ttulo, utiliza la etiqueta
<figcaption>dentrodelaetiqueta<figure>,deestamanera:
Cdigo:HTML
<figure>
<imgsrc="images/um.png"alt="UniversidaddeMurcia"/>
<figcaption>EscudodelauniversidaddeMurcia</figcaption>
</figure>
Entenderelpapeldelasfiguras
Anteriormenteenestecaptulo,dijequelas imgenes debenestarubicadasenlos prrafos (que
se encuentra en el interior de una etiqueta </
p>). No es del todo cierto. Si haces una foto del
rostro,laimagenpuedeestarlocalizadofueradeunprrafo.
Cdigo:HTML
<p>ConoceselprogramaQuanta+?Podemoshacerlossitioswebconesta
aplicacin</p>
<figure>
<imgsrc="images/quanta.png"alt="Quanta+"/>
<figcaption>SoftwareQuanta+</figcaption>
</figure>
Realmentenocambian.Cundodeboponermiimagenenunprrafoycuandodebocolocarla
enunafigura?Buenapregunta.Tododependedeloquecontienelaimagenconeltexto:
Sinoproporcionaningunainformacin(esslo una ilustracinparadecorar):colocarla
imagenenunprrafo.
Siofreceinformacin:colocarlaimagenenunafigura.
La etiqueta <figure> tiene un papel principalmente semntico. Esto significa que se le dice al
___________________________________________________________________________
HTML48de48
ordenadorquelaimagentienesentido.
Es importante entender el texto. Esto puede permitir que un programa recupere todas las
figurasdeltextoyhacerreferenciaaellasenunatabladefiguras,porejemplo.
Por ltimo, ten en cuenta que una figura puede tenervariasimgenes. Un caso en el que esto
sejustifica:
Cdigo:HTML
<figure>
<imgsrc="img/opera.png"alt="LogodeOpera"/>
<imgsrc="img/firefox.png"alt="LogoMozillaFirefox"/>
<imgsrc="img/chrome.png"alt="LogoGoogleChrome"/>
<figcaption>Logosdediferentesnavegadores</figcaption>
</figure>
Resumen
Hayvariosformatosdeimagenadaptadosalaweb:
JPEGparalasfotos
PNG:paratodoslosotrosejemplos
GIF:similaraPNG,conunnmeromslimitadodecolores,peroquepuedenser
animados.
Insertaunaimagenconlaetiqueta<img/>.Sedebeincluiralmenosdosatributos:src
(nombredelaimagen)yalt(brevedescripcindelaimagen).
Siunaimagenilustraeltexto(ynosloesdecorativa),esaconsejablecolocarladentrodeuna
etiqueta<figure>.
Laetiqueta<figcaption>permiteescribirelttulodelaimagen.
___________________________________________________________________________

Lenguaje de Programacion HTML 1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lenguaje de Programacion HTML 1

Uploaded by

Copyright:

Available Formats

HTML1de48

HTML defineelcontenido, CCSpermiteorganizarelcontenido ydefinirlapresentacin:elcolor,

HTML 3: apareci en1996, esta nuevaversindeHTML,aademuchasposibilidadesal

Una vez instalado se ejecuta accediendo en el escritorio al icono Notepad++, apareciendo el

Sugiero que hagas la siguiente operacin: ir a men>lenguaje>HTML. Esto permitir que el

Chrome y Firefox han resuelto en gran medida el problema mediante la creacin de

En la mayora de los navegadores que he presentado,debemossaberqueexisten variantesde

Es un texto que simplemente sirve como nota. No se muestra, no esledoporelordenador,no

Con CSS, puedes decir "quiero quemisttulosmsimportantessecentren,contextocolorrojo

Ten en cuentaquelalistadebeestarcolocadadentrode<body></body>.Apartir deahora,no

Para ms informacin, hay untercertipodelista,muchomsrara:unalista dedefiniciones.Se

esttico alrededor de la imagen en la que puedes hacer clic. Afortunadamente, podemos

You might also like