html

Hyper Text Markup Language

html

HTML

Para elaborar una pagina Web se puede:• desde escribir una a una todas las instrucciones

en un procesador de textos sencillo,• hasta utilizar programas en que no se necesita

saber ninguna comando de html, que automáticamente elaboran todos los códigos.

• Programas para novatos– Microsoft Publisher– Word– PowerPoint

• Programas para expertos y profesionales– Front Page– Adobe PageMill– Editor Web– Arachnophilia

Consejos para el diseño de una página Web

Organización del contenido de la página

• Un tema grande a tratar se debe de dividir en subtemas, colocando cada uno de ellos en páginas distintas, relacionadas unas a otras por medio de Links. Un grupo de páginas relacionadas recibe el nombre de sitio.

• Si se coloca bastante información en una pagina, esta debe de tener un menú o índice propio, y en cada tema debe de haber opciones de retorno al menú y a los temas siguientes y anteriores.

Incluir gráficos, y/o gif animados en todas las páginas.

• Es conveniente hacer paginas vistosas por lo que es recomendable que tener gráficos, sin embargo hay que tener cuidado de no utilizar demasiados, o gráficos muy grandes, ya que haría que la página se cargara muy lenta.

• Cuando hay necesidad de colocar un gran número de gráficos, la técnica a seguir es reducir las imágenes y colocarlos así en la página, elaborando un código para permitir ampliar la imagen del gráfico ó mostrar una página adicional con el gráfico de gran tamaño.

• Cuando se necesite mostrar una imagen grande, se presenta primero en la pagina una imagen reducida dándole el link o enlace a una imagen grande (al oprimir click a la imagen se carga una pagina con la imagen amplificada.)

Elección de Gráficos• Para diseñar una página Web, se debe de contar con imágenes que

no ocupen una gran cantidad de Bytes, ya que eso hace que la página sea demasiado lenta para cargar, y provocaría que el visitante se desespere y salga de ella.

• Se recomienda realizar un balance entre calidad y velocidad de carga, tratando siempre de tener las imágenes de calidad aceptable que ocupen poco espacio.

• Las imágenes con mucha calidad ocupan más espacio que las que no la tienen.

• Se recomienda que en la pagina de inicio o home page, sea aproximadamente de 40 k incluyendo las imágenes. Para que los visitantes que tienen conexiones lentas no se desesperen y cancelen la carga de la página.

Elementos del diseño y publicación de una página

Web Diseño del programa• Análisis del Problema y Algoritmo• Codificación o escritura del programa• Agregar presentación al programa

– Con imágenes, sonido, Gif animados, Scrips de Java y Applets.• Agregar contadores de visitas.• Depuración.• Programación de Java Scrips y Applets (Avanzado)• Alojar el sitio o la página en un servidor

– Por medio de un programa Ftp se sube la página al servidor• Publicación• Agregar la página en los índices de los motores de búsqueda.• Intercambio de Banners

Requisitos para el diseño profesional de una página Web

• Computadora pentium con modem• Conexión a Internet• Browser (Navegador)• Editor HTML• Programa de diseño gráfico• Programa de retoque fotográfico• Programas de utilerías• Programa Ftp.• Colección de Fondos, Viñetas, Gráficos y Gráficos Gif.• Direcciones de Internet de utilerías

Herramientas para el diseño de páginas Web

• Browser (Navegador)– Internet Explorer– Netscape Navigator

• Editor HTML– Front Page Editor– Web Edit Pro– Arachnophilia

• Programa de Diseño Grafico– Corel Draw

• Programa de Retoque Fotográfico– Corel Foto Pane– Adobe FotoShop– Paint Shop Pro

• Programa de utilerías– Creador de botones– Creador de títulos– Creador de menús de opciones– Creador de Baners

• Programas adicionales– Gif animator

• Programa de FTP– CuteFtp

• Selección de fondos, Viñetas, Gráficos• Direcciones de sitios de Internet de herramientas en la

creación de paginas Web.

Elementos Básicos y estructura de una pagina Web

Directivas• Pensar en directivas ó etiquetas es como hablar con el

browser, o sea es la manera de darle instrucciones.• La primera directiva es de inicio y la siguiente es una

directiva del cierre.Para hacer una directiva de cierre, simplemente se agrega un signo / a la directiva de inicio.

• La mayoría de directivas, pero no todas tienen una directiva del cierre.Las directivas o comandos se pueden realizar en mayúsculas o minúsculas.

• <HTML></HTML>

Estructura básica de una página Web

• <HTML>• <HEAD>• <TITLE>Titulo de la página</TITLE>• </HEAD>• <BODY>• Aquí van las directivas del contenido de la página)• </BODY>• </HTML>

Explicación de la estructura básica

• <HTML> (principio del documento html)• <HEAD> (inicia titulo)• <TITLE>Titulo de la página</TITLE>• </HEAD> (finaliza titulo)• <BODY> (inicia cuerpo del documento)• (Aquí van las directivas del contenido de la página)

• </BODY> (final del cuerpo del documento)• </HTML> (final del documento html)

Directiva <HTML>

• Indica a la computadora que se trata de un programa HTLM.

• Todo programa HTML tiene dos partes – El encabezado especificado por la directiva

<HEAD> – y el cuerpo indicado por la directiva <BODY>

Directiva <HEAD>

• Dentro se colocan las directivas para proporcionar información de la página a los buscadores robóticos de Internet y otras directivas como <TITLE>, <META>, <SCRIPT> y <STYLE> que a continuación se describen:

Directiva <TITLE>

• Enseña el nombre de la página que se muestra en la barra de título del navegador (Browser) y no el nombre con que se guarda el archivo.

<TITLE>Titulo de la página</TITLE>

Directiva <META>

• Proporciona información para que los programas de búsqueda (como google.com, yahoo.com, altavista.com) encuentren nuestra página.A continuación se da un ejemplo de la aplicación de la directiva META:

<SCRIPT> (Este no es lenguaje HTML, y solo se dará un ejemplo)

• Es empleada cuando se agregan programas con el lenguaje JAVA SCRIP, para incluir efectos visuales en la página y acciones.

• Ejemplo: Las instrucciones descritas abajo, cambian el texto de los enlaces a rojo al pasar el Mouse sobre ello.<style> </style>

Directiva <STYLE>

• Se utiliza para colocar Hojas de Estilo en Cascada (CSS),Ejemplo: Las instrucciones descritas abajo, indican los atributos y características de la fuente de los textos de la página.

• <STYLE> P {font-family:Arial; font-size:12pt; color:red; background-color:lime}</STYLE>

Ejemplo

• Escribir las siguientes instrucciones en un editor de textos simple como Word pad ó Write o block de notas.

• Ejemplo 1: Saltos de línea y de párrafos

Regla 1

• Los retornos de carro que se ponen no se respetan en el navegador,Lo único que separa a los textos son las directivas <P> y la directiva <Br>

• Siendo <P> la directiva de final de párrafo

• Siendo <Br> la directiva de final de línea

• Si se desea dejar varias líneas en blanco, no basta con repetir varias veces la directiva <p>, o <br>, sino es necesario escribirlas juntas, o sea, por cada línea en blanco que queramos se escribe <p><br>

Regla 2

• Todas las directivas deben de estar Anidadas, o sea una dentro de otra.

• A excepción de las directivas abiertas como <br> que no necesitan directiva de cierre.

Ejemplo:

Grabar la página

• (en el directorio practicas-formatos)Al terminar de escribir el programa grábarlo con el nombre de pagina1.html.

• Se le puede dar cualquier nombre al archivo mientras la extensión sea html.

• Importante: Los nombres de archivo no deben de tener espacios en blanco y estar escritos en minúscula.

¿Cómo abrir una página Html del disco duro desde Internet Explorer?

• Para visualizar el resultado de la primer pagina: a. Entrar al navegador Internet Explorer o

Netscape Navigator, Motzila1. Seleccionar el archivo, y dar click en el botón abrir.2. Se puede colocar la dirección del archivo

directamente en el navegador.

b.O al abrir el archivo desde el directorio este selecciona automáticamente el navegar designado por default en el sistema.

Teniendo el siguiente resultado:

Directiva <BODY>

• Definir el cuerpo del texto del documento, es la sección principal en la cual va el contenido de la página.La directiva <BODY> admite varios atributos, los más importantes son:

BGCOLOR=color de fondoTEXT= color del texto de la páginaLINK=color del texto o link de enlaceVLINK= color del texto o link de enlace visitadoALINK= color del texto o link de enlace activoBACKGROUND="imagen de fondo"

Ejemplo:

• <BODY BGCOLOR=black text=white link=blue vlink=red>

• Fija el color del fondo negro, el texto blanco, el enlace azul y el enlace visitado rojo

Dar Formato Básico a una

página Web

Colores de fondo de la página

• El comando BGCOLOR para cambiar el color del fondo va dentro de la directiva inicial de <Body>, de la siguiente manera:<BODY BGCOLOR="Código del color">

• Aplicando el código de color celeste<BODY BGCOLOR="#80ffff">

• El código "#80ffff" da el color celeste, los códigos de los colores nos lo dan los editores de página Web.

Color del texto de la página

• El comando TEXT para cambiar el color del texto también va dentro de la directiva inicial de <Body>, al junto con la de BGCOLOR de la siguiente manera.<BODY TEXT ="Código del color">

• Aplicando el código de color azul<BODY TEXT="#0000ff">

• Agregar dentro de la directiva <BODY> el siguiente código al primer ejemplo (pagina1.htlm) <BODY BGCOLOR="#80ffff" TEXT="#0000ff"> Se visualizan los cambios en el browser. Se puede ver el color del fondo de la página es celeste y el color del texto es azul Grabar el cambio con el nombre pag1-1.html

Colocar una imagen de fondo

• El comando para colocar una imagen como fondo de la página Web, va dentro de la directiva inicial de <Body>, de la siguiente manera.<body BACKGROUND="swirlies.gif“>

• Simplemente cambia el comando BGCOLOR, por el comando BACKGROUND.El comando BACKGROUND Se utiliza para colocar una imagen como fondo de la página.

• La imagen swirlies.gif, es la que se aplicara como fondo en este ejemplo.

• Modificar el comando <body>, el siguiente código del primer ejemplo (pagina1.htlm) <BODY BACKGROUND="swirlies.gif" TEXT="#0000ff">> Grabar los cambios con el nombre pag1-2.html Visualizar los cambios en el browser.

Títulos

Para aplicar Títulos

• Las directivas para aplicar títulos son muy sencillas.

• Titulo 1, la Directiva es: <H1>TEXTO DEL TITULO 1</H1> Titulo 2, la Directiva es: <H2>TEXTO DEL TITULO 2</H2> Titulo 3, la Directiva es: <H3>TEXTO DEL TITULO 3</H3> Titulo 4, la Directiva es: <H4>TEXTO DEL TITULO 4</H4> Titulo 5, la Directiva es: <H5>TEXTO DEL TITULO 5</H5> Titulo 6, la Directiva es: <H6>TEXTO DEL TITULO 6</H6>

Estilo de los caracteres

• Existen dos tipos de estilo de caracteres, el estilo lógico y el estilo físico.El estilo físico literalmente cambia los caracteres, no así el estilo lógico que solo cambia la apariencia de los mismos. En el estilo lógico la apariencia de los caracteres varia de acuerdo a cada Browser, ya que cada uno de ellos tiene una forma diferente de tratar el texto.

Estilo fisicos• Para aplicar Negritas (bold) <B>texto en negritas</B>

Para aplicar Cursivas (Italic) <I>texto en cursivas</I> Para aplicar Subrayado. (Underline) <U>texto subrayado</U> Para aplicar letra grande <BIG> Letras grandes</BIG> Para aplicar letra pequeña <SMALL>Letras pequeñas</SMALL> Para aplicar subíndices <SUB>texto en subíndice </SUB> Para aplicar índices (Superíndices) <SUP> Superíndice </SUP> Para aplicar letra tachada <S>Texto</S>

• Para aplicar letra tipográfica <TT>Texto</TT> (Este tipo de letra se parece al de una maquina de escribir.)

• El efecto de los estilos se acumula, o sea que al aplicar un segundo estilo no se cancela el anterior sino se acumula, por ejemplo al aplicar negritas y luego cursivas, el texto obtiene ambos estilos negritas y cursivas. Por lo tanto se pueden aplicar varios estilos juntos.

Estilos lógicos• Para aplicar texto fuerte. <STRONG>texto</STRONG>

Para aplicar texto enfatizado <EM>texto </EM> Para aplicar texto de terminal <KBD>texto</KBD> Para aplicar texto literal o de cita <CITE>texto </CITE> Para aplicar texto de codigo HTML (sin que esté se ejecute) <CODE>texto código</CODE> Para aplicar texto de definición <DFN>texto </DFN> Para aplicar texto identado o con sangría <BLOCKQUOTE>texto</BLOCKQUOTE> Para aplicar texto ejemplo <SAMP>texto </SAMP>

Centrar textos o párrafos

• Aplicar la directiva <center> Texto centrado </center>Usualmente a los encabezados se les aplica centrado, por ejemplo:

• <center><h1>Texto del título centrado</h1></center>

Ejemplo 2 (Encabezados, y Estilos, y alineación)

• Segundo ejemplo: • Escriba las siguientes instrucciones en un

editor de textos simple como word pad ó write o block de notas.

• Grábarlo con el nombre de página2.html en el directorio practicas-formatos y visualizar los resultados.

Tipos y tamaños de fuentes

• Para cambiar el tamaño de la fuenteExisten dos formas de cambiar el tamaño de letra a la página, una manera es con directiva (cerrada) <font> ....<\font>, la cual se utiliza para cambiar el tamaño de letra por párrafos, la otra forma con directiva (abierta) <BASEFONT SIZE="valor numérico">, se utiliza para cambiar el tamaño de letra por defecto de toda la página.

Para cambiar el tamaño de la letra todo el documento.

• Se utiliza la directiva – <BASEFONT SIZE="valor numérico">– como en el ejemplo <BASEFONT SIZE="5">

• Hace que el documento adopte un tamaño de letra tamaño 5 por defecto para todo el texto que aparezca después de esta directiva. Si lo ponemos después de la directiva <BODY> (inmediatamente después a ésta), la modificación del tamaño de letra afecta a todo el documento:

• <BODY> <BASEFONT SIZE="5"> ....

Para cambiar el tamaño de la fuente por párrafos.

• Se utiliza las siguientes directivas:<FONT SIZE=No. de fuente> Texto </FONT>

• Las fuentes tienen 7 tamaños:Se puede observar en el siguiente ejemplo:En un archivo nuevo realizar la siguiente codificación dentro de la sección de cuerpo de la página en el tercer ejemplo (página3.html)

El resultado se verá como sigue

Nota:

Si se utilizan títulos, en un texto determinado, no se emplea <font size=No.> para el mismo texto, ya que el titulo da la orden para un tamaño determinado de letra y <font size=No.> estaría dando la orden para otro tamaño de letra. La directiva <FONT> tiene otros parámetros COLOR="color del texto" y FACE="nombre de la fuente"Ejemplo: <font size="3" color=blue face="times new roman">Texto de color azul, tamaño 3, de fuente tipo times new roman</font>

Para cambiar el tamaño de la fuente por párrafos. (segundo método)

• El tamaño de la fuente por defecto (preestablecido) es de tamaño 3.Si se desea aumentar el tamaño al siguiente, se tienen las siguientes dos maneras:

• <FONT SIZE="4">.....</FONT> 1er. Método<FONT SIZE="+1">...</FONT> 2do. Método

• (El tamaño estándar es 3 + 1 nos da tamaño 4)

Otro ejemplo de comandos equivalentes

• <FONT SIZE="2">.....</FONT> 1er. Método<FONT SIZE="-1">...</FONT> 2do. Método

• (El tamaño estándar es 3 - 1 nos da tamaño 2)

Texto Preformateado

• Las directivas (<PRE>...</PRE>) permite visualizar el texto tal y como se encuentre colocado entre estas 2 directivas, con el formato que deseemos, con los retornos de carro sin ser especificados por <BR>, y las tabulaciones

• NOTA: No es recomendable usar tabulaciones, en su lugar es preferible poner espacios, (por medio de la barra de espaciar), ya que no todos los browsers tienen preestablecidos el mismo espacio de tabulador y podría modificarnos la distribución del texto dependiendo del navegador empleado.

Escribir y grabar con el nombre de pagina4.html en el directorio practicas-formatos la codificación del siguiente ejemplo.Visualizar detenidamente los resultados.

Nota: Se recomienda realizar la tabla en Word, para posteriormente pegarla

Alineación de párrafos. (derecha, izquierda y centro y justificado)

• Estas propiedades son de la directiva <P>....</P> Alinean el texto en la pantalla a la izquierda, derecha, centrado y justificado.

• <P ALIGN= "center"> texto centrado </p><P ALIGN= "left"> texto alineado a la izquierda </p><P ALIGN= "right"> texto alineado a la derecha </p><P ALIGN= "justify"> texto justificado </p>

Escribir y grabar con el nombre de pagina5.html en el directorio practica-formato la codificación del siguiente ejemplo. Visualizar detenidamente los resultados.

El resultado se verá como sigue

Tarea 3

• Diapositivas– 24– 48– 53– 59– 61

Líneas Divisorias• Son Separadores de texto en forma de Líneas Horizontales.

La directiva es: <HR> (Horizontal Rule) y es una directiva abierta• Por defecto nos da una línea de una altura=1 y una

anchura=100%• Pudiendo cambiar alto, ancho alineación y color de la misma.

Ejemplo:<HR SIZE=5 WIDTH="75%" COLOR="#ff0000" ALIGN = CENTER>

• <html>• <head>• <title>Formulario de Recepcion de Pedidos</title>• </head>• <body>• <H1 align="CENTER">Formulario de Recepcion de Pedidos</H1>• <FORM action="procesar1.php">• Nombre usuario:• <INPUT type="text" name="NombreUsuario" size="20"><BR>• Listado de Libros Disponibles:• <UL>• <LI>Libro A - (Precio = 10) - Unidades:• <INPUT type="text" name="UnidadesA" size="2">• </LI>• <LI>Libro B - (Precio = 12) - Unidades:• <INPUT type="text" name="UnidadesB" size="2">• </LI>• </UL>• <P align="CENTER"><INPUT type="submit" value="enviar"></P>• </FORM>• </body>• </html>

• <html>• <head>• <title>• Pagina Principal• </title>• </head>• <body>• <p>• <b> • <h1> <font color = red> <center> Tipos de Celulares </center> </h1>• <hr> <font color = blue>• <table border = "1">• <tr>• <td> <font color = green>• Telefonica • </td>• <td> <font color = green> • http://telefonia.mercadolibre.com.ar/• </td>• </tr>• <tr>• <td> <font color = orange>• Comcel• </td>• </tr>• </table>• </body>• </html>

• <HTML> • <HEAD> • <TITLE>Ejemplo mas largo </TITLE> • </HEAD> • <BODY bgcolor="#80ffff" TEXT="#0000ff"> • <H1>Un ejemplo mas largo </H1> • Este es un documento HTML sencillo. Este es el primer párrafo. <P> • Este es el segundo párrafo, con efectos especiales. Esta es una palabra en <I>cursiva</I>. Esta es

una palabra en <B>negrita</B>. • He aquí una imagen GIF:<P> • <IMG SRC="http://www.unav.es/iconos/marcaparaweb.gif">. <P> • Este es el tercer párrafo, que demuestra links. He aqui un hypertext de la palabra <A

HREF="http://www.unav.es/servicio/informacion/files/file/memorias/memoria2007-08.pdf">Acerca de la Universidad de Navarra</A> a un documento llamado:"memoria2007-08.pdf". <P>

• <H2>Una cabecera de segundo nivel </H2> • He aquí una sección de texto que se debe mostrar como una fuente de ancho fijo:<P> • <PRE>Con diez cañones por banda, • viento en popa a toda vela • no corta el mar sino vuela • un velero bergantín</PRE> • <HR> • Fin del documento • </BODY>• </HTML>

html

Education