HTML5 etiquetas

Estructura de etiquetas de HTML5
Inicio del código

<!DOCTYPE html> : indica que vamos usar html5
< html > “”</html>: lo que va en la pagina Wed
<meta charset="UTF-8"> : con esta etiqueta dentro del < html > </html> se le
dice al navegador que identifique ñ y el idioma español.
<meta charset="UTF-8">: para que acepte un grupo de carateres como los

acentos o las comas
Etiquetas principales
<title>Document</title> : en este ejemplo entonces Document quedaría de
título en el navegador.
<head>””</head> : todo lo que se va mostrar en la página wed.
<h1></h1>: encabezado principal
<h2></h2>: Encabezados segundarios hay hasta h5.
<td></td> : etiqueta que permite agrupar elementos en uno solo
<div></div> : agrupar elementos html, es muy importante para declarar una

clase y después darle estilos con css
Etiquetas de video y audio
<video></video>: cargar video ojala en mp4
<audio></audio>: cargar audios ojala en mp3
Atributos: autoplay, controls, poster, width, height, muted, loop, preload,

src
Etiquetas principales de semántica

Tener en cuenta que algunas etiquetas tiene la misma función pero para el
navegador no es lo mismo
<section></section> :sección puede sustituir div, que agrupan elementos

html, agrupa elementos de temáticas o informativos que sn del mismo tema y
están dentro de artículos y otros elementos html
<article></article> :sección puede sustituir div, que agrupan elementos html

los artículos puede ser información independiente(paper, recetas,
comentarios)
<header></header> : encabezado pueden haber varios
<main></main>: contenido principal, solo puede aparecer una vez en la pagina
<nav></nav> barra de navegación
<aside></aside>:para poner barra lateral de información o información extra,

información tangencialmente relacionada
<footer></footer> pie de pagina
<hgroup></hgroup> para agrupar varios títulos
<form></form> agrupar elementos del formulario

Etiquetas de listas
<ul></ul> : adentro se coloca una lista con el <li></li> y adentro el nombre
del item, solo van separado con viñetas de punto por renglón
<ol></ol> : adentro se coloca una lista con el <li></li> y adentro el nombre

del item, solo van separado con viñetas numeradas por renglón
Etiquetas de Lineas
<hr>: línea de separación a lo ancho.
Etiquetas de listas
<ul></ul> : etiquetas e lista deben estar anidadas con cualquier elemento
html aunque para que queden listados de arriba hacia abajo con viñeta
<li></li>, la viñeta se puede cambiar a abecedario al colocar style="list-
style: lower-latin;
Etiquetas para link

<a href="enlace de pagina">nombre de la descripción</a> : es para colocar
enlaces en enlaces de pagina y luego enmascararlos con el nombre de las
descripción
Etiquetas de comentarios
 : comentarios en html donde esta comentario es donde se
puede escribir
Etiquetas para imágenes
<figure></figure>: etiqueta de figura
<figcaption></ figcaption>: texto de pie de foto
img src="fotos/css3.png" alt="LOGO CSS" width="200px title=”LOGO CSS” :

fotos/css3.png es en lace de la foto también puede ser un enlace de internet
o puede estar en un servidor y ats es el titulo de la foto pero este aparece
si se daña en enlace o la fuente de la foto, width ancho de la foto en
pixeles y por ultimo title es titulo de la imagen que aparece si se señala
la imagen.
Atributos
title : atributo que se le puede aplicar a todo objeto html hasta un
párrafo, ejempl: <p title="mi parrafo" > Aprendiendo maquitacion</p>
style: para poner estilo ejemplo:

<p title="mi parrafo" style="color:blue;"> Aprendiendo maquitacion</p>
Etiquetas para tabla

<table></table> : etiqueta de tabla no esto no se visualiza nada para ello
necesitamos etiquetas anidadas
<th></th> : etiqueta de encabezado de tabla, debe ir anidada a la etiqueta

<table></table>
<td></td> : etiqueta de los datos que contiene la tabla, debe ir anidada al

etiqueta <table></table>
Etiquetas de párrafo para dar formato

<pre> </pre> : cuando el texto ya tiene tabulaciones o espacio de línea y se
quiere que se repete en la vista previa o en la wed
<b></b> : todo texto que este adentro de allí queda en negrilla
<strong></strong> : todo texto que este adentro de allí queda en negrilla,

para enfatizar
<i></i> : itálica
<em></em>: italica para enfatizar
<small></small>: pone la letra chiquita
<mark></mark>: marcar el texto o resaltarlo con amarillo
<del></dell>: para eliminar el texto o ponerle una raya al texto

<ins></ins>: texto subrayado con la línea abajo
<sub></sub>: para subindices
<sup></sup>: super indices
<code></code>: hace que la letra se vuelva menos negra, no spuede servir

para hacer referencia a un código
char ret : paginas de caracteres donde hay 3 opciones: nombre, hexadecimal y

valor decimal. Ejemplo: <P>%excl; símbolo de esclamacion</cp>
Etiquetas de Listas
<ol></ol> : listados ordenados, no se visualiza se debe anidar etiquetas,
normalmente se acompaña con la etiqueta de <li></li>
<ul></ul> : listados sin orden, no se visualiza se debe anidar etiqueta,

Normalmente la etiqueta de <li></li>
<dl></dl> : listado de descripción, no se visualiza se debe anidar etiqueta,

normalmente se etiqueta con <dt></dt> que es el termino de descripción y por
ultimo <dd></dd> descripción del término anterior
Etiquetas de Formularios
<Form></Form> : Formulario, no se visualiza se debe anidad un elemento,
ejemplo input para capturar información,
<label for="password">pastwort</label>: etiqueta para decir que dato es el

que se ingresa y se relaciona con un input con el for
<input type="password" id="password", name="password" required="true" placeh
older="Esctibre la contraseña"> : input tipo caja de texto, identificado con
id password con el nombre name= password, con requerimiento required= true y
para mostrar mensaje en los campos sin digitar placeholder = “digite la
edad”, si es tipo numérico con decimales se le debe agregar step=”any”
Bordes de texto y código de colores

style="border: 10px solid rgba(41, 41, 153, 0.5) : se le coloca borde solido
con código rbg y una trasparencia de 0.5 teniendo en cuenta que la
transparencia va de 0 1
style="border: 10px solid hsla(348, 83%, 47%, 0.5) : se le coloca borde

solido con código hsl y una trasparencia de 0.5 teniendo en cuenta que la
transparencia va de 0 1
Estilos CCS (Style)

color: rgb(24, 24, 173): color número rgb para el color de letra
background-color: blueviolet : nombre del color puede ser rgb pero este se

pinta alrededor de las letras
Comentarios CCS
/* */ : comentarios dentro de esos 2 signos (barra signos
Modelo de caja CCS
Width : ancho del contenedor del texto o contenido
Height: alto del contenedor del texto o contenido
color: black: Color de la letra
outline: entre el margen y el borde se puede usar igual que border
background-color: crimson : color del Fondo
padding: 15px: color del padding
border: 10px solid powderblue; color del borde
margin: 10: tamaño de la margen se usa para separar los reglones
margin:40px 10px 20px 10px: para las márgenes parte superior primero,

inferior, derecha y por ultimo izquierda.
Box-sizing: para que el padding con el contenido no se sobretensiones, que

si wedth es de 300 que no se pase de eso un que se sumen los dos elementos.
max-width: ancho contenedor del texto o contenido que se adapta a pantalla
ax-height: alto contenedor del texto o contenido que se adapta a pantalla
Evento de enlaces o link (a)

a:link : en estado inactivo
a:visited : cuando ya se a oprimido el enlace o link
a:hover : cuando estoy sobre el, ejemplo div.container.hidden:hover p{
a:active : cuando lo dejo oprimido
a:link, a:visited : separado por como se puede aplicar diferentes estilos a

varios elementos
Evento de reglones del la tabla

tr:nth-child(even) : evento para cambiar de color los reglones impares
atributos de texto
color:crimson; dale color a la letra
font-family: 'Courier New', Courier, monospace; darle tipo de letra a el

texto
font-size: 45px; tamaño de letra
line-height: 70px; Estacio entre lineas
background-color: #023047; color de background
Usar tipos de letras o fuente de letra (Google fonts)

Se busca en el buscador Google fonts y se copia y pega en el heat del
archivo html
Para llamar la fuente de letra se usa Font-family ejemplo: font-

family: Lobster;
Usar ilustraciones y imagenes gratis

Undraw: pagina de ilustraciones gratis libres de derechos de autor, se
pueden cambiar los colores y preferibles cambiar descargar SVG ya que no se
pixela.
Unsplash: pagina de imagines gratis libres de derechos de autor, las

búsquedas deben ser en ingles, se pueden descargar en diferentes
dimensiones.
Pexels: página de imágenes y videos gratis libre de derechos de autor, las

búsquedas en ingles, se puede descargar en diferentes dimensiones, también
personalizar y darle la medida
Htmlcolorcodes: paleta de colores (https://htmlcolorcodes.com/es/nombres-de-

los-colores/)
Animaciones de letras
https://developers.google.com/fonts/docs/getting_started pagina
url('https://fonts.googleapis.com/css?family=Rancho&effect=fire-
animation'); se usa en css y se colocaría la clase font-effect-fire-
animation
Generador de colores o paleta de colores estéticos

https://colors.dopely.top/colors/popular/ : puede copiar los coloeres
hexadecimales o en otros formatos
generadores de fondos, sombras y varias cosas mas

https://cssgenerator.org/: muy bueno para backgraund, gradiem y fondos
https://html-css-js.com/css/generator/gradient/ : muy bueno para efectos
allí otros mas pero buscar en Google: shadow css generetion htmal-css
Atributos style
background-color: #f71570; color al padding es decir a la caja contenedora
del del elemento html
border-radius: 10px 0 10px 0; borde con puntas curvas
padding: 10px; tamaño de la caja contenedora del elemento html
color:white; color de la letra
margin: 10px; margen o espacio entre otros elementos html
display: block; para que los elementos html no queden juntos o encima de

otro,
width: 20%; cubre el 20 por ciento del ancho de la pantalla y tambien se

pude poner en pixeles
float: left; elementos html flotan a la izquierda
cursor: pointer; para que al poner el cursor encima del elemento html se

coloque una manito.
z-index: -1; para colocar un elemento html detrás se usan los números

enteros negativos y positivos, si un numero es muy alto va quedar encima.
overflow: hidden; el texto que se sale o se desvorda de la caja se oculta.
overflow: scroll; le aparecen dos barras o scroll para bajar, subir e ir a

los lados de el texto que se sale de la caja
overflow: visible; aparece todo el texto hasta lo que se sale de la caja
overflow: auto; aparece un scroll o barra para bajar y subir el contenido

que se sale de la caja pero si el texto no se sale no aparece scroll
Editar textos CSS
Text-align: a linear texto
font-size: tamaño del texto
font-style: italic; estilo de letra
font-family: ; familia de estilos de texto
text-decoration: none; eliminar el subrayado ejemplo los enlaces o link
Font-size: 3vw; valor que flex
ible, cambia con el ancho de pantalla 1vm =1%
Font-size: 3vh; valor que flexible, cambia con el alto de pantalla 1vm =1%
Sombras en letras CSS

box-shadow 5px 5px 5px rbga(0, 0, 0, 0.5); para darle sombras al color se
puede usar cualquier tipo de color por nombre rbg o otros, son cuatro
valores el primero eje x o horizontal, segundo eje y o vertical, tercero
cantidad de difuminado de la sombra y por ultimo el color.
box-shadow 0px 10px 0px blue; tambien shadow se puede usar para colocar un
borde falso
box-shadow inset 3px 3px 5px rbga(0, 0, 0, 0.5); efecto un hundido
box-shadow inset 0 50px 40px rbga(255, 255, 255, 0.5); efecto de difuminado,
se logra hacer cuando no se le pone ningún valor al eje horizontal o x para
que no se desplace en este eje, se le colocar un color blanco.
box-shadow 0px 10px 0px blue, 0px 10px 0px greem; dos bordes falsos
text-shadow 0px 10px 0px blue; se pueden lograr efectos de hundimiento de

letras, retro, gravado, difuminado y otros
Fondo en CSS
background-image: linear-gradient(45deg,red,black); Fondo degradado y
tambien se puede hacer de 3 colores.
background-image: linear-gradient(red, black 40%, black 60%, green); que

empiece rojo hasta el 40% y lo haga hasta el 60% para cambiar a verde.
background-image:lineargradient(#6d298d, #6d298d 50%, #bada55 50%, #bada55):
se divide en dos colores 50% y 50%
background-image:lineargradient(#6d298d, #6d298d 50%, #bada55 50%, #bada55)
background-size: 100px, 20px;
con estas dos líneas se va dividiendo con las medidas de 100xp de largo por
20xp de ancho y se repite hasta llenar el background
background-size: contain; se adapta a lo ancho o width
background-size: cover; se adapta la altura o height
background-size: 100% 100%; se adapta a lo ancho y lo alto pero se altera o

se distorsión la imagen
background-repeat: no-repeat; para que lo anterior no se repita y se ejecute

una vez
background: radial-gradient(rgb(49, 106, 158),rgb(255, 255, 255) );
degradado radial
background: radial-gradient(circle at 10% 20%, rgb(49, 106, 158),rgb(255, 25
5, 255)); degradado radial movido
background-image: url("/image/fondo.png"); colocar una imagen de fondo y

para que no se repita se coloca en el otro renglo background-repeat: no-
repeat; y si quiere que solo se repita en el eje y solo colocar background-
repeat: repeat-y;
background-position: left;
background-position: left top; coloca la imagen de fondo arriba al lado

izquierdo.
background-attachment: fixed; el fondo no sigue al movimiento Scroll
background-attachment: scroll; el fondo si sigue al movimiento scroll
background-size: 100% 100%; tamaño del fondo
Bordes y outline en CSS

Border: 10px solid black; borde solido color negro de 10 pixeles
Border: 10px dashed gold; borde punteado color oro de 10 pixeles
Border: 10px double red; borde punteado color rojo de 10 pixeles
Border: 10px dotted red; borde punteado en círculos color rojo de 10 pixeles
Nota: outline se usa igual que border
Box model CSS

Margin: auto; se centra el elemento y la margen toma el mismo tamaño para
que se tome todo el acho de la pantalla
Ountline: entre el borde y el margen

background-color: crimson : color del Fondo
padding: 15px: color del padding
border: 10px solid powderblue; color del borde
margin: 10: tamaño de la margen se usa para separar los reglones
margin:40px 10px 20px 10px: para las márgenes parte superior primero,

inferior, derecha y por ultimo izquierda.
margin: auto; elemento se centra
Box-sizing: para que el padding con el contenido no se sobretensiones, que

si wedth es de 300 que no se pase de eso un que se sumen los dos elementos.
max-width: ancho contenedor del texto o contenido que se adapta a pantalla
ax-height: alto contenedor del texto o contenido que se adapta a pantalla
margin-left: inherit; hereda la propiedad del margen de un elemento padre

que puede ser div, section, etc
Formato de texto
text-shadow: 5px 5px 5px #ced4da; sombras o difuminado
font-size: 50px; Tamaño de fuente
letter-spacing: 5px; para dar espacio a las letras pero tambien puede tomar
valores negativos pero se juntarían las letras.
word-spacing: 10px; espacio entre letras y se pueden poner valores

negativos.
margin: auto; elemento se centra
text-align: justify; justificar el texto
text-decoration: overline; para colocar una línea sobre el texto
text-indent: 30px; para colocar un tabulador de tamaño de 30 pixeles
line-height: 3; un interlinieado de 3
text-shadow: 6px 6px 4px black; una sombra de 6 en el x, 6 en el, difiminado

de 4 y negra
Iconos
bootstrap
Pagina de iconos: https://icons.getbootstrap.com/
Enlace de instalacion de iconos:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-
icons@1.4.1/font/bootstrap-icons.css">
Se usa con la etiqueta <i class="bi-file-bar-graph-fill">barras</i>: con los
nombres de la pagina pero primer se colocara bi-
Para usarlo en el archivo css, para como car un icono diferente se cambia el
código que aparece después de d=. si se usa esta forma no se necesita en
enlace de instalación.
url("data:image/svg+xml,<svg height='20px' width='20px' viewBox='0 0 16 16'
xmlns='http://www.w3.org/2000/svg'><path d='M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1
1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H
1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2
3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z'/></svg>");
Google
Enlace de instalación de iconos:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="s
tylesheet">
Se llama la clase material-icons y se usa la etiqueta i de icons donde se

coloca el nombre del icons ejemplo:
<i class="materialicons google flotando">emoji_nature</i> (muy diferente a
Bootstrap)
Vertical-aling: bottom; para alinear el icono con el texto, teniendo en

cuenta la parte de debajo de icons como referencia (alinear)
Ionicons
Enlace de instalación de iconos:
<script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>
Se copia y se pega la etiqueta del la pagina no se usa la etiqueta i de

icono, se pueden usar outline, filled y sharp ejemplo
<ion-icon name="shield-checkmark-outline"></ion-icon>
<ion-icon name="shield-checkmark"></ion-icon>
Dentro de estas etiquetas se puede usar clases para editar
Propiedad de display
display: block; los elementos aparecen en columna, por default es block
display: inline; los elementos aparecen en fila y ocupa la menor cantidad de
espacio
Nota: hay elementos inline y otros block, los primeros mencionados solo
ocupan el espacio necesario y lo otros se mueven en bloque, spam es inline
para poder cambiar ese atributo se usa display
display: inline-block; estos elementos se comportan en línea pero no ocupan

el mínimo espacio, es un intermedio entre el block y inline donde se puede
controlar el alto
Atributo position
position: static; Muestra tan cual el flujo esperado o en el lugar donde se
espera, en el que viene por default
position: relative; se va mover de manera relativa a una posición (top,

left, bottom y rifth, se usan 2 para indicar), se mueve a la posición
asignada pero se mantiene reservada la posición en la que estaba antes de
moverse, en la nueva posición se puede traslapar con otros elementos pero la
anterior posición se respeta a menos de que otro elemento relativo tome su
posición
position: fixed; se va mover de manera relativa a una posición (top, left,

bottom y rifth, se usan 2 para indicar), se mueve a la posición asignada
pero no se mantiene reservada la posición anterior, es decir que los otros
elementos toman su lugar y no se mueve con el scroll (se mantiene en el
mismo lugar de la pantalla)
position: absolute; se mueve relativamente en un elemento padre, el elemento

padre tiene que ser relative o fixed.
position: sticky; se mueve con la pantalla hasta llegar al final de ella y

se matiné en la posición que se le dio, para que lo lea el navegador safari
allí que agregarle position: -webkit-sticky;
Selectores
Selectores dependientes: lo aplica para todos los descendientes hijo
directos o no ejemplo div.container.descendientes p{}, container es la que
le da el estilo a la caja div y dependientes a los hijos en todas las
líneas.
Selectores child: lo aplica para todos los hijo pero solo los directos
ejemplo: div.container.hijodirecto > p{}, container es la que el da el
estilo a la caja y la otra clase hijos directos parrado(p), solo edita los
elementos html que sean hijos directos o de primera línea
Selector adyacente: lo aplica a el elemento html después de aplicada la

clase, ejemplo: div.container.adyacente + p{} aplica al siguiente elemento
html si es p y no esta anidado o es hijo de otro elemento (solo al primero),
si el elemento que sigue es h1 no le aplica el estilo. Tambien allí otro
tipo que le aplica a todos los elementos html, ejemplo:
div.container.adyacente ~ p{}, container es la que el da el estilo a la caja
y la otra clase hijos directos parrado(p), solo edita los elementos html que
sean hijos directos o de primera línea (todos).
Selector universal: es el que se le aplica a todo y se hace referencia a el

con el símbolo *
Pseudo clases
first-child :se le aplica al primer hijo, ejemplo:
div.container.first p:first-child, en este caso en el primer elemento p y se
llama la clase con container first
selction: se aplica los que están adentro del padre, ejemplo

div.container2 p::selection, se aplica con la misma clase container2 se
aplica para todos los hijos
first-line: se aplica para todos los elementos dentro del padre, ejemplo
div.container2 p::first-line se aplica con la clase container2
firt-litter: se aplica para todos los elementos dentro del padre, ejemplo
div.container2.letterM p::first-letter, se aplica con la clase container2
letter.
Before: se aplica a los elementos hijo que sean párrafo, se le añade al

final con contetn lo mismo seria con ofter pero antes, ejemplo
div.contenedor p::{ se agrega a los hijos del padre que con tiene la calse
contenedor pero solo párrafos.
Flex-box (display: flex;)
display: flex; se agregan los elementos de izquierda a derecha por default
flex-direction: row; la que viene por default en la propiedad de fex
flex-direction: row-reverse; es parecida a la que bien por default pero

inverso el orden
flex-direction: column; se agregan los elementos de arriba hacia abajo

ocupando todo el ancho disponible
flex-direction: columna-reverse; se agrega los elementos de arriba hacia

abajo pero de forma inversa y ocupan todo el ancho disponible
flex-wrap: wrap; envolver en la caja los hijos
flex-wrap: row wrap; darle formato a la propiedad flex y luego decir que la

caja padre envuelva a los hijos con wrap
justify-content: flex-start;la que viene por default en la propiedad de flex
justify-content: center; justifica el contenido de flex al centro

justify-content: flex-end; justifica el contenido del flex a la derecha
justify-content: space-between; deja espacios dentro de el flex pero se se

vuelve muy pequeña la pantalla no se dejan de ver todos los box hijos
justify-content: space-around; deja espacios dentro del flex y al comenzó

pero se vuelve muy pequeña la pantalla no se dejan de ver todos los box
hijos
justify-content: space-evenly; deja el mismo espacio en el comienzo y entre

box hijos pero se vuelve muy pequeña la pantalla no se dejan de ver todos
los box hijos
align-items: flex-start; no permite que los boxes hijos se alarguen y se

alinea con la parte superior ya que por default eso pasa
align-items: center; no permite que los boxes hijos se alarguen y se centran

ya que por default eso pasa
align-items: stretch; valor por default, se alargan hacia abajo los boxes

hijos
align-items: baseline; valor por default, se alargan hacia abajo los boxes

hijos
align-content: center; alinear el contenido al centro del padre
align-content: flex-end; alienar el contenido a la parte inferior de padre
align-content: flex-start; alinear el contenido a la parte superior del

contenido
flex-grow: 5; el elemento se duplica en tamaño horizontalmente y decrece si

disminuimos la pantalla, se aplica a algún hijo
flex-basis: 200px; el elemento mide 200 pixeles y no decrece si disminuimos

la pantalla (no es flexible), se aplica a algún hijo
align-self: center; no permite que los hijos se alarguen pero este se aplica

indivudualmente

HTML5 etiquetas

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML5 etiquetas

Cargado por

Copyright:

Formatos disponibles

Estructura de etiquetas de HTML5

Inicio del código

< html > “”</html>: lo que va en la pagina Wed

<meta charset="UTF-8">: para que acepte un grupo de carateres como los

<head>””</head> : todo lo que se va mostrar en la página wed.

<h1></h1>: encabezado principal

<h2></h2>: Encabezados segundarios hay hasta h5.

<td></td> : etiqueta que permite agrupar elementos en uno solo

<div></div> : agrupar elementos html, es muy importante para declarar una

<audio></audio>: cargar audios ojala en mp3

Atributos: autoplay, controls, poster, width, height, muted, loop, preload,

Etiquetas principales de semántica

<section></section> :sección puede sustituir div, que agrupan elementos

<article></article> :sección puede sustituir div, que agrupan elementos html

<header></header> : encabezado pueden haber varios

<main></main>: contenido principal, solo puede aparecer una vez en la pagina

<nav></nav> barra de navegación

<aside></aside>:para poner barra lateral de información o información extra,

<footer></footer> pie de pagina

<hgroup></hgroup> para agrupar varios títulos

<form></form> agrupar elementos del formulario

<ol></ol> : adentro se coloca una lista con el <li></li> y adentro el nombre

Etiquetas para link

<figcaption></ figcaption>: texto de pie de foto

img src="fotos/css3.png" alt="LOGO CSS" width="200px title=”LOGO CSS” :

style: para poner estilo ejemplo:

Etiquetas para tabla

<th></th> : etiqueta de encabezado de tabla, debe ir anidada a la etiqueta

<td></td> : etiqueta de los datos que contiene la tabla, debe ir anidada al

Etiquetas de párrafo para dar formato

<b></b> : todo texto que este adentro de allí queda en negrilla

<strong></strong> : todo texto que este adentro de allí queda en negrilla,

<em></em>: italica para enfatizar

<small></small>: pone la letra chiquita

<mark></mark>: marcar el texto o resaltarlo con amarillo

<del></dell>: para eliminar el texto o ponerle una raya al texto

<sub></sub>: para subindices

<sup></sup>: super indices

<code></code>: hace que la letra se vuelva menos negra, no spuede servir

char ret : paginas de caracteres donde hay 3 opciones: nombre, hexadecimal y

<ul></ul> : listados sin orden, no se visualiza se debe anidar etiqueta,

<dl></dl> : listado de descripción, no se visualiza se debe anidar etiqueta,

<label for="password">pastwort</label>: etiqueta para decir que dato es el

Bordes de texto y código de colores

style="border: 10px solid hsla(348, 83%, 47%, 0.5) : se le coloca borde

Estilos CCS (Style)

background-color: blueviolet : nombre del color puede ser rgb pero este se

Modelo de caja CCS

Width : ancho del contenedor del texto o contenido

Height: alto del contenedor del texto o contenido

color: black: Color de la letra

outline: entre el margen y el borde se puede usar igual que border

background-color: crimson : color del Fondo

padding: 15px: color del padding

border: 10px solid powderblue; color del borde

margin: 10: tamaño de la margen se usa para separar los reglones

margin:40px 10px 20px 10px: para las márgenes parte superior primero,

Box-sizing: para que el padding con el contenido no se sobretensiones, que

max-width: ancho contenedor del texto o contenido que se adapta a pantalla

ax-height: alto contenedor del texto o contenido que se adapta a pantalla

Evento de enlaces o link (a)

a:visited : cuando ya se a oprimido el enlace o link

a:hover : cuando estoy sobre el, ejemplo div.container.hidden:hover p{