Excerpt from main dissertation
\begin
Opdag hvorfor 18 millioner mennesker verden rundt stoler på Overleaf med deres arbejde.
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% DISSERTAÇÃO PROFMAT
%
% Created by Michelle Cristina de Sousa Baltazar
%
%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\title{Dissertation HTML BIG}
\documentclass[12pt, a4paper,oneside]{book}
% margens segundo abnt
\usepackage[top=3cm,left=3cm,right=2cm,bottom=2cm]{geometry}
% espaçamento entre linhas
\linespread{1.3}
% espacamento entre parágrafos
\setlength{\parindent}{1.25cm}
% colocar parágrafo no começo das seções
\usepackage{indentfirst}
% para subitem
\usepackage{enumitem}
% para sub sub item
\usepackage{outlines}
% bibliografia e estilo
\usepackage[round]{natbib}
\bibliographystyle{apa}
% insere paginas em pdf (usar para inserir a ficha)
\usepackage{pdfpages}
% retira primeira página do capítulo
\usepackage{etoolbox}
\patchcmd{\chapter}{plain}{empty}{}{}
\patchcmd{\part}{plain}{empty}{}{}
% tira a palavra capitulo dos capitulos (ABNT)
\usepackage{titlesec}
\titleformat{\chapter}{\huge\bf}{\thechapter}{20pt}{\huge\bf}
%\documentclass{article}
\usepackage[brazilian]{babel}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage{parskip} % inserir linhas entre paragrafos
\usepackage{graphicx} % Required for including images
\graphicspath{{figures/}} % Directory in which figures are stored
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\begin{document}
\textbf{HTML - Definição e Conceitos} \\
\\
\\
\textbf{HTML} e uma abreviação para \textit{Hyper Text Markup Language} ou \textit{Linguagem de Marcação de Hipertexto}. É uma linguagem utilizada pra criação de páginas para a internet que serão "interpretadas" no navegador do usuário. \\
As páginas de internet funcionam graças ao protocolo \textbf{HTTP} que, em português, seria \textit{Protocolo de Transferência de Hipertexto} – é um protocolo de comunicação na camada de aplicação que permite a comunicação de dados na \textbf{Wide World Web}. Se observarmos a \textit{barra de endereços} onde aparece o endereço do site atual, veremos que o texto \textit{http://} ou \textit{https://} precedem o endereço, informando ao navegador que este protocolo é o responsável pelo funcionamento do site digitado, permitindo a correta interpretação do endereço e do conteúdo da página.\\
\textbf{Hipertexto} é o texto estruturado que utiliza ligações lógicas (\textit{hiperlinks}) e o \textit{HTTP} é o protocolo que permite que estas ligações funcionem. Ou seja, a partir de uma determinada página eu clico em um "\textit{link}" (\textit{hiperlink}) que irá me redirecionar para outra página no mesmo site ou em outro endereço. \\
Também podemos acessar uma página digitando diretamente o endereço da página correspondente ou simplesmente copiando o "\textit{link}" e colando na \textit{barra de endereços} do navegador. \\
O \textbf{HTTP} funciona em um modelo computacional \textit{cliente-servidor} onde o navegador que está abrindo a página é o cliente e a aplicação que está hospedada em um site da web é o servidor. O \textit{HTTP} foi projetado para agilizar ao máximo a comunicação entre clientes e servidores de forma que sites de alto tráfego geralmente se utilizam de recursos como servidores de \textit{cache} assim como do próprio \textit{cache} local do computador cliente. \\
O \textbf{cache} é simplesmente uma cópia local do site armazenado online, de forma que ao acessarmos o site, a cópia local é aberta primeiro e depois as atualizações são baixadas do servidor. Desta forma, para o usuário a página abriu de forma quase imediata, mas na prática ele estava apenas vendo uma cópia do que foi acessado na sua última visita. \\
Muitos erros na navegação acontecem devido a problemas com o \textit{cache} e mesmo no sistema operacional \textit{Windows}. O que ocorre é que às vezes ao acessarmos uma determinada página ele carrega apenas do cache e não atualiza com a versão do servidor, de forma que o que vemos é apenas uma cópia não totalmente funcional (nem mesmo atual) da página previamente visitada e portanto pode não funcionar ou apresentar erros. Na maioria dos casos, teclar um simples "\textit{F5}" pode resolver o problema atualizando a página e forçando o navegador a carregar a versão original do servidor. Em outros casos pode ser necessário efetuar uma limpeza no cache local a fim de carregar novamente todas as páginas diretamente dos servidores. \\
O \textit{Windows} pode também apresentar travamentos e problemas de acesso exatamente por causa do cache, pois este vai se acumulando indefinidamente a cada página visualizada e pode chegar a consumir diversos \textit{gigabytes} de espaço em disco. Por isso é sempre recomendável utilizar regularmente programas de limpeza tais como o \textit{cCleaner} ou realizar o processo manualmente para eliminar o cache de cada navegador utilizado. \\
Durante muito tempo foi utilizado \textit{html} simples para a criação de páginas, mas como a própria linguagem foi evoluindo, as ferramentas e técnicas utilizadas também foram se aprimorando e se tornando mais complexas e com visual mais arrojado e eficiente. Atualmente podemos utilizar sistemas complexos de banco de dados, criptografia de última geração e diversos tipo de aplicativos embutidos. Desta forma temos bancos online, animações, jogos, filmes, etc. \\
Esta evolução também foi necessária para atender as diversas plataformas utilizadas para a exibição das páginas \textit{html}. Passamos a ter diversos navegadores concorrentes no mercado (\textit{Mozila Firefox}, \textit{Google Chrome}, \textit{Internet Explorer}, \textit{Opera}, etc.), diversos sistemas operacionais tais como \textit{Linux}, \textit{Windows}, \textit{OS2}, além de plataformas diferentes como celulares, tablets, notebooks, computadores, smartTVs, etc. \\
A estrutura básica mínima para criação de uma página é a seguinte: \\
\\
\textbf{ \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> \\
}} \\
O resultado será mostrado na figura a seguir: \\
\\
%--------------FIGURA 1-------------------------------%
\begin{center}
\includegraphics{estrutura_basica_minima_aparencia.PNG}
\end{center}
.\\
A estrutura funciona com o formato: \\
\\
\textbf{\hspace*{1cm}\textit{<abre>conteúdo</fecha>}} \\
\\
HTML é basicamente 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. \\
\begin{itemize}
\item\textit{doctype} - Define o tipo de documento.
\item\textit{html} - Delimita todo o conteúdo da página.
\item\textit{Head} - Delimita as definições para o corpo do arquivo HTML.
\item\textit{body} - Delimita o conteúdo do site.
\end{itemize}
Além desta estrutura básica, podemos inserir diversos tipos de formatação para adequar a página à estética desejada ou ao formato necessário para exibição. Conforme veremos a seguir. \\
\\
\\
%-------TITULOS E PARÁGRAFOS-------------------------------
\textbf{Títulos e Parágrafos:} \\
\\
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>
}
\\
\\
%------------------------------------------------
\textbf{Inserção de Elementos} \\
\\
%------IMAGENS--------
\textbf{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--------
\textbf{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
%------------------------------------------------
\textbf{Diversos Comandos} \\
\\
%---------------------------------------------
\textbf{- Links:} \\
\\
Uma das tags mais importantes é a \textbf{href} que permite criar um \textit{hiperlink} referenciando um outro elemento (site, imagem, página, etc.) \\
\\
\begin{itemize}
\item{Link para outra página: \\
\textit{\hspace*{0.5cm}<a href=''pagina2.html''>Página 2</a>}}
\item{Link para um marcador na mesma página: \\
\textit{\hspace*{0.5cm}<a href=''\#paragrafo3''>Ir para o parágrafo 3</a>}}
\item{Usando uma imagem como link: \\
\textit{\hspace*{0.5cm}<a href=''pag2.html''><img src=''botao.jpg''></a>}}
\item{Link para enviar um e-mail: \\
\textit{\hspace*{0.5cm}<a href=''mailto:email@gmail.com''>Contato</a>}}
\end{itemize}
.\\
\textbf{- Alinhamento:} \\
O alinhamento pode ser facilmente 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>} \\
\\
%---------------------------------------------
\textbf{- 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}
\item isto é uma lista
\item usando pontos
\end{itemize}
Também podemos utilizar a tag <ol> para lista numerada. \\
\\
%------------------------------------------------
% Lista de comandos
%------------------------------------------------
\textbf{Diversos Comandos} \\
\\
%---------------------------------------------
\textbf{- 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">} \\
\\
%------------------------------------------------
\textbf{- 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.\\
Analizaremos mais detalhadamente o CSS em um capítulo à parte. \\
}
\\
%---------------------------------------------
\textbf{Boas Práticas:} \\
\\
\\
\textbf{- 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. \\
\\
\textbf{- 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------>} \\
\\
\\
Diversas outras opções podem ser inseridas em páginas \textbf{HTML}, inclusive comandos de programação e bancos de dados e animação, entre outros. \\
\end{document}