Scribd
Cargar
29 vistas37 páginas

Apuntes HTML Básico - Css

Apuntes HTML básico - cssc

Cargado por

blackchorimarock
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 PDF, TXT o lee en línea desde Scribd
29 vistas37 páginas

Apuntes HTML Básico - Css

Apuntes HTML básico - cssc

Cargado por

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

RESUMEN PRIMEROS DÍAS

El lenguaje de marcas utilizado para los documentos web es el HTML


(HyperText Markup Language) Lenguaje de marcado de hipertexto. Podemos
considerar el hipertexto como un texto con características especiales como por
ejemplo permitir enlaces a otros documentos.

Los documentos escritos en HTML tendrán extensión de archivo .html o .htm


(siendo .html la más recomendada)

Los elementos en lenguaje HTML por lo general están delimitados por una
etiqueta de apertura y por una de cierre. Hay algunos elementos conocidos
como elementos “vacíos” que solo poseen una etiqueta sin existir en este caso
la de cierre.

La sintaxis de las etiquetas es la siguiente:

< nombreEtiqueta [atributo=”valorAtributo”]>

….. contenido del elemento

</nombreEtiqueta>

Nota: La utilización de [] en los apuntes quiere decir que su contenido puede estar o no estar,
en el caso de los atributos puede haber varios. Los [] no forman parte de la sintaxis del
lenguaje.

O sea, la etiqueta que marca el fin de un elemento es como la de apertura (sin


atributos) pero donde el nombre de la etiqueta va precedido de /

Ejemplo:

Un elemento párrafo con el texto “Hoy está lloviendo.” sería:

<p>
Hoy está lloviendo.
</p>

Un documento en HTML comenzará siempre por la línea de código


<!DOCTYPE html>

Esta línea es conocida como DTD (Definición de tipo de documento)

Después de esta línea va el elemento padre (único) del documento que está
definido entre las etiquetas <html> y </html>

1-37
Es normal que la etiqueta de apertura lleve una atributo de idioma, por
ejemplo <html lang=”es”> indicaría que el documento utiliza idioma
español.

El elemento <html> tiene dos hijos:

El head definido entre etiquetas <head> y </head> donde puede ir


información sobre el documento como son los metadatos (etiquetas <meta>),
el título de la página (entre etiquetas <title> y </title>) que llevará el texto
que aparezca por ejemplo en la pestaña del navegador o en la entrada de la
lista de marcadores, código de estilo css entre etiquetas <style> y </style>
y otra información como código Javascript o referencias a archivos de código
css externo.

El body definido entre etiquetas <body> y </body> donde irá todo lo que
se verá en la pantalla del navegador, o sea todos los elementos que formarán
la estructura de la página (directamente escritos en lenguaje html y que no se
creen dinámicamente con Javascript).

Algunos elementos html:

*de ahora en adelante entenderemos que si hablamos de elementos html y no


aclaramos que son elementos “vacíos” estarán definidos entre una etiqueta de
apertura y otra de cierre.

Como ya se adelantó el elemento P es un elemento párrafo que se define


mediante la etiqueta <p>
por defecto es un elemento de bloque lo cual implica que ocupará todo el
ancho de su contenedor. Si es hijo directo del body ocupará todo el ancho de
este. Se utiliza para crear un párrafo de texto (entendiendo por tal lo que
entendemos por ejemplo en un texto de un libro, o sea un grupo de líneas que
termina en un salto de línea)

Ejemplo

<p>
Este es un texto que forma parte de un elemento párrafo definido en
código html.
</p>

__________

DIV es un elemento al que podemos llamar “caja” que utilizaremos para


contener otros elementos. Se define utilizando las etiquetas <div>

2-37
Ejemplo de un div que contiene en su interior dos párrafos.

<div>
<p> Esto es un párrafo </p>
<p> Esto es otro párrafo dentro de un elemento div. </p>
</div>

Por defecto los divs son elementos de bloque.

__________

Elemento SPAN. Definido por la etiqueta <span>


Se trata de un contenedor, generalmente utilizado para texto, que al contrario
del div no es de bloque. Es un elemento “en línea” lo cual quiere decir que en
caso de no asignarle un ancho determinado, su anchura dependerá de su
contenido y no provoca un salto de línea (puede haber contenido a su derecha
y a su izquierda en la misma línea).

Ejemplo

<p>
Este un texto que forma parte de un <span>párrafo</span> aunque la
palabra párrafo anterior sea un elemento span.
</p>

Un uso frecuente de las etiquetas span es aplicar a un cierto texto un estilo


determinado.
__________

Elemento IMAGEN que se define por la etiqueta <img>


Se trata de un elemento vacío, con lo cual no lleva etiqueta de cierre.
Es un etiqueta utilizada para mostrar en nuestro documento una imagen
contenida en un archivo externo (jpg, png, gif, … ) Lleva el atributo src
atributo necesario para indicar la ruta donde se encuentra el archivo de
imagen.

Ejemplo

<img src=”flor.jpg”>

En ese ejemplo se indica que el elemento de imagen mostrará la imagen del


archivo flor.jpg que se encuentra en la misma ruta que el archivo del código
html. Sabemos que esto es así porque no se especifica una ruta donde
encontrar el archivo.

3-37
En este otro código: <img src=”imagenes/coche.png”>

El archivo de imagen coche.png se buscará dentro de una carpeta llamada


imágenes contenida en la misma ruta del archivo del código.

La etiqueta <br> genera un salto de línea, por lo tanto no podemos hablar de


un elemento como tal.

___________

ETIQUETAS SEMÁNTICAS DE HTML5

Son etiquetas que ayudan a los desarrolladores web a describir el contenido de


una página de manera más precisa.
<header>: contiene información general sobre el documento, como el título y
los enlaces de navegación.
<nav>: contiene un conjunto de enlaces de navegación.
<article>: contiene un contenido independiente y auto-contenido, como una
noticia o una publicación de blog.
<section>: contiene un conjunto de contenido relacionado temáticamente.
<aside>: contiene contenido que está relacionado con el contenido principal,
pero que no es esencial para entenderlo. Ejemplo: un sidebar con contenido
adicional o publicidad.
<footer>: contiene información de pie de página, como los derechos de autor
o los enlaces de contacto.
Además, HTML5 también proporciona etiquetas para describir el contenido de
una forma más precisa. Algunas de estas etiquetas incluyen:
• <figure>: contiene contenido multimedia, como imágenes o videos,
junto con su descripción (<figcaption>).
• <time>: indica una fecha o una hora.
• <mark>: marca el texto resaltado o subrayado.
Es importante mencionar que el uso de estas etiquetas no solo ayuda a los
desarrolladores web a estructurar mejor el contenido de una página, también
ayuda a los navegadores, motores de búsqueda y otros dispositivos a procesar
y presentar mejor el contenido.

La estructura correcta depende del contexto y del contenido específico de tu


página. Sin embargo, en general, se espera que un elemento <section>

4-37
contenga varios elementos <article> si los artículos son parte de un grupo
más grande de contenido relacionado temáticamente.
El elemento <section> es un contenedor genérico para contenido
temáticamente relacionado. Por ejemplo, podría usar un <section> para
agrupar varios artículos relacionados en una página de noticias. Cada artículo
individual se incluiría dentro de un <article>.
Por otro lado, el elemento <article> es utilizado para contenido autónomo y
que tiene un sentido por sí mismo. Por ejemplo, una entrada de blog, una
noticia o una publicación de redes sociales.
En resumen, se espera que un <section> contenga varios <article> si los
artículos son parte de un grupo más grande de contenido relacionado
temáticamente. Y <article> se usa para contenido autónomo y auto-contenido.

Pero… Se puede dividir un elemento <article> en varios elementos


<section> ?

Sí, es posible dividir un elemento <article> en varios elementos <section>.


Un elemento <article> es utilizado, como se ha comentado, para contenido
autónomo y que tiene un sentido por sí mismo, como una entrada de blog, una
noticia o una publicación de redes sociales. Sin embargo, ese contenido puede
estar dividido en varias secciones lógicas, como una introducción, un desarrollo
y una conclusión.
Cada una de estas secciones puede contener distinto tipo de contenido y para
ello se pueden utilizar los elementos <section> para agrupar ese contenido.
Esto ayuda a dar una estructura más clara al contenido y ayuda al motor de
búsqueda y a dispositivos de lectura a procesar el contenido de manera más
eficiente.
En resumen, sí se pueden dividir un <article> en varios <section>, es
recomendable hacerlo cuando el contenido dentro del <article> tiene
diferentes secciones lógicas y distinto tipo de contenido, agrupando esas
secciones con <section> ayuda a dar una estructura más clara al contenido y
procesarlo de manera más eficiente.

_____________

5-37
ALGO BÁSICO SOBRE CSS

Dos de los atributos más importantes que pueden llevar todos los elementos
HTML son:

id=”valor” El valor del atributo id (identificador) es el DNI del elemento que


lo lleva. Esto quiere decir que en el mismo documento html NO PUEDE haber
otro elemento con dicho valor en su atributo id.

class=”valor” En este caso el mismo valor sí puede tenerlo más de un


elemento en su atributo class, y esa es la razón de que exista ya que se utiliza
para hacer grupos o clases de elementos (ponien el mismo valor en el atributo
class de aquello elementos que pertenezcan a la misma clase) y así que
compartar un cierto estilo definido en el código css para esa clase.

Pues bien, sabiendo el significado de estos dos atributos de los elementos html
pasaremos a la parte de la declaración del estilo con css.

Si el estilo está declarado en el head del documento, solo será aplicado a los
elementos de ese documento y no podrá aplicarse a los de otros
documentos .html como sí sería posible en caso de escribir el código css en un
archivo externo con extensión .css y enlazarlo como veremos más adelante.

Para declarar el css en el head de un documento lo haremos entre etiquetas


<style> y </style>

Luego utilizaremos selectores para saber a qué elementos le queremos aplicar


un cierto estilo y escribiremos las propiedades y sus valores con la siguiente
sintaxis:

selector_de_elemento {

propiedad1: valor_propiedad₁;
propiedad2: valor_propiedad₂;
….
propiedadn: valor_propiedad_n;

Ese código anterior se conoce con el nombre de regla de estilo css

6-37
Veamos los 3 típos más básicos de selectores para hacer las reglas de
estilo:

Selector de etiqueta o selector de tipo de elemento:

Simplemente se usa el nombre de la etiqueta del elemento en la parte del


selector.

Por ejemplo con p{


color: red;
}

estaríamos seleccionando todos los elementos p (parrafos) del documento y


aplicando color rojo a su texto.

_____________

Selector de id o por identificador:

Se utiliza # seguido del valor del atributo id que queremos seleccionar.

Ejemplo:
#caja1 {
border: 5px solid blue;
}

Le aplicara un borde de 5 píxeles de grosor, trazo sólido y color azul al único


elemento cuyo valor de atributo id sea caja1, o sea que tenga id=”caja1”
dentro de su etiqueta de apertura.

_____________

Selector de clase:

Seleccionará todos los elementos que tengan un cierto valor indicado en su


atributo class y le aplicará el mismo estilo definido en la regla.

Se utiliza un (.) seguido del valor del atributo class.

.fondorojo {
background-color: red;
}

7-37
Le aplicará un color de fondo rojo a todos los elementos cuyo atributo class
tenga valor fondorojo o sea, que en su etiqueta de apertura aparezca
class=”fondorojo”

Ejemplo:

Si en el body tengo este código:

<p id=”primerparrafo” class=”fondoamarillo”>


Este es el primer párrafo y tiene fondo amarillo.
</p>

<p id=”segundoparrafo”>
Este es el segundo párrafo y no tiene fondo.
</p>

<div>
<p id=”par1div>
HOLA MUNDO.
</p>
<p class=”fondoamarillo”>
Esto es un párrafo con fondo amarillo dentro de un div con borde
negro.
</p>
</div>

y el head tengo el estilo:

<style>
#primerparrafo {
border: 2px solid green;
}
.fondoamarillo {
background-color: yellow;
}
div {
border: 5px solid black;
}
</style>

Obtendré en pantalla un primer párrafo con un borde verde de 2 píxeles da


grosor (estilo aplicado por id) que además tendrá fondo color amarillo por
pertenecer a la clase fondoamarillo (estilo aplicado por selector de clase).
Luego tendremos un segundo párrafo que no tiene ningún estilo aplicado pues
aunque tiene un id no se ha definido una regla de estilo para dicho id y no

8-37
pertenece a ninguna clase con estilo ni se le ha aplicado nada por ser un
elemento de etiqueta p pues no hay una regla con selector de etiqueta p.
Por último tenemos un div que tiene borde negro de 5 píxeles aplicado con un
selector de etiqueta (div en este caso) y que de haber en la página más
elementos con dicha etiqueta también mostrarían ese borde (si o se anulara
por otra regla). En el interior del div tendremos dos párrafos, uno con el texto
HOLA MUNDO. Que en principio no tiene un estilo determinado y un segundo
párrafo con fondo amarillo por pertenecer a la clase fondoamarillo y haber una
regla que le aplica ese estilo.

Existe una jerarquía determinada a la hora de aplicar estilos a los elementos.


De lo visto hasta ahora tenemos que las reglas de mayor jerarquía son los de
selector de id, luego las de clase y por último las de etiqueta.

Por ejemplo si un elemento tiene un fondo verde aplicado por selector de


etiqueta pero tiene un atributo class=”fondoazul” y una regla que le aplica un
fondo azul a los elementos de esa clase, entonces el elemento perdería el
fondo verde aplicado por la regla de etiqueta por ser “machacado” por la regla
de clase que tiene mayor jerarquía.

Si en el ejemplo anterior el elemento tiene un id determinado y existe una


regla con selector para ese valor de id que le aplica fondo negro, ese color
negro será el que se aplique porque es de mayor jerarquía la regla de id que la
de clase.

Una clase determinada puede ser aplicada sin problema a distintos tipos de
elementos (de etiquetas distintas) como se vio en el ejemplo de código
anterior con la clase fondoamarillo.

Si quisiéramos hacer una regla con un selector que solo aplicara un estilo a un
tipo de elemento (de una etiqueta determinada) que además pertenezca a una
clase lo haríamos con la sintaxis:

etiqueta.clase {

En el código del ejemplo anterior si hacemos una regla

div.fondoamarillo {
font-size: 20px;
}

Le estaríamos aplicando un tamaño de letra de 20px a todo texto contenido


dentro del elemento div que tiene clase fondoamarillo, pero no se le aplicaría al
primer párrafo aunque también comparta la clase fondoamarillo.

9-37
Por otro lado y siguiendo con el ejemplo de código anterior, si primer párrafo
dentro del div fuera seleccionado por otra regla que le aplicara un tamaño de
letra 15px (por ejemplo seleccionándolo por si id) el texto de ese párrafo
cogería dicho tamaño aunque el resto de texto del div (el del segundo párrafo
en el ejemplo) tendría tamaño 20px.

Otros selectores “avanzados”:

selector1 selector2 {

Cuando separamos distintos selectores por un espacio realmente estamos


seleccionando todos los elementos seleccionados por el selector de la derecha
que estén contenidos en los elementos seleccionados por el selector de su
izquierda. Se pueden utilizar más de dos selectores e iríamos de derecha a
izquierda lo cual implica de dentro hacia afuera.

Ejemplo 1:

div p {
….
}

En este ejemplo seleccionaríamos todos los párrafos contenidos dentro de un


elemento div, independientemente del nivel interior en qué se encuentre
(puede estar directamente dentro del div o dentro de otro elemento que esté
dentro de un div, o sea todos los parrafos que son descendientes de un div)

Ejemplo 2:

div .resaltado {

….
}

En este ejemplo se seleccionarían todos los elementos descendientes de un


elemento div que pertenezcan a la clase .resaltado

Cuidado !!! no es lo mismo div .resaltado que es lo explicado anteriormente,


que div.resaltado (sin espacio en medio) puesto que en este último caso
estamos seleccionando todos los div que tienen clase resaltado pero no el resto
de elementos que no son div que tienen dicha clase.

10-37
Ejemplo 3:

#caja2 p { …. }

En este caso seleccionamos todos los párrafos descendientes del elemento


cuyo valor de id es caja2

Ejemplo 4:

#caja3 p.fondoverde { … }

En este otro caso seleccionamos todos los párrafos descendientes del elemento
de id caja3 que además pernetezcan a la clase fondoverde

Ejemplo 5

.fondoclaro div { …. }

Con esto seleccionamos a todos los elementos div que sean descendientes de
elementos que tengan clase fondoclaro

Ejemplo 6

.fondoclaro div p { … }

Con esto seleccionamos a todos los párrafos descendientes de elementos div


que a su vez sean descendientes de elementos que tengan clase fondoclaro.

selector1>selector2 { … }

Con la utilización del símbolo > indicamos que seleccionamos los elementos
seleccionados por el selector de la derecha que son hijos directos (en el primer
nivel de profundidad) de un elemento seleccionado por el selector de la
izquierda.

11-37
Ejemplo:

Si el html es:

<div>
<p> hola </p>
<div>
<section>
<p>
Este no es hijo directo de un div, es nieto.
</p>
</section>
<div>
<p>
Este si.
</p>
</div>
</div>
<p>
fin
</p>
</div>

y el css tenemos la regla:

div>p { … }

Se seleccionarán todos los párrafos excepto el que está dentro de las etiquetas
<section> (utilizadas aquí sin ningún sentido, solo para tener un contenedor distinto a div)
ya que aunque ese párrafo es descendiente de un div y podría ser seleccionado
con el selector con espacio en lugar de > ( div p {---} ), en este caso no es
hijo directo del div pues es hijo directo de <section>.

12-37
ELEMENTOS TIPO LISTA EN HTML

Hay tres tipos principales de listas en HTML: no ordenadas (<ul>), ordenadas


(<ol>), y de definición (<dl>).

Lista no ordenada: Una lista no ordenada se utiliza para mostrar una lista de
elementos que no necesitan estar en un orden específico. Cada elemento de la
lista se marca con un símbolo, como un punto. El código HTML para una lista
no ordenada se ve así:

<ul>
<li>Primer elemento de la lista</li>
<li>Segundo elemento de la lista</li>
<li>Tercer elemento de la lista</li>
</ul>

Lista ordenada: Una lista ordenada se utiliza para mostrar una lista de
elementos en un orden específico. Cada elemento de la lista se marca con un
número. El código HTML para una lista ordenada se ve así:

<ol>
<li>Primer elemento de la lista</li>
<li>Segundo elemento de la lista</li>
<li>Tercer elemento de la lista</li>
</ol>

Lista de definición: Una lista de definición se utiliza para mostrar una lista de
términos y sus definiciones correspondientes. Los términos se marcan con el
elemento <dt>, mientras que las definiciones se marcan con el elemento
<dd>. El código HTML para una lista de definición se ve así:

<dl>
<dt>Término 1</dt>
<dd>Definición del término 1</dd>
<dt>Término 2</dt>
<dd>Definición del término 2</dd>
<dt>Término 3</dt>
<dd>Definición del término 3</dd>
</dl>

13-37
El resultado visual de los códigos anteriores sería el siguiente:

Lista no ordenada:

• Primer elemento de la lista


• Segundo elemento de la lista
• Tercer elemento de la lista

Lista ordenada:

1. Primer elemento de la lista


2. Segundo elemento de la lista
3. Tercer elemento de la lista

Lista de definición:

Término 1
Definición del término 1
Término 2
Definición del término 2
Término 3
Definición del término 3

14-37
ENLACES (hipervículos)

Para otorgarle a un texto, imagen, o cualquier elemento del DOM (Document


Object Model) la capacidad de ser “clicable” y que nos lleve a otro documento
(archivo html, imagen, pdf, etc) o a una parte determinada del mismo
documento html utilizamos las etiquetas de enlace
<a href=”destino” > elemento clicable </a>

Por ejemplo si queremos que al pinchar sobre el texto “Visitar web de


Academia Galega” nos lleve a la url de la Academia Galega da Lingua
( https://www.academia.gal ) lo haremos de la siguiente forma:

<a href=”https://www.academia.gal”>
Visitar web de Academia Galega
</a>

Es importante el atributo href ya que es el que toma el valor de la url o archivo


al cual nos dirigiremos.

La etiqueta de enlace también puede llevar un atributo target que determina


donde se va a mostrar la página o archivo al cual nos dirige el valor de href.

Por ejemplo si el atributo target toma el valor “_blank”, el archivo se abrirá en


una nueva pestaña del navegador que utilicemos y no perderemos la
posibilidad de ver nuestro documento actual al no cargar el nuevo documento
en la misma pestaña de navegador. Puede tomar otros valores que como
“_parent”, el cual haría que se mostrara el documento en la ventana “madre”
de donde se muestra el documento html que posee el enlace. Esto se utilizaba
mucho más antiguamente, cuando se creaban páginas utilizando marcos
(frames) aunque a día de hoy todavía hay casos en los que puede tener
sentido.

También el atributo target puede llevar como valor el valor del atributo name
de un elemento iframe (que veremos a continuación) para que se muestre
dentro de dicho iframe.

La sintaxis para abrir la web en una nueva pestaña sería:

<a href=”https://www.academia.gal” target=”_blank”>


Visitar web de Academia Galega
</a>

15-37
IFRAMES (Marcos flotantes)

Estos elementos están definidos por las etiquetas <iframe> y </iframe>


aunque curiosamente entre la etiqueta de apertura y de cierre del elemento no
se suele ver ningún contenido, aunque sí puede haberlo. Dicho contenido será
un mensaje que se mostrará en caso de que el navegador no permita la
visualización del elemento iframe, que hoy en día es una circunstancia muy
poco común.

Un elemento iframe marca una zona de la web donde se puede mostrar otro
documento (página web, imagen, pdf, vídeo, …).

El documento que se mostrará inicialmente en el iframe irá indicado como


valor del atriburo src de la etiqueta de apertura. También puede llevar un
atributo name con un nombre asignado que se utilizará (como se indicó en la
página anterior) para poder indicar que ese iframe es el destino donde mostrar
documentos utilizando un enlace.

El tamaño del elemento iframe se puede indicar mediante atributos html width
y height propios de su etiqueta o mendiante propiedades css.

Ejemplo de código:

<a href=”https://www.academia.gal” target=”mi_ventana”>


Visitar web de Academia Galega
</a>
<br>
<iframe src=”https://www.xunga.gal” name=”mi_ventana”
width=”800” height=”500”> </iframe>

En este código se define un elemento iframe de dimensiones 800x500


establecidas por atributos html (mejor usar css) donde inicialmente se muestra
la página de la Xunta de Galicia pero si hacemos clic en el texto “Visitar web de
Academia Galega” que lleva el enlace se mostrará la página de la Academia
Galega dentro del elemento iframe.

Aquí comentaré algo al respecto del valor “_parent” que puede tomar un
atributo target, y es que si la web que se muestra dentro de un iframe lleva un
enlace donde el valor de target es “_parent” si pinchamos en dicho enlace la
página, o documento indicado en su href se cargará en la pestaña del
navegador donde se muestra la página principal (entendamos como tal la
página que contiene el elemento iframe donde se muestra el documento con el
enlace y el valor target=”_parent”).

La utilización de iframes suele hacerse para mostrar contenido publicitario o


por ejemplo para mostrar un vídeo de youtube.

16-37
TABLAS

En html disponemos también de un elemento para crear tablas, las cuales hace
años se utilizaban para disponer los elementos dentro de la página (maquetar)
pero que a día de hoy está “prohibido” ya que disponemos de css para ello.

Las utilizaremos principalmente para datos tabulados.

La etiqueta html que define una tabla es la etiqueta <table> y en su interior


en un primer nivel encontraremos elementos <tr> que definen las filas y
dentro de los elementos <tr> encontraremos tantos elementos <td> como
celdas contenga dicha fila. Cabe destacar que también se pueden encontrar
dentro de las etiquetas <tr> etiquetas <th> que son celdas especiales para
encabezados y que mostrarán el texto en negrita.

Ejemplo de tabla de 4 filas de 3 celdas cada una donde la primera fila


tiene celdas de encambezado.

<table>
<tr>
<th>CELDA 1-A</th>
<th>CELDA 1-B</th>
<th>CELDA 1-C</th>
</tr>
<tr>
<td>CELDA 2-A</td>
<td>CELDA 2-B</td>
<td>CELDA 2-C</td>
</tr>
<tr>
<td>CELDA 3-A</td>
<td>CELDA 3-B</td>
<td>CELDA 3-C</td>
</tr>
<tr>
<td>CELDA 4-A</td>
<td>CELDA 4-B</td>
<td>CELDA 4-C</td>
</tr>
</table>

Las celdas pueden llevar atributos para indicar que se expanden “robando” el
sitio de otras a su derecha o a su izquierda. Lo que en Word por ejemplo sería
“combinar celdas”.

Para indicar que una celda se expande a su derecha tomando X huecos que no
le corresponden indicaremos el valor X+1 (su hueco sumado a los que toma
prestados) en el valor colspan de la etiqueta td. Mientras que si se expande

17-37
hacia abajo tomando huecos de las filas por debajo de ella lo indicaremos en el
atributo rowspan.

Tenemos que tener mucho cuidado para que la


tabla no se descuadre y acordarnos de suprimir
las etiquetas td que le ceden su sitio a la que se
expande.

Una misma celda td puede llevar ambos atributos indicando que se expande a
su derecha y hacia abajo a la vez.

Partiendo de una tabla de 5 filas de cuatro celdas cada una (la primera fila
lleva encabezados) si hacemos las siguientes combinaciones obtendremos el
resultado mostrado en la imagen de la página siguiente.

<table border="1" cellspacing="0">


<tr>
<th colspan="2">CELDA 1-A y 2-A</th>
<th>CELDA 1-C</th>
<th>CELDA 1-D</th>
</tr>
<tr>
<td>CELDA 2-A</td>
<td rowspan="3">CELDA 2-B 3-B y 4-B</td>
<td>CELDA 2-C</td>
<td>CELDA 2-D</td>
</tr>
<tr>
<td>CELDA 3-A</td>
<td>CELDA 3-D</td>
<td>CELDA 3-D</td>
</tr>
<tr>
<td>CELDA 4-A</td>
<td colspan="2" rowspan="2">CELDA 4-C 4-D 5-C y 5-D</td>
</tr>
<tr>
<td>CELDA 5-A</td>
<td>CELDA 5-B</td>
</tr>
</table>

18-37
____________

POSICIONAMIENTO

Para posicionar elementos en la pantalla disponemos de la propiedad position


en css.

Los valores principales que puede tomar position son:


static (valor por defecto), relative, absolute, fixed y sticky

Un elemento con valor static se considera NO posicionado, sea porque no se le


ha aplicado ningún valor a la propiedad position de dicho elemento y toma el
valor por defecto o porque se le ha aplicado position:static;

Los posición de los elementos posicionados se puede alterar mediante las


propiedades top, bottom, left y right

top indica desplazamiento hacia abajo del elemento al que se le aplique si el


valor es positivo, mientras que indicará desplazamiento hacia arriba si dicho
valor es negativo. El valor indicará la distancia entre el punto de referencia
(dependiente del valor de position) y la parte superior del elemento.

bottom indica desplazamiento hacia arriba del elemento al que se le aplique si


el valor es positivo, mientras que indicará desplazamiento hacia abajo si dicho
valor es negativo. El valor indicará la distancia entre el punto de referencia
(dependiente del valor de position) y la parte inferior del elemento.

left indica desplazamiento hacia la derecha del elemento al que se le aplique si


el valor es positivo, mientras que indicará desplazamiento hacia la izquierda si
dicho valor es negativo. El valor indicará la distancia entre el punto de
referencia (dependiente del valor de position) y el lado izquierdo del elemento.

right indica desplazamiento hacia la izquierda del elemento al que se le


aplique si el valor es positivo, mientras que indicará desplazamiento hacia la
derecha si dicho valor es negativo. El valor indicará la distancia entre el punto

19-37
de referencia (dependiente del valor de position) y el lado derecho del
elemento.
position: relative;
El valor relative toma como referencia la posición inicial del elemento. La
utilización de relative no hace perder el hueco que ocupaba el elemento, dicho
de otra forma, el resto de elementos no toman el espacio que el elemento deja
al ser desplazado.

Teniendo el código:

<body>
<div id="caja1" class="caja">CAJA 1</div>
<div id="caja2" class="caja">CAJA 2</div>
<div id="caja3" class="caja">CAJA 3</div>
<div id="caja4" class="caja">CAJA 4</div>
</body>

Si el css solo aplica tamaño y color a las cajas obtenemos el siguiente


resultado:

Si a la caja 2 le aplicamos lo siguiente:

#caja2 {
position: relative;
top: 50px;
left: 100px;
}

Resulta:

Se desplaza 100px a la derecha desde su posición original y 50px


hacia abajo, también desde su posición original.

20-37
position: absolute;
El valor relative toma como referencia la posición del ancestro más cercano
posicionado del elemento (o sea, que no tenga static como valor de position, ni
por defecto ni por haber sido establecido).

Partamos para esta explicación del siguiente código:

Para el CSS tenemos:

#madre {
background-color: red;
border: 2px solid black;
width: 400px;
height: 300px;
}
#abuela {
background-color:aqua;
border: 2px solid black;
width: 1000px;
height: 800px;
}

#caja {
background-color: green;
border: 2px solid black;
}

Y para el HTML tenemos:

<body>
<div id="abuela">
<div id="madre">
<div id="caja" class="caja">CAJA</div>
<p>Este texto es del párrafo primero. </p>
<p>Este es el segundo párrafo. Lorem ipsum
dolor sit amet consectetur adipisicing elit. Omnis,
natus? </p>

</div>
</div>
</body>

21-37
Con esto obtenemos el siguiente resultado en pantalla:

Ninguno de los elementos tiene establecido un valor de la propiedad position


con lo cual son elementos NO posicionados.

Si a la caja verde le aplicamos position:absolute; ésta se saldrá del flujo y se


posicionará de acuerdo a lo que indiquemos como desplazamiento tomando de
punto de partida la posición de su ancestro más cercano posicionado, que en
este caso como ninguno está posicionado será el <body> Para el ejemplo
aplicaremos top: 350px; y left: 500px; para hacerlo un poco exagerado y que
se vea claro.

#caja {
position:absolute;
top: 350px;
left: 1200px;
background-color: green;
border: 2px solid black;
}

Las medidas indicadas de top y left son respecto a los lados del <body>

22-37
Supongamos ahora que posicionamos la caja celeste (abuela) pero que la roja
(madre) sigue sin posicionar y le ponemos a la caja un left: 600px y un top:
350px

#madre {
background-color: red;
border: 2px solid black;
width: 400px;
height: 300px;
}

#abuela {
position:relative;
background-color: aqua;
border: 2px solid black;
width: 1000px;
height: 800px;
}

#caja {
position:absolute;
top: 350px;
left: 600px;
background-color: green;
border: 2px solid black;
}

El resultado sería:

Donde la referencia es la caja abuela (celeste) no el <body>

La caja celeste la hemos posicionado con valor relative pero con cualquier valor
que no sea static valdría para considerarla posicionada.

23-37
Ahora daremos posicionamiento a la caja roja (madre) y añadiremos:
bottom: 70px; y right: 100px; a la caja roja.

#madre {
position:absolute;
background-color: red;
border: 2px solid black;
width: 400px;
height: 300px;
}

#caja {
position:absolute;
right: 100px;
bottom: 70px;
background-color: green;
border: 2px solid black;
}

La referencia ahora para las coodenadas de la caja serán los lados de su caja
madre (la roja) que está posicionada, esta vez con absolute.

En todos estos casos de posicionamiento absoluto de la caja podemos ver que


pierde su espacio original y lo ocupa el párrafo que va a continuación,
quedando la caja sobre él.

24-37
position: fixed;
El valor fixed toma como referencia el <body> para su posicionamiento
mediante top, bottom, left o right y deja fijada en esa posición el elemento
como si estuviera clavado con una chincheta aunque se haga scroll. El
elemento se sale del flujo y pierde su espacio.

#caja {
position:fixed;
right:0;
background-color: green;
border: 2px solid black;
}

Y si hacemos scroll hacia abajo vemos que sigue en su posición:

25-37
position: sticky;
El valor sticky mantiene el hueco al igual que relative. Toma de referencia el
<body> y al producir scroll y llegar a la posición fijada, por ejemplo por top se
queda ahí pegado.

______

FLOAT

Para maquetar y distribuir a nuestro gusto los elementos de la página


sacándolos del flujo normal disponemos de la propiedad CSS Float, aunque
actualmente, debido a que su uso a veces se puede complicar bastante, se
tiende a utilizar otras formas de maquetación como son Flex-Box o CSS Grid.

Los valores principales de la propiedad float son:

left, que hace flotar el elemento a la izquierda de su contenedor, saliéndose


del flujo.

right, que hace que el elemento flote a la derecha de su contenedor


saliéndose del flujo.

none, que hace que no flote, con lo cual si tenía otro valor establecido
anteriormente ese valor dejará de tener efecto.

Para evitar que el efecto del float que tiene un elemento le afecte al que lo
sigue, a este último se le puede aplicar la propiedad de css clear

clear si lleva el valor left evitara el efecto del float:left del elemento
predecesor, si lleva el valor right evitará el efecto del float:right del elemento
predecesor y si lleva el valor both evitará tanto el valor left como el right que
lleve la propiedad float del elemento predecesor, por lo cual se suele utilizar
clear:both sea cual sea el valor del float predecesor.

26-37
Si un elemento lleva float y los que lo siguen no, estos ocuparán el espacio que
dejó al salirse del flujo.

Partamos del código:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Floats</title>
<style>
body{
margin: 0;
}
*{
box-sizing: border-box;
}
.caja {
width: 200px;
height: 200px;
padding:20px;
font-size: 2em;

}
#caja1 {
background-color: red;

}
#caja2 {
background-color: green;

}
#caja3 {
background-color: blue;

}
#caja4 {
background-color: magenta;

}
</style>
</head>
<body>
<div id="caja1" class="caja">CAJA 1</div>
<div id="caja2" class="caja">CAJA 2</div>
<div id="caja3" class="caja">CAJA 3</div>
<div id="caja4" class="caja">CAJA 4</div>
</body>

</html>

27-37
Que produce el resultado:

Si a la caja1 le aplicamos float:left; así:

#caja1 {
background-color: red;
float:left;
}

El elemento caja1 flotará a la izquierda del body y el elemento caja2 ocupa su


espacio (solo mostrando su contenido resultando un comportamiento
indeseado).

Para entenderlo mejor le vamos a aplicar a caja1 lo siguiente:

#caja1 {
position: relative;
left: 100px;
background-color: red;
float:left;
}

Con esto posicionamos la caja roja y la desplazamos 100px a su derecha


dejando ver que la caja verde realmente está ocupando su espacio por haberse
la roja salido del flujo. El resultado sería:

28-37
Mientras que si a la caja verde (caja2) también le aplicamos float:left; también
se saldrá y flotará a la izquierda de su contenedor que es el body y topará con
la caja roja. El resultado habiendo sacado el desplazamiento a la derecha de la
caja1

#caja1 {
background-color: red;
float:left;
}
#caja2 {
background-color: green;
float:left;
}

Y observamos el mismo comportamiento extraño del contenido, esta vez en la


caja3.

Si aplicamos a todas la propiedad float:left; (lo hago mediante una clase ya


que va a todas)

.caja {
width: 200px;
height: 200px;
padding:20px;
font-size: 2em;
float:left;
}

29-37
El resultado es:

Si añadimos otro elemento después de las cajas, dejando así el body:

<body>
<div id="caja1" class="caja">CAJA 1</div>
<div id="caja2" class="caja">CAJA 2</div>
<div id="caja3" class="caja">CAJA 3</div>
<div id="caja4" class="caja">CAJA 4</div>
<p id=”parr”>Esto es un párrafo.</p>
</body>

El nuevo elemento, en este caso un párrafo, se vería afectado por el float de la


cuarta caja.

Podríamos sacárselo a dicha caja o utilizar la propiedad clear en el párrafo


añadiendo esto al css:

#parr{
clear: both;
}

En este caso también valdría clear:left; ya que left es el valor del float de la
caja4.

El resultado sería entonces:

En el caso de poner a todas las cajas el valor right, primero sin utilizar el clear
en el párrafo el resultado sería:

30-37
Y utilizando clear en el párrafo:

_________________

ENLACES ANCLA

Hemos visto anteriormente los enlaces a otros documentos, tanto si son


locales como si son mediante su url externa.

Existe una forma de hacer que un enlace nos lleve a una cierta parte de un
documento, sea dentro del mismo documento donde ponemos el enlace, sea
de un documento externo.

Para realizar esto primero tenemos que asegurarnos que en la parte del
documento “destino” a la que queramos acceder mediante el enlace tengamos
un elemento con un valor en el atributo id.

Una vez tengamos dicho valor lo utilizaremos en el enlace como valor del
atributo href pero precedido (sin espacios) del carácter #

Supongamos que en nuestro documento tenemos un elemento con


id=”parrafo50”

Si queremos hacer un enlace que al pinchar en el texto “Ir al párrafo 50” nos
lleve a dicho elemento, lo haremos así:

<a href=”#parrafo50”>Ir al párrafo 50</a>

En este caso el elemento al que queremos acceder está en el mismo


documento donde tenemos el enlace pero también puede estar en un
documento externo.

Pongamos que tenemos un archivo pagina2.html donde tenemos un elemento


con id=”notaaclaratoria” y que desde nuestro archivo principal.html
pinchando el texto “Visitar nota del la página 2” queremos acceder al
documento pagina2.html pero a la altura del elemento de id=”notaaclaratoria”

31-37
El código que tenemos que poner en el documento principal.html será:

<a href=”pagina2.html#notaaclaratoria”> Visitar nota del la página 2</a>

Tenemos que tener en cuenta que dicho valor href del ejemplo supone que el
documento pagina2.html está en la misma carpeta que el documento que lleva
el enlace principal.html. En otro caso el valor de href debe indicar la ruta
(relativa o absoluta) a seguir para localizar el archivo.

Por ejemplo, si el documento al que queremos acceder está dentro de una


carpeta llamada nivel2 que está en la carpeta donde se encuentra
principal.html el código sería:

<a href=”nivel2/pagina2.html#notaaclaratoria”>
Visitar nota del la página 2
</a>

Sin embargo si estuviera en una carpeta un nivel por encima de la ubicación de


principal.html, o sea, en la carpeta madre de la carpeta donde se encuentra
principal.html tendríamos que indicar que hay que salir de la carpeta actual
para localizar el archivo y el código sería:

<a href=”../pagina2.html#notaaclaratoria”>
Visitar nota del la página 2
</a>

Si el archivo pagina2.html del ejemplo se encuentra en otro sitio, sea en


distinto servidor o el mismo pero conocemos su ruta absoluta el código podría
ser:

<a href=”http://www.nombredominio.com/pagina2.html#notaaclaratoria”>
Visitar nota del la página 2
</a>

En este ejemplo el documento pagina2.html estaría en la carpeta raiz del sitio


web http://www.nombredominio.com

UNIDADES DE MEDIDA

Cuando necesitamos indicar en CSS unidades de medida, tanto para tamaño


de letra como para dimensiones de un elemento podemos utilizar distintas
unidades de medida.

Para tamaños fijos podemos utilizar el píxel indicando el número seguido de px

Por ejemplo:
width: 200px;

32-37
Pero también hay forma de indicar tamaños de forma relativa, el más básico es
el % que dependerá de las dimensiones del contenedor del elemento al que se
le aplique.

Por ejemplo, si tenemos un div que es hijo directo del body y queremos que su
ancho sea la mitad del ancho del body lo podemos indicar así en su css:

width: 50%;

Tambien existen dos unidades de medidas dependientes del tamaño fijado para
la letra. Estas son em y rem y el número indicaría el múltiplo del tamaño
fijado.

em toma de referencia el tamaño de la letra fijado para el contenedor del


elemento al que le queremos aplicar el tamaño utilizando esta medida, bien
sea porque se lo hemos fijado anteriormente o porque venga fijado por defecto
dependiendo del navegador. Por lo general el tamaño establecido por defecto
es de 16px en los navegadores.

Ejemplo 1:
font-size: 2em;

Establecería un tamaño de letra de 32px si tomamos el valor establecido


por defecto por el navegador de 16px

Ejemplo 2:

Supongamos que en el css tenemos estas dos reglas:

p{
font-size: 20px;
}

.doble {
font-size: 2em;
}
Y que en el html tenemos lo siguiente:

<p> Este es el primer párrafo </p>


<p class=”doble”>Este es el segundo párrafo con letra mayor</p>

En este caso el primer párrafo llevará letra tamaño 20px porque está
establecida para todos los párrafos mientras que el segundo aplicará el tamaño
2em considerando que 1em toma el valor establecido para todos los párrafos
(el texto que se mostrará está dentro de etiquetas p)

33-37
Resultado:

--------

rem toma como referencia el valor establecido para el elemento raíz. ( La r


es de root, raíz en inglés ) El elemento raiz es la etiqueta <html> no <body>

Si no se establece en el CSS un valor para la fuente del elemento <html> la


unidad rem será la fijada para el navegador, como se comentó anteriormente
será generalmente 16px

--------

Otro tipo de unidades de medida relativas son vh y vw que hacen referencia a


las dimensiones del viewport, la zona de la pantalla donde se muestra el
contenido.

Vw viene de Viewport Width y tomará como referencia la anchura del


Viewport

Vh viene de Viewport Height y tomará como referencia la altura del


Viewport.

Ejemplo:

Si el ancho del Viewport es de 900px y tenemos para un elemento establecido


font-size: 2vw; estaríamos indicando que el tamaño de letra es de 18px ya
que la unidad 1vw indica el 1% de la anchura del Viewport.
En otras palabras, para indicar que un elemento tiene un ancho de la mitad de
la anchura del Viewport le pondríamos width: 50vw;

Al igual que si queremos indicar que un elemento tiene una altura igual a la
altura del Viewport le pondríamos a dicho elemento height: 100vw; algo que
normalmente le aplicamos al body cuando queremos centrar con flex-box un
elemento verticalmente en la pantalla.

_________________

34-37
MEDIA QUERIES

Las media queries son un mecanismo de CSS para añadir o sustituir


propiedades a reglas css generales o también para crear nuevas reglas css
siempre dependiendo de las dimensiones y/o del tipo de dispositivo donde se
muestre la página web.

Se incluyen después de las reglas generales de CSS y también se pueden


cargar mediante link en el head de la página.

La sintaxis es:

@media not|only mediatype and|not|only (media feature) {

reglas css
}

El operador | utilizado en la sitaxis indida disyuntiva (or)

mediatype hace referencia al tipo de medio donde se va a mostrar la página.

Sus valores más frecuentes son:

all → todos
print → impresora
screen → pantalla
speech → lector de pantalla

media feature hace referencia a las dimensiones del medio

Valores:
width
height
max-height / min-height
min-width / max-width

también se puede indicar por ejemplo la orientación (útil para móviles y


tablets):

orientation puede tomar los valores landscape (apaisado) o portrait


(vertical)

35-37
Como se ve en el ejemplo anterior podemos utilizar and para forzar que se
cumplan varias condiciones, tanto de tipo de medio como de “media features”

Si queremos que se cargue un archivo de estilo externo dependiendo de la


media query sería en el head donde tengamos que indicarlo:

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

En este ejemplo el archivo example.css se tendría en cuenta cuando el ancho


sea inferior a 800px.

MEDIDAS FRECUENTES:

/* Tamaño por defecto pantallas (1280-1024) */


@media all and (min-width: 1024px) and (max-width: 1280px) { }

/* Tamaño tablet horizontal (1024-768) */


@media all and (min-width: 768px) and (max-width: 1024px) { }

/* Tamaño tablet (768-480) */


@media all and (min-width: 480px) and (max-width: 768px) { }

/* Tamaño teléfonos (480-menos ) */


@media all and (max-width: 480px) { }

/* Orientación: Vertical */
@media screen and (orientation:portrait) { }

/* Orientación: Horizontal */
@media screen and (orientation:landscape) { }

/* iPhone - Orientación: Vertical */


@media screen and (max-device-width: 480px) and (orientation:portrait) { }

/* iPhone - Orientación: Horizontal */


@media screen and (max-device-width: 480px) and (orientation:landscape) { }

36-37
/* iPad - Orientación: Vertical */
@media screen and (min-device-width: 481px) and (orientation:portrait) { }

/* iPad - Orientación: Horizontal */


@media screen and (min-device-width: 481px) and (orientation:landscape) { }

37-37

También podría gustarte