Descargar la presentación
La descarga está en progreso. Por favor, espere
1
Introducción al HTML CORUNIVERSITEC Multimedia y Web
Docente: Mg. Oscar Barrera Semana:3
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 5, 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
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.
19
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="
20
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".
21
Etiquetas en el cuerpo <h1> a <h6>: encabezados o títulos del documento con diferente relevancia.
22
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>.
23
Ejemplo de listado
24
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
25
Ejemplo de tabla
26
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
27
CURSO HTML5 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. CURSO HTML5
Presentaciones similares
