HTML Facil

________________ HHTTMMLL

UNIVERSAL

2003

1

______ HHTTMMLL

UNIVERSAL 2003

DISEÑO GRAFICO: JORGE MARIO RINCON G. AUTOR: JORGE MARIO RINCON G.

TÍTULO ORIGINAL: HTML UNIVERSAL 2003. MÓDULO GRAFICO A COLOR

2

AAGGRRAADDEECCIIMMIIEENNTTOOSS Agradezco a Dios por darme lo que tengo y lo que soy. Agradezco a mi familia por darme una adecuada formación y educación. Agradezco a mis amigos por apoyarme en mis locuras. Agradezco Al profesor Carlos López por encaminarme en el sendero del diseño y abrirme las puertas a nuevas oportunidades, a mis socios Carlos el Pollo, Andres el wemaster y a Carlos el Gato por creer en mi y brindarme su apoyo y sincera amistad Dedico este módulo a la persona que realmente me ha sabido querer. A Karime

4

IINNDDIICCEE

TEMA PÁGINA Agradecimientos 5 Indice 7 Introducción 11 Capítulo 1 17 Etiquetas llenas y vacías 17 <title><head><body> 18 Atributos de una página web 21 Líneas <hr> 29 Medidas absolutas y relativas 30 Saltos de línea <br> 32 Saltos de párrafo <p> 33 Pre formato <pre> 35 Cuerpo Web <body> 36 Color de fondo 38 Imagen de fondo de una WEB 39 Marca De agua 41 Formato de la información 41 Caracteres Especiales 42 Imágenes 46 Atributos de la etiqueta imagen 47 Precarga de una imagen 53 Videos en Explorer 53 Actividad 54 Capítulo 2 57 Hiperenlaces 57 Direcciones locales 58 Colores de los enlaces 60 <target> 60 Quitar subrayado de los enlaces 61 Anclas. Enlaces dentro de una página 61 Actividad 62 Enlaces a un mail 62 Enlaces a descarga de programás 63 Enlaces a sonidos 63 Archivos Solapados 63 Mapas Sensibles 64 Actividad 66 Listas 67 Metalenguaje de información <meta> 72 La página web mejor buscada 73 5

Caducidad de una página web 74 Transiciones de una página web con la <meta> 74 Actividad 75 Capítulo3 77 Texto en movimiento la marquesina <marquee> 77 Número de movimientos 78 Comportamiento del movimiento 78 Limitación del espacio del movimiento 78 Velocidad del movimiento 78 Sonidos <bgsound> 79 Objetos <embed> 80 Capítulo 4 81 Directorios superiores, inferiores, igual nivel 82 Tablas 83 Fondo de una tabla 86 Actividad 89 Tablas anidadas 90 Color a los bordes 91 Alineación del contenidos de las celdas 93 Texto sobre una imagen 95 Nowrap 96 Colspan, rospan 97 Eliminación de bordes de tablas 98 Frames 100 Frames flotantes 111 Formularios 113 Entrada de datos <input> 114 Límite de entrada de datos 117 Color sobre un botón 121 Enviar y Borrar 122 Button 122 Button tipo imagen 123 Texto múltiple líneas, Comentarios 123 Menú múltiple opciones 124 Capítulo5 127 Publicación de una página web 127 CSE HTML VALIDATOR LITE V3.5 130 Bibliografía 134

6

INTRODUCCION Desolado, triste y aburrido. Abrumado por el desconocimiento; principales características de un primíparo. Primer semestre de Ingeniería en Sistemas y Telemática y no conocía ni a mi sombra. Es como volver a nacer en un mundo en el cual nadie te conoce. Cada primíparo es un planeta diferente con sus constelaciones y maricadas de adolescente en la cual conviven en un mismo universo: “LA SANTIAGO”. La ansiedad por aprender a diseñar páginas web sin contar con recursos, sin contar con una guía que instruyera acerca del tema, creó una total desesperación por conquistar tan anhelado conocimiento. En consecuencia, millones de manuales en el computador quedaron. Y uno a uno fue devorado. Fue así como ahora se dictan clases y HTML UNIVERSAL 2003 sale a la vida. Un profesional por definición, es una persona que adquiere un título en una Universidad, pero en realidad, es más que eso. Un profesional es un primíparo con una misión y una visión dispuesta a cumplirla a toda costa, un profesional es una persona que no permanece sólo con los conocimientos impartidos por los instructores. Un profesional siempre será un estudia-ante no un a-lumno. Este módulo contiene el conocimiento del HTML adquirido a través de libros, páginas en Internet, Códigos fuentes que generan los editores de HTML. Es un módulo completo del HTML, éste módulo esta pensado para toda persona; desde una persona que estudia danzas hasta un ingeniero. Si la mascota de la casa coge el módulo con gran seguridad aprenderá a diseñar páginas WEB. 7

Para empezar a codificar en HTML lo primero es saber en donde se puede realizar. Actualmente existen muchos editores que puedes utilizar:

• Microsoft ActiveX Control Pad • Allaire Home site • Hotdog Express • Hotdog Professional Webmáster Suite(recommended) • Hot dog Web Editor • HOT Metal Pro • WebFacil Pro • Arachnophilia • WYSIWYG DHTML Editor • AnfyJava • CSE HTML Validator Profesional (recommended) • CSE HTML Validator Lite (recommended) • WEBOverdrive

Los anteriores editores, son una pequeña muestra de ellos. Pero, si no quieres amargarte la vida puedes escoger como editor de texto el Block de Notas o Worpad. Yo te recomiendo el Block de Notas y para este módulo se trabajará sobre éste. Antes de empezar se debe tener en cuenta que se necesita de:

• Un editor de imágenes: Sirve para visualizar imágenes .jpg • Un navegador: Aquel que visualiza páginas web. Para éste módulo se

trabajará con Internet Explorer. • Editor de texto: Como el Block de Notas.

El Block de Notas es un editor de texto que sirve para generar archivos planos. Generalmente, un archivo plano es de extensión .txt y no lleva ningún tipo de formato. (“Tipo de letra, color, corrección ortografía, animación, etc..”) . Se codifican lenguajes de programación en el Block de Notas. 8

Como acceder al Block de Notas. Pasos 1. inicio + programas + accesorios + Block de Notas

imagen_01

2. Comencemos a diseñar mi primera página web, para ello se debe guardar como primera instancia. Pasos

1. Archivo + Guardar como + Nombre: index.html + guardar

9

imagen_02

NOTA. Se debe tener en cuenta donde se guarda la página. Para este caso la ubicación está en Mis Documentos. En donde se escribe index.html, en realidad puede ser otro: nombre.html es decir, también se puede escribir páginaweb.html. Se escribe index puesto que los buscadores (Google, Altavista, etc....)se guían por esta palabra para encontrar la página..

Posteriormente se deben cerrar todas las ventanas para poder empezar a trabajar tranquilamente la página web. Luego de cerrar las ventanas se debe ubicar en donde quedó guardada la página, es decir, index.html. Vamos a Mis Documentos y ubicamos a index.html nótese que el ícono que acompaña al título es una e de Internet Explorer. Para éste módulo se va a trabajar Html en la compañía de Microsoft, es decir, el navegador Internet Explorer, es muy conveniente que tengas una versión superior a la 4.0 para que puedas ver todos los efectos con el código que vas a aprender a manipular.

10

Imagen_03

Luego debes abrir el archivo creado llamado index.html el que está encerrado en un círculo rojo en la gráfica superior....... Y aquí esta tu primera página web....................

Imagen_04

11

Luego, en la parte superior en la barra de menús donde se encuentra Archivo , Edición, Ver, Favoritos, Herramientas y Ayuda. Damos un click en la opción Ver encerrada en el círculo rojo + código fuente donde se abrirá de nuevo el Block de Notas para empezar a codificar en HTML para nuestra página web. Cualquier página web diseñada en cualquier programa genera un código fuente el cual puede ser modificado. Téngase en cuenta que el código fuente de una página se puede modificar siempre y cuando la página esté en el propio computador, si la página está en Internet sólo se podrá modificar el código fuente si sólo se tiene acceso a ella a través de un login y un password. Un consejo gratis. Si quieres volverte un gurú en HTML, es decir un genio en códigos HTML, te aconsejo que libres una gran batalla con tu memoria, en otras palabras, de ahora en adelante vas a olvidar que tienes memoria. No te preocupes por aprender la codificación HTML puesto que si practicas arduamente verás que los códigos harán parte de ti. Para dar un buen manejo a este módulo debes leer el tema y practicarlo en el computador. La teoría y la práctica deben ser equivalentes para formar un excelente conocimiento acerca del tema, es muy recomendable no memorizar la codificación puesto que sería como contar las estrellas. 12

CAPÍTULO 1

ETIQUETAS LLENAS Y VACIAS

Antes de empezar vale la pena mencionar que HTML(“hiper text markup language”), es un lenguaje para páginas web que utiliza marcas o etiquetas. Las etiquetas son marcas o palabras claves encerradas en “<” menor que y “>” mayor que. Estas etiquetas van a permitir la realización de la página web. Una etiqueta en HTML se prototipa así: <etiqueta> la palabra clave encerrada entre el “<” y el “>”. Generalmente las etiquetas se cierran y tienen el nombre de etiquetas llenas es decir: Cuando utilizamos una <etiqueta> se debe cerrar así: </etiqueta> escribiendo la misma etiqueta pero antecediendo el “/” slash a la palabra clave. Cuando en una etiqueta no hay necesidad de cerrarla recibe el nombre de etiqueta vacía. Para comenzar a escribir código HTML abrimos bien sea el código de la página anteriormente creada o en algún editor de texto. En este caso en el Block de Notas lo primero que debemos de escribir es: <html> </html> // No es necesario. Pero si conveniente para realizar un buen código fuente. Una página web se compone de tres elementos principales..

• Un título • Una Cabeza • Un cuerpo

14

El título en html se define como <title>entre esta etiqueta se escribe el título </title>Esta etiqueta se debe cerrar. El título es el que va aparecer en la barra superior de la página web y generalmente sirve para ser referenciadas por todos los buscadores. NOTA Tenga en cuenta que Puede ocurrir que si se escribe mal la etiqueta <title> o si no se cierra la página no mostraría absolutamente nada. La cabeza se define como <head>entre esta etiqueta va un título</head>Esta etiqueta se debe cerrar. La cabeza va a ser el título principal superior de la página web, a diferencia con el <title>es que el texto entre esta etiqueta no aparece en el estatus sino que en la página web generalmente entre esta etiqueta se colocan funciones de Java Script o definición de estilos de HTMLD. El cuerpo se define como : <body> este es el cuerpo “gráficas, texto de mi página </body>

Esta etiqueta por estética se debe cerrar,

cuerpo “<body>” va a ser donde va a ir todo el cuerpo de la página web

párrafos, animaciones.....en fin”.

La jerarquía de las 3 etiquetas anteriormente mencionadas es: Primera Forma <html> <title>Mi primera web</title> <head>EMPRESAS SA</head> <body>

estos son los párrafos de la empresa </body> </html>

15

Segunda Forma <html>

<head><title>Mi primera Web</title></head> <body>

estos son los párrafos de la empresa </body> </html>//de esta forma se hace para ahorrar líneas de código A continuación escribir el anterior código fuente en el Block de Notas y grabarlo con extensión .html o bien sea escribir las anteriores etiquetas en el código fuente de la página que ya se ha creado. Después de haber escrito el código hay que ir a la barra de menús del Block de Notas en la parte superior izquierda a archivo + guardar. Luego en la página web abierta damos en la opción actualizar que es un ícono con dos flechas verdes en la parte superior debajo de favoritos. Si el ícono no está se puede cerrar la página y volverla abrir. Nota: A veces sucede que el computador esta configurado para abrir por el Nestcape otro visualizador de páginas web. En este visualizador también se puede codificar en HTML sin embargo difieren algunos códigos. Si por x ó y motivos no puedes abrir tu página web sigue los siguientes pasos. Abre Internet Explorer + Archivo + Abrir + Examinar + busca la ubicación de tu página web donde la guardaste + Abrir + Aceptar. Por cualquier forma que la abriste o actualizaste tu página, si escribiste el código bien tu página debe aparecer así, bueno sin los círculos claro esta:

16

El círculo rojo en la parte superior izquierda especifica el título “<title>” El círculo verde especifica la cabeza de la web “<head>” El círculo azul especifica el cuerpo “<body>” Nótese que la cabeza aparece en la misma línea del cuerpo para diferenciarla necesitamos un salto de línea que se escribe como etiqueta <br> que dignifica break, rompa la línea, El <br> siempre será una etiqueta vacía porque nunca se cierra. Nota: Debes hacer el mismo proceso para ingresar los código. Estar ubicado en el código fuente es decir en nuestro caso el Block de Notas y escribir la etiqueta, guardarlo y actualiza la página web.

ATRIBUTOS DE UNA PÁGINA WEB Los atributos sirven para darle formato a la información: color al texto, alineación, color a una sola parte del texto, saltos de línea, espacios, anchura al tipo de letra, tipo de letra y muchos más atributos.......

17

Cabeceras <hn>

Las cabeceras: Son las etiquetas que van a permitir la negrilla, se pueden utilizar seis cabeceras “<h1><h2><h3><h4><h5><h6>”, la diferencia entre las 6 cabeceras es que <h1> es la cabecera que vuelve de mayor tamaño y negrita al texto, mientras que <h6> es la de menor tamaño en negrita que vuelve el texto, se debe tener en cuenta que al utilizar las cabeceras por defecto estas etiquetas producen un salto de línea. <h1> Mario Rincón</h1> <h2> Olga </h2> <h3> Jennifer </h3> <h4> Carmenas </h4> <h5> Daniel </h5> <h6> pepe </h6> La visualización en la página web del anterior código seria así: Mario Rincón Olga Jennifer Carmenas Daniel Pepe Nota: Esta etiqueta si no se cierra, funciona, sin embargo todo el texto que este por debajo de ella quedaría en negrita y del tamaño según la etiqueta. Para centrar el texto o algún objeto “imagen, tabla o un gif” se debe utilizar la etiqueta <center></center> Ejemplo: <center>ESTE TEXTO VA CENTRADO</center> La visualización en la página web del anterior código seria así:

ESTE TEXTO VA CENTRADO

<font>

18

Si deseas cambiar el color de una parte de un texto se utiliza la etiqueta <font>, con esta etiqueta se pueden colocar color a una parte de un texto, definir un tipo de letra, agrandar la letra. Esta etiqueta recibe tres atributos. Un atributo es una palabra clave que es parte de la etiqueta que servirá para darle efectos a la etiqueta. Estructura. <etiqueta atributo1 atributo2 atributo3></etiqueta> Nota Cuando una etiqueta tiene uno o más atributos para cerrarla sélo se escribe el nombre de la etiqueta propio antecedido por un “/”. <font color = “blue”>texto</font> esta etiqueta tiene un atributo “color” al cual se le asigna el color azul, el texto que esté entre la etiqueta de apertura y cierre. Este texto aparecerá de color azul, los colores se deben escribir en inglés. Aquí esta la lista de colores.. http://www.uca.es/manual-html/colorns3.htm En esta página se encuentran los colores que resiste Nestcape, la gran mayoría sirven para Internet Explorer, claro esta. Que puede variar el tipo de color

aliceblue antiquewhite aqua aquamarine azure beige

bisque black blanchedalmond blue blueviolet brown

burlywood cadetblue chartreuse chocolate coral cornflowerblue

cornsilk crimson cyan darkblue darkcyan darkgoldenrod

darkgray darkgreen darkkhaki darkmagenta darkolivegreen darkorange

darkorchid darkred darksalmon darkseagreen

darkslateblue

darkslategray

19

darkturquoise darkviolet deeppink deepskyblue dimgray dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite gold goldenrod gray green greenyellow honeydew hotpink indianred indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgreen lightgrey lightpink lightsalmon

lightseagreen

lightskyblue lightslategray lightsteelblue lightyellow lime limegreen

linen magenta maroon mediumaquamarine mediumblue

mediumorchid

mediumpurple

mediumseagreen

mediumslateblue

mediumspringgreen

mediumturquoise

mediumvioletred

midnightblue mintcream mistyrose moccasin navajowhite navy oldlace olive olivedrab orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple red

rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna silver skyblue slateblue slategray

snow springgreen steelblue tan teal thistle

tomato turquoise violet wheat white whitesmoke

yellow yellowgreen

Nota: Para escribir comentarios que solo se podrán visualizar en el código fuente se utiliza la siguiente estructura:

20

<!—comentario --> Ejemplo: Código fuente <html> <title>mi página web </title> <head><h1>Empresa</h1></head> <br><br> <!- - dos saltos de línea -- > <body> <font color = “red”>Amigo</font> </body> </html> Visualización en la página web Empresa Amigo Cabe decir que los colores también pueden definirse como decimales es decir: Se puede invocar un color con ayuda de los números hexadecimales. Los número hexadecimales son: 1,2,3,4,5,6,7,8,9,a, b, c, d, e ,f, utilizando la combinatoria de 6 números de ellos acompañados de símbolo numeral se puede obtener un algún color deseado. #RRGGBB Cabe destacar que los dos primeros número simbolizan el color rojo, los otros dos números es decir los del medio simbolizan el color verde y los últimos dos simbolizan el color azul. La combinatoria de todos, con el mayor número de los hexadecimales (“f”), da como resultado el blanco es decir <font color =”#ffffff”> para obtener el negro se deshabilitan todos los números con el menor número hexadecimal el (“0”) es decir: <font color =”#000000”>, Tu puedes obtener colores sorprendentes con las combinaciones de seis números hexadecimales...aquí hay algunos......

Colores Green = "#008000" Silver = "#C0C0C0" Lime =

"#00FF00"

21

Gray = "#808080" Olive = "#808000"

White = "#FFFFFF" Yellow = "#FFFF00"

Maroon = "#800000" Navy = "#000080"

Red = "#FF0000" Blue = "#0000FF"

Purple = "#800080" Teal = "#008080"

Fuchsia = "#FF00FF" Aqua = "#00FFFF"

Nota Estos colores mediante font se aplican al texto, si por x ó y motivo se digita un color mediante un número hexadecimal con más de seis números, el Navegador sólo toma en cuenta los primeros seis número o si se digitan menos de seis letras o números entonces el navegador interpretara los hexadecimales que hay como otros colores. Ejemplo. Código fuente: <font color = “#0000ff”>texto de prueba </font> Visualización de página web texto de prueba

________________________________________________ <font face = “Arial”></font> Esta etiqueta tiene un atributo denominado face el cual invoca el tipo de letra que se desea visualizar en la página web. Hay que tener especial cuidado en colocar los diversos tipos de letras puesto que no todos los usuarios cuando entre a la página en Internet pueden tener el tipo de letra en el computador por lo tanto la página web no se mostraría como es. Por ello hay que tener cuidado de no invocar un tipo de letra de otro mundo que sólo la tengas tú en tu computador, si deseas ver que tipo de letras tienes sigue esta ruta. Mi PC + C + Windows + Fonts Ejemplo

22

Código fuente: <center><h1><font face = “impact”> texto de prueba </font> </h1> </center> Visualización de página web

texto de prueba

NOTA: Te recomiendo que no invoques tipos letras extraños, o no por lo menos hasta que no sepas exportarlos en html dinámico.

________________________________________________ NOTA: En html es indiferente si lo codificas en mayúsculas o minúsculas <font size = “número”></font> Como se ve aparece una atributo en la etiqueta font llamado size la cual se le puede asignar del uno hasta el 7 y va a determinar la altura de la fuente donde <font size = 1> es valor más pequeño y <font size =7> será el valor más grande, es inverso a las etiquetas <h1> pero sin negrilla... Ejemplo Código fuente <font size =”1”>Mario</font><br> <font size =”7”>Mario</font> Visualización en la página web Mario Mario Debes tener en cuenta que desde ahora en adelante ya puedes ir jugando con los códigos y atributos es decir: Nota No debes confundir los atributos de una etiqueta con los atributos que se le dan al texto. Nota También para asignarle un valor al size se puede utilizar el + para incrementar la dimensión o – para decrementar la dimensión. Ejemplo Código fuente: <font size = “+4”>mario</font><!- - lo incrementa el doble- -> Resultado: 23

mario A continuación se quiere demostrar como combinar los diferente atributos: El efecto a través de códigos que se quieres realizar es el siguiente. Un texto de color Morado con tipo de letra impact y un tamaño de 7. es decir así: Amigo Mario El código fuente del anterior efecto puede ser de la forma más larga así: 1<html> 2 <title>mi página web</title> 3 <head> <font color=”fuchsia”><font size=”7”><font face=”impact”>Amigo 4. Mario</font></font></font> </head> 5</html> El anterior código es uno de los ejemplos en la cual no se puede codificar así de esta forma puesto que se puede abreviar con mayor estética el código. Explicación del anterior código

1. línea 1 Es la etiqueta HTML no es necesaria pero se coloca para hacer referencia al código html.

2. línea 2<title></title> etiqueta para dar el título en el estatus superior de la web

3. línea 3 En <head>la cabecera se abren tres etiquetas con tres atributos diferentes; para obtener el efecto deseado en el texto. “no se debe hacer por estética” al final de esta línea se encuentra la el texto que va a recibir el formato según las tres anteriores etiquetas

4. línea 4 se muestra el texto que también va ser afectado, en esta línea se cierra la etiqueta <font> tres veces puesto que se abrió 3 veces es decir </font>, si no se cierra tres veces se corre el riesgo que texto o la información que se escriba contiguamente sufra los efectos de las tres etiquetas font.

Forma correcta 1<html> 2 <title>mi página web</title> 3 <head> <font color=”fuchsia” size=”7” face=”impact”>Amigo Mario</font> 4. </head> 5</html> 24

La línea 3 muestra la cabecera <head> conjuntamente muestra sólo una etiqueta “<font>” con tres atributos color, size, face al lado se ve el texto y sólo se cierra la etiqueta font puesto que solo se abrió una vez. El efecto es el mismo pero con menos cantidad de código. Amigo Mario

Filas <hr>

Líneas horizontales en la página web Para lograr el efecto de líneas se escribe la etiqueta: Código fuente <hr> <! - -no hay necesidad de cerrarla -- > visualización en la página web

NOTA Por defecto si se utiliza la etiqueta vacía <hr> la línea cubre el 100 por ciento de la página web, existen un atributo para reducir o aumentar la altura de la línea, este atributo también se utilizan en la altura de la imagen, tablas y muchas cosas más que en capítulo 2 se verán. Los dos atributos son width (“ancho ”) y size (“altura”). La forma de utilizar estos atributos es la misma que el font La estructura seria así: <hr width = “número” size = “número”>, donde dice número se puede colocar un número y por defecto este número se mide en puntos en algunos elementos, también el tamaño se puede colocar en porcentajes. Tabla de unidades de medida.. Tipos de unidades absolutas: pt: puntos, pc: picas, px: pixels, in: pulgadas, mm: milímetros, cm:

ntímetros, ce Tipos de unidades relativas: em: la altura de la fuente, ex: la mitad de la altura la fuente, % porcentaje

25

NOTA Las medidas de unidades que más se utilizan son el % “porcentaje” y los px “píxeles”, la gran diferencia es que cuando usamos el porcentaje es denominada una medida relativa porque cuando se usa en cualquier elemento de una página web su tamaño depende de la resolución y tamaño del monitor y configuración de colores a cambio una medida en píxeles siempre será absoluta es decir el tamaño que se aplique siempre será el mismo sin importar el tamaño del monitor. NOTA las unidades de medida se aplican a las imágenes, gifs , frames y demás Normalmente con el width “anchura” y height “altura” Ejemplo Código fuente: <hr width = "50%"> <hr width = "315px"> Visualización en la página web

NOTA: En algunos navegadores por defecto la línea se centra Ejemplo para aumentar la altura de la línea. Código fuente <hr width="50%" size=10%> <hr width="315px" size=8> Visualización en la página web

Como colocarle color a la línea <hr> Existe un atributo llamado color que sirve para poner color en una línea La estructura es: <hr color = “nombre_en_inglés_del_color”> Tomando el código anterior para colocarle color seria así:

26

Código fuente <hr width="50%" size=10% color= “blue”> <hr width="315px" size=8 color= “aqua”> NOTA: Existen tres atributos en cada etiqueta <hr>

Existe además un atributo que va permitir alinear la línea ya definida, a la izquierda “left”, a la derecha “right” o al centro que en algunos navegadores es por defecto, se utiliza el center, El atributo que va a permitir alinear la línea es align. Estructura <hr align =”lado_que_se_desea_en_inglés”> Ejemplo Tomando el código anterior para colocarle color seria así: Código fuente <hr width="50%" size=10% color=”blue” align=”left”><!- - alinea a la izquierda -- > <hr width="315px" size=8 color=”aqua” align=”right”> <!- - alinea a la derecha -- > Visualización en la página web

NOTA El atributo align también sirve para alinear textos, imágenes, gif, etc, Se pondrá en practica en capítulos superiores. Por ultimo el atributo “noshade” que pone un color plano al <hr> Estructura <hr noshade> Ejemplo Código fuente <hr>

27

<br>a diferencia de < - - br es un salto de línea - -> <hr noshade> Visualización en la página web

a diferencia de

NOTA Cuando se utiliza <hr> se produce un salto de línea al igual que el <br> <br> La etiqueta <br> es un salto de línea y la llaman break se utiliza para separar alguna línea o párrafos, esta etiqueta no se cierra. Por defecto cuando se escribe texto en un editor para hacer una página web llega un momento en que el texto da un salto de línea por defecto. Si se quiere evitar tal hecho se utiliza la etiqueta <nobr> que permite anular el salto de línea por defecto. Ejemplo Código fuente Los límites solo <br> existen en tu <br> <font color = “silver” > <h1>mente</h1></font> Visualización en la página web Los límites solo Existen en tu Mente

<p>

Es la etiqueta utilizada para saltos de párrafo, también se utiliza para alinear un párrafo ya sea a la izquierda (left), derecho(right) o justificado(justify). Para utilizar esta etiqueta se debe utilizar el atributo llamado align. NOTA cuando se utiliza la etiqueta <p> automáticamente hay un salto de línea Esta etiqueta se debe cerrar.

28

Estructura. <p align = “lado_del_párrafo”>párrafo</p> Ejemplo Código fuente <p align = “center”>El código html es un lenguaje de marcado que utiliza etiquetas para <br> dar formato a la información y por medio de esta aplicar el uso del hipertexto que <br>es la organización no lineal de la información, Si practicas constantemente no <br>tienes necesidad de memorizarte los códigos porque ellos van a ser parte de ti. Es <br>un concejo de “amigo”</p> <br> <p align = “justify”>El código html es un lenguaje de marcado que utiliza etiquetas para <br> dar formato a la información y por medio de esta aplicar el uso del hipertexto que <br>es la organización no lineal de la información, Si practicas constantemente no <br>tienes necesidad de memorizarte los códigos porque ellos van a ser parte de ti. Es <br>un concejo de “amigo”</p> <br> <p align = “center”>El código html es un lenguaje de marcado que utiliza etiquetas para <br> dar formato a la información y por medio de esta aplicar el uso del hipertexto que <br>es la organización no lineal de la información, Si practicas constantemente no <br>tienes necesidad de memorizarte los códigos porque ellos van a ser parte de ti. Es <br>un concejo de “amigo”</p> Visualización en la página web

El código html es un lenguaje de marcado que utiliza etiquetas para dar formato a la información y por medio de esta aplicar el uso del hipertexto

que es la organización no lineal de la información, Si practicas constantemente no

tienes necesidad de memorizarte los códigos porque ellos van a ser parte de ti. Es

un concejo de “amigo”

El código html es un lenguaje de marcado que utiliza etiquetas para dar formato a la información y por medio de esta aplicar el uso del hipertexto que es la organización no lineal de la información, Si practicas constantemente no tienes necesidad de memorizarte los códigos porque ellos van a ser parte de ti. Es un concejo de “amigo”

El código html es un lenguaje de marcado que utiliza etiquetas para

29

dar formato a la información y por medio de esta aplicar el uso del hipertexto que

es la organización no lineal de la información, Si practicas constantemente no tienes necesidad de memorizarte los códigos porque ellos van a ser parte de ti.

Es un concejo de “amigo”

NOTA es un error digitar este código: < etiqueta>HHHHHH</etiqueta>, simplemente es error porque al principio no se puede dejar un espacio entre “<” menor que y la etiqueta, si se deja así, en el navegador se visualizaría hasta la etiqueta sin el efecto deseado.

PRE Si se desea mostrar los saltos de línea sin utilizar ninguna etiqueta, si se desea mostrar lo que se escribe en editor exactamente en la web sin tener que usar etiquetas se utiliza la etiqueta <pre>, esta etiqueta se debe cerrar Estructura <pre> texto</pre> ejemplo Código fuente <pre> este es un texto preformateado </pre> Visualización en la página web Este es un texto preformateado NOTA esta etiqueta es poco utilizada porque el tipo de letra es muy feo y además dentro del bloque que contienen la etiqueta <pre> no permite la mayoría de etiquetas del html. 30

<body>

Esta etiqueta va a definir el cuerpo de la página web por medio de párrafos, animaciones, gif y demás. NOTA En el código fuente, se puede escribir texto y aplicar las etiquetas donde se quiera, ya se arriba del <html>, o del <title>, lo recomendable y por estética del programa es que el texto vaya dentro del <head> o el <body>

COMO DAR COLOR DE FONDO A MI WEB

Se utiliza el atributo llamado bgcolor para invocar un color Estructura: <body bgcolor = “color_en_inglés”> Ejemplo <body bgcolor = “blue”> < -- puede ser en hexadecimal -- > Esta página es de color azul </body>

Visualización de página Web

31

NOTA: Los colores se pueden definir en inglés o en hexadecimal y son los mismos que se vieron con la etiqueta <hr>

Hay una forma de colocar todo el texto de un color, sin necesidad de utilizar el atributo <font>. El color por defecto es el negro Estructura <body text = “nombre_del_color”> Ejemplo Código fuente <body text = “blue”>

Todo el texto de esta <br> página web es <br> de color Amarillo

</body>

32

NOTA IMPORTANTE Si se desea codificar una página web con fondo de un color, texto de un color, NO se debe volver a repetir el <body>, Ejemplo <body bgcolor =”red”><body text=”blue”> Amigo mío

esto no se debe hacer porque no es estético</body></body>

La forma correcta es: <body bgcolor = “red” text= “blue”>Amigo Mio</body> Nótese que sólo se utiliza la etiqueta <body> acompañado de dos atributos y la etiqueta se cierra una sola vez Cuando se crea una página web por defecto se produce un pequeño espacio de 10 píxeles entre el borde izquierdo, superior y derecho del navegador con respecto a la página web. Este espacio se puede modificar con tres atributos que le pertenecen al <body> Son: leftmargin, rightmargin, topmargin. Estructura <body leftmargin = “número_px” rightmargin = “número_px” topmargin = “número_px”> </body> Ejemplo:

33

Una página web con un espacio a la izquierda, derecha y superior de cero, con un color de fondo negro y texto en color lima. Código fuente: <html> <body bgcolor="#000000" leftmargin=0px rightmargin=0px topmargin =0px text="lime"> Aquí va el contenido de la página web </body> </html> Visualización de la página web.

NOTA Es muy importante entender que no es una camisa de fuerza poner los atributos de una etiqueta en orden es decir es los mismo

<body bgcolor = “blue” text= “lime”> que <body text = “lime” bgcolor = “blue”>

NOTA En la mayoría de los atributos no es necesario las comillas.

34

UNA IMAGEN DE FONDO DE LA PAGINA WEB

Para colocar una imagen de fondo en la página web fundamentalmente lo principal es tener la imagen guardada en la misma carpeta que esta la página web y conocer su extensión, de lo contrario la imagen no quedaría de fondo en la web y a cambio queda el color blanco que es por defecto.

La estructura para hacer que una página web tenga una imagen de fondo es:

<body background = “nombre_de_la_imagen.extensión”> Background es un atributo de la etiqueta <body> que permite el llamado a la imagen, luego se coloca “=” igual y el nombre de la imagen con su respectiva extensión “gif, jpg, jpe....” . NOTA Si se desea ver la extensión de la imagen, damos un click derecho en la imagen + propiedades y se encuentra la extensión. Ejemplo Se supone que la imagen con nombre textura y extensión .jpg

La imagen es Código fuente <body background = “textura.jpg”> Visualización

35

NOTA Si la imagen es muy pequeña y si se coloca como imagen de fondo esta se repetirá tantas veces hasta cubrir todo el fondo de la página web.

MARCA DE AGUA

Este efecto se aplica cuando se tiene una imagen como fondo de página. Normalmente cuando se crea una página web y respecto a la altura es larga, se activan las barras de desplazamiento ubicadas en la parte derecha de la página web, si se desplaza la página ya sea hacia arriba o abajo la imagen de fondo se desplaza proporcionalmente al texto. Si se desea dejar el fondo estático y al desplazar la página solo se mueva el texto, se utiliza el atributo bgproperties y se le asigna el valor de fixed, es decir: Estructura <body background= “imagen.extencion” bgproperties = “fixed”> Otras etiquetas que se utilizan para el formato de la información: Nota Los estilos se pueden combinar entre sí obteniendo cualquier efecto deseado. Ejemplo <ADDRESS> Más que todo se utiliza para especificar direcciones electrónicas <BLOCKQUOTE> Esta etiqueta deja una sangría <CITE> Indica el título de una película o un libro. <CODE> Es el tipo de letra que se utiliza en el Block de Notas,"código fuente"<DFN> Ejemplo Especifica una definición.<EM> Se utiliza para hacer énfasis <KBD> El tipo de letra es el Texto introducido desde el teclado.<SAMP> Es el mismo que la anterior <STRIKE> Este texto esta tachado <STRONG> Este texto es resaltado 36

<VAR> Es la misma que la cite Todas las anteriores etiquetas se deben cerrar “</etiqueta>” de lo contrario el efecto que se desea quedará desde donde se invoca hasta el final del código <B> Es la etiqueta de negrilla se debe cerrar <I> Es la etiqueta de cursiva se debe cerrar <u> Esta etiqueta es subrayado <TT> Es la etiqueta de tipo fuente Maquina de escribir , se debe cerrar <BLINK> Hace que el texto parpadee NOTA <blink> solo se puede visualizar en netscape <SUB> Etiqueta para dar un índice inferior <SUP> Etiqueta para dar un índice superior

<BIG> Permite el gran tamaño del texto “Nestcape 2.0” <SMALL> Permite el pequeño tamaño del texto “Netscape 2.0”

CARACTERES ESPECIALES Me imagino que mi querido lector ya se habrá dado cuenta que cuando uno esta escribiendo en el código fuente así se dejen diez espacios entre dos palabras, en el navegador sólo aparecerá un espacio, al menos que se utilice la etiqueta <pre>, existe un carácter especial que es interpretado como un espacio. Su estructura es Código fuente La vida es muy bella Visualización en página web La vida es muy bella NOTA Es muy importante tener en cuenta el punto y coma en los caracteres especiales. A continuación se mostrarán los caracteres especiales, pero antes de ello no esta de más saber para que se utilizan, un ejemplo típico son las tildes, cuando se utiliza una tilde directamente en los códigos fuentes, algunos navegadores no interpretan la tilde y en su lugar colocan otro símbolo.. 37

Como hacer tildes con los caracteres especiales: Se debe colocar & + la letra que se desea colocar la tilde + acute; á = á ó = ó é = é ú = ú í = í NOTA El carácter especial se debe escribir en el código fuente Tabla de los caracteres especiales Carácter especial Para la n ñ n Ñ Ñ Para los símbolos < y > & < Signo < (menor que) > Signo > (mayor que) & Signo & (ampersand) " Se mostrará el signo de comillas "

Acento grave à à À À è è È È ì ì Ì Ì ò ò Ò Ò ù ù Ù Ù Otros símbolos ü ü Ü Ü î î Î Î

Símbolos especiales ç ç Ç Ç ® ® Símbolo de registrado 38

© © Símbolo de Copyright. Los caracteres especiales también se pueden escribir con la siguiente sintaxis

En números Carácter

En números Carácter

! ! " " # # $ $ % % & & ' ' ( ( ) ) * * + + , , - - . . / / : : ; ; < < = = > > ? ? @ @ [ [ \ \ ] ] ^ ^ _ _ ` ` { { | | } } ~ ~ ¡ ¡ ¢ ¢ £ £ ¤ ¤ ¥ ¥ ¦ ¦ § § ¨ ¨ © © ª ª « « ¬ ¬ ® ® ¯ ¯ ° ° ± ± ² ² ³ ³ ´ ´ µ µ ¶ ¶ · · ¸ ¸ ¹ ¹ º º » » ¼ ¼ ½ ½ ¾ ¾ ¿ ¿ À À Á Á Â Â Ã Ã Ä Ä Å Å Æ Æ Ç Ç È È É É Ê Ê Ë Ë Ì Ì Í Í

39

Î Î Ï Ï Ð Ð Ñ Ñ Ò Ò Ó Ó Ô Ô Õ Õ Ö Ö × × Ø Ø Ù Ù Ú Ú Û Û Ü Ü Ý Ý Þ Þ ß ß à à á á â â ã ã ä ä å å æ æ ç ç è è é é ê ê ë ë ì ì í í î î ï ï ð ð ñ ñ ò ò ó ó ô ô õ õ ö ö ÷ ÷ ø ø ù ù ú ú û û ü ü ý ý þ þ ÿ ÿ

IMÁGENES Una de las grandes características del <html> es la introducción de elementos multimedia como sonidos, imágenes. Se puede introducir imágenes con extensiones como jpg, png, xbm, gif y otros. El formato más usual es el gif, porque casi todos los navegadores lo aceptan. Para incluir imágenes en una página web se utiliza la etiqueta img, esta etiqueta no se cierra. Hay que tener en cuenta que la imagen debe estar grabada en la misma carpeta donde esta guardada la página web, de lo contrario cuando se invoque en la página web aparecerá un cuadro con una x. También se debe tener en cuenta que se debe saber el nombre de la imagen con su respectiva extensión. La estructura para invocar una imagen es: <img src = “nombre_de_imagen.extención”>

40

donde src es el atributo que indica el fichero de imagen que se incluirá en el documento. Se desea llamar la imagen amigomilitar.jpg en la página web

Código fuente: <html> <title>Vida Militar</title> <head><h1>Mejores Años</h1></head> <body> <center><img src = “amigomilitar.jpg”></center> </body>

</html>

Visualización en la página web:

41

NOTA La etiqueta <center> también me permite centrar algunos objetos como imágenes, videos.

ATRIBUTOS DE LA ETIQUETA IMAGEN

La imagen se le puede aumentar la altura o disminuir, se puede aumentar su anchura o disminuir con dos atributos que ya se han visto anteriormente. El width (“ancho”) y el height(“altura”).

Estructura:

<img src = “nombre_imagen.extención” width = “número” height = “número”>

Ejemplo:

Código fuente:

<img src= “amigomilitar.jpg” width= “80%” height= “15%”> Visualización en la página web

Código fuente:

<img src= “amigomilitar.jpg” width= “30%” height= “70%”>

42

Visualización en la página Web

NOTA las medidas las puedes dar a tu gusto , en porcentaje, en píxeles en lo que quieras. NOTA Es muy recomendable definir las dimensiones de la imagen “height, altura y width, ancho”, puesto que permite que una página web cargue más rápido. Cuando se definen las dimensiones de una imagen, en la página web se separa el espacio exacto y permite que cargue el texto, cuando no se definen las dimensiones de una página web antes que cargue el texto se cargan las imágenes primeros luego el texto. Texto alternativo: El texto alternativo es parecido a un evento, es decir cuando se pasa el mouse por la imagen, se despliega un texto la estructura es: <img src = “nombre_imagen.extención” alt = “texto desplegable”> Cuando la imagen no se muestra por x ó y motivo en vez aparece en el cuadro con la x el texto alternativo. Border Es la etiqueta que permite crear un borde de color negro al contorno de la imagen, el color de este borde no se puede cambiar. Estructura <img src = “nombre de la imagen.extensión” border= “número”>

43

Ejemplo Código fuente <html> <title>Vida Militar</title> <head><h1><u>Mejores Años</h1></head> <body>

<center><img src ="m.jpg" border=10 width=50%" height="50%"></center>

</body> </html> Visualización en la página web

NOTA Se pueden combinar los diferentes atributos en cualquier orden de la etiqueta img es decir: <img border= “10” src = “amigomilitar.jpg” width= “50%” height= “20%” alt = “Mario”> Cuando se incluye una imagen en una web, por defecto el texto queda debajo de ésta, existe un atributo que alinea el texto con respecto a la imagen, ese atributo es el align. El align recibe seis valores diferentes (“top, middle, bottom, texttop, absmiddle, absbottom”). La estructura es:

44

<img src = “ imagen.extensión ” align = “lado_de_alineacion”> Explicación de los atributos del align align = TOP alinea el texto al lado de la imagen en la parte superior, cuando se utiliza el TOP hay que tener en cuenta que TOP se alinea al tamaño del primer carácter de la línea. align = middle la línea el texto al lado de la imagen en la parte central, cuando se utiliza el middle hay que tener en cuenta que con MIDDLE se coloca el texto a partir del punto medio. align = bottom la línea el texto al lado de la imagen en la parte inferior Alineaciones avanzadas de algo con respecto a una imagen, NOTA Se debe tener en cuenta que estas alineaciones son el punto fino y real pero sólo funcionan con los navegadores más avanzados align = texttop Alinea algo al lado de la imagen en la parte superior align = absmiddle Alinea algo al lado de la imagen en la parte central align = absbottom Alinea algo al lado de la imagen en la parte de abajo ejemplo Código fuente <img src = “terminator.jpg” align = “top”>Este es un humano programado para ganar <br>informática y reestructurar la programación <br> (“arriba”) <br clear= “left”> <br><br> <img src = “terminator.jpg” align = ”middle”>Este es un humano programado para ganar <br>informática y reestructurar la programación <br>(“centro”) <br clear=”left”> <br>br> <img src = “terminator.jpg” align = ”bottom”>Este es un humano programado para ganar <br>informática y reestructurar la programación (“abajo”) Visualización en la página web

Este es un humano programado para ganar informática y reestructurar la programación (“arriba”)

45

Este es un humano programado para ganar informática y reestructurar la programación (“centro”)

Este es un humano programado para ganar

informática y reestructurar la programación (“abajo”)

NOTA Como podréis ver se a utilizado un nuevo atributo en una etiqueta ya vista llamada clear que significa limpiar, este uso de este nuevo atributo es simplemente porque cuando se alinea el texto respecto a una imagen todo el texto que sigue también se alinea hasta encontrar el fin de la imagen, si sólo se quiere alinear una parte del texto se debe colocar al final del texto <br clear = “left”> o <br clear=all> que significa que salte hasta encontrar el principio de una línea debajo de la imagen. Espacio entre el texto y una imagen Aplicando los atributos (“top, middle, botom”) por defecto queda un espacio entre la imagen y el texto alineado, este espacio se puede modificar con los dos atributos de img denominados hspace y vspase. Con el atributo hspace se indica el espacio horizontal entre la imagen y el texto y con vspace se indica el espacio vertical entre la imagen y el texto. Estructura <img src = “nombre.extensión” align = “left” hspace = “20px” vspace = “20px”> NOTA Por defecto las medidas del hspace y el vspace es en píxeles 46

NOTA Si se desea introducir un gif animado a la página web se usa la misma etiqueta pero en el nombre de la extensión es con gif. Estructura <img src = “nombre_animación.gif”> PRECARGA DE IMAGEN Cuando se tiene una imagen de mucho peso y se demorara en cargar, es conveniente tener la misma imagen de baja resolución para que se cargue primero, esto se logra con el atributo lowsrc , hay que tener en cuenta que este efecto sólo se notará si la primera imagen es de mucho peso en comparación de su semejante de baja resolución o si la banda es muy estrecha, y también el efecto se puede lograr con un Script. El efecto es muy sencillo, primero se carga la imagen de baja resolución hasta que cargue la principal. La estructura es la siguiente: <img src =“imagenpesada.jpg” lowsrc=“imagenmalaresolución.jpg”> También se puede hacer con extensión .gif NOTA Si no sabes bajar la resolución de una imagen búscate un programa medio decente de diseño. Te aconsejo el Photoshop, el Paint Sho Prop u otro, generalmente se baja la resolución cuando se definen las dimensiones de la imagen. DYNSRC Si vas a incrustar una secuencia de video o un formato de realidad virtual (vrml) Debes utilizar el atributo DYNSRC Estructura: <img DYNSRC = “nombre.extensión”> Si se usa también se puede especificar las veces que se repetirá con el atributo loop. Estructura <img DYNSRC = “rutaconextención” loop = “número_de_veces”> Para que se reproduzca el video infinitas veces se coloca el loop=infinite Un nuevo atributo de La etiqueta img es controls start que recibe dos valor o mouseover o fileopen, simplemente el mouseover indica que cuando pase el mouse por el video se reproduzca y el file open que es por defecto, se abre cuando carga . Estructura: 47

<img DYNSRC= “Fichero_sonido” loop=1 Controls start=mouseover> El video también se puede alinear como una imagen y también se le pueden definir sus dimensiones NOTA El atributo DYNSRC sólo la soporta el Internet Explorer Si has llegado hasta esta parte del módulo te aconsejo que te devuelvas que practiques cada etiqueta con sus respectivos atributos, no uses la regla del copypaste. Copiar y pegar, trata de visualizar el código y trátalo de hacer tu mismo.............

Actividad

Hacer una página web con mínimo 6 párrafos, cada párrafo debe tener una imagen que se debe alinear de 6 diferentes formas, donde la primera imagen debe ser la más pequeña y la última la más grande, tres imágenes deben tener una imagen auxiliar es decir de precarga. Todas las imágenes deben tener un borde. La página debe tener un encabezado que se destaque y se diferencie del cuerpo. Cada párrafo debe estar dividido por una línea horizontal, en total deben haber 5 líneas horizontales de diferentes colores y tamaños La página web debe tener formato de la información y una imagen de fondo con marca de agua. No olvides seguir la estructura para una página web, es muy importante aplicarla. <html> <title>un título</title> <head>página web</head> <body> párrafos imágenes animaciones </body> </html> 48

CAPITULO 2

HIPERENLACE Antes de entrar en el tema de los enlaces hay que tener claro dos conceptos fundamentales el hipertexto y “URL”, el Hipertexto es la organización no línea de la información lo que quiere decir que la información no va estar plasmada en un sólo sentido. Con la inclusión de imágenes, sonidos, animaciones, y demás aparece el concepto de hipermedia. Concepto de hiperenlace: La principal característica del lenguaje HTML radica en su capacidad de establecer enlaces de hipertexto entre regiones de texto, imágenes y animaciones de un documento con otro o en el mismo documento. En otras palabras que por medio de algún texto, imagen o animación se puede ir a otra página web y no solo eso, por medio de los hiperenlaces se pueden invocar documentos de Word, Exel, Power Point, etc. Los enlaces son el principal éxito de una página web, principal característica del hipertexto. URL se emplea para definir el documento de destino de los hiperenlaces, para referenciar los gráficos y cualquier otro fichero que se desee incluir dentro de un documento HTML. URL es el acrónimo de (Uniform Resourse Locator), localizador uniforme de recursos y permite localizar o acceder de forma sencilla cualquier recurso de la red desde el navegador de la WWW. Nótese que inconscientemente ya se a aplicado la URL anteriormente. Por ejemplo al incluir una imagen en una página web se define la siguiente estructura. <img src = “nombre_imagen.extensión”> En realidad la estructura es: <img src = “URL”> 51

DIRECCIONES LOCALES Las direcciones locales son los enlaces que se hacen en páginas web propias del diseñador. Estructura de un hiperenlace por medio de un texto: <a href = “URL”>texto</a> Estructura de un hiperenlace por medio de una imagen: <a href = “URL”><img src= “URL”></a> Estructura de un hiperenlace por medio de una imagen: <a href = “URL”><img src= “URL”></a> <a> es la etiqueta que permite definir enlaces y utiliza el atributo href para invocar la URL que en este caso como se van a trabajar direcciones locales entonces se puede definir la estructura como: nombredepágina.html. La etiqueta <a> se debe cerrar y contener sólo el texto que se desea enlazar Enlaces por medio del texto Antes de empezar. Sigue los siguientes pasos

1. Crea una página web con nombre de index y guárdala en mis documentos

2. Crea otra página web con nombre web1 y guárdala en mis documentos A continuación se va hacer un enlace de una página a otra por medio de texto

3. Abrir el código fuente de index.html NOTA Si Pepe quiere ir a la casa de Juana. Que necesita? Exacto, bien pensado, la dirección, lo mismo es con los enlaces para poder abrir otra página se necesita la dirección que se definir por el nombre de la página y su extensión, que en este caso es .html 52

Código fuente de index <html> <head><title>mi primer enlace</title></head> <body> texto </body> </html>

4. Colocar la estructura de un enlace por medio de la etiqueta <a href = “URL”>

<html> <head><title>mi primer enlace</title></head> <body> <a href= “URL”>texto</a> </body> </html>

5. Ponemos el URL <html> <head><title>mi primer enlace</title></head> <body> <a href= “web1.html”>texto</a> </body> </html>

6. Archivo + guardar y se actualiza la página web Si el proceso quedó bien en la página el texto debe quedar de color azul y cuando se haga click sobre éste debe cargar la página web1 Para hacer un enlace a través de una imagen o un gif, sólo se cambia el texto por la inclusión de la imagen con extensión .jpg si es imagen o .gif si es animado o un dibujo Es decir: En vez de texto se debe colocar <img src = “URL”> con su respectiva extensión Si se hace un enlace con una imagen por defecto queda un borde de color azul, este borde se puede eliminar con un atributo que ya se conoce border = 0 53

Estructura: <a href= “URL”><img src = “URL” border = 0></a> Por defecto cuando se trabaja con enlaces y nos son visitados es decir no se han presionado son de color azul, cuando se presionan y son visitados su color cambia a morado por defecto. Estos colores se pueden modificar con tres atributos del <body> que son alink, vlink, link. Explicación: Link con este atributo se cambia el color de un enlace no visitado Alink con este atributo se cambia el color de un enlace al presionarlo Vlink con este atributo se cambia el color de un enlace visitado Estructura: <body link = “color” alink = “color” vlink = “color” > NOTA Como se ha podido notar cuando se presiona un enlace la página de destino se carga sobre la que estaba, esta acción se puede modificar para que la página de destino se abra en otra ventana. Por medio del atributo target. Este atributo se debe escribir en la etiqueta <a> Estructura: <a href = “URL” target= “top”> Se debe asignar TOP al target El atributo Target se explicará más adelante. COMO QUITAR EL SUBRAYADO DE LOS ENLACES Existe un atributo llamado STYLE que define estilos, en este caso se puede utilizar para quitar el subrayado y si se desea colocarlo arriba. El style es propio del html dinámico. Estructura: Enlace sin subrayado <a href=“URL” style = “text-decoration: none”>texto o imagen</a> 54

Se utiliza el text decoration que permite introducir una asignación para eliminar la línea del enlace. ANCLAS (ENLACES DENTRO DE UNA PAGINA) Es muy utilizado, por ejemplo para hacer un glosario en una página web, donde en la parte superior de la página pueden estar solo las letras y en todo el cuerpo de la página están las palabras de tal modo que cuando se haga click en la parte superior de una palabra la página se desplace hacia abajo donde esta la palabra con su respectivo significado. Sirve para indicar puntos dentro de un documento que se puede alcanzar directamente. Marcará las distintas zonas de un documento. La forma de indicarlo es: <a href = “#marcador”>texto</a> <a name = “marcador”></a> En esta ocasión no se coloca extensión ya que se va a hacer un enlace dentro la misma web, es muy importante el carácter “#” ya que sirve para reconocer el marcador, esta dirección: <a href = ”#marca”>texto</a> se debe colocar donde se desea hacer clic, en el ejemplo anterior se colocaría en la parte superior del código fuente, posteriormente en el código fuente nos desplazamos hacia abajo y se busca donde se quiere llegar y se coloca <a name = “marca”></a> es decir: <a href = “#marca”>abajo</a> Parte superior de la página Cuando se presione en el texto abajo Automáticamente se muestra la parte de debajo de la página <a name =”marca”></a> Parte inferior También desde otra página web se pueden hacer enlaces con anclas, es decir de tal modo que al presionar un enlace me lleve a otra página y además la página quede ubicada en la parte superior o inferior o en el centro o en donde se desee. Estructura Retomemos las páginas ya creadas index y web1 55

Se desea que al hacer click en un texto de index aparezca la página web1 en la parte inferior. En el código fuente de index se debe escribir <a href = ”web1.html#marca”>ir a web1 parte de abajo</a> Obviamente en el código fuente de web1 en la parte inferior se debe escribir <a name = “marca”></a> NOTA el marcador se puede llamar como se desee, no necesariamente debe ser marca

ACTIVIDAD Crear 3 páginas web en la cual de la 1 pueda ir a la 2 y de la 2 a la 3 de igual forma de la 3 a la 2 y de la 2 a la 1 Como usar los enlaces para enviar un mail Para texto <a href = “malito://[email protected]”>texto </a> donde amigo es el nombre o alias del amail. Para enlazar un texto o una imagen para enviar un mail simplemente se escribe malito Para imagen <a href=“malito://[email protected]”><img src = “URL” > Enlace al email</a> malito: Se utilizará para enviar correo electrónico Como subir programas para que los descarguen Simplemente el archivo debe de estar comprimido es decir con extensión .zip y se hace el enlace. Es decir: <a href = “archivo.zip”>descarga aquí</a> Por medio de los enlaces se puede abrir el Word, Exel, Power Point. Solo se necesita tener el archivo guardado. Explicación. <a href = “archivo.doc”>archivo word</a> <a href = “archivo.xls”> archivo excel> 56

<a href = “archivo.ppt”> archivo power point</a> <a href = “archivo.txt”> archivo Block de Notas</a> Como reproducir Sonido con Enlaces Simplemente se debe conocer la extensión de archivo de sonido y se hace el enlace <a href = “archivo.extención”>música aquí</a> Generalmente las extensiones más utilizadas son: mid, wav, mp3

ARCHIVOS SOLAPADOS Los archivos solapados son cierres intercalados de etiquetas lo cual hace que no funcionen es decir: <h1><center>hola Mario</h1></center> Nótese que se abre <h1> y luego <center> lo lógico es que se deba cerrar primero el </center> y luego el <h1> Conclusión La primera etiqueta que se abre es la última en cerrar, se debe conservar este principio En algunos casos si funcionan los archivos solapados.

MAPAS SENSIBLES

Es una imagen en la que se definen diversas zonas que activan distintos hiperenlaces, al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define. La imagen se dividirá en distintas áreas que definirán documentos a los que es posible acceder. En otras palabras en una misma imagen pueden haber diversos enlaces que se definen a través de un rectángulo, círculo, polígono, un punto o por defecto. Estas figuras definen el área de la imagen que contendrá el enlace. Estructura del mapa sensible: <img src = “URL” usemap =”#nombre”> <map name= “nombre”>

57

<area shape= “Region del area” cords= “x,x,x,x,” href= URL= “algo.html” alt= “texto”>

</map> Explicación: Usemap es un Nuevo atributo que permite definir que la imagen va ser un mapa donde pueden haber áreas, al usemap se le debe asignar un nombre, se debe tener en cuenta el carácter “#” porque entonces no funciona. Una nueva etiqueta <MAP> sirve para identificar el nombre del mapa que actúa sobre la imagen, debe ser el mismo que se escribió en el usemap pero no es necesario volver a escribir “#” La etiqueta <area> se utiliza para definir el área, las coordenadas del área dentro de la imagen el hiperenlace y un texto alternativo.

Región del Area

Para poder introducir una región de area se utiliza el atributo shape:, que puede tener los siguientes valores: Shape= “rect” (rectangulo) Shape= “circle”(círculo) Shape= “poly”(poligono) Shape= “point”(punto) Shape= “defaut”(area indefinida)

Coordenadas

Coords = Son las coordenadas que definen el espacio de la región, están expresadas en pixels y dependen del tipo de la región. Como se expresan las coordenadas de una región

• Shape = “rect” coords=”X1, Y1, X2, Y2”, siendo X1, Y1 las coordenadas de la esquina superior izquierda y X2, Y2 las coordenadas de la esquina inferior derecha.

• Shape = “circle” coords= “X1, Y1,r ” siendo X1, Y1 las coordenadas del

centro del círculo y r el radio.

58

• Shape = “poly” coords= “X1, Y1, X2, Y2, Xn, Yn” donde X1, Y1 son las

coordenadas del vértice del polígono, la izquierda superior de la imagen es (1,1).

• Shape = “point” indicará un punto, si en la figura se definen diversos

puntos se activará enlace el punto más cercano al lugar a donde se pulsó la imagen

Ejemplo, imagen llamada vida.jpg

<img src = “vida.jpg” usemap = “#marca1”> <map name= “marca1”>

<area shape= “rect” cords = “0,0,100,100” href=”web1.html” alt=”Mario”>

</map> El anterior código permite que solo en la esquina superior izquierda haya un enlace a una página y un texto alternativo. NOTA Si se quiere otro enlace en la imagen solo es colocar otra etiqueta area entre map

Actividad

Practicar los diferentes tipo de shape

59

LISTAS

Las lista es un forma de organizar la información y son de tres tipos

1. Listas desordenadas (no numeradas) (unordered lists) 2. Listas ordenadas (numeradas) (ordered lists) 3. Listas de definición

1. Las listas desordenadas sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un número. Estructura: Código fuente <UL> <LI> Mario <LI> Amigo <LI> Universidad <LI> Vida </UL>

La lista esta dentro <ul> y cada ítem de la lista debe ir precedida de la etiqueta <li> Visualización página web

• Mario • Amigo • Universidad • Vida

Por defecto se produce un salto de línea entre cada <li> Las listas se pueden anidar: Código Fuente <ul> <li>Mario <li>Olga <ul> <li>Amigo <li>Universidad </ul> </ul> Se puede introducir un círculo, cuadrado o un disco

60

Código fuente <ul type ="circle"> <li>capítulo 3 <li>marquee <li>sonidos <li>bgsound <li>embed </ul> <br> <ul type="square"> <li>capítulo 3 <li>marquee <li>sonidos <li>bgsound <li>embed </ul> <br> <ul type="disk"> <li>capítulo 3 <li>marquee <li>sonidos <li>bgsound <li>embed </ul> Resultado y visualización

o capítulo 3 o marquee o sonidos o bgsound o embed

capítulo 3 marquee sonidos bgsound embed

• capítulo 3 • marquee • sonidos • bgsound • embed

Visualización página Web

61

• Mario • Olga

• Amigo • Universidad

2. Las listas ordenadas se utilizan para presentar cosas en un orden determinado

Estructura: Código fuente <OL> <LI> amigo <LI> amigo <LI> amiguitos <LI> amiguitas </OL> Visualización página web 1.amigo 2.amiguita 3.amiguitos 4.amiguitas por defecto son números, si se quiere hacer listas con letras o con números romanos entonces se utiliza el atributo tape en la etiqueta <ol > Ejemplo En letras, si desea en mayúscula se pone la A <ol type=a> <li>camilo <li>sexto </ol> Resultado

a. camilo b. sexto

En número romanos <ol type=I>

62

<li>camilo <li>sexto </ol> Resultado

I. camilo II. Sexto

No necesariamente debe empezar en 1 o en I o en a, existe un atributo para indicar desde donde se quiere empezar. Ejemplo <ol start=c type=a> <li>camilo <li>sexto </ol> Resultado

c. camilo d. sexto

También se pueden anidar 3. listas de definición: apropiadas para glosarios o definiciones de términos. Toda la lista debe ir englobada entre las etiquetas <DL>y </DL>. Y a diferencia de las dos que hemos visto, cada renglón de la lista tiene dos partes

• el nombre de la cosa a definir , que se consigue con la etiqueta <DT> (definition term)

• la definición de dicha cosa, que se consigue con la etiqueta <DD> (definition definition).

<DL> <DT> concepto <DD> significado <DT> concepto2 <DD> significado2 </DL> Su resultado es: Concepto significado Concepto2 Significado2

63

Las listas también se pueden definir como un menú o un directorio <menu> <li>amigo <li>amigo mío </menu> Resultado

• amigo • amigo mío

<dir>

<li>amigo <li>amigo mío </dir> Resultado

• amigo • amigo mío

La diferencia es el espacio entre el navegador y la página web, se crea como una tabulación.

64

META

Esta etiqueta no tiene cierre Estructura <meta http-equiv = “conten-type” content = “número”> Se utiliza para el refresco del documento, es decir que dentro de un determinado tiempo cargue la misma página u otra, también se utiliza para especificar el contenido de la página la cual se convierten en palabras claves para los buscadores, también se utiliza para especificar el autor y diferentes transiciones de las páginas. Se indicará el número de segundos que deben pasar para que se sustituya la página por otra. La estructura es la siguiente: <meta http-equiv = “refresh” content = “número de segundos”; URL = “url_sustitura”> http-equiv = “refresh” determina la acción en este caso de sustitución content = “número de segundos” tiempo en que se cambia de página URL= “url_sustitura” dirección de la otra página Si sólo se desea refrescar la página actual entonces se escribe: <meta http-equiv = “refresh” content = “númerossegundos”>

NOTA: Hay que tener mucha precaución . Si se sabe que el contenido de la página no va a variar, es improductivo hacerlo, y si se hace contra un servidor, puedes sobrecargarlo. Ésta etiqueta sólo tendrá utilidad en casos muy especiales.

Especificar la propiedad de una página web con META (autor) <meta name = “author” content= “Jorge_Mario_Rincon”> Palabras Claves, la página mejor buscada

65

TRANSICIONES CON LA ETIQUETA META Se recomienda crear dos páginas web para ver los efectos. Para lograr en las entradas de las páginas web diferentes efectos se utiliza la siguiente estructura: <META http-equiv="Page-Enter" CONTENT = "RevealTrans(Duration=1,Transition=0)"> donde http-equiv = “page-enter”, quiere decir página de entrada que va a recibir el efecto, también puede ser page-exit que efecto seria de salida de página. Revealtrans invoca la transición a usar Duration son los segundos en que se va a demorar la transición Transition es el número de transición, existen 23 tipos Ejemplos <META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=1,Transition=3)">

67

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=10,Transition=21)">

Actividad

Probar todas las transiciones con tiempos diferentes, utilizar todos los atributos de una etiqueta en una página web.

68

CAPÍTULO 3

Texto en movimiento Sólo con la etiqueta <marquee> se logra el efecto de movimiento. Sólo funciona en Internet Explorer. Esta etiqueta se debe cerrar. Estructura <marquee>texto que se desplaza</marquee> Por defecto el movimiento es de izquierda a derecha y para facilidad de lectura, puesto que si fuera de izquierda a derecha entonces pondríamos los ojos en una maratón,además, por defecto el movimiento ocupa una línea de la página web Atributos del <marquee> El bgcolor atributo de body también se puede utilizar en el marquee, cuando se utiliza este atributo el fondo de la línea por donde pasa el movimiento cambia de color. Bgcolor <marquee bgcolor = “color_en_inglés”>texto</marquee> NOTA: En vez de texto se puede colocar una imagen para que se mueva Direction Con este atributo se puede especificar para dónde va a ser el movimiento De izquierda a derecha “la maratón” o de derecha a izquierda “por defecto”, también puede ser hacia arriba o hacia abajo Estructura <marquee direction = “left”>izquierda</marquee> <marquee direction = “right”>derecha </marquee> <marquee direction = “up”>arriba</marquee> <marquee direction = “down”> abajo </marquee> También se puede movimiento en diagonal con la combinatoria de los anteriores. Te la dejo de tarea.............. NOTA: Se pueden combinar todos los atributos del marquee en el orden que se desee. 70

Cantidad de movimientos Loop Con este atributo se puede limitar las veces que van aparecer los movimientos. Estructura <marquee loop = “número”>número de movimientos</marquee> NOTA: Al último movimiento el texto o la imagen en movimiento se desaparece. Comportamiento del movimiento EL movimiento al llegar a un extremo desparece y vuelve por el otro con el atributo behavior, se puede rebotar el texto o imagen de un extremo a otro: Estructura <marquee behavior = “alternate”>rebote </marquee> Limitación del espacio del movimiento Con el atributo width y height se puede limitar el recorrido del movimiento, también se puede aplicar un center Estructura <center><marquee width = “número” height = “número” >espaciado</marquee></center> Velocidad del movimiento Atributos : Scrollamount =número #de píxeles que se desplaza, delimita la velocidad, cuanto mayor sea, más lento. Scrolladelay =número Tiempo de movimiento de avance se denota en milisegundos, cuanto mayor sea el número más lento Estructura <marque Scrollamount = número Scrolladelay = número>Amigos Hermanos</marquee>

<bgsound>

71

Esta etiqueta se utiliza para incluir sonidos en una página web, apenas se abra la web, el sonido se reproduce, si por algún motivo la página se minimiza el sonido no se escucha, esta etiqueta no se cierra. Estructura: <bgsound src = “archivo_sonido.extensión”> El bgsound utiliza un atributo para determinar el número de veces que se debe de repetir la canción; es el loop ya conocido. Estructura <bgsound src = “archivo_sonido.extensión” loop = “número de veces” > Si se quiere escuchar la canción indefinidamente se le asigna al loop infinite. Estructura <bgsound src = “archivo_sonido.extensión” loop = “infinite” >

<embed> Es propia del Nestcape pero sirve con el Explorer, sin embargo el Explorer no acepta uno atributos. Esta etiqueta permite incrustar objetos en la web como animaciones .swf, sonidos, videos y otras más. Sirve en los navegadores más recientes. En el embed también se pude utilizar los atributos width y height para definir las dimensiones del objeto a incrustar. Estructura: <embed src = “fichero.extension” width = “número” height = “número”> El atributo loop puede determinar el número de canciones pero en este caso para que sea infinito se debe colocar loop = true Estructura <embed src = “fichero sonido” loop = “número”> Por defecto si se usa la etiqueta <embed> aparece una consola, esta se puede esconder usando el atributo hidden. 72

CAPÍTULO 4 Directorios Superiores, inferiores y de igual nivel Hasta el momento se estaba trabajando en mis documentos en la cual guardábamos toda la información, imágenes, video, animaciones y las páginas Si se diseña una página web y se guarda en mis documentos y si la página tiene muchas imágenes, animaciones , sonidos o videos, todas estas tendrían que estar guardadas en mis documentos lo cual causa desorden de la información, por eso es muy conveniente tener las diferentes informaciones guardadas en carpetas..... Gráfico

Mis documentos

páginas imágenes videos index

web1 sonidos Según el gráfico anterior si se da clic en Mis documentos se abre la carpeta y aparece Páginas, imágenes, videos y la página web index.html, si se da clic en páginas se abre web1 y videos. Para hacer referencia a un sonido o a una imagen que esta dentro de una carpeta o en otro lugar existen tres maneras. Mismo nivel Cuando la imagen que se desea colgar en la web esta en el mismo nivel es decir. Nótese según el gráfico que cuando se abre mis documentos aparece tres carpetas y una página web, entonces se dice que esas carpetas y esa web están en el mismo nivel. Estructura: Se quiere invocar un video desde la página index en el código fuente de index se escribe: <img DYNsrc = “videos/fichero. extensión”>

74

Se escribe el nombre de la carpeta y luego un slash “/” y a continuación si se puede escribir el nombre del video en este caso con su respectiva extensión Nivel inferior Cuando se desea hacer referencia a un objeto que está por debajo de dos carpetas, es decir, nótese según el gráfico que cuando se abre mis documentos aparece tres carpetas y una página web, y luego si se hace clic en la carpeta páginas aparece web1 y la carpeta sonidos, se desea hacer referencia desde index hasta la carpeta sonidos, entonces se habla de nivel inferior. Estructura En este caso se va a referenciar un objeto sonido En el código fuente de index se escribe <bgsound src = “páginas/sonidos/fichero”> Nótese que se escribe primero el nombre de la carpeta que está en el mismo nivel, luego el nombre de la carpeta que está en el segundo nivel y luego sí se escribe el nombre del fichero de sonido con su respectiva extensión. Nivel superior Ahora trabajemos la página llamada web1, cuando se quiere incrustar un objeto en la cual se encuentra alguna carpeta por encima de él se denomina nivel superior, para este ejemplo se necesita llamar una imagen desde la página WEB1 Estructura <img src = “../imágenes/fichero”> Para hacer referencia a una carpeta u objeto superior se utiliza el ../

75

TABLAS

Cuando se van a trabajar tablas se utiliza la etiqueta <table>, se debe cerrar, Se debe tener en cuenta que primero se especifica la fila y luego sus respectivas columnas, siempre pero siempre, primero de deben definir las filas y luego las columnas que hay en esa fila. Una fila se define por medio de la etiqueta <tr> y una columna por medio de la etiqueta <td> o <th>, la diferencia es que el <th> se usa para representar cabeceras es decir título en negrilla. Estructura: Primera Forma: <table> <tr> <td>primera columna <td>segunda columna <tr> <td>primera columna <td>segunda columna </table> Segunda forma: <table> <tr><td>primera columna <td>segunda columna <tr><td>primera columna <td>segunda columna </table> Tercera Forma: <table> <tr> <td> primera columna </td> <td> segunda columna </td> </tr> <tr> <td> primera columna </td> <td> segunda columna </td> </tr> </table> Las tres formas son iguales y el resultado va a ser el mismo, en las formas anteriores se ha trabajado solo con dos filas por dos columnas, La única diferencia entre la primera forma y la segunda forma es la organización del código, es decir, en la segunda forma se ponen las filas junto a las columnas. La diferencia de la primera y la segunda con la tercera es que en la tercera las etiquetas <td> y <tr> se cierran </td> y </tr>, algunos WebMásters utilizan mucho el cierre de columnas y filas, me imagino que da más presentación al código fuente. En conclusión, por las tres formas se llega a lo mismo. Una tabla sencilla donde muestre 3 filas por 3 columnas se visualizará los primeros 9 números: Código fuente <table> <tr> 76

<td> 1 <td> 2 <td> 3 <tr> <td>4 <td> 5 <td> 6 <tr> <td>7 <td> 8 <td> 9 </table> Resultado, visualización página web 1 2 3 4 5 6 7 8 9 Me imagino que te estarás rascándote la cabeza, puesto que no aparece la tabla. En realidad la tabla sí esta ahí. Si seleccionas con el mouse la tabla anterior te podrás dar cuenta que la tabla si esta ahí pero no tiene borde. Existe un atributo en la tabla para colocarle el borde a esta: “border” <table border> <tr> <td> 1 <td> 2 <td> 3 <tr> <td>4 <td> 5 <td> 6 <tr> <td>7 <td> 8 <td> 9 </table> Resultado, visualización página web

Para aumentar el tamaño del borde se le debe asignar un número, por defecto es uno, a estructura es: <table border = “número”>................</table>, si se toma el ejemplo anterior con un borde de 20

77

Las tablas se pueden alinear con el atributo align ya visto anteriormente, donde recibe los valores de center, left y right Estructura: <table border = “número” align = “valor”> Nota: Por defecto se alinea a la izquierda, align = left Ejemplos: Código fuente <table border=20 align = “right”> <tr> <td> 1 <td> 2 <td> 3 <tr> <td>4 <td> 5 <td> 6 <tr> <td>7 <td> 8 <td> 9 </table> Resultado, visualización página web

78

Código fuente <table border = 20 align = “center”> <tr> <td> 1 <td> 2 <td> 3 <tr> <td>4 <td> 5 <td> 6 <tr> <td>7 <td> 8 <td> 9 </table> Resultado, visualización página web

Se puede colocar color al fondo de la tabla con el atributo ya visto bgcolor. Estructura <table bgcolor = “color_en_inglés”>....</table> NOTA: A la tabla también se le puede colocar el color en hexadecimal. Ejemplo: Código fuente <table border bgcolor = “lime”> <tr> <td> 1 <td> 2 <td> 3 <tr> <td>4 <td> 5 <td> 6 <tr> <td>7 <td> 8 <td> 9 </table>

79

Resultado, visualización página web

También se le puede colocar un color de fondo a una celda. Para colocar el color de fondo en una fila se utiliza el atributo bgcolor en la etiqueta <tr>; para colocar el color de fondo solo a una celda de determinada fila se aplica el atributo bgcolor al <td> o <th> Código fuente, color a la segunda fila <table border> <tr> <td> 1 <td> 2 <td> 3 <tr bgcolor = “aqua”>> <td>4 <td> 5 <td> 6 <tr> <td>7 <td> 8 <td> 9 </table> Resultado, visualización página web

Código fuente, color a la celda ubicada en la fila3 y columna 3 <table border> <tr> <td> 1 <td> 2 <td> 3 <tr> <td>4 <td> 5 <td> 6 <tr> <td>7 <td> 8 <td bgcolor = “fuchsia”> 9 </table> Resultado, visualización página web

80

NOTA En la tabla también se pueden colocar los atributos width y height con sus respectivos valores; Estructura donde se pueden colocar: <table width = “número” height = “número”> <td width = “número” height = “número”> <tr width = “número” height = “número”> <th width= “número” height = “número”> NOTA: Cuando se colocan textos largos, imagines u otra cosa, es recomendable poner el width y el height con iguales medidas en todas las celdas para que la tabla quede proporcional con iguales medidas. Cómo colocar el fondo a una tabla Se utiliza la etiqueta background ya explicada anteriormente, al igual que el color, el background o fondo puede estar en toda la tabla, en toda una fila o en una celda. Se quiere ubicar la imagen llamada mm dentro de una tabla: Código fuente: <table border background="mm.jpg" width=17% height=30%> <tr>

<td>. </table>

81

Resultado, Visualización página web

Explicación Para que una tabla aparezca, en otras palabras, para que una tabla sea una tabla, como mínimo debe tener una fila y columna y además debe contener algo: una imagen, un texto, algo..... En este caso se utilizó un punto. Nótese en la parte central izquierda de la tabla. Es importante colocar las dimensiones con el width y el height para que la imagen de fondo se pueda visualizar en todo su esplendor.

Actividad

En un tabla de 3 filas por 3 columnas colocar una imagen. En la misma tabla colocar otra imagen que ocupe la tercera fila, y en la celda central es decir fila 2 columna 2 colocar otra imagen y además colocar texto en todas las celdas. Las tablas también se pueden anidar solo con volver a colocar la etiqueta <table> y cerrarla en su respectivo lugar: Estructura: <table> .....................<table>.......</table>..................</table> Ejemplo: 82

Código Fuente <table border bgcolor="red"> <tr> <td>1<td>2<td>3<td>4 <tr> <td>5<td>6<td>7<td>8 <table border bgcolor="gold"><! - - esta tabla le pertenece a esta columna - -> <tr> <td>13<td>14<td>15 <tr> <td>16<td>17<td>18 <tr> <td>19<td>20<td>21 </table> <tr> <td>9<td>10<td>11<td>12 </table> Resultado, Visualización Página Web

NOTA: En la tabla exterior se pone un color rojo “bgcolor =red” y en la interna se coloca un bgcolor = “gold” Cómo colocarle color a los bordes Existen tres atributos de la etiqueta <table> que sirven para colocarle color a los bordes de las tablas: NOTA: Obviamente la tabla debe llevar el atributo border Estructura: 1. Forma

83

<table border bordercolor = “color _ inglés”>……</table> Con este atributo se coloca según el color todos los bordes. Ejemplo. Código fuente <table border bordercolor="red"> <tr> <td>1<td>2<td>3 <tr> <td>4<td>5<td>6 </table> Resultado, Visualización página web

2. forma Estructura: <table border bordercolordark = “color _ inglés”>……</table> Con este atributo se coloca según el color todos los bordes interiores izquierdo y superior de las celdas internas y el borde exterior derecho e inferior de la tabla. Ejemplo. Código fuente <table border bordercolordark ="red"> <tr> <td>1<td>2<td>3 <tr> <td>4<td>5<td>6 </table> Resultado, Visualización página web

84

3. forma Estructura: <table border bordercolorlight = “color _ inglés”>……</table> Con este atributo es lo contrario del anterior Ejemplo. Código fuente <table border bordercolorlight ="red"> <tr> <td>1<td>2<td>3 <tr> <td>4<td>5<td>6 </table>

En una tabla no solamente se puede incluir texto, también se puede colocar imágenes. Estructura: <table border> <tr> <td><img src = “URL”> . . . . </table> NOTA: Se debe tener especial cuidado con las dimensiones de la imagen, pues en algún momento podría no visualizarse completamente. Siempre la imagen debe ir al lado de los <td> Alineación de algo dentro de las celdas Existen tres tipos de alineaciones dentro de una celda que se compone por una fila y una columna, puede ser arriba, en el medio o abajo de la celda. Para

85

poder lograr la alineación se hace uso del atributo valign que irá en cada <td> respectivo Estructura <table border> <tr> <td valign= “middle”>texto o imagen <td valign = “top”>text imagen <td valign =”bottom”>texto o imagen </table> donde top es arriba, middle por defecto en el centro y bottom abajo Código fuente <table border width="300px >

<tr height="200px"><td height="200px" valign="middle">1<td valign=bottom>2 <td valign="top">3

</table>

NOTA: Se utilizan los atributos width y height para poder ver los efectos. En la tabla también se pueden colocar enlaces. CELLSPACING Y CELLPADDING Cellspacing = Atributo de la etiqueta <table> que permite modificar la longitud del espacio entre las celdas, si se coloca cero no habrá espacio entre las celdas, el espacio es de dos por defecto. Estructura: <table border cellspacing = “número”>

86

Ejemplo. Código fuente: <table border bordercolorlight="red" CELLSPACING=50> <tr " img src="mm.jpg"><img src="mm.jpg"> <td>1<td>2<td>3 <tr> <td>4<td>5<td>6 </table> Resultado, Visualización página Web

Cellpadding es el espacio entre el borde de la celda y su respectivo contenido Estructura: <table border cellspacing = “número”> Ejemplo. Código fuente: <table border bordercolorlight="red" CELLPADDING=50> <tr " img src="mm.jpg"><img src="mm.jpg"> <td>1<td>2<td>3 <tr> <td>4<td>5<td>6 </table> Resultado, Visualización página Web

87

Cómo colocar texto a una imagen Si se introduce una imagen de fondo en una tabla y se escribe, se obtiene el resultado. La tabla debe estar sin borde para que quede solo la imagen: Ejemplo: Código fuente <table background="mm.jpg" width=17% height=30%>>

<tr> <td align = center>texto encima

</table> Resultado, visualización en l a página web Texto encima NOTA: Se puede dar formato al texto y también se puede utilizar el align = center como atributo en la columna <td> para centrar el texto a lo ancho. Nowrap: Cuando el texto en la celda es muy largo o la imagen tiene una gran altura entonces por defecto la celda de la tabla se divide en varias líneas y toda la fila crece. Existe un atributo de la columna para evitar que la celda aumente a lo largo. Con el nowrap la tabla aumenta a lo ancho. Estructura: <table border> <tr> <td>amigo <td nowrap> este texto es muy largo y se aumenta la celda ancho <tr> <td>amigazo <td> amiguito </table> Resultado. Visualización Página Web

amigo

este texto es muy largo y se aumenta la celda

88

ancho

Amigazo

amiguito

Colspan: Este atributo de las columnas indica que una celda se pude dividir en el número de columnas que se desee: Estructura: <table border> <tr>

<td colspan = n> celda mayor<!-- donde n es el número de columnas que se desee insertar en solo esta celda -- >

<tr> <td> algo <td> algo <td> algo <td> algo <tn> algo , donde <tn> es el número de columnas que se prototipo arriba </table> Resultado de la estructura anterior

Celda mayor algo

algo

algo

algo

......

89

Rowspan: Este atributo de las columnas que indica que una celda se pude dividir en el número de filas que se desee: Estructura: <table border> <tr>

<td rowspan = n>amigo<!-- donde n es el número de filas que se desee insertar en solo esta celda -- > <td>amigo1<td>amigo2

<tr> <td>1<td>2 <tr> <td>3<td>4 <tr> <td>5<td>6 . . . </table> Resultado de la estructura anterior

amigo1

amigo2

1

2

3

4

amigo

5

6

NOTA: Se pueden hacer grandes efectos con las tablas, sólo debes aprender a combinar los atributos de la tabla con los atributos de las columnas y las filas más las etiquetas anteriores, generalmente muchas páginas se diseñan con tablas sin borde para una mejor organización. Eliminación de los bordes de una tabla: Con el siguiente atributo se puede dibujar solo los bordes de una tabla que se desee. El atributo frame de <table>, delimita cuales de las líneas exteriores deben mostrarse

90

Estructura: <table border frame = “valor”>………………</table> valor: Sus posibles valores son Void: No dibuja bordes. Above: Dibuja solo el borde superior. Below: Dibuja solo el borde inferior. Hsides: Dibuja solo los bordes superior e inferior. Lhs: Dibuja solo el borde izquierdo. Rhs: Dibuja sólo el borde derecho. Vsides: Dibuja solo el borde izquierdo y derecho. Box : al igual que border, dibuja todos los bordes. El atributo rules sirve para dibujar las líneas de los bordes que se desea. Estructura: <table border rules = “valor”>..............</table> Posibles valores None: No dibuja las líneas interiores. Rows: Dibuja solo las líneas horizontales. Cols: Dibuja solo las líneas verticales. All; Dibuja todas las líneas interiores. Se pueden unir los atributos frame y rules Estructura: <table frame = “valor” rules = “valor”>..............</table>

91

FRAMES

Los frame se utilizan para dividir una página web en varias regiones. en la cual cada región será una página web. Permite una navegación más cómoda pero algunos navegadores no lo aceptan. Cuando se utilizan los frames ya deben estar creadas la páginas que se van a incrustar en la página madre y además el código fuente de los frames debe ser otra página sin la etiqueta <head> ni <body> ni <title>, es recomendable no colocarlas porque sino puede que no se visualicen los frames. Generalmente utilizan un frame más estrecho que represente el índice y otro más ancho donde se visualice el contenido. Antes de empezar hay que crear dos páginas en la cual una se va a llamar menú.html y la otra se va a llamar contenido.html Una página Web se puede dividir con frames de tres formas:

1. Se divide por columnas verticalmente

Estructura: <html> <frameset cols = “valores”> </frameset> </html> 2. Se divide por filas horizontalmente <html> <frameset rows = “valores”> </frameset> </html> 3. Se puede dividir por la combinatoria de las dos anteriores, fila columna “anidados” <html> <frameset cols = “valores” >

<frameset rows = “valores” > </frameset>

</frameset> </html>

VALORES

92

En los valores va el número de columnas o filas que se desea incrustar en la web, es decir, si se quiere incrustar 3 columnas se escribe 3 medidas separadas por comas, estas medidas se pueden escribir en porcentaje o en píxeles. Ejemplo 1. 3 columnas en la web; <html> <frameset cols = “30%,40%,30%”> </frameset> </html> Explicación La primera columna de la página web ocupará 30%, la segunda columna de la página web ocupará el 40% y la tercera columna ocupará el 30%. Ejemplo 2. 4 filas en la web. <html> <frameset rows = “20%,20%,20%,40%”> </frameset> </html> Explicación La primera fila de la página web ocupará el 20%, la segunda fila de la página web ocupará el 20%, la tercera ocupará el 20% y la última fila y más grande ocupará el 40%. Si los valores sobrepasan el 100%, el navegador acomoda los valores. Ejemplo 3. 2 columnas y en la segunda columna divida por dos filas. <html> <frameset cols=”50%,50%” >

<frameset rows = “50%,50%”> </frameset>

</frameset> </html> Explicación La web se divide en dos columnas, cada una con el mismo valor 50%, la segunda web se divide en dos filas con el mismo valor 50%. Nótese que a la web le corresponde el 100% y la columna derecha le corresponde el 100%, entonces el valor no se pasa. 93

Anteriormente se delimitó o se especificó el valor de cada división y ahora hay que introducir las web en cada división. Supóngase que se tienen 4 web creadas: web1, web2, web3, web4, todas con extensiones .html. Para hacer el llamado de una web se debe hacer con la etiqueta <frame> y atributo src. Esta etiqueta no se cierra. Estructura <frame src = “página web creada”> Retomando los ejemplos anteriores: Ejemplo1. <html> <frameset cols = “30%,40%,30%”> <frame src = “web1.html”> <frame src = “web2.html”> <frame src = “web3.html”> </frameset> </html> Explicación A Web1 le corresponde el 30%, a web2 le corresponde el 40%, a web3 le corresponde el 30%, En el orden de las medidas le corresponde a cada uno según el orden en que se pongan las web. NOTA: Si las páginas no tienen el mismo nombre o no se escribe la extensión .html o se escribe mal, entonces la división si muestra pero la página no se reconoce. Ejemplo 2 <html> <frameset rows = “20%,20%,20%,40%”> <frame src = “web1.html”> <frame src = “web2.html”> <frame src = “web3.html”> <frame src = “web4.html”> </frameset> </html> 94

Explicación. La Web principal se divide en 4 filas, donde las primeras tres ocupan el 20%( web1,web2 , web3) y web4 ocupa la mayor parte el 40%. Ejemplo3 <html> <frameset cols=”50%,50%” > <frame src = “web1.html”>

<frameset rows = “50%,50%”> <frame src = “web2.html”> <frame src = “web3.html”>

</frameset> </frameset> </html> Explicación La web1 recibe el valor de 50% es decir, la columna derecha de la página web. Se invoca otro frameset al que se le va a dar el otro 50% el cual va a contener dos filas cada una del 50%, donde web2 va a ser la fila 1 y web3 la fila 2 de la columna derecha. Visualización: supóngase los ejemplos anteriores utilizando web1,web2,web3 con extensiones .html y las páginas están en blanco sin ninguna información. Ejemplo1 <html> <frameset cols = “30%,40%,30%”> <frame src = “web1.html”> <frame src = “web2.html”> <frame src = “web3.html”> </frameset> </html> Resultado Menu.htm

95

web1 web2 web3 Ejemplo 2 <html> <frameset rows = “20%,20%,20%,40%”> <frame src = “web1.html”> <frame src = “web2.html”> <frame src = “web3.html”> <frame src = “web4.html”> </frameset> </html> Resultado

96

Menu.htm Web1 Web2 Web3 Web4 <html> <frameset cols=”50%,50%” > <frame src = “web1.html”>

<frameset rows = “50%,50%”> <frame src = “web2.html”> <frame src = “web3.html”>

</frameset> </frameset> </html> 97

Resultado Menu.htm

NOTA IMPORTANTE Cada gráfica representa una página, en este caso se han denominado menú.html. Cada una contiene a las otras páginas, si se desea modificar una de las páginas se debe hacer clic en la página a modificar + código fuente y desde ahí se puede modificar o se busca la página directamente y se modifica. Atributos del Frame FRAMEBORDER Cuando se utilizan los frames, automáticamente hay una línea de división que los separa, esta línea se puede eliminar con el valor de cero que se le asigna al atributo. Frameborder en la etiqueta <frameset>, automáticamente se eliminan todos los bordes, si los diversos frames tienen diferentes colores de fondo, se puede apreciar el efecto, sin embargo cuando se utiliza este efecto queda un pequeño espacio donde estaban las líneas divisoras.

98

Estructura: <frameset cols o rows = “valores” frameborder = 0> <frame src = “URL” > <frame src = “URL” > <frame src = “URL” > . . </frameset> FRAMESPACING Las líneas divisoras se pueden eliminar con este atributo y asignándole el valor de cero <frameset cols o rows = “valores” frameborder = 0 framespacing = 0> <frame src = “URL” > . . . . </frameset> SCROLLING Cuando el texto es muy grande en cualquiera de los frames de una página web se activan las barras de desplazamiento, estas se pueden anular o dejarlas con los siguientes valores del scrolling, auto por defecto, no. Estructura: <frameset cols o rows = “valores”> <frame src = “URL” scrolling = “no”>< ! - - este frame no tiene barras - - > <frame src = “URL” scrolling = “yes”> < ! - - este frame si tiene barras - - > <frame src = “URL” scrolling = “auto”> < ! - - si necesita barras las tendrá- - > . . . 99

. </frameset> NORESIZE Cuando se utiliza frames el navegante o usuario puede ubicar el mouse en alguna línea que divide la página y la puede alargar o disminuir, esto se puede evitar con el atributo noresize y se coloca en el <frame> Estructura: <frameset cols o rows = “valores”> <frame src = “URL” noresize>< ! - - este frame no se puede modificar - - > . . . . </frameset> NAME Se utiliza este atributo para que cada frame tenga un nombre el cual se pueda referenciar los diferentes enlaces, más abajo se complementa esta explicación. Estructura <frameset cols o rows = “valores” > <frame src = “URL” name = “principal” > <frame src = “URL” > . . </frameset> 100

BORDERCOLOR Este atributo ya visto sirve para darle color a los marcos si los tiene. Estructura <frameset cols o rows = “valores” bordercolor = “color inglés”> <frame src = “URL” > <frame src = “URL” > . . </frameset> PREGUNTA DEL MILLÓN Por medio de un enlace, ¿cómo aparecer la página en el frame que se quiera? es decir: desde un frame en la cual hay un enlace activarlo y qué la página no se muestre en el mismo frame sino en otro. Utilicemos el ejemplo1 anterior y supóngase que se crea la página web4 con información <html> <frameset cols = “30%,40%,30%”> <frame src = “web1.html”> <frame src = “web2.html”> <frame src = “web3.html”> </frameset> </html> Resultado Menu.htm

101

web1 web2 web3 Lo primero que se debe hacer es colocarle nombre a los frames, no necesariamente será a todos, en especial al que se desea que aparezca la información, en este caso se le coloca name a todos <html> <frameset cols = “30%,40%,30%”> <frame src = “web1.html” name= “principal”> <frame src = “web2.html” name= “princiapl1”> <frame src = “web3.html” name= “principal2”> </frameset> </html> El frame que contiene web1 se llama principal El frame que contiene web2 se llama principal1 El frame que contiene web3 se llama principal2 Se abre el código fuente de web1 para colocar el enlace: <a href = “web4.html” target = “principal2”>enlace con el otro frame</a>

102

Nótese que se escribió el enlace en el código fuente de web1 y además se utilizó el atributo target con el nombre del frame que contiene web3, lo que quiere decir es que cuando se presiona clic en web1 la información de web4 aparecerá en el frame que contiene web3. Enlace con el otro frame la we4 aparece Aquí FRAMES FLOTANTES Es una subpágina dentro de otra a diferencia con los frames es que los frames flotantes no dividen toda la web, solo se muestra un cuadro que contiene la web y si puede estar en contenido de una página con todas la etiquetas del html. Estructura: <iframe src = “URL”></iframe> En Url va la página que se desea mostrar en el frame flotante, recibe los mismos atributos del frame vistos anteriormente. NOTA: Esta etiqueta no es compatible con el netscape. El netscape para los frames flotantes utiliza la etiqueta <ilayer>

103

Un ejemplo de frame flotante: En este caso se observa dentro del frame flotante que si no se puede mostrar la página web es porque no le reconoce, algo.htm no esta creada <html> <head><title>Frame flotante</title></head> <body> <iframe src="algo.htm"></iframe> </body> <html> Resultado

104

FORMULARIOS

Los formulario se caracterizan por permitir la interactividad entre los navegantes y la página web. Simplemente un formulario es un cuestionario a través de cajas de texto, preguntas múltiples, entradas de texto y muchas más. un formulario se define con la etiqueta <form> y se debe cerrar. Atributos del <form> Action: Es el atributo que permite transferir la información que ha digitado el usuario. Se puede hacer a través del cgi utilizando un lenguaje de programación, para este caso solo se explicará para enviar la información a determinado e-mail. Estructura: <form action = “mailto: [email protected]”>……..</form> Enctype: Cuando la información se envía, en este caso al e-mail, esta va codificada. Para que pueda ser clara y legible debe colocarse el atributo enctype = “text/plain”, este atributo con su correspondiente asignación text/plain garantiza que la información no vaya a llegar codificada al destino. Estructura: <form action=“mailto: [email protected]” enctype=“t ext/plain”> … .. . ..</form> Method: Este atributo significa cómo se va a transmitir la información. Recibe dos posibles valores, get y post. El atributo get se utiliza más que todo cuando se usa la action con cgi, en este caso como se va enviar la información a un e-mail, se utilizará el atributo post, que significa posteriormente. 105

Estructura <form action=“mailto: [email protected]” enctype = “text/plain” method=“post”> . . . . </form> Con la anterior estructura se puede enviar un formulario a un e-mail. Obviamente faltan las etiquetas que permiten la entrada de datos a los navegantes que se ubican entre las etiquetas <form> y </form> Entrada de datos

<input>

La etiqueta input referencia la entrada de datos para un formulario. Utiliza el atributo type para definir qué entrada de dato se desea. Estructura: <input type = “entrada..”> Nota: Se debe tener especial cuidado al escribir la etiqueta <input> puesto que como buenos colombianos con ortografía se sabe que antes de p va m. Es uno de lo errores más frecuentes. Entrada de texto Por defecto es una caja de texto. Sirve para que el usuario o navegante entre texto, es muy útil para pedir el nombre, el email, su apellido, textos.... Estructura <form action=“mailto: email” enctype = “text/plain” method=“post”> <input type = “text”> </form> 106

Resultado. Visualización web

NOTA: Aparece el cuadro, pero es un cuadro muerto, puesto que no se sabe qué escribir, por ello es mejor especificar, es decir, que al lado izquierdo del cuadro lo acompañe algún texto que diga qué se debe escribir en el cuadro de texto. <form action=“mailto: email” enctype = “text/plain” method=“post”> <br> Nombre: <input type = “text”> <br>Apellido: <input type = “text”> <br> Email: <input type = “text”> <br> Dirección: <input type = “text”> <br> Telefono: <input type = “text”> </form> Resultado. Visualización web

Nombre:

Apellido:

E-mail:

Dirección:

Teléfono: Atributos del <input> Además del atributo type esta etiqueta tiene los siguientes atributos: Name: Este atributo sirve para referenciar la entrada de dato, es decir, cuando la información llega al e-mail solo llega la que el usuario ha introducido, pero si se coloca el atributo name entonces llega cada entrada de texto con su propio nombre. Explicación gráfica:

107

Sin el atributo name: Estructura <form action=“mailto: email” enctype = “text/plain” method=“post”> Nombre: <input type = “text”> </form> Visualización Página Web Nombre: Mario Visualización email Mario Con el atributo name: Estructura <form action=“mailto: email” enctype = “text/plain” method=“post”> Nombre: <input type = “text” name = “nombre del usuario:”> </form> Visualización Página Web Nombre: Mario Visualización email Nombre del usuario: Mario Nótese que el nombre que se puso en el atributo name llegó también al e-mail acompañado la información que digitó el usuario. Size: Es el atributo que permite agrandar la caja de texto del formulario. Estructura: 108

<form action=“mailto: email” enctype = “text/plain” method=“post”> Nombre: <input type = “text” name = “nombre del usuario” size =”300px”> </form> Nombre: Mario Value: Es el atributo que permite inicializar un formulario con el nombre que se de. Estructura: <form action=“mailto: email” enctype = “text/plain” method=“post”> Nombre: <input type=“text” value=”digita tu nombre” > </form> Apenas se abra la página web aparecerá: Nombre: digita tu nombre Maxlength: Este atributo permite limitar la entrada de caracteres al usuario, Es decir qué tanto números de caracteres puede digitar el usuario. <form action=“mailto: email” enctype =“text/plain” method=“post”> Nombre:<input type=“text” maxlength = ”5” > </form> Resultado: Nombre: Mario Nótese que solo pueden digitarse cinco letras.

109

Los anteriores atributos perteneces a la etiqueta <input> y se aplican a todas las entradas de texto. Las entradas de texto son: Type: text ya vista anteriormente, password, checkbox, radio, submit, image, reset, Password: Es una caja de entrada e la cual el navegante al digitar texto aparecen asteriscos, muy útil para digitar claves. Estructura: <form action=“mailto: email” enctype = “text/plain” method=“post”> Digite su clave: <input type=“password” name = “clave de usuario”> </form> Resultado Nombre: ******* Si el navegante digita aparecen asteriscos. Checkbox: Es un botón que puede presentar dos estados, en otras palabras, es un cuadro donde el navegante puede activarlos o no. Estructura: <form action=“mailto: email” enctype = “text/plain” method=“post”> <input type=“checkbox” name= “variable”> </form> Donde dice variable va a recibir un valor, si está prendido al e-mail llegaría variable: on, si está apagado al e-mail llega variable: off Ejemplo <form action=“mailto: email” enctype = “text/plain” method=“post”> Digita tu deporte favorito <br> <br><input type=“checkbox” name= “variable1”> Soccer <br><input type=“checkbox” name= “variable2”> Televisión 110

<br><input type=“checkbox” name= “variable3”> Atletismo </form> Resultado

Soccer Televisión Atletismo

Cuando el navegante oprime los cuadros, la forma queda así


Si se desea que cuando se visualice la página ya este activado algún entonces se utiliza el atributo checked Ejemplo <form action=“mailto: email” enctype = “text/plain” method=“post”> Digita tu deporte favorito <br> <br><input type=“checkbox” name= “variable1” checked> Soccer <br><input type=“checkbox” name= “variable2”> Televisión <br><input type=“checkbox” name= “variable3” checked > Atletismo </form> Resultado

Soccer Televisión

Atletismo Con el botón anterior se pueden escoger uno o todas las opciones. Si solo se desea dejar la alternativa para que el navegante escoja una de sus posibles opciones se utiliza el atributo radio. Radio: Limita las opciones a escoger. El efecto resulta cuando se coloca el mismo nombre en el atributo name, así cuando el navegante presiona un radio los otros quedan bloqueados, también utiliza el atributo checked para que un botón quede seleccionado por defecto. Estructura:

111

<input type = “radio” name = “variable”> <input type = “radio” name = “variable”> <input type = “radio” name = “variable”> ... . . . Ejemplo <form action=“mailto: email” enctype = “text/plain” method=“post”> Digita tu deporte favorito <br> <br><input type=“radio” name= “variable” > Soccer <br><input type=“radio” name= “variable”> Televisión <br><input type=“radio” name= “variable” > Atletismo </form> Resultado


NOTA: Cuando el navegante oprima un radio las demás quedan bloqueadas, Se pueden seleccionar todas solo si se ponen nombres diferentes al atributo name Submit: Es un botón utilizado como evento, el cual cuando el navegante oprime el botón la información debe ir al e-mail. Es necesario que lleve el value, porque sino el botón aparece muy pequeño. Cuando hay muchos botones de enviar es recomendable asignarle un name a cada botón para reconocer cada información. Estructura <input type= “submit” value= “enviar”> Ejemplo <form action=“mailto: email” enctype = “text/plain” method=“post”> <br> Nombre: <input type = “text”> <br>Apellido: <input type = “text”> <br> Email: <input type = “text”> <br> Dirección: <input type = “text”> 112

<br> Telefono: <input type = “text”> <br><input type= “submit” value= “enviar”> </form> Resultado Nombre: Apellido: Email: Dirección: Teléfono:

Colocar color sobre un botón Se utiliza el style propio del html dinámico: Estructura <input type= “submit” value= “enviar” style= “background=color”> Ejemplo <input type= “submit” value= “enviar” style= “background=gold”> Resultado

Reset.: Cuando el navegante haya digitado toda la información en el formulario debe existir un botón que le permita borrar todo lo que escribió para volver a empezar, ese botón debe ser de tipo reset.

113

Estructura: <input type= “reset” value= “borrar”> Ejemplo: <form action=“mailto: email” enctype = “text/plain” method=“post”> <br> Nombre: <input type = “text”> <br>Apellido: <input type = “text”> <br> Email: <input type = “text”> <br> Dirección: <input type = “text”> <br> Telefono: <input type = “text”> <br><input type= “submit” value= “enviar”> <input type= “reset” value= “borrar”> </form> Resultado Nombre: Apellido: E-mail:

Dirección:

Teléfono:

Button Se utiliza para crear un botón que abra una página, es como un enlace. Utiliza un evento para el mouse. Estructura: <input type= “button” onclick = “location.href=’URL’” value = “botón”> Resultado.

Explicación:

114

Onclick quiere decir que cuando se presione el botón vaya a una página, se utiliza el location para determinar la dirección de la página a abrir. Image Se utiliza este para que una imagen actúe como botón, le sirven los mismos atributos del type= “button” Estructura: <input type= “image” src = “URL”> También se pueden poner atributos como el width para aumentar o reducir el botón de tipo imagen. Texto múltiples líneas Cuando se necesita que el navegante deje sus comentarios se utiliza la etiqueta <textarea> la cual se le debe colocar tres atributos que son cols para especificar las columnas y rows para especificar las filas, además se debe colocar el atributo name para referenciarlo. Estructura: <textarea rows = “número” cols = “número” name= “comentarios”> Deja aquí tu comentario </textarea> Ejemplo <textarea rows = “12” cols = “8” > deja aquí tu comentario </textarea> Resultado

NOTA: También se puede utilizar el value para el texto por defecto, la etiqueta textarea va dentro del cuerpo de <form...........> ....<textarea........>....</textarea>.......</form>

115

Menú de múltiples opciones Para hacer un menú de múltiples opciones se necesita de la etiqueta <select> la cual va llevar un atributo, el name, para referenciar la opción que el usuario escoja. Con la etiqueta <option> se determinan las posibles opciones y llevan como atributo el value. Cuando el navegante escoge una opción del menú despegable, entonces, según el value que tenga se retorna al name que es el atributo del select y este aparece en el email. Estructura <select name = “variable”> <option value = “valor1”>opción1 <option value = “valor2”>opción2 <option value = “valor3”>opción3 <option value = “valor4”>opción4 . . . . </select> La etiqueta <select> se debe cerrar, la etiqueta <option> no es necesario cerrarla. Ejemplo <select name = “variable”> <option value = “valor1”>opción1 <option value = “valor2”>opción2 <option value = “valor3”> opción3 <option value = “valor4”>opción4 </select> Resultado

116

Por defecto se muestra la opción1, pero si se quiere mostrar otra opción se coloca como atributo selected en la etiqueta <option> que se desea mostrar por defecto. Cuando se despliega el menú de opciones

El atributo multlipe sirven para que el menú no sea despegable y muestre todas las opciones Ejemplo <select name = “variable” multiple> <option value = “valor1”>opción1 <option value = “valor2”>opción2 <option value = “valor3”> opción3 <option value = “valor4”>opción4 </select> Resultado

117

Capítulo 5

PUBLICACIÓN DE UNA PÁGINA WEB Antes de aprender a publicar una página debes tener claro unos conceptos fundamentales: Dominio: Sencillamente es el nombre de una dirección de una página, el cual puede ser propio o privado y gratuito. El dominio privado es aquel que se paga y tiene grandes ventajas:

• El nombre del dominio es privado es decir, por ejemplo: www.amigo.com • A la página no le colocan ningún tipo de publicidad. • El contenido de la página puede ser el que se desee.

El dominio gratuito son las direcciones que regalan, solo hay que inscribirse en la página que se desea adquirir el dominio. La única ventaja es que es gratis. Desventajas:

• El dominio no es propio y dependería de la página, es decir: Por ejemplo si se quiere un dominio que sea de yahoo. Entonces el nombre de la página sería www.yahoo.com/nombre_que_se_escoja, cuando se desea adquirir un dominio es lo mismo que abrir un ID.

• Según la página donde se adquiera el dominio, en la página personal va a aparecer la diferente publicidad.

Cuál es el truco de los dominios gratis?. Sencillo, al tener un dominio gratis puedes subir una página web en la cual te van a poner publicidad.

Housting: Es el espacio en bytes. Generalmente los Housting gratis son de 5 megas. Si se requiere un espacio de mayor tamaño entonces es mejor pagar un housting. Si vas a crear un negocio te recomiendo que nunca te metas con un dominio gratis

Explicación de publicación en geocities:

Cuando se va a publicar una página web el procedimiento es muy parecido en cualquier página que te de un dominio. Lo fundamental y como primer paso es adquirir un dominio o un ID.

118

Pasos

1. En geocities busca la palabra SIGN up y le das clic. 2. A la Derecha aparece id y password. Si ya tienes un ID o un dominio de

geocities puedes entrar, sino a la izquierda de la página aparece SIGN UP NOW para escoger tu ID por primera vez.

3. Llena el formulario y ten cuidado de recordar tu ID y tu PASSWORD. 4. Sigue las instrucciones del formulario.

Al escoger un Id hay un servidor en Estados Unidos con una base de datos en la cual si escoges un dominio repetido entonces te aparecerán opciones para escoger otro o crear uno nuevo..

5. Si el dominio fue aceptado entonces puedes tranquilamente cerrar todo . 6. Vuelve a entrar a geocities.com y esta vez entra a sign in y digita el ID

y el password. 7. Cuando entres a la cuenta a la izquierda busca la palabra FILE

MANAGER y dar clic sobre la palabra. 8. El FILE MANAGER va a ser el sitio donde vas a administrar tu página

web. Busca la opción upload files que es para subir las páginas webs e imágenes y demás. Con el file manager puedes editar páginas web con html usando el editor de HTML experto o el común, también se pueden crear subdirectorios o carpetas con el file manager. Puedes actualizar editando cualquier página. Es muy fácil aprender a usar el file manager. Solo debes conocer un poquito de inglés y HTML para actualizar. En las páginas que subas debe estar el INDEX, que va ser la primera que se vea.

Tu dirección va a ser: www.geocities.com/ID

119

CSE HTML Validator Lite v3.5

Existen muchos editores, entre uno de los mejores es el CSE HTML Validator Lite v3.5 Puesto que evalúa el código y muestra los posibles errores. Tiene un abecedario completo de etiquetas de html y muchas funciones más. No se necesita saber mucho de HTML para poder usar este editor. A continuación una breve explicación. Primero se debe instalar el editor dando un clic en el ícono

y seguir las instrucciones. Se instalará por defecto en el C. Se genera un ejecutable con el siguiente ícono

Se ejecuta el programa dando un clic en el ícono ejecutable.

121

El programa está en inglés, pero es muy fácil utilizarlo, el abecedario que está en la parte superior contiene casi todas las etiquetas con sus propios atributos, si se da un clic sobre una letra se despliega todas y se escoge la etiqueta a utilizar. Bueno si ya eres un gurú en HTML empieza a programar en el área de trabajo de color blanco, la que tiene a la izquierda números, esos números representan las líneas que vas a utilizar mientras codificas. Antes que todo debes guardar en file + save. Por defecto lo salva como .html A la izquierda de los número están unos íconos que sirven para las diferentes visualizaciones, con ellos se pueden quitar los números, se puede visualizar la página en el navegador y muchas funciones más. Ahora realicemos un pequeña página cometiendo un error para ver como el editor lo valida.

122

Código: <html> <head><title>mi primera vez</title></head> <vody> cuerpo de la página web </vody> </html> El error es que está mal escrito la etiqueta <body> En el programa:

1. se digita el código

2. Al lado derecho donde esta el ícono de una H en color rojo se oprime validate al lado

123

Cuando se oprime validate el editor encuentra el primer error, y en el área de trabajo inferior muestra de color gris un cuadrito de color rojo con un texto Error, dice que está en la línea 3 y dice por qué el error en inglés. Al lado derecho describe el error. Cuando se corrige y se vuelve a dar validate el editor encuentra el otro error y así sucesivamente... hasta que solo aparezcan los posibles comentarios.

124

BIBIOGRAFÍA

http://gticursos.net/contenidos/html/4.html http://www.uca.es/manual-html/ http://www.lander.es/webmaestro http://www.htmlweb.net/index.html http://xiniom.com/users/Jorge/html/seccion-5.htm

125

HTML Facil

Documents

Transcript of HTML Facil