Introducción a HTML y CSS Básicos
Cargado por
ScribdTranslationsIntroducción a HTML y CSS Básicos
Cargado por
ScribdTranslationsHTML y CSS Básicos - Primer Resumen
Aprendimos mucho sobre HTML y CSS, dos de los lenguajes más importantes que
necesito saber como desarrollador web.
Aquí hay un resumen conciso de todas las características fundamentales que hemos aprendido hasta ahora.
Características que necesitas conocer porque las utilizarás todo el tiempo!
Resumen HTML
¿Qué y por qué?
HTML (Lenguaje de Marcado de Hipertexto) es el corazón de cada página web. Define el
estructura de la página web y anota el contenido para decirle al navegador qué hacer
mostrar y proporcionar un significado adicional. Sin HTML, el texto siempre sería "solo texto"
- no habría diferencia semántica entre títulos, texto normal, subtítulos, etc.
Tampoco podrías añadir imágenes o enlaces.
Aunque los navegadores por defecto agregan estilos para ciertos elementos HTML (por ejemplo, <h1> </h1>
los elementos son negritas y más grandes por defecto), no usas HTML para el estilo
¡propósitos!
En cambio, HTML agrega significado semántico a tu contenido; proporciona anotaciones.
that describe your content. And in the case of certain elements (e.g. <img>, <a>) ello
también le dice al navegador qué mostrar (por ejemplo, mostrar una imagen) y qué hacer (por ejemplo,
navegar a otra página).
Tu sitio web no solo es visto por ti, sino que también es analizado por los rastreadores de motores de búsqueda.
o presentados por tecnologías asistivas como los lectores de pantalla. Por eso es importante describir
¡Tu contenido correcto importa mucho!
Anatomía del Elemento HTML
Los elementos HTML suelen consistir en una etiqueta de apertura (por ejemplo.<h1>), contenidoalgun
(p. ej.¡Hola!) y una etiqueta de cierre (por ej.</h1>).
Los elementos HTML también pueden recibir atributos que te permiten agregar comportamiento extra o
configuración al elemento (depende del atributo).
Por ejemplo, un enlace (<a>) requiere unaenlaceatributo para decirle al navegador dónde está
debería llevar a:
<p>Esto lleva<a href="[Link] Google</a>.</p>
También hay algunos elementos vacíos, por ejemplo.<img>Esos elementos no necesitan
una etiqueta de cierre ya que no contienen ningún contenido.
<img src="[Link]" alt="Una imagen hermosa de algo">
<!-- o -->
<img src="[Link]" alt="Una imagen hermosa de algo"/>
Anidando elementos HTML
Una característica clave de HTML es que puedes anidar elementos entre sí - solo
como puedes verlo en este ejemplo:
<ul>
<li>Esto lleva a<ahref="[Link]
<li>Otro elemento</li>
</ul>
Aquí, el<li>el elemento es un llamado elemento hijo de<ul>(que es el padre).
Y hasta tiene un elemento hijo: El enlace (<a>) elemento (que es un
descendiente de el<ul>elemento por lo tanto - por otro lado,<ul>is anancestor
de<a>).
The second <li>"Otro artículo" sería un hermano del primero<li>juntos
ellos forman los hijos de<ul>.
Al escribir código HTML, típicamente construyes estructuras profundamente anidadas porque
la mayoría del contenido solo se puede describir con precisión si combinas elementos HTML
así. ¿Cómo más construirías una lista de enlaces semánticamente correcta?
Estructura y Esqueleto HTML
Hay dos grandes grupos de elementos HTML:
1. Elementos para presentar y describir el contenido de tu página (por ejemplo.h1, p, ul, a,
imgetc.)
2. Elementos para describir su página en general y para enlazar a otros requisitos
recursos (por ejemplotítulo, meta, link, estilo)
Por eso, un documento HTML correctamente formateado debe tener un "esqueleto" que
define dos áreas principales:
1.<cuerpo>para el contenido de la página
2.<cabeza>para metadatos
Por lo tanto, un esqueleto de documento HTML correcto (que deberías usar en cada uno
.htmlel archivo que creas debería verse así:
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<!-- Other metadata -->
</head>
<cuerpo>
<h1>¡Hola!</h1>
<!-- Otro contenido de la página -->
</body>
</html>
<!-- .... -->marca un comentario por cierto - este comentario no se mostrará en
la página cuando es renderizada por el navegador.
Elementos en línea vs Elementos de bloque
También aprendiste que hay dos tipos principales de contenido<cuerpo>) elementos en HTML:
1. Elementos de bloque (por ejemplo.h1, p, ul, ...)
2. Elementos en línea (por ejemplo.a, span, img)
Los elementos de bloque siempre reservan todo el ancho de la pantalla para sí mismos
(aunque eso puede cambiarse mediante CSS).
Los elementos en línea, por otro lado, están - como su nombre sugiere - ahí para encajar "en un
línea con otros elementos". Sería, por ejemplo, extraño si un enlace (<a>) podría
fuerza un salto de línea porque reserva todo el ancho de la pantalla para sí mismo.
Por otro lado, un nuevo párrafo<p>) o título (<h1>, <h2>etc.) probablemente debería
no ser comprimido en la misma línea que otro texto.
Sin embargo, puedes cambiar ese comportamiento a través de CSS, en caso de que lo necesites.
Elementos HTML que conocemos hasta ahora
Hasta este punto, ya hemos aprendido sobre muchos elementos importantes - aquí hay un
lista de resumen:
<cabecera>Elementos
<meta>Se puede utilizar para agregar metadatos adicionales a su página - por ejemplo, un
descripción que podría ser recogida por los rastreadores de motores de búsqueda
<title>Permite definir un título de página (será utilizado por los motores de búsqueda
sino que también aparece en las pestañas del navegador)
<estilo>Se puede utilizar para definir estilos CSS globales para la página
<enlace>Permite vincular ('conectar') tu archivo HTML a algún otro
recurso - típicamente a [Link] cuyas estilos se aplicarán como
estilos globales a ese documento HTML
<body>Elementos:
<h1>, <h2>, <h3>etc: Encabezados (títulos) que puedes agregar a tu página.
Debe usarse en orden y solo uno<h1>el elemento debe ser utilizado por
Documento HTML.<h2>el elemento actúa como un subtítulo, un<h3>element is
luego otro subtítulo en un nivel aún más bajo.
<p>Se puede utilizar para definir un párrafo regular de contenido en línea (típicamente
texto
<em>Se puede usar para agregar énfasis a una palabra o frase
<strong>Se puede usar para añadir un fuerte énfasis a una palabra o frase (como si
lo estarías diciendo en voz alta, enfatizándolo fuertemente de manera verbal
<img>: Can be used to display an image. You need to set the image source
ruta a través de lafuenteatributo. Y deberías establecer un texto alternativo a través de
elalternativoatributo - este texto se muestra si la imagen no se puede cargar o si
un usuario que utiliza una tecnología de asistencia visita tu página
<ul>/<ol>Se puede usar para renderizar listas de datos ordenadas o desordenadas. Usa
este elemento si tienes datos de lista.
<li>Utilizado dentro de<ul>o<ol>definir los elementos de la lista individual de
esa lista.
<encabezado>Un elemento de bloque que define un encabezado - para toda la página o un
subsección de la página (más sobre eso más adelante)
<footer>Un elemento de bloque que define un pie de página - para toda la página o una
subsección de la página (más sobre eso más tarde)
<principal>Define el contenido principal de una página - no deberías tener más
más de uno<principal>elemento por documento HTML.
<sección>Define una nueva sección en tu documento - típicamente contiene
un encabezado (por ejemplo.<h2>) sin embargo, no es un "imprescindible"
<span>Un elemento en línea sin significado que se puede usar para envolver contenido
que debería ser dirigido con estilos CSS (por ejemplo, con la ayuda de una clase CSS o
un id)
<div>Un elemento de bloque sin significado que se puede utilizar para envolver contenido
que debería ser dirigido con estilos CSS (por ejemplo, con la ayuda de una clase CSS o
una identificación)
Por supuesto, veremos muchos más elementos a lo largo de este curso - también puedes
explorar todos los elementos disponibles en elReferencia de Elementos HTML de MDN.
Resumen de CSS
¿Qué y por qué?
CSS (Hojas de Estilo en Cascada) es un lenguaje que te permite definir definiciones de estilo
para su documento HTML. Estas definiciones serán recogidas por el navegador y
controlar cómo se mostrará el contenido (por ejemplo, que algún texto sea rojo, qué tamaño de fuente
debería tener etc.).
Donde HTML define la estructura y el significado de tu contenido (y por supuesto también
ayuda a mostrar el contenido en primer lugar - por ejemplo, con el<img>elemento),
CSS se utiliza para presentar el contenido exactamente como deseas presentarlo. Agrega
sin significado ni anotación - se trata realmente de cómo se ven las cosas.
Si quieres cambiar los colores del texto, los colores de fondo, tamaños, espacios, distancias,
bordes, sombras, posiciones y todas estas cosas, necesitas CSS.
Sintaxis CSS
Hay una amplia variedad de propiedades CSS disponibles que puedes definir. Todas esas
las propiedades luego toman diferentes valores - los valores concretos que puedes asignar dependen
en la propiedad para la cual lo estás asignando.
color:#ccc;/* representación hexadecimal del color rgb */
color:rgb(204,204,204);/* same colors as above */
tamaño de fuente:18px;/* estableciendo un tamaño en píxeles independientes del dispositivo */
Los estilos CSS se pueden definir de diferentes maneras, por ejemplo "en línea" a través de laestilo
attribute:
<h1 style="font-size: 20px">¡Hola!</h1>
Pero usar tales "estilos en línea" generalmente no se recomienda ya que viene con
varias desventajas. Lo más importante, desordena tu código HTML (difícil de
¡mantener!), requiere mucha duplicación y copiar y pegar, y también es difícil
A menudo necesitas visitar y ajustar múltiples elementos si quieres ajustar
un solo estilo.
Por eso, normalmente defines estilos CSS globales a través de la<style>elemento o en un
[Link] que luego se importa a través de un<enlace>elemento.
Al usar estilos globales como estos, la sintaxis CSS sigue siendo la misma, pero agrupas tu
asignaciones de propiedad-valor en una regla CSS llamada que también es un selector CSS que
define para qué elementos HTML se deben aplicar tus estilos:
h1{/* se aplica a TODOS los elementos <h1> */
font-size:20px;
}
#some-id{/* is applied to a single HTML element with id="some-id" */
color:#ccc;
}
.my-link{/* is applied to ALL HTML elments with class="my-link" */
text-decoration:none;
}
También puedes combinar selectores CSS:
h1,p{/* aplica la regla a todos los elementos <h1> y <p> */
color:rgb(204,204,204);
}
p a{/* selecciona todos los elementos <a> que son descendientes de un <p> */
color:rojo;
}
También puedes proporcionar estilos específicos para estados específicos de elementos HTML - con
pseudo-selectores:
a:hover { /* apunta a <a> donde el ratón del usuario está sobre */ }
font-weight:bold;
}
¿Qué puedes estilizar?
Puedes realmente estilizar (casi) cualquier cosa con CSS. Por eso deberías usar CSS para
estilizando y no usando ciertos elementos HTML porque deseas un aspecto específico.
HTML está ahí para definir el contenido, proporcionar la estructura y significado, CSS es entonces
ahí para presentar tu contenido como quieras presentarlo.
Valores y Unidades CSS
Dado que hay docenas de propiedades CSS que puedes apuntar (solo vimos un pequeño subconjunto
hasta ahora), también hay cientos de valores posibles que puedes asignar.
Los valores concretos que puedes asignar siempre dependen de la propiedad que estás utilizando actualmente.
definiendo: Propiedades del color (p. [Link], color de fondo) quiero valores de color (por ejemplo.
#fa923f, #ccc, rgb(204, 204, 204), hsl(180, 20, 75), rojo). Dimensión
propiedades (por ejemplofont-size, margen) quiero valores de dimensión (por ejemplo, 18px). El font-
familiala propiedad quiere una lista de familias de fuentes que debería usar (p. ej.)familia de fuentes:
Oswald, sans-serif).
Aunque el número de propiedades disponibles, valores y unidades puede ser
intimidante en este momento, desarrollarás una buena sensación por las diferentes propiedades
y valores a lo largo del tiempo. Al final, siempre tendrás un par de propiedades y
valores que usas extremadamente a menudo (y por lo tanto sabes de memoria).
Por supuesto, también puedes utilizar siempre el soporte de autocompletado del IDE y los recursos.
como elLista de Propiedades CSS de MDNpara aprender sobre todas las posibles propiedades y valores.
El modelo de caja
Al trabajar con CSS, es importante entender que los elementos HTML tienen un
el llamado 'modelo de caja'.
Esto significa que todos los elementos HTML tienen varias "capas" que se pueden estilizar:
El contenido
Arellenoalrededor del contenido (pero dentro del borde)
Afrontera
Amargenalrededor de todo el elemento
You don't need to set any relleno, fronteraomargensolo puedes establecer lo que tú
necesidad. Pero con estas diferentes "capas", puedes agregar espacio entre un visible
border and the content and / or around an element.
Cabe destacar que los elementos de bloque y en línea se comportan de manera diferente:
Elementos de bloque: Se comporta como se describió anteriormente
Elementos en línea: Verticalmargense ignora, verticalrellenose agrega pero
no empuja otros elementos o contenido lejos
También puedes cambiar si un elemento se comporta como un elemento de bloque o en línea a través de la
mostrarpropiedad (por ejemplo,mostrar: bloqueestablece el comportamiento a "elemento bloque" incluso
si normalmente es un elemento en línea). También hayen línea-bloquecomo un posiblemostrar
valor que básicamente fusionará los dos comportamientos y 'desbloqueará' el comportamiento de bloque completo
mientras se mantiene el contenido alineado con otro contenido.
¿Por qué se llama "Cascading"?
¿Por qué se llama "Hojas de Estilo en Cascada"?
Porque una cascada de definiciones de estilo puede afectar a un mismo elemento - es decir,
múltiples reglas CSS pueden afectar el mismo elemento.
Aquí hay un ejemplo:
<style>
a{
text-decoration:none;
}
.default-link{
color:rojo;
}
</style>
<aclass="default-link"href="...">Some linke</a>
En este ejemplo, las dos reglas CSS están afectando ambas el<a>elemento.
¿Por qué tendrías dos en lugar de solo una regla? Porque tal vez tengas diferentes
enlaces en tu página - algunos con unenlace-predeterminadoclase, algunos sin ella.
Debido a que múltiples reglas CSS pueden afectar el mismo elemento HTML, puedes dividir tu
Definiciones de CSS en múltiples reglas. Esto evita copias y pegados innecesarios y
¡duplicación de código!
Especificidad
But what happens if different CSS rules target the same CSS property?
Considera este ejemplo:
<estilo>
a{
color:azul;
}
.default-link{
color:rojo;
}
</estilo>
<aclass="default-link"href="...">Algun enlace</a>
En este caso, el enlace seríarojoporque el orden de las reglas CSS importa - lo posterior
regla (en este [Link]-predeterminadovictorias).
Pero en realidad, es un poco más complejo que eso. No se trata solo del orden.
En su lugar, hay un concepto llamado especificidad (¡sí, es una palabra horrible!) implicado.
Cuanto mayor sea la especificidad de una regla, más importante es. Y mayor especificidad
los latidos tienen menor especificidad.
El orden de tu código influye en la especificidad, pero no es el único factor.
El tipo de selector que estás usando también juega un papel importante - por ejemplo, un id
selector (como#some-id) supera a un selector de tipo de etiqueta regular (comoh1).
Y eso tiene cierto sentido: Después de todo, si apuntas a un id específico, tienes una manera
criterios de selección más específicos que si solo apuntas al tipo de etiqueta.
Y aunque ahora podría escribir una larga lista de factores de especificidad y cuál regla gana
sobre qué otra regla, lo reconfortante es que básicamente puedes confiar en ti mismo
sentido común.
Así como tiene sentido que un id sea más específico que "solo la etiqueta", una combinación
selector (por ejemplop a { ... }) ganaría sobre un selector "independiente" (por ejemploa { ...
}).
Así que cuanto más específicos sean tus selectores CSS, mayor será la especificidad. Y más alto
la especificidad supera a la menor especificidad.
Herencia
Conectado a los conceptos de "Cascada" y "Especificidad" está el concepto de
"Herencia".
Los elementos HTML no solo se ven afectados por estilos que se definen en reglas directamente.
dirigiéndose a esos elementos, pero en su lugar también pueden ser estilizados por reglas que apuntan a
elementos padres o ancestros.
Aquí hay un ejemplo:
<estilo>
cuerpo{
fuente: 'Open Sans', sans-serif;
texto-align:center;
}
p{
margen:20px;
}
</estilo>
<body>
<h1>¡Uso 'Open Sans' como familia de fuentes!</h1>
¡Yo también! Y ambos estamos alineados al centro.
</body>
En este ejemplo, ambos<h1y<p>se vería afectado por eltipo de letray
text-aligndefiniciones de CSS en elcuerporegla.
¿Por qué?
Debido a la 'herencia'.
Heredan los estilos definidos en el elemento padre.
No todas las propiedades CSS son heredables, pero de nuevo, puedes confiar en tu
sentido común.
El color del texto, la mayoría de los estilos de fuente, etc. son heredados.
Los márgenes, los rellenos, los bordes, etc. no lo son.
Configuraciones predeterminadas del navegador
Los navegadores también definen algunos estilos predeterminados para ciertos elementos; por ejemplo, ellos
a menudo hacen el<h1>elemento más grande y dale unboldfont-weight.
Sin embargo, esto tiene una especificidad muy baja y, por lo tanto, puedes sobrescribirlo fácilmente.
estilos predeterminados con cualquier selector CSS.
Propiedades CSS que conocemos hasta ahora
Relacionado con fuentes:
fuente-familia:Set the font family you want to use - can be a single font
o (típicamente) una lista de fuentes, donde la primera fuente se usa y la otra
las fuentes actúan como fuentes de reserva si la primera fuente no se puede cargar
tamaño de fuenteEstablece el tamaño del texto - se puede establecer en píxeles 'independientes del dispositivo'
(p. ej.18px) u otros valores que descubriremos más tarde
peso de fuente: Allows you to set the weight of some text (default is
normal, puedes elegir un peso numérico como700o una alternativa como
negritaen su lugar). Importante: ¡La fuente que cargaste necesita soportar ese peso!
Text:
alineación de textoControla la alineación del texto (por ejemplo,centro, izquierda,
derecho)
decoración de textoSe puede usar para añadir decoración extra (o eliminarla) como
subrayado (por ejemplo, text-decoration: subrayado)
Colors:
colorEstablece el color del texto
color de fondoEstablece el color de fondo de un elemento
Los colores se pueden establecer con diferentes tipos de unidades:
Identificadores de número hexadecimal (p. ej.#fa923f,
#ccc) donde conseguiste
tres pares de dos dígitos que definen el color r/g/b (rojo, verde, azul)
partes
Elrgb()"función" que te permite establecer un color r/g/b con
decimal numbers
Elhsl()función que se puede usar para definir un color como un
combinación de matiz/saturación/brillo
Puedes usar cualquiera de estas unidades de color; se reduce a tu
preferencia personal; cada color se puede expresar con cada uno de estos
tres métodos
También hayrgba()yhsla()en caso de que también quieras añadir un
"canal alfa" (transparencia - valor entre 0 y 1) a tu
color
Modelo de Caja:
margenEstablece un espaciado extra alrededor de un elemento - se puede establecer con píxeles
(p. ej.18px)
margenes la notación abreviada que establece el espaciado en todas las direcciones,
la forma larga seríamargin: <top> <right> <bottom>
<izquierda>(p. [Link]: 10px 5px 8px 3px)
También tienesmargen-izquierdo, margen derecho, margin-topy
margen inferiordirigir a direcciones específicas
rellenoAñade un espaciado extra dentro de un elemento - se podría establecer con
píxeles (por ejemplo18px)
Justo comomargen, puedes usar la notación abreviadarelleno:
<top> <right> <bottom> <left>o apuntar a direcciones específicas como
margen inferior
fronteraSe puede usar para definir un borde visible alrededor del elemento
contenido + relleno (por ejemplo, border: 1px solid black)
radio de bordeSe puede usar para dar esquinas redondeadas a una caja (incluso si no
se define el borde)
Sizes:
anchoSe utiliza para definir un ancho fijo para un elemento, en lugar de usar el
ancho de pantalla completa para elementos de bloque o el ancho de contenido para elementos en línea
elementos (podrían establecerse en píxeles como18px)
alturaSe utiliza para definir una altura fija para un elemento, en lugar de inferir
se ajusta automáticamente según la altura del contenido en el elemento
Other:
sombra de cajaSe puede usar para definir una sombra para un elemento - se establece por
definiendo un desplazamiento en x, un desplazamiento en y, un radio de desenfoque opcional, una expansión opcional