💻 Juan Barco

Cuando hablamos de HTML5 lo primero que tenemos que saber es que es la última versión de la tecnología HTML, cuyas siglas corresponden a “HyperText Markup Language”

Algo importante a tener en cuenta y con lo que no hay que confundirse, es que porque HTML sea un lenguaje no quiere decir que sea un lenguaje programación. HTML no lo es, ya que no tiene estructuras de lenguaje de programación, como los bucles, las condiciones, las funciones, etcétera.

Es un lenguaje de diseño gráfico que permite definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. Es muy usado para establecer el diseño visual de los documentos web e interfaces de usuario escritas en HTML.

En la propia definición de CSS vemos que está muy ligado desde su nacimiento a HTML. Desde que nació, el objetivo de CSS fue poner un poco de orden a la hora de aplicar los estilos a las páginas web.

Tipos de Etiquetas

ESTRUCTURA DE ETIQUETAS
Etiquetas que solo se aperturan Etiquetas que tienen una apertura y un sierre
Este tipo de etiqueta comúnmente se utilizan para indicar una dirección u origen, se componen por argumentos u opciones tales como src, href. Este tipo de etiquetas común mente se utilizan para encontrar un contenido tales como texto, img, entre otros.

Listado de etiquetas dirigidas al texto

<h1></h1> a <h6></h6>

Sirve para escribir un titulo

CSS
color: ;
font-size: ;
font-family: ;
text-align: ;
background-color: ;
font-style: ;
padding: ;
font-weight: ;
<a></a>

Representa un hiperenlace


CSS
color: ;
display: ;
width: ;
text-decoration: ;
padding: ;
border: ;
border-radius: ;
font-size: ;
background-color: ;
margin: ;
<em></em>

Representa un texto enfatizado


CSS
color: ;
font-weight: ;
font-size: ;
background-color: ;
font-family: ;
text-align: ;
font-style: ;
padding: ;
margin: ;
<strong></strong>

Representa un texto importante


CSS
color: ;
font-size: ;
background-color: ;
padding: ;
font-family: ;
text-align: ;
font-weight: ;
font-style: ;
margin: ;
<s></s>

Representa contenido que no es exacto, tiene el estilo tachado

CSS
color: ;
font-size: ;
background-color: ;
padding: ;
font-family: ;
text-align: ;
margin: ;
font-weight: ;
<cite></cite>

Representa el título de una obra


CSS
color: ;
font-size: ;
padding: ;
font-family: ;
text-align: ;
font-style: ;
font-weight: ;
<q></q>

Representa una cita textual entre comillas

CSS
color: ;
font-size: ;
font-family: ;
text-align: ;
font-style: ;
font-weight: ;
<dfn></dfn>

Sirve para marcar el término que se quiere definir

CSS
color: ;
font-size: ;
font-family: ;
text-align: ;
font-style: ;
font-weight: ;
<time></time>

Representa un valor de fecha y hora


CSS
color: ;
font-size: ;
font-family: ;
font-style: ;
font-weight: ;
<code></code>

Representa un código de programación


CSS
color: ;
font-size: ;
font-family: ;
font-style: ;
font-weight: ;
<i></i>

Muestra el texto marcado con un estilo en cursiva o itálica

CSS
color: ;
font-size: ;
font-family: ;
font-weight: ;
<b></b>

Muestra el texto marcado con un estilo en negrita


CSS
color: ;
font-size: ;
font-family: ;
font-weight: ;
text-align: ;
<u></u>

Muestra el texto subrayado


CSS
color: ;
font-size: ;
font-family: ;
font-weight: ;
text-align: ;
<br></br>

Representa un salto de línea

<p></p>

Sirve para colocar un parrafo


CSS
color: ;
background-color: ;
font-size: ;
font-family: ;
font-weight: ;
text-align: ;
<ul></ul>

Sirve para crear una lista no ordenada


CSS
list-style: ;
width: ;
display: ;
justify-content: ;
flex-direction: ;
text-align: ;
<ol></ol>

Sirve para crear una lista ordenada


CSS
color: ;
font-size: ;
font-family: ;
font-weight: ;
text-align: ;
<li></li>

Representa un item en una lista


CSS
color: ;
font-size: ;
font-family: ;
font-weight: ;
text-align: ;
<sub></sub>

Establece un subíndice y un superíndice respectivamente

CSS
color: ;
font-size: ;
font-weight: ;
text-align: ;
<kdb></kdb>

Representa el texto o la tecla que debe ingresar o pulsar el usuario

CSS
color: ;
font-size: ;
font-weight: ;
text-align: ;
font-style: ;

Listado de etiquetas dirigidas a objetos

<!DOCTYPE>

Tipo de documento (versión de html empleada)

<html></html>

Engloba todo el documento lange

<head></head>

Delimita el encabezado del documento

<title></title>

Título del documento (se muestra en la pestaña del navegador)

<link>

enlace a otros archivos (hoja de estilo, etc.)

<meta>

Metainformación sobre el documento

<style></style>

Hoja de estilo incluida en el documento

<body><body>

Delimita el cuerpo del documento

<article></article>

Sirve para colocar un artículo

CSS
background-color: ;
width: ;
height: ;
display: ;
justify-content: ;
flex-direction: ;
flex-wrap: ;
margin: ;
padding: ;
<section></section>

Divide en secciones el código

CSS
background-color: ;
width: ;
height: ;
display: ;
justify-content: ;
flex-direction: ;
flex-wrap: ;
margin: ;
padding: ;
<header></header>

cabecera

CSS
background-color: ;
height: ;
display: ;
justify-content: ;
flex-direction: ;
flex-wrap: ;
margin: ;
padding: ;
<footer></footer>

Es el pie de pagina

CSS
background-color: ;
height: ;
display: ;
justify-content: ;
flex-direction: ;
flex-wrap: ;
margin: ;
padding: ;
<img></img>

Se utiliza para colocar una imagen

CSS
width: ;
height: ;
border: ;
border-radius: ;
margin: ;
padding: ;
<nav></nav>

Sirve para crear un navegador

CSS
color: ;
margin-right: ;
margin-left: ;
margin: ;
padding: ;
<div></div>

Sirve para crear cajas internas en el section

CSS
background-color: ;
width: ;
height: ;
display: ;
justify-content: ;
flex-direction: ;
flex-wrap: ;
margin: ;
padding: ;

Listado de propiedades css dirigidas a texto

color: ;

Sirve para dar un color al texto

font-size: ;

Sirve para dar un tamaño al texto

text-align: ;

Sirve para dar una alineación al texto

font-family: ;

Sirve para cambiar la fuente del texto

font-weight: ;

Sirve para dar un grozor al texto

text-decoration: ;

Sirve para quitar la decoración a un texto, por ejemplo a un link

font-variant: ;

Sirve para colocar variantes tipograficas

font-stretch: ;

Modifica la anchura de un texto

background-color: ;

Da un fondo de color al texto

list-style: ;

Da la opción de cambiarle el estilo a las listas

letter-spacing: ;

Indica el espacio entre cada letra

line-height: ;

Indica el espacio entre cada línea del texto

Listado de propiedad css dirigidas a objetos

width: ;

Define la anchura o distancia del texto

border: ;

Sirve para dar un borde

margin: ;

Da un margen

padding: ;

Delimita los margenes interiores

display: ;

Indica el tipo de caja deseada

flex-direction: ;

Indica la direccion de las cajas

flex-wrap: ;

Hace que los objetos al ocupar toda la caja bajen

justify-content: ;

Hace que los objetos al ocupar toda la caja bajen

height: ;

Cambia la altura de un objeto

border-radius: ;

Hace que los bordes tengan un redondeado

box-sizing: ;

Cambia el modelo de caja que traen por defecto los navegadores

background-image: ;

Se emplea para establecer la imagen de fondo de cada elemento