PROFUNDIZACION HTML
Extensiones en Visual Studio Code 2
Herramientas de Chrome 2
w3schools 3
Elementos de HTML 3
Qué incluir en la raíz 3
Qué incluir en el <head> 3
Qué incluir en el <body> 5
Títulos 5
Párrafos 5
Enlaces 5
HTML Bookmarks con id y links 6
Citas 6
Tablas 7
Listas 8
imágenes 9
Los atributos width y height 10
Elementos de nivel de bloque Block-level e Inline 10
Videos de Youtube 12
Un iframe es usado para incrustar (embed) un documento dentro del mismo
documento. 12
<footer> 12
Formularios 12
Ministerio de Tecnologías de la Información y las Comunicaciones
Edificio Murillo Toro, Carrera 8a, entre calles 12A y 12B
Código Postal: 111711 . Bogotá, Colombia
T: +57 (1) 3443460 Fax: 57 (1) 344 2248
www.mintic.gov.co
Extensiones en Visual Studio Code
Las siguientes extensiones son útiles cuando estás creando sitios web, acá solo se
mencionan algunas, en el transcurso del curso iremos adicionando otras:
Material Theme Icons: cambia los íconos de los archivos para identificarlos
visualmente con sus logos y colores respectivos.
Beautify: indenta el código HTML, CSS, JS entre otros, para que sea más fácil de
leer.
Color highlight: Destaca los colores en hojas de estilos de acuerdo al código del
color.
Live Server : Permite crear un servidor local para ver los cambios en las páginas sin
necesidad de recargar.
Bracket Pair Colorizer 2: Resalta en colores el par de llaves o paréntesis, para
identificar su inicio y fin.
Herramientas de Chrome
Chrome DevTools o herramientas del desarrollador es un conjunto de herramientas
para probar tu sitio. https://www.google.com/intl/en/chrome/canary/?hl=es
Video INTRODUCCION A DEVTOOLS DE CHROME en Español
https://www.youtube.com/watch?v=fxfeGzQDcS4
de: OpenWebinars
Ministerio de Tecnologías de la Información y las Comunicaciones
Edificio Murillo Toro, Carrera 8a, entre calles 12A y 12B
Código Postal: 111711 . Bogotá, Colombia
T: +57 (1) 3443460 Fax: 57 (1) 344 2248
www.mintic.gov.co
w3schools
https://www.w3schools.com/
Según wikipedia, W3Schools es un sitio web para aprender tecnologías web en línea.
Contiene tutoriales de HTML, CSS, JavaScript, SQL, PHP, XML y otras tecnologías.
https://www.w3schools.com/html/default.asp
Se parte de la estructura básica
Elementos de HTML
los tag son elementos que van entre < >
<!DOCTYPE html> Tipo de documento HTML5
<html> Raíz del documento
<head>
Dentro del head se ubican los metadatos
del documento
<title>Page Title</title> Título de la página
</head> Se cierra el head
<body>
Acá inicia el cuerpo del documento
<h1>This is a Heading</h1>
Los h1.. h6 son títulos en orden de
jerarquía
<p>This is a paragraph.</p>
Texto organizado en párrafos
</body>
</html> Se finaliza el cuerpo
Finaliza la página web
Qué incluir en la raíz
<html lang="es">
Qué incluir en el <head>
Incluye la siguiente línea en cada una de tus páginas web para crear un sitio web
responsive
Ministerio de Tecnologías de la Información y las Comunicaciones
Edificio Murillo Toro, Carrera 8a, entre calles 12A y 12B
Código Postal: 111711 . Bogotá, Colombia
T: +57 (1) 3443460 Fax: 57 (1) 344 2248
www.mintic.gov.co
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Dispositivos con pantallas angostas (p.e. móviles) muestran la página en una
ventana virtual o viewport, que es usualmente más ancho que la pantalla y la
comprimen de manera que pueda verse completa.
width=device-width establece el ancho de la página que seguirá el ancho de la
pantalla del dispositivo (que variará según el dispositivo).
initial-scale=1.0 establece el nivel de zoom inicial cuando el navegador carga la
página por primera vez.
El siguiente código nos reconoce las tildes y ñ
<meta charset="utf-8">
El title es el título que sale en la pestaña del navegador
<title> La tienda que quiero </title>
Favicon
<link rel="icon" href="imagenes/favicon.png" type="image/png" />
El ícono favicon se visualiza antes de title, en este ejemplo se ve el ícono de la UTP:
En este enlace encuentra cientos de íconos libres: https://icon-icons.com/.
Puede incluir en este espacio el código JS, se aconseja solamente enlazarlo, porque
hace la lectura del código más fácil de leer y administrar, también al cachear estos
archivos hacen que las páginas carguen más rápido :
<script src="/javascripts/application.js"></script>
<script src="/javascripts/myScript1.js"></script>
<script src="https://www.w3schools.com/js/myScript1.js"></script>
Ministerio de Tecnologías de la Información y las Comunicaciones
Edificio Murillo Toro, Carrera 8a, entre calles 12A y 12B
Código Postal: 111711 . Bogotá, Colombia
T: +57 (1) 3443460 Fax: 57 (1) 344 2248
www.mintic.gov.co
Igualmente los estilos, enlazar la hoja de estilos:
<link rel="stylesheet" type="text/css" href="estilos/style.css">
Qué incluir en el <body>
Títulos
<h1>Títulos de mayor importancia, puede ser uno solo</h1>
<h2>Subtítulo que van después de un título principal</h2>
Ejemplo
<h1>Tienda virtual</h1>
<h2>Sección de Calzado</h2>
<h3>Zapatillas para hombre</h3>
<h3>Calzado para dama</h3>
<h3>Deportivos para niño</h3>
<h2>Sección de Ropa</h2>
Párrafos
Puedes colocar información amplia como párrafos
<h1>Tienda virtual</h1>
<p>La tienda virtual está al servicio de la comunidad Pereirana, atendida por sus
propietarios: estudiante1, estudiante2, estudiante3, estudiante4 y estudiante5</p>
<h2>Sección de Calzado</h2>
<p>En esta sección encontrarás diversidad de calzado para todas las edades,
géneros, gustos, tipo, deportes, etc.</p>
<h3>Zapatillas para hombre</h3>
Ministerio de Tecnologías de la Información y las Comunicaciones
Edificio Murillo Toro, Carrera 8a, entre calles 12A y 12B
Código Postal: 111711 . Bogotá, Colombia
T: +57 (1) 3443460 Fax: 57 (1) 344 2248
www.mintic.gov.co
Enlaces
Agrega links o enlaces dentro de la misma página o a otros sitios, diligenciando los
atributos así:
<a href="index.html">Inicio</a>
<a href="quienes-somos.html">Quiénes somos? </a>
<a href="contacto.html">Contacto</a>
<h1>Tienda virtual</h1>
<p>La tienda virtual está al servicio de la comunidad Pereirana, atendida por sus
propietarios: estudiante1, estudiante2, estudiante3, estudiante4 y estudiante5</p>
<a href="https://www.standvirtualdelatienda.com" target="_blank">Visita nuestro
stand virtual </a>
El atributo target especifica dónde abrir el documento enlazado:
_self Defecto. Abre el documento en la misma ventana / pestaña en la que
se hizo clic
_blank Abre el documento en una nueva ventana o pestaña
_parent Abre el documento en el marco principal
_top Abre el documento en el cuerpo completo de la ventana.
HTML Bookmarks con id y links
Estos permiten crear enlaces para ir a diferentes partes del documento, como en las
tablas de contenido de los documentos. En el siguiente ejemplo, la ruta en el href le
antecede el símbolo de numeral #
<a href="#ZapatosCorrer">Ir a Zapatos para Correr</a>
<h2 id="ZapatosCorrer">Zapatos para correr</h2>
Citas
<h3>Zapatillas para hombre</h3>
Ministerio de Tecnologías de la Información y las Comunicaciones
Edificio Murillo Toro, Carrera 8a, entre calles 12A y 12B
Código Postal: 111711 . Bogotá, Colombia
T: +57 (1) 3443460 Fax: 57 (1) 344 2248
www.mintic.gov.co
<p>El porqué de las zapatillas</p>
<blockquote cite="https://es.wikipedia.org/wiki/Zapatilla">La palabra zapatilla
puede referirse al calzado cómodo o de abrigo para estar en casa
</blockquote>
Comentarios
En cualquier lugar del documento, escribe comentarios que no se mostrarán en la
página web, pero si en el código fuente
<!-- Menú principal -->
Tablas
Estas son usadas para mostrar información por medio de columnas y filas
Así se vería:
Áreas de la tienda Contacto Teléfono
Calzado Hombre Estudiante 1 300 000 00
Zapatillas para hombre Estudiante 2 300 000 01
Calzado para dama Estudiante 3 300 000 02
Deportivos para niño Estudiante 4 300 000 03
Este es el código
<table>
<caption>Contactos de la tienda por áreas</caption>
<tr>
<th>Áreas de la tienda</th>
<th>Contacto</th>
<th>Teléfono</th>
</tr>
<tr>
<td>Calzado Hombre</td>
<td>Estudiante 1</td>
Ministerio de Tecnologías de la Información y las Comunicaciones
Edificio Murillo Toro, Carrera 8a, entre calles 12A y 12B
Código Postal: 111711 . Bogotá, Colombia
T: +57 (1) 3443460 Fax: 57 (1) 344 2248
www.mintic.gov.co
<td>300 000 00 </td>
</tr>
<tr>
<td>Zapatillas para Hombre</td>
<td>Estudiante 2</td>
<td>300 000 01 </td>
</tr>
<tr>
<td>Calzado para dama</td>
<td>Estudiante 3</td>
<td>300 000 02 </td>
</tr>
<tr>
<td>Deportivos para niño</td>
<td>Estudiante 4</td>
<td>300 000 03 </td>
</tr>
</table>
La etiqueta <caption> define un título para la tabla
Cada fila está definida con un <tr>.
El texto entre el elemento <th> es un encabezado de la columna, el texto que no es
título, se indica entre <td>
Listas
Sirven para agrupar ítems, por ejemplo, si quieres ver 2 listas así:
Beneficios del calzado deportivo Pasos para elegir tu calzado deportivo:
● Son cómodos 1. Qué tipo de actividad vas a
● Combinan con todo tipo de ropa realizar?
● no inflaman los pies 2. Cuánto calzas ?
3. Qué color te gusta?
Este es el código:
<h3>Beneficios del calzado deportivo</h3>
<ul>
<li>Son cómodos</li>
<li>Combinan con todo tipo de ropa</li>
Ministerio de Tecnologías de la Información y las Comunicaciones
Edificio Murillo Toro, Carrera 8a, entre calles 12A y 12B
Código Postal: 111711 . Bogotá, Colombia
T: +57 (1) 3443460 Fax: 57 (1) 344 2248
www.mintic.gov.co
<li>no inflaman los pies</li>
</ul>
<h3>Pasos para elegir tu calzado deportivo: </h3>
<ol>
<li>Qué tipo de actividad vas a realizar?</li>
<li>Cuánto calzas ?</li>
<li>Qué color te gusta?</li>
</ol>
Listas de Descripción
Estas son listas de términos con descripción de cada ítem
<dl>
<dt>Chaquetas WaterProof</dt>
<dd>- Característica de las chaquetas que son a prueba de agua</dd>
<dt>Chaquetas Breathable</dt>
<dd>- Característica de las chaquetas respirables</dd>
</dl>
imágenes
El atributo src u origen se refiere a la ubicación de la imágen, organízalas de tal forma
que sea fácil de encontrar en el árbol de directorios o enlaza un sitio web externo con
permisos para uso de imágenes.
<p>La tienda virtual está al servicio de la comunidad Pereirana, atendida por sus
propietarios: estudiante1, estudiante2, estudiante3, estudiante4 y estudiante5</p>
<img src="imagenes/estudiante1.jpg" alt="estudiante1" width="109" height="164">
<img src="imagenes/estudiante2.jpeg" alt="estudiante1" width="99" height="148">
<img src="https://www.sitio-personal-estudiante4.com/images/estudiante4.jpg"
alt="estudiante4">
<img src="https://www.sitio-personal-estudiante5.com/images/estudiante5.jpg"
alt="estudiante5">
Ministerio de Tecnologías de la Información y las Comunicaciones
Edificio Murillo Toro, Carrera 8a, entre calles 12A y 12B
Código Postal: 111711 . Bogotá, Colombia
T: +57 (1) 3443460 Fax: 57 (1) 344 2248
www.mintic.gov.co
Es aconsejable utilizar el atributo alt como un texto alternativo para la imagen.
<img src="imagenes/estudiante1.jpg" alt="propietaria nombre 1">
Nota: Se pueden usar imágenes de freepik, así:
Cuenta Gratuita: Deberás añadir un link a Freepik y atribuir al autor del diseño
a cambio de usar nuestros gráficos. Para acreditar, debes usar Designed by
Freepik en cada caso donde uses nuestros gráficos diseñador por Freepik, o
el nombre del autor que corresponda
En esta otra página encuentra imagenes libres : https://unsplash.com/
Los atributos width y height
Estos atributos son utilizados para especificar el ancho (width) y alto (height) en pixeles de
una imágen o de un iframe que se verá más adelante.
Elementos de nivel de bloque Block-level e Inline
Los elementos de block-level inician en una nueva línea y toman el ancho disponible.
Los elementos Inline no inician en nueva línea y ocupan el ancho necesario.
Elemento <div>
El elemento div es nivel de bloque. Es usado como contenedor para otros elementos.
Puede usarse con o sin atributos (style, class y id)
Si tienes
<div id="encabezado">
<!--Información principal-->
</div>
<div id="menuNav">
<!-- Menú para la navegación→
<a href="index.html">Inicio</a>
<a href="quienes-somos.html">Quiénes somos? </a>
<a href="contacto.html">Contacto</a>
</div>
Ministerio de Tecnologías de la Información y las Comunicaciones
Edificio Murillo Toro, Carrera 8a, entre calles 12A y 12B
Código Postal: 111711 . Bogotá, Colombia
T: +57 (1) 3443460 Fax: 57 (1) 344 2248
www.mintic.gov.co
<div id="contenido">
<!--Contenido de la página principal-->
</div>
significa que solo hay un bloque con el nombre “menuNav”
Pero si quieres repetir el bloque, relacionalo con class, así
<div clas="card"> elementos comunes </div>
Nota: El texto que escribes entre comillas debe tener al menos un caracter, no tener
espacios en blanco y es sensible a mayusculas o minusculas
<div class="card">
<img src="imagenes/zapatoh1.jpg" alt="tennis rojos">
<h4>Nike Running rojos</h4>
<p class="valor">$154.999</p>
<p>Tennis para correr</p>
<p><button>Adicionar al carro</button></p>
</div>
En este ejemplo se usará la clase card para mostrar los productos con su descripción
y precio. Adicionamos un botón para añadir al carro de compras, aunque todavía no
funcione.
Otros elementos block-level son:
Span es un elemento Inline usado para marcar parte un texto o para diseñar parte de
esto apoyándose en css.
Ministerio de Tecnologías de la Información y las Comunicaciones
Edificio Murillo Toro, Carrera 8a, entre calles 12A y 12B
Código Postal: 111711 . Bogotá, Colombia
T: +57 (1) 3443460 Fax: 57 (1) 344 2248
www.mintic.gov.co
<span>Hello World</span>
Otros elementos inline son:
Videos de Youtube
Este código es proporcionado por YouTube, se puede obtener por medio de la opción
Compartir -> Incorporar < >
<iframe width="560" height="315"
src="https://www.youtube.com/embed/42ABdWRcUDo" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture" allowfullscreen></iframe>
Un iframe es usado para incrustar (embed) un documento dentro del mismo
documento.
<footer>
Relaciona aquí información del autor, derechos de uso, información de contacto,
mapa del sitio, políticas, etc.
<footer>
<p>Autores:Desarrolladores</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>
Formularios
Los formularios son usados para guardar información del usuario.
Ministerio de Tecnologías de la Información y las Comunicaciones
Edificio Murillo Toro, Carrera 8a, entre calles 12A y 12B
Código Postal: 111711 . Bogotá, Colombia
T: +57 (1) 3443460 Fax: 57 (1) 344 2248
www.mintic.gov.co
<form action="action_page.php" method="get">
<label for="nombreCompleto" >Nombre completo</label>
<input type="text" id="nombreC" name="nombreC" placeholder="Nombres y
apellidos" required><br><br>
<label for="zapatoB">Zapato que no encontraste:</label>
<input type="text" id="zapatoab" name="zapatoab"><br><br>
<input type="radio" id="zapatoh" name="tzapato" value="hombre">
<label for="male">Hombre</label><br>
<input type="radio" id="zapatom" name="tzapato" value="mujer">
<label for="female">Mujer</label><br>
<input type="radio" id="zapaton" name="tzapato" value="nino">
<label for="other">Niño</label><br><br>
<input type="submit" value="Solicitar">
</form>
El atributo label for muestra la etiqueta para algunos elementos del formulario.
El atributo input muestra el campo donde el usuario introducirá el dato solicitado y
tipo de dato indicado por el atributo type.
El atributo placeholder muestra datos de sugerencia dentro del input
El atributo id identifica a cada input
El valor required indica que este campo debe ser diligenciado
Ministerio de Tecnologías de la Información y las Comunicaciones
Edificio Murillo Toro, Carrera 8a, entre calles 12A y 12B
Código Postal: 111711 . Bogotá, Colombia
T: +57 (1) 3443460 Fax: 57 (1) 344 2248
www.mintic.gov.co
