HTML Cheat Sheet
Edited by Michelle Cristina de Sousa Baltazar
baposter Landscape Poster
This template has been downloaded from: http://www.LaTeXTemplates.com
\begin
Discover why 18 million people worldwide trust Overleaf with their work.
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% HTML Cheat Sheet
%
% Edited by Michelle Cristina de Sousa Baltazar
%
% baposter Landscape Poster
% This template has been downloaded from:
% http://www.LaTeXTemplates.com
%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%----------------------------------------------------------------
% PACKAGES AND OTHER DOCUMENT CONFIGURATIONS
%----------------------------------------------------------------
\documentclass[landscape,a0paper,fontscale=0.285]{baposter} % Adjust the font scale/size here
\title{HTML Cheat Sheet New}
\usepackage[brazilian]{babel}
\usepackage[utf8]{inputenc}
\usepackage{graphicx} % Required for including images
\graphicspath{{figures/}} % Directory in which figures are stored
\usepackage{xcolor}
\usepackage{colortbl}
\usepackage{tabu}
\usepackage{mathtools}
%\usepackage{amsmath} % For typesetting math
\usepackage{amssymb} % Adds new symbols to be used in math mode
\usepackage{booktabs} % Top and bottom rules for tables
\usepackage{enumitem} % Used to reduce itemize/enumerate spacing
\usepackage{palatino} % Use the Palatino font
\usepackage[font=small,labelfont=bf]{caption} % Required for specifying captions to tables and figures
\usepackage{multicol} % Required for multiple columns
\setlength{\columnsep}{1.5em} % Slightly increase the space between columns
\setlength{\columnseprule}{0mm} % No horizontal rule between columns
\usepackage{tikz} % Required for flow chart
\usetikzlibrary{decorations.pathmorphing}
\usetikzlibrary{shapes,arrows} % Tikz libraries required for the flow chart in the template
\newcommand{\compresslist}{ % Define a command to reduce spacing within itemize/enumerate environments, this is used right after \begin{itemize} or \begin{enumerate}
\setlength{\itemsep}{1pt}
\setlength{\parskip}{0pt}
\setlength{\parsep}{0pt}
}
\definecolor{orange}{RGB}{255,127,0}% Defines the color used for content box headers
%\definecolor{lightblue}{rgb}{0.145,0.6666,1}
\begin{document}
\begin{poster}
{
headerborder=closed, % Adds a border around the header of content boxes
colspacing=0.8em, % Column spacing
bgColorOne=white, % Background color for the gradient on the left side of the poster
bgColorTwo=white, % Background color for the gradient on the right side of the poster
borderColor=orange, % Border color
headerColorOne=black, % Background color for the header in the content boxes (left side)
headerColorTwo=orange, % Background color for the header in the content boxes (right side)
headerFontColor=white, % Text color for the header text in the content boxes
boxColorOne=white, % Background color of the content boxes
textborder=roundedleft, % Format of the border around content boxes, can be: none, bars, coils, triangles, rectangle, rounded, roundedsmall, roundedright or faded
eyecatcher=true, % Set to false for ignoring the left logo in the title and move the title left
headerheight=0.1\textheight, % Height of the header
headershape=roundedright, % Specify the rounded corner in the content box headers, can be: rectangle, small-rounded, roundedright, roundedleft or rounded
headerfont=\Large\bf\textsc, % Large, bold and sans serif font in the headers of content boxes
%textfont={\setlength{\parindent}{1.5em}}, % Uncomment for paragraph indentation
linewidth=2pt % Width of the border lines around content boxes
}
%----------------------------------------------------------------
% TÍTULO
%----------------------------------------------------------------
{\bf\textsc{HTML Cheat Sheet}\vspace{0.5em}} % Poster title
{\textsc{\{ H T M L \ \ \ \ \ C h e a t \ \ \ \ \ S h e e t\} \hspace{12pt}}}
{\textsc{Michelle Cristina de Sousa Baltazar \\ (Universidade Federal do Triângulo Mineiro) \hspace{12pt}}}
%------------------------------------------------
% INTRODUCAO AO HTML
%------------------------------------------------
\headerbox{Introdução ao HTML:}{name=objectives,column=0,row=0}{
%-------O QUE É-------------------------------
\colorbox[HTML]{FFE4B5}{\makebox[\textwidth-2\fboxsep][l]{\bf - O que é HTML?}}
\textbf{HTML} e uma abreviação para \textit{Hyper Text Markup Language}. É uma linguagem utilizada pra criação de páginas que serão "interpretadas" no navegador do usuário. A estrutura básica mínima para criação de uma página é a seguinte: \\
\\
\textit{
\hspace*{0.5cm}<!DOCTYPE html> \\
\hspace*{1cm}<html> \\
\hspace*{1cm}<head> \\
\hspace*{1.5cm}<title>Primeira Webpage</title> \\
\hspace*{1cm}</head> \\
\hspace*{1cm}<body> \\
\hspace*{1.5cm}<p>Hello, world!</p> \\
\hspace*{1cm}</body> \\
\hspace*{0.5cm}</html> \\
} \\
A estrutura funciona com o formato: \\
\hspace*{1cm}\textit{<abre>conteúdo</fecha>} \\
\\
HTML é formado por \textbf{TAGs} e cada declaração aberta deverá ter sua contrapartida fechando e o efeito desejado será aplicado sobre o conteúdo que estiver entre a declaração. \\
\textit{doctype} - Define o tipo de documento. \\
\textit{html} - Delimita todo o conteúdo da página. \\
\textit{Head} - Delimita as definições para o corpo do arquivo HTML. \\
\textit{body} - Delimita o conteúdo do site. \\
%-------TITULOS E PARÁGRAFOS-------------------------------
\colorbox[HTML]{FFE4B5}{\makebox[\textwidth-2\fboxsep][l]{\bf - Títulos e Parágrafos:}} \linebreak
Existem 6 níveis de títulos já pré-definidos: \\
\textit{
\hspace*{0.5cm}<h1>Título de nível 1</h1> \\
\hspace*{0.5cm}<h2>Título de nível 2</h2> \\
\hspace*{2cm}... \\
\hspace*{0.5cm}<h6>Título de nível 6</h6> \\
}
Parágrafos de texto são gerados na HTML por meio das tags: \\
\textit{
\hspace*{1cm}<p>Primeiro parágrafo do texto.</p> \\
\hspace*{1cm}<p>Segundo parágrafo do texto.</p> \\
}
Podemos também simplesmente digitar o texto e apenas usar a tag única <br> para quebrar a linha: \\
\textit{
\hspace*{1cm}Primeira linha do texto.<br> \\
\hspace*{1cm}Segunda linha do texto.<br>
}
\vspace{0.0em} % When there are two boxes, some whitespace may need to be added if the one on the right has more content
}
%------------------------------------------------
% Lógica Básica do Python
%------------------------------------------------
\headerbox{Inserção de Elementos}{name=introduction,column=1,row=0,bottomaligned=objectives}{
%------IMAGENS--------
\colorbox[HTML]{FFE4B5}{\makebox[\textwidth-2\fboxsep][l]{\bf - Imagens}}
Para inserir imagens utilizamos a tag \textbf{img}: \\
\textit{\hspace*{0.5cm}<img src=''foto.png''>} \\
\\
Podemos ainda acrescentar um texto alternativo, para o caso do arquivo não carregar e um título para a foto: \\
\textit{\hspace*{0.5cm}<img src=''foto.png'' alt=''Texto'' title=''Foto''>} \\
\\
Também podemos definir o tamanho de apresentação da imagem usando: \\
\textit{\hspace*{0.5cm}style=''width:304px; height:228px;''} \\
\\
Podemos ainda definir uma posição absoluta em relação à página: \\
\textit{\hspace*{0.5cm}style=''position:absolute; top:15px; left:15px;''} \\
\\
Lembrando que as imagem devem ficar na mesma pasta onde o arquivo HTML se encontra ou devemos utilizar o ''endereço'' completo do arquivo online para referenciar a imagem. \\
%------Tabelas--------
\colorbox[HTML]{FFE4B5}{\makebox[\textwidth-2\fboxsep][l]{\bf - Tabelas}}
As tabelas devem ser ''desenhadas'' indicando-se as linhas e colunas: \\
\\
\textit{
\hspace*{0.5cm} <table border=''1''> \\
\hspace*{1cm}<tr> \\
\hspace*{1.5cm}<th>cabeçalho1</th> \\
\hspace*{1.5cm}<th>cabeçalho2</th> \\
\hspace*{1cm}</tr> \\
\hspace*{1cm}<tr> \\
\hspace*{1.5cm}<td>linha1, célula1</td> \\
\hspace*{1.5cm}<td>linha1, célula2</td> \\
\hspace*{1cm}</tr> \\
\hspace*{1cm}<tr> \\
\hspace*{1.5cm}<td>linha2, célula1</td> \\
\hspace*{1.5cm}<td>linha2, célula2</td> \\
\hspace*{1cm}</tr> \\
\hspace*{0.5cm}</table> \\
}
\\
Obteremos o resultado: \\
\\
\hspace*{1cm}\begin{tabular}{|l|l|}
\hline
\textbf{cabeçalho1} & \textbf{cabeçalho2} \\
\hline
linha1, célula1 & linha1, célula2 \\
\hline
linha2, célula1 & linha2, célula2 \\
\hline
\end{tabular}
}
%------------------------------------------------
% Lista de comandos
%------------------------------------------------
\headerbox{Diversos Comandos}{name=results,column=2,row=0}{
%---------------------------------------------
\colorbox[HTML]{FFE4B5}{\makebox[\textwidth-2\fboxsep][l]{\bf - Links:}} \\
Uma das tags mais importantes é a \textbf{href} que permite criar um \textit{hiperlink} referenciando um outro elemento (site, imagem, página, etc.) \\
\\
\colorbox[HTML]{fff7e6}{\makebox[\textwidth-2\fboxsep][l]{Link para outra página:}} \\
\textit{\hspace*{0.5cm}<a href=''pagina2.html''>Página 2</a>} \\
\\
\colorbox[HTML]{fff7e6}{\makebox[\textwidth-2\fboxsep][l]{Link para um marcador na mesma página:}} \\
\textit{\hspace*{0.5cm}<a href=''\#paragrafo3''>Ir para o parágrafo 3</a>} \\
\\
\colorbox[HTML]{fff7e6}{\makebox[\textwidth-2\fboxsep][l]{Usando uma imagem como link:}} \\
\textit{\hspace*{0.5cm}<a href=''pag2.html''><img src=''botao.jpg''></a>} \\
%---------------------------------------------
\colorbox[HTML]{fff7e6}{\makebox[\textwidth-2\fboxsep][l]{Link para enviar um e-mail:}} \\
\textit{\hspace*{0.5cm}<a href=''mailto:email@gmail.com''>Contato</a>} \\
\\
\colorbox[HTML]{FFE4B5}{\makebox[\textwidth-2\fboxsep][l]{\bf - Alinhamento:}} \\
O alinhamento pode ser fácilmente obtido utilizando uma destas opções: \\
\\
\textit{\hspace*{0.5cm}<div align=''center''>teste centro</div>} \\
\textit{\hspace*{0.5cm}<div align=''left''>teste esquerdo</div>} \\
\textit{\hspace*{0.5cm}<div align=''right''>teste direito</div>} \\
\\
A tag \textit{div} define uma seção em um documento. \\
Mas também podemos inserir as opções de alinhamento em diversos outros elementos: \\
\textit{\hspace*{0.5cm}<p align=''center''>teste centro</center>} \\
\textit{\hspace*{0.5cm}<img src=''foto.png'' align=''right''>} \\
\textit{\hspace*{0.5cm}<h1 align=''left''>Título Legal</h1>} \\
%---------------------------------------------
\colorbox[HTML]{FFE4B5}{\makebox[\textwidth-2\fboxsep][l]{\bf - Listas:}} \\
Para listas, eu uso as tags de início e fim e no meio vão os tens da lista (li): \\
\textit{
\hspace*{0.5cm}<ul> \\
\hspace*{1cm}<li>isto é uma lista</li> \\
\hspace*{1cm}<li>usando pontos</li> \\
\hspace*{0.5cm}</ul>} \\
\\
Retornaria:
\begin{itemize}\compresslist
\item isto é uma lista
\item usando pontos
\end{itemize}
Também podemos utilizar a tag <ol> para lista numerada.
}
%------------------------------------------------
% Lista de comandos
%------------------------------------------------
\headerbox{Diversos Comandos}{name=results,column=3,row=0}{
%---------------------------------------------
\colorbox[HTML]{FFE4B5}{\makebox[\textwidth-2\fboxsep][l]{\bf - Fonte:}} \\
A tab \textbf{font} define a formatação da fonte. Atualmente tem sido substituída pela utilização de CSS. \\
\\
\textit{\hspace*{0.5cm}<font size=''3'' color=''red''>Hello World</font>} \\
\textit{\hspace*{0.5cm}<font face="verdana" color="green">} \\
\\
%------------------------------------------------
\colorbox[HTML]{FFE4B5}{\makebox[\textwidth-2\fboxsep][l]{\bf -CSS:}} \\
\textbf{CSS}, do original \textit{Cascading Style Sheets} é um arquivo que determina como os elementos serão mostrados na tela, no papel ou em qualquer outra media. \\
É utilizado para uniformizar um determinado estilo em todo o documento HTML. Exemplo:\\
\\
\textit{
\hspace*{0.5cm}body { background-color: powderblue; } \\
\hspace*{0.5cm}h1 { color: blue; } \\
\hspace*{0.5cm}p { color: red; } \\
}
\\
Outra opção seria: \\
\textit{\hspace*{0.5cm}body {background-image: url(fundo.jpg);}\\
\\
Que neste caso preenche a página com uma imagem de fundo previamente escolhido.\\
}
%---------------------------------------------
\colorbox[HTML]{FFE4B5}{\makebox[\textwidth-2\fboxsep][l]{\bf - Boas Práticas:}} \\
\colorbox[HTML]{fff7e6}{\makebox[\textwidth-2\fboxsep][l]{Uso de Indentação ou Recuos:}} \\
A indentação no HTML não é obrigatória, porém é sempre recomendável a fim de melhorar a organização e visualização do código fonte. \\
\\
\colorbox[HTML]{fff7e6}{\makebox[\textwidth-2\fboxsep][l]{Inserção de comentários:}} \\
A utilização de comentários é útil para deixar o código fonte mais facilmente localizável e identificável. \\
Também podemos utilizá-los de forma instrutiva, explicando as ações tomadas e a forma de utilização. \\
\\
\textit{\hspace*{0.5cm}<!-- este é um comentário -->} \\
\textit{\hspace*{0.5cm}<!-------------------------->} \\
\textit{\hspace*{0.5cm}<!--Tabela inicia aqui------>} \\
}
\end{poster}
\end{document}