You are on page 1of 36

SESIÓN /1

INTRODUCCIÓN A HTML/ ETIQUETAS HTML5


/ ¿QUÉ ES UN SERVIDOR WEB?
/ ¿QUÉ ES UNA URL?
/ ¿QUÉ ES UN NOMBRE DE DOMINIO?
/ ¿QUÉ ES UN HOSTING?
/ ¿QUÉ ES HTML?
/ ¿QUÉ SON LAS HOJAS DE ESTILO?
/ ETIQUETAS HTML5
/ INTRODUCCIÓN

• En esta sesión verás un introductorio a HTML así como el uso de las nuevas etiquetas
HTML5 (Main, Header, Footer, Section, Article, Nav).
• Se mostrará la compatibilidad entre varios navegadores haciendo uso de la instrucción
html5 shiv.

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ¿QUÉ ES UN SERVIDOR WEB?

La principal función de un servidor Web es almacenar los archivos de un sitio y emitirlos por
Internet para poder ser visitado por los usuarios. Básicamente, un servidor Web es una gran
computadora que guarda y transmite datos vía Internet.

Fuente de datos : Internet

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ¿QUÉ ES UNA URL?

URL significa Uniform Resource Locator, es la dirección única que identifica a una página
web en Internet.

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ESTRUCTURA DE UNA URL

Nombre del protocolo Nombre


de comunicación del dominio
con el servidor. (http del servidor web
es el estándar para donde se almacena
web) el documento

http://www.isil.pe/mundo-isil.aspx
Localización del Nombre
servidor web del del archivo
dominio (.pe
significa que esta
en Perú)

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ¿QUÉ ES UN NOMBRE DE DOMINIO?

Es el registro de un nombre en Internet.


Ejemplo: www.laempresa.org ---- El nombre del dominio en este caso es “la empresa”.

laempresa.org
Suempresa.com
miempresa.net
la-empresa.org
su-empresa.con
mi-empresa.net

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ TIPOS DE DOMINIO

DOMINIOS MUNDIALES: (us$ 12.00 a 15.00)


• .net = servicios de tecnología , soporte técnico.
• .gob = gobierno.
• .org = organizaciones , corporaciones.
• .com= comercio

DOMINIOS REGIONALES: (us $ 40.00 a 50.00)


• .pe = Perú
• .ar = Argentina
• .cn = China

Nota:
Los dominios regionales sólo se pueden obtener a través
dela Red Científica Peruana (RCP)

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ¿QUÉ ES UN HOSTING?

El alojamiento web (en inglés web hosting) es el servicio que provee a los usuarios de
Internet un sistema para poder almacenar información, imágenes, vídeo, o cualquier
contenido accesible vía web.

Fuente de datos : Wikipedia

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ¿QUÉ ES HTML?

HTML, siglas de HyperText


Markup Language (Lenguaje de
Marcado de Hipertexto), es el
lenguaje para la elaboración de
páginas web.

HTML se escribe en
forma de "etiquetas",
rodeadas por corchetes
angulares (<,>).

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ESTRUCTURA BÁSICA DE HTML

La estructura de un documento en
HTML consta básicamente de cuatro
partes:

• La declaración del tipo de


documento.

• Inicio y Fin del código

• La cabeza del documento

• El cuerpo del documento Fuente de datos: https://codigo-web.net

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ESTRUCTURA BÁSICA DE HTML

<!DOCTYPE HTML>
1 Con esta instrucción, el navegador sabe que el contenido del
documento debe interpretarse como una página web (HTML) que está
realizada utilizando las instrucciones propias de la versión 5 del
lenguaje.

Inicio y fin del código <html> </html>


2 El inicio y el fin del código de la página se determina con la apertura y
cierre de la instrucción html: <html> </html>. Todo lo que se encuentra
entre la apertura y cierre de ésta es el código de la página.
Fuente de datos : https://codigo-web.net

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ESTRUCTURA BÁSICA DE HTML

La cabeza del documento <head> </head>


3 Aquí se incluyen las instrucciones especiales para el Navegador,
como pueden ser el juego de caracteres que utiliza la página, los
datos del autor, el título de la página, instrucciones para los
motores de búsqueda o el llamado de archivos para que realicen
algo en la página, por ejemplo los archivos de Estilos en Cascada.
En esta parte del documento debemos colocar algunas
instrucciones de forma predeterminada:
Fuente de datos : https://codigo-web.net

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ESTRUCTURA BÁSICA DE HTML

Metadatos <meta>
Es indispensable indicar el juego de caracteres que utilizaremos mediante la
instrucción meta y el atributo charset, el estándar actual es UTF-8: En esta parte del
documento debemos colocar algunas instrucciones de forma predeterminada:

<meta charset=”utf-8″>

Dado que nuestro idioma cuenta con acentos, eñes y diéresis, es de gran importancia
emplear el atributo charset de manera correcta, para que no aparezcan símbolos extraños
en vez de alguno
de los elementos propios del español.

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ESTRUCTURA BÁSICA DE HTML

Título <title> </title>


En medio del bloque de la instrucción title se incluye el título de la página, el cual aparece
en la pestaña o barra superior del navegador.

Cuerpo del documento <body> </body>


4
En medio del bloque de la instrucción body ingresamos todas las
instrucciones que dan la estructura y contenido de la página web. A
diferencia de las instrucciones que se incluyen dentro del bloque de
la instrucción head, lo que se incluye dentro de body es visible en la
página web.

Fuente de datos : https://codigo-web.net

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ¿QUÉ SON LAS HOJAS DE ESTILO?

Las Hojas de Estilo (o CSS, por Cascading StyleSheets) son un reglas que permiten aplicar
formato a los documentos escritos en HTML (y en otros lenguajes estructurados, como
XML) separando el contenido de las páginas de su apariencia.

HTML + CSS

Página web

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
HTML

PÁGINA WEB

CONTENIDO

CSS

APARIENCIA

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ETIQUETAS HTML5

• El HTML5 (HyperText Markup Language, versión 5) es la quinta revisión del lenguaje de


programación “básico” de la World Wide Web, el HTML.

• Esta nueva versión pretende remplazar al actual (X)HTML, corrigiendo problemas con los
que los desarrolladores web se encuentran, así como rediseñar el código actualizándolo
a nuevas necesidades que demanda la web de hoy en día.

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ETIQUETAS HTML5

Estructura HTML5
Observe cómo sería la estructura HTML 5 de un sitio web, en este ejemplo
de una página de 2 columnas.

<header>

<nav>

<article>

<aside>

<section>

<footer>

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ETIQUETAS HTML5

Etiqueta MAIN
Representa el contenido principal del <body>
de un documento o aplicación. El área
principal del contenido consiste en el
contenido que está directamente relacionado,
o se expande sobre el tema central de un
documento o la funcionalidad central de una
aplicación.

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ETIQUETAS HTML5

Etiqueta HEADER
Se encarga de indicar a los navegadores que lo
que contienen es la cabecera de la página y
que dentro llevarán algún logotipo, el título
de la página o una descripción de la misma.

Fuente: http://www.comocreartuweb.com/curso-de-html/estructura-semantica-html5/etiquetas-semanticas/header.html.

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ETIQUETAS HTML5

Etiqueta HEADER

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ETIQUETAS HTML5

Etiqueta NAV
La etiqueta <nav></nav> es donde las
personas navegan a través de las páginas,
formada por enlaces a las zonas principales
de la web, o por un menú de navegación. En
este caso solo por aprendizaje colocaremos
una imagen.

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ETIQUETAS HTML5

Etiqueta NAV

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ETIQUETAS HTML5

Etiqueta ARTICLE
La etiqueta <article></article>
especifica una distribución de
forma independiente del resto
del sitio; con un auto-contenido
incluido, que debe tener sentido
por sí mismo. Puede representar
un artículo, ya sea un artículo de
opinión, un entrada en un blog,
un comentario en un foro, etc.

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ETIQUETAS HTML5

Etiqueta ARTICLE

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ETIQUETAS HTML5

Etiqueta SECTION
La etiqueta <section></section> representa un agrupamiento de contenido
con la misma temática dentro de un documento o aplicación.

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ETIQUETAS HTML5

Etiqueta SECTION

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ETIQUETAS HTML5

Etiqueta ASIDE
La etiqueta aside indica que el contenido dentro de ella está relacionado
al contenido principal de la página pero que no es parte de ella.

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ETIQUETAS HTML5

Etiqueta ASIDE
Son representadas mayormente como barras laterales o como inserciones, como
publicidad, la biografía del autor, o en aplicaciones web, la información de perfil, etc.

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ETIQUETAS HTML5

Etiqueta FOOTER
La etiqueta <footer></footer> representa el pie de un documento o sección.

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ETIQUETAS HTML5

Etiqueta FOOTER
La información que se suele añadir en este bloque es el autor del documento, enlaces a
contenido relacionado, información de copyright, avisos legales, etc.

Fuente: http://html5pasoapaso.blogspot.com/2011_08_01_archive.html/ Traducción libre.

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ETIQUETAS HTML5

Compatibilidad con varios navegadores


Ningún navegador es 100% compatible con todas las características de HTML5 y CSS3.
Esta regla se mantiene aún hoy y seguirá por un tiempo, hasta que se estandaricen todas
sus características. Claro que en este sentido encontraremos navegadores que presentan
mayor compatibilidad que otro.

Porcentaje de compatibilidad

Porcentaje de
compatibilidad

Fuente: http://www.redusers.com/noticias/html5-los-secretos-para-lograr-compatibilidad-con-los-navegadores/ Traducción libre.

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ ETIQUETAS HTML5

HTML5 shiv

DISEÑO Y DESARROLLO WEB  SESIÓN 01 © 2018 ISIL. Todos los derechos reservados
/ CONCLUSIONES

• El objetivo de esta sesión fue identificar y aplicar las nuevas


etiquetas HTM5, la compatibilidad que estas nuevas etiquetas
tienen con los navegadores web.

• Al finalizar esta sesión podrás hacer uso de las nuevas etiquetas


HTML5 y verás su aplicación en los casos de estudio que
desarrollaremos.
/ ¿SABÍAS QUE…?

Las nuevas etiquetas HTML5 traen


consigo nuevas novedades para mejorar
y enriquecer el diseño de una página web.
/ BIBLIOGRAFÍA

• Jorgens, (2013) Etiquetas semánticas: http://www.comocreartuweb.com/curso-de-html/estructura-semantica-


html5/etiquetas-semanticas.html
• Jeremy J. Wischusen, (2011), Web Application Architect, Binary Neuron L.L.C.
• Marisela Garcia (2015), Estructura y disposicion: http://mislibrosmiespacio.blogspot.com/2015/03/26-estructura-y-
disposicion.html
• Sergio Raposo Vargas, (2011):
http://html5pasoapaso.blogspot.com/2011_08_01_archive.html
• Damian De Luca, (2012): http://www.redusers.com/noticias/html5-los-secretos-para-lograr-compatibilidad-con-los-
navegadores/