Descargar la presentación
La descarga está en progreso. Por favor, espere
Publicada porConcepción Márquez Olivera Modificado hace 5 años
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
Códigos HTML básicos Las etiquetas básicas o mínimas son:
9
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.
10
Cabecera del documento
<head>: define la cabecera del documento HTML. Contiene información sobre el documento que no se muestra directamente al usuario.
11
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">
12
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.
13
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.
14
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="
15
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".
16
Etiquetas en el cuerpo <h1> a <h6>: encabezados o títulos del documento con diferente relevancia.
17
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>.
18
Ejemplo de listado
19
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
20
Ejemplo de tabla
21
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>
22
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.
23
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
24
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
© 2024 SlidePlayer.es Inc.
All rights reserved.