Diferencia entre revisiones de «Usuario:Lmorillas/modulo lenguajes de marcas/html»

De WikiEducator
Saltar a: navegación, buscar
 
(34 revisiones intermedias por el mismo usuario no mostrado)
Línea 9: Línea 9:
  
 
== Documentación básica==
 
== 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://www.w3.org/wiki/Web_Standards_Curriculum (trad. http://mosaic.uoc.edu/ac/le/es/index.html)
 
* http://dev.opera.com/articles/wsc/
 
* http://dev.opera.com/articles/wsc/
 
* http://www.w3schools.com/html/
 
* http://www.w3schools.com/html/
 +
* Referencia: http://reference.sitepoint.com/html
  
 
== Herramientas ==
 
== Herramientas ==
Línea 20: Línea 24:
 
* Safari
 
* Safari
 
* Chrome
 
* 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 ===
 
=== Editores ===
Línea 26: Línea 33:
 
* Kompozer. http://kompozer.net/ (linux) o Blue Griffon. http://bluegriffon.org/pages/Download
 
* Kompozer. http://kompozer.net/ (linux) o Blue Griffon. http://bluegriffon.org/pages/Download
 
* etc ...
 
* etc ...
 +
=== Otras ===
 +
* Validador http://validator.w3.org/
 +
* HTML Tidy http://tidy.sourceforge.net/
 +
 +
== ¿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 <nowiki><html></nowiki>
 +
** Normalmente van en parejas: <nowiki> <b> y </b></nowiki>
 +
** 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 | servidor html]]
  
 
==¿Por qué son necesarios los estándares web?==
 
==¿Por qué son necesarios los estándares web?==
Línea 46: Línea 70:
  
 
== Conceptos básicos de html ==
 
== Conceptos básicos de html ==
 +
<br/>
 +
{{Recursos de la Web|
 +
Title=Lecturas recomendadas|
 
http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html
 
http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html
 
* Head: http://mosaic.uoc.edu/ac/le/es/m3/ud2/index.html
 
* Head: http://mosaic.uoc.edu/ac/le/es/m3/ud2/index.html
 
* Doctype: http://mosaic.uoc.edu/ac/le/es/m3/ud3/index.html
 
* Doctype: http://mosaic.uoc.edu/ac/le/es/m3/ud3/index.html
 +
* Formatear el texto: http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html
 +
** '''Importante''': [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html#presentational No utilizar nunca elementos de presentación]
 
* Listas: http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html
 
* Listas: http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html
−
* Imágenes: http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html
+
** Dando estilo a listas: http://dev.opera.com/articles/view/32-styling-lists-and-links/
 +
* Imágenes: http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html
 
* Enlaces: http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html
 
* Enlaces: http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html
−
* Tablas: http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html
+
** Ejemplos: http://devfiles.myopera.com/articles/373/linkexamples.html
−
* Formularios: http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html
+
** Dando estilo a links: http://dev.opera.com/articles/view/32-styling-lists-and-links/
 +
* Tablas: http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html
 +
** Dando estilo a tablas: http://dev.opera.com/articles/view/33-styling-tables/
 +
* Formularios: http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html
 +
** Ejemplos de formularios:
 +
*** http://www.w3schools.com/html/html_examples.asp
 +
*** http://www.websitedatabases.com/php_form_maker/html_forms/html_form_examples.html
 +
** Diseño de formularios: http://dev.opera.com/articles/view/34-styling-forms/
 +
** Dando estilo a formularios: http://dev.opera.com/articles/view/styling-forms-with-attribute-selectors/
 +
** Estilo con CSS3: http://dev.opera.com/articles/view/styling-forms-with-attribute-selectors-1/
 
* Elementos semánticos: http://mosaic.uoc.edu/ac/le/es/m4/ud7/index.html
 
* Elementos semánticos: http://mosaic.uoc.edu/ac/le/es/m4/ud7/index.html
 
* Contenedores genéricos: http://mosaic.uoc.edu/ac/le/es/m4/ud8/index.html
 
* Contenedores genéricos: http://mosaic.uoc.edu/ac/le/es/m4/ud8/index.html
−
* Accesibilidad: http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html
+
* Accesibilidad: http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html, http://joeclark.org/book/sashay/serialization/
 
* Validar: http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html
 
* Validar: http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html
 +
* Más ejemplos:
 +
** Fuentes: http://devfiles.myopera.com/articles/593/SVGfonts_in_HTML.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===
 +
* [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html#htmlhistory http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html#htmlhistory]
 +
 +
=== La estructura de un documento HTML ===
 +
El documento HTML válido más pequeño posible sería algo similar a esto:
 +
<source lang=" html4strict">
 +
<!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>
 +
</source>
 +
 +
* 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.
 +
<source lang=" html4strict">
 +
<div id="contenido">
 +
    <h1>Conceptos básicos del
 +
      <abbr title="lenguaje de marcado de hipertexto">HTML</abbr>
 +
    </h1>
 +
</div>
 +
</source>
 +
 +
=== 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 ===
 +
<nowiki>Los caracteres <, > i & son especiales. </nowiki>El símbolo & se usa para introducir entidades: [http://evolt.org/node/21234/ http://evolt.org/node/21234/]
 +
=== Colores ===
 +
* http://www.w3.org/TR/html4/types.html#h-6.5
 +
 +
 +
== Escribiendo HTML ==
 +
* [[/lista rapida html | Chuleta de Elementos HTML]]
 +
* [http://www.w3schools.com/tags/ref_byfunc.asp Etiquetas ordenadas por funcionalidad]
 +
* [[/lista elementos | Lista de elementos y atributos]]
 +
* [[/doctypes | Doctypes de html 4.01]]
 +
* [[/charset | Configurando el Charset]]
 +
 +
== Metadatos ==
 +
* http://www.alistapart.com/articles/introduction-to-rdfa/
 +
 +
==Modelo de cajas==
 +
* http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/
  
 +
== Formularios ==
 +
* [[/intro bottle | Intro Bottle]]
  
 
{{Actividad|
 
{{Actividad|
Línea 65: Línea 167:
 
* [[/actividad1 | Instalación]]
 
* [[/actividad1 | Instalación]]
 
* [[/actividad2 | Descubrir html]]
 
* [[/actividad2 | Descubrir html]]
 +
* [[/actividad3  | Html Básico]]
 +
* [[/actividad4 | ¿Qué estudio?]]
 +
* [[/raggett1 | Iniciación a HTML (D. Raggett)]]
 +
* [http://www.w3.org/Style/Examples/011/firstcss.es.html Un ejemplo con estilo: html + css]
 +
* [[/presentacion slidy | Presentación con slidy]]
 +
* [[/actividad formulario | Formulario de contacto]]
 +
* [[/validacion paginas | Validación de páginas web]]
 +
* [[/proyecto web| Proyecto: La web de mi empresa]]
 
}}
 
}}

Última revisión de 12:20 24 nov 2011




Icon inter.gif

La evolución de la web

Este recurso te ayudará a centrar algunos conceptos en el tiempo: http://evolutionofweb.appspot.com/




Documentación básica

Herramientas

Navegadores

  • Firefox
  • IExplorer
  • Opera
  • Safari
  • Chrome

Extensiones firefox

Editores

Otras

¿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

Cómo funciona internet y la navegación web

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



Icon inter.gif

Lecturas recomendadas

http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.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.

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

Metadatos

Modelo de cajas

Formularios


Actividades

Icon activity.jpg

Actividades




Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Lmorillas/modulo_lenguajes_de_marcas/html&oldid=6557»