HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto)

Tamaño: px

Comenzar la demostración a partir de la página:

Download "HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto)"

Marcos Gallego Lagos
hace 8 años
Vistas:

1 HTML HyperText Markup Language (Lenguaje de Marcas de Hipertexto)

2 Introducción Un lenguaje de marcas es una forma de codificar junto con el texto, incorporando etiquetas que contienen información adicional de la estructura del texto o su presentación. HTML, siglas de HyperText Markup Language (Lenguaje de Marcas de Hipertexto). Es el lenguaje de marcado predominante para la construcción de páginas web.

3 Nociones básicas HTML Toda etiqueta se identifica porque está encerrada entre los signos menor que y mayor que (<>), y algunas tienen atributos que pueden tomar algún valor. En general las etiquetas se aplicarán de dos formas especiales: Se abren y se cierran: <p></p> No pueden abrirse y cerrarse: <hr>

4 Marcado HTML Consta de varios componentes, incluyendo elementos y sus atributos, tipos de data, y la declaración de tipo de documento. Ejemplo de marcado en el lenguaje: Me llamo Juan del Pueblo. <nombre>juan</nombre> <apellido>del Pueblo</apellido>

5 Elementos Estructura básica de HTML con dos propiedades: atributo y contenido. Generalmente tiene una etiqueta de inicio y una etiqueta de cierre: etiqueta de inicio: <nombre-de-elemento> etiqueta de cierre: </nombre-de-elemento> Elementos tales como <br> y <hr>, no tienen contenido ni llevan una etiqueta de cierre.

6 Atributos La mayoría de los atributos de un elemento son pares nombre-valor. Se separan por un signo de igual "=" y escriben en la etiqueta de comienzo de un elemento, después del nombre de éste. El valor puede estar rodeado por comillas dobles o simples.

7 Estructura general Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dos etiquetas.

8 Tipos de marcado Marcado estructural Describe el propósito del texto. Marcado presentacional Describe la apariencia del texto. Marcado hipertextual Se utiliza para crear enlace.

9 Marcado estructural El marcado estructural describe el propósito del texto. Ejemplo, <h2>golf</h2> indica encabezamiento de segundo nivel.

10 Marcado presentacional El marcado presentacional describe la apariencia del texto, sin importar su función. Ejemplo <strong>enfásis fuerte</strong> y <em>énfasis</em>. La mayoría del marcado presentacional ha sido reemplazado con HTML 4.0, en favor de Hojas de estilo en cascada.

11 Marcado presentacional <b>: texto en negrita (Etiqueta desaprobada. Se recomienda usar la etiqueta <strong>) <i>: texto en itálico (Etiqueta desaprobada. Se recomienda usar la etiqueta <em>) <s>: texto tachado (Etiqueta desaprobada. Se recomienda usar la etiqueta <del>) <u>: texto subrayado

12 Marcado hipertextual El marcado hipertextual se utiliza para enlazar partes del documento con otros documentos o con otras partes del mismo documento. Para crear un enlace es necesario utilizar la etiqueta de ancla <a> junto con el atributo href, que establecerá la dirección URL a la que apunta el enlace.

13 Marcado hipertextual Ejemplo, un enlace al Colegio sería de la forma <a href= >UPRM</a>. También se pueden crear enlaces sobre otros objetos, tales como imágenes <a href= enlace ><img src= imagen /></a>.

14 Códigos HTML básicos Las etiquetas básicas o mínimas son:

15 Códigos HTML básicos DOCTYPE es la etiqueta raíz que define el tipo de documento: <html>: define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML.

16 Cabecera del documento <head>: define la cabecera del documento HTML. Contiene información sobre el documento que no se muestra directamente al usuario.

17 Dentro de la cabecera <title>: define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana. <link>: para vincular el sitio a hojas de estilo o iconos: <link rel="stylesheet" href="/style.css" type="text/css">

18 Dentro de la cabecera <style>: para colocar el estilo interno de la página; ya sea usando CSS, u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo externo usando la etiqueta <link>. <meta>: para metadatos como la autoría o la licencia, incluso para indicar parámetros http (mediante http-equiv="") cuando no se pueden modificar por no estar disponible la configuración o por dificultades con serverside scripting.

19 Cuerpo del documento <body>: define el contenido principal o cuerpo del documento. Es la parte del documento html que se muestra en el navegador. Dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes.

20 Etiquetas en el cuerpo <a>: Hipervínculo o enlace, dentro o fuera del sitio web. Debe definirse el parámetro de pasada por medio del atributo href: <a href="

21 Etiquetas en el cuerpo <img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen. Por ejemplo: <img src="./imagenes/mifoto.jpg" />. Es conveniente, por accesibilidad, poner un atributo alt="texto alternativo".

22 Etiquetas en el cuerpo <h1> a <h6>: encabezados o títulos del documento con diferente relevancia.

23 Etiquetas en el cuerpo Etiquetas para hacer listas: <li> identifica un ítem </li> la etiqueta final puede ser opcional <ol> lista ordenada <ul> lista sin orden Es requerida la etiqueta final para la lista ordenada </ol> y sin orden </ul>.

24 Ejemplo de listado

25 Etiquetas en el cuerpo <div>: división de la página. Se recomienda, junto con css, en vez de <table> cuando se desea alinear contenido. <table>: define una tabla <tr>: fila de una tabla <td>: columna de una tabla <th>: celda de encabezado dentro de una fila

26 Ejemplo de tabla

27 Script <script>: incrusta un script en la página, o se llama a uno mediante src="url del script". Se recomienda incluir el tipo MIME en el atributo type, en el caso de JavaScript text/ javascript. Es conveniente, por accesibilidad, poner un <noscript>descripción del script</noscript>

28 Ver el código fuente Seleccionando la opción Ver código fuente en el navegador, se puede ver realmente la información que está recibiendo éste y cómo la está interpretando.

29 Editar código HTML Puede ser creado y editado con cualquier editor de textos básico. Existen editores para la realización de sitios Web con características WYSIWYG (What You See Is What You Get, o en español: lo que ves es lo que obtienes ). Ejemplos: Dream Weaver o FrontPage

30 Accesibilidad Web El diseño en HTML aparte de cumplir con las especificaciones propias del lenguaje debe respetar unos criterios de accesibilidad web, siguiendo unas pautas, o las normativas y leyes vigentes en los países donde se regule dicho concepto. Web Content Accesability Guidelines (WCAG) Pautas de Accesibilidad al Contenido Web 1.0

Documentos relacionados

Capítulo 1 Documentos HTML5

Capítulo 1 Documentos HTML5 1.1 Componentes básicos HTML5 provee básicamente tres características: estructura, estilo y funcionalidad. Nunca fue declarado oficialmente pero, incluso cuando algunas APIs