Página web por HTML.

Página web por HTML

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.

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

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

Una página web se compone de tres elementos principales..
Un título Una Cabeza Un cuerpo

Título 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 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.

Cuerpo El cuerpo se define como : <body> </body>
este es el cuerpo: “gráficas, texto de mi página”

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

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

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

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. Font color Font size Font face

Font color

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

Etiqueta hr Líneas horizontales en la página web
Los 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.

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

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

Caracteres especiales
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;

Caracteres especiales

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.

Etiqueta img Esta etiqueta no se cierra. Para agregar imagen:
<img src = “nombre_de_imagen.extensión”>

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

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. <img src = “nombre de la imagen.extensión” border= “número”>

Atributos de la etiqueta imagen
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”>

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.

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> <a> permite definir enlaces Href: para invocar la URL

Link, Alink y Vlink 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” >

Subrayado de los enlaces
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>

Anclas (enlaces dentro de una pagina)
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>

Subir programas para que los descarguen
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>

Listas 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

Listas desordenadas 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">

Listas ordenadas Se utilizan para presentar cosas en un orden determinado <OL> <LI> amigo <LI> amigo <LI> amiguitos </OL> <ol type=a> <ol type=I>

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. <DL> <DT> concepto <DD> significado <DT> concepto2 <DD> significado2 </DL>

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

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

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 <center><marquee width = “número” height = “número” >espaciado</marquee></center>

Etiqueta: <bgsound>
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” >

Directorios Superiores, inferiores y de igual nivel
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”>

Etiqueta Table

Etiqueta table 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 </table> <table border (por defecto es 1) align=right bgcolor=color

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> También: <table width = “número” height = “número”> <table border background="mm.jpg" width=17% height=30%> <table border=numero><!>

Color a los bordes 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”>

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 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 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. <table border cellspacing = “número”> Cellpadding es el espacio entre el borde de la celda y su respectivo contenido

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 <table background="mm.jpg" width=17% height=30%>> <tr> <td align = center>texto encima </table>

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. <table border> <tr> <td>amigo <td nowrap> este texto es muy largo y se aumenta la celda ancho <tr></table>

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

Rowspan 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

Eliminación de los bordes de una tabla:
Podemos dibujar solo los bordes que deseamos en la tabla: <table border frame = “valor”>………………</table>

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. <table border frame = valor”>………………</table>

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.

FRAMES 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

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> Nota: El código fuente de los frames debe ser otra página sin 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>

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

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. <frameset cols o rows = “valores” frameborder = 0> <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.

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

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> <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: <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 = “principal2”>enlace con el otro frame</a>, a href : página que se desea abrir, target: lugar de la página donde se desea abrir.

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.

FORMULARIOS

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 Enctype Method Entrada de datos

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 . <form action = “mailto:

Enctype Cuando la información se envía, en este caso al , 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: enctype=“t ext/plain”>

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 , se utilizará el atributo post <form action=“mailto: enctype = “text/plain” method=“post”> </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..”>

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 , su apellido, textos.... Estructura <form action=“mailto: ” enctype = “text/plain” method=“post”> <input type = “text”> </form>

Entrada de texto <form action=“mailto: ” enctype = “text/plain” method=“post”> <br> Nombre: <input type = “text”> <br>Apellido: <input type = “text”> <br> <input type = “text”> <br> Dirección: <input type = “text”> <br> Telefono: <input type = “text”> </form>

Atributos del <input>
Name: Este atributo sirve para referenciar la entrada de dato, es decir, cuando la información llega al 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.

Value: Es el atributo que permite inicializar un formulario con el nombre que se de. Estructura: <form action=“mailto: ” enctype = “text/plain” method=“post”> Nombre: <input type=“text” value=”digita tu nombre” > </form>

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: ” enctype =“text/plain” method=“post”> Nombre:<input type=“text” maxlength = ”5” > </form>

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: ” enctype = “text/plain” method=“post”> Digite su clave: <input type=“password” name = “clave de usuario”> </form>

Checkbox 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 está prendido al llegaría variable: on, si está apagado al llega variable: off

Checkbox Ejemplo <form action=“mailto: ” 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>

Radio (para una opción)
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”>

Ejemplo: <form action=“mailto: ” 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>

Submit Es un botón utilizado como evento, el cual cuando el navegante oprime el botón la información debe ir al . 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: ” enctype = “text/plain” method=“post”> <br> Nombre: <input type = “text”> <br>Apellido: <input type = “text”> <br> <input type = “text”> <br> Dirección: <input type = “text”> <br> Telefono: <input type = “text” style=background=color> <br><input type= “submit” value= “enviar”> </form>

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. Estructura: <input type= “reset” value= “borrar”>

Ejemplo <form action=“mailto: ” enctype = “text/plain” method=“post”> <br> Nombre: <input type = “text”> <br>Apellido: <input type = “text”> <br> <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>

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

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>

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.

Menú de múltiples opciones
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 . 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>

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>

GRACIAS

Página web por HTML.

Presentaciones similares

Presentación del tema: "Página web por HTML."— Transcripción de la presentación:

Presentaciones similares

Sobre el proyecto

Feedback

Iniciar la sesión

Autorizarse a través de una red social:

Página web por HTML.

Presentaciones similares

Presentación del tema: "Página web por HTML."— Transcripción de la presentación:

Presentaciones similares

Sobre el proyecto

Feedback