Scribd
Cargar
83 vistas58 páginas

Presentación 8 - Construir Una Página Web Utilizando HTML y CSS

1) El documento describe los primeros pasos para crear un sitio web básico con HTML y CSS, incluyendo la instalación de herramientas como Visual Studio Code y la adición de código HTML para la estructura. 2) Explica elementos importantes del código HTML como <head>, <title>, <meta>, y <link> y cómo usarlos. 3) Resalta la importancia de los metadatos y describe algunos ejemplos como el autor, la descripción y Open Graph.

Cargado por

victor
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 PPTX, PDF, TXT o lee en línea desde Scribd
83 vistas58 páginas

Presentación 8 - Construir Una Página Web Utilizando HTML y CSS

1) El documento describe los primeros pasos para crear un sitio web básico con HTML y CSS, incluyendo la instalación de herramientas como Visual Studio Code y la adición de código HTML para la estructura. 2) Explica elementos importantes del código HTML como <head>, <title>, <meta>, y <link> y cómo usarlos. 3) Resalta la importancia de los metadatos y describe algunos ejemplos como el autor, la descripción y Open Graph.

Cargado por

victor
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 PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 58

CURSO DESARROLLO DE APLICACIONES

FULL STACK JAVASCRIPT TRAINEE


CONSTRUIR UNA WEB
CON HTML Y CSS

Es mucho trabajo crear un sitio web profesional, así que si eres


nuevo en el desarrollo web, te animamos a que empieces poco
a poco.

No crearás otro Facebook de inmediato, pero no es difícil tener


tu propio sitio web sencillo en línea, así que comenzaremos por
ahí.

El primer paso es tener las herramientas necesarias y en este


camino, comenzaremos instalando VSCODE
CONSTRUIR UNA WEB
CON HTML Y CSS
Incorporación de código HTML
Visual Studio Code proporciona compatibilidad básica para la programación de HTML desde
el principio. Incluye resaltado de sintaxis, finalizaciones inteligentes con IntelliSense y
formato personalizable.

Abra el sitio web en Visual Studio Code y, a continuación, abra el archivo index.html
seleccionando el archivo index.html en la ventana Explorador.

En la página index.html, escriba html:5 y presione Entrar. El código de plantilla HTML5 se


agrega al archivo.

Nota: Si el código de plantilla HTML5 no se agrega al archivo index.html, pruebe a cerrar y


volver a abrir el archivo.

Edite el código para que se parezca al siguiente y, a continuación, guárdelo presionando


Control+S en Windows o Comando+S en macOS.
CONSTRUIR UNA WEB
CON HTML Y CSS
La estructura del código debiese ser esta: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>
CONSTRUIR UNA WEB
CON HTML Y CSS
Ha habido diferentes versiones de HTML. El El juego de caracteres (charset) para UTF-8 puede parecer
tipo de documento <!DOCTYPE html> insignificante, pero es fundamental para establecer cómo interpretan los
indica que se trata de código de HTML5. caracteres los equipos. Si faltan los metadatos del juego de caracteres,
la seguridad podría ponerse en peligro.
Si bien no vamos a profundizar demasiado en
el significado de todos los elementos HTML, Hay bastante historia e información técnica detrás del atributo charset,
sí señalaremos algunos elementos pero lo importante de este ejercicio es que el código reemplazable de
importantes. La etiqueta meta indica VS Code proporciona algunos valores de manera predeterminada.
información de metadatos que normalmente
no será visible para el usuario que visualice la
página, a menos que vea el código fuente en
su explorador. Los elementos o etiquetas meta
proporcionan información descriptiva sobre la
página web. Por ejemplo, ayuda a los motores
de búsqueda a procesar la información de las
páginas web que se devuelve en los
resultados de la búsqueda.
CONSTRUIR UNA WEB
CON HTML Y CSS
Edición del elemento head Para aplicar estilo a los elementos HTML de la página, podría escribir el código
El título de una página web aparece en la CSS directamente en el encabezado del sitio web, lo que se denomina CSS
parte superior de la ventana del explorador y interno. Pero un procedimiento recomendado consiste en separar la estructura
es significativo por varios motivos. Por HTML y los estilos CSS.
ejemplo, el título lo usan y lo muestran los
motores de búsqueda. Vamos a agregar un Tener una página CSS independiente se denomina CSS externa. El código suele
título. ser más fácil de leer cuando es conciso y compartimentado.

En Visual Studio Code, modifique el Puede usar una o varias hojas de estilos externas para dar servicio a varias
elemento <title> para que se parezca al páginas web. En lugar de actualizar cada página HTML con código CSS
ejemplo siguiente. duplicado, puede realizar cambios en un único archivo CSS y hacer que esas
actualizaciones se apliquen a todas las páginas dependientes.
…
<head> Vamos a vincular a una hoja de estilos externa.
<meta charset="utf-8">
<title>Simple website</title> En Visual Studio Code, agregue una línea en blanco después del elemento
… <title>, escriba link y presione Entrar. VS Code debe agregar la siguiente línea
al archivo index.html. <link rel="stylesheet" href="">
CONSTRUIR UNA WEB
CON HTML Y CSS
Elementos que pueden ser usados dentro de un elemento <head>: <title>,
<base>, <link>, <style>, <meta>, <script>, <noscript>

Title: Indica el título del documento.

Base: Especifica la dirección URL base que se utilizará para todas las direcciones URL relativas contenidas dentro de
un documento.

Link:  Especifica la relación entre el documento actual y un recurso externo. Los usos posibles de este elemento
incluyen la definición de un marco relacional para navegación.

Style: Es el elemento encargado de indicar la información de estilo.

Meta: De "metainformation" - metainformación. Sirve para aportar información sobre el documento.

Script: Se utiliza para insertar o hacer referencia a un script ejecutable dentro de un documento HTML o XHTML.

NoScript: Aporta contenidos alternativos al elemento script. las aplicaciones de usuario que no soporten scripts deben
mostrar en su lugar el contenido de este elemento.
CONSTRUIR UNA WEB
CON HTML Y CSS
Relevancia de los metadatos en <head>
Los metadatos son datos que describen datos, y HTML tiene una forma «oficial» de introducir metadatos en un documento — el
elemento <meta>.

Hay muchos diferentes tipos de elementos <meta> que se pueden incluir en el <head> de tu página, pero no vamos a intentar
explicarlos todos en esta etapa porque resultaría demasiado confuso.

Los metadatos comunes en un sitio web son:

La codificación de caracteres de tu documento


El ejemplo que vimos arriba incluía esta línea:

<meta charset="utf-8">
CONSTRUIR UNA WEB
CON HTML Y CSS
Añadir un autor y descripción
Muchos elementos <meta> incluyen atributos name y content:

Name especifica el tipo de metadato del que se trata; es decir, qué tipo de
información contiene.

Content especifica el contenido del metadato en sí.


Dos de esos metadatos que resultan útiles de incluir en tu página definen al
autor de la página y proporcionan una descripción concisa de la página.

Veamos un ejemplo:

<meta name="author" content=“Pedro Páramo">


<meta name="description" content=“Bienvenidos al surrealismo
Mágico.">
CONSTRUIR UNA WEB
CON HTML Y CSS
Existe un tipo de metadatos que ha cobrado relevancia últimamente y es
Open Graph Data es un protocolo de metadatos que Facebook inventó
para proveer metadatos más ricos para los sitios web. Un ejemplo sería:

Así se representa:
<meta property="og:image"
content="https://developer.mozilla.org/static/img/ope
ngraph-logo.png">
<meta property="og:description" content="The
Mozilla Developer Network (MDN) proporciona
información
sobre tecnologías Open Web, incluidas HTML, CSS
y APIs para ambos sitios web
y aplicaciones HTML5. También documenta
productos Mozilla, como el sistema operativo
Firefox.">
<meta property="og:title" content="Mozilla
Developer Network">
CONSTRUIR UNA WEB
CON HTML Y CSS
Actualice href a main.css y guarde el archivo presionando Edite el código, o cópielo y péguelo, para que tenga un aspecto similar
Control+S en Windows o Comando+S en macOS. al siguiente ejemplo.

HTML
<!DOCTYPE html>
Copiar <html lang="en" dir="ltr">
... <head>
<head> <meta charset="utf-8">
<meta charset="utf-8"> <title>Simple website</title>
<title>Task List</title> <link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="main.css"> </head>
</head> <body>
... <h1>Task List</h1>
<p id="msg">Current tasks:</p>
Edición del cuerpo <ul>
Para empezar, ahora se rellenará el elemento body. <li class="list">Add visual styles</li>
<li class="list">Add light and dark themes</li>
Agregue un elemento <h1> de encabezado, seguido de un elemento <li>Enable switching the theme</li>
<p> de párrafo y, a continuación, cree una lista desordenada <ul> </ul>
que contenga varios elementos <li> de elementos de lista. </body>
</html>
CONSTRUIR UNA WEB
CON HTML Y CSS
El lenguaje HTML es un lenguaje de marcado que se construye a partir de etiquetas html.

Cuando escribes código en HTML, estás escribiendo etiquetas HTML. Todas las etiquetas HTML están hechas con un número
de partes específicas, incluyendo:

1.- El carácter “menor que” <


2.- Una palabra o carácter que determina qué etiqueta se está escribiendo
3.- Cualquier número de atributos HTML que se quiera usar, escritos de la forma nombre =”valor”
4.- El carácter “mayor que” >

La lista completa de etiquetas la puedes revisar fácilmente en:

https://developer.mozilla.org/es/docs/Web/HTML/Element
CONSTRUIR UNA WEB
CON HTML Y CSS

Estas son algunas de las etiquetas más utilizadas,


además de las que crea el markup básico de Emmet.

A propósito de emmet, es un plugin que está en editores de


texto
como vscode y que te permiten escribir html y css de forma
más sencilla.
CONSTRUIR UNA WEB
CON HTML Y CSS
Se puede usar un atributo ID (que se usa en <p>) para aplicar estilo a
un elemento, mientras que el atributo de clase (que se usa en el
elemento <li>) sirve para aplicar un estilo a todos los elementos de la
misma clase.

Antes del paso siguiente, asegúrese de que el archivo se guarda


presionando Control+S o Comando+S.

Abrir en el explorador
Puede obtener una vista previa local de la página web si abre el archivo
HTML en un explorador. En lugar de una dirección de sitio web que
comienza con https://, el explorador apunta a la ruta de acceso del
archivo local. Por ejemplo, es posible que la ruta de acceso sea similar a
la siguiente:
archivo:///Usuarios/nombre_de_usuario/Escritorio/public/index.html.

Para obtener una vista previa con Visual Studio Code, haga clic con el
botón derecho en index.html y seleccione Abrir en el explorador
predeterminado o seleccione el archivo index.html y use el método
abreviado de teclado
CONSTRUIR UNA WEB
CON HTML Y CSS
Visualización de la página con las herramientas de desarrollo
Puede inspeccionar una página web mediante las herramientas
para desarrolladores del explorador. Vamos a probarlo.

Abra Herramientas de desarrollo.

En Edge, presione el método abreviado de teclado de


Herramientas de desarrollo, que es F12 o Ctrl-Mayús+I.
También puede ver Configuración y más presionando ALT+X y
seleccionando Herramientas de desarrollo.

En Chrome, presione el método abreviado de teclado de


Herramientas de desarrollo, que es Opción+Comando+I o F12.

Haga clic en la pestaña Elements (Elementos).


CONSTRUIR UNA WEB
CON HTML Y CSS
Desplácese con el mouse sobre los elementos HTML y expanda el
contenido de los distintos elementos.

La pestaña Elementos de las herramientas de desarrollo muestran el


modelo de objetos de documento (DOM) tal como se representa en el
explorador. Al depurar, a menudo es importante ver cómo el explorador
interpreta el código fuente.
CONSTRUIR UNA WEB
CON HTML Y CSS
Aplicación de estilos al código HTML con CSS
CSS externas
En la unidad anterior sobre HTML, ha creado un vínculo a
as Hojas de estilos en cascada (CSS) le permiten especificar la
un archivo CSS externo desde HTML.
apariencia de la página. La idea básica es definir cuál debe ser el estilo
para los elementos que se usan en las páginas HTML. Por ejemplo,
...
puede seleccionar un cuadro y aplicarle esquinas redondeadas o
<head>
asignarle un fondo degradado. También puede utilizar CSS para
<meta charset="utf-8">
especificar el aspecto y la respuesta de los hipervínculos cuando se
<title>Task Timeline</title>
interactúa con ellos (aunque la dirección de destino de los hipervínculos
<link rel="stylesheet" href="main.css">
se define en el código HTML). Puede aplicar estilos a elementos
...
específicos o a todos los elementos de un tipo específico, o puede usar
clases para especificar estilos que se pueden aplicar a varios elementos
Una ventaja de las CSS externas es que se pueden vincular
diferentes. En CSS3, también puede realizar efectos de animación
varias páginas HTML al mismo archivo CSS. Si realiza un
sofisticados.
cambio en la CSS, se actualizará el estilo de cada página.
El diseño de un archivo HTML para la estructura de la
En este ejercicio, aplicará estilos CSS a los elementos de la página
página, de un archivo CSS para el estilo y de un archivo
HTML, luego agregará algo de código CSS para definir los temas
JavaScript para los eventos o la interacción se denomina
claros y oscuros y, por último, comprobará los resultados en las
separación de intereses.
herramientas de desarrollo del explorador.
CONSTRUIR UNA WEB
CON HTML Y CSS
Reglas de CSS
Imagine que tiene una llave muy antigua y una serie de puertas a lo Puede usar reglas de CSS para aplicar estilo al código
largo de un pasillo extenso. En primer lugar, selecciona una puerta y la HTML. El elemento de lista sin ordenar ul {} es un selector
abre con la llave. Tras entrar en una habitación, puede decorarla como que selecciona el elemento HTML <ul> al que aplicar
quiera. Puede pintar las paredes de azul o elegir madera para los suelos. estilos. La declaración es font-family: helvetica y determina
Selecciona una habitación y define reglas para el aspecto que debe cuál debe ser el estilo. El nombre de la propiedad es font-
tener. Puede aplicar el mismo estilo a varias salas, lo mismo que en family y el valor es helvetica. Juntos, la propiedad y el valor
CSS. constituyen un par clave-valor.

En Visual Studio Code, abra el archivo main.css y escriba lo siguiente. Lo que se selecciona es un elemento existente que se ha
definido antes en HTML (<body> y <ul>). Como verá a
```css continuación, puede definir nombres personalizados propios
body { para los elementos.
font-family: monospace;
}

ul {
font-family: helvetica;
}
```
CONSTRUIR UNA WEB
CON HTML Y CSS
Selectores

Los identificadores y los selectores de clase permiten aplicar estilos a Los atributos personalizados anteriores se
los nombres de atributo personalizados en el código HTML. Un denominan .list y #msg.
identificador se usa para definir el estilo de un elemento, mientras que
las clases pueden aplicar estilos a varios elementos. El prefijo de punto para .list indica que se trata
Copie el código siguiente en el archivo CSS, después del selector ul que de un selector de clases.
agregó anteriormente.
Cada elemento HTML que contiene un
li { atributo class establecido en "list" heredará los
list-style: circle; estilos definidos dentro de este selector.
}
El prefijo del signo de la libra para #msg
.list { indica que se trata de un selector de Id.
list-style: square;
} El elemento HTML que tiene su atributo id
establecido en "msg" heredará los estilos
#msg { definidos dentro de este selector.
font-family: monospace;
}
CONSTRUIR UNA WEB
CON HTML Y CSS
Visualización en un explorador Incorporación de un tema claro
Para obtener una vista previa con Visual Studio Code, haga clic con el A continuación, agregará compatibilidad con un tema de color para
botón derecho en index.html y seleccione Abrir en el explorador el sitio web. Comience por definir un tema de color claro mediante
predeterminado. códigos de color hexadecimal.

La página web se abre en el explorador predeterminado. En el archivo CSS, agregue el código siguiente al final del archivo.

Captura de pantalla del sitio web con estilos de fuente aplicados .light-theme {
color: #000000;
¿Los estilos de fuente son los que esperaba ver? Es interesante cómo background: #00FF00;
los estilos se aplican en cascada de body a h1. No se ha definido nada }
para h1, por lo que hereda el estilo de body. Pero li tiene prioridad
sobre la etiqueta body porque se definió específicamente un estilo para En este ejemplo, #000000 especifica el negro para el color de
ella. fuente y #00FF00 especifica el verde para el color de fondo. En el
archivo HTML, actualice el elemento <body> con un nombre de
clase, light-theme, para que el selector de clases del tema claro
aplique correctamente los estilos.

<body class="light-theme">
CONSTRUIR UNA WEB
CON HTML Y CSS
Visualización en un explorador
Para obtener una vista previa con Visual Studio Code, haga clic con el botón derecho en index.html y
seleccione Abrir en el explorador predeterminado.

La página web se abre en el explorador predeterminado. Observe que aparece el tema claro con un fondo
verde.
CONSTRUIR UNA WEB
CON HTML Y CSS
Visualización de CSS aplicado
Abra Herramientas de desarrollo.

En Edge, presione el método abreviado de teclado de Herramientas de desarrollo, que es F12 o Ctrl-Mayús+I.
También puede ver Configuración y más presionando ALT+X y seleccionando Herramientas de desarrollo.

En Chrome, presione el método abreviado de teclado de Herramientas de desarrollo, que es Opción+Comando+I


o F12.

Haga clic en la pestaña Styles (Estilos).


Haga clic en la pestaña Elements (Elementos).
Mantenga el puntero sobre los distintos elementos HTML y, a medida que seleccione algunos elementos, observe
cómo las herramientas de desarrollo indican qué estilos se aplican.

Seleccione el elemento <body>. Observe el elemento light-theme aplicado.

Expanda la lista sin ordenar y seleccione un elemento <li>. Observe el estilo personalizado font-family: helvetica;,
que reemplaza el estilo del elemento <body>.
CONSTRUIR UNA WEB
CON HTML Y CSS
CONSTRUIR UNA WEB
CON HTML Y CSS
Incorporación de un tema oscuro
En el tema oscuro, establecerá la infraestructura como preparación para la próxima unidad, en la que habilitará el
cambio de tema en la página web.

Para agregar compatibilidad con un tema oscuro para su CSS, siga estos pasos.

Agregue algunas constantes a la raíz de la página en la parte superior del archivo CSS.

:root {
--green: #00FF00;
--white: #ffffff;
--black: #000000;
}
El selector :root representa el elemento <html> en la página HTML. Para este tipo de tarea, se recomienda definir
un conjunto de variables de CSS globales en el elemento :root. En este ejemplo, ha definido tres variables de color
que están asociadas a la raíz de la página.
CONSTRUIR UNA WEB
CON HTML Y CSS
Al final del archivo CSS, agregue el selector dark-theme y actualice el selector light-theme.

.light-theme {
--bg: var(--green);
--fontColor: var(--black);
}

.dark-theme {
--bg: var(--black);
--fontColor: var(--green);
}
En el código anterior, ha definido algunas variables nuevas, bg y fontColor, para especificar el color de
fondo y el color de la fuente. Use la palabra clave var para especificar las variables que se van a usar como
valores de propiedad. Los valores se establecen anteriormente en el selector :root.
CONSTRUIR UNA WEB
CON HTML Y CSS
A continuación, en el archivo CSS, agregue lo siguiente después del selector :root, reemplazando el selector body actual.

css

Copiar
*{
color: var(--fontColor);
font-family: helvetica;
}

body {
background: var(--bg);
}
El selector * es un selector universal que se aplica a todos los elementos de página (excepto si un selector de elementos más específico lo
invalida). En este ejemplo, se usa el selector * para establecer la propiedad color predeterminada para todos los elementos de página. En el
caso de las propiedades color y background, se especifican las variables definidas en los selectores de los temas claro y oscuro.
CONSTRUIR UNA WEB
CON HTML Y CSS
Quite el selector #msg de su CSS para que podamos aplicar la misma
fuente a todos los elementos.

Para ver el tema oscuro, abra el archivo index.html y edite


manualmente el tema predeterminado del elemento <body> en tema
oscuro (dark-theme) y, a continuación, vea la página en el explorador.

Edite el elemento <body> para volver a cambiar el valor


predeterminado al tema claro.
CONSTRUIR UNA WEB
CON HTML Y CSS
Adición de interactividad con JavaScript

JavaScript (o ECMAScript) es un lenguaje de programación que le


ayuda a agregar interactividad a las páginas web. Por ejemplo, puede
usar JavaScript para definir el evento o comportamiento que se va a
producir cuando un usuario selecciona un botón, como abrir una
ventana emergente. Con JavaScript, puede agregar o quitar contenido
de la página web, como texto, sin volver a cargarla. Como desarrollador
web, puede usar el explorador web para probar y obtener información
sobre los scripts.

En esta unidad, configurará un archivo JavaScript de ejemplo para la


aplicación web. Creará un botón para cambiar entre los temas claro y
oscuro y, luego, conectará el botón al código JavaScript que realiza el
cambio de tema propiamente dicho. Una vez hecho esto, comprobará el
proyecto terminado en las herramientas de desarrollo del explorador.
CONSTRUIR UNA WEB
CON HTML Y CSS
Vínculo a JavaScript

Al igual que CSS, puede agregar JavaScript directamente a una


página HTML, pero es recomendable guardar JavaScript en un
archivo independiente, lo que facilita la reutilización del código
JavaScript en varias páginas web. Por ejemplo, podría crear una
alerta emergente agregando <script>alert('Hello
World')</script> en cualquier parte del cuerpo de las páginas
web; sin embargo, es mejor agregar el código JavaScript a un
archivo independiente que se pueda vincular a todos los
archivos que necesiten su funcionalidad personalizada. La
etiqueta de script HTML <script> nos permitirá vincular a un
archivo JavaScript externo, que es la forma en que configurará
la aplicación web en este ejercicio.
CONSTRUIR UNA WEB
CON HTML Y CSS
En Visual Studio Code, abra el archivo index.html.

Escriba script:src en una nueva línea antes del elemento


</body> de cierre y, a continuación, presione Entrar.

Modifique el elemento <script> para cargar el archivo app.js


como se muestra en el ejemplo siguiente, y asegúrese de que
se encuentra después del elemento </ul> de cierre de la lista.

...
<ul>
<li class="list">Add visual styles</li>
<li class="list">Add light and dark themes</li>
<li>Enable switching the theme</li>
</ul>
<script src="app.js"></script>
...
CONSTRUIR UNA WEB
CON HTML Y CSS
El elemento <script> se puede colocar en <head> o en otra parte de <body>. Sin embargo, colocar el elemento
<script> al final de la sección <body> permite que primero se muestre todo el contenido de la página y,
después, se cargue el script.

Incorporación de tolerancia a errores


En el archivo HTML, agregue un elemento <noscript> después del elemento </script> de cierre, que se puede
usar para mostrar un mensaje si JavaScript está desactivado.

<script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site.</noscript>
El uso del elemento <noscript> es un ejemplo de tolerancia a errores o degradación correcta. Al utilizar el
elemento <noscript>, su código puede detectar y planificar cuando una característica no es compatible o no
está disponible.

Guarde los cambios con el método abreviado de teclado Control+S en Windows o Comando+S en macOS.
CONSTRUIR UNA WEB
CON HTML Y CSS
Establecimiento del modo strict
Al empezar a trabajar con JavaScript, el foco inicial suele ser trabajar con
números, operaciones matemáticas, manipulación de texto, fechas y
almacenamiento de información. En ocasiones, JavaScript hace suposiciones
sobre el tipo de datos que escribe; por ejemplo, los de asignación, matemáticos
o igualdad lógica pueden ofrecer resultados inesperados. JavaScript intenta ser
descriptivo, hacer que el código funcione y proporcionarle una solución
incluso si el resultado debe ser un error. Para invalidar este comportamiento,
puede activar el modo strict, que reduce los errores silenciosos, mejora el
rendimiento y proporciona más advertencias y menos características no
seguras.

En Visual Studio Code, abra el archivo app.js y escriba lo siguiente.

'use strict'
CONSTRUIR UNA WEB
CON HTML Y CSS
En Visual Studio Code, abra el archivo index.html.

Escriba script:src en una nueva línea antes del elemento


</body> de cierre y, a continuación, presione Entrar.

Modifique el elemento <script> para cargar el archivo app.js


como se muestra en el ejemplo siguiente, y asegúrese de que
se encuentra después del elemento </ul> de cierre de la lista.

...
<ul>
<li class="list">Add visual styles</li>
<li class="list">Add light and dark themes</li>
<li>Enable switching the theme</li>
</ul>
<script src="app.js"></script>
...
CONSTRUIR UNA WEB
CON HTML Y CSS

...
<ul>
<li class="list">Add visual styles</li>
<li class="list">Add light and dark themes</li>
<li>Enable switching the theme</li>
</ul>
<div>
<button class="btn">Dark</button>
</div>
<script src="app.js"></script>
...

Observe que el elemento <button> de este ejemplo tiene un atributo class que
usará para aplicar estilos CSS.
CONSTRUIR UNA WEB
CON HTML Y CSS
A continuación, modifique el selector de clases para agregar algunas
En el archivo CSS, agregue un reglas para el tamaño, la forma, la apariencia y la ubicación del botón. El
selector de clases para el botón CSS siguiente crea un botón redondo a la derecha del encabezado de la
HTML. Para que los colores de los página.
botones sean distintos de los colores
generales de los temas claro u .btn {
oscuro, establezca las propiedades position: absolute;
color y background-color en el top: 20px;
selector de botón. Este selector de left: 250px;
clases es específico del botón, e height: 50px;
invalida el selector universal (*) que width: 50px;
se usa para aplicar colores de fuente border-radius: 50%;
en el archivo CSS. border: none;
color: var(--btnFontColor);
.btn { background-color: var(--btnBg);
color: var(--btnFontColor); }
background-color: var(--btnBg);
}
CONSTRUIR UNA WEB
CON HTML Y CSS
A continuación, modifique el selector de clases para agregar algunas reglas
Para mejorar la apariencia del botón, para el tamaño, la forma, la apariencia y la ubicación del botón. El CSS
agregue un selector de seudoclase, siguiente crea un botón redondo a la derecha del encabezado de la página.
btn:focus, después del selector de
botón. Al establecer la regla outline- .light-theme {
style en none, se elimina un contorno --bg: var(--green);
rectangular cuando se selecciona el --fontColor: var(--black);
botón (recibe el foco). --btnBg: var(--black);
--btnFontColor: var(--white);
.btn:focus { outline-style: none; } }
A continuación, actualice el CSS para
el tema claro y oscuro. Defina algunas .dark-theme {
variables nuevas, btnBg y --bg: var(--black);
btnFontColor, para especificar el color --fontColor: var(--green);
de fondo y el color de la fuente del --btnBg: var(--white);
botón. --btnFontColor: var(--black);
}
CONSTRUIR UNA WEB
CON HTML Y CSS
Agregar un controlador de eventos

Para hacer que el botón realice alguna acción cuando lo


seleccione, necesita un controlador de eventos en el archivo
JavaScript. Para un botón, necesita un controlador de eventos
para el evento click; la función del controlador de eventos se
ejecuta cuando se produce el evento click.

Para poder agregar el controlador de eventos, necesita una


referencia al botón.

En el archivo JavaScript, use document.querySelector para


obtener la referencia de botón....

const switcher = document.querySelector('.btn');


CONSTRUIR UNA WEB
CON HTML Y CSS
A continuación, agregue la escucha de eventos y el controlador
de eventos para el evento click. En el código siguiente,
agregará un cliente de escucha para el evento click. La función 'use strict'
que se pasa a la escucha de eventos es el controlador de
const switcher = document.querySelector('.btn');
eventos real.
switcher.addEventListener('click', function() {
switcher.addEventListener('click', function() { document.body.classList.toggle('dark-theme')
document.body.classList.toggle('dark-theme')
}); var className = document.body.className;
if(className == "light-theme") {
En el código anterior, ha usado el método toggle para cambiar el elemento a la this.textContent = "Dark";
clase dark-theme. Esto aplica automáticamente los estilos del tema oscuro en }
lugar del tema claro. Pero también es necesario actualizar la etiqueta del botón else {
para mostrar el tema correcto, por lo que debe agregar una instrucción if para this.textContent = "Light";
determinar el tema actual y actualizar la etiqueta del botón. }

El código JavaScript completo debería verse así. });


CONSTRUIR UNA WEB
CON HTML Y CSS
switcher.addEventListener('click', function() {
Mensaje de consola document.body.classList.toggle('dark-theme')
Puede crear un mensaje oculto que no aparezca en la página web. Pero lo que
escriba en la consola se mostrará en las herramientas para desarrolladores del var className = document.body.className;
explorador. El uso de mensajes de consola puede resultar muy útil para ver el if(className == "light-theme") {
resultado del código. this.textContent = "Dark";
}
Agregue una llamada a console.log después de la instrucción if, pero dentro de else {
la escucha de eventos. this.textContent = "Light";
}

console.log('current class name: ' + className);

});
CONSTRUIR UNA WEB
CON HTML Y CSS
Ahora solo nos queda chequear el producto final.

Revisa si se ve en el explorador de archivos o en las herramientas de


desarrollo.

Felicitaciones por construir un sitio web.


CONSTRUIR UNA WEB
CON HTML Y CSS
Ejercicio práctico guiado.

En este ejercicio construiremos un sitio web, repasaremos conceptos,


agregaremos assets y chequearemos algunos cambios por consola.

En Vscode creamos nuestro primer proyecto en una carpeta del sistema


CONSTRUIR UNA WEB
CON HTML Y CSS

Le damos la misma estructura que vimos con anterioridad.


Trabajaremos con html, img y css. En los siguientes ejercicios veremos las otras carpetas.
CONSTRUIR UNA WEB
CON HTML Y CSS
Comienza con ! Y presiona tab, verás que aparecen varias líneas de código escritas. Eso es emmet
Permite usar atajos al escribir css y html. En este caso crea un bolierplate o texto de maqueta básico de html.

Ahora le haremos algunos cambios y seguiremos


CONSTRUIR UNA WEB
CON HTML Y CSS
Modificamos la línea dos y escribimos “es” para indicar que usaremos el idioma español.
Agregamos la línea 7 y le damos una descripción al sitio.
Modificamos el título en la línea 8.
CONSTRUIR UNA WEB
CON HTML Y CSS

Creamos 3 etiquetas semánticas para nuestro contenido. Header donde estará el encabezado, section con la clase “contenido”
Donde estará el contenido principal y footer, donde estará un mensaje nuestro que servirá de pie de página.
CONSTRUIR UNA WEB
CON HTML Y CSS
Creamos un encabezado sencillo con la etiqueta <h1>

El footer tb es sencillo, lo creamos con una etiqueta <p>


CONSTRUIR UNA WEB
CON HTML Y CSS
En la sección contenido creamos una etiqueta <h2> para
El subtitulo. Luego creamos usando emmet una lista con 3 elementos.
CONSTRUIR UNA WEB
CON HTML Y CSS
En VsCode hay extensiones, para darle más funciones a nuestro editor de código.
Te recomiendo instalar live server, para cargar en un navegador una versión del código que creamos y que
Se actualiza con los cambios.
CONSTRUIR UNA WEB
CON HTML Y CSS
Le damos click derecho al archivo index.html, elegimos live server y veremos una ventana
del navegador con nuestra página cargada.

Estamos casi listos, pero se ve algo simple, le agregaremos ahora css y una imagen para darle un poco más de personalidad.
CONSTRUIR UNA WEB
CON HTML Y CSS
En mi caso voy a ir a unsplash, buscar en programming una foto y descargarla.
CONSTRUIR UNA WEB
CON HTML Y CSS
Agrego en el footer la info del autor de la imagen.

Agrego la imagen en la carpeta img y le cambio el nombre a uno más sencillo.

En css agrego un archivo styles.css que tendrá los estilos de la página.


CONSTRUIR UNA WEB
CON HTML Y CSS
Creo una etiqueta para mi imagen, en src le indico donde está ubicada la imagen mediante la ruta de esta y
Con la etiqueta alt le doy una descripción a esa imagen.

La imagen es gigante!

No hay problema, se corrige con css.

Ahora vamos a nuestro archivo style.css,


pero antes de ello debemos incorporarlo al
index.html
CONSTRUIR UNA WEB
CON HTML Y CSS
Incorporar el style es fácil. En el head, incorporamos una etiqueta link,
le indicamos en rel que es una hoja de estilos escribiendo stylesheet
Y en href le indicamos la ruta en la que está nuestro archivo css.
CONSTRUIR UNA WEB
CON HTML Y CSS

En este caso indicamos el elemento al cual le incorporaremos estilos css.

H1 img y footer se escriben así porque son etiquetas.

.contenido va con un punto antes, porque es una clase.


CONSTRUIR UNA WEB
CON HTML Y CSS
Podemos usar la consola para ir viendo como van quedando los cambios en nuestro sitio.

En este caso seleccionamos la etiqueta h1, le damos un text-align: center y la vemos centrada.
CONSTRUIR UNA WEB
CON HTML Y CSS

Alineamos el texto en h1

También alineamos el contenido

Le quitamos los puntitos a los <li>

Le damos un ancho a la imagen máximo


la alineamos usando:
margin 0 auto Y display: block

Finalmente centramos el footer


CONSTRUIR UNA WEB
CON HTML Y CSS

Tenemos una web centrada y ordenada

También podría gustarte