ESTIÓN DE LA HTML XML INFORMACIÓN/> En esta página: html4 ejercicios html4 html5 ejercicios html5 HTML (Hyper Text Markup Language) es el lenguaje con el que se SGI Flash ESTIÓN DE LA Frameworks escriben las páginas web. NFORMACIÓN I XHTML (eXtensible Hypertext Markup Language), es el lenguaje de marcas pensado para sustituir a HTML como estándar para las páginas web.Algunas de las diferencias las podeís ver en http://www.w3c.es/divulgacion/guiasbreves/XHTML#ejemplo /> Libro XHTML HTML 5 Editor Notepad++ Página sobre html5 HTML versión actual Como primer paso para el aprendizaje de lenguajes de marca vamos a aprender a crear páginas web con html, nuestras primeras páginas las haremos con comandos html que en algunos casos tienden a desaparecer (marcados en rojo , como font o cualquier comando que toque el diseño de la página porque esto debe ser implementado con estilos) y que no son muy recomendables pero que si consiguen el objetivo de realizar unos primeros diseños con un lenguaje sencillo de aprender. Estructura básica de un documento html <!DOCTYPE html> HTML5 resume esta etiqueta, que era tan compleja en versiones anteriores, a esta linea <meta charset=”utf-8” > Con ella podemos indicar el tipo de codificación de nuestra página y otro tipo de metadatos. charset se <meta name="author" content="Pepito Perez"/> utiliza para especificar la codificación usada en nuestra página. name se usa con content para dar <meta name="description" content="HTML5 y otras información sobre la página, que utilizarán entre otros los navegadores. historias" /> <meta name="keywords" content="HTML5, Meta, Etiqueta"/> <html></html> Abre y cierra un documento HTML <head></head> Encabezado de la página - aquí se coloca titulo, metatags, e informacion para buscadores entre otras cosas. Está información no es visible. <title></title> El título de la página web. <body></body> <body bgcolor=? text=? link=? vlink=? background="URL o ruta de archivo"> Dentro de esta etiqueta va toda la parte visible de la página web. alink=? Configura respectivamente el color de fondo de la página, el color del texto, el color de los link, el color de los links visitados, el color de los links al hacer clic, la imagen de fondo. Etiquetas HTML de Texto <pre></pre> Texto pre-formateado <h1></h1> hasta <h6></h6> Título más grande hasta más pequeño <b></b> Negrita <u></u> Subrayado <i></i> Cursiva <tt></tt> Tipo máquina de escribir <cite></cite> Cita, cursiva <em></em> Resalta una palabra, negrita o cursiva <strong></strong> negrita <font face=?></font> Coloca el tipo de letra: por ejemplo, arial, verdana, courier,etc. <font size=?></font> Coloca tamaño de letra, de 1 a 7 <font color=?></font> Configura el color, con valor hexadecimal o nombre (blue, green, etc.) Enlaces <a href="URL"></a> Hipervínculo <a href="mailto:EMAIL"></a> Hipervínculo mailto (para envío de correo) <a name="name"></a> Ancla en el mismo documento. En html5 usar id <a href="#name"></a> Liga hacia algún lugar dentro del mismo sitio Formato y presentación <p></p> Nuevo párrafo <p align=?> Alinea el párrafo hacia la izquierda, derecha o al centro <br/> Inserta un interlineado suave. Crea otra línea <blockquote> </blockquote> Sangrado <dl></dl> Lista de definiciones (glosario) <dt> Precede a cada término en definiciones <dd> Precede cada definición <ol></ol> Lista ordenada <li></li> Entrada en una lista <ul></ul> Lista con viñetas sin ordenar <div id="...">contenido</div> Capa, sirve para organizar los contenidos, pero a partir de html5 se recomiendan las nuevas etiquetas <header> <footer>.. Elementos Gráficos <img src="name"/> Incorpora una imagen <img src="name" align=?/> Alinea el texto respecto de la imagen: izquierda, derecha y centro <img src="name" border=?/> Determina el contorno de la imagen. Un valor 0 no tendrá contorno <map></map> Mapa de imágenes <hr size=? width=? noshade/> Linea horizontal Tablas <table></table> Crea tabla <tr></tr> Crea filas en una tabla <td></td> Crea celda en una fila <th></th> Encabezado de tabla, texto normal, negrita y centrado Atributos de Tablas <table border=#> Coloca contorno en las celdas de la tabla <table cellspacing=#> Espacio entre las celdas de una tabla <table cellpadding=#> Espacio entre el contorno de una celda y su contenido <table width=# or %> Ancho de la tabla, en pixeles o porcentaje del ancho de la página <tr align=?> or <td align=?> Alineación para las celdas, izquierda derecha, centro <tr valign=?> or <td valign=?> Alineación vertical de las celdas, arriba, abajo,enmedio <td colspan=#> Expansión de una celda, en número de columnas <td rowspan=#> Expansión de una celda, en número de celdas Marcos (frames) <frameset></frameset> Substituye a la etiqueta HTML body en documentos con frames. Puede insertarse en otros framesets <frameset rows="value,value"> Número de lineas en un frameset, usando pixeles o porcentaje de ancho <frameset cols="value,value"> Número de columnas en un frameset, usando pixeles o porcentaje de ancho <frame> Frame singular dentro de un framset <noframes></noframes> Texto que aparecerá en navegadores que no soportan frames Atributos de Frames <frame src="URL"> Especifica que página html se muestra <frame name="name"> Nombra al frame para que sea identificado por otros frames y accesado <frame marginwidth=#> Margen izquierdo y derecho de un grame, debe ser igual o mayor que 1 <frame marginheight=#> Margen superior e inferior de un grame, igual o mayor a 1 <frame scrolling=VALUE> Determina si un frame tiene barra de desplazamiento, Puede ser yes, no, auto, el cual es por defecto <frame noresize> No permite al usuario modificar el tamaño de un frame Formularios <form></form> Formulario <select name="name"></select> Menú desplegable <option> Opción del menú desplegable <textarea name="name" cols=x rows=y></textarea> Crea una caja de texto, columnas es el ancho y las lineas la altura (cols y rows) <input type="checkbox" name="name"> Crea un checkbox. <input type="radio" name="name" value="x"> Crea botón de radio. <input type=text name="name" size=20> Crea una opción de texto para entrada de información o despliegue <input type="submit" value="name"> Crea botón de envío de forma tipo submit < i n p u t type="image" src="name.gif"> border=0 name="name" Crea botón de envío con imagen <input type="reset"> Crea botón de limpieza (reset). Vacía la forma Otras Etiquetas HTML <embed src="url width="130"/> o ruta de archivo" height="50" Incorpora sonido con panel de control en la pantalla. <object width=x height=y><param name="movie" Para insertar una pelicula flash swf en html value="miarchivo.swf"><embed src="miarchivo.swf" width=x height=y> </embed> </object> <!-- Este es un comentario --> Inserta comentarios no visibles en la página. < iframe src ="pagina.html"> ... </iframe> Inserta un frame dentro de una página. Inline Frame. < script type="text/javascript"> codigo javascript </script> Inserta un script dentro de una página html. <span> </span> Aplica a un grupo de texto un estilo, por ejemplo font, tamaño, color. Colores En la web, los colores se representan por la cantidad que contienen de los colores primarios aditivos (Rojo, Verde y Azul). Para indicar la cantidad de cada uno, se utilizan números hexadecimales, que van del 0 a la F (A=10, B=11, ..., F=16). El valor mínimo (00) indica la ausencia total de ese color, y el máximo (FF) su intensidad total. Para indicar que nos referimos a un color, utilizamos el símbolo # la principio del código. Por tanto, podemos definir un color como #F7F0E2 donde el primer par corresponde al rojo, el segundo al azul y el último al verde. Observarás muchas veces que se emplean sólo tres valores. En este caso, se interpreta que los valores de los pares están repetidos. Es decir, los colores #FF22AA y #F2A son el mismo Ejercicios HTML (versiones anteriores a html5) En esta parte de la asignatura utilizaremos un editor de textos sencillo como notepad para escribir el código y familirizarnos con los lenguajes de marcas, evidentemente utilizando aplicaciones de diseño (como Dreamweaver) la construcción de páginas es mucho más sencilla, pero es importante tener una base sólida y por ello es mejor empezar de cero con un editor de archivos de texto. Ejercicios iniciales Repaso, Repaso2, Simulacro Ejercicio 1, Ejercicio 2, Examen Examen (imagenes) Examen -imagen1, imagen2, imagen3, imagen4- HTML5 Estructura básica de la página Los ficheros html5 tienen una estructura que no difiere demasiado de versiones anteriores, solamente incluye DOCTYPE al principio de página. Otra cuestión es que nos olvidaremos de momento del aspecto (color, tamaño, ...) esta parte la trataremos con los estilos, aquí nos centramos en el contenido de la página: <!DOCTYPE HTML> <html lang="es"> <head> <title>Nombre de la pagina</title> <meta charset="utf-8" /> </head> <body> contenido de la pagina </body> </html> Novedades de html5 HTML5 es la actualización de HTML, el lenguaje en el que es creada la web. HTML5 también es un termino de marketing para agrupar las nuevas tecnologías de desarrollo de aplicaciones web: HTML5, CSS3 y nuevas capacidades de Javascript. La versión anterior y más usada de HTML, HTML4, carece de características necesarias para la creación de aplicaciones modernas basadas en un navegador. HTML4 y HTML5 son 100% compatibles entre sí. Todo el código que esta en HTML normal seguirá funcionando sin problemas en HTML5. Algunas características son: DOCTYPE, elemento raíz HTML y meta: El Doctype se simplificó a sólo <!DOCTYPE html> , así como el elemento raíz <html> a <html lang=”es”> , lang es el lenguaje del sitio Web, “es” español, “en” inglés y más. La etiqueta meta a <meta charset=”utf-8″ /> Más estructura: <header>, <section> , <footer> , <nav>, <article> y más: son etiquetas las cuales favorecen la semántica y estructura de la página Web, ya que especifican con su nombre la sección del sitio. Actualmente muchos utilizamos algo por el estilo: <div id=”header”> o <div id=”footer”>. <header> para definir un bloque de contenido que hará las veces de título de la página web. <hgroup> permite colocar un h1, h2 y h3 dentro del header. Es decir, una cabecera que tendrá nombre de empresa y eslogan por ejemplo <nav> está diseñado para la típica barra de menú de navegación principal. Lo recomendado es usar listas <ul>. Sólo puede haber un <nav> por página. <section> Se utiliza para representar una sección "general" dentro de un documento o aplicación, como un capítulo de un libro <article> Define zonas únicas de contenido independiente. <aside> Este elemento puede utilizarse para efectos tipográficos, barras laterales, elementos publicitarios, para grupos de elementos de la navegación, u otro contenido que se considere separado del contenido principal de la página <footer> Es el pie de página y todo lo que lo compone. Junto a estos elementos aún contamos con algunos más como <figure> para contenidos multimedia, <time> para definir la fecha del contenido o <mark> para definir textos destacados para referencias; todas estas etiquetas con sus respectivos cierres. Canvas: se utiliza para de crear gráficos en 2D y 3D. Audio y Video: utilizado para reemplazar el plugin de flash, y volver nativo el control del audio y video con <video> y <audio> Aplicaciones offline: esta funcionalidad permite el desarrollo de sitios o aplicaciones Web trabajen de modo offline utilizando LocalStorage y Application Cache. Geolocalización: permite obtener la ubicación del usuario via dirección IP, conexión de red inalámbrica, etcétera. Con las coordenadas podemos orientarle sobre establecimientos cercanos, rutas, etc. Almacenamiento local y en sesión: Permite guardar datos para una sesión (mientras el navegador no se cierra) y para futuros accesos. Los datos se guardan en el equipo cliente, no en el servidor. Base de datos locales: Web SQL Database, desde el navegador se podrá acceder a bases de datos locales, algo por el estilo de las Cookies, pero pensadas para un mayor almacenaje de datos. Web workers: proporcionan una forma estándar para ejecutar código JavaScript en segundo plano. Con los web workers, se pueden generar varios “hilos” los cuales se ejecutan al mismo tiempo. Websockets: es una técnica de comunicación bidireccional a través de un TCP (Protocolo de Control de Transmisión), un tipo de tecnología PUSH. Nuevos tipos de inputs: para cada input del formulario se agregó un tipo dependiendo su uso específico: search, number, ranger, color, tel, url, email, date, datetime, datetime-local, week, month, time . Drag & drop: “arrastrar y soltar”, es una funcionalidad nativa de HTML5, muy utilizada con jQuery UI para brindar mayor experiencia al usuario. Microdata: funcionan para proporcionar semántica adicional a los sitios Web de forma estandarizada con el fin de que las maquinas comprendan el significado del documento. No se confundan con los previamente establecidos microformats y RDFa. Mejoras en formularios: El elemento input adquiere gran relevancia al ampliarse los elementos que se permitiran en el "type" Otros más: ContentEditable, postMessage (cross & same domain). Elementos html5 Aunque hemos visto elementos de html y novedades de html5 para conocer exactamente que elementos tenemos disponibles html5 podemos consultar en http://www.w3.org/TR/html5/index.html#elements-1 o todo las especificaciones asociadas en http://www.w3.org/TR/html5/ Atributos globales Todos los elementos permitidos en html5 admiten una serie de atributos que son los denominados atributos globales: Atributo Descripción accesskey Especifica una tecla de acceso directo para activar/hacer focus en un elemento. class Especifica uno o más nombres de las clases de un elemento (estilos css) contenteditable Especifica si el contenido de un elemento es editable o no. contextmenu Muestar un menú contextual al hacer clic dir Especifica la dirección del texto para el contenido de un elemento. draggable Indica si un elemento es arrastrable o no. dropzone Especifica si los datos arrastrados son copiados, movidos o vinculados, cuando se dejan caer sobre un elemento. hidden Indica si es visible o no id Identificador único en la página del elemento lang Idioma spellcheck Especifica si el elemento debe tener su ortografía y gramática comprobada o no. style Aplica un estilo css al elemento tabindex Especifica el orden de tabulación de un elemento. title Especifica información adicional acerca de un elemento. translate Indica si un elemento se traduce o no. (Es para evitar que código de programación o similares sean traducidos automáticamente con el resto de la página). De todos estos atributos globales nos vamos a centrar en style, puesto que al desaparecer muchos atributos que nos servían para aspecto de la página nuestras páginas saldrían muy sencillas, sin tipos de letras diferentes, colores, etc. Para establecer estilos utilizamos style="estilo:valor; estilo2:valor2;..." Asi que vamos a poner en una pequeña tabla los estilos más comunes para nuestras páginas. background-color Color de fondo color Color del texto background-image imagen de fondo font-size tamaño de la letra font-family tipo de letra: Arial Verdana Courier Times font-weight ancho de letra: bold bolder font-style estilo de letra: italic text-align alineacion del texto: left, center, justify, right list-style-type tipo de icono en las listas: square, circle, lower-alpha, upper-alpha, decimal, border border-top border-left border-right Borde del elemento, si es border indica a todos, sino a cada uno de los diferentes border-bottom bordes: solid, double, numeropx, ... margin margin-top margin-left margin- Margen del elemento, si es margin indica a todos, sino a cada no de los diferentes right margin-bottom margenes: numeropx, auto width ancho del elemento: celdas, tablas, ... height alto del elemento: celdas, tablas, ... border-color color del borde Validación de documentos html5 Una cuestión importante es validar nuestras páginas para comprobar que hemos utilizado las etiquetas correctas y que todo esta en orden. Desde Markup Validation Service del W3C existe la posibilidad de indicar HTML5 como Doctype (dentro de More Options) y validar una página Web. Esta marcado como experimental porque todavia hablamos de un borrador. Siempre avisará que es una validación experimental y que puede en un futuro no ser correcta. Ejercicios de html5 Todos los ejercicios han sido validados con el servicio de W3C. Ejercicios iniciales resueltos Propuestas de ejercicios Ejercicios avanzados Actividad a realizar para la asignatura: Date de alta en algún alojamiento web gratuito, por ejemplo nixiweb o hostinger Crear varias páginas en html5. La página inicial debe llamarse index.html. Intenta utilizar el máximo de etiquetas, atributos y estilos diferentes. Utiliza imagenes, tablas, videos (ojo que sea pequeño), iframes, etc. Sube las páginas y envia un correo a asirlmsgi @ gmail . com con un vinculo a tu dominio cuando hayas finalizado.
