You are on page 1of 22

Programacin web

HTML
CARACTERISTICAS
HTML
HyperText Markup Language
Es el CORE LANGUAJE de la WWW
Lenguaje Etiquetado de Hipertexto
Un Lenguaje de Marcado es un conjunto de
etiquetas de marcado(marcas)
Los Documentos HTML son descritos con etiquetas
HTML
Cada Etiqueta HTML describe contenidos de
documentos diferentes


HiperTexto
El termino hipertexto fue usado por primera vez por Ted Nelson,
inventor de Xanadu, un antecesor del Web.
Navegar en Internet es como navegar en el ocano, si no llevamos
una buena brjula o si no sabemos el lugar al que queremos ir, lo
mas seguro es que nos perderemos en este ocano digital.
Al seguir un vinculo, lo hacemos para aumentar una informacin,
ver una imagen o reproducir un sonido o video. Esta capacidad de ir
uniendo pginas con otras pginas es lo que le da a Internet su
dinamismo.
Como todos sabemos la informacin es la esencia de Internet, o
mejor dicho, la transferencia de esa informacin. En si, el concepto
del Hipertexto fue uno de los mas importantes detonantes de lo
que ahora llamamos World Wide Web que podra ser definido
llanamente como un conjunto cuasiinfinito de vnculos.
HiperTexto(HyperText)
Una definicin mas general que podramos dar de Hipertexto es la
siguiente:

"Es la organizacin de las unidades de informacin interconectadas
entre si".

Supongamos por ejemplo una pgina o sitio, con varios vnculos
incrustados en ella. La lectura de dicha pgina se puede hacer de
manera lineal, olvidando que los vnculos existen, o podemos llevar
una lectura no lineal siguiendo cada uno de los vnculos. As nuestra
definicin podra ser de la siguiente forma:

"Es la organizacin no lineal de las unidades de informacin
interconectadas entre si "

Si quisiramos ser puristas, podramos decir que el hipertexto solo se
refiere a texto y al hablar de vnculos a objetos multimedia podramos
hablar de hipermedia.

Marcado(Markup)
Imaginemos esta escena: estamos sentados frente a nuestra computadora escribiendo
un documento
en nuestro procesador de texto favorito. Conforme vamos escribiendo vamos
decidiendo el tamao de las letras de los ttulos y del texto normal, tambin definimos
colores, tipos de letras o creamos tablas o incluso insertamos un dibujo a grafica.
Ahora imaginemos esta escena: Vamos en el transporte colectivo tratando de escribir
ese mismo documento y nuestro procesador de texto es papel y lpiz. As que, si
queremos indicar la forma en que se vera el documento, tendremos que anotar las
caractersticas de ese titulo o de esa imagen que debe ir aqu y centrada. La mejor
forma seria inventar una forma de escribir esas caractersticas... a ver que les parece
esta
<P> para indicar un prrafo nuevo
<B> para indicar negritas
<H1> para indicar un titulo
<IMG> para indicar que aqu va una imagen
Estas, en si, son etiquetas utilizadas en HTML para indicar en donde van las cosas y
cuales son sus
caractersticas.
As que las etiquetas son solo cadenas de caracteres especiales que se insertan en el
documento para
indicarle a nuestro navegador como se vera o imprimir una pgina en particular.
Etiquetas(tags)
Las Etiquetas HTML son keywords(Palabras
Claves) encerradas entre

<Nombre_Etiqueta [Nombre_Atributo= "valor " ] >
Content
------------------------------------------
------------------------------------------
</Nombre_Etiqueta>
Lenguaje(languaje)
En si HTML no es un lenguaje de programacin;es
solo un Lenguaje Etiquetado de Hipertexto.
Sin embargo se pueden encontrar algunas analogas
como por ejemplo decir que las etiquetas son
palabras reservadas, etc. Es mejor tomar a HTML
como un formato que como un lenguaje de
programacin
Por ultimo, cabe mencionar que HTML no es el
nico lenguaje, o formato, que maneja etiquetas,
por ejemplo, tambin existe el XML.
Versiones
Versin Ao
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2012
Navegador Web(Web Browser)
El proposito de un Navegador Web(Chrome, Firefox,
IE, Safari) es leer Documentos HTML y mostralos.
Estos no Muestran las etiquetas HTML, pero son
usadas para determinar como mostrar el documento.

La declaracin DOCTYPE
Ayuda al Navegador a mostrar correctamente la
pgina web.
En la web hay muchos documentos diferentes, y
un navegador web slo puede mostrar una
pgina web correctamente si conoce el tipo y
versin de HTML
La declaracin DOCTYPE
HTML5

<!DOCTYPE html>

HTML4

<!DOCTYPE HTML PUBLIC "-//W3c//DTD HTML 4.01 Transitional //EN"
"http://www.w3.org/TR/HTML4/loose.dtd">

XHTML 1.0

<!DOCTYPE HTML PUBLIC "-//W3c//DTD XHTML 1.0 Transitional //EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Mi Primer Script
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>

Estructura Bsica
Representacin visual de un clsico diseo web .
Estructura Bsica
En la parte superior, descripto como Cabecera, se encuentra
el espacio donde usualmente s e ubica el logo, ttulo,
subttulos y una corta descripcin del sitio web o la pgina.
Inmediatamente debajo, podemos ver la Barra de Navegacin
en la cual casi todos los des arrolladores ofrecen un men o lista
de enlaces con el propsito de facilitar la navegacin a travs
del sitio. Los usuarios son guiados desde esta barra hacia las
diferentes pginas o documentos , normalmente pertenecientes al
mismo sitio web.

Estructura Bsica
El contenido ms relevante de una pgina web se encuentra, en cas i
todo diseo, ubicado en s u centro. Esta seccin presenta informacin y
enlaces valiosos . La mayora de las veces es dividida en varias filas y columnas
. En el ejemplo de la Figura 1-1 s e utilizaron solo dos columnas :
Informacin Principal y Barra Lateral, pero esta seccin es
extremadamente flexible y normalmente diseadores la adaptan acorde a
sus necesidades insertando ms columnas , dividiendo cada columna entre
bloques ms pequeos o generando diferentes distribuciones y
combinaciones . El contenido pres entado en esta parte del diseo es
usualmente de alta prioridad. En el diseo de ejemplo, Informacin
Principal podra contener una lista de artculos , descripcin de productos ,
entradas de un blog o cualquier otra informacin importante, y la Barra
Lateral podra mostrar una lista de enlaces apuntando hacia cada uno s e esos
tems . En un blog, por ejemplo, esta ltima columna ofrecer una lista de
enlaces apuntando a cada entrada del blog, informacin acerca del autor, etc

Estructura Bsica
En la base de un diseo web clsico siempre nos
encontramos con una barra ms que aqu llamamos
Institucional. La nombramos de esta manera porque
esta es el rea en donde normalmente s e muestra
informacin acerca del sitio web, el autor o la empresa,
adems de algunos enlaces con respecto a reglas ,
trminos y condiciones y toda informacin adicional
que el desarrollador considere importante compartir.
Estructura Bsica
Estructura Bsica
Terminal:
geany /HTML/Plantillas/Basico/base.html
HEADER(Cabecera)
Uno de los nuevos elementos incorporados en
HTML5 es <header>. El elemento <header> no debe
ser confundido con <head> usado antes para
construir la cabecera del documento. Del mismo
modo que <head>, la intencin de <header> es
proveer informacin introductoria (ttulos,
subttulos, logos), pero difiere con respecto a
<head> en su alcance. Mientras que el elemento
<head> tiene el propsito de proveer informacin
acerca de todo el documento, <header> es usado
solo para el cuerpo o secciones especficas dentro
del cuerpo:

HTML HEADING(Encabezados-Titulos)
Desde <h1> a <h6>
basico:
/HTML/Elementos/headings/basico.html
<hgroup>
Dentro de cada elemento <header>, en la parte superior del cuerpo o al comienzo
de cada <article>, incorporamos elementos <h1> para declarar un ttulo.
Bsicamente, las etiquetas <h1> son todo lo que necesitamos para crear una lnea
de cabecera para cada parte del documento, pero es normal que necesitemos
tambin agregar subttulos o ms informacin que especifique de qu se trata la
pgina web o una seccin en particular. De hecho, el elemento <header> fue
creado para contener tambin otros elementos como tablas de contenido,
formularios de bsqueda o textos cortos y logos.
Para construir este tipo de cabeceras, podemos aprovechar el resto de las
etiquetas H, como <h1>, <h2>, <h3>, <h4>, <h5> y <h6>, pero siempre
considerando que por propsitos de procesamiento interno, y para evitar generar
mltiples secciones durante la interpretacin del documento por parte del
navegador, estas etiquetas deben ser agrupadas juntas. Por esta razn, HTML5
provee el elemento <hgroup>:

/HTML/Elementos/headings/hgroup.html


EJEMPLO DE HEADER
/HTML/Elementos/header/ejemplo_negro.html

You might also like