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

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.

Se escribe index puesto que los buscadores (Google, Altavista, etc....)se guían por esta palabra para encontrar la página..

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

Un título Una Cabeza Un cuerpo

El título en html se define como <title> </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.

La cabeza se define como <head></head> Esta etiqueta se debe cerrar. La cabeza va a ser el título principal superior de la página web.

El cuerpo se define como : <body> </body>

este es el cuerpo: “gráficas, texto de mi página”

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

Para centrar el texto o algún objeto “imagen, tabla o un gif” se debe utilizar la etiqueta <center></center>

• Son las etiquetas que van a permitir la negrilla.

• Se pueden utilizar seis cabeceras “<h1><h2><h3><h4><h5><h6>”

• 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.

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. Font colorFont sizeFont face

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

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

Líneas horizontales en la página webLos dos atributos son width (“ancho”) y size

(“altura”). La forma de utilizar estos atributos es la misma que el font. Color, align left, right, justify (para textos,

dibujos)Estructura: <hr width = “número” size = “número”> El % 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.

Esta etiqueta va a definir el cuerpo de la página web por medio de párrafos, animaciones, gif y demás.

Color al fondo: <body bgcolor = “color_en_inglés”>

Color al texto: <body text = “nombre_del_color”>

Imagen de fondo: <body background = “nombre_de_la_imagen. extensión”> La imagen guardada en la misma carpeta que esta la página web y conocer su extensión

Marca de agua: cuando 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: <bgproperties = “fixed”>

Existe un carácter especial que es interpretado como un espacio. Su estructura es (;)

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.

Se debe colocar & + la letra que se desea colocar la tilde + acute;

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.

Esta etiqueta no se cierra. Para agregar imagen: <img src =

“nombre_de_imagen.extensión”>

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”).width = “número” height = “número”(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.)

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.

<img src = “nombre de la imagen.extensión” border= “número”>

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”). align = “lado_de_alineacion”> .. <img src = “nombre_animación.gif”>

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.

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>

<a> permite definir enlacesHref: para invocar la URL

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

<body link = “color” alink = “color” vlink

= “color” >

Existe un atributo llamado STYLE que define estilos, en este caso se puede utilizar para quitar el subrayado

Enlace sin subrayado:<a href=“URL” style = “text-decoration: none”>texto

o imagen</a>

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>

<a href = ”web1.html#marca”>ir a web1 parte de abajo</a>

El archivo debe de estar comprimido es decir con extensión .zip y se hace el enlace: <a href = “archivo.zip”>descarga aquí</a>

Por medio de los enlaces se puede abrir el Word, Exel, Power Point. <a href = “archivo.doc”>archivo word</a> <a href = “archivo.xls”> archivo excel><a href = “archivo.ppt”> archivo power point</a> <a href = “archivo.txt”> archivo Block de Notas</a>

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

Listas desordenadas (no numeradas) (unordered lists)

Listas ordenadas (numeradas) (ordered lists)

Listas de definición

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

<ul type ="circle"> <ul type="square"> <ul type="disk">

Se utilizan para presentar cosas en un orden determinado

<OL> <LI> amigo <LI> amigo <LI> amiguitos </OL>

<ol type=a> <ol type=I>

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.

<DL> <DT> concepto <DD> significado <DT> concepto2 <DD> significado2 </DL>

Sólo con la etiqueta <marquee> se logra el efecto de movimiento. Sólo funciona en Internet Explorer. Esta etiqueta se debe cerrar.

<marquee>texto que se desplaza</marquee>Fondo:<marquee bgcolor =color>texto</marquee> foto: <img src=nombre.extensión><marquee direction = “left”>izquierda</marquee> <marquee direction = “right”>derecha </marquee> <marquee direction = “up”>arriba</marquee> <marquee direction = “down”> abajo </marquee>

Con este atributo se puede limitar las veces que van aparecer los movimientos.

<marquee loop = “número”>número de movimientos</marquee>

<marquee behavior = “alternate”>rebote </marquee>

Con el atributo width y height se puede limitar el recorrido del movimiento, también se puede aplicar un center

<center><marquee width = “número” height = “número” >espaciado</marquee></center>

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.

<bgsound src = “archivo_sonido.extensión”>

<bgsound src = “archivo_sonido.extensión” loop = “número de veces” >

Mismo nivel: <img DYNsrc = “videos/fichero. extensión”> (videos=nombre de la carpeta)

Nivel Inferior: (2 carpetas despues)<bgsound src = “páginas/sonidos/fichero”>

Nivel superior: cuando se quiere incrustar un objeto en la cual se encuentra alguna carpeta por encima de él se denomina nivel superior

<img src = “../imágenes/fichero”>

Se debe tener en cuenta que primero se especifica la fila y luego sus respectivas columnas. 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.

<table> <tr> <td>primera columna <td>segunda columna <tr> <td>primera columna <td>segunda columna </table> <table border (por defecto es 1) align=right bgcolor=color

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>

También: <table width = “número” height = “número”>

<table border background="mm.jpg" width=17% height=30%>

<table border=numero><!>

Existen tres atributos de la etiqueta <table> que sirven para colocarle color a lo

<table border bordercolor = “color _ inglés”> s bordes de las tablas:

<table border bordercolordark = “color _ inglés”>

<table border bordercolorlight = “color _ inglés”>

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 poder lograr la alineación se hace uso del atributo valign que irá en:

<table border> <tr> <td valign= “middle”>texto o imagen <td valign = “top”>text

imagen <td valign =”bottom”>texto o imagen </table> cada <td> respectivo.

<table border width="300px > <tr height="200px"><td height="200px" valign="middle">1<td

valign=bottom>2 <td valign="top">3 </table>

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.

<table border cellspacing = “número”> Cellpadding es el espacio entre el borde de

la celda y su respectivo contenido <table border cellspacing = “número”>

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

<table background="mm.jpg" width=17% height=30%>>

<tr> <td align = center>texto encima </table>

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.

<table border> <tr> <td>amigo <td nowrap> este texto es muy largo y se aumenta la celda ancho <tr></table>

Este atributo de las columnas indica que una celda se pude dividir en el número de columnas que se desee:

Este atributo de las columnas que indica que una celda se pude dividir en el número de filas que se desee:

<table border> <tr> <td rowspan = n> números <tr> <td>número1<td> número2 <tr> <td>1<td>2 <tr> <td>3<td>4 <tr> <td>5<td>6

Podemos dibujar solo los bordes que deseamos en la tabla:

<table border frame = “valor”>………………</table>

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.

<table border frame = valor”>………………</table>

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.

Los frames 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.

Se debe crear dos páginas: menú.html y contenido.html

1. Se divide por columnas verticalmente Estructura: <html> <frameset cols = “valores”> </frameset> </html>Nota: El código fuente de los frames debe ser otra página sin Nota: El código fuente de los frames debe ser otra página sin la etiqueta <head> ni <body> ni <title>la etiqueta <head> ni <body> ni <title>

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>

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.

Ej: <html> <frameset cols = “30%,40%,30%”> <frame src = “web1.html”> <frame src = “web2.html”> <frame src = “web3.html”>

</frameset> <html>

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.

<frameset cols o rows = “valores” frameborder = 0> <frame src = “URL” > </frameset>

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>

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á) </frameset>

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><frameset cols o rows = “valores”> <frame src = “URL” noresize> (este frame no se puede modificar) </frameset>

Se utiliza este atributo para que cada frame tenga un nombre el cual se pueda referenciar los diferentes enlaces:<frameset cols = “30%,40%,30%”>

<frame src = “web1.html” name= “principal”>

<frame src = “web2.html” name= “princiapl1”>

<frame src = “web3.html” name= “principal2”>

</frameset>

En web1 <a href = “web4.html” target = En web1 <a href = “web4.html” target = “principal2”>enlace con el otro frame</a>, “principal2”>enlace con el otro frame</a>, a href : página que se desea abrir, target: a href : página que se desea abrir, target: lugar de la página donde se desea abrir. lugar de la página donde se desea abrir.

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 En Url va la página que se desea mostrar en el frame flotante, recibe mostrar en el frame flotante, recibe los mismos atributos del frame vistos los mismos atributos del frame vistos anteriormente. anteriormente.

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.

Action Enctype Method Entrada de datos

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.

<form action = “mailto: [email protected]”>……..</form>

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.

<form action=“mailto: [email protected]” enctype=“t ext/plain”>

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

<form action=“mailto: [email protected]” enctype = “text/plain” method=“post”> </form>

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..”>

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>

<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>

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.

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>

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>

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>

Es un botón que puede presentar dos estados, en otras palabras, es un cuadro donde el navegante puede activarlos o no.

Estructura: <input type=“checkbox” name= “variable”>

Donde dice variable va a recibir un valor, si Donde dice variable va a recibir un valor, si está prendido al e-mail llegaría variable: on, está prendido al e-mail llegaría variable: on, si está apagado al e-mail llega variable: offsi 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” checked> Soccer <br><input type=“checkbox” name= “variable2”> Televisión<br><input type=“checkbox” name= “variable3”> Atletismo </form>

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. <input type = “radio” name =“variable”>

<input type = “radio” name =“variable”> <input type = “radio” name =“variable”>

<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>

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”>


<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”

style=background=colorstyle=background=color> <br><input type= “submit” value=

“enviar”> </form>

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.

Estructura: <input type= “reset” value= “borrar”>


<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>

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”><input type= “image” src = “URL”>

Onclick quiere decir que cuando se presione el botón Onclick quiere decir que cuando se presione el botón vaya a una página, se utiliza el location para vaya a una página, se utiliza el location para determinar la dirección de la página a abrir.determinar la dirección de la página a abrir.

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>

<textarea rows = “12” cols = “8” > deja aquí tu comentario </textarea>

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>

<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>

Documents

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