diseño web usando html y css
DESCRIPTION
creacion de paginas web con html, usando estilos, es decir que nuestra pagina tendra colores y diseños.TRANSCRIPT
![Page 1: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/1.jpg)
TECNOLOGIA WEB
HTML – CSS - Javascript
![Page 2: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/2.jpg)
Que es HTML? - Caracteristicas
• HTML es el acrónimo de HyperText Markup Language(Lenguaje de marcas de hipertexto).
• Es el lenguaje de marcas predominante para laelaboración de paginas web.
• Se utiliza para describir y traducir la estructura y lainformación en forma de texto.
• Se escribe en forma de etiquetas (tag’s) rodeada porcorchetes angulares <>.
• Puede escribir hasta cierto punto la estructura de undocumento.
• Puede incluir script que puede afectar elcomportamiento de los procesadores de HTML.
![Page 3: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/3.jpg)
Que es HTML? – Caracteristicas (II)
• Las etiquetas usadas son case-insensitive.– <STRONG> = <strong> = <Strong>
• Las etiquetas, en su mayoría, tienen una etiquetaal final para definir una región de texto.
• Esta etiqueta final es igual a la etiqueta inicial,excepto que tiene una barra de división / luegodel primer signo <– Ejemplo:
<strong>Este texto esta en negrita</strong>
• El texto entero desde que se inicia la etiquetahasta que termina se denomina Elemento
![Page 4: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/4.jpg)
Que es HTML? – Caracteristicas (III)
• Los elementos HTML pueden anidarse pero nosobreponerse uno entre otro, ej:
– <strong><em>Este texto es corto</em></strong>
– <strong><em>Este texto es corto</strong></em>
• Ademas los elementos HTML tienen atributosadicionales que estan codificados como un parnombre-valor en la etiqueta inicial. Ej:
– <h1 align=“center”>Este texto es un h1centrado</h1>
![Page 5: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/5.jpg)
Que es XHTML?
• Extensible HyperText Markup Language =
XHTML
– Es un lenguaje de marcado igual que HTML
– Separa la presentación de un documento de la
estructura de la información del documento
– Basado en HTML
– Tecnología del Consorcio W3C
![Page 6: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/6.jpg)
Diferencia HTML vs XHTML?
• Podemos resumir las principales diferencias
en 4:
– XHTML elementos deben ser correctamente
anidado
– XHTML documentos debe ser gramaticalmente
correcto
– Los nombres de etiqueta deben estar en la
minúscula
– Todos los elementos XHTML deben estar cerrados
![Page 7: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/7.jpg)
Que es hipertexto?
• Texto que se muestra a través de un dispositivoelectrónico, el cual permite mediante vínculos ir aotros textos que pueden estar:
– En cualquier otro punto del mismo documento.
– En una pagina diferente en el mismo sitio web.
– En un sitio completamente diferente.
• El hipertexto quizás resume la esencia de Internet: la capacidad de enlazar una pagina web con otra, creando de este modo una red de información.
![Page 8: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/8.jpg)
HERRAMIENTAS
• Para la elaboración de documentos HTML se
pueden utilizar editores de texto plano como
notepad, vi, kwrite, kate, gedit; hasta
herramientas que nos provean elementos que
nos faciliten la construcción de documentos
HTML, como dreamweaver, microsoft publisher,
eclipse, netbeans, microsoft visual studio, etc.
• No olvidar que en esencia un documento HTML
es texto no enriquecido.
![Page 9: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/9.jpg)
Que es una pagina web?
• Documento o información electrónica adaptada para la World Wide Web y que puede ser accedida mediante un navegador.
• Está compuesta principalmente por
– Información (sólo texto y/o módulos multimedia)
– Hiperenlaces
– Hoja de estilo
– Script y aplicaciones para hacerla interactiva.
• Están escritas en HTML
![Page 10: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/10.jpg)
Que es HTML 5?
• Quinta revisión importante del lenguaje básico
de la World Wide Web, HTML.
• HTML5 especifica dos variantes de sintaxis
para HTML:
– Un «clásico» HTML (text/html), la variante
conocida como HTML5.
– Una variante XHTML conocida como sintaxis
XHTML5 que deberá ser servida como XML
(XHTML) (application/xhtml+xml).
![Page 11: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/11.jpg)
Que es HTML 5?
• HTML5 es una colaboración entre el Consorcio World Wide Web (W3C) y el Grupo de Trabajo de hipertexto Aplicación de Tecnología Web (WHATWG = Web Hypertext Application Technology Working Group).
• WHATWG estaba trabajando con los formularios web y aplicaciones, y la W3C estaba trabajando con XHTML 2.0. En 2006, decidieron cooperar y crear una nueva versión de HTML.
• Se han establecido algunas reglas para HTML5:– Las nuevas características se deben basar en HTML, CSS, DOM y
JavaScript
– Reducir la necesidad de plugins externos (como Flash)
– Mejor manejo de errores
– Más marcado para reemplazar scripting
– HTML5 debe ser independiente del dispositivo
– El proceso de desarrollo debe ser visible para el público.
![Page 12: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/12.jpg)
Declaración DOCTYPE (I)
• El <! DOCTYPE> declaración debe ser la primera cosa en el documento HTML, antes de la etiqueta <html>.
• La declaración no es una etiqueta HTML <DOCTYPE>, es una instrucción para el navegador web acerca de qué versión de HTML contiene la pagina.
• En HTML 4.01, el <! DOCTYPE> declaración hace referencia a una DTD, debido HTML 4.01 se basa en SGML. El DTD especifica las reglas para el lenguaje de marcas, por lo que los navegadores muestran el contenido correctamente.
• HTML 5 no se basa en SGML, y por lo tanto no requiere una referencia a una DTD.
![Page 13: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/13.jpg)
Declaración DOCTYPE (II)
• Hay tres diferentes <! DOCTYPE>
declaraciones en HTML 4.01. En HTML5 sólo
hay una:
– <!DOCTYPE html>
![Page 14: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/14.jpg)
Declaración DOCTYPE (III)
• HTML 5– <!DOCTYPE html>
• HTML 4.01 Strict– Esta DTD contiene todos los elementos y atributos HTML, pero no incluye los elementos de
presentación o en desuso (como la fuente). No se permite conjuntos de marcos.
– <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
• HTML 4.01 Transitional– Esta DTD contiene todos los elementos y atributos HTML, incluidos los elementos de
presentación y en desuso (como fuente). No se permite conjuntos de marcos.
– <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
• HTML 4.01 Frameset– Esta DTD es igual a HTML 4.01 Transitional, pero permite el uso de contenido de conjunto de
marcos.
– <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
![Page 15: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/15.jpg)
Declaración DOCTYPE (IV)
• XHTML 1.0 Strict– Esta DTD contiene todos los elementos y atributos HTML, pero no incluye los elementos de presentación o
en desuso (como la fuente). No se permite conjuntos de marcos. El marcado debe ser escrito como XML bien formado.
– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• XHTML 1.0 Transitional– Esta DTD contiene todos los elementos y atributos HTML, incluidos los elementos de presentación y en
desuso (como fuente). No se permite conjuntos de marcos. El marcado debe ser escrito como XML bien formado.
– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• XHTML 1.0 Frameset– Esta DTD es igual a XHTML 1.0 Transitional, pero permite el uso del contenido de marcos.
– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
• XHTML 1.1– Esta DTD es igual a XHTML 1.0 Strict, pero le permite añadir módulos (por ejemplo, para proporcionar apoyo
rubí para las lenguas de Asia Oriental).
– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
![Page 16: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/16.jpg)
HTML 5 – Nuevas funciones
• El elemento <canvas> para el dibujo 2D
• Los elementos <video> y <audio> para la reproducción de medios
• Soporte para almacenamiento local
• Nuevos elementos de contenido específico, como <article>, <footer>, <header>, <NAV>, <section>
• Nuevos controles de formulario, como el calendario, la fecha, la hora, email, URL, búsqueda.
• Para ver nuevos elementos y los eliminados en html5 ver:– http://www.w3schools.com/html/html5_new_elements.as
p
![Page 17: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/17.jpg)
Documento HTML 5 Mínimo
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
![Page 18: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/18.jpg)
Comentarios, títulos y otros en HTML
• Comentarios– Inician con <!-- y terminan con -->
• Elemento header, para titulos:– Se tienen hasta 6 elementos header: Del h1 al h6
– Ej: <h1>Texto a usar como titulo</h1>
• Elemento parrafo: <p>Texto a incluir en el parrafo</p>
• Salto de linea: <br>. Es una etiqueta vacia. No necesita etiqueta de cierre.
• Etiqueta para definir Negrita: <b>….</b>
• Etiqueta para definir cursiva: <i> …. </i>
• Etiqueta para subrayar texto: <u> …. </u>
![Page 19: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/19.jpg)
Listas en HTML
• Listas desordenadas:<ul>
<il>…</il>
<il>…</il>
<il>…</il>
</ul>
• Listas ordenadas:<ol type=A>
<il>…</il>
<il>…</il>
<il>…</il>
</ol>
– Si no se especifica el tipo, se asume lista numerica. Los tipos pueden ser:• A � Letras Mayúsculas
• a � Letras Minúsculas
• I � Números romanos en mayúsculas
• i � Números romanos en minúsculas
• 1 � Numeros
![Page 20: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/20.jpg)
Imágenes en HTML
• Etiqueta para insertar imágenes:– <img src=“archivo” alt=“Texto alternativo”
width=“ancho” height=“alto” usemap=“#nombremapa”></img>
– Al menos los atributos src y alt se deben especificar.
– Si se usa el atributo usemap, se debe definir el mapa con la etiqueta map. Por ejemplo:<MAP NAME="shapes_1">
<AREA Shape="rect" coords="37, 72" 137, 25, href="#">
<AREA SHAPE="Circle" coords="205 49, 29" href="#">
<AREA SHAPE = " Poli" vcoords =" 317, 23, 349, 76, 284, 76" href =" # ">
</ MAP>
![Page 21: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/21.jpg)
Imágenes en HTML (2)
• En HTML 5 existen 2 nuevos elementos para la referencia a imágenes: figure y figcaption
• figure es util para referenciar figuras e imágenes en general.
• figcaption permite especificar al usuario que esta viendo.
• Ej:<FIGURE>
<IMG SRC="york_images/york_minster.jpg">
<FIGCAPTION>A view of York Minster from a side street. </FIGCAPTION>
</FIGURE>
![Page 22: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/22.jpg)
Hipervínculos
• Los hipervínculos son la columna vertebral de la Web. Proporcionan un medio para conectar una pieza de información (una página web, por ejemplo) a otro tipo de información.
• En html para definir hipervinculos se usa la etiqueta a:
• Ejemplos:– <A HREF = "http://www.google.com/"> Google Search Engine </ A>
– <A HREF="pages/about.html">About this site</A>
– <A HREF="../index.html">Go to the Home Page</A>
– <A HREF="pages/about.html" LINK="red">About this site</A>
– <A ID = "section1">In</a> this first section, we'll discuss Links• <A HREF = "#section1">Click here for Section One</A>
– <A HREF = "MailTo:[email protected]">Email us</A>
– <A HREF="pages/about.html"><IMG SRC="nav_icon.gif"> About this site</A>
• LINK: Establecer el color de un enlace antes de que se ha hecho click en el
• ALINK: Establecer el color de un enlace cuando se hace clic en el vínculo
• VLINK: Establecer el color de un enlace después de que se ha hecho click en el
![Page 23: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/23.jpg)
Tablas
![Page 24: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/24.jpg)
Formularios HTML
• Son una forma de obtener datos de los visitantes de un sitio web.
• Las etiquetas form es la utilizada para definir formularios
<FORM>
</FORM>
• Para darle nombre a un formulario:
<FORM NAME = "frmTest">
</FORM>
![Page 25: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/25.jpg)
Formularios HTML (2)
• Un formulario para ir a algún otro lado.
<FORM NAME = "frmTest" METHOD = "post" Action ="mailto:[email protected]">
</FORM>
– METHOD: Es la forma de enviar los datos (post/get)
• Get: Envia los datos en una línea simple y los adiciona en la url.
• Post: Envía los datos en una línea simple.
– ACTION: Es usado para especificar la dirección donde se enviaran los datos.
• ACTION = mailto:[email protected] (A una dirección de email)
• ACTION = "ProcessSurvey.php“
• ACTION = "“ (Para que no vaya a ningun lado. Solo para test)
![Page 26: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/26.jpg)
Elementos en formulario HTML
• Existen varios elementos en formularios HTML:– Text Boxes
– Text Areas
– Option Buttons
– Check Boxes
– Drop down List/Fixed Lists
– Password Boxes
– Command Buttons
– Submit Buttons
– Reset Buttons
– Labels
– Image Command Buttons
– Hidden Form Values
![Page 27: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/27.jpg)
Bloques en HTML
• Los elementos de HTML pueden ser agrupados usando los tag– <div>: block level
– <span>: inline.
• La mayoría de los elementos HTML son definidos como:– Elementos en línea (inline): Son desplegados sin iniciar
una nueva línea
– Elementos a nivel de bloque (block level): Inician (y terminan) una nueva línea cuando son visualizados en el navegador.
![Page 28: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/28.jpg)
HOJAS DE ESTILO EN CASCADA
• Hojas de estilo en cascada (CSS)– Las hojas de estilo son conjuntos de instrucciones, a veces en
forma de archivo anexo, que se asocian a los archivos de texto yse ocupan de los aspectos de formato y de presentación de loscontenidos: tipo, fuente y tamaño de letras, justificación deltexto, colores y fondos, etc.
– Hacen referencia a un lenguaje de hojas de estilos usado paradescribir la presentación semántica (el aspecto y formato) de undocumento escrito en lenguaje de marcas, como por ejemploHTML.
– Permite cambiar bloques entero de texto con una sola etiqueta.
– Es la respuesta al deseo de los desarrolladores de paginas web,ante su necesidad de conseguir una mejor presentación de susdocumentos web.
![Page 29: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/29.jpg)
Reglas CSS (1)
• Reglas de CSS– Una regla CSS indica al navegador como debe verse el
código HTML.
• Hay tres partes en una regla: el selector, la propiedad y el valor.
• El selector CSS: Hay tres tipos– Selector de HTML, texto parte de la etiqueta HTML.
– Selector de clase, lo configura uno mismo para ser usado en cualquier parte de una página.
– Selector ID, es similar a un selector de clase, pero las utilizan para identificar un elemento en particular, un elemento de cuadro de texto en un formulario.
![Page 30: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/30.jpg)
Reglas CSS (2)
• Ejemplo de los 3 selectores:
![Page 31: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/31.jpg)
Reglas CSS (3)
• Propiedad y Valor:
– Para cada selector se puede(n) definir propiedad(es) y valor(es)
– La propiedad en un selector es lo que se esta queriendo cambiar.
– La propiedad y el valor se encierran entre llaves {}.
– Sintaxis: Selector {propiedad: valor}
– Ejemplo simple: H1 {color: red}
– Ejemplo con múltiples propiedades:
• H1 {color: red; font-weight: bold; font-size: 16pt;}
![Page 32: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/32.jpg)
Reglas CSS (4)
• Versión de múltiples líneas:
• Esta versión es más fácil de leer
![Page 33: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/33.jpg)
¿Donde poner los estilos? (1)
• Los estilos pueden ser insertados en tres
lugares: en línea, Embebido y externo.
• CSS en línea:
– Directamente como parte de la etiqueta HTML:
• <H1 Style = "Color: rojo"> Mi Rumbo </ H1>
• CSS embebida:
– En la sección HEAD de su página HTML
![Page 34: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/34.jpg)
¿Donde poner los estilos? (2)
• CSS embebida:
– En la sección HEAD de su página HTML
– Entre las etiquetas style, se escribe el css.
![Page 35: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/35.jpg)
¿Donde poner los estilos? (3)
• CSS externa:
– Se escribe en un archivo de texto separado:
– Y dentro del archivo, en este caso style.css, se escriben las reglas css que se deseen.
– Comentario:
• /* background-color: blue; */
![Page 36: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/36.jpg)
Estilos en hipervínculos
A:link {color: red;
}
A:active {color: green;
}
A:visited {color: blue;
}
A:hover {
color: red;
}
A.MyHoverColor:hover {
color: red;
text-decoration: none;
}
<A HREF="pages/about.html" CLASS=" MyHoverColor ">About this site</A>
![Page 37: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/37.jpg)
Posicionamiento CSS – El Modelo De
Caja
• Una pagina web es considerada como una
serie de cajas apiladas una encima de otra.
• Estas cajas pueden contener texto en párrafos,
imágenes, objetos de formulario, etc.
• Cada cuadro está dividido en cuatro áreas: un
margen, una frontera, un poco de relleno y,
finalmente, el propio contenido
![Page 38: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/38.jpg)
Posicionamiento CSS – El Modelo De
Caja (2)
![Page 39: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/39.jpg)
Posicionamiento CSS – El Modelo De
Caja (3)• El margen (margin) es transparente y va alrededor de la
frontera. No se puede definir un color para los márgenes.Puede ser grande, como en la imagen anterior, o ajuste acero y acurrucarse justo contra la frontera.
• La frontera (border) pasa por el relleno y el contenido. Sepuede tomar un color, un tamaño y un tipo de borde(puntos, sólidos, etc.)
• El relleno (padding) es el espacio entre el contenido y lafrontera. Lleva el mismo color que el fondo de la cajaentera.
• El contenido (content) son cosas como texto e imágenes - elpunto central de la caja.
![Page 40: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/40.jpg)
Posicionamiento CSS – El Modelo De
Caja (4)
![Page 41: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/41.jpg)
Posicionamiento CSS – El Modelo De
Caja (5)
![Page 42: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/42.jpg)
Disposición (Layout)
• La disposición en las páginas web hace que el
sitio web se vea bien.
• Muchas páginas disponen su contenido en
columna para lo cual usan <div> o <table>
• Luego la disposición se complementa con CSS
para que las columnas diseñadas se vean bien,
con la disposición y detalles esperados.
![Page 43: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/43.jpg)
Ejemplo disposición usando <div>
![Page 44: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/44.jpg)
Ejemplo disposición usando <table>
![Page 45: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/45.jpg)
Elementos en formulario HTML5
• En html 5 se adicionaron algunos nuevos elementos y atributos
– Placeholder (Atributo)
– Url
– Number
– Range
– Date/Time
– Search
– Color
![Page 46: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/46.jpg)
Lista de Datos en HTML5
<INPUT TYPE="Text" LIST="zip_codes"><DATALIST ID="zip_codes">
<OPTION VALUE="AL" LABEL="ALABAMA">
<OPTION VALUE="AK" LABEL="ALASKA">
<OPTION VALUE="AS" LABEL="AMERICAN SAMOA">
<OPTION VALUE="AZ" LABEL="ARIZONA">
<OPTION VALUE="AR" LABEL="ARKANSAS">
<OPTION VALUE="CA" LABEL="CALIFORNIA">
<OPTION VALUE="CO" LABEL="COLORADO">
<OPTION VALUE="CT" LABEL="CONNECTICUT">
</DATALIST>
</INPUT>
![Page 47: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/47.jpg)
Videos en HTML 5
• <VIDEO SRC="your_video.mp4"></VIDEO>
• <VIDEO>
<SOURCE SRC="my_video.mp4" TYPE='video/mp4;
codecs="avc1.42E01E, mp4a.40.2"'>
<SOURCE SRC="my_video.webm" TYPE='video/webm;
codecs="vp8, vorbis"'>
<SOURCE SRC="my_video.ogv" TYPE='video/ogg;
codecs="theora, vorbis"'>
</VIDEO>
![Page 48: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/48.jpg)
Audio en HTML5
• <AUDIO><SOURCE SRC="your_audio.mp3">
<SOURCE SRC="your_audio.ogg">
<SOURCE SRC="your_audio.wav">
</AUDIO>
• Atributos:AUTOPLAY, LOOP, CONTROLS, PRELOAD.
• <AUDIO AUTOPLAY ="false" LOOP="false" CONTROLS="true" PRELOAD="auto">
<SOURCE SRC="your_audio.mp3">
<SOURCE SRC="your_audio.ogg">
<SOURCE SRC="your_audio.wav">
YOUR BROWSER DOESN'T SUPPORT THE AUDIO TAG.
</AUDIO>
![Page 49: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/49.jpg)
Canvas en HTML5
• Usa la etiqueta canvas.
• Es un area donde se puede dibujar lo que se quiera.
• <canvas Height="400" WIDTH="400“ ID=“MiCanvas”>
</canvas>
• Para obtener la referencia al canvas y decir como se vausar dicho cambas
• <SCRIPT LANGUAGE="JavaScript">canvasID var = document.getElementById ("MiCanvas");
var canvasID = canvas.getContext ("2d");
</ SCRIPT>
![Page 50: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/50.jpg)
Disposición en HTML5
![Page 51: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/51.jpg)
Disposición (2)
![Page 52: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/52.jpg)
Javascript
• Javascript lenguaje interpretado, siendo el másusado para lograr interacción en paginas webdesde el lado del cliente.
• Javascript me permite cambiar el contenidoHTML ya que puede manipular DOM (DocumentObject Model), el cual es el estandar w3c oficialpara acceder a los elementos de HTML.
• Que me permite hacer javascript:– Cambiar los atributos de un elemento HTML
– Cambiar los estilos de un elemento HTML
– Validación de datos.
![Page 53: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/53.jpg)
Introducción al lenguaje (1)
![Page 54: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/54.jpg)
Introducción al lenguaje (3)
![Page 55: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/55.jpg)
Introducción al lenguaje (4)
![Page 56: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/56.jpg)
Introducción al lenguaje (2)
![Page 57: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/57.jpg)
Introducción al lenguaje (5)
![Page 58: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/58.jpg)
Donde colocar Javascript
• Existen tres formas para incorporar código
Javascript dentro de HTML. Sin embargo, al
igual que en CSS, solo la inclusión de archivos
externos es la recomendada a usar en HTML5:
– En línea
– Embebido
– Archivos externos (Este es el método que se
aconseja usar)
![Page 59: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/59.jpg)
Javascript en linea (ejjs01)
![Page 60: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/60.jpg)
Javascript embebido (ejjs2)
(Entre los tag <script> y </script>
![Page 61: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/61.jpg)
Javascript en archivos externos (ejjs3)
![Page 62: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/62.jpg)
Manejo de eventos
• El código Javascript es normalmente ejecutado luego de que el usuario realiza alguna acción. Estas acciones y otros eventos son procesados por manejadores de eventos y funciones Javascript asociadas con ellos.
• Existen tres diferentes formas de registrar un evento para un elemento HTML: – Agregar un nuevo atributo al elemento (vea ejjs1)
– Registrar un manejador de evento como una propiedad del elemento (vea ejjs2 o ejjs3)
– Usar el nuevo método estándar addEventListener(). Esta forma es la que considera la forma ideal en html5. (vea ejjs4)
![Page 63: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/63.jpg)
Usando addEventListener (ejjs4)
![Page 64: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/64.jpg)
Javascript – Acceso a elementos HTML
• Actualmente existen tres métodos disponibles para referenciar elementos HTML desde Javascript:
– getElementsByTagName referencia un elemento por su nombre o palabra clave.
– getElementById referencia un elemento por el valor de su atributo id.
– getElementsByClassName es una nueva incorporación que nos permite referenciar un elemento por el valor de su atributo class
![Page 65: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/65.jpg)
Javascript – Acceso a elementos
HTML5 (Nuevos)
• En HTML5 se agregaron los metodos:
– querySelector(): Retorna el primer elemento que
concuerda con el grupo de selectores
especificados entre paréntesis
– querySelectorAll():retorna todos los elementos
que concuerdan con el grupo de selectores
declarados entre paréntesis. El valor retornado es
un arreglo
![Page 66: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/66.jpg)
Más Información
• Sobre canvas: https://developer.mozilla.org/en/Canvas_tutorial
• Sobre video: http://diveintohtml5.info/video.html
• www.w3schools.com:– Html
– Html5
– Javascript
– Css
– Php
– Jquery
– Ajax
– Json
– Google Maps
– Php
– Asp
– Web Services
![Page 67: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/67.jpg)
Configurar host virtual en apache
• En su servidor dns colocar el nombre para el
que se quiere crear el host virtual
• En el directorio /etc/apache2/sites-available,
copiar el archivo default con el nombre que se
quiera y luego modificar el contenido:
![Page 68: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/68.jpg)
Configurar host virtual en apache
<VirtualHost *:80>
ServerAdmin [email protected]
ServerName yii.home.com.bo
DocumentRoot /home/roberto/Public
<Directory />
Options FollowSymLinks
AllowOverride None
</Directory>
<Directory /home/roberto/Public>
Options Indexes FollowSymLinks MultiViews
AllowOverride None
Order allow,deny
allow from all
</Directory>
………………
![Page 69: Diseño web usando Html y Css](https://reader037.vdocuments.site/reader037/viewer/2022102911/563db92b550346aa9a9ab82d/html5/thumbnails/69.jpg)
Configurar host virtual en apache
• Crear el link simbolico a este archivo en el
directorio /etc/apache2/sites-enabled y luego
reiniciar apache.
• Probar colocando en su browser
http://yii.home.com.bo/