Descargar la presentación
La descarga está en progreso. Por favor, espere
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=” 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 server- side 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
Presentaciones similares
