html5 y css3 introduccion al desarrollo web

HTML 5 y css3 Mgr. Kilbert Chusi Huamani

Eun lenguaje de marcado con el que se define el contenido de las páginas web. Básicamente se trata de un conjunto de etiquetas (Tags) que sirven para definir el texto y otros elementos que compondrán una página web, como imágenes, listas, vídeos, etc. < y mayor que > , como en este ejemplo: <Aquí dentro va el nombre de la etiqueta/> ¿Qué es HTML?

Estructura Contenido Apariencia Comportamiento HTML CSS JavaScript, PHP, Python Colores Tipografí a s Alineación Efectos Validaciones Automatización Párrafos Encabezados Listas Tablas Capas Etc. Textos Imágenes Enlaces Fondos Tamaños Etc.

Historia del HTML Tim Berners-Lee Director del W3C

El W3C

¿Por qué HTML5? HTML 4.0 era insuficiente para cubrir todas las necesidades web surgidas hasta el momento. La web evolucionó rápidamente insertando diferentes contenidos a ofrecer en cada página. HTML 4.0 no cubre esas necesidades por lo que se crearon diversas tecnologías que suplieran este vacío: Flash Player Silverlight Se tiende a un trabajo distribuido por lo que se exigen herramientas tipo "escritorio" en versión web.

¿Por qué HTML5? En este punto HTML4 se queda obsoleto. Instalar plugins de terceros genera graves agujeros de seguridad. Las nuevas funcionalidades requeridas no encajan con el esquema inicial diseñado. Conclusión: hay que hacer evolucionar el estándar a las necesidades actuales  HTML5 Referencia: http://www.w3schools.com/html/default.asp

El concepto de elemento HTML Los elementos son los componentes fundamentales del HTML Cuentan con 2 propiedades básicas: Atributos Contenido En general se conforman con una Etiqueta de Apertura y otra Cierre. Los atributos se colocan dentro la etiqueta de apertura, y el contenido se coloca entre la etiqueta de apertura y la de cierre.

El concepto de elemento HTML Elemento Etiqueta de Apertura Etiq . de Cierre Contenido <p class =“texto”>Curso HTML CEMA </p> Nombre Valor Atributo

Tipos de elementos HTML Estructurales: Describen el propósito del texto y no denotan ningún formato específico. <h1>Curso HTML</h1> De Presentacion : Describen la apariencia del texto, independientemente de su función. <b>Curso HTML</b> Los elementos de presentación se encuentran obsoletos desde la aparición del CSS. De HiperTexto : Relaciona una parte del documento a otros documentos. <a href =“http://www.cema.edu.ar”>Universidad del Cema </a>

Estructura base de un documento html. <!DOCTYPE html> <html lang="es"> <head> <title> Título </title> <!– Encabezado de la web. Aquí incluiremos metainformación y cargaremos componentes y estilos utilizados en la web--> </head> <body> <!– Cuerpo de la web. Aquí escribiremos el contenido --> ….. </body> <footer> </footer> </html>

EDITORES Programa que permite redactar documentos. Editores visuales. Evitan la escritura de código HTML (la pagina se construye). Editores de texto. La pagina se crea a través del código HTML.

Editores Visuales: (generan basura) Macromedia Dreamweaver, Microsoft Frontpage , Adobe Pagemill , NetObjects Fusion , CutePage , HotDog Proffesional , Netscape Composer y Arachnophilia Editores de texto.(solo lo necesario) Wordpad o el Bloc de notas

Colores en hexadecimal 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

Creación 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 :

<!-- y -//-> . comentarios <br> Saltos de línea,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 imágenes), <object> (para incluir objetos como animaciones), <big> , <small> , <sub> ni <sup> <hr> Regla horizontal separar secciones dentro de una misma página. no precisa ninguna etiqueta de cierre

algunos atributos de la regla horizontal: Atributo Significado Posibles valores align alineación de la regla dentro de la página left (izquierda) right (derecha) center (centro) width ancho de la regla un número, acompañado de % cuando se desee que sea en porcentaje size alto de la regla un número noshade eliminar el sombreado de la regla no puede tomar valores Inicio <hr align="left" width= “50%" size= “10" noshade> Bienvenidos a mi página.

<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 común como están, canción&oacute<br> cuando se esta pensando <pre>Hola, BIENVENIDOS esta ES MI PÁGINA WEB y esto un texto preformateado</pre> Inicio de un separador horizontal<hr align="left" width="50%" size="10" noshade>Bienvenidos a mi página. </body> </html> Una ilustración simple

<font> y </font> propiedades del texto Atributo Significado Posibles valores face fuente nombre de la fuente, o fuentes color color del texto número hexadecimal o texto predefinido size tamaño del texto valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamaño por defecto, añadiendo + o - delante del valor <font color= "#993366" size= "4" face= "Arial" > Bienvenidos a mi página, texto con propiedades </font> <body> <basefont color= "#006699" size= "4" face= "Arial" > fuente para todo el documento

Etiqueta Significado Ejemplo <b> negrita curso HTML aulaclic <i> cursiva curso HTML aulaclic <u> subrayado curso HTML aulaclic <s> tachado curso HTML aulaclic < tt > teletipo (máquina de escribir) curso HTML aulaclic < big > aumenta el tamaño de la fuente curso HTML aulaclic < small > disminuye el tamaño de la fuente curso HTML aulaclic etiquetas asociadas al tipo de letra:

<p> y </p> Parráfos 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 separación entre ellos es menor. Tiene los mismos atributos de alineación. <center> y </center> Texto centrado <p align="center">este es un parrafo muy simple (centrado)</p> <p>Aqu&iacute encontra otro párrafo (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>

Encabezados - Títulos Etiqueta Ejemplo <H1> Título 1: HTML <H2> Título 2: HTML <H3> Título 3: HTML <H4> Título 4: HTML <H5> Título 5: HTML <H6> Título 6: HTML <H2 align="center"> El lenguaje HTML </H2><H4> Apartado 1: Las etiquetas </H4>

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 viñeta circle (círculo), 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 (números), a (letras minúsculas), A (letras mayúsculas), i (numeros romanos en minúsculas) o I (números romanos en mayúsculas). Listas anidadas: combinación de las anteriores.

Crear una pagina de inicio en blanco Colocar un titulo centrado y subrayado (mi pagina personal) Insertar una marquesina (con fondo rojo, tamaño de letra 5, y comportamiento continuo. Insertar un párrafo de texto con sangría a la izquierda y alineación a la izquierda. Crear una división horizontal . Escribir un texto ( párrafo) centrado que indica una frase arbitraria. Insertar una división horizontal. Insertar un texto preformateado que introduce a nuestras ocupaciones principales (centrado). Crear una lista que muestra las áreas de interés de información. Insertar listas anidadas a cada item. Un avance

ENLACES hiperenlace, hipervínculo, o vínculo <a> y </a> . href especifica la página a la que está asociado el enlace Referencia absoluta: Conduce a una ubicación externa al sitio Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio <a href ="http://www.google.com">Visita www.google.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.ksissoporte.com/html/index.htm">navegar por el tutorial</a>

Destino del enlace determina en qué ventana va a ser abierta la página 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 vínculo Anclas o puntos de fijación 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 electrónico : <a href= " mailto: [email protected]" >mi e-mail </a> <a href="mailto:[email protected]?subject=el asunto del mensaje"> mi e-mail </a> Vínculo 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 imágenes 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 numéricos <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) tamaño de la imagen <img src="imagenes/foto.gif" alt="mi fiesta" width="500" height="400"> Alineacion de la imagen align Este atributo indica la alineación de las imágenes con respecto a la línea 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 número, acompañado de % cuando se desee que sea en porcentaje height altura de la tabla un número, acompañado de % cuando se desee que sea en porcentaje cellpadding espacio entre el contenido de las celdas y el borde un número cellspacing espacio entre celdas un número border grosor del borde un número align alineación de la tabla dentro de la página left (izquierda) right (derecha) center (centro) bgcolor color de fondo número hexadecimal background imagen de fondo número hexadecimal bordercolor color del borde número hexadecimal <table width="50%" border="2" align="center" cellspacing="0" bordercolor="green" bgcolor="blue">

nombre descripción 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 número, acompañado de % cuando se desee que sea en porcentaje height altura de la tabla un número, acompañado de % cuando se desee que sea en porcentaje align alineación horizontal del contenido de la celda left (izquierda) right (derecha) center (centro) valign alineación vertical del contenido de la celda baseline (línea de base) bottom (inferior) middle (medio) top (superior) bgcolor color de fondo número hexadecimal background imagen de fondo número hexadecimal bordercolor color del borde número hexadecimal

<tr align="center" bgcolor="yellow"> <td bgcolor="purple">GATITO</td> Para toda la fila la alineación es Centrado y el fondo amarillo Solo para la celda el fondo es púrpura <th> y </th> idéntico a td pero centrado y negrilla Titulo de columna colspan y rowspan Combinación de celdas colspan especifica el número de columnas por las que se extenderá la celda rowspan especifica el número de filas por las que se extenderá la celda

MIS NOTAS PERIODO DATOS FECHA NOTA 1 NOTA 2 1 10.75 12.97 16/AGOSTO/2007 2 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">PERIODO</ 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 > 1 </ td > < td >10.75</ td > < td >12.97</ td > < td >16/AGOSTO/2007</ td > </ tr > < tr align ="center" valign =" middle "> < td > 2 </ 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 tamaño de cada una de las columnas en que se divide el documento un número (acompañado de % cuando se desee que sea en porcentaje) por cada columna, separados por comas. rows tamaño de cada una de las columnas en que se divide el documento un número (acompañado de % cuando se desee que sea en porcentaje) por cada fila, separados por comas. frameborder aparece o no el borde de los marcos yes no framespacing separación entre los marcos un número border grosor del borde un número, acompañado de % cuando se desee que sea en porcentaje bordercolor color del borde número 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 name nombre del marco cualquier valor noresize si aparece, el usuario no podrá redimensionar el tamaño de este marco no puede tomar valores marginwidth anchura del margen con respecto a los bordes del marco un número, acompañado de % cuando se desee que sea en porcentaje marginheight altura del margen con respecto a los bordes del marco un número, acompañado de % cuando se desee que sea en porcentaje scrolling se mostrará o no la barra de desplazamiento cuando la página 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

FORMULARIOS Permite recoger datos introducidos por el usuario. Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones <form> y </form> indican el inicio y fin de un formulario El atributo action indica una dirección de correo electrónico o la dirección 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 número de caracteres El atributo maxlenght indica el número 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= "contraseña" size= "20" maxlength= "15" > TEXTO CONTRASEÑA <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

Mgr . Kilbert chusi Huamani Cascading Style Sheets (CSS)

¿Qué es CSS? Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de documentos HTML o XML. CSS describe como debe ser renderizado el elemento estructurado en pantalla. CSS es uno de los lenguajes base de la Open Web y posee una especificación estandarizada por parte del W3C. Desarrollado en niveles, CSS1 es ahora obsoleto, CSS2.1 es una recomendación y CSS3, ahora dividido en módulos más pequeños, está progresando en camino al estándar.

Historia CSS fue propuesto primeramente por Håkon Wium Lie el 10 de octubre de 1994. Muchos otros lenguajes de hojas de estilos fueron propuestos al mismo tiempo, y las discusiones en las listas de correo públicas dentro del W3C dieron lugar a la primera Recomendación CSS por el W3C (CSS1) en 1996. En particular, la propuesta de Bert Bos fue influyente; él fue el coautor de CSS1y es reconocido como el cocreador de CSS.

CSS Datos Al principio las páginas web estaban hechas sólo con HTML, sin embargo pronto se vio que este lenguaje tenía muchas limitaciones cuando se quería hacer el diseño de la página y el estilo de sus elementos. Para solucionar esto se creó el lenguaje CSS. Con CSS separamos los dos aspectos de la página. Por un lado con HTML nos ocupamos del contenido, y por otro con CSS nos ocupamos del estilo. De esta manera, aunque tenemos que utilizar dos códigos diferentes, los códigos quedan mucho más claros.

CSS Datos x2 Desde la creación de este lenguaje ha habido varias versiones. La primera es CSS 1, y la actual es CSS 2.1; se está trabajando actualmente en una nueva versión más avanzada, CSS 3. El problema es que no todos los navegadores interpretan correctamente la versión CSS 3. CSS1 CSS2 CSS3

CSS1 :v La primera especificación oficial de CSS, recomendada por la W3C fue CSS1, publicada en diciembre de 1995, y abandonada en abril de 2008. Algunas de las funcionalidades que ofrece son: Propiedades de las fuentes, como tipo, tamaño, énfasis... Color de texto, fondos, bordes u otros elementos. Atributos del texto, como espaciado entre palabras, letras, líneas, etcétera. Alineación de textos, imágenes, tablas u otros. Propiedades de caja, como margen, borde, relleno o espaciado. Propiedades de identificación y presentación de listas.

CSS2 :v La especificación CSS2 fue desarrollada por la W3C y publicada como recomendación en mayo de 1998, y abandonada en abril de 2008. Como ampliación de CSS1, se ofrecieron, entre otras: Las funcionalidades propias de las capas (<div>) como de posicionamiento relativo/absoluto/fijo, niveles (z- index ), etcétera. El concepto de "media types ". Soporte para las hojas de estilo auditivas Texto bidireccional, sombras, etcétera.

CSS3 :v A diferencia de CSS2, que fue una única especificación que definía varias funcionalidades, CSS3 está dividida en varios documentos separados, llamados "módulos". Cada módulo añade nuevas funcionalidades a las definidas en CSS2, de manera que se preservan las anteriores para mantener la compatibilidad. Los trabajos en el CSS3, comenzaron a la vez que se publicó la recomendación oficial de CSS2, y los primeros borradores de CSS3 fueron liberados en junio de 1999.

Como se inserta CSS en HTML Una hoja de estilo externa puede ser enlazada a un documento HTML mediante el elemento LINK de HTML: La etiqueta <LINK> se coloca en la cabecera HEAD del documento. El atributo opcional TYPE se usa para especificar un tipo de medio -- text / css para una hoja de estilo en cascada-- permitiéndole a los navegadores omitir los tipos de hoja de estilo que no soportan. Las hoja de estilo externas no debrían contener ninguna etiqueta HTML como <HEAD> o <STYLE>. La hoja de estilo solo debería consistir simplemente de reglas de estilo o sentencias. Un archivo que solo consista de P { margin : 2em } podría usarse como una hoja de estilo externa.

Etiqueta STYLE en HTML < LINK REL= “ StyleSheet ” HREF= "aural.css" TYPE= " text / css “> El atributo REL se usa para definir la relación entre el archivo enlazado y el documento HTML. REL= StyleSheet especifica un estilo persistente o preferido mientras que REL=" Alternate StyleSheet " define un estilo alterno . Un estilo persistente es aquel que siempre se aplica si están activas las hojas de estilo.

SINTAXIS :v CSS tiene una sintaxis simple, y usa un conjunto de palabras clave en inglés para especificar los nombres de varias propiedades de estilo. Una hoja de estilos consiste en una serie de reglas. Cada regla, o conjunto de reglas consisten en uno o más selectores, y un bloque de declaración. Establecer propiedades CSS a valores específicos es la función principal del lenguaje CSS. Un par de propiedades y valores se denomina declaración , y cualquier motor CSS calcula qué declaraciones se aplican a cada elemento de una página para poder disponerla y diseñarla. Declaración: Tres partes: Un selector Una propiedad Un valor Sintaxis: selector { property:value }

Sintaxis :v x2 Bloques de Declaración: Las declaraciones se agrupan en bloques , es decir en una estructura delimitada por una llave de apertura, ' {‘ y una de cierre, ' }' A veces, los bloques pueden anidarse, por lo que los tirantes de apertura y cierre deben coincidir. Estos bloques son llamados naturalmente bloques de declaración y las declaraciones dentro de ellos están separadas por un punto y coma, ‘ ;’. Un bloque de declaración puede estar vacío, que contiene una declaración nula. body { color:black ; Background -color: red }

CSS: El selector class Se puede omitir el elemento para indicar que se aplicará para cualquier elemento HTML Uso: <h1 class =" center "> This heading will be center- aligned </h1> CSS Definición: .center { text-align:center }

CSS: El selector id Se puede también definir estilos con el selector id HTML Uso: <p id=" para1 "> Este párrafo está centrado y en color rojo. </p> CSS Definición: # para1 { color:green }

CSS: Otros Definición: input[ type =" text "] { background-color:blue } Comentarios: /* Este es un comentario */

Propiedades de CSS

CSS: Background Propiedades usadas para el efecto background background -color background-image background-repeat background-attachment background -position

CSS: background-color

CSS: background-image

CSS: background-repeat

CSS: background-repeat background-position

CSS: background-attachment

CSS: Texto

CSS: Font p{ font-family :"Times New Roman ", Georgia,Serif }

CSS: Font

CSS: Font font-size -> default = (16px=1em) h1 {font-size:40px} h2 {font-size:30px} p {font-size:14px} h1 {font-size:2.5em} /* 40px/16=2.5em */ h2 {font-size:1.875em} /* 30px/16=1.875em */ p {font-size:0.875em} /* 14px/16=0.875em */ body {font-size:100%} h1 {font-size:2.5em} h2 {font-size:1.875em} p {font-size:0.875em}

CSS: Border

CSS: Border p.one { border-style:solid ; border-width:5px; } p.two { border-style:solid ; border-width:medium ; } p { border-top-style:dotted ; border-right-style:solid ; border-bottom-style:dotted ; border-left-style:solid ; } p.one { border-style:solid ; border-color:red ; } p.two { border-style:solid ; border -color:#98bf21; } border-style:dotted solid ; border-style:dotted solid double dashed ; border-style:dotted solid double ; border-style:dotted solid ; border-style:dotted ;

CSS: Border (versión corta)

CSS: Márgenes Las marginpropiedades de CSS se utilizan para crear espacio alrededor de los elementos, fuera de los bordes definidos. margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; margin -top margin-right margin-bottom margin-left

CSS: Padding La propiedad padding limpia una área alrededor del contenido de un elemento (dentro del borde). Se encuentra afectado por el color de fondo del elemento. padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px padding:25px 50px 75px 100px; padding:25px 50px 75px; padding:25px 50px; padding:25px; x padding -top padding-right padding-bottom padding-left

CSS: Display La display propiedad es la propiedad CSS más importante para controlar el diseño. Cada elemento HTML tiene un valor de visualización predeterminado según el tipo de elemento que sea. El valor de visualización predeterminado para la mayoría de los elementos es blocko inline . Block vs Inline Ejemplos de elementos bloque <h1> <p> < div > Ejemplos de elementos Inline < span > <a>

CSS: Posicionamiento La position: propiedad especifica el tipo de método de posicionamiento utilizado para un elemento ( estático , relativo , fijo , absoluto o fijo ). Static : Los elementos de posición estática no se ven afectados por las propiedades superior, inferior, izquierda y derecha . Por eso no se posiciona de ninguna manera especial; siempre se posiciona de acuerdo con el flujo normal de la página : Relative: Establecer las propiedades superior, derecha , inferior e izquierda de un elemento en una posición relativa hará que se ajuste lejos de su posición normal. El resto del contenido no se ajustará para encajar en ningún espacio dejado por el elemento . Fixed : está posicionado en relación con la ventana gráfica , lo que significa que siempre permanece en el mismo lugar incluso si se desplaza la página . Absolute: si un elemento de posición absoluta no tiene antepasados de posición , utiliza el cuerpo del documento y se mueve junto con el desplazamiento de la página . Sticky: se posiciona según la posición de desplazamiento del usuario .

CSS: Float

CSS: Pseudo-Classes

CSS: Pseudo-elementos

CSS: Pseudo-elementos (:first-line)

CSS: Pseudo-elementos (:first-letter)

CSS: Pseudo-elementos Ejemplos: p.article:first-letter {color:#ff0000} <p class =" article ">A paragraph in an article </p> p:first-letter { color:#ff0000; font-size:xx-large ; } p:first-line { color:#0000ff; font-variant:small-caps ; } h1:after { content:url (smiley.gif); } CSS 2

W3C CSS 3 recommendation Transparencia: Firefox -- opacity:x [0.0 – 1.0] IE -- filter:alpha ( opacity =x) [0 – 100] NOTA: Entre más bajo el valor, más transparente. Ejemplos: < img src =“imagen.jpg" width ="150" height ="113" alt =“ imagen_texto " style ="opacity:0.4;filter:alpha( opacity =40)" /> < img src =“imagen.jpg" style ="opacity:0.4;filter:alpha( opacity =40)" onmouseover =" this.style.opacity =1;this.filters.alpha.opacity=100" onmouseout =" this.style.opacity =0.4;this.filters.alpha.opacity=40" />

Ventajas Separación del contenido y la presentación Consistencia del sitio Ancho de banda Formateo de página Accesibilidad

BIBLIOGRAFÍA: https://developer.mozilla.org/es/docs/Web/CSS https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax http://aprende-web.net/css/css1_1.php https://www.w3.org/Style/CSS/#specs https://es.wikipedia.org/wiki/Hoja_de_estilos_en_cascada https://es.wikipedia.org/wiki/Hoja_de_estilos_en_cascada#Historia https://es.wikipedia.org/wiki/Hoja_de_estilos_en_cascada#Niveles https://es.wikipedia.org/wiki/Hoja_de_estilos_en_cascada#Limitaciones https://es.wikipedia.org/wiki/Hoja_de_estilos_en_cascada#Ventajas

html5 y css3 introduccion al desarrollo web

About This Presentation

Slide Content

Tags

Categories

Download

Quick Actions

Statistics

Related Slideshows

html5 y css3 introduccion al desarrollo web

About This Presentation

Slide Content

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Slide 61

Slide 62

Slide 63

Slide 64

Slide 65

Slide 66

Slide 67

Slide 68

Slide 69

Slide 70

Slide 71

Slide 72

Slide 73

Slide 74

Slide 75

Slide 76

Slide 77