\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{Aleordoh (Martin Ordonez)}
\pdfinfo{
  /Title (html-basico.pdf)
  /Creator (Cheatography)
  /Author (Aleordoh (Martin Ordonez))
  /Subject (HTML Basico Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{1212A3}
\definecolor{LightBackground}{HTML}{F0F0F9}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{HTML Basico Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Aleordoh (Martin Ordonez)} via \textcolor{DarkBackground}{\uline{cheatography.com/146230/cs/31992/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}Aleordoh (Martin Ordonez) \\
  \uline{cheatography.com/martin-ordonez} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Not Yet Published.\\
   Updated 15th May, 2022.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{2}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{HTML: Estructura}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\textless{}!..HyperText Markup Language-{}-\textgreater{} \newline \textless{}!DOCTYPE html\textgreater{} \newline \textless{}html lang="es"\textgreater{} \newline \textless{}head\textgreater{} \newline     \textless{}meta name="viewport" \seqsplit{content="whidt=device-whidt}, inicial-scale=1"\textgreater{} (permite armar una pagina reposnive) \newline     \textless{}meta charset="UTF-8"\textgreater{}  \newline     \textless{}title\textgreater{}Hello world\textless{}/title\textgreater{} \newline \textless{}/head\textgreater{} \newline      \textless{}body\textgreater{} \newline              \newline      \textless{}/body\textgreater{} \newline \textless{}/html\textgreater{}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{HTML: Etiquetas de Texto}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}p\textgreater{}}}: Parrafo} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}h1,h2,h3\textgreater{}}}: Cabeceras HTML} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{background=}} "URL de la imagen"} \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{bgcolor}}="color de fondo del documento"} \tn 
% Row Count 5 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{text=}}"color para el texto documento."} \tn 
% Row Count 6 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}b,i,u\textgreater{}}}: negrita, itálica y subrayado} \tn 
% Row Count 7 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}font\textgreater{}}}añadir fuente y texto dentro de esta etiqueta \textasciicircum{}(1)\textasciicircum{}} \tn 
% Row Count 9 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\textasciicircum{}(1)\textasciicircum{} La sintaxis para agregar atributos a las etiquetas es \newline {\bf{\textless{}etiqueta atributo1="valor"\textgreater{}}} {\emph{Texto}} {\bf{\textless{}/etiqueta\textgreater{}}}. \newline P/Ej.: \newline {\bf{\textless{}font size="5" color="\#0000ff"\textgreater{}}} {\emph{Texto}} {\bf{\textless{}/font\textgreater{}}}.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{HTML: Etiquetas Semanticas}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}Header\textgreater{}}} : Tradicionalmente, aquí van cosas como el logotipo de la web, la barra de navegación, los enlaces a las redes sociales e incluso un pequeño campo de búsquedas rápidas.} \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}nav\textgreater{}}}: Sirve para generar una barra de navegación, sea la navegación principal o una navegación alternativa. Dentro de esta etiqueta, el árbol de navegación se suele implementar a través de listas desordenadas, elementos de listas y enlaces o hipervínculos. Generalmente va dentro del \textless{}header\textgreater{} o del \textless{}footer\textgreater{}} \tn 
% Row Count 11 (+ 7)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}section\textgreater{}}}: Nos permite definir una sección de contenido. Si quisiéramos crear un breve apartado sobre un producto o servicio, esta etiqueta sería una excelente opción.} \tn 
% Row Count 15 (+ 4)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}article\textgreater{}}}: Nos permite definir una pieza de contenido independiente. Es decir, contenido que podría funcionar por sí solo sin necesidad de todo lo que lo rodea: un producto, un servicio, una noticia, etc.} \tn 
% Row Count 20 (+ 5)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}footer\textgreater{}}}: Nos sirve para generar el pie de página principal del documento, o el pie de página de una sección de contenido. Tradicionalmente, aquí van cosas como los derechos reservados y algunos enlaces adicionales de la web.} \tn 
% Row Count 25 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\{\{popup="https://www.anerbarrena.com/wp-content/uploads/2015/05/etiquetas-semanticas-html5.jpg"\}\}Ejemplo de Estructura\{\{/popup\}\}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{HTML: Rutas, Hipervinculos e Imagenes}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\emph{Ruta Absoluta}}: https://www.google.com} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\emph{Ruta Relativa}}: ../imagenes/perfil.jpg} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\emph{Hipervínculo Externo}} \textless{}a href="https://www.google.com"\textgreater{}A Google\textless{}/a\textgreater{}} \tn 
% Row Count 4 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\emph{Hpv. Local}}: \textless{}a href="inicio.html"\textgreater{}Inicio\textless{}/a\textgreater{}} \tn 
% Row Count 5 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\emph{Anclas}}: \textless{}a href="\#biografia"\textgreater{}Biografía\textless{}/a\textgreater{}\{\{nl\}\}\textless{}a href="https://www.sitio.com/\#contacto"\textgreater{}Contacto\textless{}/a\textgreater{}\{\{nl\}\}\textless{}a href="nosotros.html\#nuestro-equipo"\textgreater{}Nuestro equipo\textless{}/a\textgreater{}} \tn 
% Row Count 9 (+ 4)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\emph{Correo}}: \textless{}a href="mailto:user@server.com"\textgreater{}Enviar mensaje\textless{}/a\textgreater{}} \tn 
% Row Count 11 (+ 2)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\emph{Telefono}}: \textless{}a href="Tel:1145678899"\textgreater{}Teléfono\textless{}/a\textgreater{}} \tn 
% Row Count 12 (+ 1)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\emph{Imágen}}: \textless{}img src="img/fotoPerfil.jpg" alt="Imagen de perfil"\textgreater{}\{\{nl\}\}\textless{}img width="320" src="img/fotoPerfil.jpg"\textgreater{}} \tn 
% Row Count 15 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{(1) Los tributos width y height permiten ajustar el ancho y alto de la imagen.-}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{HTML: Listas}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}ol\textgreater{}}} Lista ordenada (nums y letras)\{\{nl\}\}Atributo: {\emph{type=}}"Numerico, Alfabetico, Romano"/*start="1, 16, 2"\{\{nl\}\} \textless{}ol type="A" start="10"\textgreater{}....\textless{}/ol\textgreater{}} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}ul\textgreater{}}} Listas desordenadas (puntos)\{\{nl\}\}Atributo: {\emph{type=}}"Disc (●), Circle (○), Square (◼), None"\{\{nl\}\} \textless{}ul type="disc"\textgreater{}....\textless{}/ul\textgreater{}} \tn 
% Row Count 6 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}dl\textgreater{}}} lista completa} \tn 
% Row Count 7 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}li\textgreater{}}} Elemento lista} \tn 
% Row Count 8 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}dt\textgreater{}}} delimitan terminos} \tn 
% Row Count 9 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}dd\textgreater{}}} definiciones} \tn 
% Row Count 10 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{CSS: Vinculación con HTML}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Vinculación con HTML}}: escribiendo la Etiqueta {\bf{\textless{}link\textgreater{}}} en el campo {\bf{\textless{}HEAD\textgreater{}}} de nuestro documento HTML. \newline % Row Count 3 (+ 3)
P/ej.: \newline % Row Count 4 (+ 1)
{\bf{ \textless{}link href="css/estilos.css" rel="stylesheet"\textgreater{}}} \newline % Row Count 6 (+ 2)
{\bf{Esquema general de sintaxis de CSS::}} \newline % Row Count 7 (+ 1)
selector \#id .class :pseudoclase ::pseudoelemento {[}atributo{]} \{ \newline % Row Count 9 (+ 2)
	propiedad: valor; \newline % Row Count 10 (+ 1)
	propiedad: valor; \newline % Row Count 11 (+ 1)
	propiedad: valor; \newline % Row Count 12 (+ 1)
\}% Row Count 13 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{CSS: Colores de Fondo e Imagenes de Fondo}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Color de Fondo}}: Asigna un color de fondo a un elemento.\{\{nl\}\}CSS: p \{ background-color: red\}\{\{nl\}\}CSS: p \{ background-color: \#3459ff \}\{\{nl\}\}CSS: p \{ background-color: rgb(12, 34, 32) \}} \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Imagen de Fondo}}: Asigna una imagen de fondo al elemento.\{\{nl\}\}CSS: body \{ background-image: url('../img/bici.jpg') \}} \tn 
% Row Count 7 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Repeticion de Imagen}}: Controla si se repite la imagen y de qué manera. Recibe los valores repeat, no repeat, repeat-x, repeat-y, round y space.\{\{nl\}\}CSS: body \{ background-repeat: repeat-x \}} \tn 
% Row Count 11 (+ 4)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Posicion de Imagen}}: Mueve la imagen dentro del elemento. Recibe como valores tamaños en pixeles y porcentajes, así como también right, bottom, left, etcétera.\{\{nl\}\}CSS: body \{ background-position: right top \}} \tn 
% Row Count 16 (+ 5)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Movimiento de lmagen}}: Establece si la imagen de fondo se va a mover junto con la página al hacer scroll. Valores: fixed, scroll, inherit e initial.\{\{nl\}\}CSS:body \{ background-attachment: fixed \}} \tn 
% Row Count 20 (+ 4)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Tamaño de Imagen}}: Recibe como valor contain, cover, inherit; así como también tamaños en pixeles y porcentajes indicando con el primer valor el ancho y con el segundo el alto..\{\{nl\}\}CSS: body \{ background-size: 130px \}} \tn 
% Row Count 25 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{CSS: Selectores}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Regla CSS:}} selector \{propiedad: valor;\}\{\{nl\}\}{\emph{body}} \{\{\{nl\}\}background-color: purple;\{\{nl\}\}font-family: sans-serif;\{\{nl\}\}text-align: center;\{\{nl\}\}\}} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Selectores de ID}}: se indica con \#:\{\{nl\}\}CSS: \#saludo\{color: blue\}\{\{nl\}\}HTML: \textless{}h3 id="saludo"\textgreater{}¡Hola!\textless{}/h3\textgreater{}} \tn 
% Row Count 6 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Selectores de clase}}: se indica con ".clase".\{\{nl\}\}CSS: .noticia \{ font-size: 22px \}\{\{nl\}\}HTML: \textless{}h3 class="noticia"\textgreater{}Una noticia\textless{}/h3\textgreater{}} \tn 
% Row Count 9 (+ 3)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Selectores de Etiqueta}}: se aplicará sobre todas las etiquetas indicadas.\{\{nl\}\}CSS: p \{ color: gray \}\{\{nl\}\}HTML: \textless{}p\textgreater{}Ad lorem ipsum \textless{}/p\textgreater{}} \tn 
% Row Count 12 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Selectores Combinado}}: en este caso un selector de etiqueta con uno de clase.\{\{nl\}\}CSS h2.subtitulo \{ color: yellow \}\{\{nl\}\}HTML: \textless{}h2 class="subtitulo"\textgreater{}Un subtítulo\textless{}/h2\textgreater{}} \tn 
% Row Count 16 (+ 4)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Selectores Descendentes}}: Son mas espesíficos.\{\{nl\}\}En este caso se aplicara uncamente a las etiquetas \textless{}li\textgreater{} contenidas en la etiqueta \textless{}ul\textgreater{} con el ID \#lista.\{\{nl\}\}CSS: ul\#lista li \{ text-align: center \}\{\{nl\}\}HTML: \textless{}ul id="lista"\textgreater{}\{\{nl\}\}li\textgreater{}Primer ítem\textless{}/li\textgreater{}\{\{nl\}\}\textless{}/ul\textgreater{}} \tn 
% Row Count 22 (+ 6)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Selectores Universales}}: Afecta a todo el documento\{\{nl\}\} *\{font-family: arial\}} \tn 
% Row Count 24 (+ 2)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Selectores de Atributo}}} \tn 
% Row Count 25 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Pseudo Selectores}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{pseudo clases}}: {\emph{permiten aplicar estilos en función de:\{\{nl\}\}● Los estados de los elementos.\{\{nl\}\}● La ubicación dentro de la estructura de HTML.\{\{nl\}\}● La presencia de ciertos atributos de HTML.}}} \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{:link}}: Se utiliza para aplicar estilo a los enlaces {\bf{\textless{}a\textgreater{}\textless{}/a\textgreater{}}} que tengan la propiedad {\emph{href}}\{\{nl\}\}a:link \{\{\{nl\}\} background-color: rgb(234, 0, 255);\{\{\{nl\}\} border-color: rgb(161, 17, 89);\{\{\{nl\}\} color: red;\{\{\{nl\}\} \}} \tn 
% Row Count 10 (+ 5)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{:visited}}: Se utiliza para aplicar estilo a los enlaces {\bf{\textless{}a\textgreater{}\textless{}/a\textgreater{}}} que han sido visitados al menos una vez por parte del usuario.\{\{nl\}\}a:visited \{\{\{nl\}\} background-color: rgb(234, 0, 255);\{\{\{nl\}\} border-color: rgb(161, 17, 89);\{\{\{nl\}\} color: red;\{\{\{nl\}\} \}} \tn 
% Row Count 16 (+ 6)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{:hover}}:  Si bien está relacionado con los {\bf{enlaces}}, puede ser aplicado a cualquier otro elemento de HTML. Se utiliza para aplicar estilo a cualquier elemento sobre el cual el usuario posicione el cursor.\{\{nl\}\} a:hover \{\{\{nl\}\} background-color: gold;\{\{nl\}\}\}} \tn 
% Row Count 22 (+ 6)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{:active}}\textasciicircum{}(1)\textasciicircum{}: aplica estilo a los enlaces {\bf{\textless{}a\textgreater{}\textless{}/a\textgreater{}}} que estén siendo clickeados por el usuario. Normalmente se utiliza para la animación del click.\{\{nl\}\} a:active \{\{\{nl\}\} background-color: rgb(234, 0, 255);\{\{nl\}\} border-color: rgb(161, 17, 89);\{\{nl\}\} color: red;\{\{nl\}\} \}} \tn 
% Row Count 28 (+ 6)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{:focus}}: Se aplica sobre el {\bf{\textless{}imput\textgreater{}}} cuando el cursor se encuentra dentro del elemento. El caso más normal es cuando el usuario está completando un campo de un formulario.\{\{nl\}\} input:focus \{\{\{nl\}\} color: orange;\{\{nl\}\} font-weight: bold;\{\{nl\}\} \}} \tn 
% Row Count 34 (+ 6)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Pseudo Selectores (cont)}}  \tn
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{:disabled}}: Se aplica cuando un elemento está deshabilitado, Normalmente se utiliza para darle estilos a los campos que no se pueden completar en un formulario. O a aquellas opciones que están desactivadas.\{\{nl\}\} input:disabled \{\{\{nl\}\} background-color: gray;\{\{nl\}\} \}} \tn 
% Row Count 6 (+ 6)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Pseudo elementos}}: nos permiten crear elementos desde CSS sin tener que modificar la estructura del HTML.\{\{nl\}\}Para usarlos, escribimos el nombre del selector primero, seguido de doble dos puntos :: y el pseudo elemento que queramos utilizar.} \tn 
% Row Count 11 (+ 5)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{::before}} Se utiliza junto con la propiedad content para introducir contenido en el documento antes del contenido interno del elemento.\{\{nl\}\} div::before \{\{\{nl\}\} content: "Esto se renderiza antes del elemento";\{\{nl\}\} color: red;\{\{nl\}\} \}} \tn 
% Row Count 16 (+ 5)
% Row 9
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{::after}} Se utiliza junto con la propiedad content para introducir contenido en el documento después del contenido interno del elemento.\{\{nl\}\} div::after \{\{\{nl\}\} content: "Esto se renderiza después del elemento";\{\{nl\}\} color: red;\{\{nl\}\} \}} \tn 
% Row Count 21 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\textasciicircum{}(1)\textasciicircum{} : :active serán anulados por cualquier pseudoclase posterior relacionada con el enlace (:link, :hover o :visited) que tenga al menos la misma especificidad. utilizar respetando el orden :link — :visited — :hover — :active.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{CSS: Media queries}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{HTML: \textless{}meta name="viewport" \seqsplit{content="width=device-width}, initial-scale=1"\textgreater{}} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{min-width}}: "Si como mínimo el viewport tiene N píxeles de ancho, apliquemos estas reglas".\{\{nl\}\}@media (min-width: 460px)\{\{nl\}\}\{ body \{ background: red;\}\{\{nl\}\} \}} \tn 
% Row Count 6 (+ 4)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{max-width}}: "Si como máximo viewport tiene N píxeles de ancho, apliquemos estas reglas".\{\{nl\}\}@media (max-width: 768px)\{\{nl\}\}\{ body \{ background: yellow;\}\{\{nl\}\} \}} \tn 
% Row Count 10 (+ 4)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Orientación}}: "Si como máximo el viewport tiene N píxeles de ancho y además el dispositivo está en posición vertical/horizontal, apliquemos estas reglas".\{\{nl\}\}@media (max-width: 460px) and (orientation: landscape)\{\{nl\}\}\{ body \{ background: blue; \}\{\{nl\}\} \}} \tn 
% Row Count 16 (+ 6)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Estrategia de diseño}}: Mobile Firts: Si utilizamos mobile first como estrategia de diseño, la idea es determinar de manera general las reglas CSS para pequeñas pantallas para luego, a través de media queries, ir aclarando el comportamiento en viewports más grandes.\{\{nl\}\}CSS: body \{ background: red; \}\{\{nl\}\}@media (min-width: 460px)\{ /{\emph{ Tablets }}/ \}\{\{nl\}\}@media (min-width: 768px)\{ /{\emph{ Laptop }}/\}} \tn 
% Row Count 25 (+ 9)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{breakpoints}}: 0-480 Smaller smartophones,\{\{nl\}\} 481-768 Tablets and larger smartphones,\{\{nl\}\} 769-1279 Laptosp, 1280+ Larger desktops} \tn 
% Row Count 28 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Reglas de CSS que nos permiten cambiar los estilos de los elementos en función de las Características del dispositivo que esté visualizando nuestro sitio. \newline Por lo general, se escriben al final de nuestra hoja de CSS.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{HTML Formularios-1-}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}form\textgreater{}}} indica que vamos a crear un formulario\{\{nl\}\}form action="/registro" method="POST"\textgreater{}\{\{nl\}\} \textless{}!-{}- Aquí van los campos -{}-\textgreater{}\{\{nl\}\} \textless{}/form\textgreater{}\{\{nl\}\}{\bf{action}} define la ruta en donde se va a procesar la información capturada. {\bf{method}} define cómo se enviará la información hay solo dos valores posibles: GET y POST.} \tn 
% Row Count 7 (+ 7)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}imput\textgreater{}}} puede recibir varios atributos\{\{nl\}\} {\bf{type}} permite obtener distintos tipos de campos\{\{nl\}\}{\bf{require}} hace que el campo sea obligatorio.\{\{nl\}\}{\bf{placeholder}} Da una pista al usuario sobre lo que puede introducir.\{\{nl\}\}\textless{}form action="/registro" method="POST"\textgreater{}\{\{nl\}\}  \textless{}input type="text" name="usuario" required\textgreater{}\{\{nl\}\}\textless{}input type="password" name="clave" required\textgreater{}\{\{nl\}\}\textless{}input type="email" name="email"\textgreater{}\{\{nl\}\}\textless{}input type="tel" name="telefono"\textgreater{}\{\{nl\}\}\textless{}input type="number" name="edad"\textgreater{}\{\{nl\}\}\textless{}/form\textgreater{}} \tn 
% Row Count 18 (+ 11)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}label\textgreater{}}}Sirve para asociar un texto descriptivo a un campo determinado.\{\{nl\}\}\textless{}form action="/registro" method="POST"\textgreater{}\{\{nl\}\} \textless{}label for="nombre"\textgreater{}Nombre:\textless{}/label\textgreater{}\{\{nl\}\} \textless{}input type="text" name="nombre" id="nombre"\textgreater{}\{\{nl\}\}\textless{}label for="email"\textgreater{}Email:\textless{}/label\textgreater{}\{\{nl\}\} \textless{}input type="email" name="email" id="email"\textgreater{}\{\{nl\}\}\textless{}label for="telefono"\textgreater{}Edad:\textless{}/label\textgreater{}\{\{nl\}\} \textless{}input type="tel" name="edad" id="telefono"\textgreater{}\{\{nl\}\}\textless{}/form\textgreater{}} \tn 
% Row Count 27 (+ 9)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}textarea\textgreater{}}} nos permite texto de gran tamaño y con múltiples líneas.\{\{nl\}\}\textless{}form action="/contact" method="POST"\textgreater{}\{\{nl\}\} \textless{}label for="comentario"\textgreater{}Deje su Comentario:\textless{}/label\textgreater{}\{\{nl\}\} \textless{}textarea name="comentario" id="comentario"\textgreater{}Contenido\textless{}/textarea\textgreater{}\{\{nl\}\} \textless{}/form\textgreater{}} \tn 
% Row Count 33 (+ 6)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{HTML Formularios-1- (cont)}}  \tn
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}select\textgreater{}}} (Lista desplegable) nos permite agregar un componente que muestra opciones.\{\{nl\}\}{\bf{\textless{}option\textgreater{}}}Son las opciones de un select.\{\{nl\}\}\textless{}form action="/colors" method="GET"\textgreater{}\{\{nl\}\} \textless{}label\textgreater{}Seleccione un color:\textless{}/label\textgreater{}\{\{nl\}\} \textless{}select name="color"\textgreater{}\{\{nl\}\} \textless{}option value="\#ff0000"\textgreater{}Rojo\textless{}/option\textgreater{}\{\{nl\}\} \textless{}option value="\#00ff00"\textgreater{}Verde\textless{}/option\textgreater{}\{\{nl\}\} \textless{}option value="\#0000ff"\textgreater{}Azul\textless{}/option\textgreater{}\{\{nl\}\} \textless{}option value="\#770077" selected\textgreater{}Morado\textless{}/option\textgreater{}\{\{nl\}\} \textless{}/select\textgreater{}\{\{nl\}\} \textless{}/form\textgreater{}\{\{nl\}\} El atributo {\bf{selected}} es opcional, se encarga de preseleccionar la opción} \tn 
% Row Count 11 (+ 11)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{\textless{}button\textgreater{}}} Nos permite generar un botón.\{\{nl\}\}  Con la propiedad type definimos el tipo. \{\{nl\}\}  Un botón de tipo reset reinicia el formulario a su estado inicial.\{\{nl\}\}  Un botón de tipo submit se encarga de enviar el formulario. \{\{nl\}\}  Un botón de tipo button no realizará ninguna acción por defecto. Por lo general, programaremos una con ayuda de JavaScrip.\{\{nl\}\}  \textless{}form action="/login" method="POST"\textgreater{}\{\{nl\}\}   \textless{}label\textgreater{}Nombre:\textless{}/label\textgreater{}\{\{nl\}\}  \textless{}input type="text" name="usuario"\textgreater{}\{\{nl\}\}  \textless{}label\textgreater{}Email:\textless{}/label\textgreater{}\{\{nl\}\}  \textless{}input type="email" name="email"\textgreater{}\{\{nl\}\}   \textless{}button type="submit"\textgreater{}Enviar\textless{}/button\textgreater{}\{\{nl\}\}  \textless{}/form\textgreater{}} \tn 
% Row Count 24 (+ 13)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{HTML Formularios -2-}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Radio buttons}}: R 🔘, al hacer click en él queda seleccionado. Para crear un elemento de tipo radio usamos un input cuyo atributo type tiene el valor radio. Podemos agrupar elementos de tipo radio y, en ese caso, solo se podrá elegir una opción del conjunto.\{nl\}\}Para agruparlos usamos para todos los elementos el mismo valor en el atributo name.\{\{nl\}\}La propiedad {\bf{checked}} preselecciona la opcion\{\{nl\}\}\textless{}input type="radio" name="medio-de-pago" value="Efectivo"\textgreater{}\{\{nl\}\} \textless{}input type="radio" name="medio-de-pago" value="Débito"\textgreater{}\{\{nl\}\} \textless{}input type="radio" name="medio-de-pago" value="Tarjeta" checked\textgreater{}\{\{nl\}\}} \tn 
% Row Count 13 (+ 13)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Checkbox}}: Representa una opción ⏹, al hacer click en él queda seleccionado y con otro click quitamos la selección.\{\{nl\}\} Para crear un elemento de tipo checkbox usamos un input cuyo atributo type tiene el valor checkbox.\{\{nl\}\} Podemos agrupar elementos de tipo checkbox y, en ese caso, se podrán elegir múltiples opciones del conjunto. Para agruparlos, todos los elementos deben tener el mismo valor en el atributo name.\{\{nl\}\}\textless{}input type="checkbox" name="hobbies" value="Música"\textgreater{}\{\{nl\}\} \textless{}input type="checkbox" name="hobbies" value="Pintura"\textgreater{}\{\{nl\}\} \textless{}input type="checkbox" name="hobbies" value="Juegos" checked\textgreater{}\{\{nl\}\}} \tn 
% Row Count 26 (+ 13)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{El {\bf{checkbox}} puede ser útil para recolectar información que responde a  preguntas simples del estilo sí/no o verdadero/falso.\{\{nl\}\} En ese caso no es necesario agregar un valor, ya que, en caso de seleccionarse la opción, llegará con el valor "on".\{\{nl\}\} \textless{}label for="terminos"\textgreater{}Acepto los términos.\textless{}/label\textgreater{}\{\{nl\}\} \textless{}input type="checkbox" name="terminos"\textgreater{}\{\{nl\}\}} \tn 
% Row Count 34 (+ 8)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{HTML Formularios Avanzados -3-}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{El input de fecha}}: usamos un input a cuyo atributo type le damos el valor date.\{\{nl\}\}\textless{}input type="date" name="fecha" value="2021-07-22" min="2018-01-01" max="2022-12-31"\textgreater{}\{\{nl\}\} {\bf{min}} y {\bf{max}} son opcionales} \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{El input de archivos}} Nos permite cargar uno o más archivos desde la computadora.\{\{nl\}\}\textless{}input type="file" name="avatar" accept=".jpg" multiple\textgreater{}\{\{nl\}\}{\bf{multiple}} es opcional y permite subir mas de un archivo.} \tn 
% Row Count 10 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{CSS: Propiedades tipográficas}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Familia Tipografica:}}  tipo de letra\{\{nl\}\}CSS: p \{ font-family: Arial, sans-serif; \}} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Tamaño Tipográfico:}} tamaño de la letra indicada en pixeles\{\{nl\}\}CSS: p \{ font-size: 23px; \}} \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Estilo Tipográfico}}: (italic, normal, oblique) \{\{nl\}\}CSS: p \{ font-style: normal; \}} \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Peso Tipográfico}}: (bold, lighter,normal, o numeros de 100 en 100) \{\{nl\}\}CSS: p \{ font-weight: 500; \}} \tn 
% Row Count 9 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Alineacion de Texto}}: center, left, right, inherit y justify.\{\{nl\}\}CSS: p \{ text-align: justify; \}} \tn 
% Row Count 12 (+ 3)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Decoración de Texto}}: line-through, underline, overline y none.\{\{nl\}\}CSS: p \{ text-decoration: underline; \}} \tn 
% Row Count 15 (+ 3)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Interlineado del Texto}}: Se estipula que sea 8 unidades mayor al font-size.\{\{nl\}\}CSS: p \{ line-height: 20px; \}} \tn 
% Row Count 18 (+ 3)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Color de Texto}}: Se pueden indicar de las siguientes formas: Nombre , Hexadecimal (\#f05331), RGB ( rgb(255, 100, 50) ) y \{\{nl\}\}RGBA ( rgba(122, 50, 125, 0.5)). En el caso de RGBA la ultima cifra va del 0 al 1 e indica la opacidad.\{\{nl\}\}CSS: p \{ background-color: rojo\}\{\{nl\}\}CSS: p \{ background-color: \#3459ff \}\{\{nl\}\}CSS: p \{ background-color: rgb(12, 34, 32) \}} \tn 
% Row Count 26 (+ 8)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Opacidad}}: le otorga transparencia a un elemento\{\{nl\}\}CSS: p \{ opacity: 0.5 \}} \tn 
% Row Count 28 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{CSS: Medidas Relativas}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Porcentajes}}:Cualquier medida expresada en porcentaje siempre estará relacionada con la medida (en ese mismo eje) del elemento padre que la contiene.\{\{nl\}\}CSS: .elementoContenedor \{ width: 300px \} \{\{nl\}\}.elementoInterior \{ width: 50\% \} // Será 150px} \tn 
% Row Count 6 (+ 6)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{em}}: Si utilizamos ems en una propiedad que no sea font-size, se tomará para el cálculo el font-size que tenga el elemento que estemos modificando.\{\{nl\}\} CSS:p \{ font-size: 20px;\{\{nl\}\} line-height: 2em; // 20px {\emph{ 2 = 40px\{\{n\}\} padding: 1.5em; // 20px }} 1.5 = 30px \}} \tn 
% Row Count 12 (+ 6)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{rem}}: Los rems funcionan muy parecido a los ems, con la diferencia de que siempre tomarán de base el tamaño de font size del elemento \textless{}html\textgreater{}.\{\{nl\}\}CSS:css p \{ font-size: 1.5rem \}} \tn 
% Row Count 16 (+ 4)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{vw y vh}}: {\emph{vw o viewport width}}{\emph{ es relativo al ancho total del viewport.\{\{nl\}\}}}vh o viewport height* es relativo al alto total del viewport.\{\{nl\}\}CSS: div \{ width: 25vw; // 25\% del ancho disponible \{\{nl\}\}height: 50vh; // 50\% del alto disponible \}} \tn 
% Row Count 21 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Las {\bf{medidas relativas}} son aquellas que tienen en cuenta el contexto donde se encuentran. Si el contexto cambia, estas medidas cambiarán con él.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{CSS: Box Model}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{width y height}}: Ancho y alto\{\{nl\}\}div \{width: 130px; height: 120px;\}} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{padding}}: Espacio de relleno que podemos agregar entre el contenido del elemento y su borde.\{\{nl\}\}div \{ padding: 12px; \} (se aplica a los cuatros lados\{\{nl\}\}div \{ padding: 12px 15px 18px 21px; \} (arriba, derecha, abajo, izquierda)} \tn 
% Row Count 7 (+ 5)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{border}}: Podemos asignarle un valor a esta propiedad definiendo el estilo de línea (solid, dotted, dashed o double, su espesor y su color.\{\{nl\}\}div \{ border: 3px solid  yellow \} (solid: estilo de linea, 3px grosor, yellow color).} \tn 
% Row Count 12 (+ 5)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{margin}}: Hace referencia al margen exterior.  Sirve para separar una caja de la otra.\{\{nl\}\}div \{ margin: 15px \}} \tn 
% Row Count 15 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{border-radius}}: Redondea los bordes.\{\{nl\}\}div\{border-radius: 5px;\}} \tn 
% Row Count 17 (+ 2)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{box-sizing: content-box}}: Aplica el ancho y alto que definamos al contenido del elemento.\{\{nl\}\}{\bf{box-sizing: border-box}}: El ancho y alto que indiquemos tomará en cuenta no solo el contenido del elemento, sino también el padding y el borde, dejando solo el margen por fuera.\{\{nl\}\}Es una práctica muy común asignarle box-sizing: border-box a todos los elementos del sitio con la siguiente línea de código: {\bf{ *\{box-sizing: border-box\}}}} \tn 
% Row Count 26 (+ 9)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Cada elemento en HTML es una caja, y esas cajas se componen de márgenes (margin), bordes (border), relleno (padding) y finalmente el contenido (content). \newline Estas propiedades pueden aplicarse de manera diferente a los cuatro lados de cada caja (top, right, bottom, left). Ver \{\{popup="https://upload.wikimedia.org/wikipedia/commons/7/7a/Boxmodell-detail.png"\}\}Imagen\{\{/popup\}\}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{CSS: Estructura básica de Flexbox}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Flexbox propone una estructura basada en el uso de un contenedor padre {\bf{(Flex-container)}} y sus elementos hijos {\bf{(Flex-items)}}. \newline % Row Count 3 (+ 3)
Por defecto, los elementos hijos de un contenedor flex van a tratar de entrar todos en una misma línea. Para aclararle al contenedor que debe respetar el ancho definido de sus hijos usamos la propiedad {\bf{flex-wrap}} con el valor wrap: \newline % Row Count 8 (+ 5)
.contenedor-padre \{ \newline % Row Count 9 (+ 1)
                display: flex; \newline % Row Count 10 (+ 1)
                flex-wrap: wrap; \newline % Row Count 11 (+ 1)
\} \newline % Row Count 12 (+ 1)
flex-wrap también puede recibir los valores nowrap y wrap-reverse. \newline % Row Count 14 (+ 2)
Un {\bf{flex-item}}, a su vez, puede convertirse en un {\bf{flex-container}}. Para eso, solo hace falta asignarle la regla {\bf{display:flex}}, para que así sus elementos hijos pasen a ser {\bf{flex-items}}.% Row Count 18 (+ 4)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{CSS: Flexbox}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Para utilizarlo se debe asignar la regla {\bf{display: flex}} a un selector CSS.} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{flex-direction}}: Con esta propiedad definimos el main axis (eje principal) del contenedor, que puede ser tanto horizontal como vertical.} \tn 
% Row Count 5 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{flex-direction: row}}: Los ítems se disponen en el eje x, de izquierda a derecha.} \tn 
% Row Count 7 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{flex-direction: row-reverse}}: Los ítems se disponen en el eje x, de derecha a izquierda.} \tn 
% Row Count 9 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{flex-direction: column}}: Los ítems se disponen en el eje y, de arriba hacia abajo.} \tn 
% Row Count 11 (+ 2)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{flex-direction: column-reverse}}: Los ítems se disponen en el eje y, de abajo hacia arriba.} \tn 
% Row Count 13 (+ 2)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{justify-content}}: Con esta propiedad alineamos los ítems a lo largo del main axis.} \tn 
% Row Count 15 (+ 2)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{justify-content: flex-start}}: Los ítems se alinean respecto del inicio del main axis que hayamos definido.} \tn 
% Row Count 18 (+ 3)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{justify-content: flex-end}}: Los ítems se alinean respecto del final del main axis que hayamos definido.} \tn 
% Row Count 21 (+ 3)
% Row 9
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{justify-content: center}}: Los ítems se alinean en el centro del main axis.} \tn 
% Row Count 23 (+ 2)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{justify-content: space-around}}: Los ítems se distribuyen de manera uniforme.-} \tn 
% Row Count 25 (+ 2)
% Row 11
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{align-items}}: Con esta propiedad alineamos los ítems a lo largo del cross axis.} \tn 
% Row Count 27 (+ 2)
% Row 12
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{align-items: stretch}}: Los ítems se ajustan para abarcar todo el contenedor.} \tn 
% Row Count 29 (+ 2)
% Row 13
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{align-items: flex-start}}: Los ítems se alinean al inicio del cross-axis.} \tn 
% Row Count 31 (+ 2)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{CSS: Flexbox (cont)}}  \tn
% Row 14
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{align-items: flex-end}}: Los ítems se alinean al final del eje transversal.} \tn 
% Row Count 2 (+ 2)
% Row 15
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{align-items: center}}: Los ítems se alinean al centro del eje transversal.} \tn 
% Row Count 4 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Flexbox trabaja con dos ejes para desarrollar todo su flujo interno: {\emph{el {\bf{eje X}}}} y {\emph{el {\bf{eje Y}}}}. \newline Según cómo decidamos ordenar los elementos, llamaremos {\bf{main axis}} a uno y {\bf{cross axis}} al otro.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{CSS: Flex Item}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{order}}: Con esta propiedad controlamos el orden de cada ítem, sin importar el orden original que tengan en la estructura HTML. Esta propiedad recibe un número entero, positivo o negativo, como valor.\{\{nl\}\}.caja \{\{\{nl\}\}order: 1;\}} \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{flex-grow}}: Con esta propiedad definimos cuánto puede llegar a crecer un ítem en caso de disponer de espacio libre en el contenedor.\{\{nl\}\}.caja-b\{\{\{nl\}\}  flex-grow: 1;\}\{\{nl\}\}1 equivale al 100\% del espacio disponible, y 0 al 0\%. Podemos usar cualquier valor en el medio, como 0.25 para el 25\%.} \tn 
% Row Count 11 (+ 6)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{align-self}}: Nos permite alinear, sobre el cross axis, a cada ítem. Puede tomar  los valores: end, center, start, stretch:.\{\{nl\}\}.contenedor-padre \{\{\{nl\}\}align-items: flex-start;\} \{\{nl\}\}.caja-dos\{\{\{nl\}\}align-self: flex-end;\}\{\{nl\}\}} \tn 
% Row Count 16 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}