Lenguaje de Marcas HTML

BrevesApuntessobreHTML
LenguajedeMarcas:HTML
MapaMental
LenguajesdeMarcas
Seguro que en alguna ocasin cuando visitis alguna web al clicar el botn
derecho de vuestro ratn para abrir la opcin de
ver cdigo fuente de la
pgina os habis quedado impresionados ante la aparicin de un lenguaje, a
primera vista, indescifrable que parece concebido por un intrprete de
Encuentros en la tercera fase
.
Esa sucesin de lneas de cdigo se denomina HTML (

Hypertext Markup
Language
)y s
e utiliza para indicar a los
navegadores Web cmo estructurar y
mostrar las pginas web. Se podra definir como un lenguaje estructurado que
se escribe en forma de etiquetas, rodeadas por corchetes angulares (
<
,
>
) y que
cuenta con unas reglas. La principal organizacin que intenta regular el
HTML y
otras
tecnologas web
es el
W3C
(
World Wide Web Consortium
).
La
estructura bsica
de una
pgina Web
tiene este aspecto:
<!DOCTYPEHTMLPUBLIC//W3C//DTDHTML4.01//EN
http://www.w3.org/TR/html4/strict.dtd>
<html>
ActividaddentrodelcursodeFormadordeTeleformadores

<head>
<metahttpequiv=ContentTypecontent=text/html
charset=utf8>
<title>Ttulodeldocumento</title>
</head>
<body>
</body>
</html>
El <html>
delimita el comienzo y final del documento y es el contenedor del
resto de elementos.
La etiqueta <head> describe el contenido del documento y la
Metainformacin como, por ejemplo, el ttulo de la pgina, mientras que
<body>
delimita el cuerpo del documento y c
ontiene todo el contenido que
vemos en pantalla.
Losnavegadores.Compatibilidad
Como hemos dicho, el navegador instalado en el ordenador del usuario es el que
interpreta el cdigo HTML de la pgina que visita por lo que a veces puede
ocurrir que dos usuarios visualicen la misma pgina de forma distinta porque
tienen instalados navegadores distintos o incluso versiones distintas del mismo
navegador.
Los navegadores de hoy en da pretenden ser compatibles con la ltima versin
de HTML. Es necesario realizar extensiones de los navegadores para que puedan
ser compatibles con esta ltima versin.
Dos de los navegadores que continuamente estn realizando extensiones son
Internet Explorer y Netscape Navigator, que realizan extensiones incluso antes
de que se establezcan los estndares, intentando incluir las nuevas funciones
incluidas en los borradores.
Los navegadores tienen que ser compatibles con la ltima versin HTML para
poder interpretar el mayor nmero posible de etiquetas. Si un navegador no

reconoce una etiqueta, la ignora y el efecto que pretenda la etiqueta no queda

reflejado en la pgina.
Para realizar las extensiones de estos navegadores se aaden nuevos atributos a
las etiquetas ya existentes, o se aaden nuevas etiquetas.
Como resultado a estas extensiones, habrn pginas cuyo cdigo podr ser
interpretado completamente por todos los navegadores, mientras que otras, al
incluir nuevos atributos o etiquetas del borrador de la ltima versin de HTML,
solo podrn ser interpretadas en su totalidad en los navegadores ms
actualizados.
En este ltimo caso tambin puede ocurrir que alguna etiqueta de la pgina
solamente pueda ser interpretada por un navegador concreto, y otra etiqueta
por un navegador diferente al anterior, por lo que nunca sera visualizada en su
totalidad por ningn navegador.
Uno de los retos de los diseadores de pginas web es hacer las pginas ms
atractivas utilizando toda la potencia del lenguaje HTML pero teniendo en
cuentas estos problemas de compatibilidades para que el mayor nmero de
internautas vean sus pginas tal como las ha diseado.
SintaxisdelHTML
Tambin podemos encontrar elementos en

lnea y en
bloque
. Los
elementos en
bloque
pueden contener elementos en lnea y algunos de ellos pueden contener
otros elementos en bloque: <div><p>Contenido</p></div>. Los
elementos en
lnea
, sin embargo, no pueden contener elementos en bloque.
Los
enlaces
tienen este aspecto: <a>contenido</a>; los
saltos de lnea se
representan as: <br> o <br/>; la
negrita
se corresponde a esto:
<strong>contenido</strong>,
y
la
cursiva
tiene
esta
traduccin:
<em>contenido</em>.

Como podis observar, las etiquetas siempre se deben abrir y cerrar, no se

pueden cruzar y siempre se tienen que poner a los atributos entre comillas.
El
lenguaje HTML
, no obstante, es limitado a la hora de aplicarle forma a un
documento. Precisamente para poder controlar el aspecto de las pginas web,
naci el
CSS (
Cascading Style Sheets
). La idea que se encuentra detrs del
desarrollo de
CSS es separar la estructura de un documento de su presentacin.
Esa hoja de estilo se vincula de diferentes maneras a un documento
HTML
.
Ahora con una sola
CSS
o hoja de estilo se pueden controlar todas las pginas de
un sitio web, lo que permite ms control sobre el diseo, hace que sea ms fcil
de actualizar y mantener, se ahorra en ancho de banda y se reduce el tiempo de
descarga, entre otras ventajas.
Una
hoja de estilo
bsica tiene este aspecto
:
body {
color:#000;
background-color:#FFF;
font-family:Verdana,Helvetica,sans-serif;
font-size:0.8em;
}
p{
margin:1em;
}
ElementosdeHTML
Etiquetasparadarformaaltexto
Etiquetas
Descripcin
<b>
Defineuntextoennegrita
<big>
Defineuntextogrande
<em>
Defineuntextoenfatizado
<i>
Defineuntextoenitlica
<small>
Defineuntextopequeo
<strong>
Defineuntextofuerte
<sub>
Defineuntextosubndice
<sup>
Defineuntextosuperndice
<ins>
Defineuntextosubrayado
<del>
Defineuntextotachado

<tt>
Defineuntextodeteletipo
<s>
Defineuntextotachado.
Desaprobado.
Use
<del>
ensulugar
<strike>
Defineuntextotachado.
Desaprobado.
Use
<del>
ensulugar
<u>
Defineuntextosubrayado.
Desaprobado.
Use
<ins>
ensulugar
Etiquetasde"Textoestructurado"
Estasetiquetassonusadascomnmenteparamostrarcdigosdeprogramacin.
Etiquetas
Descripcin
<code>
Defineuntextoencdigodecomputadora
<kbd>
Defineuntextodelteclado
<samp>
Defineuntextoejemplodecdigodecomputadora
<var>
Defineunavariable
<pre>
Defineuntextopreformateado
<listing>
Desaprobado.
Use
<pre>
ensulugar
<plaintext>
Desaprobado.
Use
<pre>
ensulugar
<xmp>
Desaprobado.
Use
<pre>
ensulugar
Etiquetasdecitacionesydefiniciones
Etiquetas
Descripcin
<abbr>
Indicaunaformaabreviada(p.ej.,WWW,HTTP,etc.)
<acronym>
Indicaunacrnimo(p.ej.,WAC,radar,autobs,etc.)
<address>
Definelainformacinsobreelautor
<bdo>
Defineladireccindeltexto(p.ej.,deizq.ader.,deder.aizq.)
<blockquote> Designaunacitalarga
<q>
Designaunacitacorta
<cite>
Contieneunacitaounareferenciaaotrasfuentes
<dfn>
Indicaqueaquesdondesedefineeltrminoencerrado

Etiquetasyatributosdelasimgenes
Etiquetas
<img>
Atributos
Valor
Descripcin
Defineunaimagen.
alt
text
Brevedescripcindelaimagen.
URL
DireccinURLdelaimagena
mostrar.
top
Alnealaimagendeacuerdoaltexto
circundante.Use
laspropiedadesde
ubicacindeCSS
ensulugar.
Requerido
src
Requerido
align
Desaprobado
bottom
middle
left
right
border
pixels
Defineelbordealrededordela
imagen.Use
laspropiedadesdelos
bordesdeCSS
ensulugar.
pixels
Definelaalturadelaimagen.
Desaprobado
height
%
hspace
pixels
Dejaespaciosenblancoaderechae
izquierdadelaimagen.Use
las
propiedadesdeubicacindeCSS
en
sulugar.
ismap
URL
Defineelmapadelaimagendellado
delservidor.
longdesc
URL
LaURLaundocumentoconuna
largadescripcindelaimagen.
usemap
URL
Defineelmapadeunaimagendel
ladodelcliente.
vspace
pixels
Dejaespaciosenblancoarribay
abajodelaimagen.Use
las
propiedadesdeubicacindeCSS
en
sulugar.
pixels
Defineelanchodelaimagen.
Desaprobado
Desaprobado
width
%
<map>
Defineelmapadeunaimagendel
ladodelcliente.
name
nombre
nico
Defineunniconombreparala
etiqueta<map>.

<area>
Defineunareginenelmapadeuna
imagen.
alt
text
Brevedescripcindelaimagen.
coords
Especificalascoordenadasendonde
sepuedeapretar.
href
URL
DireccinURLdelrea.
nohref
true
Excluyeunreaenelmapadela
imagen.
Requerido
false
shape
Definelaformadelrea.
rect
Usamos
coords="izquierda,arriba,derecha,ab
ajo".
rectangle
circ
circle
poly
polygon
target
<applet>
Usamoscoords="centrox,centroy,
radio".
Usamos
coords="x1,y1,x2,y2,..,xn,yn".
IndicadndeabrirelURL.
_blank
ElURLseabrirenunanueva
ventana.
_parent
ElURLseabrirenelframeset
padre.
_self
ElURLseabrirenelmismoframe
dondefueapretado.
_top
ElURLseabrirenunaventanade
tamaocompleto.
PermiteincluirunappletJavaenun
documentoHTML.Usela
etiqueta
<object>
ensulugar.
Desaprobado

Etiquetasyatributosdelosenlaces
Etiquetas
<a>
Atributos
Valor
Descripcin
Defineunvnculo
href
URL
DireccinURLaconectar.
hreflang
cdigode EspecificaellenguajedelaURL.
lenguaje
name
nombre
Paracrearunmarcapginasdentrodeun
deseccin documento.
rel
alternate
designates
Especificalarelacinentreeldocumento
actualyeldestinodelvnculo.
stylesheet
start
next
prev
contents
index
glossary
copyright
chapter
section
subsection
apendix
help
bookmark
nofollow
rev
alternate
Especificalarelacinentreeldestinodel
vnculoyeldocumentoactual(vnculo
designates
inverso).
stylesheet
start
next
prev
contents
index
glossary

copyright
chapter
section
subsection
apendix
help
bookmark
coords
coordenad Especificalascoordenadasdelasuperficie
as
quecontieneelenlace.
shape
Definelaformadelrea.
rect
Usamoscoords="izquierda,arriba,
derecha,abajo"
rectangle
circ
circle
poly
polygon
target
type
Usamoscoords="centrox,centroy,
radio"
Usamoscoords="x1,y1,x2,y2,..,xn,
yn"
IndicadondeabrirelURL.
_blank
ElURLseabrirenunanuevaventana.
_parent
ElURLseabrirenelframesetpadre.
_self
ElURLseabrirenelmismoframedonde
fueapretado.
_top
ElURLseabrirenunaventanade
tamaocompleto.
tipode
Especificaeltipodecontenidoaconectar.
contenido

Etiquetasyatributosdelosformularios
Etiquetas
<form>
Atributos
Valor
Descripcin
Defineunformularioparael
ingresodedatos.
action
URL
Especificaunarchivoprocesador
delformularios.
Listadetipos
decontenido
Especificaunalistadetiposde
contenidoseparadosporcomas,
queunservidorprocesadorde
formulariosmanejar
correctamente.
Obligatorio
accept
acceptcharset Listade
Especificalalistadecodificacin
codificacinde decaracteresparalosdatos
caracteres
introducidosquesonaceptados
porelservidorqueprocesaeste
formulario.
enctype
tipode
contenido
Especificaeltipodecontenido
usadoparaenviarelformularioal
servidor.
method
EspecificaquemtodoHTTPse
usarparaenviarelconjuntode
datosdelformulario.
get
Deberausarsecuandolosdatos
delformularionotienenefectos
secundarios.
post
Deberausarsecuandoel
formulariocausaefectos
secundarios(p.ej.,subscripcina
unservicioomodificarunabase
dedatos.
name
cdata
Danombrealelementodemodo
quesepuedahacerreferenciaa
ldesdehojasdeestilososcripts.
target
_blank
ElURLseabriresunanueva
ventana.
_self
ElURLseabrirenelmismo
framedondefueapretado.
_parent
ElURLseabrirenelframeset
padre.
_top
ElURLseabrirenunaventana
detamaocompleto.
10

<input>
Defineeltipodecontrolde
entrada.
accept
Listadetipos
decontenido
Especificaunalistadetiposde
contenidoseparadosporcomas,
queunservidorprocesadorde
formulariosmanejar
correctamente.
Nota:
Usarsolocontype="file".
align
left
right
top
Defineelalineamientodeltexto
siguientealaimagen.
Nota:
Usarsolocon
type="image".
texttop
middle
absmiddle
baseline
bottom
absbottom
alt
texto
Defineuntextoalternativopara
laimagen.
Nota:
Usarsolocon
type="imagen".
checked
Especificaqueelbotnesta
marcado("on").
Nota:
Usarsolocontype="radio"
otype="checkbox".
disabled
Deshabilitaelcontrolparala
entradadedatosporpartedel
usuario.
Nota:
Nodebeusarsecon
type="hidden".
maxlength
nmero
Nmeromximodecaracteres
quepuedeintroducirelusuario.
Nota:
Usarsolocontype="text"
otype="password".
name
nombrede
control
Asignaelnombredecontrol.
Nota:
Esteatributoesrequerido
paratype="button",
type="checkbox",type="file",
type="hidden",type="image",
type="password",type="text",
type="radio".
11

readonly
Indicaqueelvalornopuedeser
modificadoporelusuario.
Nota:
Usarsolocontype="text".
size
nmerode
caracteres
Defineeltamaodelelemento
input.
Nota:
Nodebeusarsecon
type="hidden".
src
URL
DefineelURLdelaimagena
mostrar.
Nota:
Usarsolocon
type="image".
type
checkbox
file
Especificaeltipodecontrola
crear.
hidden
image
password
radio
reset
submit
text
value
valor
Paralosbotones:
resetysubmit:
defineeltexto
enelbotn.
checkboxyradio:
(
requerido
)
defineelresultadodelelemento
inputcuandoespulsado.
hidden,passwordytext:
defineelvalorpordefectodel
elemento.
<textarea>
Defineunreade
texto(multilnea).
col
nmero
Nmerodecolumnasvisiblesen
elreadetexto.
nmero
Nmerodefilasvisiblesenelrea
detexto.
disabled
Deshabilitaloscontrolesde
entrada.
name
nombredel
readetexto
Especificaunnombreparaelrea
detexto.
readonly
Elusuarionopuedemodificarel
contenidoenelreadetexto.
Obligatorio
rows
Obligatorio
12

<label>
Adjuntainformacinalos
controles.
for
idref
ReferenciaaunapalabraID
definidaporotroatributo.
<fieldset>
Dibujaunrecuadroalrededorde
loselementos.
<legend>
Permitealosautoresasignarun
ttuloaunfieldset.
align
top
Especificalaposicindela
leyendaconrespectoal
fieldset.Use
laspropiedadesde
ubicacindeCSS
ensulugar.
Desaprobado
bottom
left
right
<select>
<optgroup>
Creaunmendesplegable.
disabled
Deshabilitaelmen.
multiple
Siestactivadopermite
seleccionesmltiples.
name
nombre
Defineunniconombreparaun
mendesplegable.
size
nmero
DefineelnmerovisibledeItems
enelmendesplegable.
Permitealosautoresagrupar
opcioneslogicamente.
label
texto
Especificaelrtulodelgrupode
opcin.
disabled
entrada.
NofuncionaenIE
Defineunaopcinenlosmens
desplegables.
label
texto
Permiteescribirdeforma
sintetizadaelconternidodel
atributo<option>.Elnavegador
deberamostrarestevaloren
lugardelcontenidode<option>.
disabled
opcin.
NofuncionaenIE
selected
Especificaqueopcinaparecer
comoseleccionada.
value
texto
Especificaelvalorinicialdel
control.
Defineunbotn.
Obligatorio
<option>
<button>
13

disabled
Deshabilitaelbotn.
name
nombre
Especificaunnombreparael
botn.
type
button
Defineeltipodebotn.
reset
submit
<isindex>
value
valor
Asignaunvalorinicialalbotn.
Use
<input>
ensulugar.
Desaprobado
14

Lenguaje de Marcas HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Lenguaje de Marcas HTML

Transféré par

Droits d'auteur :

Formats disponibles

BrevesApuntessobreHTML

Esa sucesin de lneas de cdigo se denomina HTML (

reconoce una etiqueta, la ignora y el efecto que pretenda la etiqueta no queda

Tambin podemos encontrar elementos en

Como podis observar, las etiquetas siempre se deben abrir y cerrar, no se

Vous aimerez peut-être aussi