Scribd
Carica
1 visualizzazioni

HTML - CSS

curso de html ycss

Caricato da

Judith Leonardo
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
1 visualizzazioni

HTML - CSS

curso de html ycss

Caricato da

Judith Leonardo
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 11

22/7/2022 HTML/CSS | Henry Prep Course

HTML/CSS | Henry Prep Course

Intro Primeros Pasos Git Git y GitHub Conceptos JS I JS II JS III JS IV JS V JS VI HTML CSS

Calendario Glosario Challenge


Contenido de la clase Tiempo de lectura
29 min
Introducción a HTML
Elementos básicos HTML
Atributos
Tags
HTML/CSS
Introducción a CSS
Fundamentos
Atributo style
<style>
<link> En esta clase veremos:
Selectores
Introducción a HTML.
Aplicando reglas Elementos/tags HTML básicos.
Box Model Introducción a CSS.
Selectores CSS y el tag <style> .
height y width
Estilos Básicos.
margin Modelo de Caja.
border Hojas de estilos externas y el tag <link>.
padding
Cálculo del box model
Otras propiedades CSS Introducción a HTML
background
HTML es el bloque básico con el que está
color construido internet. Todas las páginas web utilizan
HTML. No es un lenguaje de programación
font-size propiamente dicho, sino, es un lenguaje de
Hojas de estilo externas y el Markup: son lenguajes que incorporan al texto
marcas o etiquetas que luego son interpretadas
elemento <link> para darle información extra sobre la estructura del
Recursos adicionales texto. En el caso de HTML, este será interpretado
por los browsers, que tambien presentaran el
código en forma gráfica.

HTML es la abreviatura de Hyper Text Markup


Language:

Hyper Text: “Hyper Texto” quiere decir


texto con links
Markup Language: Los “Lenguajes de
Marcado” son lenguajes de programación
basados en etiquetas que uno agrega a un
texto para darle estructura e información
adicional. A diferencia de los “Lenguajes de
Scripting” que se usan para crear programas
informáticos, los lenguajes de marcado son
sólo reglas para ordenar un documento.

Elementos básicos HTML


HTML define una serie de elementos (o etiquetas,
o tags) que serviran para delimitar texto. Cada tag
está encerrado en < > y tiene un nombre. Los
tags se abren y se cierran, los tags de cerrado
incluyen con un “/” en el principio del tag que
cierra. Por ejemplo:

<element>
...
</element>

Dejanos tu feedback! 👍
https://prep.soyhenry.com/html/ 1/11
22/7/2022 HTML/CSS | Henry Prep Course

HTML/CSS | Henry Prep Course

Contenido de la clase

Introducción a HTML
Elementos básicos HTML
Atributos Algunos tags html, por su naturaleza, no necesitan
tener nada adentro. Por lo tanto podemos abreviar
Tags
su escritura y en vez de abrir y cerrar el tag,
Introducción a CSS simplemente agregamos un “/” antes del bracket
final.
Atributo style
<style>
<link> <img src="http://imagen.com/img.jpg" />

Selectores
Aplicando reglas
Atributos
Box Model
height y width En su mayoría de los atributos de un elemento son
pares nombre-valor, separados por un signo de
margin igual «=» y escritos en la etiqueta de comienzo de
border un elemento, después del nombre del elemento. El
valor puede estar rodeado por comillas dobles o
padding simples. Los atributos de los tags nos sirven para
cambiar su comportamiento o configurarlos.
Cálculo del box model
Otras propiedades CSS Por ejemplo, el tag <img> sirve para mostrar una
background imagen. Este tag recibe el atributo src que
indica la URL de donde está la imagen que
color queremos mostrar.
font-size
Hojas de estilo externas y el
<img src="http://imagen.com/img.jpg" />
elemento <link>
Recursos adicionales
Tags

<html>
El tag <html> va a contener a todos los demás
tags dentro suyo. Este tag básicamente sirve para
avisarle al browser que el contenido debe ser
interpretado como html .

<head>
Este tag sirve para contener tags que contengan
información sobre el documento, pero es
información que no queremos que se renderee.
Comunmente contiene el titulo de la página y links
a recursos externos que pueda usar la página
(javascript o css).

<title>
Es el título de la página, se mostrará en el tab del
browser o en la parte superior (pero no en la
página).

<body>
En este tag estára encerrado todo lo que
querramos que se vea en la pantalla.

Entonces, hasta ahora, un documento HTML se ve


así:

<html>

Dejanos tu feedback! 👍 <head>


<title>Es el título de nuestra página</title>

https://prep.soyhenry.com/html/ 2/11
22/7/2022 HTML/CSS | Henry Prep Course
</head>
<body> HTML/CSS | Henry Prep Course
</body>
</html>

Como ven, para mayor fácilidad en la lectura y la


Contenido de la clase estructuración del documento, el documento
HTML se escribe indentando (o usando sangría).
Introducción a HTML
(Todos los tags que presentaremos más abajo van
Elementos básicos HTML siempre adentro de un tag <body> )
Atributos
Tags <p>
Introducción a CSS Es el tag para los párrafos. Mostrará el texto
Atributo style contenido dentro en una nueva línea.
<style>
<link> <p>Soy un párrafo</p>
Selectores
Aplicando reglas
<span>
Box Model
height y width El elemento span es un contenedor de texto
genérico. No inserta una nueva linea, como lo hace
margin el elemento p. Sirve básicamente para darle estilo
al texto.
border
padding
<div>
Cálculo del box model
El elemento div es un contenedor genérico. Es
Otras propiedades CSS
usado principalmente para dar estilo, imaginen que
background es una caja (cuyo tamaño y color podes modificar a
piacere), y que dentro podés poner otras cajas
color iguales.
font-size
Hojas de estilo externas y el <a>
elemento <link> El tag a (del inglés anchor), nos permite crear links
Recursos adicionales a otros documentos y páginas. Este tag recibe el
atributo href que indica a dónde apunta el link.

<a href="http://www.soyhenry.com">Esto es un link!<

<h1> … <h6>
Son los tags de encabezado o títulos, están
pensandos del 1 al 6, para indicar la importancia
del contenido y su jerarquía.

<h1>El título más importante!</h1>


<h3>título medianamente importante.</h3>
<h6>El título menos importante.</h6>

<img>
Este tag nos permite mostrar imágenes en la
pantalla. Necesita el atributo src que indica la
URL de donde sacar la imagen a mostrar.

<img src="http://www.soyhenry.com/imageurl.jpg" />

<ul>
Este tag representa una lista desordenada (del
inglés “unordered list”). Este tag está diseñado
para contener otros tags de tipo item. También
Dejanos tu feedback! 👍 existe el tag <ol> que viene de “ordered list”.

https://prep.soyhenry.com/html/ 3/11
22/7/2022 HTML/CSS | Henry Prep Course
<li>
HTML/CSS | Henry Prep Course
Son los tags que contienen los items de la lista (‘list
item’).

<ul>
<li>
Contenido de la clase
<span>Elemento uno</span>
</li>
Introducción a HTML
<li>
Elementos básicos HTML <p>Podemos anidar cualquier tipo de tag adentro
Atributos </li>
<li>
Tags
<span>tercer elemento</span>
Introducción a CSS </li>
Atributo style </ul>

<style>
<link>
Selectores
Aplicando reglas Introducción a CSS
Box Model Como vimos, HTML nos sirve para dar estructura al
height y width contenido. En las primeras épocas de internet las
páginas eran así. De hecho, todavía esta online la
margin primera página web. Como ven es bastante
border aburrida.
Luego se introdujo el concepto de CSS (Cascading
padding Style Sheets); una forma de poder agregar color y
Cálculo del box model estilos en nuestras páginas!

Otras propiedades CSS


Reglas CSS
background
color Básicamente una regla CSS está compuesta por un
atributo o propiedad y un valor. Seǵun el atributo
font-size que usemos y el valor que le pongamos a ese
atributo vamos a obtener resultados visuales
Hojas de estilo externas y el
distintos en nuestro html.
elemento <link>
Por ejemplo:
Recursos adicionales

html {
color: red; /* "Color" es la propiedad y "red" el
font-size: 12px; /* "font-size" es la propiedad y
}

En este ejemplo, vemos dos atributos: color y


font-size , el primero permite modificar el color
del texto, en este caso está seteado a red ; el
segundo indica el tamaño del texto, en este caso
12px .
Es importante notar que distintos atributos pueden
recibir distintos valores, generalmente los que
indican un color reciben un color ( red, blue ,
etc…), los que son medidas reciben una medida
( 12px, 15px , etc…), y hay otras propiedades
que reciben valor especificos, por ejemplo: la
propiedad border (que dibuja un borde
alrededor de un elemento) recibe tres valores: el
color del borde, el ancho de la linea y el tipo de
linea (punteada, continua, etc…).

Hay muchos atributos CSS disponibles, más de los


que podemos recordar. Así que no se asusten, con
el tiempo van a empezar a memorizar estas
propiedades. Pueden ver una lista completa acá.

Formas de dar estilo


Antes de empezar a dar estilos, necesitamos una
forma de decirle al browser qué vamos a darles
reglas de estilo.
Dejanos tu feedback! 👍 Hay varias formas de lograr esto (más adelante
veremos en detalle como funcionan cada una):

https://prep.soyhenry.com/html/ 4/11
22/7/2022 HTML/CSS | Henry Prep Course
usando el atributo style: esta es la forma
primitiva más simple, básicamente le damos HTML/CSS | Henry Prep Course
reglas a cada tag html.
usando el tag <style/> : Se utiliza este tag
en el <head> del documento HTML, con
esto logramos agrupar todas las reglas que
luego queremos que se apliquen a los
Contenido de la clase
elementos HTML.
Introducción a HTML Usar el tag <link/> : Este método nos
permite definir las reglas CSS en un
Elementos básicos HTML
documento separado e importarlo a nuestra
Atributos página (la ventaja que tiene es que podemos
Tags importar el mismo CSS a varias páginas).
Introducción a CSS
Atributo style Atributo style
<style> Todos los tags HTML pueden recibir el atributo
<link> style . Este atributo indica las reglas CSS (que
Selectores veremos más abajo), que se aplicaran sólo al
elemento que las tiene.
Aplicando reglas
Box Model
<h1 style="color:blue;">Esto es un título Azul</h1>
height y width
margin
border
Pros:
padding
Cálculo del box model Fácil de escribir y leer.
Cómo se aplican a un sólo elemento no hay
Otras propiedades CSS
forma de confundirse y que se aplique la
background regla a un elemento no deseado.
color
Cons:
font-size
Hojas de estilo externas y el La regla aplica a un sólo elemento, si
quisieramos que varios elementos tengan la
elemento <link>
misma regla, deberíamos copypastear!
Recursos adicionales

<style>
El tag <style> , que se escribe en el <head>
del documento, nos permite escribir reglas que se
aplicaran a uno o varios elementos html. Es
importante notar que con esta forma, podremos
darle estilo a muchos elementos de una sóla vez,
pero sólo a elementos que estén en el mismo
documento.

<html>
<head>
<style>
/*<!-- acá van las reglas -->*/
</style>
</head>
<body>
</body>
</html>

Pros:

Lugar central donde podemos escribir las


reglas CSS del documento
Podemos compartir reglas entre varios
elementos iguales

Cons:

No podemos compartir las reglas con otro


documento HTML.

Dejanos tu feedback! 👍 Hay que prestar atención a las reglas, y a


qué elementos se aplican.

https://prep.soyhenry.com/html/ 5/11
22/7/2022 HTML/CSS | Henry Prep Course

<link>
HTML/CSS | Henry Prep Course
Con el tag <link> dentro del <head> del
documento, vamos a poder importar un archivo css
que contenga varias reglas CSS. Funciona similar al
tag <style/> anterior. Pero ahora tenemos la
ventaja que podemos compartir el mismo archivo
Contenido de la clase css con varios documentos HTML.

Introducción a HTML
<!DOCTYPE html>
Elementos básicos HTML
<html>
Atributos <head>
Tags <link rel="stylesheet" href="styles.css">
</head>
Introducción a CSS
<body>
Atributo style </body>
<style> </html>

<link>
Selectores Pros:
Aplicando reglas
Lugar central donde podemos escribir las
Box Model
reglas CSS del documento
height y width Podemos compartir reglas entre varios
margin elementos iguales
Podemos compartir reglas entre varios
border
documentos HTML
padding
Cálculo del box model Cons:

Otras propiedades CSS Hay que prestar atención a las reglas, y a


background qué elementos se aplican.

color
font-size Selectores
Hojas de estilo externas y el Para poder aplicar reglas de estilo a los elementos
elemento <link> html, necesitamos una forma de saber cómo
seleccionar los elementos a los que deseamos
Recursos adicionales aplicar las reglas, para esto sirven los selectores
CSS.

Hay varios tipos de selectores, los más básicos son


los de tipo, donde indicamos a qué clase de
elemntos se van a aplicar las reglas, el ejemplo de
arriba usa un selector de tipo. Está diciendo:
aplicarle a todos los elementos de tipo <p> la

Dejanos tu feedback! 👍 regla de texto color rojo.

https://prep.soyhenry.com/html/ 6/11
22/7/2022 HTML/CSS | Henry Prep Course
El selector de tipo se puede usar con cualquier tipo
de tag: p, div, body, etc. Otra forma de usar HTML/CSS | Henry Prep Course
selectors poniendole un nombre o identificador a
cada elemento HTML. Para esto existe un atributo
que pueden recibir todos los tags llamados: id y
class .

Contenido de la clase
<div id="divId"></div>
Introducción a HTML <div class="divClass"></div>

Elementos básicos HTML


Atributos
Id : son nombre que sólo pueden aparecer una
Tags sólo vez en el documento. Es super especifico y
Introducción a CSS sirve para seleccionar UN solo elemento en
particular.
Atributo style
<style> Class : podemos asignarle el nombre de una
clase a un grupo de elementos html.
<link>
Selectores
Selectores básicos
Aplicando reglas
Selector de tipo: Selecciona todos los
Box Model
elementos que coinciden con el nombre del
height y width elemento especificado.
margin Sintaxis: eltname
border Ejemplo: input se aplicará a cualquier
elemento <input> .
padding
Selector de clase:
Cálculo del box model Selecciona todos los elementos que tienen el
Otras propiedades CSS atributo de class especificado.
background Sintaxis: .classname
Ejemplo: .index seleccionará cualquier
color
elemento que tenga la clase “index”.
font-size Selector de ID
Hojas de estilo externas y el Selecciona un elemento basándose en el
valor de su atributo id. Solo puede haber un
elemento <link>
elemento con un determinado ID dentro de
Recursos adicionales un documento.
Sintaxis: #idname
Ejemplo: #toc se aplicará a cualquier
elemento que tenga el ID “toc”.
Selector universal
Selecciona todos los elementos.
Opcionalmente, puede estar restringido a un
espacio de nombre específico o a todos los
espacios de nombres.
Sintaxis: ns| |
Ejemplo: * se aplicará a todos los elementos
del documento.
Selector de atributo
Selecciona elementos basándose en el valor
de un determinado atributo.
Sintaxis: [attr] [attr=value] [attr~=value]
[attr|=value] [attr^=value] [attr$=value]
[attr*=value]
Ejemplo: [autoplay] seleccionará todos los
elementos que tengan el atributo “autoplay”
establecido (a cualquier valor).

Anatomía de las reglas de estilo


Ahora que sabemos como seleccionar los
elementos a los que queremos aplicar las reglas
podemos escribir qué reglas queremos que se
apliquen. Para el ejemplo vamos a usar la etiqueta
<style> .

<style>
body {}

Dejanos tu feedback! 👍 .divClass {}

https://prep.soyhenry.com/html/ 7/11
22/7/2022 HTML/CSS | Henry Prep Course

#divId {} HTML/CSS | Henry Prep Course


</style>

En el ejemplo de arriba vemos tres selectores. El


primero es para el elemento body , el segundo
Contenido de la clase para todos los elementos de la clase divClass y
el tercero para el elemento que tenga el id:
Introducción a HTML divId . Dentro de los {} vamos a escribir todas
Elementos básicos HTML las reglas que queremos que se apliquen a esos
elementos.
Atributos
Tags
Introducción a CSS
Aplicando reglas
Atributo style
<style> Ahora que tenemos los elementos seleccionados
podemos empezar a agregar las reglas que
<link> habíamos visto antes.
Selectores
Aplicando reglas
div {
Box Model propiedad: valor;
height y width }

margin
border
padding
Box Model
Cálculo del box model
Otras propiedades CSS Para poder entender y luego manipular la forma en
que los elementos HTML aparecen distribuidos en
background la página, tenemos que aprender cómo son
representados estos en el browser.
color
font-size
Hojas de estilo externas y el
elemento <link>
Recursos adicionales

En un documento html cada elemento es


representado como una caja rectangular y en CSS
cada una de estas cajas tiene 4 capas que
podemos manipular. Esto se conoce como Modelo
de Caja o Box Model.

Yendo desde afuera hacia adentro, las capas son:

margin : el espacio que separa al elemento


de los otros elementos. Si los pensamos
como cajas, es el espacio entre las cajas.

border : el “borde de la caja”. Podemos


hacerlo visible con diferentes grosores,
estilos y colores, como ya hicimos varias
veces en ejercicios anteriores.

padding : el espacio entre el borde de la


caja y su contenido. En la metáfora de la
Dejanos tu feedback! 👍 caja, podríamos por ejemplo tener una caja

https://prep.soyhenry.com/html/ 8/11
22/7/2022 HTML/CSS | Henry Prep Course
grande con algo chiquito adentro, osea que
“habría mucho padding”. HTML/CSS | Henry Prep Course

content : el contenido de la caja. Por


ejemplo el texto en un h1, otros tags
anidados, etc, todo lo que esté contenido en
el elemento.
Contenido de la clase

Introducción a HTML height y width


Elementos básicos HTML Podemos decirle al navegador exactamente qué
Atributos tan alto y ancho queremos que sea nuestro
elemento (contenido), esto se usa en div , img
Tags
y otros elementos basados en la altura (para
Introducción a CSS determinar el tamaño del texto, necesitaremos usar
un propiedad de estilo diferente). Los valores de
Atributo style tamaño pueden estar en muchas medidas
<style> diferentes, pero el más común es el píxel “px”.
<link>
Selectores div {
Aplicando reglas height: 400px;
width: 400px;
Box Model
}
height y width
margin
border margin
padding
El margen es el área transparente alrededor del
Cálculo del box model elemento que deseas que no choque con nada. Es
la capa más externa en el Modelo de caja.
Otras propiedades CSS
background
color
border
font-size Borde establecerá un borde alrededor de su
elemento, puedes determinar el tamaño, color y
Hojas de estilo externas y el estilo del borde. Puede encontrar una lista de
elemento <link> estilos de borde aquí:
https://developer.mozilla.org/en-
Recursos adicionales US/docs/Web/CSS/border. El borde está fuera del
padding, pero dentro del margen.

div {
border: 1px solid black;
}

padding
El padding es el area transparente entre el borde y
el contenido, es similar al margen, pero para
adentro

Cálculo del box model


Cuando establecemos el alto y el ancho de un
elemento a traves de la regla css height y
width , sólo estamos configurando el contenido.
Para calcular la altura y el ancho reales, tenemos
que tener en cuenta el padding, el borde y el
margen.

padding es un área transparente alrededor


del contenido.
border se envolverá alrededor del relleno
margin es el área transparente más
externa que envuelve toda la caja.

Por ejemplo. Si establecemos la altura del


contenido en 20 px y el ancho en 20 px, el relleno
en 5 px, el borde en 1 px y el margen en 10 px.

Altura real = 25px (contenido) + 2 * 5px (relleno,


Dejanos tu feedback! 👍 cada lado) + 2 * 1 (borde de cada lado) + 2 * 10
(margen, cada lado) = 57px

https://prep.soyhenry.com/html/ 9/11
22/7/2022 HTML/CSS | Henry Prep Course
Ancho real = 25px (contenido) + 2 * 5px (relleno,
cada lado) + 2 * 1 (borde de cada lado) + 2 * 10 HTML/CSS | Henry Prep Course
(margen, cada lado) = 57px

Saber esto nos ayudará a dimensionar y posicionar


nuestros elementos correctamente.

Contenido de la clase
Otras propiedades CSS
Introducción a HTML
Elementos básicos HTML
background
Atributos
El background se puede establecer en una
Tags
variedad de reglas, la más común sería establecer
Introducción a CSS el fondo en un color o una imagen. Ambos se
muestran a continuación.
Atributo style
<style>
<link> .divClass {
background: red;
Selectores
}
Aplicando reglas
Box Model #divId {
background: url ('http://imageurl.com/image.jpg')
height y width
}
margin
border
padding
color
Cálculo del box model
Otras propiedades CSS El color se usa sólo para texto. Establecerá el color
de tu texto
background
color
font-size
font-size
Hojas de estilo externas y el No podemos usar ancho o alto para el texto, pero
podemos determinar el tamaño de la fuente
elemento <link> utilizada. Puede usar cualquier unidad de tamaño
aquí que usaría con una fuente en un procesador
Recursos adicionales
de textos (px, em, in, etc.). El más popular es px.

Hojas de estilo externas


y el elemento <link>
Hemos explicado cómo usar el elemento html
<style> . Esto está bien si tiene una página web
muy pequeña y un estilo mínimo, pero la mayoría
de las páginas comenzarían a sentirse abarrotadas
muy rápidamente si incluimos todo nuestro CSS en
el HTML. Afortunadamente, tenemos una solución
para eso, hojas de estilo externas y el elemento
<link> .

Una hoja de estilo externa es simplemente otro


archivo con el tipo de archivo .css.
Convencionalmente, este archivo se llama algo así
como “style.css”. Podemos tomar todas las reglas
de estilo que escribimos entre las etiquetas
<style> y transferirlas directamente al archivo
css. No necesitamos incluir nada más, solo las
reglas de estilo.

Una vez que tengamos una hoja de estilo externa


creada, necesitaremos asegurarnos de que el
navegador lea ese archivo y aplique las reglas a
nuestra página. Le decimos al navegador que
busque ese archivo utilizando el elemento
<link> . Podemos eliminar las etiquetas
<style> y en su lugar agregar el elemento
<link> . Dentro del elemento de enlace,
necesitaremos proporcionar la ubicación y el tipo
de archivo que estamos vinculando. Utilizaremos
dos banderas, la bandera “rel” y la bandera “href”.

Dejanos tu feedback! 👍
https://prep.soyhenry.com/html/ 10/11
22/7/2022 HTML/CSS | Henry Prep Course
La bandera rel solo le dirá al navegador qué tipo
de archivo es y cómo procesarlo. En nuestro caso HTML/CSS | Henry Prep Course
lo configuraremos como “hoja de estilo”

La bandera href le dirá al navegador dónde


encontrar el archivo. Si el archivo está en la misma
carpeta que nuestro archivo html, podemos
configurarlo en: “./styles.css” (esta ruta será
Contenido de la clase relativa)

Introducción a HTML
<link rel = "stylesheet" href = "./ styles.css" />
Elementos básicos HTML
Atributos
Tags
Ahora que tenemos nuestra hoja de estilo externa
Introducción a CSS vinculada a nuestro archivo HTML, deberíamos ver
Atributo style las reglas de estilo que establecemos reflejadas en
nuestra página.
<style>
<link>
Selectores Recursos adicionales
Aplicando reglas
Box Model MDN official CSS documentation
MDN official HTML documentation
height y width
Codecademy: Learn HTML
margin Codecademy: Learn CSS
border w3schools: The Box Model
padding
Cálculo del box model
Si tienes dudas sobre este tema, puedes
Otras propiedades CSS consultarlas en el canal html-y-css de Slack
background
color
font-size
Hojas de estilo externas y el Hecho con 💛 por alumnos de Henry
elemento <link>
Recursos adicionales

Dejanos tu feedback! 👍
https://prep.soyhenry.com/html/ 11/11

Potrebbero piacerti anche