egarciad@iestpaijan.edu.pe 2014- I CONCEPTOS HTML (Hyper Text Markup Language) Lenguaje que permite disear las paginas web. Es un lenguaje de hipertexto. Permite escribir texto de forma estructurada. Compuesto por etiquetas (marcan el inicio y fin de cada elemento del documento) Documento hipertexto contiene texto, imgenes sonido y video (documento multimedia). NAVEGADORES Interpreta el cdigo HTML de la pgina. EDITORES Programa que permite redactar documentos. Editores visuales. Evitan la escritura de cdigo HTML (la pagina se construye). Editores de texto. La pagina se crea a travs del cdigo HTML. Editores Visuales: Macromedia Dreamweaver, Microsoft Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional y Arachnophilia. Editores de texto.(solo lo necesario) Wordpad o el Bloc de notas Etiquetas. La unida bsica del lenguaje HTML son las etiquetas. Una etiqueta es una cadena formada por los smbolos de menor y mayor y entre ellos una cadena que determina el nombre de la etiqueta. < Nombre_de_la_etiqueta > Generalmente las etiquetas se utilizan como delimitadores, por lo cual una etiqueta esta compuesta de una parte que indica el inicio u el complemento que indica la finalizacin. Sintaxis: Etiqueta con inicio u fin <Etiqueta_Inicio> Texto contenido < / Etiqueta_Fin> Sintaxis: Etiqueta Simple <Etiqueta_Inicio> Tambin existen etiquetas simples las cuales se componen solo de la parte de inicio. Atributos de las etiquetas. Las etiquetas contienen una serie de parmetros para poder personalizar la operacin que deslizan. Estos parmetros son llamadas Atributos de la etiqueta. Los atributos son parmetros que se configuran en el momento de generar una etiqueta. Sintaxis: < Etiqueta atributo1= Valor atributo2=Valor > Texto Contenido </Etiqueta> Notas: 1. El atributo se genera del par nombre = Valor 2. El valor del atributo siempre se escribe entre comillas. 3. Los atributos son denotados dentro de la etiqueta de inicio. 4. Los atributos se separan entre ellos a travs de espacios en blanco. Estructura de una pagina web en HTML La estructura bsica de un documentos HTML esta compuesto por una secuencia de etiquetas. A continuacin se muestra la estructura bsica de un documentos HTML. <html> <head> Datos de configuracin del documento. </head> <body> Cuerpo del documento. </body> </html> 1. La etiqueta <html> indica el inicio de un documento HTML. 2. La etiqueta <head> es util, para configurar datos acerca del documento 3. La etiqueta <body> agrupa a todo el contenido del documento <body bgcolor="#0000FF"> <body bgcolor="blue"> <body background="fondo.gif"> <body background="imagenes/fondo.gif"> <body text="#FF0000"> <body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0" > Algunos atributos de body Color Hexadecimal Nombre #FFFFFF white #000000 black #000080 navy #0000FF blue #008000 green #008080 teal #00FF00 lime #00FFFF aqua #800000 maroon #800080 purple #808000 olive #808080 gray #C0C0C0 silver #FF0000 red #FF00FF fuchsia #FFFF00 yellow Colores en hexadecimal Creacin de la primera pagina Crear un directorio de trabajo para la pagina.(ejm. mipagina) en mis documentos Con el bloc de notas escribir el siguiente codigo: <html> <head> <title>pagina de inicio</title> </head> <body bgcolor="99CC99" > </body> </html> Guardar el archivo guardar como con el nombre inicio.html en la carpeta mipagina La pagina resultante es como sigue: TEXTO Se requiere dar formato al texto Algunos caracteres especiales < y > indican inicio y fin de etiqueta Carcter Representacin < < > > á Á é É í Í ó Ó ú Ú ñ Ñ ™ Se puede escribir directamente sin la representacin en HTML   espacio en blanco Etiqueta Significado Ejemplo <b> negrita curso HTML <i> cursiva curso HTML <u> subrayado curso HTML <s> tachado curso HTML <big> aumenta el tamao de la fuente curso HTML <small> disminuye el tamao de la fuente curso HTML etiquetas asociadas al tipo de letra: <!-- y //-->. comentarios <br> Saltos de lnea,no requiere fin de etiqueta <pre> y </pre> texto preformateado. Aparece tal como se lo escribe, no requiere saltos de linea ni espacios en blanco en HTML No permite incluir en el texto etiquetas: <img> (para incluir imgenes), <object> (para incluir objetos como animaciones), <big>, <small>, <sub> ni <sup> <hr> Regla horizontal separar secciones dentro de una misma pgina. no precisa ninguna etiqueta de cierre algunos atributos de la regla horizontal: Atributo Significado Posibles valores align alineacin de la regla dentro de la pgina left (izquierda) right (derecha) center (centro) width ancho de la regla un nmero, acompaado de % cuando se desee que sea en porcentaje size alto de la regla un nmero noshade eliminar el sombreado de la regla no puede tomar valores Inicio<hr align="left" width=50%" size=10" noshade>Bienvenidos a mi pgina. <html> <head> <title>pagina de inicio</title> </head> <body bgcolor="99CC99" background="imagenes/fondopatas.gif" leftmargin="40" topmargin="40" marginwidth="40" marginheight="40"> hola mundo este es un texto comn como estn, cancinó<br> cuando se esta pensando <pre>Hola, BIENVENIDOS esta ES MI PGINA WEB y esto un texto preformateado</pre> Inicio de un separador horizontal<hr align="left" width="50%" size="10" noshade>Bienvenidos a mi pgina. </body> </html> Una ilustracin simple <font> y </font> propiedades del texto Atributo Significado Posibles valores face fuente nombre de la fuente, o fuentes color color del texto nmero hexadecimal o texto predefinido size tamao del texto valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamao por defecto, aadiendo + o - delante del valor <font color="#993366" size="4" face="Arial"> Bienvenidos a mi pgina, texto con propiedades </font> <body> <basefont color="#006699" size="4" face="Arial"> fuente para todo el documento Encabezados - Ttulos Etiqueta Ejemplo <H1> Ttulo 1: HTML <H2> Ttulo 2: HTML <H3> Ttulo 3: HTML <H4> Ttulo 4: HTML <H5> Ttulo 5: HTML <H6> Ttulo 6: HTML <H2 align="center">El lenguaje HTML</H2><H4>Apartado 1: Las etiquetas</H4> <p> y </p> Parrfos atributo align: cuyos valores pueden ser left (izquierda), right (derecha), center (centrado) o justify (justificado). <div> y </div> agrupar bloques de texto, pero con la diferencia de que la separacin entre ellos es menor. Tiene los mismos atributos de alineacin. <center> y </center> Texto centrado <p align="center">este es un parrafo muy simple (centrado)</p> <p>Aquí encontra otro prrafo (la separacion es amplia).</p> <div align="center">otro parrafo con agrupacion de bloques </div> <div>note que el espacio es menor</div> <center>texto centrado</center> Etiquetas para Prrafo. Etiqueta para delimitar prrafo. Atributos: Atributo Operacin Valores align Alinea el prrafo center left right justify Ejemplos. <p align=center>Es un discurso ciertamente muy interesante de un innovador que comenta su forma de afrontar los cambios en un camino profesional, como el de cualquiera de nosotros, sujeto cada vez con mucha mayor frecuencia a ms cambios. </p> <p>Es un discurso ciertamente muy interesante de un innovador que comenta su forma de afrontar los cambios en un camino profesional, como el de cualquiera de nosotros, sujeto cada vez con mucha mayor frecuencia a ms cambios. </p> <p> Texto prrafo </p> Etiqueta para Encabezados. Para generar encabezados en un documento HTML, se utilizan las etiquetas de encabezado. Las etiquetas de encabezado formatean el texto en estilo negritas y con un tamao de fuente especifico. Sintaxis: <hn>Texto de encabezado del documento </hn> donde: h. Indica que se esta generando un encabezado o titulo. n. Es un numero entero que indica el tipo de encabezado Valore posibles para n = {1, 2, 3, 4, 5, 6} Al terminar la etiqueta de encabezado, se genera automticamente un salto de lnea. Atributos. Atributo Operacin Valores align Alinea el encabezado center left right justify Encabezados. Ejemplos Encabezado 1, tamao fuente: 6 Encabezado 2, tamao fuente: 5 Encabezado 3, tamao fuente: 4 Encabezado 4, tamao fuente: 3 Encabezado 5, tamao fuente: 2 Encabezado 6, tamao fuente: 1 Encabezados. Ejemplos Por default: Si no se indica una alineacin se aplica alineacin a la izquierda Formato del texto. Cuando se requiere personalizar el formato del texto en documentos HTML, se utilizan varias etiquetas, una de las mas importantes es la etiqueta <font> La etiqueta font permite configurar: 1. Tipo de letra. 2. Color de la letra 3. Tamao de la letra Sintaxis. <font>Texto para formatear</font> Atributo Operacin Valores face Determina tipo de letra Fuentes del sistema cliente size Determina el tamao de la letra {1, 2, 3, 4, 5, 6, 7} color Configura el color de la letra Tabla de colores HTML Importante. El conjunto de fuentes, es aquel que existe en el equipo donde ser reproducido el documento HTML. Configurando tipo de letra Tipo: Arial black Tipo: times New Roman Tipo: symbol Configurando tipo de letra Se pueden configurar varios tipos de letras, as en caso que el equipo cliente no cuente con la primera tendr la opcin de ejecutar alguna de la lista de configurada. Fuente conocida por el diseador, pero no conocida por el equipo cliente En este caso se muestra que el tipo de letra: miFuente no existe en el equipo cliente, pero se ejecuta la configuracin de una segunda fuente para el texto Tamao de la letra. Para determinar el tamao de la letra se utiliza el atributo size de la etiqueta <font>. Configuracin de tipo y tamao de la letra. Configuracin del tamao de la letra. Configuracin del Color de la letra. Para determinar el color de la fuente se realiza mediante el atributo color de la etiqueta <font>. El valor para el atributo se puede proporcionar con el nombre del color (en ingles) o con un valor hexadecimal. Color mediante Cdigo Hexadecimal. Color mediante nombre del color. Separador Vertical La etiqueta <hr> permite agregar separadores verticales en un documento HTML. Sintaxis. <hr> Atributos. Atributo Operacin Valores width Determina el ancho (longitud horizontal) del separador. Valor entero en pixeles o en porcentaje size Determina la altura o espesor del separador. En pixeles noshade Si se aparece este atributo se elimina la sombra del separador Ninguno align Alineacin del separador Alinea el separador (solo si no esta al 100% de ancho) Texto en negritas. La etiqueta <b> permite aplicar estilo negritas al texto del documento HTML. Sintaxis. <b>Texto para formatear</b> Texto en estilo Negritas Texto en estilo Normal Texto en Cursivas. La etiqueta <i> permite aplicar estilo cursivas al texto del documento HTML. Sintaxis. <i>Texto para formatear</i> Texto estilo normal Texto estilo Cursivas Texto Subrayado. La etiqueta <u> permite aplicar estilo subrayado al texto del documento HTML. Sintaxis. <u>Texto para formatear</u> Texto estilo Subrayado. Texto estilo Normal. Etiquetas anidadas. Secuencia de apertura: <b> <i> <u>
secuencia de cierre: </u> </i> </b>
1 2 3 3 2 1 1 2 3 3 2 1 Esto aplica para todas las etiquetas de formato de texto. Marquesinas <marquee bgcolor="#006699" behavior="alternate" direction="right"> <b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b> </marquee> Listas <li>Perro</li> <li>Gato</li> <li>Periquito</li> Perro Gato Periquito <marquee> y </marquee>. behavior alternate scroll slide direction down up left right <ul> y </ul>. Lista desordenada vieta circle (crculo), disc (disco) o square (cuadrado). <ul type="circle"> <li>Perro</li> <li>Gato</li> <li>Periquito</li> </ul> <ol> y </ol>. Lista ordenada type 1 (nmeros), a (letras minsculas), A (letras maysculas), i (numeros romanos en minsculas) o I (nmeros romanos en maysculas). Listas anidadas: combinacin de las anteriores. 1. Crear una pagina de inicio en blanco 2. Colocar un titulo centrado y subrayado (mi pagina personal) 3. Insertar una marquesina (con fondo rojo, tamao de letra 5, y comportamiento continuo. 4. Insertar un prrafo de texto con sangra a la izquierda y alineacin a la izquierda. 5. Crear una divisin horizontal . 6. Escribir un texto ( prrafo) centrado que indica una frase arbitraria. 7. Insertar una divisin horizontal. 8. Insertar un texto preformateado que introduce a nuestras ocupaciones principales (centrado). 9. Crear una lista que muestra las reas de inters de informacin. 10.Insertar listas anidadas a cada item. Un avance ENLACES hiperenlace, hipervnculo, o vnculo <a> y </a>. href especifica la pgina a la que est asociado el enlace Referencia absoluta: Conduce a una ubicacin externa al sitio Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio <a href="http://www.aulaclic.com">Visita www.aulaclic.com</a> <a href="inicio1.html">cambiar a otro documento "ref. relativa"</a> <a href="../mipagina/imagenes/inicio1.html">otra carpeta </a> <a href="//D:/diplomado/tutoriales/www.aulaclic.es/html/index.htm">navegar por el tutorial</a> Destino del enlace determina en qu ventana va a ser abierta la pgina vinculada atributo target _blank Abre el documento vinculado en una ventana nueva del navegador. _self Abre el documento vinculado en el mismo marco o ventana que el vnculo Anclas o puntos de fijacin permite ir directamente al apartado deseado en un documento extenso <a name="miancla"></a>Texto con ancla define el ancla <a href="#miancla">Enlace al ancla</a> lleva al ancla <a href="inicio1.html" target="_blank"> cambiar a otro documento "ref. relativa"</a> <br> Correo electrnico: <a href="mailto:jucebeva@hotmail.com">mi e-mail </a> <a href="mailto:jucebeva@hotmail.com?subject=el asunto del mensaje"> mi e-mail </a> Vnculo a ficheros para descarga: <a href="sib1.doc" tarjet=_blank > haz clic aquí para descargarte el fichero </a> IMAGENES <img> src : especifica el nombre de la imagen Las imgenes pueden ser de formatos diferentes: bmp, gif, jpg, etc <img src="imagenes/gatito.gif" alt="imagen ejemplo"> <img src="imagenes/foto.gif" alt="mi fiesta"> El atributo border puede tomar valores numricos <img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4"> imagen con borde y con un enlace: <a href="inicio1.html" target="_blank" > <img src="imagenes/gatito.gif" border="4" > </a> width (anchura) y height (altura) tamao de la imagen <img src="imagenes/foto.gif" alt="mi fiesta" width="500" height="400"> Alineacion de la imagen align Este atributo indica la alineacin de las imgenes con respecto a la lnea de texto en la que se encuentran. Los valores del atributo align pueden ser los siguientes: bottom inferior left izquierda middle medio right derecha texttop texto superior top superior Este <img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4" align="middle"> es un grafico TABLAS <table> y </table> INICO Y FIN DE TABLA <tr> y </tr> Inicio y fin de fila <td> y </td> columna o celda <table> inicio de tabla <tr> inicio de fila 1 <td></td> celda 1 de la fila 1 <td></td> celda 2 de la fila 1 </tr> fin de la fila 1 <tr> inicio de fila 2 <td></td> celda 1 de la fila 2 <td></td> celda 2 de la fila 2 </tr> fin de la fila 2 .. </table> fin de la tabla Atributos de una tabla: Atributo Significado Posibles valores width ancho de la tabla un nmero, acompaado de % cuando se desee que sea en porcentaje height altura de la tabla un nmero, acompaado de % cuando se desee que sea en porcentaje cellpadding espacio entre el contenido de las celdas y el borde un nmero cellspacing espacio entre celdas un nmero border grosor del borde un nmero align alineacin de la tabla dentro de la pgina left (izquierda) right (derecha) center (centro) bgcolor color de fondo nmero hexadecimal background imagen de fondo nmero hexadecimal bordercolor color del borde nmero hexadecimal <table width="50%" border="2" align="center" cellspacing="0" bordercolor="green" bgcolor="blue"> nombre descripcin FOTOGRAFIA FIESTA 3 DE JULIO POR EL CENTENARIO DE LA FACULTAD aqui va texto, imagenes, video GATITO GRAFICO EXTARIDO DEL TUTORIAL OTRO CUALQUIERA PUEDE IR CUALQUIER COSA O SIMPLEMENTE TEXTO <table border="2"> <tr> <td>nombre</td> <td>descripocion</td> <td>FOTOGRAFIA</td> </tr> <tr> <td>FIESTA 3 DE JULIO</td> <td>POR EL CENTENARIO DE LA FACULTAD</td> <td>aqui va texto, imagenes, video</td> </tr> <tr> <td>GATITO</td> <td>GRAFICO EXTARIDO DEL TUTORIAL</td> <td><img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4"></td> </tr> <tr> <td>OTRO CUALQUIERA</td> <td>PUEDE IR CUALQUIER COSA</td> <td>O SIMPLEMENTE TEXTO</td> </tr> </table> Atributos de una celda: Atributo Significado Posibles valores width ancho de la tabla un nmero, acompaado de % cuando se desee que sea en porcentaje height altura de la tabla un nmero, acompaado de % cuando se desee que sea en porcentaje align alineacin horizontal del contenido de la celda left (izquierda) right (derecha) center (centro) valign alineacin vertical del contenido de la celda baseline (lnea de base) bottom (inferior) middle (medio) top (superior) bgcolor color de fondo nmero hexadecimal background imagen de fondo nmero hexadecimal bordercolor color del borde nmero hexadecimal <tr align="center" bgcolor="yellow"> <td bgcolor="purple">GATITO</td> Para toda la fila la alineacin es Centrado y el fondo amarillo Solo para la celda el fondo es prpura <th> y </th> idntico a td pero centrado y negrilla Titulo de columna colspan y rowspan Combinacin de celdas colspan especifica el nmero de columnas por las que se extender la celda rowspan especifica el nmero de filas por las que se extender la celda combinacin de 4 columnas NOMBRE DATOS FECHA NOTA 1 NOTA 2 JUAN CARLOS 10.75 12.97 16/AGOSTO/2007 LUISA 20.65 2.65 30/AGOSTO/2007 <table width="575" border="2" cellspacing="2"> <tr align="center" valign="middle"> <th colspan="4">combinacion de 4 columnas</th> </tr> <tr align="center" valign="middle"> <th rowspan="2">NOMBRE</th> <th colspan="2">DATOS</th> <th rowspan="2">FECHA</th> </tr> <tr align="center" valign="middle"> <th>NOTA 1</th> <th>NOTA 2</th> </tr> <tr align="center" valign="middle"> <td>JUAN CARLOS</td> <td>10.75</td> <td>12.97</td> <td>16/AGOSTO/2007</td> </tr> <tr align="center" valign="middle"> <td>LUISA</td> <td >20.65</td> <td >2.65</td> <td>30/AGOSTO/2007</td> </tr> </table> MARCOS (FRAME) <frameset> y </frameset> Define el conjunto de marcos no requiere las etiquetas <body> y </body> Atributo Significado Posibles valores cols tamao de cada una de las columnas en que se divide el documento un nmero (acompaado de % cuando se desee que sea en porcentaje) por cada columna, separados por comas. rows tamao de cada una de las columnas en que se divide el documento un nmero (acompaado de % cuando se desee que sea en porcentaje) por cada fila, separados por comas. frameborde r aparece o no el borde de los marcos yes no framespaci ng separacin entre los marcos un nmero border grosor del borde un nmero, acompaado de % cuando se desee que sea en porcentaje bordercolor color del borde nmero hexadecimal <frame> indica el documento a cargar en el marco atributos de un marco: Atributo Significado Posibles valores frameborder aparece o no el borde del marco yes o 1 no o 0 name nombre del marco cualquier valor noresize si aparece, el usuario no podr redimensionar el tamao de este marco no puede tomar valores marginwidth anchura del margen con respecto a los bordes del marco un nmero, acompaado de % cuando se desee que sea en porcentaje marginheight altura del margen con respecto a los bordes del marco un nmero, acompaado de % cuando se desee que sea en porcentaje scrolling se mostrar o no la barra de desplazamiento cuando la pgina del marco no se pueda visualizar completamente en l yes no auto src documento que se cargar en el marco ruta y nombre del documento <frameset rows="90,*" framespacing="3" frameborder="yes" border="3" bordercolor="blue"> <frame src="titulo.html" name="marcosuperior" frameborder="yes" scrolling="yes" noresize> <frameset cols="150,*" framespacing="3" frameborder="yes" border="3" bordercolor="red"> <frame src="menu.html" name="marcoizquierdo" scrolling="yes" noresize> <frame src="inicio.html" name="marcoderecho"> </frameset> </frameset> Destino de los enlaces de un marco <a href="inicio1.html" target="marcoderecho">matematicas</a> Los nombres de los marcos pueden constituirse en el destino De un documento En la pgina del marco izquierdo (menu.html) crear el siguiente enlace: FORMULARIOS Permite recoger datos introducidos por el usuario. Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens desplegables, y botones <form> y </form> indican el inicio y fin de un formulario El atributo action indica una direccin de correo electrnico o la direccin del programa que se encargar de procesar el contenido del formulario. El atributo method indica el metodo mediante el que se transfieren las variables del formulario. Su valor puede ser get o post ELEMENTOS DE UN FORMULARIO <textarea> y </textarea> rea de texto <textarea name=area1" cols="30" rows="3"> Aqu se escribe el texto</textarea> <input> elemento de entrada atributo name indica el nombre del elemento de entrada atributo type indica el tipo de elemento de entrada. El atributo size indica el nmero de caracteres El atributo maxlenght indica el nmero de caracteres El atributo value indica el valor inicial del campo de texto Elementos para type: <input name="campo" type="text" value="Campo de texto" size="20" maxlength="15"> <input name="contra" type="password" value="contrasea" size="20" maxlength="15"> TEXTO CONTRASEA <input name="boton" type="submit" value="Enviar"> BOTON <input name="casilla" type="checkbox" value="acepto" checked> CASILLA DE VERIFICACION <input name="prefiere" type="radio" value="estudiar" checked> <input name="prefiere" type="radio" value="trabajar"> BOTON DE OPCION <select name="animal" size="3" multiple> <option selected>---Elige animales---</option> <option value="ave">Loro</option> <option>Perro</option> <option>Gato</option> <option>Pez</option> </select> SELECION MULTIPLE <input name="borrar" type="reset" id="borrar" value="borrar"> RESTABLECER