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

Las IDES mas famosas para programas en Python

Un IDE es un entorno de programación que ha sido empaquetado como un programa de aplicación, o sea, consiste en un editor de código, un compilador, un depurador y un constructor de interfaz gráfica. Los IDEs pueden ser aplicaciones por sí solas o pueden ser parte de aplicaciones existentes.  1 - Pycharm IDE El  IDE Pycharm  es muy completo, creado por   JetBrains . Este IDE es profesional y viene en dos modalidades: una   edición Free   y otra muy completa privada que apunta a empresas de desarrollo de software. La popularidad de el   IDE Pycharm   se puede medir a partir de que grandes empresas como   Twitter ,   Groupon ,   Spotify ,   ebay  y   telefónica , han utilizado éste para su trabajo.  La mayoría de sus características están disponibles en la versión gratuita, se integra con   IPython , soporta   Anaconda , así como otros paquetes científicos como   matplotlib  y ...
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