continuación al estudio de HTML 5………….

En unas etiquetas que nos interesa conocer

ARTICLE
Esta etiqueta nos sirve como entradas de de diferentes artículos dentro de nuestra pagina que
estamos creando.

<article>
Esta es la primera entrada de nuestro block
</article>

Incluso dentro de estas etiquetas se puede definir las estructuras tipo <header></header> y
<footer></footer>

<article>
<header>
</header>

<footer>
</footer>
</article>

HGROUP
Otra de las etiquetas interesantes es <hgroup></hgroup> que son interesantes en el término del
rendimiento al cargar la página que visualizamos, ya que nos permite agrupar los Títulos o
subtítulos que pueden tener nuestras diferentes artículos o posteos.

<hgroup>
<h1> </h1>
<h2></h2>
……
</hgroup>

FIGURE Y FIGCAPTION

Estas etiquetas fueron incluidas para contener e identificar la imagen,video,etc junto con el texto
que da una pequeña explicación.

<figure>
<img src = “Imagen” alt= “si la imagen no carga este parametro da como el nombre de lo
que es es una pequena descripcion />
<figcaption>
Esta etiqueta encierra al texto que da un poco de información de la imagen
</figcaption>
</figure>
MARK

Esta etiqueta sirve para resaltar una palabra o palabra que ayudará a la hora de un filtro de
búsqueda.

<mark> Texto que se resaltará </mark>

EM

Esta etiqueta es usada para poner el texto en cursiva/énfasis

<em> Este texto está en minúsculas </em>

STRONG

Esta etiqueta es usada para remarcar en negritas

<strong> Texto en negrita </strong>

SMALL

Esta etiqueta es usada para hacer la letra más pequeña, que es útil en impresiones legales

<small>Derechos Reservados &copy; 2011 MinkBooks</small>

CITE

Esta etiqueta es usada para encerrar el título de un libro, canción, etc.

<span>Amo la película <cite>Tentaciones</cite></span>

ADDRESS

Esta etiqueta es usada para encerrar alguna dirección.

<address> <a href=”[Link] Gauchat</a>

</address>
ELEMENTOS BLOCK

Cada navegador ordena los elementos por defecto de acuerdo con su tipo block(bloque)
inline(en linea)

block Estos se posicionan uno sobre otro hacia abajo de la página

inline Estos se posicionan uno a lado del a lo ancho de la página

Referenciando por cualquier atributo

Otra forma de hacer referencia a cualquier elemento y aplicar algunos estilos es directamente a
través de un atributo que tenga este elemento. Es decir, imaginemos que tenemos dos etiquetas
<p> dentro de estas se le asigna el atributo name sin importar el valor de este. Entonces la
manera de hacer referencia a esas dos etiquetas <p>, es mediante:

p[name] {
// estilos
}

Puede ser cualquier atributo no solamente name o en el caso que se quiera hacer referencia a una
sola etiqueta <p>

p[name = “al valor establecido] {

//estilos
}

También es posible hacer uso de expresiones regulares junto con lo anteriormente explicado

Ejemplos

Indica toda etiqueta <p> con parámetro name que empiece con “mi”

p[name] ^ = “mi” {
//estilos
}

Indica toda etiqueta <p> con parámetro name que termine con “mi”

p[name]$ = “mi” {
//estilos
}
Indica toda etiqueta <p> con parámetro name que contenga la palabra “mi”

p[name]*= “mi” {
//estilos
}
REFERENCIANDO POR PSEUDO CLASES

Como tenemos etiquetas que son padres, obviamente tenemos etiquetas que son hijos y hermanos.
Imaginemos que dentro de una etiqueta <div>, tenemos cuatro etiquetas <p> , entonces las
etiquetas <p> son hijos de la etiqueta <div> y entre las etiquetas <p> son hermanos

Para hacer referencia a las equitas <p> que son hijos de alguna otra etiqueta o también aplicar
para otras etiquetas que no sean <p>

p:nth-child()

Dentro del paréntesis se puede ingresar un número que indicará el número de hermano o en otro
caso las palabras claves odd que afecta a los hijos impares y la palabra even que afecta a los
hijos pares

Existen otras pseudoclases que son:

first-child que afecta al primer hijo

last-child que afecta al último hijo
only-child que afecta al único hijo de un padre

Existe otra pseudo clase es not que significa aplicarlo a todos menos a cierta equita

:not(p){
// estilos
}

:not (.mitexto){
// estilos
}

NUEVOS SELECTORES

Para ayudarnos un poco mas a seleccionar la etiqueta a la cual se le asignan los estilos, se hace
uso de algunos nuevos selectores que son: > + ~

> Este nos ayuda a indicar las etiquetas afectadas precedidas de

un padre

div > p{
// estilos
}

+ Este nos ayuda a indicar el elemento inmediato después de un

padre o un hermano

p.texto1 + p{
// estilos
}
~ Esta nos ayuda ha aplicar estilos a todos los hermanos después
del hijo de la izquierda

p.texto1 ~ p {
//estilos
}

ELEMENTOS

Margin : Es el espacio alrededor del elemento, el que se encuentra

por fuera del borde de la caja

pading : Es el espacio alrededor del elemento, pero este se

encuentra por dentro del borde de la caja

font-style : permite definir el aspecto de una familia tipográfica

font-variant : permite definir el tipo de fuente

font-weight : Especifica el peso o el grueso de la letra

font-size : Especifica el tamaño de la letra

font-family : Especifica el tipo de fuente

se puede especificar varios nombres de tipos de fuentes como un

sistema alternativo, es decir si el navegador no reconoce el
primero

font : Esta propiedad nos permite declarar todos los estilos para
el texto en una sola línea

display : se utiliza para cambiar el tipo de caja block , inline

,none. El valor none, sirve para eliminar los elementos
MODELO DE BLOQUE

Las cajas de los elementos se van posicionando por defecto

siguiendo un “flujo normal”, es decir empujando las cajas hacia
abajo, arriba , izquierda. Sin embargo se puede cambiar el “flujo
normal”, haciendo que las cajas se posicionan según uno de los
modos siguientes:

Estática(static): es el modo de posicionamiento del flujo normal,

es decir es el modo de posicionamiento por defecto

Relativa(relative): En este modo podemos hacer que la caja se

desplace de su posición estática , haciendo uso de los valores
right , left , top ,bottom (Reserva el espacio que ocupa la caja
que cambia de posición)

Absoluta(absolute): En este modo elimina la caja del flujo normal

y coloca la caja en una posición fija de manera absoluta con
respecto a su caja contenedora, para colocarla en una posición se
utilizan right,left,top,bottom . puede suponerse a otros
elementos ya que no se le reserva el espacio

Fija(fixed): es igual que la posición absoluta, pero

especificando la posición respecto a la ventana. Esto implica que
la caja no se mueve incluso usando barras de desplazamiento.

Flotante(float) : este posiciona la caja a algunos de los lados

(izquierda o derecha) , usa los valores left y right

Tenemos que tener en cuenta que al hacer que la caja ya no siga un

flujo normal, las demás cajas tratarán de tomar el espacio, para
que un elemento no se vea afectado por cajas flotantes a su
alrededor tenemos que usar la propiedad clear junto los valores
right o left que fuerza que la caja se coloque debajo de la caja
flotante si se encuentra con un caja flotante que flota a la
izquierda o derecha o con el valor both qué significa que se
coloque debajo de cualquier caja flotante
MODELO DE CAJA FLEXIBLE

El posicionamiento flexible o flexbox , permite acomodar los

elementos de una página si es que esta cambia sus dimensiones u
orientación. Esto nos permite hacer un diseño adaptativo. Para
poder hacer esto tenemos el valor del display: flex.

DIRECCIÓN DE LOS ELEMENTOS

La propiedad flex-direction, especifica la dirección del eje

principal y nos indicará cómo se ponen los elementos dentro del
contenedor.

Esta propiedad tiene los valores

row(fila)
row-reverse(fila invertida)
column(columna)
column-reverse(columna invertida)

AJUSTE PRINCIPAL
Esta propiedad establece si es necesario ajustar los elementos
para que quepan en una fila o columna

Esta propiedad es flex-wrap y tiene los siguientes valores

nowrap: que ajusta los elementos en una sola línea o fila

wrap: que distribuye sin cambiar su tamaño
wrap-reverse: lo mismo que wrap pero inverso el orden

ALINEACIÓN DE CONTENIDO

Con la propiedad justify-content podemos alinear los elementos

respecto al eje principal y de esa forma decidimos que hacer con
el espacio restante.

Esta propiedad tiene los siguientes valores:

flex-star : reúne los elementos al principio del eje

flex-end : reúne los elementos al final del eje
center: centra el contenido
space-between: reparte el espacio entre los elementos dejando los
extremos pegados al borde
space-around : donde el espacio restante se reparte alrededor de
cada elemento
AJUSTE SECUNDARIO

Este apartado es igual que la forma de alineación del eje

secundario, esta propiedad tiene el nombre align-items y tiene
los siguientes valores

strech: para ocupar todo el ancho del contenedor

flex-start : para juntar todos los elementos en el borde superior
flex-end: para juntar todos los elementos en el borde inferior
center: para centrar

PROPIEDADES DE LOS ELEMENTOS

Order: Nos sirve para indicar el orden del contenedor, es decir

qué posición ocupará que elemento.

flex-grow : factor de crecimiento del elemento, es decir si

indicamos flex-grow = 2 esto quiere decir que el elemento crecerá
el doble que los demás elementos cuando haya espacio libre en el
contenedor

flex-shrink : es lo mismo que el crecimiento pero este es

encogimiento.

flex-basis: Indica el tamaño por defecto(ancho) del elemento antes

de que el espacio libre sea distribuido
normalmente se deja por defecto flex-basis : auto;

Existe una forma abreviada cuando se quiere usar

-flex-grow
-flex-shrink
-flex-basis

flex: 1, 1 , auto;
ALGUNOS ELEMENTOS

Listas: En HTML5 se proben 3 tipos de listas

listas numeradas : se limitan con las etiquetas <ol> </ol>

listas con viñetas: se limitan con las etiquetas <ul> </ul>

listas de definiciones: se limitan con las etiquetas <dl> </dl>

Para poder meter elementos dentro de las listas, tanto las listas
numeradas y las listas con viñetas usan las etiquetas <li></li>
para definir los elementos.

Para poder definir los elementos dentro de la lista de

definiciones se utilizan dos etiquetas

<dt> </dt> delimitan términos

<dd> </dd> delimitan definiciones

<dl>
<dt> cabecera </dt>
<dd> es el la cual se incluyen relevantes del documento</dd>
</dl>

se pueden anidar listas dentro de otras

IMÁGENES
Para poder incluir imágenes dentro de HTML, se utiliza la etiqueta
<img> dentro de ella pasamos la dirección donde se localiza la
imagen

<img src= “direccion o lacalizacion de imagen”/>

Entre otros parámetros está el parámetro alt, el cual incluye una

descripción textual.

<img src= “direccion o lacalizacion de imagen” alt= “descripcion

textual”/>
ENLACES

Para realizar un enlace,se utiliza la etiqueta <a></a>

<a href = “destino"> Nombre del enlace </a>

esta es solo para referirnos e irnos hacia destinos fuera de la

página

Para saltar dentro del documento es necesario primero marcar el

lugar <a name o id = “nombre_cualquier”></a>

Y Para ir a ese lugar o mejor dicho para dejar el ancla que nos
llevara a ese lugar marcado es necesario <a href = “#lugar con el
nombre que se puso en el lugar marcado”>”nombre enlace </a>

para un enlace “muerto” es necesario solo dar a href = “#”;

la etiqueta <a> </a> también tiene un atributo que lo que hace es

que una vez que se da “clic” al enlace, este se abre en otra
pestaña. Este atributo es target = “_blank”

Para poner un imagen de enlace

<a href = "#"><img

src="[Link]
app/[Link]" alt="A cute orange cat lying on
its back."></a>

PARTES TEXTUALES

<input type= text>

ARCHIVOS MULTIMEDIA

Para poner música o un video en la página es necesario las

etiquetas <audio></audio> <video></video>

dentro de estas etiquetas tenemos algunos metadatos que son de

ayuda

autoplay : El audio o video empezaran a reproducirse cuando se cargue la página

controls: Se añadirán controles de pausa y adelanto del audio y video
loop: Se volverá a reproducir la canción o video una vez tras otra

<audio autoplay loop ></audio>

Importante para archivos multimedia

Entre las etiquetas de audio y video se define la etiqueta source que hara referencia al
formato.

<audio>
<source src= “[nombre].formato(mp3,etc) type= “audio/mp3”/>
</audio>

<video autoplay>
<source src= “[nombre].formato(mp4,etc)” type=“video/mpeg”/>
</video>

Se recomienda tener varias etiquetas <source> dentro de las

etiquetas de audio y video ya que el navegador no pueda aceptar
cierto formato especificado

Metodos de video

play(): Este método comienza a reproducir el medio desde el inicio

a menos de que el medio haya sido pausado.

pause(): Este método pausa la reproducción del medio

canPlayType(): Con este método podemos saber si el formato del

archivo es soportado por el navegador.

var obj = [Link]('video');

[Link]([Link]('video/mp4')); // "maybe"

sus respuestas van desde:

- Probablemente (Probably)

- Tal vez (Maybe)

- “”(cadena vacía) sin soporte

load() : vuelve a cargar el video

Propiedades del video

paused : Esta propiedad retorna TRUE Si la reproducción del medio

actualmente está pausada o no ha comenzado.

ended : Esta propiedad retorna TRUE si la reproducción del medio

ha terminado.
duration : Esta propiedad retorna la duración del medio en
segundo.

error : Esta propiedad retorna el valor del error ocurrido

currentTime : Esta propiedad retorna el valor o se le puede

asignar un valor sobre la posición en la cual el medio esta siendo
reproducido

<script>
var vid = [Link]("myVideo");

function getCurTime() {
alert([Link]);
}

function setCurTime() {
[Link]=5;
}
</script>

setInterval : Ejecuta una función o fragmento de código de forma

repetitiva cada vez que termina el periodo de tiempo determinado.

clearInterval : Cancela una acción reiterativa que se inició

mediante una llamada a setInterval

Algunas propiedades interesantes

Dentro de los eventos del Mouse tenemos

PageX = Da la coordenada en el eje X del puntero cuando hace

click.

PageY = Es lo mismo que PageX, solo que en el eje Y.

Otras propiedades

offsetleft = devuelve la posición izquierda (en pixels) relativa

al lado izquierdo del elemento.

TABLAS
Para poder formar una tabla se necesita de la etiqueta
<table></table>

Para formar filas se utiliza <tr> </tr>

Para formar columnas se utiliza <td> </td>

Para mezclar varias columnas como una solo fila se utiliza

<tr>
<td colspan=”[numero de columnas a unir]> [nombre de la
fila] </td>

</tr>

Para mezclar varias filas en una sola columna se utiliza

<tr>
<td rowspan=”[numero de columnas a unir]> [nombre de la
columna] </td>

</tr>

Se puede aplicar un estilo de la tabla de la siguiente manera

<thead></thead>: para la cabecera de la tabla

<tbody></tbody>: para el cuerpo de la tabla
<tfoot><tfoot>: para el cuerpo final de la última tabla

IMPORTANTE

Las columnas en <thead> se definen con <th></th> y las de <tbody>

y <tfoot> se definen con <td>

El <tfoot> debe implementarse después de <thead> y al último

<tbody>

INCORPORANDO JAVASCRIPT

CreateElement(“Elemento_especificado”)

[Link](“BUTTON”);

SELECTORES
getElementById(“id”): Devuelve el elemento que tiene el Id
especificado.

getElementsByName(“Nombre”): Devuelve los elementos con el nombre

especificado.

getElementsByTagName(“etiqueta”): Obtiene los elementos con el

nombre de etiqueta especificado.

getElementsByClassName(“clase”): Obtiene los elementos con el

nombre de clase especificado.

querySelector(): Retorna el primer elemento que concuerda con el

grupo de selectores especificados entre paréntesis

[Link](#principal p:first-child”)

querySelectorAll(): Retorna todos los elementos que concuerda con

el grupo de selectores especificados entre paréntesis.
El valor retornado es un array

[Link](#principal p)

MANEJADORES DE EVENTOS

Para adjuntar un controlador de eventos a un elemento especificado

es necesario incluir a addEventListener()

Sintaxis

[Link](“evento”,nombre_funcion,(opcional true
o false por recomendación false)

Ejemplo

var elemento = [Link](“p”)[0];

[Link](‘click’,hacerclick,false);

addEventeListener siempre envían como valor el elemento que hacer

referencia al evento
hacercliick(e) hará referencia al elemento “p”

FORMULARIOS

Para construir un formulario se utiliza la etiqueta <form> </form>

y dentro de él estarán los controles que lo componen

A la hora de definir un formulario se deben definir dos aspectos

importantes

- La URL a donde se enviaran los datos.

- El método HTTP que se utilizara

Y para ello existen los siguientes metadatos

action = contiene la URL de la aplicación del servidor que procesa

los datos

method = El método HTTP para enviar los datos al servidor

- GET : Envía los datos al servidor como parámetros en la URL.

Los datos se pueden ver y leer en la barra de navegación y la
información que se enviará está limitada a 500 bytes.

- POST: Envia la informacion en la misma petición HTTP, Se

puede enviar mayor informacion asi como archivos adjuntos

Etiquetas Descriptivas:

Cada elemento de un formulario debe llevar asociado un texto

identificativo y ese texto debe indicar con la etiqueta
<label></label>

Esta etiqueta debe ir ligada al control del formulario que

identifica y hay dos maneras

Ejemplos
Dentro de la misma etiqueta label
1.- <label>Repeticiones: <input name=”veces”/></label>

Utilizando el atributo for que cuyo valor será igual que el

atributo id del elemento input.

2.- <label for=”id_rep”/>Repeticiones</label> <input name=”veces”

id=”id_rep”/>

Elemento Input

EL elemento input es la etiqueta que nos permitirá crear la

mayoría de los controles ya que su atributo Type determinara que
elemento se está poniendo sobre el formulario.

tipo email

Nos permite ingresar una dirección de correo electrónico.

<input type=”email” name=”correo”/>

tipo búsqueda

<input type=”search” name=”busqueda”/>

tipo url

<input type=”url”/>

tipo telefono

<input type = “tel”/>

Tipo Number

El tipo number es solo válido cuando se ingresa un valor numérico

Dentro del tipo number existen algunos atributos que nos permiten
un mayor control sobre él.

- max : El valor de este atributo determina el valor máximo

aceptado por el campo number.

- min : El valor de este atributo determina el valor mínimo

aceptado por el campo number.
 - step : El valor de este atributo nos indicará de cuanto en
cuanto se incrementará el valor si es que se desea
incrementar o disminuir El valor por defecto es 1

Tipo Range

Es parecido como el tipo number solamente que este se presenta

como una barra donde se incrementa el valor desplazando con el
puntero y se usan los valores max , min y step.

Con el valor value se especifica el valor de inicio.

Tipo date

Este tipo de dato proporciona un control para el ingreso de

fechas.

Tipo week
hoo
Este tipo de dato proporciona un control para el ingreso de una
semana

Ejemplo

La sintaxis es 2011-W50, lo cual indica que hace referencia a la

semana 50 del año 2011.

Tipo Month

La idea es la misma que el tipo week, solamente que su sintaxis es

2011-09 == anio-mes

Tipo Time

Es igual que el de la fecha solamente que para especificar la

hora, su formato cambia en diferentes navegadores, en firefox es
hora:minutos

Tipo datatime

Este tipo de control, es para ingresar la fecha,hora y zona

horaria

Tipo datetime-local
Este tipo es igual que datatime solamente que sin la zona horaria,
en firefox no es soportada.

Tipo Color

Este tipo de control es para poder seleccionar un color y por

entrada se debe especificar un número Hexadecimal : #FF00FF

Tipo Text

Este control sirve para crear un área que representa un cuadro de

texto.

Tipo Password

Este control sirve para ingresar a primera vista texto escondido

Tipo Checkbox

Este control sirve para ingresar una casilla de verificación, usa

un atributo para marcar inicialmente la casilla marcada, este
atributo es checked.

Tipo radio

Para crear una casilla de opción y al igual que el checkbox, se

necesita el atributo checked, para marcarla como activa.

BOTONES

Tipo submit

Este tipo de botón, es el encargado una vez que sea precionado de

enviar los datos del formulario al servidor

Tipo reset

Este tipo de botón, es el encargado de limpiar los datos del

formulario, es decir borrar los datos que llevaba incluidos un
usuario

Tipo button y Tipo imgage

Estos dos tipos de botones son genéricos solamente se diferencia
que el botón de tipo img, ocupará una imagen para representar el
botón

<input type = “button” />

<input type = “imgage” src=”<lugar_imagen>”/>

ADJUNTAR ARCHIVOS

Para adjuntar un archivo, necesitaremos primeramente del tipo

file.

<input type = “file”/>

Pero por obvias razones, solo podemos enviar un archivo al

servidor si el metodo de envio es POST.

<form action = “url” method = “POST” >

<input type = “file” />

Además, debemos incluir el atributo enctype=”multipart/

form-data” en el formulario para que se envíe correctamente

<form action = “url” method = “POST” enctype =

“multipart/form-data”>
<input type = “file” />

</form>

ATRIBUTOS DE AYUDA A ELEMENTOS TYPE

Existen algunos atributos que ayudan a completar algunos controles

del formulario

accept = Este atributo es propio del tipo file,lo que indicará que tipo de
archivos son aceptados.

<input type="file" id="soundFile" accept="audio/*"> indicará cualquier extensión de

audio

<input type="file" id="videoFile" accept="video/*"> Indicará cualquier extension de

video
<input type="file" id="imageFile" accept="image/*"> Indicará cualquier extensión de
imagen

para los archivos solo se especificará la extensión :

<input type="file" id="imageFile" accept=".pdf, .txt, .. , etc">

para indicar que de video , audio o imagen solo una extension

<input type="file" id="imageFile" accept="image/jpeg">

placeholder: Este atributo es usado en controles tipo de texto como email,text,...,etc y esto
para ayudar al usuario que es lo que debe ingresar, es decir el valor de placeholder
aparecerá dentro del recuadro como una marca de agua que desaparecerá cuando el
usuario ingrese un nuevo valor

required: Este atributo es usado en controles en donde se requiere que el campo sea
llenado forzosamente antes de enviar el formulario.

multiple: Este atributo es usado en controles como email , file para indicar la entrada de
múltiples valores en el mismo campo, en el campo del email estos valores deben ser
separados por comas.

autocomplete: Sirve al navegador que sí debe completar el campo con datos con datos
introducidos anteriormente por el usuario.

pattern : Sirve para la validación de campos usando expresiones regulares

NUEVOS ELEMENTOS

<datalist> </datalist> Es un elemento específico de formularios, que es usado para crear

una lista de items que luego con la ayuda del atributo list se usará como sugerencia dentro
del campo.

EJEMPLO

<input type="email" list="opciones" />

<datalist id="opciones">
<option value="al2133034332@[Link]"/>
<option value="hectormiguel03@[Link]"/>
</datalist>

<progress></progress> La etiqueta representara el progreso de una tarea.

se utiliza junto con los atributos

value el cual indicará el valor donde se encuentra el progreso

max el cual indica el valor a alcanzar cuando la tarea es completada, lo maximo es 100

<progress value = “10” max =”100> </progress>

<meter></meter> elemento medidor para medir datos dentro de un rango determinado

<label for="disk_c">Disk usage C:</label>

<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter>

<output></output> Etiqueta contenedora de resultado de una operacion

<form oninput="[Link]=parseInt([Link])+parseInt([Link])">
<input type="range" id="a" value="50">
+<input type="number" id="b" value="25">
=<output name="x" for="a b"></output>
</form>

OTROS ELEMENTOS

TEXT AREA = CUADRO DE TEXTO DE VARIAS LINEAS

Para realizar un text area ocupamos la etiqueta

<textarea></textarea>

Dentro de los valores de ella ocupamos los atributos

rows = filas

cols = columnas

maxlength = cantidad de caracteres

LISTA DE SELECCIÓN

Para hacer una lista despregable se utiliza la etiqueta <select></select>

<label>Lista de selección</label>
<select name=”paraSeleccion”>
<option value=”opcion1”>Primera opción</option>
<option value=”opcion2”>Segunda opción</option>
<option value=”opcion3”>Tercera opción</option>
</select>
AGRUPACIONES DE ELEMENTOS

El elemento <fieldset></fieldset> sirve para ver mejor las partes de un formulario al

agrupar elementos relacionados

Para poner nombre a un grupo se ocupa la etiqueta <legend></legend>

ALINEAR TEXTO

Para alinear texto, tenemos, la opción “text-align”

esta opción tiene varias asignaciones, right, left, center, justify, etc…

ANCHO => PROPIEDAD WIDTH

Esto se utiliza para cambiar el ancho de los ELEMENTOS

width: 300px

ALTURA DE ELEMENTOS => PROPIEDAD HEIGHT

Esto se utiliza para cambiar la altura de los ELEMENTOS

height: 300px

TEXTO EN NEGRITA

Para poner el texto en negrita, se utiliza la etiqueta <strong></strong>

SUBRAYAR TEXTO

Para esto se ocupa la opción <u></u> o dentro css

text-decoration: underline;

TEXTO EN CURSIVA

Para esto ocupamos la etiqueta <em></em> o en su caso con CSS

font-style: italic;

TACHAR TEXTO

Para esto se usa la etiqueta <s></s> o en su caso desde CSS

text-decoration: line-through;

CREAR UNA LÍNEA HORIZONTAL

Para eso ocupamos la etiqueta <hr> NO NECESITA ETIQUETA DE CIERRE

RGBA

rgba significa:
r = red
g = green
b = blue
a = alfa/nivel de opacidad

Los valores RGB pueden variar de 0 a 255. El valor alfa puede variar de 1, que es
completamente opaco o un color sólido, a 0, que es completamente transparente o claro.
rgba() es ideal para usar en este caso, ya que te permite ajustar la opacidad. Esto significa
que no tienes que bloquear completamente el fondo.

@FONT-FACE

@font-face permite al autor especificar fuentes online para visualizar en sus páginas web. Al
permitir a los autores proporcionar sus propias fuentes, @font-face elimina la necesidad de
depender del número limitado de fuentes de usuarios instaladas en sus computadoras.

sintaxis

@font-face {
font-family: <un-nombre-de-fuente-remota>;
src: <origen> [,<origen>]*;
[font-weight: <peso>];
[font-style: <estilo>];
}

valores

<un-nombre-de-fuente-remota>
Especifica el nombre de una fuente que será utilizada como valor de font face por las
propiedades de fuente.

<origen>
Dirección URL para la ubicación remota del archivo de fuente, o el nombre de una fuente en
la computadora del usuario en la forma local("Nombre de Fuente").
<peso>
Un valor de peso de la fuente.

<estilo>
un valor de estilo.

Ejemplos

<head>
<title>Web Font Sample</title>
<style type="text/css" media="screen, print">
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("[Link]
}

body { font-family: "Bitstream Vera Serif Bold", serif }

</style>
</head>

@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}

TAMAÑO DE LETRA DEL TEXTO DE UNA ETIQUETA

Para esto utilizamos lo que es la propiedad font-size: 24px;

SOMBRAS ⇒ box-shadow : <offset x> <offset y> <blur-radiua>(difuminacion)

<spread-radius>(propagar o extender sombra);

La propiedad box-shadow toma valores para esto también aplica para text-shadow

<offset-x> <offset-y>
Estos son dos valores <length> para definir el desplazamiento de la sombra. <offset-x>
especifica la distancia horizontal. Los valores negativos colocan la sombra a la izquierda del
elemento. <offset-y> Especifica la distancia vertical. Los valores negativos colocan la
sombra por encima del elemento.
Si ambos valores son 0, la sombra es ubicada detrás del elemento (y puede generar un
efecto de difuminación <blur-radius> y/o <spread-radius> está establecido).

<blur-radius>
Este es el tercer valor <length>. Cuando mayor sea este valor, mayor será la difuminación,
por consecuencia la sombra se vuelve más grande y ligera. Los valores negativos no son
permitidos. Si esto no es especificado, su valor será 0 (el borde de la sombra es fuerte).

<spread-radius>
Este es el cuarto valor <length> . Los valores positivos harán que la sombra se expanda
y crezca más, los valores negativos harán que la sombra se reduzca de tamaño. Si no
se especifica, este será 0 (la sombra será del mismo tamaño del elemento).

<color>

OPACIDAD ===> opacity: 0.3;

La propiedad opacity en CSS se usa para ajustar la opacidad o, por el contrario, la

transparencia de un elemento.

Un valor de 1 es opaco, que no es transparente en absoluto.

Un valor de 0.5 es la mitad transparente.
Un valor de 0 es completamente transparente

los valores son sin ninguna unidad de medida

TEXTO MINUSCULA Y MAYUSCULA == > text-transform: lowercase| uppercase;

La propiedad text-transform en CSS se utiliza para cambiar la apariencia del texto.

Tiene varias asignaciones, entre las cuales está uppercase(mayúscula) y

lowercase(minúscula)

ESTABLECER ANCHO DE LETRA == font-weight: 24 (SIN UNIDAD )

Se establece el font-size de cada etiqueta de título en el último desafío, aquí podrás ajustar
el font-weight.

La propiedad font-weight establece que tan gruesos o delgados son los caracteres en una
sección de texto.

los valores son sin ninguna unidad de medida

ESPACIO ENTRE LÍNEAS == line-height: 24px;

CSS ofrece la propiedad line-height para cambiar la altura de cada línea en un bloque de
texto

line-height:24px;

HOVER a:hover{ background-color:blue;}

Sirve para seleccionar y aplica estilo a un enlace o elementos cuando pasas el mouse sobre
ellos:

a:hover {
background-color: yellow;
}
POSICIONAMIENTO

Estática(static): es el modo de posicionamiento del flujo normal,

es decir es el modo de posicionamiento por defecto

Relativa(relative): En este modo podemos hacer que la caja se

desplace de su posición estática , haciendo uso de los valores
right , left , top ,bottom (Reserva el espacio que ocupa la caja
que cambia de posición)

Absoluta(absolute): En este modo elimina la caja del flujo normal

y coloca la caja en una posición fija de manera absoluta con
respecto a su caja contenedora, para colocarla en una posición se
utilizan right,left,top,bottom . puede suponerse a otros
elementos ya que no se le reserva el espacio

Fija(fixed): es igual que la posición absoluta, pero

especificando la posición respecto a la ventana. Esto implica que
la caja no se mueve incluso usando barras de desplazamiento.

Flotante(float) : este posiciona la caja a algunos de los lados

(izquierda o derecha) , usa los valores left y right

Tenemos que tener en cuenta que al hacer que la caja ya no siga un

flujo normal, las demás cajas tratarán de tomar el espacio, para
que un elemento no se vea afectado por cajas flotantes a su
alrededor tenemos que usar la propiedad clear junto los valores
right o left que fuerza que la caja se coloque debajo de la caja
flotante si se encuentra con un caja flotante que flota a la
izquierda o derecha o con el valor both qué significa que se
coloque debajo de cualquier caja flotante

Z-INDEX

los z-index propiedad especifica el orden de pila de un elemento.

Un elemento con un orden de pila mayor siempre está delante de un elemento con un orden
de pila menor.

Nota: z-index solo funciona en elementos posicionados (posición: absoluta, posición:

relativa, posición: fija, o posición: pegajosa) y elementos flexibles (elementos que son hijos
directos de pantalla: flexibles elementos ).

Nota: Si dos elementos posicionados se superponen sin un z-index especificado, el

elemento colocado en último lugar en el código HTML se mostrará en la parte superior.

z-index: 3; [no es valor de pixeles]

CENTRAR ELEMENTO CON LA PROPIEDAD MARGIN Margin: auto;

Otra técnica de posicionamiento consiste en centrar un elemento de bloque
horizontalmente. Una manera de hacer esto es que margin tenga valor auto.

Este método también funciona para imágenes. Las imágenes son elementos en línea de
forma predeterminada, pero se pueden cambiar a elementos de bloque cuando se establece
la propiedad display en block.

Ajusta el matiz de un color

Los colores tienen varias características tales como el matiz, la saturación y la ligereza.
CSS3 introdujo la propiedad hsl() como una forma alternativa de elegir un color indicando
directamente estas características.

Se suele pensar que Hue es el "color". Si imaginas un espectro de colores con un rojo en la
izquierda que se torna verde en el medio y azul en la derecha, el tono es donde cabe un
color a lo largo de esta línea. En hsl(), el tono usa un concepto de círculo cromático en
lugar del espectro, donde el ángulo del color en el círculo se da como un valor entre 0 y 360.

Saturation es la cantidad de gris en un color. Un color totalmente saturado no tiene gris y

un color mínimamente saturado es casi completamente gris. Esto se da como un porcentaje
con 100% de saturación.

Lightness es la cantidad de blanco en un color. Un porcentaje se da desde 0% (negro)

hasta 100% (blanco), donde 50% es el color normal.

Aquí hay algunos ejemplos de hsl() con colores de iluminación normales y completamente
saturados:

Color HSL

rojo hsl(0, 100 %, 50 %)

amarillo hsl(60, 100 %, 50 %)

verde hsl(120, 100 %, 50 %)

cian hsl(180, 100 %, 50 %)

azul hsl(240, 100 %, 50 %)

magenta hsl(300, 100 %, 50 %)

hsla(). La sintaxis de esta función es: hsla(tono,

saturación, luminosidad, opacidad) La opacidad ve de 1 a 0
Crea un gradiente lineal de CSS gradual

La aplicación de un color en elementos HTML no se limita a un tono plano. CSS proporciona

la capacidad de usar transiciones de color, también conocidas como degradados, en los
elementos. Esto se accede a través de la función linear-gradient() de la propiedad
background. Aquí está la sintaxis general:

background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);

[35deg]

El primer argumento especifica la dirección desde la que comienza la transición de color, se

puede establecer como un grado, donde 90deg hace un gradiente horizontal (de izquierda a
derecha) y 45deg hace un gradiente diagonal (de abajo a izquierda hacia arriba a la
derecha). Los siguientes argumentos especifican el orden de los colores utilizados en el
degradado.

tambien existe el radial-gradient, utiliza casi los mismos parámetros

background: radial-gradient([circle,ellipse,....], color 1, color 2, color 3, ...);

UTILIZANDO DEGRADADO LINEAL PARA CREAR ELEMENTO RAYADO

Utiliza un degradado lineal CSS para crear un elemento rayado

La función repeating-linear-gradient() es muy similar a linear-gradient() con la principal

diferencia de que repite el patrón de degradado especificado. repeating-linear-gradient()
acepta una variedad de valores, pero para simplificar, trabajarás con un valor de ángulo y
valores de parada de color en este desafío.

El valor del ángulo es la dirección del gradiente. Las paradas de color son como valores de
ancho que marcan donde tiene lugar una transición, y se dan con un porcentaje o un
número de píxeles.

Si cada dos valores de parada de color son del mismo color, la mezcla no es visible porque
está entre el mismo color, seguido de una dura transición hacia el siguiente color, así que
terminas con rayas.

repeating-linear-gradient(
 45deg,
yellow 0px,
yellow 40px,
black 40px,
black 80px
);

tambien se aplica para REPEATING-RADIAL-GRADIENT

TRANSFORM

La propiedad transform puede operar cuatro transformaciones básicas en un

elemento: scale (escalar), rotate (rotar), skew (inclinar) y translate (trasladar
omover). Veamos cómo funcionan:

SCALE
Los scale (ANCHO, ALTO) El método aumenta o disminuye el tamaño de un elemento
(según los parámetros dados para el ancho y el alto).

transform: scale(2,4);

Sus derivaciones son:

los scaleX(2) El método aumenta o disminuye EL ANCHO de un elemento.

los scaleY(0.3) El método aumenta o disminuye la ALTO de un elemento.

[SIN ESPECIFICAR PIXELES]

TRANSLATE

los translate() El método mueve un elemento desde su posición actual (según a los
parámetros dados para el eje X y el eje Y).

div {

transform: translate(50px, 100px);

ROTATE

los rotate() El método gira un elemento en el sentido de las agujas del reloj o en sentido
contrario a las agujas del reloj según un grado dado.

div {

transform: rotate(20deg O -20deg);

SKEW

Los skew() El método sesga un elemento a lo largo de los ejes X e Y en los ángulos dados.

div {

transform: skew(20degx ,30degy);

}
PSEUDO ELEMENTOS BEFORE AND AFTER

Una de las formas más populares en el mundo es la forma del corazón, y en este desafío
crearás una usando CSS puro.

los pseudo-elements ::before y ::after. Estos pseudo-elements se utilizan para agregar algo
antes o después de un elemento seleccionado.

Para que los pseudo-elements ::before y ::after funcionen correctamente, deben tener una
propiedad content definida.

Esta propiedad generalmente se usa para agregar cosas como una foto o texto al elemento
seleccionado. Cuando se utilizan los pseudo-elements ::before y ::after para crear formas, la
propiedad content sigue siendo necesaria, pero se establece en una cadena vacía.

EJEMPLO DE CORAZÓN

<style>

.heart {

position: absolute;

margin: auto;

top: 0;

right: 0;

bottom: 0;

left: 0;

background-color: pink;

height: 50px;

width: 50px;

transform:rotate(-45deg) ;
}

.heart::after {

background-color: pink;

content: "";

border-radius: 50%;

position: absolute;

width: 50px;

height: 50px;

top: 0px;

left: 25px;

.heart::before {

content:"" ;

background-color: pink;

border-radius: 50%;

position: absolute;

width: 50px;

height: 50px;

top: -25px;

left: 0px;

</style>
<div class="heart"></div>

La propiedad CSS animation-name especifica una lista de animaciones

que se deben aplicar al elemento seleccionado.

Cada nombre indica un @keyframes esta regla define los valores de

las propiedades de la secuencia de animación.

EJEMPLO

<style>

div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: mymove;
animation-duration: 5s;
}

@keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}

La propiedad CSS animation-duration indica la cantidad de tiempo que la animación tarda

en completar 1 ciclo (duración).

animation-duration: 3s;

El valor por defecto es 0s, que indica que la animación no debe producirse.

La propiedad CSS animation-timing-function especifica cómo una animación CSS debe

avanzar sobre la duración de cada ciclo

los posibles valores son varios

linear: la animación tiene la misma velocidad de principio a fin

ease : es el valor por defecto .La animación al comienzo es lento, despues rápido y antes
que termine es lento

ease-in: La animación tiene un comienzo lento

ease-out: La animación tiene un final lento

ease-in-out: La animación tiene un comienzo y final lento

LA PROPIEDAD “animation-timing-function”TIENE OTROS VALORES

La propiedad CSS animation-delay especifica el tiempo de retardo que debe transcurrir

antes de comenzar la animación.

su valor por defecto es un valor de 0, lo que indica que la animación tiene que comenzar
inmediatamente

Usando valores negativos. Aquí, la animación comenzará como si ya hubiera estado

jugando durante los segundos especificados

animation-delay: 2s;

animation-delay:-2s;

La propiedad CSS animation-direction indica si la animación debe retroceder hasta el

fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al
final.

tiene unos cuantos valores

normal: valor por defecto. La animación se reproduce normalmente (HACIA ADELANTE)

reverse: La animación se reproduce en sentido inverso

alternate: La animación se reproduce primero hacia adelante y después de reversa

alternate-reverse: La animación primero va de reversa y luego hacia adelante(forma

normal)

La propiedad CSS animation-iteration-count define el número de veces que un ciclo de

animación debe ser ejecutado antes de detenerse.

animation-iteration-count: 2;
valor infiinito -> animation-iteration-count: infinite;

Las animation-fill-mode propiedad especifica un estilo para el elemento cuando la

animación no se está reproduciendo (antes DE QUE comienza, después de que termina, o
ambos).

TIENE UNOS CUANTOS VALORES

NONE: Valor por defecto. La animación no aplica ningún estilo a los elementos antes o
después de su ejecución

FORWARDS: El elemento conservará los valores de estilo establecidos por el último

fotograma clave (depende de la dirección de la animación y del recuento de iteraciones de
la animación)

BACKWARDS: El elemento obtendrá los valores de estilo establecidos por el primer

fotograma clave (depende de la dirección de la animación) y los conservará durante el
período de retraso de la animación.

La propiedad CSS animation-play-state determina si una animación está en ejecución o en

pausa.

Puede ser consultada para determinar si la animación se está ejecutando. Además, su valor
se puede establecer para pausar y reanudar una animación.

tiene dos valores:

paused

running

@keyframes.
La regla arroba @keyframes permite a los autores controlar los pasos intermedios en una
secuencia de animación CSS

Esto mediante el establecimiento de keyframes (o puntos de trayectoria) a lo largo de la

secuencia de animación que debe ser alcanzado por determinados puntos durante la
animación.

Para utilizar keyframes, se crea una regla de @keyframes con un nombre que es utilizada
por la propiedad animation-name para que coincida con una animación de keyframe a su
lista.

Cada regla @keyframes contiene una lista de estilo de selectores de keyframe, cada una
de los cuales está compuesto de un porcentaje a lo largo de la animación en la que se
produce el keyframe así como un bloque que contiene la información de estilo para ese
keyframe.

Los @keyframes regla especifica el código de animación.

La animación se crea cambiando gradualmente de un conjunto de estilos CSS a otro.

Durante la animación, puede cambiar el conjunto de estilos CSS muchas veces.

Especifique cuándo se producirá el cambio de estilo en porcentaje o con las palabras

clave “From" y "To", que es lo mismo que 0% y 100%. 0% es el comienzo de la animación,
100% es cuando la animación está completa.

Sugerencia: Para obtener la mejor compatibilidad con el navegador, siempre debe definir
los selectores 0% y 100%.

EJEMPLO

#anim {

animation-name: colorful;

animation-duration: 3s;

@keyframes colorful {

0% {

background-color: blue;

100% {
 background-color: yellow;

ACCESIBILIDAD APLICADA

El atributo “alt”, es necesario dentro de las etiquetas de imágenes para dar una descripción
de qué se trata la imagen. Esto ayuda a que se la imagen no llegue a cargar y también
como palabra para el motor de búsqueda

<img src=” ” alt = “descripcion”/>

 DISEÑO WEB RESPONSIVO

MEDIA QUERY

Las media query cambia la presentación de la página web dependiendo de las dimensiones
de cada dispositivo

para aplicar una media query se escribe.

@media (max-width: 100px) { /* CSS Rules */ }

@media(max-width:100px and min-height:50px){ /* CSS Rules */ }

min-height

Los min-height La propiedad define la altura mínima de un elemento.

Si el contenido es menor que la altura mínima, la altura mínima será aplicada.

Si el contenido es mayor que la altura mínima, el min-height propiedad no tiene efecto.

max-height

los max-height La propiedad define la altura máxima de un elemento.

Si el contenido es mayor que la altura máxima, se desbordará. Cómo contenedor manejará

el contenido desbordado está definido por el desbordamiento propiedad de .

Si el contenido es menor que la altura máxima, el max-heightpropiedad no tiene efecto.

Haz una imagen responsiva

Hacer imágenes responsivas con CSS es realmente simple. Sólo tienes que agregar estas
propiedades a una imagen:

img {

max-width: 100%;

height: auto;

El ancho máximo max-width de 100% se asegurará de que la imagen nunca es más ancha
que el contenedor en el que se encuentra. y la altura height de auto hará que la imagen
mantenga su relación de aspecto original.

La forma más sencilla de hacer que tus imágenes aparezcan correctamente en pantallas de
alta resolución, tales como la "pantalla retina" de las MacBook Pros es definir sus valores de
ancho width y de altura height como sólo la mitad de lo que es el archivo original.

Tipografia responsiva

En lugar de usar em o px para dimensionar texto, puedes usar unidades de viewport para
obtener una tipografía responsiva. Las unidades de viewport, como los porcentajes, son
unidades relativas, pero se basan en objetos diferentes. Las unidades de viewport son
relativas a las dimensiones del viewport (ancho o alto) de un dispositivo, y los porcentajes
son relativos al tamaño del elemento contenedor padre.

Las cuatro diferentes unidades de viewport son:

● vw (viewport width): 10vw sería el 10% del ancho del viewport.

● vh (viewport height): 3vh sería el 3% del alto del viewport.
● vmin (viewport mínimo): 70vmin sería el 70% de la dimensión más pequeña del
viewport (altura o ancho).
● vmax (viewport máximo): 100vmax sería el 100% de la dimensión más grande del
viewport (altura o ancho).
 FLEXBOX

Colocar la propiedad CSS display: flex; en un elemento te permite usar otras propiedades
flex para construir una página responsiva.

La idea principal es que un contenedor flexible expande o comprime sus elementos para
rellenar el espacio libre o ajustarse al área disponible.

De esa forma tendremos un contenedor flex (flex container) y una serie de elementos flex
contenidos (flex item).