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
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
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
<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>
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>
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>
<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>
<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>
<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">
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>
<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.
<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
