UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLGICOS COMPUTACIN

CICLO: 02/2013 Nombre de la Practica: Lugar de Ejecucin: Tiempo Estimado: MATERIA: GUIA DE LABORATORIO #0 Repaso HTML5 - CSS3. Centro de Cmputo. 2 horas con 30 minutos. Lenguajes Interpretados en el Cliente.

I. OBJETIVOS

Recordar cmo crear un documento HTML5 con la estructura bsica. Recordar cmo aplicar correctamente la sintaxis y las diferentes formas de construccin de selectores en la creacin de reglas de estilo.
II. INTRODUCCION TEORICA

Estructura semntica bsica de HTML5 Al realizar un sitio web nos basamos en una estructura, para HTML5 esto tiende a ser una estructura muy semntica, y lo mejor de todo, sus etiquetas son muy bsicas por eso vamos a ver como es una estructura bsica en un documento HTML5. Este lenguaje tiende a hacerse ms simple y humano al escribir cdigo. Empecemos con el DOCTYPE, es muy sencillo de escribir y ha sido recortado, despus de la etiqueta HTML la cual tiene el atributo LANG para el idioma del sitio.

Ahora toca el turno del ttulo, este sigue siendo el mismo, con diferencia de la etiqueta META, donde le decimos al navegador que tipo de codificado es el documento html, de preferencia usemos el UTF-8 que acepta nuestros acentos y con ms compatibilidad. En realidad es algo demasiado corto y que no quita mucho tiempo, todo esto sigue estando en la etiqueta HEAD que no ha cambiado para nada, es algo muy parecido a XHTML, la cuestin es resumir el cdigo.

1 / 14

Gua # 0: Repaso HTML5 - CSS3.

Pasemos a las etiquetas link, son las que enlazan nuestros estilos CSS entro otros. Estas son muy cortas ahora usaremos algo que ya exista, el atributo REL que usamos en los links para cuestiones de SEO(Search Engine Optimization). REL es para decir, que estamos enlazando, ya que el atributo TYPE no se utiliza a menos que usemos para enlazar el FEED.

Ya terminamos con la parte no visible de la pgina web, es el turno del cuerpo o BODY, esta etiqueta sigue siendo til para lo mismo, pero a continuacin empieza algo interesante que son las etiquetas de la estructura del sitio visual. La etiqueta HEADER es la cabecera donde va el nombre del sitio, el logotipo y descripcin de la pgina web, ejemplo. Recomiendo que solo se use un H1 en una cabecera por cuestiones de SEO, pero es posible poner ms de un H1 y HEADER.

Como pueden ver, la etiqueta HEADER es muy equivalente a crear un DIV con ID=header, pero ahora tenemos una etiqueta especial para ello. Pasamos con el contenido o SECTION usando H2 de ttulo y el contenido en etiquetas adentr de una etiqueta llamada ARTICLE para artculos o post, esto por cuestiones de SEO que es muy recomendable tambin, ejemplo:

SECTION es el equivalente a un DIV con ID=contenido y ARTICLE a un DIV con ID=post o articulo
Lenguajes Interpretados en el Cliente 2

Gua # 0: Repaso HTML5 - CSS3.

Otra etiqueta interesante es la etiqueta ASIDE, lo que viene siendo nuestro SIDEBAR o barra lateral y es muy fcil de implementar con H3 de ttulo y P de contenido dentro de ella.

ASIDE es nuestro equivalente a un DIV con ID=sidebar o barra. Y finalizando con el pie de la pgina con la etiqueta muy obvia FOOTER , un ejemplo:

FOOTER es nuestro equivalente a un DIV con ID=footer o pie. Ahora el cdigo debera tener la siguiente estructura:

Lenguajes Interpretados en el Cliente

Gua # 0: Repaso HTML5 - CSS3.

Explicacin de algunos atributos CSS

font-size La propiedad font-size establece el tamao del texto en puntos (pt), pulgadas (in), centmetros (cm), o pixels (px). Ejemplos: {font-size: 12pt} {font-size: 1in} {font-size: 5cm} {font-size: 24px} font-family La propiedad font-family establece la fuente del texto. Se puede especificar una nica fuente, como por ejemplo: {font-family: Arial} u otras fuentes alternativas, separadas por una coma, como por ejemplo: {font-family: Arial, Helvtica} En el ejemplo anterior, nos aseguramos que los sistemas que no soporten la fuente Arial, utilicen la fuente Helvtica. Es muy aconsejable especificar, como ltimo recurso, un nombre genrico de familia de fuentes. Ejemplo: {font-family: Arial, Helvetica, sans-serif} Estos nombres genricos de familia de fuentes (serif, sans-serif, cursive, fantasy, o monospace) tienen la ventaja de que son representados como las fuentes que tenga instaladas el usuario. Si se hace referencia a una fuente cuyo nombre consiste en varias palabras (separadas por espacios en blanco), hay que englobarla entre comillas. Ejemplo: {font-family: "Courier New"} font-weight La propiedad font-weight establece el espesor de la fuente: {font-weight: medium} {font-weight: bold} Los valores aceptados (extra-light, light, demi-light, medium, demi-bold, bold, y extra-bold) dependen en las fuentes que tenga instaladas el usuario. (Por ejemplo, el sistema del usuario puede que slo permita medium y bold para una determinada fuente). font-style La propiedad font-style establece la fuente como cursiva: {font-style: italic} En el borrador de la W3C se contemplan adems otros posibles estilos (minsculas, oblicuas, etc.)

Lenguajes Interpretados en el Cliente

Gua # 0: Repaso HTML5 - CSS3.

line-height Este atributo establece la separacin entre lneas, que se puede expresar en puntos (pt), pulgadas (in), centmetros (cm), pixels (px) o porcentaje (%). Ejemplo: {line-height: 20pt} Tambin se puede expresar como un porcentaje del valor por defecto: {line-height: 150%} En el Explorer 3.0, el espaciado se aade antes de las lneas, no despus de ellas. Adems este atributo se comporta de forma impredecible con texto que usa diferentes tamaos de texto en la misma lnea. color Este atributo establece el color del texto de acuerdo con su valor hexadecimal, o usando los nombres de colores: {color: #33CC00} {color: red} Los nombres de algunos de los colores son:

Text-decoration Este atributo permite remarcar el texto. Los valores soportados son underline (subrayado), linethrough (tachado), none (ninguno) e italic (cursiva). Ejemplos: {text-decoration: underline} {text-decoration: line-through}

Lenguajes Interpretados en el Cliente

Gua # 0: Repaso HTML5 - CSS3.

text-align Este atributo permite justificar los elementos HTML a la izquierda, al centro o a la derecha. Ejemplos: {text-align: left} {text-align: center} {text-align: right} text-indent Adems de establecer los mrgenes, se puede provocar una indentacin del texto (es decir, que la primera palabra del prrafo se desplace una cantidad deseada). Se puede expresar en puntos, pulgadas, centmetros o pixels. Por ejemplo: P {text-indent: 0.5cm} Hace que los prrafos que se crean con la etiqueta <P>, empiecen con su primera lnea indentada 0.5 centmetros. Se pueden usar valores negativos, que sacan el texto hacia los mrgenes. background Se utiliza este atributo para destacar secciones de una pgina, estableciendo un color de fondo o una imagen de fondo. Para la primera se especifica con la propiedad background-color, mientras que para la segunda se especifica con la propiedad background-image. Para establecer un color de fondo, se especifica su valor hexadecimal, o un nombre de color HTML (ver La propiedad color visto anteriormente). Ejemplos: /* Para colores */ BODY {background-color:red} BODY {background-color:#6633FF} Tambin se puede colocar una imagen de fondo en el mbito de la etiqueta. Es decir, se puede poner, por ejemplo, una imagen de fondo en un prrafo determinado. Para colocar una imagen, se especifica el URL entre parntesis (no entre comillas, como es lo habitual). Por ejemplo: {background-image: URL(http://www.wmaestro.com/webmaestro/docs/nubes.jpg)} En este caso se ha puesto el URL absoluto, es decir, la referencia completa en el servidor. Pero es ms conveniente hacerlo de forma relativa, es decir con respecto al documento HTML. Si el fichero de imagen y el documento HTML estn en el mismo directorio, no hay que poner ningn URL, sino el nombre del fichero de imagen directamente. En el ejemplo anterior sera: {background-image: URL(nubes.jpg)} Vamos a ver una aplicacin prctica: poner esta imagen de fondo a un prrafo, utilizando el mtodo de incluir el estilo en la etiqueta <P>: <P STYLE="background: URL(nubes.jpg)"> Este prrafo tiene un fondo con imgenes, al igual que con el HTML convencional se consigue para toda una pgina, pero en este caso est limitado al mbito de esta etiqueta. <P> En cambio, este otro prrafo no tiene imagen de fondo, porque no se le ha incluido este atributo. Este es el resultado:
Lenguajes Interpretados en el Cliente 6

Gua # 0: Repaso HTML5 - CSS3.

Este prrafo tiene un fondo con imgenes, al igual que con el HTML convencional se consigue para toda una pgina, pero en este caso est limitado al mbito de esta etiqueta. En cambio, este otro prrafo no tiene imagen de fondo, porque no se le ha incluido este atributo. Valores y unidades de medida Como se ha podido observar en algunos de los ejemplos es necesario especificar en algunas propiedades medidas mediante valores y unidades de medida. Por ejemplo, para tamaos de fuente, para mrgenes, para grosor de bordes, etc. El valor de medida est constituido por un signo opcional (+ | -) seguido por un nmero (con o sin punto decimal). La unidad de medida puede ser relativa o absoluta. Las unidades relativas son: em, ex, px. Las unidades absolutas son: in, cm, mm, pt, pc (picas). Ejemplo: P{ font-size:12pt; text-indent:10px; margin-left:1in; margin-right:1in; } Acerca de los colores y fondos En hojas de estilo se pueden especificar los colores de tres formas diferentes. Dos de ellas ya se mostraron en la seccin anterior. En esta seccin se explicarn las tres formas: La primera forma es utilizando el nombre de color predefinido. Debe tener cuidado que sea un nombre vlido. No debe de llevar espacios en blanco. Ejemplo: H1 {color:red;} La segunda forma es utilizando el valor hexadecimal del color precedido del smbolo de numeral (#). Ejemplo: H1 {color:#FF3333;} La tercera forma, que es la novedosa, es utilizando notacin rgb, como se muestra a continuacin: H1 {color:rgb(255,0,0);} Note que en esta ltima forma debe especificar los valores de color dentro de un rango que va desde 0 hasta 255 en base decimal. Las propiedades de estilo en las que se pueden establecer colores son todos los elementos para presentacin de texto y los elementos para colocar fondos. Por ejemplo: P {background-color:rgb(0,0,64); color:rgb(255,0,0);

Lenguajes Interpretados en el Cliente

Gua # 0: Repaso HTML5 - CSS3. III. MATERIALES Y EQUIPO

Para la realizacin de la gua de prctica se requerir lo siguiente: No. Requerimiento 1 Gua de prctica #0: Repaso HTML5 - CSS3. 2 Computadora con navegadores y editor de texto instalado 3 Memoria USB
IV. PROCEDIMIENTO

Cantidad 1 1 1

Indicaciones: Para todos los ejemplos de esta gua de prctica se utilizar el Notepad++ o puede ocupar otro editor de texto. Se pide que cuando guarde el archivo lo haga con extensin .html, En todo caso, la nica extensin diferente que se utilizar en esta prctica ser la extensin .css, para cuando se requiera crear un script independiente. Edite los ejemplos que se presentan y analice su funcionamiento. Nota: Cree una carpeta con su nombre y guarde ah el trabajo de esta prctica. //Ejercicio 1: Creacin de formulario sencillo (nombre del archivo: contactos.html)
!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>HTML5 Formulario de Contacto</title> <link rel="stylesheet" href="estilo.css" /> </head> <body> <form class="contact_form" action="enviado.html" method="post"> <ul> <li> <h2>Formulario de Contacto</h2> </li> <li> <label for="name">Nombre:</label> <input type="text" placeholder="usuario" required /> </li> <li> <label for="email">Email:</label> <input type="email" name="email" placeholder="usuario@udb.edu.sv" required /> </li> <li> <label for="website">Sitio Web:</label> <input type="url" name="web" placeholder="www.udb.edu.sv" required /> </li> <li> <label for="Mensaje">Mensaje:</label> <textarea name="Mensaje" cols="40" rows="6" required ></textarea> Lenguajes Interpretados en el Cliente 8

Gua # 0: Repaso HTML5 - CSS3. </li> <li> <button type="submit" name="enviar" value="Guardar">Enviar</button> <button type="reset">Borrar</button> </li> </ul> </form> </body> </html>

//script1:estilo.css
*{/*asigna a todos los elementos*/ margin: 12px; padding: 0; } .contact_form h2 { background: none repeat scroll 0 0 #c1bfbf; border-radius: 5px; color: #164a20; display: block; font-family: calibri; font-size: 20px; padding: 5px; text-shadow: 1px 1px 1px #CCCCCC; width: 433px; } /*--- estilos para los ul y li del formulario ---*/ .contact_form ul { width:500px; list-style-type:none; margin:0px; padding:0px; } .contact_form li{ padding:12px; border-bottom:1px solid #eee; position:relative; } .contact_form label { color: #555555; display: inline-block; float: left; font-family: calibri; font-size: 13px; font-weight: bold; margin-top: 3px; margin: 0.5em auto; padding: 3px; width: 90px; } .contact_form input { height:20px; width:220px;

Lenguajes Interpretados en el Cliente

Gua # 0: Repaso HTML5 - CSS3. margin: 0.5em auto; padding:5px 8px; } .contact_form textarea { margin: 0.5em auto; padding:8px; width:300px; } .contact_form button { margin-left:90px; } /*----- estilos visuales de los elementos --------*/ .contact_form input, .contact_form textarea { border:1px solid #aaa; box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset; border-radius:2px; color: #888; font-size: 12px; padding-right:30px; -moz-transition: padding .25s; -webkit-transition: padding .25s; -o-transition: padding .25s; transition: padding .25s; } .contact_form input:focus, .contact_form textarea:focus { background: #fff; border:1px solid #555; box-shadow: 0 0 3px #aaa; padding-right:80px; } /* === Estilos de Validacion === */ .contact_form box-shadow: 0 border-color: } .contact_form box-shadow: 0 border-color: } input:required:valid, .contact_form textarea:required:valid { 0 5px #5cd053; #28921f; input:focus:invalid, .contact_form textarea:focus:invalid { 0 5px #d45252; #b03535

/* === Estilos del boton de Envio === */ button.submit,button.reset { padding: 9px 17px; font-family: Helvetica,calibri, Arial, sans-serif; font-weight: bold; line-height: 1; color: #444; border: none; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb)); background-image: -moz-linear-gradient(0% 100% 90deg, #BBBBBB, #FFFFFF); background-color: #fff; Lenguajes Interpretados en el Cliente 10

Gua # 0: Repaso HTML5 - CSS3. border: 1px solid #f1f1f1; border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } button.submit:hover { opacity:.55; cursor: pointer; color: #fff; } button.submit:active { border: 1px solid #222; box-shadow: 0 0 10px 5px #444 inset; }

//Script1: enviado.html
<!DOCTYPE HTML> <html lang="es"> <HEAD> <TITLE>Encuesta enviada</TITLE > <STYLE type="text/css"> BODY {color:#FF7F00; font-size:40pt;} H1 {text-align:center;} P {text-align:center; font-size:16pt;} </style> </HEAD> <BODY> <H1>El formulario ha sido enviado</H1> <P> <A href="contactos.html" target="_self">Regresar a formulario contactos</A> </P> </BODY> </HTML>

//Ejercicio 2: Maquetacin de html con CSS (nombre del archivo: index.html)

<!DOCTYPE html> <html lang="es"> <head> <title>ESTRUCTURA B&Aacute;SICA SEM&Aacute;NTICA EN HTML5 Y CSS3</TITLE> <meta charset="utf-8"/> <meta name="description" content="Estructuras B&aacute;ica Sem&aacute;ntica en html5 y css3 con responsive design"/> <link rel="stylesheet" href="css/estilos.css" /> </head> <body> <h1>ESTRUCTURA B&Aacute;SICA SEM&Aacute;NTICA EN HTML5</h1> <header> &lt;header&gt; </header> <nav> &lt;nav&gt; </nav> <section id="contenedor"> Lenguajes Interpretados en el Cliente 11

Gua # 0: Repaso HTML5 - CSS3. <section id="principal"> &lt;section&gt; <article id="art1"> &lt;article&gt; </article > <article id="art2"> &lt;article&gt; </article > <article id="art3"> &lt;article&gt; </article> </section> <aside> &lt;aside&gt; </aside> </section> <footer> &lt;footer&gt; </footer> </body> </html>

//Script1: estilos.css
*{/*asigna a todos los elementos*/ margin: 0; padding:0; } @font-face{ font-family :"chalet"; src: url("../fonts/chalet.eot"); src: url("../fonts/chalet.eot?#iefix") format("embedded-opentype"), url("../fonts/chalet.woff") format("woff"), url("../fonts/chalet.ttf") format("truetype"), url("../fonts/chalet.svg#chalet") format("svg"); font-weight:normal; font-style:normal; } body{ color: #FFF; font-family: "chalet",Helvetica,verdana; font-size: 2em; /* 16px = 12pt = 100% = 1em (es el ancho de la letra M)*/ } h1{ color: #f60; margin: 0.25em auto; /*se trabaja en parejas ancho y alto*/ text-align: center; text-shadow: 5px 5px 10px rgba(#255,255,255,0.5); } header, nav, footer { background: #1E6381; border-radius: 0.5em; margin: 0.5em auto; /*se trabaja en parejas alto y ancho*/ Lenguajes Interpretados en el Cliente 12

Gua # 0: Repaso HTML5 - CSS3. max-width:960px; padding:0.25em; text-align: center; } section#contenedor{ /*background: #FFF;*/ border-radius: 0.5em; margin: 0.5em auto; /*se trabaja en parejas alto y ancho*/ max-width:960px; padding:0; text-align: center; } section#principal, aside{ background: #1E6381; border-radius: 0.5em; display: inline-block; /* es el atributo como se mostrara dispocion de elemento */ margin: 0.25em auto; /*se trabaja en parejas alto y ancho*/ max-width:960px; min-height:200px; padding:0.25em; text-align: center; vertical-align: top; width: 65%; } #art1, #art2, #art3{ background: #011e30; border-radius: 0.5em; margin: 0.15em auto; min-height:15px; padding:0.15em; } aside{ padding: 0.33em; width: 30%; }

V. DISCUSION DE RESULTADOS

1. Agregar campos de DUI y nmero de telfono a formulario de ejercicio 1, manteniendo el formato de los css. Tambin agregue los selectores que investig. 2. Cree una pgina que presente su curriculum y aplique la estructura presentada en los ejemplos. Agregue estilos a los diferentes elementos de la pgina.
VI. INVESTIGACION COMPLEMENTARIA

Investigue sobre mtodo post y mtodo get para envi de informacin. Investigar sobre selectores hover, active, link y visited. Investigar sobre script de html.

Lenguajes Interpretados en el Cliente

13

Gua # 0: Repaso HTML5 - CSS3. VII. BIBLIOGRAFIA

Thomas A. Powell. HTML 4.0 Manual de Referencia. Traduccin de la 3ra Edicin en Ingls. Editorial,McGraw Hill Osborne. 2001. Madrid, Espaa. Willard, Wendy. Fundamentos de Programacin en HTML. Traducido de la 1ra Edicin en Ingls HTML 2.0 A beginners Guide. Editorial Mc-Graw Hill Osborne. 2002. Bogot, Colombia.

Lenguajes Interpretados en el Cliente

14