HTML5
UNLar 2020/5 – UNLAR– Ing Tulio Gensana
Nacimiento de internet
Los orígenes de internet: ARPA
Red de la Agencia de Proyectos de Investigación Avanzada a cargo del
Departamento de Defensa de Norteamérica. La función de ARPA, nacida en
1958, era y continúa siendo acompañar el desarrollo de nuevas tecnologías
con fines militares.
Tras varios años de investigaciones con la meta de establecer una red de
comunicación segura para transferir documentos o datos entre los
diferentes sistemas, los avances se fueron haciendo patentes. En 1965, una
computadora ubicada en el Estado de Massachusetts, al este de EE. UU. logró
enlazar con otra situada en California, en el extremo oeste del país, mediante
los protocolos conocidos como “conmutación de paquetes”.
Hitos en la Historia de Internet
¿Qué es HTML5?
• Es un lenguaje de marcas o etiquetas utilizado para el desarrollo
de páginas web.
• Define la estructura y contenido que debe tener una web.
• No define el estilo visual que tendrá para eso se usará CSS.
• Ha sido establecido como estándar de diseño web por el W3C.
• Los navegadores deben saber interpretar este lenguaje de
manera correcta (no siempre IE)
• Sobre HTML se desarrollan tecnologías para facilitar a los
usuarios el diseño de una web.
¿Como se escribe html?
El HTML se escribe en forma de «etiquetas»,
rodeadas por corchetes angulares (<,>,/).
El HTML también puede describir, hasta un cierto
punto, la apariencia de un documento, y puede
incluir o hacer referencia a un tipo de programa
llamado script, el cual puede afectar el
comportamiento de navegadores web y otros
procesadores de HTML
Maquetado Web
Elementos
Los elementos son la estructura básica de HTML.
Los elementos tienen dos propiedades básicas: atributos y contenido.
Cada atributo y contenido tiene ciertas restricciones para que se considere válido
al documento HTML.
Un elemento generalmente tiene una etiqueta de inicio (por ejemplo, <nombre-
de-elemento>) y una etiqueta de cierre (por ejemplo, </nombre-de-elemento>).
Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido
está ubicado entre las dos etiquetas (por ejemplo, <nombre-de-elemento
atributo="valor">Contenido</nombre-de-elemento>).
Encabezado
<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.
Esto es así de facto, ya que en teoría lo que define el tipo de
documento es el DOCTYPE, que significa la palabra justo tras
DOCTYPE el tag de raíz.
<head>: define la cabecera del documento HTML; esta cabecera
suele contener información sobre el documento que no se
muestra directamente al usuario como, por ejemplo, el título de
la ventana del navegador. Dentro de la cabecera <head> es
posible encontrar:
<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.
Cuerpo
<body>: define el contenido principal o cuerpo del documento. Esta 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. Dentro del cuerpo <body> es posible encontrar
numerosas etiquetas. A continuación se indican algunas a modo de ejemplo:
<article>: Representa una composición auto-contenida en un documento,
página, una aplicación o en el sitio, que se destina a distribuir de forma
independiente o re-utilizable.
<h1> a <h6>: encabezados o títulos del documento con diferente relevancia.
<table>: define una tabla.
<tr>: fila de una tabla.
<td>: celda de una tabla (debe estar dentro de una fila).
Otras etiquetas
[Link]
<a>: hipervínculo o enlace, dentro o fuera del sitio web. Debe definirse el
parámetro de pasada por medio del atributo href. Por ejemplo: <a
href="[Link] title="Ejemplo" target="_blank"
tabindex="1">Ejemplo</a> se representa como ejemplo.
<li><ol><ul>: etiquetas para listas.
<b>: texto en negrita (etiqueta desaprobada. Se recomienda usar la etiqueta
<strong>).
<i>: texto en cursiva (etiqueta desaprobada. Se recomienda usar la etiqueta
<em>).
<s>: texto tachado (etiqueta desaprobada. Se recomienda usar la etiqueta
<del>).
<br>: Sirve para provocar un salto de línea. Esta etiqueta no se cierra.
HTML5 Significado Semántico
Una de las principales características de HTML5 son los elementos de marcado
con significado semántico.
Por nombrar algunos: header, footer, main, nav o article.
El significado semántico de estos elementos supone importantes ventajas.
Por ejemplo, a cada uno se le asigna un role ARIA (Accessible Rich Internet
Application) específico por defecto. Esto ayuda a mejorar la accesibilidad a
nuestra página web para los que utilicen alguna tecnología de asistencia en la
navegación como pueden ser los lectores de pantalla (screen readers).
Anatomía de un blog en HTML5
[Link]
El DOCTYPE
Al comienzo de un documento HTML5 es imprescindible poner la simple y
sencilla línea:
<!DOCTYPE html>
No hacerlo hará que el navegador analice la página en quirks mode, una
técnica utilizada por los navegadores modernos para emular a navegadores
viejos y asegurar que viejas webs se vean bien. ¿Imáginas una web
moderna en HTML5 analizada como si fuese una web antigua? Estás
avisado. No te olvides nunca de poner el <!DOCTYPE html>
Insertar imágenes
[Link]
<img src="[Link]" alt="[Link]" width="104" height="142">
<img>: imagen. Requiere del atributo src, que indica la ruta en la que se
encuentra la imagen. Por ejemplo: <img src="./imágenes/[Link]" />.
Es conveniente, por accesibilidad, poner un atributo alt="texto alternativo".
Solo se vera si no se puede cargar la imagen
También se pueden establecer las medidas en pixels de la imagen ancho
(width) y alto (height)
¿Donde deben estar las imágenes?
Se pueden utilizar imágenes de otro sitio web (no
recomendado)
Lo ideal es descargar todas las imágenes para el sitio en una
sola carpeta
Dominio y Hosting web
Todo sitio web consta de un dominio y un hosting web. El dominio es como tu
dirección y el hosting web como el edificio físico.
Hosting Web Compartido: Es el sistema de alojamiento web más económico. Con
este método de hosting, varios sitios web comparten los recursos de un mismo
servidor. A cada usuario se le asigna una cantidad de recursos y de espacio de
almacenamiento de dicho servidor. Tiende a ser la mejor opción para bloggers,
principiantes y aficionados.
Servidor VPS: Un servidor privado virtual (VPS) es como un hosting web compartido
pero con esteroides. Por lo general, se utiliza un hardware con más potencia, en el
cual varios sitios se almacenan en una misma máquina, pero cada uno utiliza un
software de virtualización que les permite operar de forma independiente, como
si se tratara de mini servidores dedicados.
Hosting Web Dedicado: Se trata de una excelente alternativa para los
profesionales, se trata de un servicio de hardware y software exclusivo
Dominios
[Link]
Sitios recomendados
[Link]
[Link]
Host en la maquina local (localhost)
[Link]
En Hardware, en el contexto de
redes TCP/IP, localhost es un nombre reservado que
tienen todas las computadoras, routers o
dispositivos independientemente de que dispongan
o no de una tarjeta de red ethernet. El
nombre localhost es traducido como la dirección
IP de loopback [Link] en IPv4
[Link]
es-localhost-ip-127001-que-utiliza-48046
Xampp C:\xampp\htdocs
IIS C:\inetpub\wwwroot
CSS
[Link]
¿Qué es CSS?
CSS son las siglas de C ascading S tyle S heets
CSS describe cómo se mostrarán los
elementos HTML en pantalla, papel o en
otros medios.
CSS ahorra mucho trabajo . Puede controlar
el diseño de varias páginas web a la vez
Las hojas de estilo externas se almacenan
en archivos CSS
Tres formas de insertar CSS
Hay tres formas de insertar una hoja de estilo:
1. CSS externo
Se utiliza un archivo adicional, normalmente esta en la carpeta css de la estructura
web
2. CSS interno
3. CSS en línea
CSS interno
2. CSS interno: en el <head> de la pagina se definen los elementos de <style>
CSS en linea
3. CSS en línea: en el <body> de la pagina se define el atributo <style> para
cada elemento de html