![Page 1: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/1.jpg)
HTMLHyperText Markup Language
(Lenguaje de Marcas de Hipertexto)
![Page 2: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/2.jpg)
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.
![Page 3: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/3.jpg)
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>
![Page 4: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/4.jpg)
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>
![Page 5: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/5.jpg)
ElementosEstructura 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.
![Page 6: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/6.jpg)
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.
![Page 7: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/7.jpg)
Estructura generalLos atributos del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dos etiquetas.
![Page 8: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/8.jpg)
Tipos de marcado
Marcado estructuralDescribe el propósito del texto.
Marcado presentacionalDescribe la apariencia del texto.
Marcado hipertextualSe utiliza para crear enlace.
![Page 9: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/9.jpg)
Marcado estructural
El marcado estructural describe el propósito del texto.
Ejemplo, <h2>Golf</h2>indica encabezamiento de segundo nivel.
![Page 10: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/10.jpg)
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.
![Page 11: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/11.jpg)
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
![Page 12: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/12.jpg)
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.
![Page 13: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/13.jpg)
Marcado hipertextual
Ejemplo, un enlace al Colegio sería de la forma <a href=”www.uprm.edu”>UPRM</a>.
También se pueden crear enlaces sobre otros objetos, tales como imágenes <a href=”enlace”><img src=”imagen” /></a>.
![Page 14: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/14.jpg)
Códigos HTML básicos
Las etiquetas básicas o mínimas son:
![Page 15: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/15.jpg)
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.
![Page 16: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/16.jpg)
Cabecera del documento
<head>: define la cabecera del documento HTML.
Contiene información sobre el documento que no se muestra directamente al usuario.
![Page 17: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/17.jpg)
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">
![Page 18: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/18.jpg)
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.
![Page 19: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/19.jpg)
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.
![Page 20: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/20.jpg)
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="http://www.uprm.edu">UPRM</a>.
![Page 21: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/21.jpg)
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".
![Page 22: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/22.jpg)
Etiquetas en el cuerpo
<h1> a <h6>: encabezados o títulos del documento con diferente relevancia.
![Page 23: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/23.jpg)
Etiquetas en el cuerpoEtiquetas 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>.
![Page 24: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/24.jpg)
Ejemplo de listado
![Page 25: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/25.jpg)
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
![Page 26: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/26.jpg)
Ejemplo de tabla
![Page 27: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/27.jpg)
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>
![Page 28: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/28.jpg)
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.
![Page 29: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/29.jpg)
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
![Page 30: HyperText Markup Language (Lenguaje de Marcas de … · Un lenguaje de marcas es una forma de ... u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo](https://reader033.vdocumento.com/reader033/viewer/2022051407/5b1652dc7f8b9a726d8b45a0/html5/thumbnails/30.jpg)
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 http://www.w3.org/TR/WCAG10