Aula de WebSites - Básico

•
Exatas

Mirla Rocha de Oliveira Ferreira
18/11/2020
E aí, curtiu este material?
Ajude a incentivar outros estudantes a melhorar o conteúdo
Gostou desse material? Compartilhe! 🧡
Programação Web

1.862 Materiais compartilhados
Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Prévia do material em texto
Construção de WebSites 
Parte 1 
Parte 2 
Mirla Rocha de Oliveira Ferreira 
HTML Básico 
• O html tem certas regras a serem obedecidas: 
– Nome do arquivo não pode conter mais que 32 
caracteres. 
– Nome do arquivo não pode conter caracteres 
especiais ou espaço em branco. No lugar do espaço, 
usa-se o ‘_’ (símbolo Underline). 
– O nome do arquivo deve ser referenciado no código 
da forma em que ele foi escrito, diferenciando 
maiúsculas de minúsculas. 
– O ponto final deve ser usado uma única vez, somente 
para identificar a extensão do arquivo. 
HTML Básico 
• HTML  Linguagem de Marcação 
– Marcações são as tags. 
– Servem para formatar o conteúdo em cabeçalhos, 
parágrafos, listas, tabelas, inserir links, figuras e 
outros objetos. 
– As tags são delimitadas por ‘<‘ e ‘>’. 
– As tags precisa ser especificada onde começa e 
onde termina, usando o sinal ‘/’ para delimitar o 
final da marcação: <tag>texto</tag> 
 
HTML Básico 
– As marcações usam a lógica LIFO – Last In, First 
Out - O último aberto deve ser o primeiro a ser 
fechado. 
<tag1><tag2><tag3>texto</tag3> </tag2> </tag1> 
– Nem todas as tags precisam ser terminadas. A tag 
de quebra de linha <br>, por exemplo, não precisa 
de fim. 
HTML Básico 
• HTML básico possui extensão .htm ou .html 
– O ‘l’ a mais é para os sistemas a partir do Unix e 
Windows NT que permite mais letras na extensão 
do arquivo enquanto os bem mais antigos 
permitiam apenas 3. 
HTML Básico 
• A tag que determina o documento como um 
programa HTML é <html>, que é a primeira 
tag a ser colocada no texto. E, da mesma 
forma, a tag que indica o fim do programa é 
</html>. 
 
HTML Básico 
• O cabeçalho é identificado com a tag <head> 
e o fim do cabeçalho por </head>. 
– Dentro do cabeçalho podem existir outras e 
scripts em outra linguagem. 
– Dentro do cabeçalho existe a definição do título, 
com <title> e </title>. Esse título é o que irá 
aparecer na barra superior do navegador. 
HTML Básico 
• Depois do cabeçalho, ou seja, fora das tags 
<head> e </head> e dentro das tags <html> e 
</html>, tem-se o ‘corpo’: <body> e </body> 
• Então, o esqueleto de um arquivo HTML é: 
<html> 
<head> 
<title> ... </title> 
</head> 
<body> ... </body> 
</html> 
HTML Básico 
• Um index.html ou index.htm é um 
arquivo padrão dentro de um servidor. Todo 
link de endereço não especificado faz com que 
o navegador retorne o arquivo index. Se esse 
arquivo não existir, o navegador apresentará 
uma lista dos arquivos que estão nesse 
diretório do servidor. 
Estruturação 
• No início do documento html, antes mesmo 
da tag inicial, há uma declaração de 
especificação do HTML ou XHTML (baseado 
nos padrões do W3C): DOCTYPE . O uso é 
recomendado para facilitar a validação. Sem a 
mesma, o navegador de internet poderá 
mostrar um resultado desestruturado, 
diferente do código programado. 
Estruturação 
• DOCTYPEs da linguagem HTML e XHTML. 
• Para HTML 4.01: 
– HTML Strict: Precisa do código impecável, sem 
erros; não se pode usar tags e atributos de 
apresentação - <font>, <body bgcolor=‘red’> . 
Deve-se usar os estilos CSS (Cascading Style 
Sheets) para qualquer tipo de estilo / 
apresentação / design na página. 
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
Estruturação 
– HTML Transitional: Inclui tanto os elementos 
estruturais com os elementos de apresentação. É 
usada quando é preciso manter a compatibilidade 
com navegadores que não suportam os estilos 
CSS. 
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
Estruturação 
– HTML Frameset: Consiste na DOCTYPE Transitional 
com elementos relacionados com molduras 
(‘frames’). 
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd"> 
Estruturação 
– Para XHTML 1.0: 
– XHTML Strict: Usa-se para escrever código limpo, 
livre de misturas entre estilo e conteúdos. É usada 
em conjunto com estilos CSS . 
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd"> 
Estruturação 
– XHTML Transitional: Junta os elementos 
estruturais com os elementos de apresentação 
que o W3C quer eliminar da linguagem, por 
misturarem o estilo com os conteúdos. 
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd"> 
Estruturação 
– XHTML Frameset: Consiste na DOCTYPE 
Transitional com elementos relacionados com 
molduras (‘frames’). 
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Frameset//EN“ 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd"> 
Estruturação 
– XHTML Básico: Contém apenas os elementos 
indispensáveis para construir páginas úteis. Serve 
de base para construir outras linguagens da 
família XHTML, como o XHTML Mobile Profile, que 
foi concebido para criar páginas para a Internet 
Móvel. 
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 
1.1//EN" 
 "http://www.w3.org/MarkUp/DTD/xhtml-
basic11.dtd" 
Estruturação 
– Para HTML 2.0: 
• <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 
2.0//EN"> 
– Para HTML 5.0: 
• <!DOCTYPE html> 
 
Conceitos 
• W3C: comissão que define os padrões de 
programação para a WWW. 
• CSS: é um padrão de formatação (Web 
Standards) para páginas que permite ir além 
das limitações impostas pelo HTML. 
– Garante uma formatação homogênea e uniforme 
em todas as páginas de um site. É um mecanismo 
simples para adicionar estilos (exemplos: fontes, 
cores, espaçamentos) em documentos Web. 
CSS 
• Permite: 
– Maior versatilidade (facilidade) na programação do layout 
de páginas. 
– Maior controle sobre os atributos de uma página, como 
tamanho e cor das fontes, espaçamento entre linhas e 
caracteres, margem do texto, caixas de texto, botões de 
formulário, entre outros. 
– Utilização de ‘layers’, permitindo a sobreposição de 
objetos, textos e imagens, em camadas. 
– Modificar rapidamente todo o ‘layout’ de um ‘site’, ou de 
um certo grupo de formatação (Exemplo: alterar a cor de 
todos os links). 
XHTML 
• É reformulação do HTML 4.0, gerando o 
XHTML 1.0 e aplicação do XML. 
• Linguagem da web do futuro  trata-se de 
um HTML mais claro, puro e limpo, garantindo 
a estabilidade da linguagem. 
– Segundo as recomendações da W3C, futuras 
versões de navegadores tendem a deixar de 
suportar elementos e atributos já em desuso,mas 
comum no HTML. 
XHTML 
• Código consistente que dispensa uso de 
‘truques’ e ‘hacks’ para contornar ‘bugs’. 
• Escrita limpa e evidente. 
• O tempo de carregamento é mais rápido, pois 
os navegadores tem maior facilidade de 
interpretar uma página limpa, sem precisar 
interpretar e decidir sobre renderização de 
erros de código. 
 
XHTML 
• Mais acessível aos navegadores e aplicações 
padrão de usuário, incrementando a 
portabilidade dos documentos web. 
• Compatível com todas as aplicações de 
usuários para HTML, antigas e já 
ultrapassadas. 
• Estável desde o lançamento da versão atual: 
26 de janeiro de 2000. 
 
HTML x XHTML 
• Tags em letras minúsculas; 
• HTML: <DIV><P>texto</P></DIV> 
• XHTML: <div><p>texto</p></div> 
• Tags convenientemente alinhadas; 
• Errado: <p><b><i>negrito e itálico</p></b></i> 
• Certo: <p><b><i>negrito e itálico</i></b></p> 
HTML x XHTML 
• Documentos bem formados; 
<html> 
 <head> … </head> 
 <body> … </body> 
</html> 
• Tags de fechamento são obrigatórias; 
• Errado: <p>parágrafo. 
 <p>outro parágrafo. 
• Certo: <p>parágrafo.</p> 
 <p>outro parágrafo.</p> 
 
HTML x XHTML 
• Elementos vazios devem ser fechados; 
• Errado: <br> (quebra de linha) 
 <hr> (régua horizontal) 
• Certo: <br> </br> OU <br /> 
 <hr> </hr> OU <hr /> 
• Diferenças para os atributos. 
– Todo valor é escrito entre aspas. 
• <table width=“50%”> 
 
HTML x XHTML 
– Sintaxe completa, contendo campos de nome e 
valor, mesmosque sejam iguais. 
• HTML: <input checked> 
 <input disabled> 
 <option selected> 
• XHTML: <input checked="checked" /> 
 <input disabled="disabled" /> 
 <option selected="selected" /> 
HTML x XHTML 
– Atributos id e name usados em a, applet, form, 
frame, iframe, img e map. 
• HTML: <img src="imagem.gif" name="minha_imagem" /> 
• XHTML: <img src="imagem.gif" id="minha_imagem" /> 
 Para ser compatível com navegadores antigos: 
 <img src="imagem.gif" id="minha_imagem“ 
name="minha_imagem” /> 
HTML x XHTML 
– Atributo alt (fornece uma descrição curta sobre a 
imagem quando o cursor passa sobre ela) na 
inserção de imagens é obrigatório. 
• <img src="imagem.gif" alt ="minha_imagem " /> 
• <img src="imagem.gif" alt =" " /> 
HTML x XHTML 
• W3C disponibiliza, gratuitamente, um 
validador para documentos XHTML. 
– Onde se digita a url ou o caminho para o arquivo no disco 
rígido e o documento é analisado, disponibilizando-se um 
relatório completo e detalhado das não-conformidades 
que possam vir a existir. Serve como um revisor de código. 
Com a validação dos documentos (X)HTML, garante-se a 
construção de páginas de acordo com um padrão que 
permitirá compatibilidade com todos os navegadores. 
Validador XHTML do W3C 
 
http://validator.w3.org/
http://validator.w3.org/
http://validator.w3.org/
http://validator.w3.org/
http://validator.w3.org/
Elementos básicos e atributos 
• Título da página, texto que aparece na barra 
de título do navegador: <title> ... </title> 
• Títulos de textos, cabeçalhos, cujo nível de 
tamanho da letra varia de 1 (maior tamanho) 
a 6 (menor tamanho). 
 <h1> ... </h1> <h2> ... </h2> 
 <h3> ... </h3> <h4> ... </h4> 
 <h5> ... </h5> <h6> ... </h6> 
 
Elementos básicos e atributos 
• Criação de um novo parágrafo: <p> ... </p> 
– Alinhamento do texto: <p align=“left”/“center”/“right”> 
• Quebra de linha: <br> </br> ou <br /> 
• Texto em negrito: <strong> ... </strong> ou <b> ... </b> 
• Texto em itálico: <i> ... </i> 
• Texto sublinhado: <u> ... </u> 
• Texto riscado: <strike> ... </strike> 
• Texto subscrito: <sub> ... </sub> 
• Texto sobrescrito: <sup> ... </sup> 
 
Elementos básicos e atributos 
• Corpo do texto, que inicia e finaliza o corpo do 
documento XHTML, e seus atributos: <body> 
... </body> 
– Imagem de fundo: <body background =”imagem.jpg” > 
– Cor de fundo: <body bgcolor=”#000000”> 
– Cor padrão de um texto: <body text=”#000000″> 
– Cor padrão de um link: <body link=”#000000″> 
– Cor padrão de um link visitado: <body vlink=”#000000″> 
– Cor padrão de um link ativo: <body alink=”#000000″> 
 
 
Elementos básicos e atributos 
• Insere um linha horizontal ao longo da página: 
<hr> </hr> ou <hr /> 
– Espessura em pixels: <hr size=”x”> 
– Largura em pixels: <hr width=”x”> 
– Com efeito: <hr noshade> 
• Link de uma imagem ou texto com uma url: <a 
href=”URL”> ... </a> 
– Link em nova janela: <a href=”URL” target=”_blank”> … </a> 
– Link na mesma janela: <a href=”URL” target=”_top”> … </a> 
Elementos básicos e atributos 
• Divisão do corpo da página em seções lógicas: 
<div>... </div> 
– Alinhamento dos dados da seção: <div 
align=“left”/ “center”/ “right”> 
– Atribui uma classe a uma seção: <div class=“nome 
da classe”> 
 
Elementos básicos e atributos 
• Lista sem numeração (não ordenadas): <ul>... 
</ul> 
– Um item da lista: <li> ... </li> 
– Tipo do item de marcação: <ul type="disk" / 
“circle” / “square”> ... </ul> ou <li type="disk" / 
“circle” / “square”> ... </li> 
Elementos básicos e atributos 
• Lista com numeração (ordenadas): <ol> ... 
</ol> 
– Um item da lista: <li> ... </li> 
– Tipo do item de marcação: <ol type=“1" / “a” / 
“A” / “i” / “I”> ... </ol 
 
Elementos básicos e atributos 
• Inserção de imagens: <img> ... </img> 
– Formatos de imagens aceito pelos navegadores: 
.gif, .jpg, .png 
– Indica a localização da figura: <img 
src=“imagem.jpg”> </img> ou <img src=“imagem.jpg” /> 
– Fornece um texto alternativo, explicativo, quando 
a imagem não puder ser visualizada, ou quando o 
mouse passa por cima da imagem: <img 
src=“imagem.jpg” alt=“Imagem de fulano”> </img> ou 
<img src=“imagem.jpg” alt=“Imagem de fulano” /> 
 
 
Elementos básicos e atributos 
– Comprimento da imagem: <img src=“imagem.jpg” 
width=“x” /> 
– Altura da imagem: <img src=“imagem.jpg” height=“y” /> 
– Posicionamento da imagem na página: <img 
src=“imagem.jpg” align= “top” / “middle” / “bottom” / “left” / 
“right” /> 
– Espaço vertical ao redor da imagem: <img 
src=“imagem.jpg” vspace=“y” /> 
– Espaço horizontal ao redor da imagem: <img 
src=“imagem.jpg” hspace=“x” /> 
– Define a espessura da borda: <img src=“imagem.jpg” 
border=“x″ /> 
 
Elementos básicos e atributos 
• Criação de tabelas: <table> ... </table> 
– Título da tabela: <table> 
 <caption> ... </caption> 
 </table> 
– Cabeçalho da tabela: <table> 
 <thead> ... </tfoot > 
 </table> 
– Rodapé da tabela: <table> 
 <tfoot> ... </tfoot > 
 </table> 
 
 
 
 
Elementos básicos e atributos 
– Corpo da tabela: <table> 
 <tbody> ... </tbody> 
 </table> 
– Linhas da tabela (table row): <table> 
 <tr> ... </tr> 
 </table> 
– Células da tabela (table data): <table> 
 <tr> 
 <td> ... </td> 
 </tr> 
 </table> 
 
Elementos básicos e atributos 
– Borda da tabela: <table border=“x″> ... </table> 
– Área desenhada em torno da tabela: <table 
frame=“void” / “above” / “below” / “lhs” / “rhs” / 
“hsides” / “vsides” / “box” / “border ″> ... </table> 
– Espaçamento entre as células: <table 
cellspacing=“x″> ... </table> 
– Espaçamento entre o conteúdo e a borda da 
célula: <table cellpading=“x″> ... </table> 
– Cor de fundo da tabela, linha ou célula: <table 
bgcolor=“cor″> ... </table> ou <tr bgcolor=“cor″> ... </tr> 
ou <td bgcolor=“cor″> ... </td> 
 
Elementos básicos e atributos 
– Alinhamento horizontal e vertical (da tabela, da 
linha ou da célula): <tr align=“left” / “center”/ 
“right” valign=“top” / “middle” / “bottom”> 
 
 
 
Elementos básicos e atributos 
• Frames 
– Quadros de divisão de uma página em várias 
partes, cada uma carregando outra página. 
– Uso não é recomendado no XHTML, pois gera um 
código complexo e uma renderização lenta. 
– <frameset> ... </frameset> 
– Tamanho da coluna: <frameset cols 
=“x(pixels),y(porcentagem" > ... </frameset> 
– Tamanho da linha: <frameset 
rows=“x(pixels),y(porcentagem" > ... </frameset> 
 
 
Elementos básicos e atributos 
– Conteúdo do frame: <frame> ... </frame> 
– Localização do arquivo/url a ser carregado no 
frame: <frame src=“caminho”> </frame> 
– Nome do frame: <frame id=“nome”> </frame> 
– Inclusão de barra de rolagem: <frame scrolling=“yes” 
/ “no” / “auto”> </frame> 
– Espessura da borda do frame: <frame 
frameborder=“x”> </frame> 
– Bloqueia um frame impedindo o 
redimensionamento: <frame noresize=“noresize”> 
</frame> 
 
Elementos básicos e atributos 
– Espaço horizontal ao redor do frame: <frame 
margintwidth=“x”> </frame> 
– Espaço vertical ao redor do frame: <frame 
marginheight =“x”> </frame> 
– Usando o hiperlink (<a></a>), pode-se definir 
onde abrir o novo caminho: 
– Nova página no mesmo frame: <a target=“_self”> 
<frame> ... </frame> </a> 
– Nova página em nova janela: : <a 
target=“_blank”> <frame> ... </frame> </a> 
Elementos básicos e atributos 
– Nova página na mesma janela: : <a 
target=“_top”> <frame> ... </frame> </a> 
– Nova página no frame primário: : <a 
target=“_parent”> <frame> ... </frame> </a> 
Elementos básicos e atributos 
• Criando formulários: <form> ... </form> 
– São utilizados para envio de informações ao 
servidor. 
– Endereço de página ou e-mail para onde irão as 
informações do formulário: <form 
action=“caminho”>…</form> 
– Nome do formulário: <form name=“nome”>…</form>– Onde abrirá a nova janela: : <form target=“_blank” / 
“_self” / “_top”/ “_parent”>…</form> 
Elementos básicos e atributos 
– Forma de envio das informações: 
• Envio de consulta, busca ou qualquer outra forma que 
não mude o estado do servidor: <form method=“get”> 
... </form> 
• Envio de cadastro ou registro de dados ou informações 
que alterem dados do sistema: <form method=“post”> 
... </form> 
 
Elementos básicos e atributos 
– Codificação do envio de dados: 
• Um atributo que não precisa ser especificado na 
maioria dos casos. 
• A forma padrão é: <form enctype=“application/x-
www-form-urlencoded”> ... </form> 
• Para fazer uploads de arquivos: <form 
enctype=“multipart/form-data”> ... </form> 
• Para email: <form enctype=“text/plain”> ... </form> 
 
 
Elementos básicos e atributos 
– Campos de entrada de dados: <input> ... </input> 
– Nome do campo de entrada de dados: <input 
name=“nome”> ... </input> 
– Conteúdo inicial do campo: <input value=“valor”> ... 
</input> 
– Tipos de campos de entrada de dados 
• Inserção de texto, com quantidade máxima de 
caracteres, largura máxima do campo: <input 
type=“text” width=“x” maxlenght=“y”> ... </input> 
• Inserção de senha: <input type=“password”> ... 
</input> 
Elementos básicos e atributos 
• Inserção de arquivo para upload: <input type=“file”> ... 
</input> 
• Botão para o envio do formulário: <input 
type=“submit”> ... </input> 
• Botão para limpar os campos do formulário: <input 
type=“reset”> ... </input> 
• Botão que pode ser associado a outro código de 
programa: <input type=“button”> ... </input> 
• Caixa de seleção de mais de um elemento: <input 
type=“checkbox”> ... </input> 
• Caixa de seleção de um único elemento: <input 
type=“radio”> ... </input> 
 
 
Elementos básicos e atributos 
– Campo de texto com muitas linhas, podendo 
identificar o número de caracteres por linha (cols) 
e quantidade de linhas (rows): <textarea cols=“x” 
cols=“y” id=“nomedocampo”> ... </textarea>