Dissertation HTML BIG
Forfatter:
Michelle Baltazar
Sidst opdateret:
9 år siden
Licens:
LaTeX Project Public License 1.3c
Resumé:
Excerpt from main dissertation
\begin
Discover why over 20 million people worldwide trust Overleaf with their work.
Excerpt from main dissertation
\begin
Discover why over 20 million people worldwide trust Overleaf with their work.
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% 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}