Unidad # 1

Introduccion HTML
Bienvenidos al manual de HTML de Desarrollo Web. A través
de todos estos capítulos vamos
a descubrir el lenguaje utilizado para la creación de páginas
web: el Hyper Text Markup
Language, más conocido como HTML.

Características del lenguaje
HTML

 Pero empecemos ya con lo que nos interesa. ¿Cómo se hace una
página Web? Cuando los diseñadores del WWW
 se hicieron esta pregunta decidieron que se debían cumplir, entre otras,
las siguientes características:
 • El Web tenía que ser distribuido: La información repartida en páginas
no muy grandes enlazadas entre sí.
 • El Web tenía que ser hipertexto y debía ser fácil navegar por él.
 • Tenía que ser compatible con todo tipo de ordenadores (PCs,
Macintosh, estaciones de trabajo...) y con todo
 tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS,...).
 • Debía ser dinámico: el proceso de cambiar y actualizar la información
debía ser ágil y rápido

Qué se necesita para crear una
página web
 Una de las características de este lenguaje más importantes
para el programador es que no es necesario ningún
programa especial para crear una página Web. Gracias a
ello se ha conseguido que se puedan crear páginas con
cualquier ordenador y sistema operativo.

Sintaxis de HTML
El HTML es un lenguaje que basa su sintaxis en un elemento de base al
que llamamos etiqueta. La
etiqueta presenta frecuentemente dos partes:
Una apertura de forma general <etiqueta>
Un cierre de tipo </ etiqueta>
Todo lo incluido en el interior de esa etiqueta sufrirá las modificaciones que
caracterizan a esta
etiqueta. Así por ejemplo:

Las etiquetas y definen un texto en negrita. Si en nuestro
documento HTML
escribimos una frase con el siguiente código:
Esto esta en negrita
El resultado Será:
Esto esta en negrita

Estructura de un documento HTML
En esta sección conoceremos los cuatro elementos básicos que
"marcan" la estructura de un documento HTML. Pero antes de nada
veamos el esqueleto de un documento HTML vacío:
<!DOCTYPE>
<html>
<head>
</head>
<body>
</body>
</html>

La primera línea está reservada al DOCTYPE (tipo de
documento), después viene el documento HTML, que está dividido en dos
secciones: head (cabecera) y body (cuerpo).

Primeros pasos en HTML
En primer lugar deberemos especificar que el archivo de texto que estamos
escribiendo es un documento HTML,
para ello usamos las instrucciones de inicio y fin de la etiqueta <html> al principio
y al final de la página
respectivamente:

<html>

Código de la página

</html>

El código de la página esta formado a su vez por dos grandes bloques, la
cabecera y el cuerpo.
La cabecera de la página está delimitada por las instrucciones de inicio y fin
de la etiqueta head. Estas
instrucciones deben estar dentro de la etiqueta HTML de la siguiente
manera:

<html>
<head>
Elementos de la cabecera
</head>
... Resto de código de la página ...
</html>

En la cabecera de la página se introduce toda aquella información que
afectará a toda la página. En un principio
esta información se limitará al título. Este título se indicará con la etiqueta
title usando la siguiente sintaxis:

En la cabecera de la página se introduce toda aquella información que
afectará a toda la página. En un principio
esta información se limitará al título. Este título se indicará con la etiqueta title
usando la siguiente sintaxis
<html>
<head>
<title>Mi primera página WEB</title>
</head>
</html>

El resultado de ver esta página con nuestro navegador es el que se observa en la
figura Como vemos, el área de la pantalla donde suele estar la página está
todavía vacía, pero si nos fijamos en la cabecera de la ventana
del navegador vemos que el título a pasado de ser Microsoft Internet Explorer a
"Mi primera página WEB”. Es decir el título que le demos a nuestra página con la
etiqueta <TITLE> pasará
a ser el título de la ventana del navegador

En la lección precedente hemos visto cómo crear un documento HTML
partiendo de cero y cómo impostar el .
La operación que sigue a la impostación del documento es la definición del
color o de la imagen del fondo, así como de los colores de los enlaces
activos y de los visitados.
<BODY>
El elemento <BODY> se coloca inmediatamente después del cierre de la
marca </HEAD> y, en cualquier caso, dentro de los elementos
<HTML></HTML>; tiene una marca de apertura y una de cierre y delimitado
por ellas figura el cuerpo del documento.
Si el elemento <HEAD> contenía metainformación (es decir, datos no
visualizados materialmente por el navegador) la función de la marca
<BODY> es la de mostrar los objetos (texto, imágenes, sonidos, apliques,
etc.) de la página.
La sintaxis correcta del elemento <BODY> es la siguiente:
<BODY>
EL contenido
</BODY>

La marca <BODY> se utiliza también para proporcionar al navegador
información sobre la disposición de los objetos en el documento, así como
para impostar varios atributos de visualización para el documento. A
continuación veremos cuáles

BGCOLOR : El atributo BGCOLOR imposta un fondo de un solo color. La
sintaxis correcta es:

<BODY BGCOLOR="red">

Es posible sustituir el nombre en inglés con valores hexadecimales. Por
ejemplo, el color rojo (red) se sustituye de esta manera:

<BODY BGCOLOR="#ff0000">

BACKGROUND : tiene una función similar a BGCOLOR, pero mientras el segundo
muestra un tono único del color, el primero visualiza en el fondo una imagen en
formato gráfico .gif o .jpg.
Imaginemos, por ejemplo, que queremos construir un fondo con la siguiente
imagen:

La imagen se llama sfondo.gif y se encuentra depositada en el mismo directorio
que el documento. La sintaxis correcta para impostar la imagen como fondo es:

<BODY BACKGROUND="fondo.jpg">

También podemos agregar sonido como fondo de una pagina con la
etiqueta:
<BGSOUND SRC="imagine.mid" LOOP=INFINITE>

O tambien podemos usar esta otra etiqueta :
<EMBED SRC="imagine.mid" AUTOSTART=true LOOP=true
VOLUME="80" WIDTH="0" HEIGHT="0">

src = "fichero" Indica el nombre del fichero que contiene el sonido (.waw, .mid)
o el video (.avi).
autostart = true Incluirlo si deseamos que la reproduccion se inicie
inmediatamente.
loop = true Incluirlo si deseamos que la reproduccion no se detenga. (al
terminar, vuelve a comenzar automaticamente).
volume = numero Volumen al que se reproducen los ficheros de sonido.
width = numero
height = numero Anchura y Altura de la representacion del objeto. (Si es un
sonido no es necesario este parametro).
controls = smallconsole Visualiza una serie de controles que nos permiten
iniciar la reproduccion del fichero, asi como realizar una pausa o detenerlo

Formatear títulos de <H1> ad <H6>
La marca <Hn> (donde n puede ser cualquier número comprendido entre 1 y
6) se emplea para definir el estilo de los encabezados de la página, dándoles
más o menos relieve según el número correspondiente. Como hemos
señalado, los números van del 1 al 6, siendo más importantes los números
más bajos que los altos. Visualmente, esta diversa importancia se plasma en
la diferente dimensión del texto, como en el siguiente ejemplo:

La marca tipográfica FONT es una de las más utilizadas y frecuentes en el
actual web publishing. En la sección Impostar el fondo del documento
(elemento BODY), hemos visto que el atributo TEXT da un color único a
todo el texto del documento. La marca FONT tiene, en parte, una función
similar, aunque es mucho más amplia y conceptualmente diversa.

Tipo para formatear

El atributo FACE="arial" indica el tipo que se visualizará; SIZE=5 el
tamaño del tipo, que puede estar comprendido entre 1 y 7 (mayor
dimensión cuanto más cercano al 7); COLOR=red indica el color del texto
(que puede expresarse asimismo en valores hexadecimales).

, , 

, , son tres de las marcas de formatación tipográfica más usadas
del HTML. Todas ellas deben constar de apertura y cierre:

 Texto en negrita 
El texto comprendido entre estas marcas queda formateado en negrita (la B
corresponde al inglés BOLD).

 Texto en cursiva 
El texto comprendido entre estas marcas queda formateado en cursiva (la I
corresponde al inglés ITALIC)

 Texto subrayado 
El texto comprendido entre estas marcas queda subrayado aun sin ser un
enlace (la U corresponde al inglés UNDERLINE).

Existe también la marca STRIKE para el texto tachado:
<STRIKE> Texto tachado </STRIKE>

Crear párrafos
La marca sirve para definir un nuevo párrafo de texto, indicando al navegador
que el mismo debe empezar en una nueva línea y colocarse a la derecha, a la
izquierda o centrado. Si no se especifica otra cosa, la marca alinea el texto
por defecto a la izquierda. Para indicar otros tipos de alineación, existen atributos
específicos:


Define un párrafo y alinea el texto a la izquierda(left).


Define un párrafo y alinea el texto a la derecha (right).


Define un párrafo y centra el texto (center).

Listas ordenadas
Las listas ordenadas constan de una sola marca de apertura y cierre <OL></OL> y
tantas marcas de lista como voces hay en el menú <LI>. La sintaxis correcta para
elaborar listas ordenadas es:

<OL>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>

Ordenación con letras mayúsculas: Ordenación con letras minúsculas:

<OL TYPE=A> <OL TYPE=a>

Ordenación con números romanos Ordenación con números romanos
en mayúscula: en minúscula (romanitos):

<OL TYPE=I> <OL TYPE=i>

Líneas horizontales para separar
párrafos
Si lo que se necesita es separar dos secciones diferentes de una página, ya
sea texto o no, puede emplearse una

nueva etiqueta: <hr>. Su nombre proviene del inglés Horizontal Rule (línea
horizontal). Esta etiqueta está

formada por una única instrucción y provoca que el navegador inserte una
línea horizontal como la mostrada en

la figura 2.3 que separaba los dos párrafos que se estaban comparando.
Existen cuatro atributos que permiten

modificar su apariencia. Estos son:

La etiqueta <center>... </center>
Acabamos de ver una serie de etiquetas que permiten cambiar de línea, crear
distintos tipos de párrafos o insertar
líneas que les separen. También hemos visto que alguna de las etiquetas
utilizadas tienen el atributo ’align’ que
permite indicar el alineamiento.
En ocasiones puede ser muy útil indicar que algún texto, imagen o algún otro
elemento de la página debía ser
centrado. Sin embargo no todas las etiquetas tienen el atributo ’align’. La
solución es emplear una nueva etiqueta:
center. Ésta está compuesta por una instrucción de inicio y una de fin de
manera que todo lo que quedaba entre
ellas, fuese lo que fuese, estuviese centrado. Por ejemplo en el ejemplo del
verso de Lorca podemos centrarlo
escribiendo:

Unidad # 1

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Viewers also liked

Viewers also liked (20)

Similar to Unidad # 1

Similar to Unidad # 1 (20)

More from Elmer Roman

More from Elmer Roman (7)

Unidad # 1