\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{kesavanbr} \pdfinfo{ /Title (html-cheatsheet.pdf) /Creator (Cheatography) /Author (kesavanbr) /Subject (HTML Cheatsheet 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}{A3A3A3} \definecolor{LightBackground}{HTML}{F3F3F3} \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 Cheatsheet Cheat Sheet}}}} \\ \normalsize{by \textcolor{DarkBackground}{kesavanbr} via \textcolor{DarkBackground}{\uline{cheatography.com/25369/cs/6744/}}} \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}kesavanbr \\ \uline{cheatography.com/kesavanbr} \\ \end{tabulary} \vfill \columnbreak \begin{tabulary}{5.8cm}{L} \SetRowColor{FootBackground} \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}} \\ \vspace{-2pt}Published 24th January, 2016.\\ Updated 12th May, 2016.\\ 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*}{4} \begin{tabularx}{3.833cm}{x{0.85825 cm} x{2.57475 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Basic Tags}} \tn % Row 0 \SetRowColor{LightBackground} \textless{}html\textgreater{}\textless{}/html\textgreater{} & Creates an HTML document \tn % Row Count 2 (+ 2) % Row 1 \SetRowColor{white} \textless{}head\textgreater{}\textless{}/head\textgreater{} & Sets off the title and other information that isn't displayed on the web page itself \tn % Row Count 5 (+ 3) % Row 2 \SetRowColor{LightBackground} \textless{}body\textgreater{}\textless{}/body\textgreater{} & Sets off the visible portion of the document \tn % Row Count 7 (+ 2) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{x{1.7165 cm} x{1.7165 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Body Attributes}} \tn % Row 0 \SetRowColor{LightBackground} \textless{}body bgcolor="pink"\textgreater{} & Sets the background color, using name or hex value \tn % Row Count 3 (+ 3) % Row 1 \SetRowColor{white} \textless{}body text="black"\textgreater{} & Sets the text color, using name or hex value \tn % Row Count 6 (+ 3) % Row 2 \SetRowColor{LightBackground} \textless{}body link="blue"\textgreater{} & Sets the color of links, using name or hex value \tn % Row Count 9 (+ 3) % Row 3 \SetRowColor{white} \textless{}body vlink="\#ff0000"\textgreater{} & Sets the color of followed links, using name or hex value \tn % Row Count 12 (+ 3) % Row 4 \SetRowColor{LightBackground} \textless{}body alink="\#00ff00"\textgreater{} & Sets the color of links on click \tn % Row Count 14 (+ 2) % Row 5 \SetRowColor{white} \textless{}body ondragstart="return false" \seqsplit{onselectstart="return} false"\textgreater{} & Disallows text selection with the mouse and keyboard \tn % Row Count 18 (+ 4) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{x{0.92691 cm} x{2.50609 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Tables}} \tn % Row 0 \SetRowColor{LightBackground} \textless{}table\textgreater{}\textless{}/table\textgreater{} & Creates a table \tn % Row Count 2 (+ 2) % Row 1 \SetRowColor{white} \textless{}tr\textgreater{}\textless{}/tr\textgreater{} & Sets off each row in a table \tn % Row Count 3 (+ 1) % Row 2 \SetRowColor{LightBackground} \textless{}td\textgreater{}\textless{}/td\textgreater{} & Sets off each cell in a row \tn % Row Count 4 (+ 1) % Row 3 \SetRowColor{white} \textless{}th\textgreater{}\textless{}/th\textgreater{} & Sets off the table header (a normal cell with bold, centered text) \tn % Row Count 7 (+ 3) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{x{1.68217 cm} x{1.75083 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Table Attributes}} \tn % Row 0 \SetRowColor{LightBackground} \textless{}table border="1"\textgreater{} & Sets width of border around table cells \tn % Row Count 2 (+ 2) % Row 1 \SetRowColor{white} \textless{}table cellspacing="1"\textgreater{} & Sets amount of space between table cells \tn % Row Count 4 (+ 2) % Row 2 \SetRowColor{LightBackground} \textless{}table cellpadding="1"\textgreater{} & Sets amount of space between a cell's border and its contents \tn % Row Count 8 (+ 4) % Row 3 \SetRowColor{white} \textless{}table width="500" or "80\%"\textgreater{} & Sets width of table, in pixels or as a percentage of document width \tn % Row Count 12 (+ 4) % Row 4 \SetRowColor{LightBackground} \textless{}tr align="left"\textgreater{} or \textless{}td align="left"\textgreater{} & Sets alignment for cell(s) (left, center, or right) \tn % Row Count 15 (+ 3) % Row 5 \SetRowColor{white} \textless{}tr valign="top"\textgreater{} or \textless{}td valign="top"\textgreater{} & Sets vertical alignment for cell(s) (top, middle, or bottom) \tn % Row Count 18 (+ 3) % Row 6 \SetRowColor{LightBackground} \textless{}td colspan="2"\textgreater{} & Sets number of columns a cell should span (default=1) \tn % Row Count 21 (+ 3) % Row 7 \SetRowColor{white} \textless{}td rowspan="4"\textgreater{} & Sets number of rows a cell should span (default=1) \tn % Row Count 24 (+ 3) % Row 8 \SetRowColor{LightBackground} \textless{}td nowrap\textgreater{} & Prevents the lines within a cell from being broken to fit \tn % Row Count 27 (+ 3) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{x{1.3732 cm} x{2.0598 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Text Tags}} \tn % Row 0 \SetRowColor{LightBackground} \textless{}pre\textgreater{}\textless{}/pre\textgreater{} & Creates preformatted text \tn % Row Count 2 (+ 2) % Row 1 \SetRowColor{white} \textless{}hl\textgreater{}\textless{}/hl\textgreater{} & Creates the largest headline \tn % Row Count 4 (+ 2) % Row 2 \SetRowColor{LightBackground} \textless{}h6\textgreater{}\textless{}/h6\textgreater{} & Creates the smallest headline \tn % Row Count 6 (+ 2) % Row 3 \SetRowColor{white} \textless{}b\textgreater{}\textless{}/b\textgreater{} & Creates bold text \tn % Row Count 7 (+ 1) % Row 4 \SetRowColor{LightBackground} \textless{}i\textgreater{}\textless{}/i\textgreater{} & Creates italic text \tn % Row Count 8 (+ 1) % Row 5 \SetRowColor{white} \textless{}tt\textgreater{}\textless{}/tt\textgreater{} & Creates teletype, or typewriter-style text \tn % Row Count 10 (+ 2) % Row 6 \SetRowColor{LightBackground} \textless{}cite\textgreater{}\textless{}/cite\textgreater{} & Creates a citation, usually italic \tn % Row Count 12 (+ 2) % Row 7 \SetRowColor{white} \textless{}em\textgreater{}\textless{}/em\textgreater{} & Emphasizes a word (with italic or bold) \tn % Row Count 14 (+ 2) % Row 8 \SetRowColor{LightBackground} \textless{}strong\textgreater{}\textless{}/strong\textgreater{} & Emphasizes a word (with italic or bold) \tn % Row Count 16 (+ 2) % Row 9 \SetRowColor{white} \textless{}font size="3"\textgreater{}\textless{}/font\textgreater{} & Sets size of font, from 1 to 7 \tn % Row Count 18 (+ 2) % Row 10 \SetRowColor{LightBackground} \textless{}font color="green"\textgreater{}\textless{}/font\textgreater{} & Sets font color, using name or hex value \tn % Row Count 20 (+ 2) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{x{1.7165 cm} x{1.7165 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Forms}} \tn % Row 0 \SetRowColor{LightBackground} \textless{}form\textgreater{}\textless{}/form\textgreater{} & Creates all forms \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \textless{}select multiple name="NAME" size=?\textgreater{}\textless{}/select\textgreater{} & Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll. \tn % Row Count 6 (+ 5) % Row 2 \SetRowColor{LightBackground} \textless{}option\textgreater{} & Sets off each menu item \tn % Row Count 8 (+ 2) % Row 3 \SetRowColor{white} \textless{}select name="NAME"\textgreater{}\textless{}/select\textgreater{} & Creates a pulldown menu \tn % Row Count 10 (+ 2) % Row 4 \SetRowColor{LightBackground} \textless{}option\textgreater{} & Sets off each menu item \tn % Row Count 12 (+ 2) % Row 5 \SetRowColor{white} \textless{}textarea name="NAME" cols=40 rows=8\textgreater{}\textless{}/textarea name\textgreater{} & Creates a text box area. Columns set the width; rows set the height. \tn % Row Count 16 (+ 4) % Row 6 \SetRowColor{LightBackground} \textless{}input type="checkbox" name="NAME"\textgreater{} & Creates a checkbox. Text follows tag \tn % Row Count 18 (+ 2) % Row 7 \SetRowColor{white} \textless{}input type="radio" name="NAME" value="x"\textgreater{} & Creates a radio button. Text follows tag \tn % Row Count 21 (+ 3) % Row 8 \SetRowColor{LightBackground} \textless{}input type="text" name="NAME" size=20\textgreater{} & Creates a one-line text area. Size sets length, in characters. \tn % Row Count 25 (+ 4) % Row 9 \SetRowColor{white} \textless{}input type="submit" value="NAME"\textgreater{} & Creates a Submit button \tn % Row Count 27 (+ 2) % Row 10 \SetRowColor{LightBackground} \textless{}button type="submit"\textgreater{}Submit\textless{}/button\textgreater{} & Creates an actual button that is clicked \tn % Row Count 29 (+ 2) % Row 11 \SetRowColor{white} \textless{}input type="image" border=0 name="NAME" src="name.gif"\textgreater{} & Creates a Submit button using an image \tn % Row Count 32 (+ 3) \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{3.833cm}{x{1.7165 cm} x{1.7165 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Forms (cont)}} \tn % Row 12 \SetRowColor{LightBackground} \textless{}input type="reset"\textgreater{} & Creates a Reset button \tn % Row Count 2 (+ 2) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{x{1.57918 cm} x{1.85382 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Links}} \tn % Row 0 \SetRowColor{LightBackground} \textless{}a href="URL"\textgreater{}\textless{}/a\textgreater{} & Creates a hyperlink \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \textless{}a href="mailto:EMAIL"\textgreater{}\textless{}/a\textgreater{} & Creates a mailto link \tn % Row Count 3 (+ 2) % Row 2 \SetRowColor{LightBackground} \textless{}a href="URL"\textgreater{}\textless{}img src="URL"\textgreater{} \textless{}/a\textgreater{} & Creates an image/link \tn % Row Count 5 (+ 2) % Row 3 \SetRowColor{white} \textless{}a name="NAME"\textgreater{}\textless{}/a\textgreater{} & Creates a target location within a document \tn % Row Count 8 (+ 3) % Row 4 \SetRowColor{LightBackground} \textless{}a href="\#NAME"\textgreater{}\textless{}/a\textgreater{} & Links to that target location from elsewhere in the document \tn % Row Count 11 (+ 3) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{x{1.44186 cm} x{1.99114 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Frames}} \tn % Row 0 \SetRowColor{LightBackground} \textless{}frameset\textgreater{}\textless{}/frameset\textgreater{} & Replaces the \textless{}body\textgreater{} tag in a frames document; can also be nested in other framesets \tn % Row Count 4 (+ 4) % Row 1 \SetRowColor{white} \textless{}frameset rows="value,value"\textgreater{} & Defines the rows within a frameset, using number in pixels, or percentage of width \tn % Row Count 8 (+ 4) % Row 2 \SetRowColor{LightBackground} \textless{}frameset cols="value,value"\textgreater{} & Defines the columns within a frameset, using number in pixels, or percentage of width \tn % Row Count 12 (+ 4) % Row 3 \SetRowColor{white} \textless{}frame\textgreater{} & Defines a single frame — or region — within a frameset \tn % Row Count 15 (+ 3) % Row 4 \SetRowColor{LightBackground} \textless{}noframes\textgreater{}\textless{}/noframes\textgreater{} & Defines what will appear on browsers that don't support frames \tn % Row Count 18 (+ 3) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{x{1.40753 cm} x{2.02547 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Frames Attributes}} \tn % Row 0 \SetRowColor{LightBackground} \textless{}frame src="URL"\textgreater{} & Specifies which HTML document should be displayed \tn % Row Count 3 (+ 3) % Row 1 \SetRowColor{white} \textless{}frame name="name"\textgreater{} & Names the frame, or region, so it may be targeted by other frames \tn % Row Count 6 (+ 3) % Row 2 \SetRowColor{LightBackground} \textless{}frame marginwidth="value"\textgreater{} & Defines the left and right margins for the frame; must be equal to or greater than 1 \tn % Row Count 10 (+ 4) % Row 3 \SetRowColor{white} \textless{}frame marginheight="value"\textgreater{} & Defines the top and bottom margins for the frame; must be equal to or greater than 1 \tn % Row Count 14 (+ 4) % Row 4 \SetRowColor{LightBackground} \textless{}frame scrolling="value"\textgreater{} & Sets whether the frame has a scrollbar; value may equal "yes," "no," or "auto." The default, as in ordinary documents, is auto \tn % Row Count 20 (+ 6) % Row 5 \SetRowColor{white} \textless{}frame noresize="noresize"\textgreater{} & Prevents the user from resizing a frame \tn % Row Count 22 (+ 2) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{x{1.44186 cm} x{1.99114 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Formatting}} \tn % Row 0 \SetRowColor{LightBackground} \textless{}p\textgreater{}\textless{}/p\textgreater{} & Creates a new paragraph \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \textless{}p align="left"\textgreater{} & Aligns a paragraph to the left (default), right, or center. \tn % Row Count 4 (+ 3) % Row 2 \SetRowColor{LightBackground} \textless{}br\textgreater{} & Inserts a line break \tn % Row Count 5 (+ 1) % Row 3 \SetRowColor{white} \textless{}blockquote\textgreater{}\textless{}/blockquote\textgreater{} & Indents text from both sides \tn % Row Count 7 (+ 2) % Row 4 \SetRowColor{LightBackground} \textless{}dl\textgreater{}\textless{}/dl\textgreater{} & Creates a definition list \tn % Row Count 9 (+ 2) % Row 5 \SetRowColor{white} \textless{}dt\textgreater{} & Precedes each definition term \tn % Row Count 11 (+ 2) % Row 6 \SetRowColor{LightBackground} \textless{}dd\textgreater{} & Precedes each definition \tn % Row Count 13 (+ 2) % Row 7 \SetRowColor{white} \textless{}ol\textgreater{}\textless{}/ol\textgreater{} & Creates a numbered list \tn % Row Count 14 (+ 1) % Row 8 \SetRowColor{LightBackground} \textless{}ul\textgreater{}\textless{}/ul\textgreater{} & Creates a bulleted list \tn % Row Count 15 (+ 1) % Row 9 \SetRowColor{white} \textless{}li\textgreater{}\textless{}/li\textgreater{} & Precedes each list item, and adds a number or symbol depending upon the type of list selected \tn % Row Count 20 (+ 5) % Row 10 \SetRowColor{LightBackground} \textless{}div align="left"\textgreater{} & A generic tag used to format large blocks of HTML, also used for stylesheets \tn % Row Count 24 (+ 4) % Row 11 \SetRowColor{white} \textless{}img src="name"\textgreater{} & Adds an image \tn % Row Count 25 (+ 1) % Row 12 \SetRowColor{LightBackground} \textless{}img src="name" align="left"\textgreater{} & Aligns an image: left, right, center; bottom, top, middle \tn % Row Count 28 (+ 3) % Row 13 \SetRowColor{white} \textless{}img src="name" border="1"\textgreater{} & Sets size of border around an image \tn % Row Count 30 (+ 2) \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{3.833cm}{x{1.44186 cm} x{1.99114 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Formatting (cont)}} \tn % Row 14 \SetRowColor{LightBackground} \textless{}hr /\textgreater{} & Inserts a horizontal rule \tn % Row Count 2 (+ 2) % Row 15 \SetRowColor{white} \textless{}hr size="3" /\textgreater{} & Sets size (height) of rule \tn % Row Count 4 (+ 2) % Row 16 \SetRowColor{LightBackground} \textless{}hr width="80\%" /\textgreater{} & Sets width of rule, in percentage or absolute value \tn % Row Count 7 (+ 3) % Row 17 \SetRowColor{white} \textless{}hr noshade /\textgreater{} & Creates a rule without a shadow \tn % Row Count 9 (+ 2) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} % That's all folks \end{multicols*} \end{document}