Please wait
HTML Cheat Sheet
Edited by Michelle Cristina de Sousa Baltazar
baposter Landscape Poster
This template has been downloaded from: http://www.LaTeXTemplates.com
HTML Cheat Sheet
Edited by Michelle Cristina de Sousa Baltazar
baposter Landscape Poster
This template has been downloaded from: http://www.LaTeXTemplates.com
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% 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}
Our gallery is the easiest way to put your LaTeX templates, examples and articles online. Just create a free project and use the publish menu. It only takes a couple of clicks!
The LaTeX templates, examples and articles in the Overleaf gallery all come from our amazing community.
New content is added all the time. Follow us on twitter for the highlights!