Issuu on Google+

Introducci贸n al HTML

Sesi贸n 6 Ing. 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? Protocolo http

Cliente

Cliente: • Explorer • Netscape

Dame el archivo x Aquí está

Servidor Remoto


La Telaraña Mundial Múltiples usos: • Educación • Investigación • Mercadeo • Desarrollo (ddhh y paz, medio ambiente, equidad, diversidad, hábitat, comercio justo)


Estรกndares de HTML HTML 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铆a HTTP: 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 Locator Direcci贸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ásicos Deben 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> doc1.html Este es mi primer documento HTML. <HTML> doc2.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>


Elementos Básicos Rótulos Básicos

<HEAD> <TITLE> <P>

Rótulos de Formato Físico <B> <I>

Rótulos de Formato Lógico <STRONG> <EM> <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: áéíóú &aacute; àèìòù &agrave; ñçö &ntilde;


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 documentos Pueden ser creados usando editores simples como Notepad, vi, emacs. Ventajas • Es barato • Se aprende a comprender el lenguaje HTML Desventajas • 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 realzado: Texto en itálica:

<B>Texto en negrita</B> <STRONG>Texto realzado</STRONG> <I>Texto en itálica</I>

Texto con énfasis: <EM>Texto con énfasis</EM> Texto de dirección: <ADDRESS>Texto de dirección</ADDRESS> Texto intermitente: <BLINK>Texto intermitente</BLINK> Texto superíndice: <SUP>Texto Superíndice</SUP> Texto subíndice : SUB>Texto Subíndice</SUB> Texto grande: <BIG>Texto grande</BIG> Texto pequeño: <SMALL>Texto pequeño</SMALL>


Efectos en el texto 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>


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>


Tamaños y tipos de letra en HTML Otra forma de cambiar los tamaños de letra es utilizar el elemento <FONT > 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: <FONT SIZE=3>A</font><FONT SIZE=4>A</font> <FONT SIZE=5>A</font> <FONT SIZE=6>A</font> <FONT SIZE=7>A</font><FONT SIZE=6>A</font> <FONT SIZE=5>A</font><FONT SIZE=4>A</font> <FONT SIZE=3>A</FONT>

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. <FONT SIZE=5>ABcde</FONT>


Tama単os y tipos de letra en HTML <FONT FACE="arial">Texto de prueba 12345 con tipo ARIAL</FONT> <FONT FACE="times new roman">Texto de prueba 12345 con tipo TIMES NEW ROMAN</FONT> <FONT FACE="courier new">Texto de prueba 12345 con tipo COURIER NEW</FONT> <FONT FACE="courier">Texto de prueba 12345 con tipo COURIER</FONT> <FONT FACE="roman">Texto de prueba 12345 con tipo ROMAN</FONT> <FONT FACE="small fonts">Texto de prueba 12345 con tipo SMALL FONTS</FONT>

<FONT FACE="impact" SIZE=6 COLOR="red"> <FONT FACE="raro, courier" SIZE=4 COLOR="red">


Texto en color Se puede controlar el color del texto utilizando el elemento <FONT> 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. <B><FONT COLOR="red">Texto ROJO </FONT> <br> <FONT COLOR="blue">Texto AZUL </FONT> <br> <FONT COLOR="navy">Texto AZUL MARINO </FONT> <br> <FONT COLOR="green">Texto VERDE </FONT> <br> <FONT COLOR="olive">Texto OLIVA </FONT> <br> <FONT COLOR="yellow">Texto AMARILLO </FONT> <br> <FONT COLOR="lime">Texto LIMA </FONT> <br> <FONT COLOR="magenta">Texto MAGENTA </FONT> <br> <FONT COLOR="purple">Texto PURPURA </FONT> <br> <FONT COLOR="cyan">Texto CYAN </FONT> <br> <FONT COLOR="brown">Texto MARRON </FONT> <br> <FONT COLOR="black">Texto NEGRO </FONT> <br> <FONT COLOR="gray">Texto GRIS </FONT> <br> <FONT COLOR="teal">Texto TEAL </FONT> <br> <FONT COLOR="white">Texto BLANCO </FONT> <br> </B> He aquí una combinación de colores y tamaños: <FONT SIZE=6 COLOR="red">E</FONT><FONT SIZE=4>sto es una </FONT> <FONT SIZE=6 COLOR="red">P</FONT><FONT SIZE=4>rueba </FONT>


Los colores también se pueden definir en hexadecimal (por ejemplo el rojo es <FONT COLOR=#FF0000>). 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. Dark Green Copper rgb=#4A766E Dark Olive Green rgb=#4F4F2F White rgb=#FFFFFF Dark Orchid rgb=#9932CD Red rgb=#FF0000 Dark Purple rgb=#871F78 Green rgb=#00FF00 Dark Slate Blue rgb=#6B238E Blue rgb=#0000FF Dark Slate Grey rgb=#2F4F4F Medium Blue rgb=#3232CD Dark Tan rgb=#97694F Magenta rgb=#FF00FF Medium Forest Green rgb=#6B8E23 Dark Turquoise rgb=#7093DB Cyan rgb=#00FFFF Medium Goldenrod rgb=#EAEAAE Dark Wood rgb=#855E42 Yellow rgb=#FFFF00 Medium Orchid rgb=#9370DB Dim Grey rgb=#545454 Black rgb=#000000 Medium Sea Green rgb=#426F42 Dusty Rose rgb=#856363 Aquamarine rgb=#70DB93 Medium Slate Blue rgb=#7F00FF Feldspar rgb=#D19275 Baker's Chocolate Medium Spring Green rgb=#7FFF00 Firebrick rgb=#8E2323 rgb=#5C3317 Medium Turquoise rgb=#70DBDB Forest Green rgb=#238E23 Blue Violet rgb=#9F5F9F Gold rgb=#CD7F32 Medium Violet Red rgb=#DB7093 Brass rgb=#B5A642 Goldenrod rgb=#DBDB70 Medium Wood rgb=#A68064 Bright Gold rgb=#D9D919 Grey rgb=#C0C0C0 Midnight Blue rgb=#2F2F4F Brown rgb=#A62A2A Green Copper rgb=#527F76 Navy Blue rgb=#23238E Green Yellow rgb=#93DB70 Bronze rgb=#8C7853 Neon Blue rgb=#4D4DFF Hunter Green rgb=#215E21 Bronze II rgb=#A67D3D Neon Pink rgb=#FF6EC7 Indian Red rgb=#4E2F2F Cadet Blue rgb=#5F9F9F New Midnight Blue rgb=#00009C Khaki rgb=#9F9F5F Cool Copper rgb=#D98719 New Tan rgb=#EBC79E Light Blue rgb=#C0D9D9 Copper rgb=#B87333 Old Gold rgb=#CFB53B Light Grey rgb=#A8A8A8 Coral rgb=#FF7F00 Orange rgb=#FF7F00 Light Steel Blue rgb=#8F8FBD Corn Flower Blue rgb=#42426F Light Wood rgb=#E9C2A6 Orange Red rgb=#FF2400 Dark Brown rgb=#5C4033 Lime Green rgb=#32CD32 Orchid rgb=#DB70DB Dark Green rgb=#2F4F2F Mandarian Orange rgb=#E47833 Pale Green rgb=#8FBC8F Maroon rgb=#8E236B Pink rgb=#BC8F8F Medium Aquamarine rgb=#32CD99

Plum rgb=#EAADEA Quartz rgb=#D9D9F3 Rich Blue rgb=#5959AB Salmon rgb=#6F4242 Scarlet rgb=#8C1717 Sea Green rgb=#238E68 Semi-Sweet Chocolate rgb=#6B4226 Sienna rgb=#8E6B23 Silver rgb=#E6E8FA Sky Blue rgb=#3299CC Slate Blue rgb=#007FFF Spicy Pink rgb=#FF1CAE Spring Green rgb=#00FF7F Steel Blue rgb=#236B8E Summer Sky rgb=#38B0DE Tan rgb=#DB9370 Thistle rgb=#D8BFD8 Turquoise rgb=#ADEAEA Very Dark Brown rgb=#5C4033 Very Light Grey rgb=#CDCDCD Violet rgb=#4F2F4F Violet Red rgb=#CC3299 Wheat rgb=#D8D8BF Yellow Green rgb=#99CC32


Párrafos Para definir los párrafos se utiliza el elemento lleno <P> </P> (por Paragraph). Aunque a menudo no se utiliza el cierre </P>, ya que el texto continuará normalmente hasta que encuentre otro párrafo <P>, es conveniente acostumbrarse a ponerlo siempre. En la nueva definición del XHTML el cierre es obligatorio. Se escribirá así: <P> Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 </P> <P> Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P> Si no se quiere dejar esa línea vacía entre los dos párrafos puede utilizarse el elemento <BR> (por BReak). Es decir, que el elemento <BR> es un separador, no un indicador de bloque. Se escribirá así: <P>Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 <BR> Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P>


Párrafos

El elemento <P> admite cuatro atributos de alineación: ALIGN=LEFT (por defecto), ALIGN=RIGHT , ALIGN=CENTER y ALIGN=JUSTIFY Se escribirán así: <P ALIGN=LEFT> 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 </P> <P ALIGN=RIGHT> 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 </P> <P ALIGN=CENTER> 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 </P> <P ALIGN=JUSTIFY> 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>


Párrafos

Un elemento que se comporta de forma parecida a <BR> es <DIV> pero que admite los mismos atributos que <P>: 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 8 9 10 11 12 13 14 15 16 17 18 19 20 21 </PRE>

<B>Esto es una demostracion de</B> texto preformateado.


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> 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 desordenada ( no numerada): <UL> <LI>Primera linea <LI>Segunda linea </UL> 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 minúsculas: <OL TYPE=i> <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>

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 <DT><IMG SRC="bolaroja.gif">Linea de texto <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>.

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รก: <A HREF="indice.htm" TARGET="Ventana-2"> </A>


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)