HTML

Introducci
Introducci
n al HTML
n al HTML
Vamos a hablar de...HTML
Vamos a hablar de...HTML
Conceptos del lenguaje
Estructura para documentos
Herramientas usadas para crear
documentos
Buenas prcticas en la publicacin de
documentos
Problemas que se nos pueden
presentar
HTML: qu
HTML: qu
es?
es?
Lenguaje que da formato
Define la sintxis y ubicacin de
imgenes, instrucciones y objetos
al navegador
Posibilidad de conectar un
documento con otros, o con otros
recursos en Internet a travs de
hipertexto
HTML: qu
HTML: qu
no es?
no es?
No es un procesador de texto
No es un lenguaje de programacin
No es multimedia
Como funciona?
Como funciona?
Cliente
Cliente:
Explorer
Mozilla
Firefox
Dame el
archivo x
Aqu est
Protocolo http
Servidor
Remoto
La Telara
La Telara
a Mundial
a Mundial
Mltiples usos:
Educacin
Investigacin
Mercado
Desarrollo (paz, medio ambiente,
equidad, diversidad, hbitat,
comercio justo)
Est
Est
ndares de HTML
ndares de HTML
HTML 1 Desarrollado en CERN
HTML 2.0 Incluye mejoras en NCSA
Mosaic (formularios e imgenes)
HTML 3.2 Mejoras para controlar el
formateo de tablas, etc.
HTML 4.0 Mejoras para publicaciones
multiplataforma (CSS, XML, WAP,
DHTML)
Terminolog
Terminolog
a
a
HTTP: Hypertext Transfer Protocol
Parmetros de comunicacin cliente -
servidor Web
HTML: Hypertext Markup Language
Lenguaje nativo para documentos
publicados en Web independiente del
tipo de plataforma.
URL: Uniform Resource Locator
Direccin de un objeto en el Web
http://www.inaranco.com/
Fundamentos
Fundamentos
Rtulos <H1>Inicio</H1>
No son sensibles a maysculas y
minsculas <H1> o <h1>
Algunos atributos pueden ser sensibles a
maysculas y minsculas como los
nombre de archivos, por ejemplo (tpico
de sistemas Linux)
Normalmente van en pares denotando
inicio y fin <H1> y </H1>
Documentos B
Documentos B
sicos
sicos
Deben incluir
<HEAD> y </HEAD> contiene
informacin sobre el documento
<BODY> y </BODY> es el contenido
principal del documento
<HTML> y </HTML> contiene los 2
elementos anteriores
Ejemplo...
Ejemplo...
<HTML>
<HEAD>
<TITLE>Un mejor documento</TITLE>
</HEAD>
<BODY>
<P>Novedades sobre el <EM>World Wide
Web</EM> disponible en
<A HREF="http://www.w3.org/">W3C</A></P>
</BODY>
</HTML>
doc.html
Elementos B
Elementos B
sicos
sicos
Rtulos Bsicos
<HEAD> <TITLE> <P>
Rtulos de Formato Fsico
<B> <I>
Rtulos de Formato Lgico
<STRONG> <EM> <UL> <LI>
Enlaces de Hipertexto
<A HREF="">
Caracteres Especiales
Caracteres Especiales
Permiten que diferentes navegadores
hagan visibles los caracteres de los
idiomas diferentes al ingls:
á
à
ñ
Tablas
Tablas
Organizacin comparativa de
informacin
Ubicacin dentro de la pgina
Mltiples atributos para especificar
Formularios
Formularios
Interactividad
Retroalimentacin
Recoleccin de datos
Pueden tabularse y analizarse
Respuestas personalizadas
Aceptado por todos los navegadores
Creando documentos
Creando documentos
Pueden ser creados usando editores
simples como Notepad, vi, emacs.
Ventajas
Es barato
Se aprende a comprender el lenguaje
HTML
Desventajas
Es fcil cometer errores
Necesita comprender la sintxis HTML
Herramientas avanzadas
Herramientas avanzadas
Interface amigable y fcil de
usar para crear documentos
Ocultan a disposicin las
complejidades del cdigo HTML
Pueden ser herramientas
autnomas o insertas en
procesadores de texto
ESTRUCTURA B
ESTRUCTURA B
SICA DE UN
SICA DE UN
DOCUMENTO HTML
DOCUMENTO HTML
Un documento HTML comienza con la
etiqueta <html>, y termina con </html>.
Dentro del documento (entre las etiquetas de
principio y fin de html), hay dos zonas bien
diferenciadas: el encabezamiento, delimitado
por <head> y </head>, que sirve para definir
diversos valores vlidos en todo el
documento; y el cuerpo, delimitado por
<body> y </body>, donde reside la
informacin del documento.
Una utilidad del encabezamiento en la
que nos detendremos es la directiva
<title>, que permite especificar el ttulo
de un documento HTML
<title>Probando el HTML</title>
Los espacios, tabulaciones y retornos
de carro que se introduzcan en el
fichero fuente no tienen ningn efecto a
la hora de la presentacin final del
documento
La estructura bsica de un documento
HTML queda de la forma siguiente:
<html>
<head>
<title>Ttulo</title>
</head>
<body> Texto del documento, grficos,
enlaces, etc.
</body>
</html>
ESTILOS Y EFECTOS B
ESTILOS Y EFECTOS B
SICOS
SICOS
La estructura lgica del texto y los
diferentes efectos que se le apliquen se
especifican mediante directivas.
Cada directiva acta sobre el texto
modificando su apariencia cuando se
visualiza sobre un navegador
T
T
TULOS
TULOS
<h1>Muy grande</h1>
Muy grande
<h2>Menos grande</h2>
Menos grande
<h3>Mucho menos grande</h3>
Mucho menos grande
.....
ATRIBUTOS DEL TEXTO
ATRIBUTOS DEL TEXTO
Mediante estos atributos determinamos el
estilo y el tipo de letra que tendr la
presentacin del documento final.
Para definir un prrafo como normal no es
necesario poner ninguna etiqueta. Lo nico
que hay que tener en cuenta es que al
presentar el documento se hace caso omiso
de los espacios, tabulaciones y retornos de
carro que se encuentren en el texto fuente
Cuando se quiera forzar un final de
lnea es necesario utilizar dos directivas
especiales: <p> para marcar un fin de
prrafo, y <br> para un nico retorno de
carro.
La diferencia entre ambas es que la
separacin de lneas que provoca <p>
es algo mayor que la de <br>, para que
los prrafos se distingan bien entre s
(prrafo 1, lnea 1)<br>
(prrafo 1, lnea 2)<p>
(prrafo 2, lnea 1)<p>
( (( (p pp p rrafo rrafo rrafo rrafo 1, 1, 1, 1, l ll l nea nea nea nea 1) 1) 1) 1)
El texto preformateado (etiqueta <pre>)
se aplica cuando queremos que en la
presentacin final del documento se
respeten los espacios y retornos de
carro que hayamos puesto en el texto
fuente
<pre>
Uno
Dos
</pre>
En este ejemplo se respetan las dos
lneas
Para hacer una cita textual dentro de
nuestro documento, se puede utilizar la
directiva <blockquote>:
<blockquote>Muchos aos despus, frente
al pelotn de fusilamiento, el coronel
Aureliano Buenda haba de recordar
aquella tarde remota en que su padre lo
llev a conocer el hielo.<br> (Gabriel
Garca Mrquez, Cien aos de
soledad)</blockquote>
Muchos aos despus, frente al pelotn de
fusilamiento, el coronel Aureliano Buenda haba
de recordar aquella tarde remota en que su
padre lo llev a conocer el hielo.
(Gabriel Garca Mrquez, Cien aos de soledad)
Las direcciones de correo electrnico se
suelen marcar con esta directiva:
<address>Direccin:
webmaster@algo.com</address>
Direccin: webmaster@algo.com
Se pueden dar tambin los atributos
ms tradicionales: negrita y cursiva:
<b>Esto en negrita</b> y <i>esto en
cursiva</i>
Esto en negrita y esto en cursiva
Se puede subrayar el texto:
<u>Esto va subrayado</u>
Se puede utilizar un tipo de letra similar
al de una mquina de escribir:
<tt>Mquina de escribir</tt>
Mquina de escribir
Para centrar texto (o, en general,
cualquier cosa: un grfico, por ejemplo)
se usa la directiva <center>:
<center>Verde que te quiero verde</center>
Verde que te quiero verde
Estilos del p
Estilos del p
rrafo
rrafo
<CITE> Cita </CITE>
<CODE> Cdigo fuente </CODE>
<DFN> Definido</DFN>
<EM> Enfatiza </EM>
<KDB> Palabra clave </KDB>
<SAMP> Ejemplo </SAMP>
<STRONG> Resalta </STRONG>
<VAR> Variable </VAR>
LISTAS
LISTAS
Las listas se definen de forma muy sencilla:
se dice dnde empieza la lista, dnde
empieza cada punto y dnde acaba la lista.
Podemos recurrir a tres tipos distintos de
listas, cada una con una presentacin
diferente: no numeradas, numeradas y
listas de definiciones (glosarios).
Las listas se pueden anidar, es decir, en el
lugar donde debera ir uno de los trminos de
la lista se pone una nueva lista, que por
supuesto no tiene porqu ser del mismo tipo.
Esto es una lista no numerada:
<ul>
<li>Tomates
<li>Zanahorias
<li>Puerros
</ul>
Tomates
Zanahorias
Puerros
Esto una lista numerada:
<ol>
<li>Miguel Indurin
<li>Tony Rominger
<li>Eugeni Berzin
</ol>
1.Miguel Indurin
2.Tony Rominger
3.Eugeni Berzin
Un glosario est formado por una serie
de parejas de trmino (marcado con
<dt> al principio de lnea) y definicin
(con <dd>). Por ejemplo, podramos
crear un pequeo diccionario con los
trminos perro, gato y pescadilla, de la
siguiente manera:
<dl>
<dt>Perro (<i>n. masc.</i>)
<dd>Animal de cuatro patas que ladra.
<dt>Gato (<i>n. masc.</i>)
<dd>Animal de cuatro patas que malla
y se lleva muy mal con el perro.
<dt>Pescadilla (<i>n. fem.</i>)
<dd>Animal que vive en el mar y est
recubierto de escamas.
</dl>
Perro (n. masc.)
Animal de cuatro patas que ladra.
Gato (n. masc.)
Animal de cuatro patas que malla y se
lleva muy mal con el perro.
Pescadilla (n. fem.)
Animal que vive en el mar y est
recubierto de escamas.
Otras
Otras
directivas
directivas
La directiva <hr> sita en el documento
una lnea horizontal de separacin.
Para poner un comentario en un
documento HTML, es decir, una
aclaracin que no aparece en la
presentacin final del documento, se
encierra el texto que formar el
comentario entre los smbolos .
Por ejemplo, un caso tpico podra ser:

Enlaces y
Enlaces y
gr
gr
ficos
ficos
Los enlaces en HTML se expresan
rodeando con la directiva <a> el objeto
(que puede ser un fragmento de texto o
un grfico) que vaya a servir como
anclaje para el enlace.
Por ejemplo, si marcamos con <a> un
grfico, cuando en el documento final se
pulse con el ratn sobre dicho grfico
saltaremos al objeto referenciado en el
enlace.
Qu
Qu
es
es
una
una
URL?
URL?
Un URL est formado de la siguiente
manera: esquema://maquina/ruta (en
realidad, como se ver dentro de un
momento, la barra / puede considerarse
parte de la ruta).
El esquema es un nombre que identifica el
tipo de servicio que va a proporcionarse en
el destino del enlace, por ejemplo: http, ftp,
telnet, etc..
La mquina y la ruta sirven para localizar
el objeto al que apunta nuestro enlace.
La mquina es la identificacin del
servidor en el cual est situado el objeto
al que apunta el enlace.
La ruta es el nombre del fichero que
contiene el documento en concreto,
incluyendo el nombre del subdirectorio
en el que se encuentra. Los diferentes
nombres que constituyan la ruta
completa al archivo se deben separar
con la barra / (inclinada hacia la
derecha).
Por ejemplo, si queremos que el texto
pulse aqu para visitar la NASA nos
conduzca a la home page de la NASA,
debemos escribir en nuestro texto
HTML:
<a href="http://www.nasa.gov/">Pulse
aqu para visitar a la NASA</a>
Si queremos enlazar con otra pagina
local no es necesario escribir el camino
completo al destino del enlace, sino que
basta con dar la mnima informacin
imprescindible.
Es decir, que si desde cierto documento
queremos enlazar con otro que se
encuentra en el mismo subdirectorio,
basta con poner su nombre: <a
href="el_otro_fichero">pulse aqu</a>
Si se encuentra en otro subdirectorio del
mismo servidor, es suficiente con poner
<a href="/la/ruta/que/sea/fichero.html">pulse
aqu</a>.
Tambin pueden utilizarse rutas relativas:
<a href="ruta/relativa/cosa.html">cosa</a>.
Tambin podemos hacer un enlace a
una parte del mismo documento, para
ello:
Declaramos el bloque al que queremos
acceder con <a name=parte></a>
Accedemos al bloque parte con el
vnculo:
<a href=fichero.html#parte>A parte</a>
Gr
Gr
ficos
ficos
Para incluir un grfico en un documento
HTML se utiliza la directiva <img>.
En dicha directiva debe incluirse un
parmetro src="URL", con el cual
indicamos dnde est el fichero con el
grfico concreto que queremos para
nuestro documento
Podemos complementar el contenido de
nuestro documento tanto con grficos
que se encuentren disponibles en
nuestro servidor de WWW como con una
foto situada en un servidor de la NASA o
del Ministerio de Cultura, por ejemplo,
sin que el lector final tenga por qu
apreciar ninguna diferencia.
Hay un parmetro optativo de la directiva
<img> que sirve para proponer un texto
alternativo a un grfico. Este texto
aparecer cuando se est usando para
leer el HTML un programa sin
capacidades grficas (por ejemplo Lynx,
que slo trabaja con texto). Se trata de
alt="texto". Conviene utilizarlo cuando
los grficos sirven como origen a
hiperenlaces, porque si no los
programas sin capacidades grficas no
podran mostrar los enlaces que
nosostros queremos.
Como ocurra antes con los enlaces, por lo
general no es necesario escribir el URL
completo, sino que basta con dar la mnima
informacin:
<img src="monigote.gif"
alt="MONIGOTE"><p>
Podemos tambin incluir un dibujo que est
en otro lugar especificando un URL
completo, por ejemplo:
<img src="http://naic.nasa.gov/images/nasa-
logo.gif"><p>
Y adems podemos hacer que un grfico
sea un enlace, utilizando la directiva <a>.
En este caso no debemos olvidar utilizar la
opcin alt="texto" para que todos los
usuarios puedan seguir el enlace:
<a href="http://www.nasa.gov/"><img
src="http://naic.nasa.gov/images/nasa-
logo.gif" alt="NASA"></a><p>
Alineaci
Alineaci
n de im
n de im
genes y
genes y
texto
texto
TOP para alinear el texto con la parte
superior de la imagen.
MIDDLE para alinear el texto con el centro
de la imagen.
BOTTOM para alinear el texto con la base
de la imagen.
Ejemplo:
<IMG SRC="new.gif align=top>Texto
arriba
Fondos y colores
Fondos y colores
Para hacer que un color sea fondo de una
pagina web:
<body bgcolor=#rrggbb>, donde rr, gg y bb
varian entre 00 y FF hexadecimal
Para hacer que una imagen sea fondo de
una pagina:
<body background=fichero.gif>
Para hacer que el texto del body sea de
un color particular:
<body text=#rrggbb>
Para especificar una parte de un texto con
un color y un tamao particular:
<font size=3 color=#rrggbb>aqu va el
texto</font>
donde font size oscila entre 1 y 7
Colores en los enlaces
Colores en los enlaces
LINK color del enlace que an no ha sido
visitado.<BODY LINK="#rrggbb">
ALINK color muy fugaz que aparece
cuando se hace clic sobre el enlace
<BODY ALINK="#rrggbb">
VLINK es el color de un enlace que ya ha
sido visitado <BODY VLINK="#rrggbb">
Tablas
Tablas
Una tabla se define entre las marcas
<TABLE> y </TABLE>. Esta primera marca
regula la presentacin general de la tabla
mediante varios atributos:
BORDER define el grosor del marco exterior
CELLPADDING define el espacio alrededor
del texto de una celda
CELLSPACING define el espacio entre
celdas
WIDTH define la anchura de la tabla relativa
a la anchura de la ventana del browser
Ejemplo:
<TABLE CELLPADDING=10
CELLSPACING=6 BORDER=6>
<TR><TD>A</TD>
<TD>B</TD>
</TR>
<TR><TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>
Las marcas que definen una nueva fila son
<TR> y </TR> que admiten los siguientes
atributos de alineacin del texto en el
interior de todas las celdas de la fila:
VALIGN (alineacin vertical) que puede tomar
los valores:
TOP coloca el texto en la parte superior de la celda
BOTTOM coloca el texto en la parte inferior de la
celda
MIDDLE en el centro de la celda
ALIGN (alineacin horizontal) que puede
tomar los valores:
RIGHT coloca el texto a la derecha de la
celda
LEFT coloca el texto a la izquierda de la
celda
CENTER centra el texto en la celda
Ejemplo
<TR ALIGN="center">
<TD>a</TD></TR>
<TR VALIGN="top">
<TD>e</TD></TR>
<TR ALIGN="right"
VALIGN="bottom"></TR>
<TD>i</TD>
La marca <TD> es el elememto de
inicio de una columna. Puede
completarse con los atributos VALIGN y
ALIGN
Ejemplo
<TR ALIGN="left">
<TD ALIGN=left>A</TD>
<TD ALIGN=center>B</TD>
<TD ALIGN=right>C</TD><TR>
La marca <TH> , esta marca funciona de
forma similar a TD admitiendo los mismos
atributos pero se considera como una marca
de ttulo de una celda. Automticamente
centra el texto y lo pone en negrita.
Ejemplo:
<TABLE BORDER>
<TR>
<TH>Artculo</TH><TH>Referencia</TH>
<TH>Precio</TH>
<TR>
<TD>Libreta</TD>
<TD>17</TD>
<TD>120</TD>
</TABLE>
La marca <CAPTION> , esta marca
permite poner un ttulo encima (atributo
ALIGN=TOP) o debajo (atributo
ALIGN=BOTTOM) de la tabla.
Ejemplo:
<TABLE BORDER>
<TR>
<TH>Artculo</TH><TH>Referencia</T
H><TH>Precio</TH>
<TR>
<TD>Libreta</TD>
<TD>17</TD&lgt;
<TD>120</TD>
<CAPTION ALIGN=bottom>
<B>Provisines</B></CAPTION>
</TABLE>
Formularios
Formularios
Un formulario es una plantilla para
representar un conjunto de datos y generar
en la pantalla cuadros de dilogo.
Se podrn tener zonas en las que se
introducir un texto, casillas de verificacin,
listas de seleccin, etc.
Cuando el formulario se enva al programa
que lo va ha tratar, ste recibe el identificador
de cada zona y el valor introducido.
Uso de formularios
Uso de formularios
La marca <FORM> y </FORM> definen un
formulario y entre ellas se situaran todas las
marcas que generan los diversos elementos
que componen un formulario. Esta marca
debe ir acompaada obligatoriamente por
dos atributos:
El atributo METHOD est dirigido al programador
que codifica el script. Al que puede darse el valor
POST o el valor GET que define el modo de
transferencia de los datos hacia el script.
El atributo ACTION que define la URL de un programa
(script) encargado de tratar los datos adquiridos desde
el formulario.
<FORM METHOD=tipo_de_metodo
ACTION=URL_del_script>
IMPORTANTE: todas las marcas que se definirn
tienen los siguientes atributos comunes:
El atributo NAME define el nombre que permitir al
script identificar el origen de los datos. Este nombre
debe ser nico.
NAME=nombre_de_la_variable_asociada
El atributo VALUE
Definido para un campo de:
TEXTO: permite definir el contenido del campo.
Botn SUBMIT: indica el texto a escribir en el
botn.
Botn RADIO, Botn CHECKBOX: valor asociado
al botn cuando est pulsado.NAME identifica el
bloque de botones
Campos de entrada <
Campos de entrada <
input
input
>
>
La marca <INPUT> servir para definir
campos para entrar un texto y botones
que permiten escoger opciones.
Ejemplo:
< input name="identidad" value=hola>
El atributo TYPE asociado a la marca
INPUT permite la seleccin del elemento
de entrada. Puede tomar los siguientes
valores:
SUBMIT: desencadena el envo del
formulario hacia el script; el texto definido
en value se escribir en el botn:
<form>
<input type="submit" value="Salida">
</form>
RESET: permite borrar los datos ya
entrados:
<form>
<input type="reset" value="Borrar">
</form>
PASSWORD: permite entrar una palabra
clave de forma confidencial:
<form>
<input type="password" name="pwd">
</form>
CHEKBOX: crea un bloque de botones que
permiten una seleccin mltiple de opciones:
<form>
<input type="checkbox" name="micro"
value="mac">Macintosh
<input type="checkbox" name="micro"
value="pc">PC
</form>
RADIO: crea un bloque de botones que
permiten una seleccin exclusiva entre varias
opciones
<form>
<input type="radio" name="media" value="cd"
checked>CD-ROM
<input type="radio" name="media"
value="dk">Disquete
</form>
HIDDEN: sirve para pasar datos adquiridos de
un formulario a otro sin que aparezca nada en
la pantalla:
<input type="hidden"
name=nombre_de_variable
value=valor_de_la_variable>
Campos de selecci
Campos de selecci
n
n
<SELECT>
<SELECT>
La marca <SELECT> permite generar
listas de seleccin simple o de
seleccin variable. Se programa con
una lista en la que los items se
especifican mediante la marca
<OPTION>.
La presentacin de la lista depende del
atributo SIZE; si su valor es inferior a 2
o est ausente, la lista se interpreta
como un men desplegable (pop-list).
En caso contrario la lista se visualiza en
una ventana con barra de
desplazamiento.
El valor dado entonces al atributo SIZE
da entonces el nmero de lneas
visibles en la ventana.
La opcin de selecin multiple se deriva
de la presencia del atributo MULTIPLE.
Ejemplos:
Men despegable:
<form>
<select NAME="sede">
<option>Entrada indirecta
<option>Entrada lateral
<option SELECTED>Entrada directa
</select>
</form>
Ventana con barra de desplazamiento: ( con
opcin de seleccin mltiple )
<form>
<select MULTIPLE NAME="lenguaje"
SIZE="3">
<option SELECTED>Ada
<option>C++
<option>Cliper
<option>Pascal
<option>Fortran
<option>Cobol
</select>
</form>
Area
Area
de texto <TEXTAREA>
de texto <TEXTAREA>
La marca <TEXTAREA> permite crear
una ventana con barras de
desplazamiento horizontales y
verticales en la que se podr escribir
texto.
El valor dado a los atributos ROWS
(lneas) y COLS (columnas) delimita el
tamao de esta ventana.
Ejemplo:
<form>
<textarea name="comment" rows=5
cols=40>
Introduzca aqu sus comentarios
</textarea>
</form>

HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Introducci

S-ar putea să vă placă și