Tew-200 Guia No 2 2022 Html5 Mej

ESCUELA INDUSTRIAL SUPERIOR “PEDRO DOMINGO MURILLO”
INFORMÁTICA INDUSTRIAL TECNOLOGÍA WEB EDGAR MENDOZA F.

TEW-200
GUÍA DE LAB No 2
HTML 5
1. OBJETIVOS
• Conocer la estructura semántica de HTML 5
• Conocer las diversas etiquetas dentro de HTML 5.
• Conocer el funcionamiento de las propiedades de las etiquetas en HTML 5 para observar su aplicación en páginas
web.
• Realizar diversas páginas web manejando imágenes, tablas, enlaces, audio y video.
2. MATERIAL Y HERRAMIENTAS
✓ Visual Code 1.42.1
✓ Etiquetas HTML 5
✓ Explorador(Mozilla Firefox, Google Chrome, Brave, etc )
3. MARCO TEÓRICO PARA EL DESARROLLO DEL LABORATORIO

3.1. INTRODUCCIÓN
A principios de la década de los 90 apareció HTML, a lo largo de más de 20 ha ido evolucionando llegando a día de hoy
a la versión 5.
3.2. HTML 1.0
HTML es una tecnología ya antigua, cuya primera versión apareció en 1991, y es una especificación que fue creada
por Tim Berners-Lee.
Surgió en el CERN, el Laboratorio de Física Nuclear de Ginebra, y cuyo objetivo principal, única y exclusivamente,
era compartir información científica en la comunidad académica.
1
TEW-200
Está basado y deriva de SGML, un sistema general de marcado, por lo que surgió como un lenguaje de marcas
inicialmente muy pequeño, ya que solamente tenía 20 etiquetas, de las cuales 13 aún perduran.
HTML sirve para hacer páginas web, por lo que junto con la primera especificación se creó el primer navegador, que se
llamó Nexus.
Durante todos los años posteriores ha ido apareciendo distintas versiones de HTML, que han ido añadiendo nuevas
etiquetas, nuevas propiedades, permitiendo añadir estilos, etc., hasta llegar a la versión de HTML que actualmente está
vigente, que es la versión HTML5.
3.3. HTML 5
HTML5 sigue siendo recomendación, ya que aún no es un estándar al 100%.
Esta versión fue publicada en 2014, pero es una especificación que llevaba haciéndose más de 15 años, por lo que ha
ido cambiando mucho.
Se hizo así para solucionar los problemas que tenía HTML para aplicaciones complejas, por lo que introduce muchísimas
novedades, de las cuales las más importantes son las siguientes:
➢ Introduce etiquetas semánticas para facilitar la vida a los desarrolladores, a los buscadores y a todo tipo de
dispositivos para usuarios con discapacidad. Al utilizar etiquetas semánticas se están dando pistas del contenido
que va en cada parte de la página web.
➢ Añade APIs, que no son APIs en HTML, sino desarrolladas en un lenguaje de programación como JavaScript,
que nos permiten, basándonos en etiquetas HTML, poder desarrollar juegos completos, geolocalizar páginas,
trabajar con bases de datos ligadas a etiquetas HTML de nuestra página web, hacer cosas como arrastrar y soltar
en la página web de manera muy fácil, etc.
➢ Simplifica el uso de las etiquetas.
2
TEW-200
➢ Mejora el uso de formularios y, sobre todo, de su validación, ya que atributos de las etiquetas van a permitir
que se valide un formulario, dependiendo de la información que se haya introducido, antes de poder enviarla al
servidor.
Grafico 1 Evolución de HTML
3.3.1. Test para el navegador

Al ser una recomendación, si queremos saber si nuestro navegador soporta HTML5 completamente o no, podemos usar una
herramienta muy recomendable como es la que nos ofrece la web:
http://html5test.com.
Prueba realizada al navegador Google Chrome
3
TEW-200
Prueba realizada al navegador Google Chrome en un dispositivo móvil
Esta herramienta indica hasta qué punto nuestro navegador está soportando estas nuevas especificaciones, que todavía
no es un estándar y tiene multitud de partes.
3.3.2. Estructura Semántica en HTML5
Las páginas web se diferencian unas de las otras, pero todas tienden a contener elementos comunes parecidos en cuanto a
su estructura, a menos que estén destinadas a mostrar un vídeo o un juego a pantalla completa, o que formen parte de un
proyecto artístico concreto o, simplemente, que estén mal estructuradas. Estos elementos comunes son:
header (encabezado):
Normalmente formado por una gran franja que cruza la parte superior de la página con un título de
encabezamiento y/o un logo. Esta parte suele permanecer invariable mientras navegamos entre las páginas de un
mismo sitio web.
navigation bar (barra/menú de navegación):
Son los enlaces a las secciones principales del sitio web. Normalmente está formada por un menú con botones,
enlaces o pestañas. Al igual que el encabezado, este contenido suele permanecer invariable en las diferentes
páginas del sitio; tener un menú incoherente en nuestra página web inducirá a los usuarios a la confusión y la
frustración. Muchos diseñadores web consideran que el menú de navegación forma parte del encabezado y que no
posee un componente individual, aunque no es necesario que sea así; de hecho, algunos argumentan que tener
ambos componentes por separado es mejor por motivos de accesibilidad porque los lectores de pantalla pueden
leer mejor ambos elementos si están separados.
main content (contenido principal):
4
TEW-200
Es la parte ancha central de nuestra página y contiene la mayor parte del contenido particular de una página web
concreta; por ejemplo, el video que quieres ver, la narración que quieres leer, el mapa que quieres consultar, los
titulares de las noticias, etc. Esta es la parte que puede variar mucho de una página a otra de nuestro sitio web.
aside bar (menú/barra lateral):

Suele incluir algún tipo de información adicional, enlaces, citas, publicidad, etc. Normalmente está relacionado con el
contenido principal de la página (por ejemplo, en una página de noticias, la barra lateral podría contener la biografía
del autor o enlaces a artículos relacionados), pero en otras ocasiones encontraremos elementos recurrentes como
un menú de navegación secundario.
footer (pie de página):

Es la parte inferior de la página, que generalmente contiene la letra pequeña, el copyright o la información de contacto.
Es el sitio donde se coloca la información común (al igual que en el encabezado), pero esta información no suele ser
tan importante o es secundaria con respecto a la página en sí misma. El pie también se suele usar para
propósitos SEO, e incluye enlaces de acceso rápido al contenido más popular y redes sociales.
article (articulo):
Es la parte interior del main de la página, que generalmente contiene información en distintas secciones de la
institución, la información como tal.
5
TEW-200
HTML dispone de etiquetas adecuadas que podemos usar para establecer estas secciones semánticas, por
ejemplo:
• header (encabezado): <header> </header>.

• navigation bar (menú de navegación): <nav> </nav>.
• main content (contenido principal): <main> </main>, con varias subsecciones (además
de la barra lateral) representadas por los elementos <article></article>
, <section> </section y <div></div>.
• sidebar (barra lateral): <aside></aside>.
• footer (pie de página): <footer> </footer>.
Una página web «típica» podría parecerse a esta:
6
TEW-200
3.3.3. LISTADO DE ELEMENTOS O ETIQUETAS HTML5
Etiqueta Función
 Define un comentario
<!DOCTYPE> Define el tipo de documento
<a> Define un hipervínculo
<abbr> Define una abreviación
<address> Define la información de contacto del autor / propietario del
documento
<area> Define un área dentro de un mapa de imagen
<article> Define un artículo
<aside> Define el contenido lateral del contenedor de una página
<audio> Define contenido de sonido
<b> Define texto en negrita
<base> Especifica la base donde se abrirán todas las URL del
documento
<bdi> Aísla una parte del texto que puede tener un formato
Etiqueta Función
<bdo> Sobre escribe la dirección del texto
<blockquote> Define una sección que tiene otra fuente
<body> Define el cuerpo del documento
<br> Define un salto de línea
<button> Define un botón clickeable
<canvas> Se usa para dibujar gráficos en pantalla
<caption> Define el título de una tabla
<cite> Define el título de un trabajo
<code> Define un trozo de código de programación
<col> Especifica las propiedades de la columna para cada columna
del elemento <colgroup>
<colgroup> Especifica un grupo de una o más columnas de una tabla
<command> Define un botón command al que un usuario puede invocar
<datalist> Especifica en un input una lista pre-definida de opciones
<dd> Define la descripción de un ítem en una lista de definición
<del> Define un texto que ha sido definido en un Mdocument
<details> Define detalles adicionales que el usuario puede ver o
esconder
<dfn> Define el término de una definición
<dialog> Define una caja o ventana de dialogo
<div> Define una sección en un
7
TEW-200
Etiqueta Función
<dl> Define una lista de definición
<dt> Define un término (un ítem) en una lista de definición
<em> Define énfasis en un texto
<embed> Define el contenedor de una aplicación externa (no html)
<fieldset> Grupo de elementos relacionados en un formulario
<figcaption> Define el título para una figura <figure>
<figure> Especifica auto-contenido
<footer> Define el pie de página de un documento
<form> Define un formulario html
<h1> a <h6> Define encabezados o títulos
<head> Define información hacerca del documento
<header> Define la sección de encabezado del docuemnto
<hgroup> Grupo de encabezado (<h1> a <6>)
<hr> Define un cámbio de temática a partir de una línea dibujada
<html> Define la raíz del documento
<i> Define una parte del texto de modo alternativo
<iframe> Define un frame en línea
<img> Define una imagen
<input> Define un control de entrada de texto
<ins> Define texto que ha sido
Etiqueta Función
<kbd> Define entrada del teclado
<keygen> Define un campo generador de claves para formularios
<label> Define el rótulo para un elemento <input>
<legend> Define un título para los elementos <fieldset>, <figure>,
<details>
<li> Define un ítem de una lista
<link> Define la relación entre un documento y un recurso externo
(generalmente con hojas de estilo)
<map> Define un mapa de imagen del cliente
<mark> Define texto resaltado o marcado
<menu> Define la lista de un menú
<meta> Define un metadato de un documento
<meter> Define una medida escalar en un rango conocido
<nav> Define un link de navegación
8
TEW-200
<noscript> Define un contenido alternativo para los usuarios que no

soportan scripts del cliente
<objet> Define un objeto embebido
<ol> Define una lista ordenada
<optgroup> Define un grupo de opciones relacionadas en una lista
desplegable
<option> Define una opción en una lista desplegable
Etiqueta Función
<output> Define el resultado de un cálculo
<p> Define un párrafo
<param> Define un parámetro para un objeto
<pre> Define texto pre-formateado
<progress> Representa el progreso de una tarea en una barra
<q> Define una cita corta
<rp> Define que debe mostrar en navegadores que no soportan
scripts de ruby
<rt> Define una pronunciación de caracteres
<ruby> Define una notación de ruby
<s> Define texto que no es correcto
<samp> Define un ejemplo de salida de un programa
<script> Define un script del lado cliente
<section> Define una sección de un documento
<select> Define un drop-down list
<small> Define texto pequeño
<source> Define los recursos para elementos multimedia
<span> Define una pequeña sección de un documento
<strong> Define un texto en negrita
<style> Define un estilo para la información de un documento
<sub> Define un texto que es subíndice
<summary> Define un encabezado visible para el elemento <details>
Etiqueta Función
<sup> Define un texto que es superíndice
<table> Define una tabla
<tbody> Define el cuerpo de una tabla
<td> Define una celda en una tabla
<textarea> Define un control de entrada de múltiples líneas
<tfoot> Agrupa los footer contenidos en una tabla
<th> Define una celda de encabezado en una tabla
9
TEW-200
<thead> Agrupa los encabezados de una tabla

<time> Define fecha / hora
<title> Define un título para el documento
<tr> Define una fila en una tabla
<track> Define texto de la pista para elementos multimedia (vídeo y
audio)
<ul> Define una lista desordenada
<var> Define una variable
<video> Define un vídeo o película
<wbr> Define un posible salto de línea
DOCTYPE
1 <!DOCTYPE html>
La etiqueta doctype declara el tipo de documento, por lo que esta está señalando que este es un documento HTML.
HTML
1<html></html>
Delimita el documento HTML.

Atributo a destacar
LANG
1 <html lang="es"></html>
Indica el lenguaje de contenido del código.

El atributo lang, del inglés language (idioma), es utilizado para indicar el idioma del contenido de un elemento:
1. En elementos no editables indica el idioma en el que está escrito el texto.
2. En elementos editables (incluyendo elementos con atributo “contenteditable”) indica el idioma en el que debería
introducirse el texto.
Aunque es un atributo global y se puede utilizar en cualquier elemento HTML, las especificaciones HTML 5.1 establecen que
el atributo lang solo tiene efecto sobre elementos que contengan texto. Esto quiere decir que en elementos que no
contienen texto el atributo lang es válido pero no tiene efecto.
HEAD
1 <head></head>
El elemento head delimita la cabecera del documento, entre sus etiquetas contiene información como scripts, metadatos,
estilos, ubicación de documentos de estilos, título de la página, etc.
10
TEW-200
META
1 <meta name="description" content="Descripción de la WEB">
Las meta etiquetas se utilizan para identificar propiedades del documento como por ejemplo el autor, el título y la descripción
que mostrarán los buscadores, etc.
Usos a destacar
META CHARSET
1 <meta charset="UTF-8">
Establece el tipo de codificación del documento.

Si la fuente no fue previamente definida en el header del archivo HTTP, es necesario hacerlo usando HTML. Así se evita, por
ejemplo, que la ñ o las tildes no se muestren correctamente.
META TITLE
1 <meta name="title" content="Título de la WEB">
Contiene el título que se mostrará en los buscadores.
META DESCRIPTION
<meta name="description" content="Descripción de la
1
WEB">
Es el texto que se muestra bajo el título en los motores de búsqueda.
Con esta etiqueta meta los administradores tienen la posibilidad de definir palabras clave para el buscador. Las keywords
son aquellos criterios a los que responde un buscador para ofrecerle al usuario páginas HTML como respuesta, donde tales
palabras clave son parte de los meta tags. Anteriormente, esta etiqueta era considerada como el factor SEO más importante,
ya que los buscadores primitivos recurrían a este atributo como característica central para el posicionamiento en las listas de
resultados. Pero hoy es ignorado por Google y su importancia ha sido minimizada por Bing y otros buscadores populares
debido a la facilidad con que puede ser manipulado en el cálculo del factor de ranking. Es por ello que ha perdido todo su
valor en el campo de la optimización para los buscadores, aunque esto no significa que un mal uso de este meta tag no
pueda llevar a la devaluación en el posicionamiento.
La elección de las palabras clave requiere de cierta sutileza: hay que evitar su uso abusivo, fenómeno conocido como
keyword stuffing, así como aquellas sin relación con el contenido de las páginas en una web. A consecuencia de que los
11
TEW-200
archivos locales de búsqueda y los metabuscadores acuden a la información en los meta tags de las palabras clave, se
recomienda introducir términos relevantes.
Una línea puede contener varios elementos. Las palabras clave se separan por comas.
<meta name="keywords" content="palabra clave 1, palabra clave 2, palabra clave 3"/>
LINK
<link href="http://dominio.com/hoja-de-estilos.css" rel="stylesheet"
1
type="text/css"/>
Esta etiqueta contiene un link a una hoja de estilos externa, la cual se utilizará en este documento.
Atributo a destacar
HREF
Especifica la url donde se localiza la hoja de estilo.
BODY
1<body></body>
La etiqueta body delimita el cuerpo del documento y contiene todo aquello que podremos ver en nuestro navegador.
Imágenes, textos, enlaces, video, etc…
HEADER
1 <header></header>
El contenido de esta etiqueta debe ser la cabecera de nuestra página donde se suele encontrar el título, el logotipo y poco
más.
NAV
1<nav></nav>
Esta etiqueta sirve para delimitar el menú de la página, donde colocaremos los enlaces internos para movernos entre nuestras
diferentes secciones del sitio web.
A
1 <a href="http://dominio.com/seccion2.html">IR SECCIÓN 2</a>
Representa un enlace o hipervínculo.

Atributos a destacar.
HREF
12
TEW-200
Dirección URL hacia la que apunta el enlace.

H1, H2, H3, H4, H5, H6
1 <h1>Título de la WEB</h1>
2 <h2>CONTENIDO PRINCIPAL</h2>
3 <h3>Testimonios</h3>
4 <h4>Avisos legales</h4>
Estas etiquetas establecen los encabezados. Se organizan por niveles siendo H1 el más importante y H6 el menos
importante.
SECTION
1<section></section>
La etiqueta section engloba una sección de texto, imágenes y otros elementos que guardan cierta relación entre ellos.
Normalmente siempre le podremos poner un título o encabezado.
ARTICLE
1<article></article>
La etiqueta article se suele encontrar dentro de una etiqueta section y sirve para dividir y ordenar los contenidos en su interior.
DIV
1<div></div>
Otra forma de dividir contenido para posteriormente aplicarle clases y modificar su estilo.
P
1<p></p>
Entre las etiquetas P colocaremos un párrafo de texto.

IMG
1 <img src="http://dominio.com/imagen.jpg" alt="paisaje">
Esta etiqueta coloca una imagen en el documento mediante un enlace.

Atributos a destacar.
alt
Representa el texto alternativo, muy importante para que los buscadores puedan obtener información de la imagen.
13
TEW-200
src: URL donde se encuentra la imagen.

ASIDE
1<aside></aside>
Contiene información no vital o que no está estrechamente relacionada con el contenido principal de la página como
podrían ser banners de anuncios, citas o enlaces externos.
FOOTER
1 <footer></footer>
Aquí encontraríamos el código perteneciente al pie de página, donde se suelen colocar los enlaces a textos legales, el
copyright, etc.
3.4. VISUAL STUDIO CODE
Visual Studio Code es un editor de código fuente que permite trabajar con diversos lenguajes de programación, admite
gestionar tus propios atajos de teclado y refactorizar el código. Es gratuito, de código abierto y nos proporciona una utilidad
para descargar y gestionar extensiones con las que podemos personalizar y potenciar esta herramienta.
Las extensiones de Visual Studio Code nos otorgan infinidad de opciones, como colorear tabulaciones, etiquetas o
recomendaciones de autocompletado. También hay extensiones que nos ayudan con el lenguaje de programación que
vayamos a usar, como por ejemplo para Python, C / C++, JavaScript, etc.
3.4.1. ATAJOS EN VISUAL STUDIO CODE
IDENTACIÓN O SANGRÍA
En Windows Shift + Alt + F.
COMENTAR Y DESCOMENTAR DE GOLPE

1. Ctrl+K está a la espera de otro comando
2. Ctrl+C comentar
3. Ctrl+U descomentar
AUTOCOMPLETADO
Escribe la primera letra de una etiqueta de html y autocompleta automáticamente con TAB o ENTER.
P + ENTER = ingresa etiqueta párrafo
img+enter = introduce etiqueta imangen
14
TEW-200
! + tab = toda la estructura de html5
lorem+ enter = texto auto llenado

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio
molestias quis est et. Sequi laboriosam illo error magni ea quis
quia mollitia, adipisci saepe fuga dolorem facere. Optio, aliquam nisi.
Lorem500 + enter = 500 palabras texto demo
CTRL+ FLECHA IZ O DER = Posicionarse al inicio o final de un renglón
ALT+ FLECHA ARRIBA- ABAJO= Mueve toda la línea de código hacia arriba o abajo
EJERCICIO 1. Hello Word
<!DOCTYPE html>
<html>
<head>
<title> Hello World! </title>
</head>
<body>
<h1> ESTE ES UN ENCABEZADO </h1>
<p> este es un parrafo </p>
</body>
</html>
EJERCICIO 2
<!doctype html>
<html lang="es">
....
<body>
<p>Esta página esta escrita en español.</p>
<p lang="en">But this paragraph is written in english.</p>
<p>Customizar, del inglés <span lang="en">customize</span>, que
significa personalizar.</p>
</body>
</html>
EJERCICIO 3
<!DOCTYPE html> 

<html lang="es">
<head>
<meta charset="UTF-8">
15
TEW-200
<meta name="viewport" content="width=device-width, initial-

scale=1.0">
<title>hola mundo completo</title>
</head>
<body>
</body>
</html>
EJERCICIO 4
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>EISPDM LAB</title>
</head>
<body bgcolor=yellowgreen text=black>
<h1 align="center"> COMO POSTULAR </h1>

<br> <br> <br>
Para postular en alguna de las carreras que oferta la Escuela
Industrial Superior "Pedro Domingo Murillo" debe
ingresar su número de cédula de identidad
y hacer clic en el botón Reserve su Cupo que esta disponible en esta
página y seguir los siguientes pasos:
<br>
<h2>
<center>
Ingresar tus datos personales.<br>
</center>
Obtener tu nombre de usuario y clave de acceso. <br>

Ingresar a la opción
<b>SISTEMA </b>
en la parte superior del sistema. <br>
Ingresar tu nombre de usuario y clave de acceso. <br>
Para más información visualiza el siguiente tutorial. <br>
</h2>
<center>
<img src="CA2.png" width=30% height=80%>
16
TEW-200
<br><br><br><br><br>
<video src="guns_novemberRain.MP4" controls></video>

<br><br>
<audio controls>
<source src="Aerosmith_Amazing.mp3" type="audio/mp3">
</audio>
<br><br>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d804.316377288792!2d-
68.15165765572821!3d-16.475789113128066!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.
1!3m3!1m2!1s0x915edffc6173d62d%3A0xddcfca4c8567
b2fe!2sEscuela%20Industrial!5e0!3m2!1ses!2sbo!4v1600867993630!5m2!1ses!2sbo"
width="800" height="600"
frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false"
tabindex="0"></iframe>
</center>
<img src="4.jpg" width=30% height=80%>
<center>
<h1><a href="#"> menu 1 </a><br></h1>
<h2> <a href="#"> menu 2 </a><br></h2>
<a href="#"> menu 3 </a><br>
<a href="https://www.youtube.com/watch?v=wDjeBNv6ip0"> VIDEO INICIO </a><br>
</center>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Ech-u_d_8FI"
frameborder="0" allow="accelerometer;
autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
EJEMPLO 5
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body bgcolor=yellowgreen text=black>
<h1 align="center"> COMO POSTULAR </h1>

<br> <br> <br>
Para postular en alguna de las carreras que oferta la Escuela Industrial Superior "Pedro
Domingo Murillo" debe
ingresar su número de cédula de identidad
y hacer clic en el botón Reserve su Cupo que esta disponible en esta página y seguir los
siguientes pasos:
<br>
17
TEW-200
<h2>
<center>
Ingresar tus datos personales.<br>
</center>
Obtener tu nombre de usuario y clave de acceso. <br>

Ingresar a la opción
<b>SISTEMA </b>
en la parte superior del sistema. <br>
Ingresar tu nombre de usuario y clave de acceso. <br>
Para más información visualiza el siguiente tutorial. <br>
</h2>
<center>
<img src="CA2.png" width=30% height=80%>

<br><br>
<audio controls>
</audio>
<br><br>
<iframe
68.15165765572821!3d-16.475789113128066!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.
tabindex="0"></iframe>
</center>
<center>
<h1><a href="#"> menu 1 </a><br></h1>
<h2> <a href="#"> menu 2 </a><br></h2>
<a href="https://www.youtube.com/watch?v=wDjeBNv6ip0"> VIDEO INICIO </a><br>
</center>
</body>
</html>
EJEMPLO 6
6.1 ENLACE1
<!doctype html>
18
TEW-200
<html>
<head>
<meta charset="utf-8">
<title>Zona de Lectura</title>
</head>
<body>
<form id="alojamiento" method="post" action="/editor/verdatos.php">

<p>Titulo
<input name="titulo" type="text">
</p>
<p>Tipo
<label>
<input type="radio" name="tipo" value="E" id="digital">
Ebook</label>
<label>
<input type="radio" name="tipo" value="P" id="papel">
Papel</label><br>
<br>
<input type="submit" name="button" id="button" value="Enviar">
</form>
<header>Zona para tus libros</header>

<nav>
<a href="ebooks.htm">E-books</a>
<a href="enpapel.htm">Papel</a>
</nav>
<aside>
<a href="listasenero.htm">Listas Enero</a>
<a href="listasfebrero.htm">Listas Febrero</a>
</aside>
<section>
Nuestra web se dedica a libros eléctronicos y en papel
<article>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque, magnam quae
voluptate architecto officia
est aperiam tenetur provident blanditiis nisi sed odit eos ab, explicabo corporis
placeat tempora animi.
Reiciendis.
</article>
<article>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit amet, facere qui
maxime ullam veniam debitis,
neque natus blanditiis eveniet sit officiis. Cupiditate debitis unde laboriosam,
assumenda officiis cumque
aliquam.
</article>
</section>
<footer>Copyleft 2014</footer>
</body>
</html>
6.2 enlace2
19
TEW-200
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body background="godzila.jpg" text= white >
<h1 align="center"> ESIPDM </h1>

<br> <br> <br>
<p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. </p>
<p> Ut accusamus harum nulla veniam tenetur voluptatem</p>
<p>repellendus sed! Magni, cumque. Ipsum asperiores minus quas dolorum</p>
<p>provident dignissimos doloribus fugiat quaerat eveniet?</p>
<br>
<h4>
<center>
DATOS PERSONALES.<br>
</center>
<p>Obtener tu nombre de usuario y clave de acceso. </p>

<p>Ingresar a la opción del sistema </p>
<p>SISTEMA No 3</p>
<p>en la parte superior del sistema ingresar texto .</p>
<p>Ingresar tu nombre de usuario y clave de acceso.</p>
<p>Para más información visualiza el siguiente tutorial.</p>
</h4>
<center>
<img src="liga.jpeg" width=30% height=80%>

<br><br>
<audio controls>
</audio>
<br><br>
<iframe
68.15165765572821!3d-16.475789113128066!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.
tabindex="0">
</iframe>
</center>
<h2>*<p> <a href="#"> menu 1 </a></h1>

20
TEW-200
</p>
</h2>
<h2>* <a href="#"> menu 2 </a><br></h2>
*<a href="#"> menu 3 </a><br>
*<a href="#">menu 4 </a><br>
*<a href="https://www.youtube.com/watch?v=wDjeBNv6ip0"> VIDEO INICIO </a><br>

<header>Encabezado de Pagina</header>
<p>Los campos (*) son obligatorios</p>
<p>Los campos (*) son obligatorios</p><br><br><br><br>
<form action=" ">

<fieldset>
<legend>FORMULARIO </legend>
<fieldset>
<label>NOMBRE</label> <input type="text" id="nombre" name="nom"
required
placeholder="digita tu nombre">*
<br><br>
<span>correo</span>
<input type="email" name="correo" id=""
placeholder="correo@gmail.com">
6.3 INDEX
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body bgcolor=yellowgreen text=black color : black>
<h1 align="center"> ESIPDM </h1>
<br> <br> <br>
<p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. </p>
<p> Ut accusamus harum nulla veniam tenetur voluptatem</p>
<p>repellendus sed! Magni, cumque. Ipsum asperiores minus quas dolorum</p>
<p>provident dignissimos doloribus fugiat quaerat eveniet?</p>
<br>
<h4>
<center>
DATOS PERSONALES.<br>
</center>
<p>Obtener tu nombre de usuario y clave de acceso. </p>
<p>Ingresar a la opción del sistema </p>
21
TEW-200
<p>SISTEMA No 3</p>
<p>en la parte superior del sistema ingresar texto .</p>
<p>Ingresar tu nombre de usuario y clave de acceso.</p>
<p>Para más información visualiza el siguiente tutorial.</p>
</h4>
<center>
<img src="img/CA2.png" width=30% height=80%>
<br><br>
<audio controls>
</audio>
<br><br>
<iframe
68.15165765572821!3d-16.475789113128066!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.
tabindex="0">
</iframe>
</center>
<img src="img/4.jpg" width=20% height=20%>
<h2>*<p> <a href="#"> menu 1 </a></h1>

</p>
</h2>
<h2>* <a href="#"> menu 2 </a><br></h2>
*<a href="#"> menu 3 </a><br>
*<a href="#">menu 4 </a><br>
*<a href="https://www.youtube.com/watch?v=wDjeBNv6ip0"> VIDEO INICIO </a><br>

<header>Encabezado de Pagina</header>
<p>Los campos (*) son obligatorios</p><br><br><br><br>
<form action=" ">

<fieldset>
<legend>FORMULARIO </legend>
<fieldset>
<label>NOMBRE</label> <input type="text" id="nombre" name="nom" required
placeholder="digita tu nombre">*
<br><br>
22
TEW-200
<span>correo</span>
<input type="email" name="correo" id="" placeholder="correo@gmail.com">
<select name="opciones" id="opt"> <br> <br>
<option value="1">opcion 1</option>
</select>
<label>Seleccionar:</label>
<select name="opciones" id="seleccion">
<option value="1">Opcion 1</option>
</select> <br><br>
<label>Seleccionar:</label>
<input list="nombres">
<datalist id="nombres">
<option value="Juana">
<option value="Pedro">
<option value="María">
<option value="Ramon">
<option value="Ricardo">
</datalist><br> <br>
<label>Archivo: </label> <input type="file" id="pass" name="contr"
required> <br><br>
<label>selecciona un color</label> <input type="color" name="color"
id="colores">
</fieldset>
<label>Mensaje: </label> <textarea name="mensaje" rows="10" cols="35"
placeholder=" Escribe tu mensaje"></textarea> <br><br>
<fieldset>
<legend>Seleccion simple:</legend>
<label>Mujer:</legend> <input type="radio" id="mujer" name="sexo">
<label>Hombre:</legend> <input type="radio" id="hombre" name="sexo">
<label>Por Definir:</legend> <input type="radio" id="definir"
name="sexo">
</fieldset><br><br>
</fieldset>
</form>
</body>
</html>
EJEMPLO 7
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
23
TEW-200
<title>TIENDA DE MASCOTAS</title>
</head>
<div></div>
<body background-color ="red">
<center>
<h1>
<font color="olive">TIENDA DE MASCOTAS EL PERRO FELIZ</font>
</h1>
<img src="./img/logo.jpg" width="100" height="100" alt="logotipo de la
empresa">
</center>
<font color="teal">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p> Aperiam recusandae consequatur, eveniet nobis laborum,</p>
<p>debitis ex nam nihil placeat sed dignissimos expedita</p>
<p>cupiditate mollitia distinctio! Necessitatibus, soluta</p>

<p>molestiae. Nostrum tempora vero impedit corrupti minima, expedita</p>
<p>aliquam, consequatur quam earum dignissimos eius</p>
<p>aut, optio consequuntur? Nulla odit commodi distinctio obcaecati,</p>
<p> quaerat quae adipisci non similique velit sint</p>
</font>
<center>
<video src="./sound/guns_novemberRain.mp4" width="250" height="280"
controls></video>
<audio src="./sound/Aerosmith_Amazing.mp3" controls></audio>
</center>
<iframe width="450" height="350"
src="https://www.youtube.com/embed/NKDT57Jsg90?start=120"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
picture-in-picture"
allowfullscreen>
</iframe>
<br><br><br>
<iframe
68.13817117087738!3d-
16.493143999288748!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xf3354894
378ee17f!2zMTbCsDI5JzM1LjMiUyA2OMKwMDgnMTUuNSJX!5e0!3m2!1ses-
419!2sbo!4v1646700118096!5m2!1ses-419!2sbo"
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy">
</iframe>
<br><br>
<form action="">
<fieldset>
<legend>FORMULARIO DE REGISTRO</legend>
<fieldset>
24
TEW-200
<label for="">Nombre : </label> <input type="text" name=""

id=""><br><br>
<label for="">correo : </label> <input type="email"
placeholder="correo@eispd.com"> <br> <br>
<label for="">checkbox : </label> <input type="checkbox" name=""
id=""> <br><br>
<label for="">password </label> <input type="password" name="" id="">
<br><br>
<input type="button" value="ACEPTAR"> <br> <br>
</fieldset> <br> <br>

<label for="">archivo</label> <input type="file" name="" id=""><br> <br>
<label for="">color:</label> <input type="color" name="" id=""> <br><br>
<label for="">fecha</label> <input type="date" name="" id="">
</fieldset>
<br> <br><br><br><br>
</form>
</body>
</html>
1. PROCEDIMIENTOS PARA EL LABORATORIO
LABORATORIO No2
1. Realizar el análisis y codificación de los ejemplos presentados, donde se cuenta con enlaces a otras páginas,
link de youtube, links de google maps( de la latitud y longitud de la escuela industrial.)
2. Realizar una página web y al menos 5 enlaces los cuales cuenten con la estructura semántica de HTML5.
25

Tew-200 Guia No 2 2022 Html5 Mej

Uploaded by

Document Information

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

Tew-200 Guia No 2 2022 Html5 Mej

Uploaded by

Copyright:

Available Formats

ESCUELA INDUSTRIAL SUPERIOR “PEDRO DOMINGO MURILLO”

INFORMÁTICA INDUSTRIAL TECNOLOGÍA WEB EDGAR MENDOZA F.

3. MARCO TEÓRICO PARA EL DESARROLLO DEL LABORATORIO

3.2. HTML 1.0

HTML5 sigue siendo recomendación, ya que aún no es un estándar al 100%.

➢ Simplifica el uso de las etiquetas.

Grafico 1 Evolución de HTML

3.3.1. Test para el navegador

Prueba realizada al navegador Google Chrome en un dispositivo móvil

aside bar (menú/barra lateral):

footer (pie de página):

• header (encabezado): <header> </header>.

Una página web «típica» podría parecerse a esta:

3.3.3. LISTADO DE ELEMENTOS O ETIQUETAS HTML5

<noscript> Define un contenido alternativo para los usuarios que no

<thead> Agrupa los encabezados de una tabla

Delimita el documento HTML.

Indica el lenguaje de contenido del código.

Establece el tipo de codificación del documento.

Contiene el título que se mostrará en los buscadores.

Es el texto que se muestra bajo el título en los motores de búsqueda.

<meta name="keywords" content="palabra clave 1, palabra clave 2, palabra clave 3"/>

Representa un enlace o hipervínculo.

Dirección URL hacia la que apunta el enlace.

Entre las etiquetas P colocaremos un párrafo de texto.

Esta etiqueta coloca una imagen en el documento mediante un enlace.

src: URL donde se encuentra la imagen.

3.4. VISUAL STUDIO CODE

3.4.1. ATAJOS EN VISUAL STUDIO CODE

En Windows Shift + Alt + F.

COMENTAR Y DESCOMENTAR DE GOLPE

img+enter = introduce etiqueta imangen

! + tab = toda la estructura de html5

lorem+ enter = texto auto llenado

Lorem500 + enter = 500 palabras texto demo

CTRL+ FLECHA IZ O DER = Posicionarse al inicio o final de un renglón

EJERCICIO 1. Hello Word

<!DOCTYPE html>

<meta name="viewport" content="width=device-width, initial-

<body bgcolor=yellowgreen text=black>

<h1 align="center"> COMO POSTULAR </h1>

Obtener tu nombre de usuario y clave de acceso. <br>

<video src="guns_novemberRain.MP4" controls></video>

<body bgcolor=yellowgreen text=black>

<h1 align="center"> COMO POSTULAR </h1>

Obtener tu nombre de usuario y clave de acceso. <br>

<video src="guns_novemberRain.MP4" controls></video>

<form id="alojamiento" method="post" action="/editor/verdatos.php">

<header>Zona para tus libros</header>

<body background="godzila.jpg" text= white >

<h1 align="center"> ESIPDM </h1>

<p>Obtener tu nombre de usuario y clave de acceso. </p>

<video src="guns_novemberRain.MP4" controls></video>

<h2>*<p> <a href="#"> menu 1 </a></h1>

<iframe width="560" height="315" src="https://www.youtube.com/embed/Ech-u_d_8FI"

<form action=" ">

<h2>*<p> <a href="#"> menu 1 </a></h1>

<iframe width="560" height="315" src="https://www.youtube.com/embed/Ech-u_d_8FI"

<form action=" ">

<p>cupiditate mollitia distinctio! Necessitatibus, soluta</p>

<label for="">Nombre : </label> <input type="text" name=""

</fieldset> <br> <br>

1. PROCEDIMIENTOS PARA EL LABORATORIO

You might also like