CLASE 8_GLOSARIO DE CÓDIGOS HTML

CLASE 8_GLOSARIO DE CÓDIGOS HTML

- noviembre 23, 2017

GLOSARIO DE CÓDIGOS HTML

index.html Es la página raíz en la que se plantea el primer documento HTML.
about.html - contact.html Direcciones dentro de una misma carpeta.

ELEMENTO RAÍZ

<!DOCTYPE html> Define que el documento está bajo el estándar de HTML 5.

<html></html> Representa la raíz de un documento HTML o XHTML. Todos los demás elementos deben ser descendientes de este elemento.

METADATOS DEL DOCUMENTO

<head> </head> Representa una colección de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo.

<title> </title> Define el título del documento, el cual se muestra en la barra de título del navegador o en las pestañas de página(no aparece dentro de la página). Solamente puede contener texto y cualquier otra etiqueta contenida no será interpretada.

<link> Usada para enlazar JavaScript y CSS externos con el documento HTML actual.

<style> Etiqueta de estilo usada para escribir CSS en línea. Ayuda agregando valores como tamaño, color, tipo de letra, alineación entre otros valores, a las tablas, y etiquetas que dan el contenido al website.

SECCIONES

<body> </body> Representa el contenido principal de un documento HTML. Solo hay un elemento <body> en el documento.

<h1> </h1> Los elementos de cabecera implementan seis niveles de cabeceras de documentos; <h1> es la de mayor y <h6> es la de menor importancia. Un elemento de cabecera describe breve mente el tema de la sección que introduce.

<nav> </nav> Define una sección que solamente contiene enlaces de navegación.

<header> Define la cabecera de una página o sección. Usualmente contiene un logotipo, el título del sitio Web y una tabla de navegación de contenidos.

<footer> Define el pie de una página o sección. Usualmente contiene un mensaje de derechos de autor, algunos enlaces a información legal o direcciones para dar información de retro alimentación.

<adress> Define una sección que contiene información de contacto.

<main> Define el contenido principal o importante en el documento. Solamente existe un elemento <main> en el documento.

AGRUPACIÓN DE CONTENIDO

<div> </div> Representa un contenedor genérico sin ningún significado especial.

<p> </p> Define una parte que debe mostrarse como un párrafo.

<ul> </ul> Define una lista de artículos sin orden.

<li></li> Define una lista de artículos sin orden.

<ol> </ol> Define una lista ordenada de artículos.

<hr> Representa un quiebre temático entre párrafos de una sección o articulo o cualquier contenido.

SEMÁNTICA A NIVEL DE TEXTO

</br> Representa un salto de línea.

<span> Se utilizan principalmente para envolver pequeños fragmentos de contenido que están en la misma línea que otro contenido y no dividen el texto en secciones diferentes.

<em> </em> Representa un texto enfatizado, como un acento de intensidad.

<strong> </strong> Representa un texto especialmente importante.

<a> </a> Representa un hiperenlace, enlazando a otro recurso.

CONTENIDO INCRUSTADO

<img> Representa una imagen. Debe tener la siguiente estructura <img src="image.location.com"/>

<video> </video> Representa un video, y sus archivos de audio y canciones asociadas, con la interfaz necesaria para reproducirlos. Etiqueta requiere un src atributo con un enlace a la fuente de video.

DATOS TABULARES

<table> </table> Representa datos con más de una dimensión.Elemento para crear tablas de contenido.

<tr> </tr> Representa una fila de celdas en una tabla.

<td> </td> Representa una celda de datos en una tabla.

<th> </th> Representa una celda encabezado en una tabla.

<colspan> Atributo que ayuda a expandir las columnas. <td colspan="2"> </td>

<rowspan> Atributo que ayuda a expandir las filas. <td rowspan="2"> </td>

<thead> </thead> Representa el bloque de filas que describen las etiquetas de columna de una tabla.

<tbody> </tbody> Representa el bloque de filas que describen los datos concretos de una tabla.

<tfoot> </tfoot> Representa los bloques de filas que describen los resúmenes de columna de una tabla.

ATRIBUTOS Y OTROS

src Atributo debe establecerse en la fuente de la imagen o la ubicación de la imagen. Debe ser el localizador uniforme de recursos (URL) de la imagen.

id Viven directamente dentro de la etiqueta de apertura de un elemento. Los atributos se componen de las siguientes dos partes: ° El nombre del atributo; ° El valor del atributo.

alt Atributo también sirve para los siguientes propósitos: ° Si una imagen no se carga en una página web, el usuario puede pasar el mouse sobre el área originalmente diseñada para la imagen y leer una breve descripción de la misma. ° Los usuarios con discapacidad visual a menudo navegan por la web con la ayuda de un software de lectura de pantalla.

width-height Se utilizan para establecer el tamaño del video que se muestra en el navegador.

href Este atributo representa la referencia de hipervínculo y se utiliza para vincular a una ruta de archivo, o la dirección donde se encuentra un archivo (ya sea en su computadora u otra ubicación).

Se utiliza para agregar un comentario, sin que éste afecte al código; es utilizado para dejar un mensaje, si lo abre otra persona sabrá que deseaba hacer el creador con el código, por lo cual, recibe pautas de desarrollo.

target Atributo especifica que un enlace debe abrirse en una nueva ventana. En ese caso, es posible que desee que los usuarios lean el sitio web vinculado, pero esperamos que regresen a su página web.
_blank Para que un enlace se abra en una nueva ventana, el target atributo requiere un valor de _blank. Es un valor que se le designa al atributo target para que determine la orden de abrir un link en otra página. target = "_blank">

controls Es un atributo que sirve para indicar al navegador que debe incluir controles de video como pausa, play y siguiente.

DIRECCIÓN DE CÓDIGOS

Documento HTML
<!DOCTYPE html>

<html>

<head>

   <title>My Coding Journey</title>

</head>

<body>

   <h1>Hello World!</h1>

   <p>there is <em>a first</em> paragraph</p>

</body>

</html>

Listas
<ul>

<li>Limes</li>

<li>Tortillas</li>

<li>Chicken</li>

</ul>

Imagen
<img src="www.location.com" alt="A field of yellow sunflowers" />

Video
<video src="myVideo.mp4" width="320" height="240" controls> </video>

Vincular
<a href="https://www.wikipedia.org/">This Is A Link To Wikipedia</a>

Nueva Página
<a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank">The Brown Bear</a>

Tablas
<table>

    <thead>

      <tr>

        <th>Identidad</th>

        <th>Edad</th>

        <th>Universidad del Azuay</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <th>Sanmartin Andersson</th>

        <td>20</td>

        <td>Estudiante</td>

      </tr>

    </tbody>

</table>

Comentarios