wepik-desarrollo-web-eficiente-dominando-html-y-css-20240827125153HCwm.pptx

Desarrollo Web Eﬁciente:
Dominando HTML y CSS
Ing.ArturoLinnoLópezTrujillo
2024

El desarrollo web es un
campo en constante
evolución. En esta
presentación, exploraremos
cómo HTML y CSS son
fundamentales para crear
sitios web eﬁcientes y
atractivos.
Aprenderemos sobre las
mejores
prácticas y técnicas
que optimizan el
proceso de desarrollo.
Introducción al Desarrollo
Web

HTML (Lenguaje de Marcado
de Hipertexto) es la columna
vertebral de cualquier sitio
web. Deﬁne la estructura y el
contenido de las páginas.
Comprender cómo se organiza
el HTML es esencial para
construir
una base sólida en el
desarrollo web.
¿Qué es
HTML?

Anatomía de un elemento HTML
1.La etiqueta de apertura: Consiste en el nombre del elemento (en este caso, p),
encerrado por paréntesis angulares (< >) de apertura y cierre. Establece dónde comienza o
empieza a tener efecto el elemento (en este caso, dónde es el comienzo del párrafo).
2.La etiqueta de cierre: Es igual que la etiqueta de apertura, excepto que incluye una
barra de cierre (/) antes del nombre de la etiqueta. Establece dónde termina el elemento (en
este caso dónde termina el párrafo).
3.El contenido: Este es el contenido del elemento, que en este caso es sólo texto.
4.El elemento: La etiqueta de apertura, más la etiqueta de cierre, más el contenido
equivale al elemento.

Los elementos pueden también tener atributos,
que se ven así:
Los atributos contienen información adicional acerca del elemento, la cual no quieres que
aparezca en el contenido real del elemento. Aquí class es el nombre del atributo y editor-
note el valor del atributo. En este caso, el atributo class permite darle al elemento un
nombre identificativo, que se puede utilizar luego para apuntarle al elemento información de
estilo y demás cosas.
Un atributo debe tener siempre:
1.Un espacio entre este y el nombre del elemento (o del atributo previo, si el elemento ya
posee uno o más atributos).
2.El nombre del atributo, seguido por un signo de igual (=).
3.Comillas de apertura y de cierre, encerrando el valor del atributo.

Anatomía de un documento
HTML

Tenemos:
1.<!DOCTYPE html> — el tipo de documento. Es un preámbulo requerido. Anteriormente,
cuando HTML era joven (cerca de 1991/2), los tipos de documento actuaban como vínculos a
un conjunto de reglas que el código HTML de la página debía seguir para ser considerado
bueno, lo que podía significar la verificación automática de errores y algunas otras cosas de
utilidad. Sin embargo, hoy día es simplemente un artefacto antiguo que no tiene
importancia, pero que debe ser incluido para que todo funcione correctamente.
2.<html></html> — el elemento <html>. Este elemento encierra todo el contenido de la
página entera y, a veces, se le conoce como el elemento raíz (root element).
3.<head></head> — el elemento <head>. Este elemento actúa como un contenedor de
todo aquello que quieres incluir en la página HTML que no es contenido visible por los
visitantes de la página. Incluye cosas como palabras clave (keywords), una descripción de la
página que quieres que aparezca en resultados de búsquedas, código CSS para dar estilo al
contenido, declaraciones del juego de caracteres, etc.
4.<meta charset="utf-8"> — <meta>. Este elemento establece el juego de caracteres
que tu documento usará en utf-8, que incluye casi todos los caracteres de todos los idiomas
humanos. Básicamente, puede manejar cualquier contenido de texto que puedas incluir. No
hay razón para no establecerlo, y puede evitar problemas en el futuro.

Tenemos:
1.<title></title> — el elemento <title> establece el título de tu página, que es el título
que aparece en la pestaña o en la barra de título del navegador cuando la página es cargada,
y se usa para describir la página cuando es añadida a los marcadores o como favorita.
2.<body></body> — el elemento <body> encierra todo el contenido que deseas mostrar
a los usuarios web que visiten tu página, ya sea texto, imágenes, videos, juegos, pistas de
audio reproducibles, y demás.

CSS (Hojas de Estilo en
Cascada) se utiliza para estilizar
y diseñar el contenido HTML.
Permite crear diseños atractivos
y responsivos.
Dominar CSS es crucial
para mejorar la
experiencia del usuario
en el desarrollo web.
Fundamentos de
CSS

1. Creación de hojas de estilo
1.Inline: Usando CSS directamente sobre el elemento HTML que queremos modificar. Se
realiza usando la etiqueta style de los elementos HTML, y como valor, se añaden todos los
estilos CSS que queramos aplicar separados por el carácter punto y coma.
Evidentemente usar CSS inline no es lo más recomendable, debe usarse para cosas muy
puntuales, ya que su mantenimiento es complicado (esta sobre la propia página, hay que
buscarlo). Sin embargo, para hacer pruebas o ejemplos pequeños es muy útil.

2. Internal: Usando la etiqueta style en el área head del documento HTML para redefinir el
estilo de los elementos HTML. Parece algo más adecuado que inline puesto que unifica todos
los estilos de una página en un mismo sitio. Sin embargo, sigue sin permitir reutilizar estilos
entre distintas páginas de nuestro sitio web.

3.External: Usando ficheros externos que posean la configuración CSS que queramos
aplicar.
Es el sistema más recomendado ya que fomenta la reutilización y el mantenimiento de las
hojas de estilo en diferentes paginas HTML.
Todos los ejemplos anteriores son equivalentes. En todos los casos se muestra un titulo de
color rojo como el siguiente:

En primer lugar, veremos cómo se definen las propiedades CSS. El formato para definir un
estilo sería el siguiente:

*: selector universal. Se aplica a todas las etiquetas.
etiqueta: selector de tipo o etiqueta. Se aplica a todas las
etiquetas con ese nombre.
etiqueta_1, etiqueta_2, … , etiqueta_n : Agrupación de
selectores. Se aplica a todas las etiquetas que coincidan
con dichos nombres de etiqueta.
etiqueta[atributo]: Selector de atributos por nombre.
Selecciona todas las etiquetas que contengan dicho
atributo.
.nombre_estilo: Selector de clase. Se aplica a las
etiquetas que tengan como valor de atributo class el valor
nombre_clase.

Las pseudoclases se aplican a etiquetas que se encuentran en un estado concreto. De esta
forma, podemos aplicar estilos distintos, por ejemplo, a un estilo visitado y a otro no
visitado.
Estos estilos se declaran de la siguiente forma:
• hover: Selecciona el elemento sobre el cual pasa el ratón.
• active: Selecciona el elemento que activa el usuario a través de un click.
• focus: Selecciona el elemento que tiene el foco del navegador.
También hay algunos específicos para enlaces:
−link: Selecciona los enlaces que no hayan sido visitados por el usuario.
−visited: Selecciona los enlaces que hayan sido visitados por el usuario.

Después de ver como se define un estilo, vamos a ver las propiedades que podemos
configurar en él:
• Tipo de letra (fuente)
−font-family: tipo de letra
−font-size: tamaño de letra
−font-style: inclinación (cursiva). Posibles valores: normal | italic |oblique
−font-weight: grosor de la fuente. Posibles valores: normal | bold | bolder | lighter |
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900.

border: configuración completa de un borde. La sintaxis es la siguiente: border-style border-
color border-width.
También existen propiedades que permiten definirlo por
separado: border-[left | right | top | bottom].
−border-radius: borde con esquinas redondeadas.
−box-shadow: borde con sombra.
• Márgenes
−margin: márgenes interiores (los 4 márgenes). Admite de uno a 4 valores (uno por
cada margen). Los valores pueden ser numéricos o el valor auto.
También existen propiedades que permiten definirlo por
separado: margin-[left | right | top | bottom]

• Fondos
−background-color: color de fondo.
−background-image: imagen de fondo. Como valor puede contener el valor none o
una URL con el formato url(‘x’) donde x es la URL de la imagen.
−background-position: posición de la imagen de fondo.
−background-repeat: repetición de la imagen de fondo. Puede contener los siguientes
valores: no-repeat | repeat | repeat-x | repeat-y
−background-origin: origen de la imagen de fondo. Puede tener los siguientes
valores: border-box | padding-box | content-box
−background-clip: límite de la imagen de fondo.
−background-size: tamaño de la imagen de fondo.
−background: propiedad combinada. Tiene la siguiente sintaxis: background-color /
background-image / backgroundposition/ background-repeat / background-origin
backgroundclip / background-size.

• Tamaño de elementos
−width: anchura del elemento. Admite como valor un tamaño customizado o el valor
auto.
−min-width: anchura mínima del elemento.
−max-width: anchura máxima del elemento.
−height: altura del elemento. Admite como valor un tamaño customizado o el valor
auto.
−min-height: altura mínima del elemento.
−max-height: altura máxima del elemento.
−overflow: comportamiento si se desborda el elemento debido a su contenido. Puede
tener los siguientes valores: auto | hidden | scroll | visible

Dominar HTML y CSS es esencial
para cualquier desarrollador web
que busque crear sitios
eﬁcientes y profesionales. Al
aplicar las mejores prácticas y
técnicas discutidas, podrás
mejorar la calidad de tus
proyectos y ofrecer una
experiencia de usuario
excepcional.
Conclusión

wepik-desarrollo-web-eficiente-dominando-html-y-css-20240827125153HCwm.pptx

Más contenido relacionado

Similar a wepik-desarrollo-web-eficiente-dominando-html-y-css-20240827125153HCwm.pptx

Último

wepik-desarrollo-web-eficiente-dominando-html-y-css-20240827125153HCwm.pptx