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

Workbench evidencias

Evidencia de la instalacion de Worbench Tablas: Estructura de las tablas: Conexion Python y mysql import pymysql try: conexion = pymysql.connect(host='localhost',user='root',password='cuaj990804',db='empresa') print("Conexion correcta") except (pymysql.err.OperationalError, pymysql.err.InternalError) as e: print("Ocurrio un error al conectar: ", e)
Publicar un comentario
Leer más

Django

¿Qué es Django? Django es un framework web diseñado para realizar aplicaciones de cualquier complejidad   en unos tiempos muy razonables. Está escrito en Python y tiene una comunidad muy amplia, que está en continuo crecimiento. Webs que utilizan Django Desde la página web de Django podemos ver unos destacados, en los que podemos ver algunas webs como la de  National Geografic, Disqus, Instagram, Mozilla Foundation y Pinterest , que son webs con un tráfico altísimo y utilizan Django. Por qué usar Django Los motivos principales para usar Django son: Es muy rápido : Si tenéis una startup, tenéis prisa por terminar vuestro proyecto o, simplemente, queréis reducir costes, con Django podéis construir una aplicación muy buena en poco tiempo. Viene bien cargado : Cualquier cosa que necesitéis realizar, ya estará implementada, sólo hay que adaptarla a vuestras necesidades. Ya sea porque hay módulos de la comunidad, por cualquier paquete Python que encontréis o...
Publicar un comentario
Leer más

Practicas en IDE

Programas. Practica 1 Suma de 2 valores con sleep. Código: #PROGRAMA_SUMA_BASICA import time print"Ingresa un primer valor:" a=int(input("")) print "Ingresa un segundo valor:" b=int(input("")) suma= a + b print"Suma de valores ingresados:" print (suma) time.sleep(5) Corrida del programa: Practica 2 Manejo de matematicas. Código: Corrida del programa: Practica 3 If con edad. Codigo Corrida del programa: Practica 4 If implementado de otra forma Practica 5 If con funciones. Practica 6 Numeros con if Practica 7 Segunda forma de implementar el if. Practica 8 Numeros positivos y negativos. Practica 9 Métodos con if. Practica 10 Múltiplos de números métodos. Practica 11 Califiaciones Practica 12  Programa de dulces. Practica 13 Programa prestamos. Programa 14 Otra...
Publicar un comentario
Leer más