Introducción A HTML/ Etiquetas Html5

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
/ ¿QUÉ ES UNA URL?
URL significa Uniform Resource Locator, es la dirección única que identifica a una página
web en Internet.
/ 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ú)
/ ¿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
/ 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)
/ ¿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
/ ¿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 (<,>).
/ 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
<!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
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:
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.
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.
/ ¿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
HTML
PÁGINA WEB
CONTENIDO
CSS
APARIENCIA
/ 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.
/ 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>
/ 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.
/ 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.
/ ETIQUETAS HTML5
Etiqueta HEADER
/ 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.
/ ETIQUETAS HTML5
Etiqueta NAV
/ 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.
/ ETIQUETAS HTML5
Etiqueta ARTICLE
/ 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.
/ ETIQUETAS HTML5
Etiqueta SECTION
/ 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.
/ 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.
/ ETIQUETAS HTML5
Etiqueta FOOTER
La etiqueta <footer></footer> representa el pie de un documento o sección.
/ 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.
/ 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.
/ ETIQUETAS HTML5
HTML5 shiv
/ 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/

Introducción A HTML/ Etiquetas Html5

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introducción A HTML/ Etiquetas Html5

Uploaded by

Copyright:

Available Formats

SESIÓN /1

INTRODUCCIÓN A HTML/ ETIQUETAS HTML5

Fuente de datos : Internet

Nombre del protocolo Nombre

Es el registro de un nombre en Internet.

DOMINIOS MUNDIALES: (us$ 12.00 a 15.00)

DOMINIOS REGIONALES: (us $ 40.00 a 50.00)

Fuente de datos : Wikipedia

HTML, siglas de HyperText

• La declaración del tipo de

• Inicio y Fin del código

• La cabeza del documento

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

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

La cabeza del documento <head> </head>

Título <title> </title>

Cuerpo del documento <body> </body>

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

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

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

Compatibilidad con varios navegadores

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

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

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

Las nuevas etiquetas HTML5 traen

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

You might also like