Navegadores

y dispositivos

</>
 1 Navegadores

</>
Navegadores y dispositivos
 Los navegadores
Un navegador es un programa que
tenemos, o podemos instalar, y abrir
en nuestra computadora. A través del
mismo podemos acceder y navegar
por internet para visitar páginas,
documentos, entre otros, gracias a la
interpretación previa que hace de
estos.

</>
Navegadores y dispositivos
 2 Compatibilidad

</>
Navegadores y dispositivos
 La forma en la que el navegador interpreta
y muestra los archivos HTML con los estilos
de los archivos CSS está establecida por el
consorcio W3C (World Wide Web
Consortium), que es la organización de
estándares de Internet.

</>
Navegadores y dispositivos
 Compatibilidad
Conocer los distintos tipos de navegadores, así como
sus incompatibilidades, es importante a la hora de
desarrollar una página web. No todos los usuarios de
un sitio web visitan la página con el mismo navegador
que los creadores utilizan.

Tener esto en cuenta es muy importante

para evitar que haya usuarios que
abandonen nuestro sitio porque no se
puede visualizar correctamente.

</>
Navegadores y dispositivos
 Una de las características que
han hecho a Google Chrome
tan popular es que es uno de
los más completos navegadores
en cuanto a respetar los
estándares web.

</>
Navegadores y dispositivos
 3 Responsive

</>
Navegadores y dispositivos
 Responsive
Cuando utilizamos el término
“responsive” (adaptable), nos
referimos principalmente a
“responsive design” (diseño
web adaptable). Esto significa
hacer que un sitio web sea
accesible y adaptable en todos
los dispositivos: tablets,
celulares, pantallas grandes...

</>
Navegadores y dispositivos
 Introducción
a HTML

</>
 1. Analizar un sitio web
Índice 2. Flow del sitio

</>
Introducción a HTML 2
 Analizar
1 un sitio
web

</>
Introducción Introducción
a HTMLe imágenes
Rutas, hipervínculos a HTML 3
 Analizar un sitio web
Antes de empezar a recorrer el lenguaje, comencemos analizando un sitio web.

Introducción a HTML 4
 Analizar un sitio web
Si usamos nuestra imaginación y resaltamos las cajas que recorren este sitio,
veríamos algo como esto:

Introducción a HTML 5
 Analizar un sitio web
Si hacemos lo mismo con la información que está dentro de esas cajas,
probablemente tendríamos algo como esto:

Introducción a HTML 6
Esto nos lleva a la conclusión de que
cada elemento en el lenguaje HTML
produce un componente visual en el
navegador.
 2 Flow del sitio

</>
Introducción Introducción
a HTMLe imágenes
Rutas, hipervínculos a HTML 8
 Flow del sitio
Uno de los propósitos de este módulo es que podamos comprender cómo es
que los elementos HTML interactúan entre sí.
Para lograr eso, necesitaremos la ayuda de algunas herramientas que
aprenderemos más adelante, pero por ahora sigamos la siguiente regla :

Si un elemento ocupa toda la pantalla, el siguiente colapsará y

caerá al primer lugar que tenga disponible. 100%

</>
Introducción a HTML 9
 Flow del sitio
Algunos elementos que vamos a incorporar en nuestros sitios ya ocupan el
100% del ancho de nuestra pantalla, es por eso que veremos que casi todos los
elementos se colocan uno debajo del otro.
100%

Algunos elementos, por defecto, van a ocupar solo su

contenido. Más adelante profundizaremos sobre ellos. contenido

100%

100%

</>
Introducción a HTML 10
 100%

Flow del sitio

En los próximos temas, brindamos un ayuda
memoria para que tengamos una referencia de
cuánto espacio ocupa cada elemento en la
pantalla. Se encuentra arriba a la derecha.

</>
Introducción a HTML 11
 Introducción a la
semántica

</>
 Utilizar etiquetas semánticas nos
permite generar un código más
entendible, tanto para los humanos
como para los buscadores.

</>
Introducción a la semántica 2
 Las etiquetas semánticas de bloque
Las etiquetas que veremos a continuación se comportan todas exactamente
igual que un <div>. En otras palabras, son todas etiquetas de bloque. La
diferencia está en que, según el nombre y el lugar donde ubiquemos la
etiqueta, esta nos dará contexto sobre la información que hay dentro. Esto
permitirá que tanto personas que lean el código, como buscadores, entiendan
la intención de la estructura y el contenido que generamos.

<header></header>
<nav></nav>
html <footer></footer>
<section></section>
<article></article>

Introducción a la semántica 3
 El encabezado
La etiqueta <header> nos sirve para generar la cabecera del documento,
o incluso también para generar la cabecera de una sección de contenido.
Tradicionalmente, aquí van cosas como el logotipo de la web, la barra de
navegación, los enlaces a las redes sociales e incluso un pequeño campo
de búsquedas rápidas.

<header>
<!-- Logotipo -->
<!-- Barra de navegación -->
html
<!-- Barra de búsqueda -->
<!-- Enlaces a redes sociales -->
</header>

</>
Introducción a la semántica 4
 La navegación
La etiqueta <nav> nos sirve para generar una barra de navegación, sea la
navegación principal o una navegación alternativa. Dentro de esta etiqueta, el
árbol de navegación se suele implementar a través de listas desordenadas,
elementos de listas y enlaces o hipervínculos.
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Quiénes somos</a></li>
html
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>

</>
Introducción a la semántica 5
 El pie de página o de sección
La etiqueta <footer> nos sirve para generar el pie de página principal del
documento o el pie de página de una sección de contenido. Tradicionalmente,
aquí van cosas como los derechos reservados y algunos enlaces adicionales de
la web.
<footer>
<p>Todos los derechos reservados</p>
<nav>
<ul><a href="#">Términos y condiciones</a></ul>
html
<ul><a href="#">Mapa de sitio</a></ul>
<ul><a href="#">Información legal</a></ul>
</nav>
</footer>

</>
Introducción a la semántica 6
 Las secciones
La etiqueta <section> nos permite definir una sección de contenido. Si
quisiéramos crear un breve apartado sobre un producto o servicio, esta
etiqueta sería una excelente opción. Aquí también podemos usar las etiquetas
de encabezado y pie.

<section>
<header>
<h2>Producto destacado</h2>
</header>
html <!-- Contenido del producto -->
<footer>
<a href="#">Continuar leyendo...</a>
</footer>
</section>

</>
Introducción a la semántica 7
 Los artículos
La etiqueta <article> nos permite definir una pieza de contenido
independiente. Es decir, contenido que podría funcionar por sí solo sin
necesidad de todo lo que lo rodea: un producto, un servicio, una noticia,
etcétera. Generalmente los vamos a ver dentro de secciones, pero no es
obligatorio.
<section> <!-- Productos destacados -->
<article>
<!-- Contenido del producto -->
</article>
html
<article>
<!-- Contenido del producto -->
</article>
</section>
Introducción a la semántica 8
 Etiquetas,
atributos y
estructura básica

</>
 1. ADN de una página web
2. Sintaxis de un elemento
Índice 3. Estructura básica de un
documento HTML

</>
Etiquetas, atributos y estructura básica 2
 ADN de una
1 página web

</>
Etiquetas, atributos y estructura básica 3
 ¿Cómo vemos normalmente una página web?

</>
Etiquetas, atributos y estructura básica 4
 ¿Qué hay detrás de lo que vemos?

</>
Etiquetas, atributos y estructura básica 5
 HTML quiere decir...

Hyper Text Markup Language

</>
Etiquetas, atributos y estructura básica 6
 Sintaxis de un
2 elemento

</>
Etiquetas, atributos y estructura básica 7
 Sintaxis de un elemento

<h1> … </h1>
Etiqueta de apertura Etiqueta de clausura

Indica el comienzo de un Indica el final de un elemento.

elemento. Siempre debe iniciar Siempre debe iniciar con el
con el símbolo de menor < y símbolo de menor seguido de la
terminar con el signo de mayor >. barra diagonal </ y terminar con el
Dentro debe ir el nombre de la signo de mayor >. El nombre va
etiqueta. adentro.

</>
Etiquetas, atributos y estructura básica 8
 Contenido
Atributos
Todo aquello que escribamos entre las
Son configuraciones adicionales de los etiquetas de apertura y cierre de un
elementos que ajustan su comportamiento elemento, conformarán su contenido.
de diversas formas.

html <h1 align="center"> ... </h1>

Valores
Nos permiten definir las configuraciones. Siempre
van a estar escritos entre comillas " " y luego de
un signo de igual.

</>
Etiquetas, atributos y estructura básica 9
 Estructura básica
3 de un documento
HTML

</>
Etiquetas, atributos y estructura básica 10
 Estructura básica de un documento HTML
<!DOCTYPE html> Versión de HTML
<html>
<head>
<meta charset="utf-8">
<title>Hello world</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Tenetur deserunt molestiae
numquam veritatis ea ut praesentium explicabo
atque maxime a eaque, aut id consequuntur. Et
nemo non perspiciatis eum!</p>
</body>
</html>
</>
Etiquetas, atributos y estructura básica 11
 <!DOCTYPE html>
<html> Inicio de la página
<head>
<meta charset="utf-8">
<title>Hello world</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Tenetur deserunt molestiae
numquam veritatis ea ut praesentium explicabo
atque maxime a eaque, aut id consequuntur. Et
nemo non perspiciatis eum!</p>
</body>
</html>

</>
Etiquetas, atributos y estructura básica 12
 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
Configuración de la página
<title>Hello world</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Tenetur deserunt molestiae
numquam veritatis ea ut praesentium explicabo
atque maxime a eaque, aut id consequuntur. Et
nemo non perspiciatis eum!</p>
</body>
</html>

</>
Etiquetas, atributos y estructura básica 13
 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello world</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Tenetur deserunt molestiae
numquam veritatis ea ut praesentium explicabo Contenido de la página
atque maxime a eaque, aut id consequuntur. Et
nemo non perspiciatis eum!</p>
</body>
</html>

</>
Etiquetas, atributos y estructura básica 14
 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello world</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Tenetur deserunt molestiae
numquam veritatis ea ut praesentium explicabo
atque maxime a eaque, aut id consequuntur. Et
nemo non perspiciatis eum!</p>
</body>
Fin de la página
</html>

</>
Etiquetas, atributos y estructura básica 15