SECRETARÍA DE EDUCACIÓN DE BUENAVENTURA 1er Periodo
INSTITUCIÓN EDUCATIVA TERMARIT
Docente:
Sedes San Martín y Progreso
RECONOCIMIENTO OFICIAL 1604 DEL 09 DE SEPTIEMBRE DE 2011 Jaminton Asprilla A.
NIT: 83000547-6 DANE 176109000648 AÑO LECTIVO 2025
AREA: TECNOLOGIA E INFORMATICA
GRADO 11°
Fecha: Abril 21 de 2025 Docente: Jaminton Asprilla A.
MAQUETACIÓN DE UNA PÁGINA WEB
La maquetación es un aspecto muy importante en el diseño web, ya que por medio de esta le damos
una organización adecuada a los elementos que contiene la página, de esta manera le damos un
mejor aspecto a esta.
Para maquetar adecuadamente una página se debe tener en cuenta algunos aspectos y propiedades
de los elementos HTML, así como también necesitaremos incluir un poco de estilos CSSEs un
lenguaje que sirve para organizar la presentación y aspecto de una página web..
Antes de empezar a maquetar o a distribuir nuestra página web debemos imaginarnos como
queremos que esta se vea, o que secciones queremos que contenga, es decir, podemos
imaginarnos una sección donde irá una cabeceraGeneralmente es la sección que va en la parte
superior de la página. con la imagen de la organización, una sección para el menú, una sección para
el contenido general etc. Luego que hemos establecido esto debemos plasmarlo en un diagrama con
las medidas de cada sección. A continuación, veamos un ejemplo de una maquetación simple:
Cada uno de los recuadros en los que hemos dividido nuestra página, los vamos a llamar
contenedores. En HTML tenemos diversas etiquetasUna etiqueta es un texto incluido entre los
símbolos menor que < y mayor que >. que actúan como contenedores. Entre ellas tenemos:
<div></div>,
<nav></nav>,
<article></article>,
<section></section>,
<header></header>,
<footer></footer>, etc.
En la distribución que hemos realizado tenemos 3 contenedores. Para el que se encuentra en la
parte superior vamos a utilizar <header> y </header> que significa cabecera; para el menú
normalmente se utiliza <nav> y </nav> y para el contenido podemos utilizar <section></section>.
Adicionalmente tendremos que agregar algunas propiedades CSSEs un lenguaje que sirve para
organizar la presentación y aspecto de una página web. para establecer los tamaños de los
contenedores.
SECRETARÍA DE EDUCACIÓN DE BUENAVENTURA 1er Periodo
INSTITUCIÓN EDUCATIVA TERMARIT
Docente:
Sedes San Martín y Progreso
RECONOCIMIENTO OFICIAL 1604 DEL 09 DE SEPTIEMBRE DE 2011 Jaminton Asprilla A.
NIT: 83000547-6 DANE 176109000648 AÑO LECTIVO 2025
La propiedad float que hemos incluido, permite a un contenedor flotar o colocarse al lado de otro
contenedor, ya que por defecto los contenedores se colocan uno debajo del otro y en este caso con
esta propiedad de CSSEs un lenguaje que sirve para organizar la presentación y aspecto de una
página web. los estamos obligando a flotar a la izquierda (left) cada uno.
Hasta el momento hemos visto que siempre utilizamos pixelesEs la menor unidad o cada punto que
forma parte de una imagen digital. (px) para establecer los tamaños, sin embargo, en ocasiones
conviene utilizar una medida que no sea fija o absoluta, sino una medida que sea relativa. Esto hara
que los contenedores se puedan adaptar a los diferentes tamaños de pantalla. Para esto utilizamos
la medida en unidad porcentual (%).
Ejemplo
<html>
<head><title>Mi Página Web</title></head>
<body>
<header style="width:100%; height:20%; background:#CCCCCC">
Aquí ira el logo
</header>
<nav style="width:30%; height:80%; float:left; background:#FFFF99 ">
Aquí ira el menú
</nav>
<section style="width:70%; height:80%; float:left; background:#7777FF">
Aquí ira el contenido
</section>
</body>
</html>
SECRETARÍA DE EDUCACIÓN DE BUENAVENTURA 1er Periodo
INSTITUCIÓN EDUCATIVA TERMARIT
Docente:
Sedes San Martín y Progreso
RECONOCIMIENTO OFICIAL 1604 DEL 09 DE SEPTIEMBRE DE 2011 Jaminton Asprilla A.
NIT: 83000547-6 DANE 176109000648 AÑO LECTIVO 2025
COLORES HEXADECIMALES EN HTML
Los colores hexadecimales en HTML son códigos que representan colores utilizando una combinación
de rojo (R), verde (G) y azul (B) en formato hexadecimal (#RRGGBB).
Estructura de un color hexadecimal
Un color en hexadecimal está compuesto por 6 dígitos:
Los dos primeros representan el rojo (R).
Los dos del medio representan el verde (G).
Los dos últimos representan el azul (B).
Ejemplo:
<p style="color: #FF5733">Este texto es de color naranja.</p>
#FF5733 se desglosa en:
FF = Rojo (255)
57 = Verde (87)
33 = Azul (51)
Ejemplos de colores en hexadecimal
Color Código Hex Color Código Hex
Negro #000000 Amarillo #FFFF00
Blanco #FFFFFF Naranja #FFA500
Rojo #FF0000 Morado #800080
Verde #00FF00 Gris #808080
Azul #0000FF
SECRETARÍA DE EDUCACIÓN DE BUENAVENTURA 1er Periodo
INSTITUCIÓN EDUCATIVA TERMARIT
Docente:
Sedes San Martín y Progreso
RECONOCIMIENTO OFICIAL 1604 DEL 09 DE SEPTIEMBRE DE 2011 Jaminton Asprilla A.
NIT: 83000547-6 DANE 176109000648 AÑO LECTIVO 2025
¿Qué es el color hexadecimal?
El color hexadecimal es un sistema de notación numérica utilizado para representar colores en la
mayoría de las páginas web. Se basa en la combinación de tres valores numéricos: rojo, verde y azul
(RGB, por sus siglas en inglés).
¿Para qué se utiliza el color hexadecimal?
El color hexadecimal es ampliamente utilizado en el diseño web. Es una forma de garantizar que los
colores se vean iguales en diferentes dispositivos y navegadores, ya que todos interpretan los códigos
de la misma manera.
También es útil cuando se trabaja con diseños gráficos, ya que los programas de diseño suelen permitir
la especificación del color en código hexadecimal.
¿Cómo se compone el código hexadecimal?
El código hexadecimal se compone de seis caracteres alfanuméricos, que representan los valores de
los colores RGB. Los dos primeros caracteres representan el valor del color rojo, los dos siguientes
representan el valor del verde, y los dos últimos representan el valor del azul.
Cada uno de estos caracteres puede ser un número del 0 al 9 o una letra de la A a la F. Por ejemplo,
el código hexadecimal para el color rojo puro es #FF0000, mientras que el código para el color blanco
es #FFFFFF.
¿Cuáles son los códigos de color de HTML ?
Los códigos de colores son formas de representar los colores que vemos cada día en un formato que
un ordenador puede interpretar y mostrar. Comúnmente utilizado en sitios web y otras aplicaciones de
software, hay una gran variedad de formatos, incluidos los códigos de color HEX, RGB y HSL valores
y nombres de colores HTML, entre otros.
Sigue el siguiente link: https://htmlcolorcodes.com/es/
SECRETARÍA DE EDUCACIÓN DE BUENAVENTURA 1er Periodo
INSTITUCIÓN EDUCATIVA TERMARIT
Docente:
Sedes San Martín y Progreso
RECONOCIMIENTO OFICIAL 1604 DEL 09 DE SEPTIEMBRE DE 2011 Jaminton Asprilla A.
NIT: 83000547-6 DANE 176109000648 AÑO LECTIVO 2025
¿Qué es el sistema hexadecimal?
El sistema hexadecimal es un sistema de numeración de base 16, lo que significa que usa 16 símbolos para representar
valores:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
🔹 Los dígitos del 0 al 9 tienen el mismo valor que en el sistema decimal.
🔹 Las letras de la A a la F representan los valores del 10 al 15 en decimal:
Hexadecimal Decimal
A 10
B 11
C 12
D 13
E 14
F 15
Ejemplo de conversión hexadecimal a decimal
Para convertir un número hexadecimal a decimal, multiplicamos cada dígito por 16 elevado a la posición que ocupa (de
derecha a izquierda, comenzando desde 0).
Ejemplo: 2F (hexadecimal) a decimal
