Ir al contenido principal

HTML 5

Introducción

HTML son las siglas de HyperText Markup Language o traducido de forma literal: Lenguaje de Marcas de HyperTexto. HTML5, como se puede deducir de su nombre, es la 5 revisión del estándar creado en 1991 por Tim Berners-Lee y que contenía originalmente 22 elementos. 

Ventajas de utilizar HTML5 en cursos virtuales

HTML es el que permite que un navegador sepa lo que esta leyendo y como debe mostrarlo al usuario. De esta forma, los navegadores saben donde deben mostrar el texto, donde va una imagen o donde hay un enlace.

HTML es el que permite que un navegador sepa lo que esta leyendo y como debe mostrarlo al usuario. De esta forma, los navegadores saben donde deben mostrar el texto, donde va una imagen o donde hay un enlace.

Para escribir páginas web en HTML utilizarás etiquetas rodeadas por los simbolos <,> por ejemplo <head>. Estos elementos tienen dos propiedades básicas: atributos y contenido. La mayoría de elementos necesitan además, una etiqueta de cierre. Para escribir un título, por ejemplo, lo harías así:

<h1>Titulo de tu página</h1>

Vamos a ver una breve introducción al funcionamiento de la interfaz:

  1. Permite navegar entre las diferentes lecciones

  2. Permite navegar entre los diferentes snippets

  3. Ejemplo de código HTML (con la sintaxis resaltada)

  4. Resultado del código (3) en embebido en la página

  5. Nos permite abrir la previsualización a pantalla completa

  6. Nos permite usar el editor web Codepen.io, un editor bastante popular para experimentar con el código.

  7. Enlace a los issues de Github donde podremos publicar cualquier duda o problema sobre los ejemplos.


Estructura básica de una página

Primero me gustaría hacer una pequeña aclaración sobre terminología que voy a usar, diferenciaremos:

  • Página web: como una página individual dentro de un sitio web (p.e: rauljimenez.info/contacto)

  • Sitio web (o web): como el conjunto de todas las páginas en las que podemos navegar dentro de un mismo dominio (p.e: rauljimenez.info es un sitio web que incluye: rauljimenez.info/experiencia, rauljimenez.info/contacto, etc).


Función de cada etiqueta

<!DOCTYPE html>: indicar al navegador que el código HTML en el que está escrita la página es en la versión 5, osea que es HTML5. +info

<html lang="es">... </html>: indica la raíz del documento y todas las etiquetas deben estar incluidas dentro. Además se especifica el idioma en el que está escrita, es = Español (+idiomas).

<head> ... </head>: se usa para envolver otras etiquetas que ofrecen información principalmente a: el navegador, a los buscadores y a otras páginas (como pueden ser redes sociales, etc). La información especificada dentro del head no se muestra dentro1 de la página web que ve el usuario.

<meta charset="UTF-8">: indica al navegador qué tipo de caracteres contiene la página. Con el atributo charset indicamos cuál de todos los juegos de caractares disponibles usamos. Con el valor UTF-8 podremos crear contenido en la mayoría de los sistemas de escritura: español, inglés, francés, etc.

<title> ... </title>: indica el título de nuetra página. Este se muestra en: la pestaña del navegador, el enlace que indexan los buscadores, etc.

<body> ... </body>: contiene todo el contenido visible por el usuario dentro de nuestra página.


Etiquetas básicas

Comentarios

Publicar un comentario

Entradas populares de este blog

Comandos CMD

Todas las versiones de Windows incluyen una serie de comandos que permiten transmitir órdenes directamente al sistema operativo. Son simples instrucciones que se pueden usar de formas diferentes, con la herramienta Símbolo del Sistema o usándolos en archivos batch. El Símbolo del Sistema, Consola de CMD o intérprete de comandos, es una herramienta incluida en todas las versiones de Windows.  Cls:   Este comando limpia la ventana de CMD eliminando el contenido de operaciones anteriores. Exit:   Cierra la ventana de CMD. Si se ha iniciado un comando de procesado por lotes cierra el proceso, pero mantiene CMD abierto. Help:   Muestra todos los comandos disponibles y una breve descripción. Si quieres obtener información sobre un comando en concreto o  cómo formar la sintaxis de un determinado comando , escribe el comando seguido de una barra diagonal y un signo de interrogación. Por ejemplo:  cd /? Cd:  Este es uno de los comandos más útiles par...
Publicar un comentario
Leer más

1.2 Dispositivos de hardware y software para el despliegue gráfico.

Hardware: Un sistema gráfico tradicional consta de cuatro componentes: procesador, unidad de procesamiento gráfico, dispositivos de entrada y dispositivos de salida. El procesador desempeña un papel central en cualquier sistema gráfico y cada uno de los demás componentes debe comunicarse en algún momento con otro, o con el procesador mediante un canal de datos. Generalmente el dispositivo principal de salida de un sistema gráfico es un monitor de video. El tipo más común es un CRT y actualmente se incrementa el uso de los LCD. La cantidad de memoria de video requerida para almacenar una pantalla se determina multiplicando el número de pixeles horizontales, el número de pixeles verticales y el número de bytes usados para codificar un pixel. Memoria de video = Res. H x Res. V x Núm. de bytes por pixel Cada pixel se codifica mediante un conjunto de bits de longitud determinada (la llamada profundidad de color ), por ejemplo, puede codificarse un pixel con un byte, u 8 bit...
Publicar un comentario
Leer más

Introducción al lenguaje ensamblador

Importancia de la programación en lenguaje ensamblador La importancia del lenguaje ensamblador radica principalmente que se trabaja directamente con el microprocesador; por lo cual se debe de conocer el funcionamiento interno de este, tiene la ventaja de que en él se puede realizar cualquier tipo de programas que en los lenguajes de alto nivel no lo pueden realizar. Otro punto sería que los programas en ensamblador ocupan menos espacio en memoria. El lenguaje ensamblador, es un lenguaje de programación de bajo nivel. Consiste en un conjunto de mnemónicos que representan instrucciones básicas para los computadores, microprocesadores, micro controladores y otros circuitos integrados programables. Implementa una representación simbólica de los códigos de máquina binarios y otras constantes necesarias para programar una arquitectura de procesador y constituye la representación más directa del código máquina específico para cada arquitectura legible por un programador. Ventajas...
Publicar un comentario
Leer más