Scribd
Cargar
59 vistas

03 Profundización HTML

Este documento proporciona información sobre herramientas y elementos útiles para el desarrollo web como extensiones de Visual Studio Code, herramientas de Chrome DevTools, el sitio web w3schools y elementos básicos de HTML como títulos, párrafos, enlaces, imágenes y formularios.

Cargado por

Oscar Pastrana
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
59 vistas

03 Profundización HTML

Este documento proporciona información sobre herramientas y elementos útiles para el desarrollo web como extensiones de Visual Studio Code, herramientas de Chrome DevTools, el sitio web w3schools y elementos básicos de HTML como títulos, párrafos, enlaces, imágenes y formularios.

Cargado por

Oscar Pastrana
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 13

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

También podría gustarte