Unidad # 1

Introduccion HTMLBienvenidos 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.

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

Características del lenguaje HTML

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 HTMLEl 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 HTMLEn 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áginarespectivamente:

<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. Estasinstrucciones 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 principioesta 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 principioesta 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 ventanadel 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 = numeroheight = 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árrafosLa 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 ordenadasLas 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:

<OL TYPE=A>

Ordenación con letras minúsculas:

<OL TYPE=a>

Ordenación con números romanos en mayúscula:

<OL TYPE=I>

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

<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 insertarlíneas que les separen. También hemos visto que alguna de las etiquetas utilizadas tienen el atributo ’align’ quepermite 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 sercentrado. 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 entreellas, fuese lo que fuese, estuviese centrado. Por ejemplo en el ejemplo del verso de Lorca podemos centrarloescribiendo:

Unidad # 1

Documents

Transcript of Unidad # 1