html 1 (1)

Introducción al HTML

Sesión 6Ing. Luis G. Aguilar Fernández

USMP

Vamos a hablar de...HTML• Conceptos del lenguaje• Estructura para documentos• Herramientas usadas para crear

documentos • Buenas prácticas en la publicación de

documentos• Problemas que se nos pueden presentar

HTML: qué es?• Lenguaje que da formato• Define la sintáxis y ubicación de

imágenes, instrucciones y objetos al navegador

• Posibilidad de conectar un documento con otros, o con otros recursos en Internet a través de hipertexto

HTML: qué no es?• No es un procesador de palabra• No es una herramienta de

escritorio para diagramación• No es un lenguaje de

programación• No es multimedia

Como funciona?

Cliente Cliente:• Explorer• Netscape

Dame el archivo x

Aquí está

Protocolo http

ServidorRemoto

La Telaraña MundialMúltiples usos:• Educación• Investigación• Mercadeo• Desarrollo (ddhh y paz, medio

ambiente, equidad, diversidad, hábitat, comercio justo)

Estándares de HTMLHTML 1 Desarrollado en CERN HTML 2.0 Incluye mejoras en NCSA

Mosaic (formularios e imágenes)HTML 3.2 Mejoras para controlar el

formateo de tablas, etc.HTML 4.0 Mejoras para publicaciones

multiplataforma (CSS, XML, WAP, DHTML)

TerminologíaHTTP: Hypertext Transfer Protocol

Parámetros de comunicación cliente - servidor Web

HTML: Hypertext Markup Language Lenguaje nativo para documentos publicados en el Web independiente del tipo de plataforma.

URL: Uniform Resource LocatorDirección de un objeto en el Web

http://www.colnodo.org.co/

Fundamentos• Rótulos <H1>Inicio</H1>• No sensitivos a mayúsculas y

minúsculas <H1> o <h1>• Algunos atributos pueden ser sensibles

a mayúsculas y minúsculas como los nombre de archivos, por ejemplo.

• Normalmente van en pares denotando inicio y fin <H1> y </H1>

Documentos BásicosDeben incluir • <HEAD> y </HEAD> contiene

información sobre el documento• <BODY> y </BODY> es el contenido

principal del documento• <HTML> y </HTML> contiene los 2

elementos anteriores

2 Ejemplos...<TITLE>Mi Primer Documento</TITLE>Este es mi primer documento HTML.

<HTML><HEAD><TITLE>Un mejor documento</TITLE></HEAD><BODY>Novedades sobre el World Wide Web disponible en <A HREF="http://www.w3.org/">W3C</A></BODY></HTML>

doc1.html

doc2.html

Elementos BásicosRótulos Básicos

<HEAD> <TITLE> Rótulos de Formato Físico

 Rótulos de Formato Lógico <UL> <LI>Enlaces de Hipertexto

<A HREF="…">

Caracteres Especiales • Permiten que diferentes navegadores

hagan visibles los caracteres diagráficos de los idiomas diferentes al inglés:á é í ó ú áà è ì ò ù àñ ç ö ñ

Tablas• Organización comparativa de

información• Ubicación dentro de la página• Múltiples atributos para especificar

Formularios• Interactividad • Retroalimentación • Recolección de datos• Pueden tabularse y analizarse• Respuestas personalizadas• Aceptado por todos los navegadores

Creando documentosPueden ser creados usando editores

simples como Notepad, vi, emacs.Ventajas

• Es barato• Se aprende a comprender el lenguaje

HTMLDesventajas

• Es fácil cometer errores• Necesita comprender la sintáxis HTML

Herramientas avanzadas•Interface amigable y fácil de usar

para crear documentos •Ocultan a disposición las

complejidades del código HTML •Pueden ser herramientas

autónomas o insertas en procesadores de texto

Efectos en el texto

Texto en negrita: Texto en negrita

Texto realzado: Texto realzado

Texto en itálica: Texto en itálica

Texto con énfasis: Texto con énfasis

Texto de dirección: <ADDRESS>Texto de dirección</ADDRESS>

Texto intermitente: <BLINK>Texto intermitente</BLINK>

Texto superíndice: Texto Superíndice

Texto subíndice : SUB>Texto Subíndice

Texto grande: <BIG>Texto grande</BIG>

Texto pequeño: Texto pequeño

En los navegadores de última generación se ha implementado un efecto que permite incluir explicaciones ocultas que aparecen al pasar el ratón por encima (sin pulsar), pero sin cambiar de página ni abrir ninguna ventana nueva. Por ejemplo: <ACRONYM TITLE="Hyper Text Markup Language">HTML</ACRONYM>

Al pasar el ratón sobre la palabra HTML, se desvela su significado: HTML

De funcionamiento similar al anterior también tenemos el elemento <abbr>

<abbr TITLE="Hyper Text Markup Language">HTML</abbr>

Efectos en el texto

Tamaños y tipos de letra en HTML

<Hx> </Hx> donde x es un número que puede variar entre 1 y 6, siendo 1 el tamaño mayor.

<H1> Texto de prueba (H1)</H1>.<H2> Texto de prueba (H2)</H2><H3> Texto de prueba (H3)</H3><H4> Texto de prueba (H4)</H4><H5> Texto de prueba (H5)</H5><H6> Texto de prueba (H6)</H6>

Otra forma de cambiar los tamaños de letra es utilizar el elemento con el atributo VALOR, que es un número entre 1 y 7. El valor por defecto del texto es 3. La gran diferencia de esta notación respecto a la anterior es que no se produce un salto de párrafo después de cada cambio, por lo que pueden hacerse cosas como esta:

AAA AAA AAA

Se puede cambiar el tamaño por defecto (3) de toda la página con el elemento <BASEFONT SIZE=valor>. El texto tomará el tamaño indicado por valor y lo mantendrá hasta que aparezca otro elemento <BASEFONT SIZE=valor> y lo restaure o lo cambie por otro diferente. Tanto si se ha establecido un valor base como si se utiliza el valor por defecto, los tamaños también pueden indicarse de forma relativa, por lo que el valor puede ser positivo (+) o negativo (-) respecto al tamaño base.

ABcde

Texto de prueba 12345 con tipo ARIALTexto de prueba 12345 con tipo TIMES NEW ROMAN Texto de prueba 12345 con tipo COURIER NEW Texto de prueba 12345 con tipo COURIER Texto de prueba 12345 con tipo ROMAN Texto de prueba 12345 con tipo SMALL FONTS

Texto en color

Se puede controlar el color del texto utilizando el elemento con el atributo COLOR="xxx", donde "xxx" es el nombre en inglés del color que se desea. Hay que tener presente que algunos no se verán o se verán mal si la máquina no soporta, por lo menos, 256 colores. Por supuesto, este efecto es anidable con el de tamaño y todos los demás.

Texto ROJO Texto AZUL Texto AZUL MARINO Texto VERDE Texto OLIVA Texto AMARILLO Texto LIMA Texto MAGENTA Texto PURPURA Texto CYAN Texto MARRON Texto NEGRO Texto GRIS Texto TEAL Texto BLANCO 

He aquí una combinación de colores y tamaños:Esto es una Prueba

Los colores también se pueden definir en hexadecimal (por ejemplo el rojo es ). Cuando son colores básicos, como los del ejemplo de arriba, es más cómodo escribir el nombre aunque sea en inglés, pero cuando se trata de definir un color que "no tiene nombre" no hay más remedio que usar la codificación hexadecimal.

White rgb=#FFFFFFRed rgb=#FF0000Green rgb=#00FF00Blue rgb=#0000FFMagenta rgb=#FF00FF Cyan rgb=#00FFFFYellow rgb=#FFFF00Black rgb=#000000Aquamarine rgb=#70DB93Baker's Chocolate rgb=#5C3317Blue Violet rgb=#9F5F9FBrass rgb=#B5A642Bright Gold rgb=#D9D919Brown rgb=#A62A2ABronze rgb=#8C7853Bronze II rgb=#A67D3DCadet Blue rgb=#5F9F9FCool Copper rgb=#D98719Copper rgb=#B87333 Coral rgb=#FF7F00Corn Flower Blue rgb=#42426FDark Brown rgb=#5C4033 Dark Green rgb=#2F4F2F

Plum rgb=#EAADEAQuartz rgb=#D9D9F3Rich Blue rgb=#5959ABSalmon rgb=#6F4242Scarlet rgb=#8C1717Sea Green rgb=#238E68Semi-Sweet Chocolate rgb=#6B4226Sienna rgb=#8E6B23Silver rgb=#E6E8FASky Blue rgb=#3299CCSlate Blue rgb=#007FFFSpicy Pink rgb=#FF1CAESpring Green rgb=#00FF7FSteel Blue rgb=#236B8ESummer Sky rgb=#38B0DETan rgb=#DB9370Thistle rgb=#D8BFD8Turquoise rgb=#ADEAEAVery Dark Brown rgb=#5C4033Very Light Grey rgb=#CDCDCDViolet rgb=#4F2F4FViolet Red rgb=#CC3299Wheat rgb=#D8D8BFYellow Green rgb=#99CC32

Medium Blue rgb=#3232CDMedium Forest Green rgb=#6B8E23Medium Goldenrod rgb=#EAEAAEMedium Orchid rgb=#9370DBMedium Sea Green rgb=#426F42Medium Slate Blue rgb=#7F00FFMedium Spring Green rgb=#7FFF00Medium Turquoise rgb=#70DBDBMedium Violet Red rgb=#DB7093Medium Wood rgb=#A68064Midnight Blue rgb=#2F2F4FNavy Blue rgb=#23238ENeon Blue rgb=#4D4DFFNeon Pink rgb=#FF6EC7New Midnight Blue rgb=#00009CNew Tan rgb=#EBC79EOld Gold rgb=#CFB53BOrange rgb=#FF7F00Orange Red rgb=#FF2400Orchid rgb=#DB70DBPale Green rgb=#8FBC8FPink rgb=#BC8F8F

Dark Green Copper rgb=#4A766EDark Olive Green rgb=#4F4F2FDark Orchid rgb=#9932CDDark Purple rgb=#871F78Dark Slate Blue rgb=#6B238EDark Slate Grey rgb=#2F4F4FDark Tan rgb=#97694FDark Turquoise rgb=#7093DBDark Wood rgb=#855E42Dim Grey rgb=#545454Dusty Rose rgb=#856363Feldspar rgb=#D19275Firebrick rgb=#8E2323Forest Green rgb=#238E23Gold rgb=#CD7F32 Goldenrod rgb=#DBDB70Grey rgb=#C0C0C0Green Copper rgb=#527F76Green Yellow rgb=#93DB70Hunter Green rgb=#215E21Indian Red rgb=#4E2F2FKhaki rgb=#9F9F5FLight Blue rgb=#C0D9D9Light Grey rgb=#A8A8A8Light Steel Blue rgb=#8F8FBDLight Wood rgb=#E9C2A6Lime Green rgb=#32CD32Mandarian Orange rgb=#E47833Maroon rgb=#8E236BMedium Aquamarine rgb=#32CD99

Párrafos

Para definir los párrafos se utiliza el elemento lleno (por Paragraph). Aunque a menudo no se utiliza el cierre , ya que el texto continuará normalmente hasta que encuentre otro párrafo , es conveniente acostumbrarse a ponerlo siempre. En la nueva definición del XHTML el cierre es obligatorio. Se escribirá así: Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 

Si no se quiere dejar esa línea vacía entre los dos párrafos puede utilizarse el elemento (por BReak). Es decir, que el elemento es un separador, no un indicador de bloque.

Se escribirá así: Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2

El elemento admite cuatro atributos de alineación: ALIGN=LEFT (por defecto), ALIGN=RIGHT , ALIGN=CENTER y ALIGN=JUSTIFYSe escribirán así:

 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 

Párrafos

PárrafosUn elemento que se comporta de forma parecida a es <DIV> pero que admite los mismos atributos que :

ALIGN=LEFT ALIGN=RIGHT y ALIGN=CENTER

Se escribe así:

<DIV ALIGN=LEFT> texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 </DIV> <DIV ALIGN=RIGHT> texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 < /DIV> <DIV ALIGN=CENTER> texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 </DIV> Fíjate en que aquí sí se utiliza el cierre </DIV>.

Otro separador de bloques de texto es el elemento vacío <HR> (por Horizontal Rule).

Al igual que al texto, se le puede incluir un parámetro de color, pero no funciona en todos los navegadores. También se puede cambiar su apariencia añadiéndole el atributo <NOSHADE>. Así: <HR NOSHADE>

El elemento <HR> admite dos parámetros: WIDTH y SIZE.

El primero define la longitud de la línea y el segundo su anchura.

No es obligado usar los dos a la vez.

Por ejemplo, si escribes <HR WIDTH=400 SIZE=5> El valor del atributo WIDTH se puede expresar, como en el ejemplo anterior, en número de puntos (píxels), o en tantos por ciento referidos al ancho total de la ventana. Así: <HR WIDTH=80% SIZE=5> Además se puede indicar su posición respecto a los márgenes de la ventana con los atributos ALIGN=CENTER (por defecto)

ALIGN=LEFT y ALIGN=RIGHT.

Por ejemplo: <HR WIDTH=80% SIZE=5 ALIGN=LEFT>

O bien:

<HR WIDTH=80% SIZE=5 ALIGN=RIGHT>

Textos preformateados

<PRE> 1 2 3 4 5 6 7 Esto es una demostracion de 8 9 10 11 12 13 14 texto preformateado. 15 16 17 18 19 20 21</PRE>

Listas y menús

Hay elementos que permiten crear texto con varios formatos de listado: Estos pueden ser ordenados <OL> (se refiere a numerados, no ordenados por algun criterio), desordenados <UL> (no numerados), directorios <DIR>, menu <MENU> y listados de definición <DL>. Veamos cómo es la sintaxis básica y apariencia de estos elementos, a partir de los cuales, pueden hacerse combinaciones muy complejas mediante anidamientos de unos con otros, hasta conseguir prácticamente cualquier presentación deseada:

lista ordenada (numerada): <OL> <LI>Primera linea <LI>Segunda linea </OL>

lista desordenada ( no numerada): <UL> <LI>Primera linea <LI>Segunda linea </UL>

La apariencia se puede cambiar usando el atributo TYPE con tres valores (el valor por defecto es DISC)

Se escribe: <UL TYPE=CIRCLE> <LI>Primera linea <LI>Segunda linea </UL>

También puede usarse el valor SQUARE

lista ordenada con letras mayúsculas:

<OL TYPE=A> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL>

Lista ordenada con letras minúsculas: <OL TYPE=a> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL>

lista ordenada con numeración romana en mayúsculas:

<OL TYPE=I> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL>

lista ordenada con numeración romana en minúsculas:

<OL TYPE=i> <LI>Primera linea<LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL>

Se puede conseguir con el atributo START combinado con TYPE. Esto es una lista ordenada con letras mayúsculas y que comienza por la E:

<OL TYPE=A START=5> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL>

Insertar imágenes

Para insertar una imagen en un documento HTML se utiliza el elemento <IMG>. Este elemento puede ir acompañado de los atributos SRC ALT ISMAP ALIGN WIDTH HEIGHT BORDER VSPACE HSPACE.

Imagen alineada a la izquierda (por defecto) <IMG SRC="sugeren.gif">texto texto texto texto texto texto texto texto

<IMG SRC="sugeren.gif" ALIGN=TOP> texto texto texto texto texto

Imagen alineada a la izquierda.Texto alineado arriba <IMG SRC="sugeren.gif" ALIGN=TOP> texto texto texto texto texto

Imágenes de fondo

El fondo (background) de este documento es una imagen en formato GIF.

Es un atributo del elemento <BODY>

Se escribe así: <BODY BACKGROUND="yellow_r.gif"> Y es compatible con todos los demás atributos de este elemento.

imágenes en listas

<DL>

<DT><IMG SRC="bolaroja.gif">Linea de texto



</DL>

Creación de enlaces (links)

<A HREF="http://www.miservidor.es/mifichero.htm"> Link de prueba </A>.

<A HREF="indice.htm"> <img src="bolaroja.gif"> </A>.

<A HREF="indice.htm" TARGET="Ventana-2"> </A>

Además de HREF, el elemento <A> puede tener otro atributo: TARGET. Se utiliza para ordenar la apertura de otra ventana del visualizador con la página que se desee. Se escribirá:

El atributo NAME se utiliza para definir algo así como "un punto de aterrizaje" en cualquier línea del documento de destino, de forma que nos aparecerá en pantalla desde la línea deseada y no desde el principio. Esto es muy útil cuando se trata de documentos largos divididos en secciones.

En el documento activo: <A HREF="http://www.miservidor.es/mifichero.htm#punto1"> Ir al punto 1</A>

En el documento destino: <A NAME="punto1"></A>

<A HREF="#punto1">Ir al punto 1</A>

http://sestud.uv.es/manual.esp/

html 1 (1)

Documents