M1S1: HTML

26/2/23, 11:32 U-Camp/BOOT-M1-SEM1: HTML
U-Camp / BOOT-M1-SEM1 Private
HTML
2 stars 0 forks
Star Watch
Code Issues Pull requests Actions Projects Security Insights
main
nancynsalazar Update README.md … on Jun 28, 2022 9
View code
M1S1: HTML
¡Hola, damos inicio al módulo 1!
Espero te encuentres muy bien y con mucha motivación para continuar el

recorrido, supongo que ya tienes instalado todo lo necesario para que tu
computadora esté lista para trabajar.
Recuerda que en la U Class 0 debías realizar unas actividades para lograr este
objetivo, de lo contrario ingresa nuevamente a la U Class 0, consulta, descarga
y realiza las actividades allí señaladas, antes de continuar con este módulo, y
una vez tengas tu computadora lista, sigamos adelante.
Continuemos...
En esta sesión, iniciamos con los conceptos básicos de HTML, relativas al desarrollo de
interfaces.
https://github.com/U-Camp/BOOT-M1-SEM1 1/10
ÍNDICE
Fundamentos de HTML
Etiquetas y atributos
Formato
Enlaces
Atributos HTML
Imágenes SVG
Ejercicio de HTML
Fundamentos de HTML
HTML, es el esquema que define cómo se ordenan los elementos en una página web. No
es un lenguaje de diseño de interfaces ni un lenguaje de programación, es un Lenguaje
de Marcado de Hipertextos (HyperText Markup Language) que se usa para crear y
determinar el contenido de una página web, pero debido a su diseño, no puede definir su
funcionalidad, representa visualmente la página web tal cual.
Hipertexto, se refiere a enlaces que conectan una página web con otra, ya sea, dentro del
mismo sitio, o entre sitios totalmente ajenos uno de otro.
HTML usa "markup" o marcado para anotar textos, imágenes, y otros contenidos que se
muestran en el navegador web. El lenguaje de marcado HTML incluye "elementos"
especiales tales como <head> , <title> , <body> , <header> , <article> ,
<section> , <p> , <div> , <span> , <img> y muchos otros más.
Una estructura básica de un archivo HTML se podría codificar de la siguiente manera:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Título Ejemplo en HEAD</title>
</head>
<body>
<div>Cuerpo en BODY</div>
</body>
</html>
Etiquetas y Atributos
Formato
Cuando desarrollas HTML, lo primero es entender que existen dos espacios. head y
body .
head es utilizado para establecer todos los metadatos de la aplicación.
body se aplica en todas las etiquetas visibles a la interfaz y por ende, al usuario.
Dentro de body , las etiquetas estarán compuestas de esta manera:
<body>
<div id="main">Soy una etiqueta</div>
</body>
Se le conoce como etiqueta a la apertura y cierre de un espacio. Dentro de la misma,

puede establecerse el contenido que se visualizará en la interfaz.
Así mismo, existen los atributos que proveen información adicional sobre la etiqueta
seleccionada. En este caso id es un atributo que contiene el identificador de la etiqueta
y su valor sería main .
Enlaces
Los enlaces permiten la navegación por medio de hipervínculos (links) que realizan una
conexión y referencian otros archivos o páginas web dentro de la misma aplicación o
externa a la misma.
En HTML, los enlaces se marcan con la etiqueta <a></a> (de anchor - ancla) y el
atributo principal es *href=""* donde se escribe la ubicación del archivo de destino
que, puede estar en la misma carpeta que el archivo que lo está llamando, en otra carpeta
del mismo sitio o, en otro sitio web.
Por defecto, los navegadores web muestran los enlaces subrayados, de color azul si no
han sido visitados, de color morado si ya fueron visitados o de color rojo si el enlace se
encuentra activo (si está siendo visitado en ese momento).
Entre las etiquetas *<a href=""></a>* se puede colocar cualquier elemento HTML que
funcionará como botón, generalmente se coloca un texto o una imagen.
Hay distintas rutas de enlace y distintos tipos de enlaces:
Rutas absolutas: Son aquellas que definen la ubicación completa de un archivo en

la web, por ejemplo http://algo.com/pagina .
Rutas relativas: Son aquellas que se definen a partir de la posición en la estructura

local de la página que lo está refiriendo, es decir, definen la ubicación del archivo de
destino con relación a la ubicación del archivo que lo está llamando.
Ejemplo: si el archivo index.html vincula con ejemplo.html y están en la misma

carpeta, el enlace sería <a href="ejemplo.html">Ejemplo</a> .
Enlaces externos: Las rutas enlazadas entre distintos sitios web se les llama
enlaces externos ya que hacen referencias a páginas que se encuentran alojadas en
alguna otra aplicación web.
Enlaces internos: Son aquellos que pueden ser referenciados relativamente, es

decir, dependen de la estructura de carpetas de la aplicación web.
Anclas: Son enlaces hacia un punto determinado dentro de un html. En textos

largos, al finalizar muchas veces se coloca un botón para subir. En los sitios de una
sola página donde los botones en realidad hacen scroll, esas son anclas. El punto de
destino tiene que estar marcado con el atributo id="algo" y en el enlace se coloca un
# (numeral) seguido del nombre. En el ejemplo que se verá a continuación, al dar
click en <a href="#ancla1">Ancla</a> la página "salta" a este párrafo: <p
id="ancla1">Esta es un ancla</p> .
Enlaces de correo: Se puede vincular una dirección de correo para que abra en el
programa de correo predeterminado usando la palabra reservada mailto. Ejemplo:
<a href="mailto:info@dominio.com">Contacto</a> .
Enlaces de descarga: Dentro del atributo href="" se puede colocar la ruta hacia
cualquier tipo de archivo. Si el navegador reconoce la extensión, lo abre. Por
ejemplo: html, jpg, png, gif, svg, pdf, etc. Pero si no lo reconoce o es un archivo
comprimido (.rar, .zip), el navegador le ofrece al usuario descargarlo. Ejemplo: <a
href="archivo.zip">Descarga archivo</a> .
El atributo target especifica dónde se abrirá el enlace, acepta 4 posibles valores:
_blank para indicar que se abrirá en una ventana nueva,
_self para indicar que se abra en la misma página (comportamiento default),
_parent si la página se abrió desde otra página, entonces el enlace se abrirá en la

página inicial,
_top , su uso es en iframes e indica que el enlace debe abrirse en la página más
elevada del documento principal; los dos últimos son considerados una mala práctica
(así como el uso de iframes) y no se recomienda su uso.
¿Cómo vas? Te recuerdo que puedes volver a leer el contenido cuantas veces
lo necesites, es tu primera semana y estás aprendiendo, no te preocupes todo
saldrá bien, recuerda lo que te hizo llegar hasta aquí y te queda mucho por
aprender. No dudes en preguntar a tus coaches e incluso escribir en Teams, es
posible que muchos de tus compañeros tengan las mismas dudas que tienes
tú.
¡Seamos un gran equipo!
Continuemos...
Atributos HTML
La estructura de un documento HTML se basa principalmente en 2 etiquetas principales:
<HEAD /> . Se establecen los metadatos, configuración específica de nuestro

proyecto y enlaces internos y externos.
<BODY /> . En esta etiqueta, involucraremos todo el contenido del documento. Las
etiquetas encontradas dentro de esta, definen el documento visual que el usuario
final podrá ver renderizado en su navegador web.
Profundizando dentro de <BODY /> , vamos a contar con más elementos como div ,
section , article , entre otras. Estas contarán con atributos globales y contenido (texto
plano).
Con respecto a los atributos globales los más importantes son:
class: Una lista separada por espacios de las clases CSS que aplicarán a este
elemento.
data-*: Donde el asterisco representa cualquier conjunto de caracteres, su uso es

mayormente dado para compartir datos con la interfaz de usuario.
hidden: Indica que ese elemento en particular no se mostrará en la interfaz de

usuario.
id: Asigna un identificador global a este elemento en particular, es una referencia al

elemento en sí. Debe ser único en todo el documento.
style: Contiene declaraciones de estilo CSS que se aplican específicamente a este

elemento.
tabindex: Indica si ese elemento puede tomar el foco y en qué posición (que se
pueda seleccionar por medio del teclado o el ratón, los elementos deben llevar una
secuencia numérica indicando su nivel de selección), es usado para cuestiones de
accesibilidad.
aria-*: Son un conjunto de atributos que se usan para dar accesibilidad a la web a
personas con distintos tipos de incapacidades.
Event Attributes: Son un conjunto de atributos que pueden usarse para asignar
eventos a escuchar dentro de ese elemento, por ejemplo, si el usuario da clic sobre el
elemento, se detona un evento el cual puede manejarse por medio del atributo
onclick .
iFrames
Los iFrames son una etiqueta especial en HTML <iframe /> con la que se puede
embeber una página dentro de otra página, por lo que permite mostrar una o más páginas
dentro de una misma página. Usa los atributos src y title para definir la URL de la
página embebida y un título que se le quiera dar a la misma respectivamente.
El título no se muestra directamente en la página, si no que este es usado por cuestiones

de accesibilidad, para permitir la lectura por screen readers, los cuales leen este atributo
para describir lo que se muestra en el iFrame. Así mismo, se le puede asignar un tamaño
determinado al iframe usando los atributos width y height, los cuales aceptan valores
numéricos dados en pixeles especificando las dimensiones del iframe.
<iframe
src="https://wikipedia.com"
title="Pagina de wikipedia embebida"
width="400"
height="200"
/>
Ejemplo de iFrame
Debido a que en la página que usa la etiqueta iframe no se tiene control sobre la página
embebida, no es una práctica muy recomendable usar iFrames, se debe evitar su uso lo
más posible y usarla sólo en casos específicos.
Imágenes SVG
SVG (Scalable Vector Graphics, Gráficos Vectoriales Escalables) es un lenguaje de
marcas basado en XML creado por el W3C y dirigido a la representación de gráficos
vectoriales (dibujos y texto).
En un gráfico vectorial, los elementos de la imagen están definidos como formas

elementales (líneas, rectángulos, círculos, curvas, polígonos, etc.), definidas mediante
etiquetas similares a las del HTML. Por ello SVG no es un formato adecuado para
fotografías, pero es idóneo para cualquier tipo de dibujo, técnico o artístico.
Las ventajas de SVG son muchas:
Las imágenes SVG se pueden ampliar a cualquier escala sin perder calidad, ya que
están definidas como formas que el navegador dibuja con la precisión necesaria.
Las imágenes SVG suelen ocupar poco espacio, ya que están definidas mediante
etiquetas. El tamaño en KB de la imagen es además independiente del tamaño con el
que se ve en la página web.
Las imágenes se pueden reutilizar y combinar fácilmente ya que basta con copiar el
código fuente de una imagen a otra.
Las imágenes se pueden modificar de forma dinámica mediante hojas de estilo -
JavaScript porque forman parte de la página web.
Un gráfico SVG puede incluirse en una página web de dos maneras:
Objeto Interno: Se puede embeber un SVG directamente en la página, usando la

etiqueta <svg> , la cual debe contener la definición de los vectores.
<svg width="100" height="100">

<circle
cx="50"
cy="50"
r="40"
stroke="green"
stroke-width="4"
fill="yellow"
/>
</svg>
Ejemplo de SVG
Objeto Externo Usando la etiqueta <img> se puede hacer referencia a un archivo

.svg que contenga la definición de una imagen vectorizada. Ejemplo: <img
src="https://s.cdpn.io/3/kiwi.svg" alt="Imagen SVG de un Kiwi">
Desgraciadamente, el uso de SVG se vio frenado porque Internet Explorer no fue capaz
de mostrar gráficos SVG hasta Internet Explorer 9 de forma deficiente.
Actualmente los principales obstáculos del uso generalizado de SVG siguen siendo que
las implementaciones en los navegadores todavía son incompletas y los potenciales
riesgos de seguridad (debido a que las imágenes SVG pueden contener código
JavaScript, se recomienda no incorporar imágenes SVG sin haber comprobado antes su
contenido).
De cualquier manera, SVG se ha ido imponiendo poco a poco como formato estándar de
gráficos vectoriales frente a otros formatos propietarios y numerosos programas de
edición de gráficos son capaces de importar y exportar en formato SVG.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo HTML</title>
</head>
<body>
<h1>
Encabezado 1.
</h1>
<pre id="ancla">
Párrafo de texto preformateado que respeta los
saltos de línea así como los espacios.
</pre>
<hr />
<p>
Enlace externo con ruta absoluta
README.md

<a href="https://facebook.com">Facebook</a>
</p>
<p>
Enlace interno con ruta relativa

<a href="estilos.css">Enlace relativo</a>
</p>
<p>
Enlace ancla

<a href="#ancla">Ancla hacia el texto preformateado</a>
</p>
<p>
Enlace de correo

<a href="mailto:algo@dominio.com">Enlace de correo</a>
</p>
<p>
Enlace de descarga

<a href="descarga.zip">Enlace de descarga</a>
</p>
<hr />
<h2>
SVG Embebido
</h2>
<p>

<svg width="100" height="100">
<circle
cx="50"
cy="50"
r="40"
stroke="green"
stroke-width="4"
fill="yellow"
/>
</svg>
</p>
<h2>
Imagen SVG referenciada
</h2>
<p>

<img src="https://s.cdpn.io/3/kiwi.svg" alt="Imagen SVG de un Kiwi" />
</p>
</body>
</html>
Ejemplo de HTML con SVG
Ejercicio de HTML
Abre tu Visual Studio Code

Crea una carpeta llamada pagina-presentacion y posiciónate en ella.
Crea un archivo de nombre index.html en la raíz y agrega una presentación (nombre,
edad, hobbies, etc.) con elementos de HTML.
Agrega un header con un nav que tenga una ancla a objetivos/index.html
Crea una carpeta llamada pagina-objetivos y posicionate en ella.
Crea dentro de esta carpeta un archivo de nombre index.html y agrega lo que
esperas lograr en el bootcamp con elementos de HTML.
Agrega un header con un nav que tenga una ancla a ../index.html
¿Qué te pareció el contenido de HTML? Te dejo una infografía que resume un

poco el tema tratado la cual podrás consultar y descargar presiona aquí
Ahora bien, hasta ahora has notado que únicamente hemos hablado y visto la
estructura de un documento HTML.
Pero quizás te preguntarás, ¿Cómo se desarrolla el diseño visual de este

documento?, para ello estaremos iniciamos con el contenido de CSS que sigue
en la próxima UClass.
!Nos vemos pronto!
Releases
No releases published
Packages
No packages published
Languages
HTML 100.0%

M1S1: HTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

M1S1: HTML

Cargado por

Copyright:

Formatos disponibles

26/2/23, 11:32 U-Camp/BOOT-M1-SEM1: HTML

U-Camp / BOOT-M1-SEM1 Private

Code Issues Pull requests Actions Projects Security Insights

nancynsalazar Update README.md … on Jun 28, 2022 9

Espero te encuentres muy bien y con mucha motivación para continuar el

Una estructura básica de un archivo HTML se podría codificar de la siguiente manera:

head es utilizado para establecer todos los metadatos de la aplicación.

Dentro de body , las etiquetas estarán compuestas de esta manera:

Se le conoce como etiqueta a la apertura y cierre de un espacio. Dentro de la misma,

Hay distintas rutas de enlace y distintos tipos de enlaces:

Rutas absolutas: Son aquellas que definen la ubicación completa de un archivo en

Rutas relativas: Son aquellas que se definen a partir de la posición en la estructura

Ejemplo: si el archivo index.html vincula con ejemplo.html y están en la misma

Enlaces internos: Son aquellos que pueden ser referenciados relativamente, es

Anclas: Son enlaces hacia un punto determinado dentro de un html. En textos

El atributo target especifica dónde se abrirá el enlace, acepta 4 posibles valores:

_blank para indicar que se abrirá en una ventana nueva,

_self para indicar que se abra en la misma página (comportamiento default),

_parent si la página se abrió desde otra página, entonces el enlace se abrirá en la

¡Seamos un gran equipo!

<HEAD /> . Se establecen los metadatos, configuración específica de nuestro

Con respecto a los atributos globales los más importantes son:

data-*: Donde el asterisco representa cualquier conjunto de caracteres, su uso es

hidden: Indica que ese elemento en particular no se mostrará en la interfaz de

id: Asigna un identificador global a este elemento en particular, es una referencia al

style: Contiene declaraciones de estilo CSS que se aplican específicamente a este

El título no se muestra directamente en la página, si no que este es usado por cuestiones

En un gráfico vectorial, los elementos de la imagen están definidos como formas

Las ventajas de SVG son muchas:

Un gráfico SVG puede incluirse en una página web de dos maneras:

Objeto Interno: Se puede embeber un SVG directamente en la página, usando la

<svg width="100" height="100">

Objeto Externo Usando la etiqueta <img> se puede hacer referencia a un archivo

Ejemplo de HTML con SVG

Abre tu Visual Studio Code

¿Qué te pareció el contenido de HTML? Te dejo una infografía que resume un

Pero quizás te preguntarás, ¿Cómo se desarrolla el diseño visual de este

!Nos vemos pronto!

También podría gustarte