HTML

HTML
Contenido
HTML
Capítulo 1: Introducción
Qué es HTML
HTML5 & CSS3
Capítulo 2: Herramientas Para Empezar
El Editor de Texto
El Navegador
Cómo Probar el Código
Capítulo 3: Elementos de la Página HTML
El doctype <!doctype html>
<html>
<head>
<body>
Capítulo 4: Las Etiquetas de Texto
Los Títulos
Los Párrafos
Capítulo 5: Las Listas
Listas Numeradas
Listas Con Viñetas
Capítulo 6: Los Enlaces
Los Atributos Principales
Rutas Absolutas y Rutas Relativas
Capítulo 7: Las Imágenes
Capítulo 8: Los div
Contenedor Genérico
Capítulo 9: Primera Página
HTML
Capítulo 10: CSS en Línea
Capítulo 11: CSS Aplicado al Texto
Capítulo 12: CSS Aplicado a los div
Posicionar
Dimensiones y Margen
Capítulo 13: Imágenes y CSS
Imágenes Responsivas
Capítulo 14: El Mundo Real
Capítulo 1: Introducción
Qué es HTML
En términos simples, una página Web (o documento HTML) es un

archivo de texto sin formato que se ha codificado mediante el lenguaje de
marcado de hipertexto (Hypertext Markup Language) para que parezca
bien formateado en un explorador Web. Esto es lo que significa HTML,
palabra por palabra:
Hipertexto: Hipertexto en el que haga clic para cambiar entre

documentos. Esta es una referencia a la capacidad de las
páginas Web para conectarse entre sí;
Marcado: etiquetas de marcado que aplican convenciones de

diseño y formato al texto sin formato. Literalmente, el texto sin
formato está "marcado" con etiquetas;
Lenguaje: Una referencia al hecho de que HTML se considera

un lenguaje de programación.
Cuando se piensa en el alcance de la programación de equipos,

normalmente se piensa en escribir un programa compilado. Un lenguaje
de programación compilado ejecuta código de programación legible por
humanos a través de una utilidad que lo convierte en un archivo
ejecutable (normalmente con una extensión .exe o .com), que luego se
distribuye a los usuarios.
Por el contrario, HTML es un lenguaje de programación interpretado.

Esto significa que el programa se distribuye en un formato legible por el
usuario y el programa en el que está abierto se encarga de ejecutarlo. El
código HTML de las páginas Web reside en los archivos. Siempre que el
navegador Web abre una página Web, procesa el código HTML dentro
del archivo. Esta es la diferencia entre el lenguaje de marcado y el
lenguaje declarativo, un lenguaje de marcado se limita a agregar algo a
un contenido (en este caso, los elementos que se mostrarán en la página).
Un lenguaje declarativo, por otro lado, ejecuta una serie de instrucciones
que no necesariamente son entendidas por el usuario, aunque escritas por
un desarrollador.
Las etiquetas HTML son palabras clave ocultas dentro de una página
Web que definen cómo el navegador Web debe formatear y mostrar el
contenido. La mayoría de las etiquetas deben tener dos partes, una de
apertura y otra de cierre. Por ejemplo, <html> es la etiqueta de apertura y
</html> es la etiqueta de cierre, tenga en cuenta que la etiqueta de cierre
tiene el mismo texto que la etiqueta de apertura, pero además tiene un
carácter de barra inclinada (/). Debe interpretar esto como "fin de
etiqueta".
Hay algunas etiquetas que son una excepción a esta regla y donde no se
requiere una etiqueta de cierre, la etiqueta <img> para mostrar imágenes
es un ejemplo. Cada archivo HTML debe tener etiquetas esenciales para
que se considere válido, de modo que los navegadores Web puedan
entenderlo y mostrarlo correctamente. El resto del archivo HTML puede
contener tantas etiquetas como desee para mostrar su contenido.
Las etiquetas pueden tener atributos que le permiten personalizar una

etiqueta y se definen dentro de la etiqueta de apertura, por ejemplo: <img
src = "imagen1.jpg"> o <p align = "center"> TEXTO </ p>. A los
atributos a menudo se les asigna un valor usando el signo igual, como
border = "0" o width = "50%", pero hay algunos que solo necesitan ser
declarados en la etiqueta de esta manera: <input disabled>. La mayoría
de los atributos son opcionales para la mayoría de las etiquetas y solo se
utilizan cuando desea cambiar algo sobre el comportamiento
predeterminado con el que el navegador muestra una etiqueta. Sin
embargo, algunas etiquetas como la etiqueta <img> tienen atributos
obligatorios como src y alt que son necesarios para que el navegador
muestre la página Web correctamente. A continuación, se muestra un
documento html básico, que contiene todas las etiquetas esenciales.
Puede copiar el código que aparece abajo, pegarlo en su editor y

guardarlo como page.html para crear su página Web:
<html>
<head>
<title>Título de la página</title>
</head>
<body>
¡Aquí va todo el contenido de la página Web!
</body>
</html>
HTML es un lenguaje de marcado muy simple y aunque hay casi 100

etiquetas en HTML5, por lo general terminarás usando sólo una parte de
ellas el 99% de las veces. Estas son algunas etiquetas HTML que
necesita para marcar casi todo el contenido y cualquier otra cosa en la
que pueda pensar al crear una página Web.
Las 10 etiquetas HTML de la siguiente lista se utilizan para el formato

de contenido. No te preocupes, aunque se ven mucho y difíciles de
aprender, son muy simples y todos funcionan de la misma manera. Aquí
está la lista:
<h1>, <h2>, <h3>... <h6> Encabezados

<p> Párrafo
<i> o <em> Cursiva / Énfasis
<b> o <strong> Negrita
<a> Todavía
<ul> & <li> Lista sin ordenar y lista de elementos
<blockquote> Citación
<hr> Cambio de tema
<img> Imagen
<div> Bloque genérico
HTML5 & CSS3
En primer lugar, veremos HTML5, que es la quinta versión del lenguaje

de marcado de hipertexto (Hypertext Markup Language). Este es el
lenguaje de marcado principal utilizado para definir y estructurar el
contenido en las páginas Web. Todas las páginas Web existentes han
implementado HTML de una manera u otra. Durante tantos años,
precisamente desde 1997, HTML4 siempre se ha utilizado. En 2012
comenzó el desarrollo de la última versión de HTML, que fue lanzado a
finales de 2014.
HTML5 está diseñado principalmente para soportar páginas Web más

orientadas a los medios de comunicación, manteniendo su simplicidad.
Una de las grandes diferencias entre HTML4 y HTML5 es la mayor
adaptabilidad. HTML5 adoptó algunas de las características que estaban
presentes en HTML4, pero también incluye características adicionales.
Por ejemplo, HTML5 redefinió algunos elementos HTML, como y los

reemplazó por elementos más "amigables con el ser humano", como
encabezados, pies de página y secciones. También hay API de interfaces
de programación de aplicaciones (HTML5) que le permiten agregar
medios como audio y vídeo.
Ahora veamos CSS, que significa Hojas de estilo en cascada, ahora en su

tercera y última versión con CSS3. CSS ha revolucionado la forma en
que se diseñaron las páginas Web, la mayoría de las cuales se basaron en
HTML. Al definir páginas en un archivo independiente llamado hoja de
estilos, se logró una gran coherencia, de hecho, todo lo que los
desarrolladores Web tenían que hacer era vincular sus páginas Web a un
archivo CSS determinado. Este archivo CSS contiene definiciones para
diferentes elementos de la página Web, como encabezados, pies de
página, barras laterales, vínculos, menús e incluso texto. CSS3 tiene
algunas habilidades de estilo bastante avanzadas que permiten al
diseñador Web manipular fondos y estilos de fuente.
Con CSS3, también puede implementar fácilmente sombras paralelas y

con todos estos estilos a partir de un archivo, por lo que crea un sitio
Web más limpio que también es ligero en términos de almacenamiento,
consumo de ancho de banda y tiempo de carga.
Las páginas Web basadas en CSS3 se pueden hacer fácilmente sensibles

mediante consultas de medios, lo que significa que esas páginas Web
parecen optimizadas para diferentes tamaños y resoluciones de pantalla.
Esta es una de las tendencias más populares en el desarrollo Web en los
últimos años. Los sitios Web modernos deben adaptarse debido a las
variaciones en los dispositivos utilizados para acceder a Internet,
dispositivos como teléfonos inteligentes, computadoras portátiles,
tabletas e incluso consolas de juegos.
Con el fin de satisfacer a todos los usuarios de Internet en el mundo, los

sitios Web responsivos (también llamados responsive) son una
necesidad, es por eso que HTML5 hace que el desarrollo de estos sitios
sea muy fácil. Cuando HTML5 y CSS3 trabajan juntos, obtiene una
poderosa combinación que le permite crear sitios Web ricos en
características utilizando un proceso de codificación mucho más simple.
Para los programadores inexpertos, el desarrollo en HTML5/CSS3 será

mucho más fácil, ya que el lenguaje está más cerca del humano y más
lejos del código de la máquina. Para estos programadores, un generador
de plantillas HTML5/CSS3 es la mejor opción. Son muy fáciles de usar
y te conviertes en un pintor que añade los elementos al lienzo Web de
una manera muy sencilla y eficiente, sin embargo, corres el riesgo de no
aprender HTML5 y CSS3 en profundidad.
Capítulo 2: Herramientas Para Empezar
El Editor de Texto
Para escribir una página HTML no necesita descargar ningún software,

no necesita un programa dedicado o profesional. Puede usar el Bloc de
Notas o el equivalente en MacOS y Linux. Si desea realizar un cambio
en el documento, puede actualizar el marcado, guardar el archivo,
regresar al navegador y hacer clic en el botón Recargar o Actualizar.
A veces, el navegador recargará la página desde su caché de todos

modos; Si una página no se actualiza correctamente después de volver a
cargarla, mantenga presionada la tecla MAYÚS mientras hace clic en el
botón Recargar y el navegador debería actualizar la página. Mientras
escribe el marcado, mantener su navegador y editor abiertos al mismo
tiempo es una gran idea para evitar reabrir constantemente uno u otro.
Muchos editores Web le ayudarán a cargar sus páginas Web en varios
navegadores o incluso a obtener una vista previa de la visualización de
marcado directamente.
Algunos editores proporcionan herramientas de soporte para

desarrolladores para que pueda crear páginas Web más rápidas y rápidas.
Esta es básicamente la diferencia entre productos gratuitos y productos
profesionales, una serie de plugins y herramientas que pueden aumentar
en gran medida su productividad. Uno de los mejores editores es Atom,
un producto creado por Github y totalmente personalizable a través de
plugins, hay prácticamente un plugin para todo. ¿Desea formatear el
código? Añade un plugin. ¿Desea crear agregar código React? Añade un
plugin.
Además de esta considerable ventaja, es un software multiplataforma

para que pueda usarlo en MacOS, Windows y Linux y le ofrece
autocompletar inteligente. Atom, de hecho, le ayuda a escribir código
más rápido al sugerirle atributos y sintaxis, de forma rápida y flexible.
Por último, pero no menos importante, puede utilizar diferentes iconos
para los archivos para comparar y editar el código contenido en los
archivos.
El Navegador
Cuando un explorador lee un documento marcado, como el ejemplo

siguiente:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>Bienvenidos</title>
</head>
<body>
<h1>Bienvenidos a HTML</h1>
<hr>
<p>HTML <em>no es</em> ¡tan difícil de aprender!</p>
<p>Puede poner mucho texto aquí si lo desea. Podríamos seguir y
seguir con un texto de ficción, pero volvamos al libro.</p>
</body>
</html>
... construye un árbol de análisis para interpretar la estructura del
documento. Estos árboles de análisis, a menudo denominados árboles del
Modelo de objetos de documento (Document Object Model), son la
interpretación del explorador del marcado proporcionado y son una parte
integral de la determinación de cómo representar visualmente la página
mediante HTML y cualquier CSS adjunto. JavaScript utilizará este árbol
de análisis incluso cuando los scripts intenten manipular el documento.
El árbol de análisis actúa como el esqueleto de la página, por lo que

asegurarse de que es correcto es bastante importante, pero
desafortunadamente muy a menudo veremos que no lo es. Los
navegadores son en realidad bastante permisivos en lo que muestran.
Incluso cuando faltan etiquetas importantes, no se especifican tipos de

codificación, no hay comentarios válidos, incluso cuando se utilizan
letras mayúsculas y minúsculas de forma inconsistente, los navegadores
mostrarán la página como si estuviera bien formada. Después de años de
batallas entre navegadores creemos que Google Chrome domina sobre
otros, teniendo en cuenta las herramientas de desarrollo que ofrece el
navegador. Simplemente presione el botón derecho del ratón y seleccione
"Inspeccionar elemento" en una página Web para abrir esa herramienta.
Ofrece un panel para la estructura de páginas, otro para ver las
solicitudes que viajan a través de la red y otros paneles para medir el
rendimiento de la página.
Cómo Probar el Código
Sólo tiene que abrir un editor de texto y simplemente escribir su propio

código. Guárdelo todo con una .html y abra la página desde su
navegador. Puede escribir la dirección en la barra de URL o, más
fácilmente, guardar el archivo para que su sistema operativo reconozca
su página Web y la abra con su navegador predeterminado.
Asegúrese de que el código está bien escrito y de que para cada etiqueta
abierta hay la etiqueta de cierre equivalente (si se espera). Te recuerdo
que etiquetas como img no tienen una etiqueta de cierre correspondiente.
Google Chrome es actualmente uno de los navegadores Web más

populares utilizados hoy en día por los desarrolladores. Según
StatCounter, a septiembre de 2019, Google Chrome posee el 63,72% de
la cuota de mercado del navegador en todo el mundo. Para un
desarrollador, Chrome DevTools puede mejorar en gran medida su flujo
de trabajo ayudándole a desarrollar, probar y depurar sus sitios Web
directamente en su navegador. Muchos de ustedes probablemente ya
utilizan Chrome DevTools regularmente, pero echa un vistazo a estos
consejos y trucos adicionales para mejorar su productividad.
Las herramientas para desarrolladores de Google Chrome, también

conocidas como Chrome DevTools, son herramientas de depuración y
creación de sitios Web integradas en su navegador. Proporcionan a los
desarrolladores un acceso más profundo a sus aplicaciones Web y
navegador al permitirle hacer de todo, desde probar la ventana gráfica en
un dispositivo móvil hasta editar un sitio Web en el lugar e incluso medir
el rendimiento de un sitio Web completo o activos individuales.
Hay varias formas de abrir Chrome DevTools, lo que significa que puede
usar el método que más le guste: puede abrirlo desde el menú del
navegador, hacer clic con el botón derecho y seleccionar "Inspeccionar
elemento" o presionar la tecla F12.
Gracias a esta herramienta, puede editar HTML sobre la marcha y

obtener una vista previa de los cambios seleccionando cualquier
elemento, eligiendo un elemento DOM dentro del panel y haciendo
doble clic en la etiqueta de apertura para editarlo. Las etiquetas de cierre
se actualizan automáticamente. Cualquier cambio aparecerá en el
navegador como si el cambio se hubiera realizado realmente en el código
fuente.
Al igual que con la edición de HTML, también puede cambiar CSS en

Chrome DevTools y obtener una vista previa de cómo se verá el
resultado. Este es probablemente uno de los usos más populares de esta
herramienta. Simplemente seleccione el elemento que desea cambiar y,
en el panel de estilos, puede agregar / cambiar las propiedades CSS que
desee, teniendo en cuenta las clases que se han aplicado.
Cuando se ejecuta el depurador de JavaScript, a veces es útil establecer

puntos de interrupción, también conocidos como breakpoint en Ingles.
Puede configurar los puntos de ruptura en Chrome DevTools haciendo
clic en el número de línea donde desea dejar de ejecutar, luego presione
Cmd + R (Ctrl + R) para actualizar la página. La página se ejecutará
directamente en ese punto de interrupción.
Puede probar su sitio Web y las media query para ver si su diseño
receptivo está funcionando en algún lugar ingresando al modo de
dispositivo. De manera alternativa, puede ver a qué resolución se rompe
la página para saber dónde aplicar una media query.
Para ingresar al modo de dispositivo, haga clic en el ícono pequeño de

teléfono y tableta en Chrome DevTools o presione Cmd + Shift + M
(Ctrl + Shift + M). Luego puede elegir qué dispositivo y resolución
emular, agregar una restricción de red e incluso definir la orientación del
dispositivo. Por último, pero no menos importante, ¿alguna vez ha
intentado averiguar de dónde proviene un estilo oculto, por ejemplo, el
selector: hover? En Firefox Developer Tools, puede verlo cuando
selecciona el elemento, pero no en Chrome DevTools. Sin embargo, hay
algo mejor, llamado Toggle Element State, que le permite forzar el
estado de un elemento, como: hover, para que pueda usar el panel de
estilos para ver las propiedades.
Capítulo 3: Elementos de la Página HTML
El doctype <!doctype html>
La especificación HTML5 no solo abarca el pasado, soportando la

sintaxis tradicional de estilo HTML y XHTML, sino que también agrega
una gran cantidad de nuevas características. Aunque HTML5 se aleja de
HTML 4, también es un poco un retiro y una admisión de que tratar de
que todos los desarrolladores Web en Internet escriban su marcado
correctamente es un esfuerzo inútil, especialmente porque pocos
desarrolladores Web están realmente capacitados en este tipo de
tecnología.
HTML5 intenta poner orden en el caos mediante el uso de prácticas

comunes, la adopción de lo que ya se implementa en los navegadores y
la documentación de cómo estos programas de usuario (navegadores u
otros programas que consumen páginas Web) deben manejar nuestro
marcado imperfecto.
Los objetivos de HTML5 son excelentes incluso si la especificación es

amplia y, a menudo, se malinterpreta.
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>Bienvenidos</title>
</head>
<body>
<h1>Bienvenidos a HTML</h1>
<hr>
<p>HTML <em>no es</em> ¡tan difícil de aprender!</p>
<p>Puede poner mucho texto aquí si lo desea. Podríamos seguir y
seguir con un texto de ficción, pero volvamos al libro.</p>
</body>
</html>
<html>
Para todos los propósitos prácticos, cualquier cosa que no sea HTML
estándar en este ejemplo es <! DOCTYPE>. Dados estos cambios
mínimos, por supuesto, HTML5 básico se mostrará inmediatamente
correctamente en los navegadores. Como lo indica su declaración atípica
<! DOCTYPE>, HTML5 no está definido como una aplicación SGML o
XML.
Debido a la base no SGML / XML para HTML, no existe un concepto de

validación en HTML5; en su lugar, se verifica que un documento
HTML5 cumpla con la especificación, lo que proporciona el mismo
valor práctico que la validación. Entonces, la falta de un DTD formal es
algo cuestionable.
<head>
Al interno de un elemento html, la estructura básica de un documento

revela dos elementos: cabeza y cuerpo. El elemento head contiene
información y etiquetas que describen el documento, como su título,
mientras que el elemento body aloja el documento en sí, con el marcado
asociado necesario para especificar su estructura.
La información en el elemento principal de un documento HTML es

muy importante porque se usa para describir o aumentar el contenido del
documento. El elemento se comporta como la primera parte o portada de
un documento. En muchos casos, la información contenida en el
elemento de encabezado es información sobre la página que es útil para
el estilo visual, definir la interactividad, establecer el título de la página y
otra información útil que describe o controla el documento.
Se requiere un solo elemento de título en el elemento de encabezado y se

usa para establecer el texto que la mayoría de los navegadores muestran
en la barra de título. El valor dentro de un título también se usa en el
sistema de historial de un navegador, se registra cuando la página se
marca como favorita y los bots de los motores de búsqueda lo consultan
para determinar el significado de la página. En resumen, es muy
importante tener un título de página sintácticamente correcto, descriptivo
y apropiado.
<body>
Después de la sección del encabezado, el cuerpo de un documento está

delimitado por <body> y </body>. De acuerdo con la especificación
HTML 4.01 y muchos navegadores, el elemento del cuerpo es opcional,
pero siempre debe incluirlo, especialmente porque se requiere en las
variantes de marcado más estrictas. Solo se puede mostrar un elemento
de cuerpo por documento. Dentro del cuerpo de un documento Web hay
una variedad de tipos de elementos. Por ejemplo, los elementos como
párrafos (p) o encabezados (h1-h6).
Los elementos a nivel de bloque generalmente introducen visualmente

saltos de línea. Se pueden utilizar formas especiales de bloques, como
listas desordenadas (ul), para crear listas de información. Dentro de los
bloques no vacíos, se encuentran elementos en línea. Hay numerosos
elementos en línea, como negrita (b), cursiva (i), énfasis (em) y muchos
otros.
Otros tipos diversos de elementos, incluidos los que hacen referencia a

otros objetos como imágenes (img) o elementos interactivos (object), se
encuentran generalmente dentro de bloques, aunque en algunas versiones
de HTML pueden estar presentes individualmente.
Capítulo 4: Las Etiquetas de Texto
Los Títulos
Las etiquetas de encabezado influyen a la hora de clasificarse en Google.

Aunque no es importante para Google, me quedo con un "H1" en la
página y uso los títulos "H2" y "H3" apropiadamente. Mantenga los
títulos ordenados y evite el uso de títulos para elementos de diseño.
Escriba de forma natural con palabras clave en títulos, si procede, y evite
el llenado de palabras clave.
Trate de administrar los encabezados H1 a H6 en una página Web de tal

manera que utilice uno y solo un h1 en una página Web normal a menos
que se le pida específicamente que haga algo diferente. Las etiquetas h1
a h6 identifican diferentes tipos de encabezados, pero pueden tener
diferentes estilos basados en navegadores o CSS. Los títulos h2 a h6 son
de menor importancia y, por lo tanto, los utilizan de acuerdo con la
importancia del texto.
Los Párrafos
De forma predeterminada, el texto dentro del elemento <p> aparece en

una línea e indica un párrafo. Esto causa problemas cuando el texto debe
ajustarse a un formato específico (como por ejemplo, un poema o una
dirección postal). Puede mantener el formato con el elemento <pre>.
Mantenga los espacios y el texto exactamente como los escribió. Los
párrafos HTML preformateados se muestran en una fuente de ancho fijo
(normalmente Courier). A continuación, se muestran dos ejemplos:
<p> Tanto los saltos de línea como los espacios se conservan

mediante la etiqueta previa: </p>
<pre> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent non mauris vel velit semper tincidunt non ac metus.
In hac habitasse platea dictumst.
</pre>
Si omite la etiqueta de cierre </p>, el elemento de párrafo se cerrará

automáticamente en HTML5. Sin embargo, XHTML es más riguroso y
no permite la omisión de etiquetas. Además, puede separar párrafos con
sangría de primera línea en lugar de márgenes mediante la propiedad
CSS con sangría de texto.
Si necesita más espacio en blanco entre párrafos, utilice la propiedad de

margen CSS y no agregue párrafos vacíos, ya que pueden confundir a los
usuarios de tecnologías de asistencia.
Hay una serie de elementos que se pueden utilizar para agregar un

significado semántico al texto contenido en uno de los elementos de
agrupación de texto. Estos elementos se deben usar en texto dentro de un
elemento de agrupación de texto primario, como un párrafo, un
encabezado o una lista. Atrae la atención del usuario con negrita, cursa y
resaltado de hecho hay varias opciones disponibles. Utilice estos
elementos para su significado semántico, no para su presentación visual,
luego cambie el aspecto a sus preferencias usando CSS. El elemento
fuerte se utiliza para dar gran importancia a una palabra o serie de
palabras. El texto incluido en las etiquetas <strong> generalmente se
muestra en negrita por los navegadores Web. El texto envuelto en
etiquetas em enfatiza el texto entre etiquetas. El texto enfatizado, de esta
manera, generalmente se muestra en cursiva por los navegadores Web.
Piense en el elemento de la marca como un resaltador digital. Si un texto
en particular tiene una relevancia única en una página Web, envuélvelo
en dichas etiquetas y atraerá la atención de los visitantes del sitio Web y
de las tecnologías de asistencia.
Capítulo 5: Las Listas
Listas Numeradas
La creación de una lista HTML requiere dos elementos que, cuando se

usan juntos, forman la lista. El primer elemento se utiliza para marcar
cada elemento de la lista. El segundo determina el tipo de lista que está
creando: ordenada o no ordenada. Coloque cada elemento de la lista en
un elemento <li>. Para crear una lista, inserte cada elemento de la lista
en su propio elemento <li>, lo que significa incluir el contenido en una
etiqueta <li> de apertura y una etiqueta </li> de cierre.
Al igual que con cualquier otro elemento HTML, el contenido entre las
etiquetas puede ser tan corto o largo como desee y dividirse en varias
líneas. Incluya los elementos de la lista con el elemento <ol> o <ul>. Si
usa un elemento <ol> para encerrar los elementos de la lista, se
mostrarán como una lista ordenada; si usa <ul>, la lista se mostrará como
una lista sin clasificar. A continuación, le mostramos cómo envolver sus
artículos en un elemento <ol>:
<ol>
<li>Andrea</li>
<li>Marco</li>
<li>Giuseppe</li>
<li>Antonio</li>
</ol>
Listas Con Viñetas
En el caso de una lista desordenada, reemplace <ol> por <ul>:
<ul>
<li>Andrea</li>
<li>Marco</li>
<li>Giuseppe</li>
<li>Antonio</li>
</ul>
La propiedad CSS list-style-type especifica el tipo de marcador del

elemento de lista. El siguiente ejemplo muestra algunos de los
indicadores disponibles:
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<p>Ejemplo de listas no ordenadas:</p>
<ul class="a">
<li>Andrea</li>
<li>Marco</li>
<li>Giuseppe</li>
<li>Antonio</li>
</ul>
<ul class="b">
<li>Andrea</li>
<li>Marco</li>
<li>Giuseppe</li>
<li>Antonio</li>
</ul>
<p>Ejemplo de listas ordenadas:</p>
<ol class="c">
<li>Andrea</li>
<li>Marco</li>
<li>Giuseppe</li>
<li>Antonio</li>
</ol>
<ol class="d">
<li>Andrea</li>
<li>Marco</li>
<li>Giuseppe</li>
<li>Antonio</li>
</ol>
</body>
</html>
¡Ahora vamos a añadir un poco de color! Prueba con este código:
<!DOCTYPE html>
<html>
<head>
<style>
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
margin: 5px;
}
</style>
</head>
<body>
<h1>Listas de estilos con los colores:</h1>
<ol>
<li>Andrea</li>
<li>Marco</li>
<li>Giuseppe</li>
<li>Antonio</li>
</ol>
<ul>
<li>Andrea</li>
<li>Marco</li>
<li>Giuseppe</li>
<li>Antonio</li>
</ul>
</body>
</html>
Capítulo 6: Los Enlaces
Las URL no son solo para escribir en los navegadores; puede usarlos
directamente en su HTML. Y, por supuesto, en el momento adecuado,
deberá vincular desde la página principal de su sitio a otra página con
otra información. Como probablemente pueda adivinar, colocaremos esa
URL directamente en un elemento <a>. He aquí cómo hacerlo:
<a href="pagina2.html"> Pagina 2 </a>
Eso es todo lo que necesita hacer para conectarse a cualquier recurso en

la Web, todo lo que necesita es su localizador uniforme de recursos
(Uniform Resource Locator), que va en el elemento <a> como el valor
del atributo href. Intente agregar este enlace a su página index.html y vea
qué sucede con las herramientas para los desarrolladores de Google.
Para abrir una página en una nueva ventana, debe indicarle al navegador
el nombre de la ventana en la que desea abrirla. Si no le indica al
navegador una ventana específica para usar, el navegador simplemente
abre la página en la misma ventana.
Puede decirle al navegador que use una ventana diferente agregando un

atributo de destino al elemento <a>. El valor del atributo de destino le
dice al navegador la "ventana de destino" de la página. Si usa "_blank"
para el objetivo, el navegador siempre abrirá una nueva ventana para
mostrar la página. Demos un vistazo más de cerca:
<a target="_blank" href="pagina2.html"> Pagina 2 </a>

Rutas Absolutas y Rutas Relativas
Hasta ahora ha utilizado valores href que apuntan a páginas en la misma

carpeta. Los sitios suelen ser un poco más complicados y debe poder
señalar páginas que se encuentran en otras carpetas. Para hacer esto,
rastree la ruta desde su página hasta el archivo de destino. Esto podría
significar ir a una o dos carpetas, pero de cualquier manera terminamos
con una ruta relativa que podemos poner en href.
Para averiguar una ruta relativa para sus enlaces, comience desde la
página que tiene el enlace y luego trace una ruta a través de sus carpetas
hasta que encuentre el archivo al que necesita apuntar. Veamos un par de
rutas relativas:
Apunta a una carpeta secundaria: <a target="_blank"

href="carpeta/pagina2.html"> Pagina 2 </a>
Apunta a una carpeta principal: <a target="_blank"

href="../pagina2.html"> Pagina 2 </a>
Apunta a una carpeta raíz: <a target="_blank"

href="/carpeta/pagina2.html"> Pagina 2 </a>
Probablemente hayas escuchado el conocido "http: //" en infinidades de

ocasiones, pero ¿qué significa eso? Primero, las direcciones Web que
ingresa en su navegador se denominan URL o localizadores uniformes
de recursos (Uniform Resource Locator). Para ubicar cualquier cosa en
la Web, siempre que conozca el servidor que lo aloja y una ruta absoluta
al recurso, puede crear una URL y con un navegador Web puede
recuperarla usando un protocolo, generalmente HTTP. HTTP también se
conoce como Protocolo de transferencia de hipertexto (HyperText
Transfer Protocol).
En otras palabras, es un método acordado para transferir documentos de

hipertexto a través de la Web. Aunque los "documentos de hipertexto"
suelen ser solo páginas HTML, el protocolo también se puede utilizar
para transferir imágenes o cualquier otro archivo que una página Web
pueda realmente necesitar. HTTP es un protocolo simple de solicitud y
respuesta, por lo que con una ruta absoluta como https://www.google.it/
/logo.png, crea una solicitud y el servidor devuelve el archivo o una
respuesta.
Capítulo 7: Las Imágenes
Los navegadores manejan los elementos <img> de forma ligeramente

diferente a otros elementos. Trate un elemento como <h1> o <p>.
Cuando el navegador ve estas etiquetas en una página, todo lo que
necesita hacer es mostrarlas, bastante simple. Pero cuando un navegador
ve un elemento <img>, sucede algo muy diferente: el navegador tiene
que recuperar la imagen antes de que pueda mostrarse en una página.
La mejor manera de entender esto es mirar un ejemplo. Echemos un

vistazo rápido a la página que tiene dos elementos <img>:
<html>
<head>
<title>Página de prueba</title>
</head>
<body>
<h1>Productos</h1>
<h2>Margarita</h2>
<p>
<img src="../images/margarita.jpg">
Una flor clásica
</p>
<h2>Tulipán</h2>
<p>
<img src="../images/tulipan.jpg">
Floraciones realmente espectaculares
</p>
</body>
</html>
Primero que nada, el navegador recupera el archivo, lo muestra y ve que

tiene dos imágenes para recuperar. Luego, tiene que obtenerlos todos del
servidor Web, comenzando con "margarita.jpg". Después de recuperar
"margarita.jpg", el navegador muestra el archivo y luego pasa a la
siguiente imagen: "tulipan.jpg". Ahora el navegador ha obtenido
"tulipan.jpg", por lo que muestra esa imagen y este proceso continúa
para cada imagen de la página.
El atributo src especifica la ubicación de un archivo de imagen para

incluir en la visualización de la página Web. El atributo src se puede
utilizar para más que enlaces relativos; también puede ingresar una URL
en su atributo src. Las imágenes se almacenan en servidores Web al igual
que las páginas HTML, por lo que cada imagen en la Web tiene su propia
URL, al igual que las páginas Web.
Por lo general, querrá usar una URL para una imagen si está apuntando a
una imagen en un sitio Web diferente (recuerde, para enlaces e imágenes
en el mismo sitio, es mejor usar rutas relativas).
Una cosa de la que puede estar seguro en la Web es que nunca se sabe
exactamente qué navegadores y dispositivos se utilizarán para ver sus
páginas. Es probable que los visitantes aparezcan con dispositivos
móviles, lectores de pantalla para ciegos, navegadores que funcionan con
conexiones de Internet muy lentas (solo recuperan texto y no imágenes
de un sitio). ¿Quién sabe? Incluso si un navegador no puede mostrar
imágenes en su página, existe una alternativa.
Puede dar al visitante alguna indicación de qué la información está

presente en la imagen usando el atributo alt del elemento <img>. Hay un
último atributo del elemento <img> que debe conocer; en realidad, son
un par de atributos: el ancho (width) y el alto (height). Puede utilizar
estos atributos para indicarle al navegador, en primer plano, el tamaño de
una imagen en su página, el ancho y el alto, respectivamente.
Capítulo 8: Los div
Contenedor Genérico
Eche un vistazo a las páginas Web: puede ver alguna estructura

identificando algunas secciones lógicas y luego encerrándolas dentro de
un elemento <div>. ¿Qué es una sección lógica? Es solo un grupo de
elementos que están relacionados en la página. Por ejemplo, en un sitio
de comida para mascotas, hay algunos elementos que se usan para el área
de los gatos en la página y otros que se usan para los perros.
Ahora que sabe qué elementos pertenecen a cada sección, puede agregar
algún código para marcar esta estructura. La forma común de hacer esto
es colocar etiquetas <div> de apertura y cierre alrededor de los
elementos que pertenecen a una sección lógica. Simplemente inserte sus
elementos en <div>, lo que indica que todos esos elementos pertenecen
al mismo grupo. Pero no les ha dado ningún tipo de etiqueta que diga
qué significa agrupar, ¿verdad?
Una buena forma de hacer esto es usar un atributo id para proporcionar

una etiqueta única para <div>. Por ejemplo, démosle a los gatos <div>
un ID igual a "gatos" ya los perros <div> un ID igual a "perros". Y no
tienes que detenerte ahí. También es común anidar la estructura.
Por ejemplo, en el sitio ya mencionado, tenemos una sección de gatos y

una sección de perros, y las dos juntas están lógicamente dentro de la
sección de "Mascotas" de la página. Entonces, podríamos poner tanto los
<div> "gatos" y los "perros" en una <div> "animales domésticos".
Aquí hay un ejemplo:
<html>
<head>
<title>Animales domésticos</title>
</head>
<body>
<div id="animales domésticos">
<div id="gatos">
<p>Sección de Gatos</p>
</div>
<div id="perros">
<p>Sección de Perros</p>
</div>
</div>
</body>
</html>
Como se ha visto, <div> es literalmente un contenedor para el contenido

de la secuencia, es decir, una colección de múltiples contenidos
marcados semánticamente que pueden necesitar ser agrupados.
Sin embargo, el <div> está en el extremo opuesto del espectro semántico

de los nuevos elementos estructurales de HTML5. Los nuevos elementos
semánticos (<article>, <section> etc.) capturan con razón gran parte del
territorio de <div> pero aún no lo han desbancado en HTML5.
Debe usar <div> cuando no haya otros elementos semánticamente

apropiados que se ajusten a su propósito. Es probable que su uso más
común sea con fines estilísticos, que consiste en envolver
semánticamente algún contenido con marcado en un contenedor de estilo
CSS. Hágase preguntas sobre su contenido: ¿es parte de la navegación
del sitio? ¿El contenido es secundario al contenido circundante? Si este
contenido se imprimiera en una página sin nada más, ¿tendría sentido?
Deberá evaluar cuidadosamente su contenido, pensar en lo que es y
combinarlo con un elemento apropiado.
Como se indicó anteriormente, el uso de <div> disminuirá a favor de los

nuevos elementos semánticos. Si usa mucho <div> y solo unos pocos
elementos semánticos en sus sitios HTML5, no está realmente
aprovechando lo que HTML5 tiene para ofrecer. Dicho esto, es posible
que deba confiar en <div> cuando realice la transición al mundo de
HTML5.
Un consejo que me gustaría darte es usar <div> con clases nombradas

después de los nuevos elementos semánticos, haciéndote pensar en cómo
usarías los nuevos elementos semánticos sin usarlos realmente. Sin duda,
utilizará <div> con menos frecuencia en HTML5 que en HTML4, pero
sigue siendo un elemento valioso para tener en su kit de herramientas.
Por supuesto, cada vez se elegirán menos, pero aun así tiene sentido
usarlo en algunos contextos.
Capítulo 9: Primera Página
HTML
Ahora que tiene algunas bases más, puede crear su primera página
index.html, con su editor de texto. Puede usar Atom, Bloc de notas,
Sublime Text, IntelliJ Idea, lo que quiera.
Así es como se ve su página si resumimos lo que ha aprendido hasta

ahora:
<html>
<head>
</head>
<body>
<h1>Animales domésticos</h1>
<div id="animales domesticos">
<div id="gatos">
<p>Sección de <strong>Gatos</strong></p>
<img src="../images/gato.jpg">
</div>
<div id="perros">
<p>Sección de <strong>Perros</strong></p>
<img src="../images/perro.jpg">
</div>
</div>
<a href="/quienes-somos.html">Mayor información</a>
</body>
</html>
Copie este código o digitalice en el editor y guarde esta página con el
índice de nombres.html. Abra este archivo en su navegador y compruebe
que ha agregado la carpeta de "imágenes" de la manera correcta,
recuerde lo que dijimos sobre las rutas relativas.
Capítulo 10: CSS en Línea
No subestime el poder de saber cómo funciona HTML. Pronto verá que

la forma en que combina elementos en una página tiene mucho que ver
con los elementos de bloque (block) o en línea (inline). Por el momento,
también puede pensar en bloque versus en línea de esta manera: los
elementos de bloque se utilizan como los bloques de construcción
principales de su página Web, mientras que los elementos en línea
marcan pequeñas piezas de contenido.
Cuando se diseña una página, normalmente comienza con los bloques

más grandes (los elementos del bloque) y luego agrega los elementos en
línea a medida que refina la página. La verdadera recompensa vendrá
cuando consigamos controlar la presentación de HTML con CSS. Una
captura clásica, <img> es un elemento en línea, no hace que se inserten
saltos de línea antes y después de que se muestre el elemento. Por lo
tanto, si hay varias imágenes juntas en su HTML, el navegador las
ajustará una al lado de la otra si la ventana del navegador es lo
suficientemente amplia.
Si las fotos más grandes de su página no están una al lado de la otra, es

porque el navegador no tiene espacio para mostrarlas una al lado de la
otra.
Un navegador siempre muestra un espacio vertical antes y después de un

elemento de bloque y, de hecho, verá que las imágenes están una encima
de la otra sin espacios entre ellas. Este es otro signo <img> es un
elemento en línea.
Entre otras cosas, el código CSS para usar block e inline se puede incluir
directamente en el código HTML gracias a la propiedad style, de la
siguiente manera:
<html>
<head>
</head>
<body>
<div style="display: block" id="animales domesticos">
<div id="gatos">
<img style="display: inline" src="../images/gato.jpg">
</div>
<div id="perros">
</div>
</div>
</body>
</html>
Las reglas CSS se definen como un nombre de propiedad seguido de dos

puntos y, a continuación, un valor de propiedad. Las reglas individuales
se terminan por punto y coma, mientras que la regla final tiene un
período y una coma opcionales.
p{
margin: 10px;
}
img {
margin: 10px;
}
Las reglas CSS se pueden insertar directamente en la mayoría de las

etiquetas HTML configurando el estilo del atributo principal de la regla.
Este uso directo de CSS se denomina "estilo en línea" y es la forma
menos favorable de CSS debido a su estrecha relación con las etiquetas
HTML reales.
En lugar de colocar reglas directamente dentro de los elementos de

marcado, podríamos crear de manera más apropiada una regla que se
vincule a un elemento o conjunto de elementos en particular, lo que se
prestará a una reutilización futura. Similar al uso en línea, una regla de
estilo consta de nombres de propiedad y valores de propiedad separados
por dos puntos, con cada declaración de estilo (par de propiedad / valor)
a su vez separada por un punto y coma.
Las dos reglas utilizadas anteriormente se pueden incrustar en un archivo

CSS o pueden estar presentes directamente en el archivo HTML dentro
de la etiqueta <style> de la siguiente manera:
<html>
<head>
<style>
p, img {
margin: 10px;
}
</style>
</head>
<body>
<div style="display: block" id="animales domesticos">
<div id="gatos">
<img style="display: inline" src="../images/gato.jpg">
</div>
<div id="perros">
</div>
</div>
</body>
</html>
Es posible insertar estas reglas en un archivo CSS para facilitar la

reutilización de las reglas, en este caso, el archivo debe estar vinculado al
código HTML con el elemento <link rel = "stylesheet" type = "text/css"
href = "stile.css" />.
Capítulo 11: CSS Aplicado al Texto
Muchas de las propiedades de CSS están dedicadas a ayudarte a diseñar

tu texto. Con CSS, puede controlar la fuente, el estilo, el color e incluso
las decoraciones que se aplican a su texto, y cubriremos todo esto en este
capítulo. Comenzaremos explorando las fuentes utilizadas para mostrar
sus páginas. Antes de sumergirnos en él, veamos algunas propiedades
que puede usar para especificar y cambiar el aspecto de sus fuentes.
Las fuentes pueden tener un efecto dramático en el diseño de sus

páginas; de hecho, las fuentes se dividen en "familias de fuentes" desde
las cuales puede especificar las fuentes que desea usar en cada elemento
de su página. En la mayoría de las computadoras, solo se instalan unas
pocas fuentes, por lo que debe tener cuidado al elegir las fuentes. En este
capítulo, lo guiaremos a través de todo lo que necesita saber para
especificar y hacer el mejor uso de las fuentes.
El tamaño de la fuente tiene un gran impacto en el diseño y la legibilidad

de sus páginas Web.
Hay varias formas de especificar tamaños de fuente con CSS, y ahora

también le enseñaremos cómo especificar sus fuentes de una manera que
permita a los usuarios aumentar el tamaño de fuente sin afectar su
diseño. Aquí hay un ejemplo:
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: 14px;
}
Como puede ver, estas propiedades hablan bastante, simplemente hemos
definido la familia de fuentes y su tamaño para todo el cuerpo del
archivo html. Puede cambiar el color del texto con la propiedad de color.
Para ello, es útil conocer un poco los colores de la Web y te guiaremos a
través de todos los detalles de color, incluidos los misteriosos "códigos
hexadecimales" de colores.
Está comenzando a ver que hay muchas declaraciones en las que puede
agregar color a sus páginas: colores de fondo, colores de borde e incluso
colores de fuente. Pero, ¿cómo funcionan realmente los colores en una
computadora? Vamos a ver.
Los colores Web se especifican en términos de la cantidad de rojo, verde

y azul que componen el color.
Si usted especifica la cantidad de cada color de 0 a 100% y luego los

suma todos para obtener un color final. Por ejemplo, si agrega 100%
rojo, 100% verde y 100% azul juntos, obtiene blanco. Tenga en cuenta
que, en la pantalla de una computadora, la mezcla de colores da como
resultado un color más claro. Después de todo, ¡es la luz la que estamos
mezclando! Tener algunos colores en su paleta realmente limita la
expresividad de sus páginas, por lo tanto, le mostraremos cómo
especificar colores de manera que pueda usar muchos más de 120
colores; podrás trabajar con una paleta de dieciséis millones de colores.
Los CSS ofrecen algunas formas de especificar los colores: puede

especificar un nombre de color, especificar un color en términos de
porcentajes relativos en rojo, verde y azul, o puede especificar su propio
color usando un código hexadecimal, que es la abreviatura para describir
los componentes rojo, verde y azul del color elegido. En realidad, no
existe un estándar, todos estos formatos son muy utilizados por lo que es
bueno conocerlos todos.
Sin embargo, los códigos hexadecimales son, con mucho, la forma más
común de especificar colores Web, pero recuerde que todas estas formas
de especificar el color le indican al navegador cuánto rojo, verde y azul
se usa en un color.
La forma más sencilla de describir un color en CSS es simplemente usar

su nombre. Pero, como sabéis, son pocos los colores que se pueden
especificar de esta forma, aquí os dejo algunos ejemplos: agua, negro,
azul, fucsia, gris, verde, lima, naranja, blanco y amarillo.
body {
color: yellow;
}
También puede especificar un color como la cantidad de rojo, verde y

azul. Entonces, supongamos que queremos especificar el color naranja
que consiste en 80% de rojo, 40% de verde y 0% de azul:
body {
color: rgb(80%, 40%, 0%);
}
También puede especificar los valores rojo, verde y azul como un valor
numérico entre 0 y 255. Por lo tanto, en lugar de 80% rojo, 40% verde y
0% azul, puede usar 204 rojo, 102 verde y 0 azul.
body {
color: rgb(204, 102, 0);
}
Ahora abordemos esos códigos hexadecimales de aspecto loco. Aquí está
el secreto para entenderlos: cada conjunto de dos dígitos de un código
hexadecimal representa solo el componente rojo, verde y azul del color.
Por tanto, los dos primeros dígitos representan el rojo, los dos siguientes
el verde y los dos últimos el azul. Como esto:
body {
color: #cc6600;
}
Bien, aquí está el segundo secreto para leer códigos hexadecimales: cada
conjunto de dos dígitos representa un número del 0 al 255. El problema
es que, si usáramos números, solo podríamos representar hasta 99 en dos
dígitos, ¿verdad? Bueno, como no querían estar limitados por algo tan
simple como los dígitos del 0 al 9, los informáticos decidieron que
podían representar los 255 valores incluso con la ayuda de algunas letras
(de la A a la F). Recuerde que cada color hexadecimal consta de un
componente rojo, verde y azul.
Lo primero que debe hacer es separarlos y luego convertir cada número

hexadecimal a su equivalente decimal. Ahora que tiene los componentes
separados, puede calcular el valor para cada uno de 0 a 255.
Comencemos con el número hexadecimal del componente rojo: CC. C es

igual a 12, así que toma el número más a la derecha y anota su valor
decimal. Ahora tome el número más a la izquierda y conviértalo a su
valor decimal, luego multiplíquelo por 16. Finalmente, sume estos dos
números y obtendrá que 204 es el equivalente decimal de CC en
hexadecimal. Repita el mismo método con los otros dos valores.
¿Por qué conformarse con fuentes aburridas y ordinarias cuando puede
darles un poco de negrita cuando sea necesario? Todo esto se logra
fácilmente con la propiedad font-weight que puede tomar los valores:
más claro (lighter), normal (normal), negrita (bold) y más audaz (bolder).
Aquí hay un ejemplo:
body {
font-weight: bold;
}
Agregue aún más estilo a su texto con la propiedad de decoración de

texto (text-decoration). Con la propiedad de decoración de texto, puede
decorar su texto con decoraciones que incluyen sobrelíneas (overlines),
subrayados (underlines) y línea a través de (line-through). Y si no obtuvo
suficiente texto parpadeante en los sitios Web en la década de 1990, los
diseñadores de CSS incluso incluyeron el valor de parpadeo como
decoración de texto (aunque afortunadamente no requieren que los
navegadores lo implementen).
¿Quieres centrar tu texto? Fácil con CSS y la propiedad de alineación de

texto (text-align) que puede tomar los siguientes valores: izquierda (left),
derecha (right), centro (center), justificar (justify), inicial (initial),
heredar (inherit). Aquí hay un ejemplo:
body {
text-align: center;
}
Capítulo 12: CSS Aplicado a los div
Posicionar
Con los CSS, normalmente hay muchas formas de hacer un diseño, cada
una con sus propias fortalezas y debilidades. En su lugar, usaremos una
función CSS que le permite colocar con precisión elementos en la página
y se llama posicionamiento absoluto.
Supongamos que tenemos muchos <div>: uno para el encabezado, uno

para el principal, uno para el pie de página y también una barra lateral.
La barra lateral <div> se encuentra debajo del área de contenido
principal, donde nos gustaría tenerla de manera óptima. Comencemos
con una idea de qué hace el posicionamiento absoluto y cómo funciona.
Aquí hay un pequeño CSS para colocar la barra lateral <div> con
posicionamiento absoluto:
#sidebar {
position: absolute;
top: 100px;
right: 200px;
width: 280px;
}
Ahora echemos un vistazo a lo que hace este CSS. Cuando un elemento

está absolutamente posicionado, lo primero que hace el navegador es
eliminarlo por completo de la secuencia. Luego, el navegador coloca el
elemento en la posición indicada por las propiedades en la parte superior
y derecha (pero también puede usarlo en la parte inferior e izquierda). En
este caso, la barra lateral estará a 100 píxeles desde la parte superior de
la página y a 200 píxeles desde el lado derecho de la página. También
estamos estableciendo un ancho en este <div>.
Dado que la barra lateral ahora está absolutamente posicionada, se

elimina del flujo tradicional y se coloca de acuerdo con la propiedad
superior, izquierda, derecha o inferior que especificó. Si la barra lateral
está fuera de flujo, los otros elementos ni siquiera saben que está allí y lo
ignoran por completo.
Supongamos que tenemos otro <div> con el id "pippo". Al igual que con
la barra lateral, colocamos el <div> en una posición precisa en la página.
Todos los elementos subyacentes que se encuentran en el flujo normal de
la página no tienen la menor idea de los elementos colocados
absolutamente superpuestos.
Los elementos posicionados de manera absoluta no tienen ningún efecto

sobre otros elementos, pero lo interesante es que los elementos
absolutamente posicionados pueden superponerse unos sobre otros. Pero
si tiene algunos elementos absolutamente posicionados en la misma
posición en una página, ¿cómo sabe acerca de las capas? En otras
palabras, ¿quién está en la cima? Cada elemento posicionado tiene una
propiedad llamada z-index que especifica su posición.
Comparado con el posicionamiento absoluto, el posicionamiento fijo es

bastante simple. Con el posicionamiento fijo, usted especifica la posición
de un elemento como lo hace con el posicionamiento absoluto, pero la
posición es un desplazamiento desde el borde de la ventana del
navegador en lugar de la página.
El efecto interesante es que una vez que colocas el contenido con la

posición: fija (fixed), permanece exactamente donde lo colocaste y no se
mueve, incluso si te desplazas hacia abajo en la página. Entonces,
supongamos que tenemos un <div> con el ID "cupón".
Puede colocar el <div> fijo en un punto a 300 píxeles de la parte superior
de la ventana gráfica y 100 píxeles del lado izquierdo, colocado de la
siguiente manera:
#coupon {
position: fixed;
top: 300px;
left: 100px;
}
Una vez que haya posicionado un elemento, la belleza viene: desplázate

por... y no se mueve. Redimensione el tamaño de la ventana... y no se
mueve. Ese es precisamente el punto, los elementos de posición fija no se
mueven; están allí para siempre en la misma ubicación, siempre y
cuando se muestre la página.
Este es el último tipo de posicionamiento: posicionamiento relativo. A

diferencia del posicionamiento absoluto y la fija, un elemento
relativamente posicionado sigue formando parte del flujo de página, pero
en el último momento, justo antes de que se muestre el elemento, el
explorador desvía su posición.
Establecer las propiedades superiores (top), derecha (right), inferior

(bottom) e izquierda (left) de un elemento relativamente posicionado
hará que se ajuste lejos de su posición normal. No se ajustará otro
contenido para que se ajuste a los espacios dejados por el elemento. Este
es un ejemplo:
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
Dimensiones y Margen
Cada elemento tiene un ancho y un alto que pueden afectar en gran

medida la apariencia de su página Web. Los anchos y alturas de los
elementos se pueden controlar para crear imágenes de encabezado
grandes, párrafos apilados, columnas de contenido y más. Un elemento
tiene un ancho y una altura predefinidos que apenas son lo
suficientemente grandes para contener su contenido.
Por ejemplo, un párrafo que contiene 5 palabras será lo suficientemente

ancho para contener esas cinco palabras y lo suficientemente alto para el
tamaño de fuente de esas palabras. Al establecer una nueva propiedad de
ancho o alto, puede hacer que un elemento sea tan ancho o alto como
desee. Para hacer un elemento de 200px de ancho y 200px de alto, puede
configurar:
elemento {
width: 200px;
height: 200px;
}
Sin embargo, el relleno y los bordes se agregan al ancho y alto del

elemento.
Agregar 10 píxeles de relleno y un borde de 3 px hace que cualquier

elemento ocupe más espacio. Incluso si establece un ancho de 200 px en
un elemento, el relleno y el borde adicionales harán que su ancho real sea
de 226 px en la página (200 px de ancho + (210 px de relleno) + (23 px
de bordes)).
Este es probablemente el comportamiento más extraño a considerar
cuando se trata de anchos. Por fortuna, CSS ha pensado en eso y con una
línea de código, puede anular este comportamiento:
elemento {
box-sizing: border-box;
}
Al establecer la propiedad box-sizing en border-box en cualquier

elemento, declara que su relleno y bordes deben incluirse en el ancho del
elemento. En el escenario anterior, el elemento solo tendría 200 píxeles
de ancho en total, incluidos el relleno y los bordes. Con eso en mente,
exploraremos las diversas formas de establecer anchos en breve.
Usaremos un ejemplo un poco más complicado para mostrar las diversas

formas en que se puede establecer el ancho para lograr el efecto deseado.
En nuestro ejemplo, tenemos un div que tiene una clase "main" que
contiene un encabezado, un párrafo y varias comillas. El div tiene un
borde punteado y las comillas tienen un fondo verde claro.
<div class="main">
<h1>Compra los productos nuestros</h1>
<p>Somos el fabricante líder mundial de cepillos y estamos muy
orgullosos de ofrecer la más alta calidad de cerdas posible. Vea lo
que nuestros clientes tienen que decir:</p>
<blockquote>"¡Pinceles fantásticos! Realmente muy buenos y
precisos." - Giorgio</blockquote>
<blockquote>"Un artista es tan bueno como sus herramientas.
Muchas gracias, ABC, por este gran producto." - Sara</blockquote>
<blockquote>"¡Yo nunca había usado pinceles tan precisos!" -
Michele</blockquote>
</div>
Aquí están las reglas de estilo CSS:
body {
font-family: Avenir, Arial, sans-serif;
text-align: center;
}
.main {
border: 10px dotted black;
padding: 20px;
margin: 0px auto;
}
h1 {
margin: 0px;
}
blockquote {
padding: 20px;
background-color: lightgreen;
border-radius: 10px;
margin: 10px auto;
text-align: center;
}
Como ha visto en los márgenes, bordes y relleno, los anchos y las alturas
también se pueden establecer en píxeles. Establecer un ancho o alto en
píxeles significa que el ancho o alto siempre será el mismo,
independientemente del tamaño de la pantalla desde la que se visualiza la
página.
¡Tengan cuidado con este aspecto! Establecer un ancho de 600px en el

div principal reducirá automáticamente su ancho, pero también el ancho
de sus elementos secundarios para que todo quede dentro:
.main {
width: 600px;
}
El div está centrado en la página porque tiene un ancho definido y los

márgenes izquierdo / derechos configurados en automático.
Cuando el ancho o el alto de un elemento se establece en em o rem, la

medida será igual al tamaño de fuente del elemento. Por ejemplo, si el
tamaño de fuente de un elemento es 16px, 1em de ancho sería igual a
16px. Dado que el tamaño de fuente del div principal es por defecto
16px, tendríamos que establecer su ancho en 37.5em para obtener un
ancho de 600 píxeles (porque 600/16 = 37.5).
.main {
width: 37.5em;
}
Cuando el ancho o el alto de un elemento se establece como un

porcentaje, el valor será relativo al ancho o alto del bloque contenedor.
Supongamos que un div tiene 700 px de ancho, un párrafo dentro de la
div con un ancho del 50% sería finalmente de 350 px de ancho.
Recientemente establecemos el ancho de nuestro div por encima de
37,5em. Mantenemos ese valor y establecemos los anchos de cuota de
bloque del bloque en 50%.
Las dimensiones del bloque se reducirán a la mitad de la anchura del div

principal.
.main {
width: 37.5em;
}
blockquote {
width: 50%;
}
Muchos sitios Web ahora responden, lo que significa que responden

según el tamaño de la pantalla del usuario. Por ejemplo, si está en su
computadora y reduce gradualmente el tamaño de la ventana del
navegador, notará que la mayoría de los elementos también se volverán
más pequeños.
Es posible que desee establecer valores que nunca permitan que el ancho
o el alto de un elemento superen o disminuyan un determinado valor. Las
propiedades min-width, max-width, min-height y max-height son
excelentes para este propósito.
Las propiedades de ancho máximo (max-width) y alto máximo (max-

height) asegurarán que un elemento nunca sea más ancho o más alto que
el valor establecido, incluso si hay suficiente espacio en la página para
ocupar más espacio.
Las propiedades de ancho mínimo (min-width) y altura mínima (min-

height) garantizarán que un elemento nunca sea más estrecho o más
corto que el valor establecido, independientemente del tamaño de la
ventana del navegador. Estas propiedades tienen mucho más sentido
cuando se utilizan en el navegador, así que te animo a que las pongas en
práctica en tu página Web.
Capítulo 13: Imágenes y CSS
Las imágenes aprovechan todo lo ya resaltado en el capítulo anterior, con

respecto a la ubicación, el tamaño, los rellenos y los márgenes. Estas son
algunas propiedades de CSS que pueden hacer que su sitio Web sea más
atractivo. Utilice la propiedad border-radius para crear imágenes
redondeadas:
img {
border-radius: 8px;
}
En este caso hemos redondeado ligeramente los bordes de la imagen,

pero podemos incrementar este valor hasta obtener una imagen circular:
img {
border-radius: 50%;
}
Para crear un marco alrededor de todas sus imágenes en una página,
puede jugar con la propiedad de borde:
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
Mientras que el código HTML será:
<img src="flor.jpg" alt="Flor con abeja">

Imágenes Responsivas
Las imágenes responsivas se adaptan automáticamente a los tamaños de

pantalla, esta tecnología también es ampliamente utilizada para
dispositivos móviles como teléfonos inteligentes y tabletas. Agregue
estas reglas CSS y redimensione la ventana del navegador para ver el
efecto:
img {
max-width: 100%;
height: auto;
}
Si también desea centrar la imagen, puede utilizar estas reglas:
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
Eso es muy simple, ¿verdad? Es genial leer estas reglas de estilo y saber
lo que hacen, estoy seguro de que te habría costado más al principio de
este libro.
Capítulo 14: El Mundo Real
En este capítulo queremos mostrarle cómo puede verse una página

HTML completa con CSS y JavaScript. Aquí está el código HTML:
<html lang="es">
<head>
<title>Página completa en HTML5</title>
<meta name="description" content="Página HTML completa: solo
contenido textual">
<meta name="keywords" content="HTML5, pagina, CSS">
<meta name="author" content="Tu nombre">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta charset="UTF-8" />
<link rel="stylesheet" href="stile.css">
</head>
<body>
<header>
<h1>Página en HTML5</h1>
</header>
<nav>
<ul>
<li><a href="#intro">Introducción</a></li>
<li><a href="#Web">La Web</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#js">JavaScript</a></li>
</ul>
</nav>
<section id="intro">
<h2>Introducción</h2>
<article>
<h3>La Web nació para compartir información</h3>
<p>La Web è el motor de la nueva generación, un vasto
conjunto de contenidos distribuidos por la red.<br/> Estos
<strong>contenidos</strong> son los verdaderos protagonistas y,
habrás aprendido, que HTML fue creado para presentarlos de una
manera <em>legible</em> al hombre y <em>indexable</em> de las
máquinas.</p>
</article>
</section>
<footer>
<p>© Tu nombre</p>
</footer>
<!—Código JavaScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.js">
</script>
<script>
$(document).ready(function() {
console.log("Bien hecho!");
});
</script>
</body>
</html>
Cree un archivo con la extensión .html con el siguiente texto y cree un

archivo con la extensión .css con el siguiente código en el mismo nivel:
/*tipografía*/
h1 {
font-family: 'Raleway', sans-serif;
font-style: normal;
font-weight: 900;
}
h2 {
font-style: normal;
font-weight: 700;
}
h3 {
font-style: normal;
font-weight: 500;
}
h4,
h5,
h6 {
font-style: normal;
font-weight: 300;
}
html {
font-family: 'Lato', sans-serif;
font-style: normal;
font-weight: 300;
}
/*elementos*/
html {
padding: 0.8em;
background-color: #269;
background-image: linear-gradient(red 2px, transparent 2px),
linear-gradient(90deg, white 2px, transparent 2px), linear-
gradient(rgba(255, 255, 255, .3) 1px, transparent 1px), linear-
gradient(90deg, rgba(255, 255, 255, .3) 1px, transparent 1px);
background-size: 100px 100px, 100px 100px, 20px 20px, 20px
20px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px
}
body {
font-size: 1em;
}
nav,
section,
footer {
border: 1px solid grey;
margin: 5px;
padding: 8px;
background-color: #FFF;
opacity: 1;
}
header,
footer {
margin: 5px;
padding: 8px;
background-color: #FFF;
opacity: 0.8;
}
nav {
background-color: #99ccff;
color: #000;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin: 5px;
}
nav ul li a {
text-decoration: none;
font-variant: small-caps;
}
nav ul li a:link,
nav ul li a:visited {
color: #000
}
nav ul li a:hover,
nav ul li a:active {
color: #0066cc
}
aside {
float: right;
}
h1,
h2,
h3,
h4 {
margin-left: 5px;
}
Por último, es posible que haya notado que también hemos incluido
alguna interacción para dejar volar su imaginación y permitirle imaginar
todo lo que puede hacer con JavaScript. Al final de la etiqueta <body>
también agregamos algo de interacción con JavaScript y, de manera
particular, con jQuery.
Si has configurado todo correctamente, al abrir su página verá un

mensaje de su navegador. Esto es solo una muestra de todo lo que puede
hacer con JavaScript y con jQuery.

HTML - Smith, Adam J

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

HTML - Smith, Adam J

Cargado por

Copyright:

Formatos disponibles

En términos simples, una página Web (o documento HTML) es un

Hipertexto: Hipertexto en el que haga clic para cambiar entre

Marcado: etiquetas de marcado que aplican convenciones de

Lenguaje: Una referencia al hecho de que HTML se considera

Cuando se piensa en el alcance de la programación de equipos,

Por el contrario, HTML es un lenguaje de programación interpretado.

Las etiquetas pueden tener atributos que le permiten personalizar una

Puede copiar el código que aparece abajo, pegarlo en su editor y

HTML es un lenguaje de marcado muy simple y aunque hay casi 100

Las 10 etiquetas HTML de la siguiente lista se utilizan para el formato

<h1>, <h2>, <h3>... <h6> Encabezados

En primer lugar, veremos HTML5, que es la quinta versión del lenguaje

HTML5 está diseñado principalmente para soportar páginas Web más

Por ejemplo, HTML5 redefinió algunos elementos HTML, como y los

Ahora veamos CSS, que significa Hojas de estilo en cascada, ahora en su

Con CSS3, también puede implementar fácilmente sombras paralelas y

Las páginas Web basadas en CSS3 se pueden hacer fácilmente sensibles

Con el fin de satisfacer a todos los usuarios de Internet en el mundo, los

Para los programadores inexpertos, el desarrollo en HTML5/CSS3 será

Para escribir una página HTML no necesita descargar ningún software,

A veces, el navegador recargará la página desde su caché de todos

Algunos editores proporcionan herramientas de soporte para

Además de esta considerable ventaja, es un software multiplataforma

Cuando un explorador lee un documento marcado, como el ejemplo

El árbol de análisis actúa como el esqueleto de la página, por lo que

Incluso cuando faltan etiquetas importantes, no se especifican tipos de

Sólo tiene que abrir un editor de texto y simplemente escribir su propio

Google Chrome es actualmente uno de los navegadores Web más

Las herramientas para desarrolladores de Google Chrome, también

Gracias a esta herramienta, puede editar HTML sobre la marcha y

Al igual que con la edición de HTML, también puede cambiar CSS en

Cuando se ejecuta el depurador de JavaScript, a veces es útil establecer

Para ingresar al modo de dispositivo, haga clic en el ícono pequeño de

La especificación HTML5 no solo abarca el pasado, soportando la

HTML5 intenta poner orden en el caos mediante el uso de prácticas

Los objetivos de HTML5 son excelentes incluso si la especificación es

Debido a la base no SGML / XML para HTML, no existe un concepto de

Al interno de un elemento html, la estructura básica de un documento

La información en el elemento principal de un documento HTML es

Se requiere un solo elemento de título en el elemento de encabezado y se

Después de la sección del encabezado, el cuerpo de un documento está

Los elementos a nivel de bloque generalmente introducen visualmente

Otros tipos diversos de elementos, incluidos los que hacen referencia a

Las etiquetas de encabezado influyen a la hora de clasificarse en Google.

Trate de administrar los encabezados H1 a H6 en una página Web de tal

De forma predeterminada, el texto dentro del elemento <p> aparece en

<p> Tanto los saltos de línea como los espacios se conservan

Si omite la etiqueta de cierre </p>, el elemento de párrafo se cerrará

Si necesita más espacio en blanco entre párrafos, utilice la propiedad de

Hay una serie de elementos que se pueden utilizar para agregar un

La creación de una lista HTML requiere dos elementos que, cuando se

En el caso de una lista desordenada, reemplace <ol> por <ul>:

La propiedad CSS list-style-type especifica el tipo de marcador del

¡Ahora vamos a añadir un poco de color! Prueba con este código:

<a href="pagina2.html"> Pagina 2 </a>

Eso es todo lo que necesita hacer para conectarse a cualquier recurso en

Puede decirle al navegador que use una ventana diferente agregando un

<a target="_blank" href="pagina2.html"> Pagina 2 </a>

Hasta ahora ha utilizado valores href que apuntan a páginas en la misma

Apunta a una carpeta secundaria: <a target="_blank"

Apunta a una carpeta principal: <a target="_blank"

Apunta a una carpeta raíz: <a target="_blank"