HTML
Lenguajes de Marcas (DAW)
Lenguajes de marcas y sistemas de gestión de información
|
Este recurso te ayudará a centrar algunos conceptos en el tiempo: http://evolutionofweb.appspot.com/ |
Documentación básica
- Sitio del W3C: http://www.w3.org http://www.w3c.es
- Especificación HTML 4.01: http://www.w3.org/TR/html401/
- http://www.w3.org/wiki/Web_Standards_Curriculum (trad. http://mosaic.uoc.edu/ac/le/es/index.html)
- http://dev.opera.com/articles/wsc/
- http://www.w3schools.com/html/
- Referencia: http://reference.sitepoint.com/html
Herramientas
- Firefox
- IExplorer
- Opera
- Safari
- Chrome
Extensiones firefox
- Firebug https://addons.mozilla.org/en-US/firefox/addon/1843
- Web Developer https://addons.mozilla.org/extensions/moreinfo.php?id=60&application=firefox
Editores
- Aptana: http://aptana.com
- Notepad++. http://notepad-plus-plus.org/ (windows)
- Kompozer. http://kompozer.net/ (linux) o Blue Griffon. http://bluegriffon.org/pages/Download
- etc ...
Otras
- Validador http://validator.w3.org/
- HTML Tidy http://tidy.sourceforge.net/
Firefox' Firebug extension, a popular extension of that navigator that allows to edit live CSS on watched sites. Very practical to test some changes, though this extension does much more. HTML Validator Web Developer Extension HTML Tidy
¿Qué es HTML?
- Es un lenguaje para describir páginas web
- Acrónimo de Hyper Text Markup Language
- No es un lenguaje de programación, sino un lenguaje de marcas
- Un lenguaje de marcas es un conjunto de etiquetas de marcado
- Las etiquetas de HTML son palabras entre los símbolos <> como <html>
- Normalmente van en parejas: <b> y </b>
- La primera etiqueta es la de apertura, la segunda es la de fin.
- Los documentos HTML nos permiten escribir páginas web.
- Contienen etiquestas HTML y texto
Servidor HTML
Para nuestros ejercicios necesitaremos un servidor html
¿Por qué son necesarios los estándares web?
- Eficiencia (tamaño más reducido y optimizado de ficheros)
- Facilidad de mantenimiento
- Accesibilidad
- Compatibilidad de dispositivos
- Posicionamiento en motores de búsqueda (mayor visibilidad en Google, Yahoo!, etc.)
Historia de internet y de los estándares
http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html
http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html
Modelo de los estándares: html, css y js
http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html
La realidad de los estándares
http://mosaic.uoc.edu/ac/le/es/m1/ud4/index.html
Conceptos básicos de html
HTML(HyperText Markup Language) es un lenguaje para describir el contenido de los documentos de la web. Usa una sintaxis que contiene marcadores (conocidos como "elementos") que rodean al texto que hay dentro del documento para indicar a los navegadores cómo representar el documento.
Historia de HTML
La estructura de un documento HTML
El documento HTML válido más pequeño posible sería algo similar a esto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Página de ejemplo</title> </head> <body> <h1>Hola a todos</h1> </body> </html>
- El doctype describe el tipo de HTML que se utiliza
La sintaxis de los elementos HTML
Un elemento en HTML consiste en dos marcadores al principio y al final de un bloque de texto. Algunoselementos no rodean al texto. Casi siempre contener subelementos.
- Etiquetas de html: http://www.w3schools.com/tags/default.asp. https://developer.mozilla.org/en/HTML/Element
- Atributos habituales: http://www.w3schools.com/tags/ref_standardattributes.asp https://developer.mozilla.org/en/HTML/Attributes
Los elementos pueden tener atributos, que amplían su contenido. Los atributos van dentro de la etiqueta y su valor va entre comillas.
<div id="contenido"> <h1>Conceptos básicos del <abbr title="lenguaje de marcado de hipertexto">HTML</abbr> </h1> </div>
Elementos de bloque y en línea
- HTML tiene dos grandes tipos de elementos: de bloque y en línea.
- Elementos de bloque: párrafos, listas, títulos y tablas.
- Elementos en línea: enlaces, palabras destacadas ...
Caracteres especiales
Los caracteres <, > i & son especiales. El símbolo & se usa para introducir entidades: http://evolt.org/node/21234/
Colores
Escribiendo HTML
- Chuleta de Elementos HTML
- Etiquetas ordenadas por funcionalidad
- Lista de elementos y atributos
- Doctypes de html 4.01
- Configurando el Charset
Modelo de cajas
Actividades
