Trabalho HYPTERTEXT MARKUP LANGUAGE - HTML - MAX R OLIVEIRA JR - 201951455101

Prévia do material em texto

RESUMO 
 
 
HyperText Markup Languege ou HTML essa é a liguagem de marcação criada por Tim 
Berners-Lee que revolucionaria a forma de trocar informações e midias entre 
máquinas conectas a Internet. Hoje o HTML é regido pela World Wide Web de onde 
vem o famoso WWW. A World Wide Web define, aprimora, versiona e padroniza 
diversas tecnologias ultilizadas no mercado, sendo o HTML uma das primeiras e mais 
conhecidas tecnologias. Para criar ou editar códigos em HTML não é necessario 
muito, basta um editor de texto que pode ir de um bloco de notas a um editor 
profissional. Será abordado ao longo deste documento diversas versões e váriaçoes 
do HMTL, como criar um documento em estrutura de tags e exemplo práticos de 
formulário com HMTL. 
 
 
Palavras-chave: HyperText Markup Languege, World Wide Web, Protocolos, HTTPS. 
 
ABSTRACT 
 
 
HyperText Markup Languege or HTML this is the markup language created by Tim 
Berners-Lee that would revolutionize the way of exchanging information and media 
between machines connected to the Internet. Today HTML is governed by the World 
Wide Web where the famous WWW comes from. The World Wide Web defines, 
improves, version and standardizes several technologies used in the market, HTML 
being one of the first and most technologies. Creating or editing HTML codes is not 
very necessary, just a text editor that can go from a notepad to a professional editor. 
Throughout this document, several versions and variations of the HMTL will be 
covered, how to create a document in tag structure and a practical example of a form 
with HMTL. 
 
Key-Worlds: HyperText Markup Languege, World Wide Web, Protocols, HTTPS. 
LISTA DE ABREVIATURAS E SIGLAS 
 
HTTP - Hyper Text Transfer Protocol 
HTTPS - Hyper Text Transfer Protocol Secure 
HTML - HyperText Markup Language 
WWW - World Wide Web 
Sumário 
1. INTRODUÇÃO ...................................................................................................... 9 
2. HYPERTEXT MARKUP LANGUAGE - HTML .............................................. 9 
2. EVOLUÇÃO DO HTML .................................................................................... 10 
1.1 HTML 1.................................................................................................................. 10 
1.2 HTML 2.0............................................................................................................... 10 
1.3 HTML 3.2............................................................................................................... 10 
1.4 HTML 4.01............................................................................................................. 11 
1.5 HTML 5.................................................................................................................. 11 
1.6 TAGS DO HTML .................................................................................................. 11 
4 ATRIBUTOS DO HTML ..................................................................................... 16 
5 A ESTRUTURA BÁSICA DE UM DOCUMENTO HTML ............................. 16 
6 CRIAÇÃO DE FORMULÁRIO COM HTML5 E CSS3 .................................. 17 
REFERÊNCIAS ..................................................................................................................... 18 
 
 
9 
 
1. INTRODUÇÃO 
 
A história do HTML teve seu início em 1990 por um cientista chamado Tim 
Berners-Lee. A finalidade inicial era a de tornar possível o acesso e a troca de 
informações e de documentação de pesquisas, entre cientistas de diferentes 
universidades. O projeto inicial tornou-se um sucesso jamais imaginado por Tim 
Berners-Lee. Ao inventar o HTML ele lançou as fundações da Internet tal como a 
conhecemos atualmente. 
As primeiras versões do HTML foram definidas com regras sintáticas flexíveis, 
o que ajudou aqueles sem familiaridade e conhecimento com a publicação na Web. 
Atualmente a sintaxe do HTML é muito mais rígida, permitindo um código mais 
preciso. Através do tempo, a utilização de ferramentas para autoria de HTML 
aumentou, assim como a tendência em tornar a sintaxe cada vez mais rígida. Apesar 
disso, por questões históricas (retrocompatibilidade), os navegadores ainda hoje 
conseguem interpretar páginas web que estão longe de ser um código HTML válido. 
 
2. HYPERTEXT MARKUP LANGUAGE - HTML 
 
HTML é uma linguagem de marcação que é interpretada pelo Navegador. Isto 
quer dizer que ela serve para criar uma formatação diferenciada de texto, utilizando 
tags. Assim, podemos criar parágrafos, cabeçalhos, títulos, formulários, enfim, tudo o 
que vemos numa página de internet. 
O fato dela ser interpretada significa que o navegador, vai lendo suas tags e 
"traduzindo" para a formatação correspondente. Por isto, há pequenas nuances entre 
como cada página é apresentada. Mais que isto, ele é capaz de exibir a página até 
que ocorra um erro. Uma página web pode conter diversos erros, já que ela não passa 
pelo processo de compilação. 
A principal característica do HTML é de ser uma linguagem de hipertexto, isto 
é, as páginas podem ser ligadas uma à outra. Ou seja, você lê sobre algo, lá já há 
links contendo informações que podem aprofundar o mesmo tema, ou simplesmente, 
uma sequência de páginas. 
 
10 
 
3. EVOLUÇÃO DO HTML 
 
3.1 HTML 1 
A versão básica do HTML oferece suporte para elementos básicos como controles 
de texto e imagens. Esta era a versão básica do HTML com menos suporte para uma 
ampla variedade de elementos HTML. Ela não possui recursos avançados, como 
estilo e outras coisas relacionadas a como o conteúdo será renderizado em um 
navegador. Essa versão também não oferecia suporte para tabelas e fontes. 
3.2 HTML 2.0 
O HTML versão 2.0 foi desenvolvido em 1995 com a intenção básica de melhorar 
o HTML versão 1.0 e agora um padrão começou a ser desenvolvido para manter 
regras e regulamentos comuns em diferentes navegadores. O HTML 2.0 melhorou 
muito em termos de tags de marcação. Na versão HTML 2.0, o conceito de forma 
entrou em vigor. Os formulários foram desenvolvidos, mas ainda assim, eles tinham 
tags básicas como caixas de texto, botões, etc. 
Além disso, a tabela veio como uma tag HTML. Agora, no HTML tag 2.0, os 
navegadores também vieram com o conceito de criar suas próprias camadas de tags 
que eram específicas do próprio navegador. W3C também foi formado. A principal 
intenção do W3C é manter o padrão em diferentes navegadores da web para que 
esses navegadores entendam e processem as tags HTML de maneira semelhante. 
3.3 HTML 3.2 
Foi desenvolvido em 1997. Após o desenvolvimento do HTML 2.0, a próxima versão 
do HTML foi a 3.2 
Com a versão 3.2 do HTML, as tags HTML foram melhoradas ainda mais. É 
importante notar que, devido à manutenção padrão do W3C, a versão mais recente 
do HTML era 3.2 em vez de 3. 
Agora, o HTML 3.2 tem melhor suporte para novos elementos de formulário. Outro 
recurso importante que o HTML 3.2 implementou foi o suporte para CSS. CSS significa 
Folha de Estilo em Cascata . É o CSS que fornece recursos para melhorar a aparência 
das tags HTML na renderização em navegadores. CSS ajuda a estilizar os elementos 
HTML. 
11 
 
Com a atualização dos navegadores para HTML 3.2, o navegador também oferece 
suporte para tags de quadro, embora as especificações de HTML ainda não suportem 
tags de marcação de quadro. 
3.4 HTML 4.01 
Foi desenvolvido em 1999. Estendeu o suporte de folhas de estilo em cascata. Na 
versão 3.2, o CSS foi incorporado na própria página HTML. Portanto, se o site tiver 
várias páginas da web para aplicar ao estilo de cada página, devemos colocar CSS 
em cada página da web. Portanto, houve uma repetição do mesmo bloco de CSS. 
Para superar isso, na versão 4.01 surgiu o conceito de uma folha de estilo externa. 
Sob esse conceito, um arquivo CSS externo poderia ser desenvolvido e esse arquivo 
de estiloexterno poderia ser incluído no próprio HTML. HTML 4.01 forneceu suporte 
para novas tags de HTML 
3.5 HTML 5 
Esta é a versão mais recente do HTML. Para um desenvolvedor, ele poderia ser usado 
em 2014. Ele veio com muito suporte a tags HTML HTML5 forneceu suporte para 
novos elementos de formulário, como elementos de entrada de diferentes 
tipos; geolocalização suportam tags , etc. 
 
3.6 TAGS DO HTML 
As tags são usadas para informar ao navegador a estrutura do site. Ou seja: 
quando se escreve um código em HTML, as tags serão interpretadas pelo navegador, 
produzindo assim a estrutura e o conteúdo visual da página. 
A principal característica das tags é estarem sempre dentro dos sinais de 
chevron (sinal de “maior que” é “menor que”), ou seja: < >. 
 
As tags HTML são divididas em dois tipos: as que precisam de fechamento e as que 
não precisam de fechamento. As tags que precisam de fechamento possuem a sintaxe 
<tag> </tag>, já as que não precisam de fechamento possuem como estrutura <tag/> 
 
Abaixo a lista das tags existentes atualmente: 
 
https://www.educba.com/html5-elements/
https://www.educba.com/html-geolocation/
12 
 
Tag Descrição 
<!--...--> Descreva um texto de comentário no código-fonte 
<!doctype> Define um tipo de documento 
<a> 
Especificar uma âncora (Hyperlink), Use para link em documentos 
da web internos / externos. 
<abbr> Descreve uma abreviatura (acrônimos) 
<acronym> Descreve um acrônimo 
<address> Descreve uma informação de endereço 
<applet> Incorporando um miniaplicativo em um documento HTML 
<area> Define uma área em um mapa de imagem 
<article> Define um artigo 
<aside> 
Descreve contém conjunto (ou escreve) em um lugar ao lado na 
página contém 
<audio> Conteúdo de áudio específico 
<b> Peso específico do texto em negrito 
<base> Defina um URL base para todos os links em uma página da web 
<basefont> 
Descreve a cor, o tamanho e a face de uma fonte padrão em um 
documento 
<bb> 
Defina o comando do navegador, que o comando invoca conforme a 
ação do cliente 
<bdo> Direção específica da exibição do texto 
<big> Define um grande texto 
<blockquote> Especifica uma cotação longa 
<body> Define uma parte da seção principal (corpo) no documento HTML 
<br /> Especifique uma única quebra de linha 
<button> Especifica um botão de pressão / pressão 
<canvas> Especifica os gráficos de exibição em documentos HTML da web 
<caption> Defina uma legenda para a tabela 
<center> Especifica que um texto é exibido no alinhamento central 
<cite> Especifica uma citação de texto 
<code> Especifica o texto do código do computador 
<col> Especifica cada coluna dentro de um elemento <colgroup> na tabela 
<colgroup> Define um grupo de uma ou mais colunas dentro da tabela 
<command> 
Defina um botão de comando, invoque de acordo com a ação do 
usuário 
13 
 
<datagrid> 
Defina uma representação de dados em um datagrid, seja em uma 
lista ou em uma árvore 
<datalist> Defina uma lista de opções predefinidas em torno da tag <input> 
<dd> Define uma descrição de definição em uma lista de definições 
<del> Texto específico excluído em documento da web 
<details> 
Defina detalhes adicionais para ocultar ou mostrar de acordo com a 
ação do usuário 
<dfn> Defina uma equipe de definição 
<dialog> Defina uma conversa de bate-papo entre uma ou mais pessoas 
<dir> Defina uma lista de diretórios 
<div> Defina uma parte da divisão 
<dl> Defina uma lista de definições 
<dt> Defina uma equipe de definição 
<em> Definir um texto é enfatizar o formato 
<embed> 
Defina um aplicativo externo de incorporação usando um plug-in 
relativo 
<eventsource
> Define uma fonte de geração de eventos para o servidor remoto 
<fieldset> Define um agrupamento de elementos de formulário relacionados 
<figcaption> 
Representa um texto de legenda correspondente a um elemento de 
figura 
<figure> 
Representa conteúdo independente correspondente a um elemento 
<figcaption> 
<font> 
Define o tamanho da fonte, a face da fonte e a cor da fonte para seu 
texto 
<footer> 
Define uma seção de rodapé contendo detalhes sobre o autor, 
direitos autorais, contato, mapa do site ou links para documentos 
relacionados. 
<form> 
Define uma seção de formulário que possui controles de entrada 
interativos para enviar informações de formulário a um servidor. 
<frame> Define a janela do quadro. 
<frameset> Usado para conter um ou mais elementos <frame>. 
<h1> to <h6> Define um nível de títulos de 1 a 6 tamanhos diferentes. 
<head> Define a seção do cabeçalho do documento HTML. 
<header> 
É definido como um contêiner que contém conteúdo introdutório ou 
links de navegação. 
<hgroup> Define o título de uma seção que contém as marcas h1 a h6. 
<hr /> 
Representam uma quebra temática entre tags de nível de 
parágrafo. Normalmente é desenhar uma linha horizontal. 
<html> Definir que um documento é uma linguagem de marcação HTML 
14 
 
<i> Define um texto em formato itálico 
<iframe> 
Define um quadro embutido que embutiu conteúdo externo no 
documento da web atual. 
<img> Usado para inserir imagem em um documento da web. 
<input> Defina uma obtenção de informações na entrada selecionada 
<ins> 
Usado para indicar o texto que é inserido em uma página e indica 
alterações em um documento. 
<isindex> 
Usado para criar um prompt de pesquisa de linha única para 
consultar o conteúdo do documento. 
<kbd> Usado para identificar o texto que representa a entrada do teclado. 
<keygen> 
Usado para gerar certificado assinado, que é usado para 
autenticação em serviços. 
<label> 
Usado para legendar um rótulo de texto com um elemento de 
formulário <input>. 
<legend> 
Usado para adicionar uma legenda (título) a um grupo de elementos 
de formulário relacionados que são agrupados na tag <fieldset>. 
<li> 
Defina um item de lista, seja uma lista ordenada ou uma lista não 
ordenada. 
<link> 
Usado para carregar folhas de estilo externas em um documento 
HTML. 
<map> Define um mapa de imagem clicável. 
<mark> Usado para realçar (marcar) texto específico. 
<menu> 
Usado para exibir uma lista não ordenada de itens / menu de 
comandos. 
<meta> 
Usado para fornecer metadados estruturados sobre uma página da 
web. 
<meter> Usado para medir dados dentro de um determinado intervalo. 
<nav> Usado para definir o grupo de links de navegação. 
<noframes> 
Usado para fornecer um conteúdo de fallback ao navegador que não 
suporta o elemento <frame>. 
<noscript> 
Usado para fornecer um conteúdo de fallback ao navegador que não 
oferece suporte ao JavaScript. 
<object> 
Usado para objetos incorporados, como imagens, áudio, vídeos, 
miniaplicativos Java e animações em Flash. 
<ol> Define uma lista ordenada de itens. 
<optgroup> 
Usado para criar um agrupamento de opções, as opções 
relacionadas são agrupadas em títulos específicos. 
<option> 
Representa itens de opções dentro de 
um <select>, <optgroup>ou <datalist>elemento. 
<output> Usado para representar o resultado de um cálculo. 
<p> Usado para representar um texto de parágrafo. 
<param> Fornece parâmetros para objectelemento incorporado . 
<pre> Usado para representar texto pré-formatado. 
15 
 
<progress> Representa o andamento de uma tarefa. 
<q> Representa a cotação curta. 
<rp> 
Usado para fornecer parênteses ao redor do conteúdo de fallback 
para o navegador que não suporta as anotações ruby. 
<rt> Especifica o texto ruby da anotação ruby. 
<ruby> Usado para representar uma anotação de rubi. 
<s> Exibição de texto tachado. 
<samp> 
Representa o texto que deve ser interpretado como saída de 
amostra de um programa de computador. 
<script> Define JavaScript do lado do cliente. 
<section> 
Usado para dividir um documento em várias seções genéricas 
diferentes. 
<select> Usado para criar uma lista suspensa. 
<small> Usado para diminuir o tamanho do texto. 
<source> Usado para especificar vários recursos de mídia. 
<span> Usado para agrupar e aplicar estilos a elementos embutidos. 
<strike> Representao texto tachado. 
<strong> Representa um texto importante com ênfase forte. 
<style> Usado para adicionar estilo CSS a um documento HTML. 
<sub> Representa o texto subscrito embutido. 
<sup> Representa texto sobrescrito embutido. 
<table> Usado para definir uma tabela em um documento HTML. 
<tbody> Usado para agrupar linhas da tabela. 
<td> Usado para cria células de dados padrão na tabela HTML. 
<textarea> Crie a entrada de texto de várias linhas. 
<tfoot> 
Usado para adicionar um rodapé a uma tabela que contém o resumo 
dos dados da tabela. 
<th> 
Usado para criar o cabeçalho de um grupo de células na tabela 
HTML. 
<thead> 
Usado para adicionar um cabeçalho a uma tabela que contém 
informações do cabeçalho da tabela. 
<time> Representa a data e / ou hora em um documento HTML. 
<title> Representa o título de um documento HTML. 
<tr> Define uma linha de células em uma tabela. 
<track> Representa faixas de texto para as tags <audio>e <video>. 
<tt> Representa o texto do teletipo. 
16 
 
<u> Representa texto sublinhado. 
<ul> Define uma lista não ordenada de itens. 
<var> 
Representa uma variável em um programa de computador ou 
equação matemática. 
<video> Usado para incorporar conteúdo de vídeo. 
<wbr> 
Define uma oportunidade de quebra de palavra em uma longa 
sequência de texto. 
Fonte: Way2Tutotorial 
 
4. ATRIBUTOS DO HTML 
 
Os atributos são usados para personalizar as tags, modificando sua estrutura 
ou funcionalidade. Igualmente, os atributos são utilizados para atribuir uma classe ou 
id a um elemento. A maioria das tags tem seus próprios atributos. Contudo, existem 
alguns atributos genéricos que podem ser utilizados na maioria das tags HTML 
 
5. A ESTRUTURA BÁSICA DE UM DOCUMENTO HTML 
A tag <!DOCTYPE html > instrui o navegador que o documento se refere a uma 
página HTML e a versão que deve ser utilizada é a versão 5 do HTML. Dentro da tag 
<html> estará toda as demais tags que serão interpretadas pelo navegador. 
A tag <head> tem significado cabeça, ou seja, dentro desta tag estará instruções 
especificas de configurações de como a página deve funcionar, tudo que é inserido 
nesta tag não fica visível diretamente na página uma vez aberta no navegador. 
17 
 
A tag <body> estará tudo que realmente precisa ser apresentado ao usuário como 
texto em parágrafos, títulos, tabelas, links entro outros. 
 
 
6. CRIAÇÃO DE FORMULÁRIO COM HTML5 
 
 
Fonte: (2021) 
 
Para criar este formulário além de inserir as tags principais que foram abordadas no 
tópico 5 foi inserido a tag <form>, esta tag instrui para o navegador que está sendo 
criado um formulário e que dados serão imputados a partir do mesmo. 
A tag <label> é semântica, ou seja, não tem alteração visual para usuário que visualiza 
a página, porém é importante para etiquetar os títulos dos campos que receberão 
inputs de dados. 
A tag <input> criar caixa de texto para usuário inserir os dados solicitados. O input 
pode alterar de acordo com os atributos que são inseridos nessa tag. Neste exemplo 
foi utilizado o atributo type text para criar uma caixa de texto. Também foi utilizado 
type number para criar um caixa que só aceitará números na digitação do usuário. 
 
A tag <button> cria um botão para quando todo formulário for preenchido o usuário 
possa confirmar e enviar os dados inseridos. 
18 
 
 
 
 
REFERÊNCIAS 
 
BONIM, Nayara. História HTML. O Manual Freelancer 
Disponível em: http://www.frontendbrasil.com.br/artigos/a-historia-do-html/ 
Acesso em: 23 de abril de 2021 
 
 
Lista de tags HTML com descrição, Way 2 Tutotial, Disponível em: 
https://way2tutorial.com/html/tag/index.php 
Acesso em: 23 de abril de 2021 
 
 
MARQUES, Rafael. Oque é HTML Entenda de forma descomplicada, Home Host. 
Disponível em: https://www.homehost.com.br/blog/tutoriais/o-que-e-html/ 
Acesso em: 23 de abril de 2021. 
 
http://www.frontendbrasil.com.br/artigos/a-historia-do-html/
https://way2tutorial.com/html/tag/index.php
https://www.homehost.com.br/blog/tutoriais/o-que-e-html/