HTML5 RESPONSIVE

SEMANA 01 – VISUAL STUDIO CODE, HTML y HTML5

PROFESOR: ING. LEONARD PAUL QUIROZ CUBAS
CORREO: [email protected]
 CAPACIDADES POR DESARROLLAR:

PROGRAMACIÓN Y ORGANIZACIÓN DE LAS UNIDADES DE APRENDIZAJE:

UNIDAD DE APRENDIZAJE CONTENIDO DURACIÓN POR N° DE SEMANAS

Unidad 01 INTRODUCCIÓN A LOS NUEVOS MEDIOS 1° a 3° semana

CONSTRUCCIÓN DE SITIOS WEB DINÁMICOS Y

Unidad 02 4° a 6° semana
PLANTILLAS PARA APLICACIONES EN INTERNET

MANTENER UN SITIO WEB MEDIANTE

Unidad 03 SINCRONIZACIÓN DE CONTENIDOS 7° a 9° semana

INSTITUTO SISE 2021

➢Introducción a Visual Studio Code

➢Html y Html5

➢Crear y organizar un sitio Web.

Es un lenguaje que se emplea para el desarrollo de páginas de internet.
Está compuesto por una serie de etiquetas que el navegador interpreta
Y da forma en la pantalla. HTML
dispone de etiquetas para
imágenes, hipervínculos que
nos permiten dirigirnos a otras
páginas, saltos de línea, listas,
tablas, etc.

6 INSTITUTO SISE 2022

HTML = Hypertext + MarkUp
Hypertext
Es texto ordinario al que se le incorporan funcionalidades
adicionales como:
Formato,
Imágenes,
Multimedia
Y enlaces a otros documento.
MarkUp
Es el proceso de tomar el texto ordinario e incorporarle
símbolos adicionales. Cada uno de estos símbolos identifica a
un comando que le indica al navegador como mostrar ese texto.

7 INSTITUTO SISE 2022

✓En 1986 la organización internacional de Estándares publica el SGML (Standard
Generalized Markup Language)
✓En 1990 Tim Berners-Lee crea la WWW y el HTML con base en un subconjunto del
SGML.
✓En 1993 se crea el HTML 2.0 (o HTML+)
✓En 1995 el W3C (World Wide Web Consortium) define el HTML 3.0
✓El HTML 3.2 abandona las sugerencias del HTML 3.0 y adopta elementos desarrollados
por Netscape. (Incorpora Tablas, Applets, Texto alrededor de imágenes) En 1997 se
define el estándar HTML 4.0
✓En 1999 aparece el estándar actual HTML 4.01

8 INSTITUTO SISE 2022

• Es muy fácil de usar.
• Permite la comunicación rápida y directa con una o varias
personas que se encuentren en cualquier parte del mundo.

• Desarrollo de diferentes proyectos y propuestas para

darlos a conocer a través de la red.

• Se puede contactar con diferentes personas para realizar

negocios, trabajos, proyectos, etc.
9 INSTITUTO SISE 2022
• HTML es un lenguaje muy fácil de comprender
y muy utilizado para la presentación de la
información, pero esta no se puede procesar
ni almacenar, ya que no permite su
manipulación por. No permite diversidad de
opciones.

• No es muy completo y muy básico.

10 INSTITUTO SISE 2022
11 INSTITUTO SISE 2022
Los elementos son los componentes fundamentales del HTML
Cuentan con 2 propiedades básicas:
✓ Atributos
✓ Contenido
En general se conforman con una Etiqueta de Apertura y otra Cierre.
Los atributos se colocan dentro la etiqueta de apertura, y el contenido se coloca entre la etiqueta de apertura y la de cierre.

Elemento
Etiqueta de Apertura Contenido Etiqueta de Cierre
<p class=“texto”>Diseño Web Corporativo y Publicitario</p>

Nombre Valor
Atributo

12 INSTITUTO SISE 2022

✓ Los atributos de un elemento son pares de nombres y valores separados por un ‘=‘ que se encuentran dentro de la
etiqueta de apertura de algún elemento. Los valores deben estar entre comillas.
Ejemplos:

<span id=‘iddeesteelemento' style='color:red;' title=‘Curso de HTML'>

Diseño Web Corporativo y Publicitario
</span>

<a href=“http://www.cema.edu.ar” class=“milink” target=“_blank”>

Intituto SISE
</a>

13 INSTITUTO SISE 2022

Algunos tipos de Elementos:
Estructurales
✓ Describen el propósito del texto y no denotan ningún formato específico.
✓ Por ejemplo:
<h1>Curso HTML</h1>
De Presentacion
✓ Describen la apariencia del texto, independientemente de su función.
✓ Por ejemplo:
<b>Curso HTML</b>
✓ Los elementos de presentación se encuentran obsoletos desde la aparición del CSS.
De HiperTexto
✓ Relaciona una parte del documento a otros documentos.
✓ Por ejemplo:
<a href=“https://sise.instructure.com/login/canvas”>Instituto SISE</a>

14 INSTITUTO SISE 2022

<HTML>… </HTML>
✓ Delimita el Documento HTML
<HEAD> … </HEAD>
✓ Delimita el encabezado del Documento HTML
✓ En general incluye los metadatos del documentos y Scripts.
<BODY> … </BODY>
✓ Delimita el Cuerpo del Documento HTML.
✓ Es donde se incluyen los contenidos visibles del documento.
Ejemplo
<html>
<head>
Aquí se incluyen os distintos elementos del encabezado
</head>
<body>
Aquí se incluyen los distintos elementos contenedores o scripts
</body>
</html>

15 INSTITUTO SISE 2022

Alguno de los elementos factibles de incluir en el HEAD son:
<TITLE> … </TITLE>
Define el título del documento HTML
<SCRIPT> … </SCRIPT>
Se utiliza para incluir programas al documento. En general se tratan de
Javascripts.
<STYLE> … </STYLE>
Especifica un estilo CSS para ser utilizado en el documento.
<META> … </META>
Permite especificar información de interés como: autor, fecha de
publicación, descripción, palabras claves, etc.

16 INSTITUTO SISE 2022

Parrafos
Es el contenedor mas común.
Su sintaxis es: <P> … </P>
Encabezados
Indican una jerarquía de secciones dentro del documento
Su sintáxis: <h1>…</h1>, <h2>…</h2>, <h3>…</h3>,.. <h6>…</h6>,
Listas
Listas de Definiciones (consistente de pares de términos y definiciones)
✓ <dl>…</dl> Crea la lista
✓ <dt>…</dt> Crea un nuevo término
✓ <dd>…</dd> Crea una nueva definición
Lista Ordenada Enumerada
✓ <ol> … </ol> Crea una nueva lista
✓ <li> … </li> Crea un nuevo ítem en la lista
Lista Ordenada No Enumerada
✓ <ul> … </ul> Crea una nueva lista
✓ <li> … </li> Crea un nuevo ítem en la lista
Capas
Permiten agrupar y diagramar contenidos en los documentos.
Su sintaxis es: <DIV> … </DIV>

17 INSTITUTO SISE 2022

 <table> … </table> Crea la tabla
<tr> … </tr> Crea una nueva fila
<td> … </td> Crea una nueva celda dentro de la fila

Por ejemplo: Creación de una tabla de 2 x 2

<table>
<tr>
<td> … </td>
<td> … </td>
</tr>
<tr>
<td> … </td>
<td> … </td>
</tr>
</table>

18 INSTITUTO SISE 2022

✓ Qué son y para qué sirven.
✓ Atributos de las Tablas
✓ Atributos de las Celdas y Filas
✓ Prioridades en los formatos
✓ Tablas anidadas
✓ Tablas Irregulares (Atributos colspan y rowspan)
✓ Anchos (Pixels Vs. Porcentajes)

19 INSTITUTO SISE 2022

¿Qué es un hipervínculo?
Ubicación y rutas de documentos.
✓ Rutas Absolutas
✓ Rutas Relativas
✓ Rutas relativas a la raíz del sitio
Vínculos a otras páginas. Etiqueta <A>.
Uso del atributo target (Destino).
Anclaje de nombre. Atributo name.
Comportamientos del Navegador ante distintos tipos de archivos enlazados.

20 INSTITUTO SISE 2022

✓ Elemento <IMG>
✓ ¿Qué imágenes se pueden usar?
✓ Ventajas y desventajas de cada formato.
✓Imágenes e Hipervínculos

21 INSTITUTO SISE 2022

¿Para qué sirven?
Elementos para Formularios
✓ Campos de Texto
✓ Casillas de Verificación
✓ Botones de opción
✓ Menús
✓ Botones
✓ Campos ocultos
✓ Campos de carga de archivos
¿Cómo se envía la información?
¿Se pueden validar los Campos?

22 INSTITUTO SISE 2022

✓Elemento <FORM>
Atributos: method, action
✓Elemento <SELECT>
✓ Elemento <TEXTAREA>
✓Elemento <INPUT>
Atributo: type (text, checkbox, radio, button, hidden)

23 INSTITUTO SISE 2022

✓Otros Elementos
✓ Nueva linea <BR>
✓ Línea Horizontal <HR>
✓Comentarios. <!- - xxxxx - ->

24 INSTITUTO SISE 2022

25 INSTITUTO SISE 2022
Es la última versión del
lenguaje en el que se escriben
las páginas Webs y los Blogs
de Blogger, un lenguaje que
sólo son capaces de leer los
últimos navegadores.
26 INSTITUTO SISE 2022
Se trata de un sistema para formatear
nuestras páginas, así como hacer algunos
ajustes a su aspecto. Con HTML5, los
navegadores como Firefox, Chrome,
Explorer, Safari y más pueden saber cómo
mostrar una determinada página web,
también muestra donde están los
elementos, y dónde poner las imágenes y
ubica el texto.
27 INSTITUTO SISE 2022
• No pertenece a nadie por tanto es fácil de obtener.
• Es mas práctico y tiene etiquetas que permiten clasificar y ordenar en
distintos niveles y estructuras el contenido.

• Permite realizar diseños adaptables a

distintos dispositivos (web, tablets,
móviles,…)

28 INSTITUTO SISE 2022

• A veces, lleva tiempo tener listas las aplicaciones móviles debido a
que los desarrolladores tienen que escribir código para cada
plataforma.
• La herramienta HTML5 desarrollan
aplicaciones móviles de
multiplataforma siguiendo el modelo.
Después de cierto tiempo, los usuarios
necesitan cambios para que funcione.
29 INSTITUTO SISE 2022
 Página Web
• Párrafos •Tablas
• Encabezados • Capas
Estructura • Listas • Etc.
HTML
• Textos
• Imágenes
Contenido • Enlaces

• Colores • Fondos
• Tipografías • Tamaños CSS
Apariencia • Alineación • Etc.

• Efectos
• Validaciones
Comportamiento • Automatización
Javascript

30 INSTITUTO SISE 2022

 La cabecera:
<head> </head>
El cuerpo:
<body></body>

31 INSTITUTO SISE 2022

La etiqueta <meta>:
Es momento de construir la cabecera del documento. Algunos cambios e innovaciones fueron incorporados dentro de la cabecera, y uno de ellos es la etiqueta
que define el juego de caracteres a utilizar para mostrar el documento. Ésta es una etiqueta <meta> que especifica cómo el texto será presentado en pantalla:

<meta charset="iso-8859-1" />

La etiqueta <title>:
La etiqueta <title>, como siempre, simplemente especifica el título del documento, y no hay nada nuevo para comentar:

<title>Este texto es el título del documento</title>

La etiqueta <link>:
Este elemento es usado para incorporar estilos, códigos Javascript, imágenes o iconos desde archivos externos. Uno de los usos más comunes para <link> es la
incorporación de archivos con estilos CSS:

<link rel=”stylesheet” href=”misestilos.css”>

En HTML5 ya no se necesita especificar qué tipo de estilos estamos insertando, por lo que el atributo type fue eliminado. Solo necesitamos dos atributos para
incorporar nuestro archivo de estilos: rel y href. El atributo rel significa “relación” y es acerca de la relación entre el documento y el archivo que estamos
incorporando por medio de href. En este caso, el atributo rel tiene el valor stylesheet que le dice al navegador que el archivo misestilos.css es un archivo CSS
con estilos requeridos para presentar la página en pantalla.

32 INSTITUTO SISE 2022

Un diseño común encontrado en la mayoría de los sitios webs estos días. A pesar del hecho de que cada diseñador
crea sus propios diseños, en general podremos identificar las siguientes secciones en cada sitio web estudiado:

33 INSTITUTO SISE 2022

34 INSTITUTO SISE 2022
La etiqueta <header>:
Uno de los nuevos elementos incorporados en HTML5 es <header>. El elemento <header> no debe ser confundido con <head> usado antes para construir la
cabecera del documento. Del mismo modo que <head>, la intención de <header> es proveer información introductoria (títulos, subtítulos, logos), pero difiere con
respecto a <head> en su alcance. Mientras que el elemento <head> tiene el propósito de proveer información acerca de todo el documento, <header> es usado
solo para el cuerpo o secciones específicas dentro del cuerpo:
<header>
<h1>Este es el título principal del sitio web</h1>
</header>

La etiqueta <nav>:
La Barra de Navegación. Esta barra es generada en HTML5 con el elemento <nav>:
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>

35 INSTITUTO SISE 2022

La etiqueta <header>:
Uno de los nuevos elementos incorporados en HTML5 es <header>. El elemento <header> no debe ser confundido con <head> usado antes para construir la
cabecera del documento. Del mismo modo que <head>, la intención de <header> es proveer información introductoria (títulos, subtítulos, logos), pero difiere con
respecto a <head> en su alcance. Mientras que el elemento <head> tiene el propósito de proveer información acerca de todo el documento, <header> es usado
solo para el cuerpo o secciones específicas dentro del cuerpo:
<header>
<h1>Este es el título principal del sitio web</h1>
</header>

La etiqueta <nav>:
La Barra de Navegación. Esta barra es generada en HTML5 con el elemento <nav>:
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>

36 INSTITUTO SISE 2022

<div></div> <!--maquetar el contenido, es decir,
en construir las partes que los
conforman -->

<section></section> <!--La etiqueta sección define las

secciones de un documento, como capítulos,
encabezados, pies de página o cualquier
otra sección del documento. -->

<article></article> <!--su función es la de agrupar

lo que sea contenido valioso de
un sitio.por contenido valioso
puede referirse a un artículo,
un post, un párrafo, un comentario -->

<header></header> <!-- Puede contener algunos elementos de

encabezado, pero también otros elementos
como un logo, una sección que aglutine
secciones de encabezados, una formulario
de búsqueda o cosas parecidas. -->

<main></main> <!-- representa el contenido principal

del <body> de un documento o aplicación. -->

<footer></footer> <!-- La etiqueta footer representa el pie

de un documento o sección. 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. -->

<aside></aside> <!-- representa una sección de una página que

consiste en contenido que está tangencialmente
relacionado con el contenido que le rodea -->

37 INSTITUTO SISE 2022

La etiqueta <figure> y <figcaption>:
La etiqueta <figure> fue creada para ayudarnos a ser aún más específicos a la hora de declarar el contenido del documento. Antes de que este elemento sea
introducido, no podíamos identificar el contenido que era parte de la información pero a la vez independiente, como ilustraciones, fotos, videos, etc…
Normalmente estos elementos son parte del contenido relevante pero pueden ser extraídos o movidos a otra parte sin afectar o interrumpir el flujo del
documento. Cuando nos encontramos con esta clase de información, las etiquetas <figure> pueden ser usadas para identificarla:
<figure>
<img src=”/content/myimage.jpg”>
<figcaption>
Esta es la imagen del primer mensaje
</figcaption>
</figure>

La etiqueta <hgroup>:
Este elemento es usado para agrupar elementos etiquetas H cuando la cabecera tiene múltiples niveles (por ejemplo, una cabecera con título y subtítulo):
<hgroup>
<h1>Título del mensaje uno</h1>
<h2>Subtítulo del mensaje uno</h2>
</hgroup>

38 INSTITUTO SISE 2022

La etiqueta <mark>:
Este elemento resalta un texto que tiene relevancia en una situación en particular o que ha sido mostrado en respuesta de la actividad del usuario:

<span>Mi <mark>coche</mark> es rojo</span>

La etiqueta <small>:
Este elemento representa contenido al margen, como letra pequeña (por ejemplo, descargos, restricciones legales, declaración de derechos, etc…).

<small>Derechos Reservados &copy; 2023 SISE</small>

La etiqueta <cite>:
Este elemento es usado para mostrar el título de un trabajo (libro, película, poema, etc…).

<span>Amo la película <cite>La bala que gira la esquina</cite></span>

La etiqueta <address>:
Este elemento encierra información de contacto para un elemento <article> o el documento completo. Es recomendable que sea insertado dentro de un elemento <footer>.

<address>
<a href=”http://www.sise.com”>Diseño Web</a>
</address>

La etiqueta <time>:
Este elemento se utiliza para mostrar fecha y hora en formatos comprensibles por los usuarios y el navegador:

<time datetime="2023-02-15" pubdate>publicado 15-02-2023</time>

39 INSTITUTO SISE 2022
40 INSTITUTO SISE 2022
 GRACIAS
La edad no es barrera. Es una
limitación que pones en tu mente
- Jackie Joyner-