O documento descreve os principais protocolos e conceitos da Internet e da World Wide Web, incluindo HTTP, TCP, IP, DHCP, DNS, browsers, HTML, URLs, hiperligações, imagens, tabelas e formulários. Explica também elementos como div, span, listas, molduras e como codificar páginas web.
5. Enquadramento
2 – Pedido recebido
Pode existir: execução de programas,
acesso base de dados…
3- Reposta ao pedido
1 – Pedido HTTP (escrevendo URL
na barra de endereço)
4 – Recebido reposta (ficheiros
texto, imagens, etc)
5 – Interpretação do código
7. Browser
Fazer pedido HTTP
Interpretar repostas
(HTML, CSS,
Javascript)
Renderizar e Mostrar
no Ecã
Também tem
ferramentas de
desenvolvimento
8. HTML
Hypertext Markup Language,
Linguagem padrão utilizada para acesso e
exibição de páginas Web.
Linhas de código HTML são interpretadas pelo
browser que mostra o resultado final ao
utilizador,
a linguagem HTML é constituída de:
textos e
códigos (marcas, etiquetas ou tags).
9. Estrutura de Ficheiro HTML
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
Corpo da página
</body>
</html>
11. ISO-8859-1
A codificação ISO usada em países de língua
oficial portuguesa é a ISO-8859-1.
Também connhecida por ISO-Latin-1,
A ISO-8859-1 engloba as línguas europeias
dos países ocidentais (Western Europe)
Fonte:http://www.linguateca.pt/codificacoes/
12. UTF-8
É um sistema de codificação que procura congregar as
diversas codificações ISO numa única só, mantendo a sua
compatibilidade.
Usa um único byte para codificar os primeiros 128 caracteres
da tabela (os caracteres US-ASCII),
Usa dois bytes para os restantes caracteres, o que permite
incluir os restantes caracteres das restantes codificações (e.g.
latinos, eslavos ou gregos, até os caracteres cirílicos, árabes e
hindus).
eg. a palavra 'pão' no sistema ISO-8859-1 ocupa 3 bytes,
enquanto que no sistema UTF-8 ocupa 4 bytes, uma vez que
a letra 'ã' é representada com dois bytes.
Fonte:http://www.linguateca.pt/codificacoes/
13. Elementos HTML
Os documentos HTML são construidos com
elementos HTML.
Os elmentos HTML são escritos com
uma marca de início: <marca>
uma marca de fim: </marca>
o conteúdo entre eles: conteúdo
Exemplo <h1>conteudo</h1>
14. Atributos HTML
Um elemento HTML pode ter atributos
Os atributos fornecem informação adicional
sobre um elemento
Os atributos são sempre especificados na
marca inicial
Os atributos vêm com um par nome/valor,
como por exemplo (nome=”valor”). Um
exemplo é o id
<p id=”paragrafo”>
16. Style e Formatação
Atributo Style
<body style="background-color:lightgrey;">
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Formatação (tendência para se tornar obsoleto)
<BODY text="#0000FF" link="#00FFFF" bgcolor="#66FF00" alink="#FF6600"
vlink="#FFFF66">
Itálico ( <I>texto,</I>), negrito (<B>texto,</B>) sublinhado: <U>texto,</U>;
<FONT SIZE=7 STYLE="font-size: 40pt">
<FONT COLOR="#008000">texto.
</FONT></FONT>
<FONT FACE="Courier New, monospace">texto</FONT>.
17. Comentários e código
<!-- comentário -->
<code> </code>
<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>
18. Hiperligações
As hiperligações representam-se assim:
<a href="url">texto da hiperligação</a>
Exemplo:
<html>
<head>
<title>Pagina 2</title>
</head>
<body>
Para chamar a página 1 clicar
<a href = "pagina1.htm"> aqui</a>.
</body>
</html>
19. Hiperligações
<a href="http://www.iscte-iul.pt/" target="_blank">ISCTE!</a>
O atributo target pode ter os seguintes valores:
_blank abre o documento da hiperligação numa
nova janela ou tab
_self abre o documento da hiperligação na própria
janela (situação por omissão)
_parent abre o documento da hiperligação na
frame a cima
_top abre o documento da hiperligação na janela
framename abre o documento da hiperligação num
frame com nome especifico
20. Hiperligações
Referência relativa -> indicação apenas do
caminho
Referência absoluta -> link indicando URL e
caminho completo (com a expressão http://)
24. Simbolos especiais
á á
à à
ã ã
â â
ç ç
A sua utilização tem vindo a desaparecer
devido à utilização de UTF 8
28. Tabelas
<TABLE> para iniciar tabela
</TABLE> para fechar tabela;
<tr> para iniciar uma linha;
</tr> para findar uma linha;
<th> para começar uma célula (table header);
</th> encerrar uma célula
<td> para iniciar uma célula (table data)
</td> para fechar uma célula;
29. Blocos e Inline
Um elemento ao nível do bloco começa sempre com uma nova linha
e utiliza todo o espaço disponível.
Exemplo de elementos ao nível do bloco:
<div>
<h1> - <h6>
<p>
<form>
Um elemento inline não começa no início da linha e apenas utiliza a
largura necessária.
São exemplos de elementos inline:
<span>
<a>
<img>
30. Div e Span
<div> e <span> são elementos que funcionam
geralmente como contentores, permindo
agrupar outros elementos.
31. Formulários
Formulários (ou forms)
Iniciado com <form> e fechado com </form>.
<input> : text (linha única para texto),
password, checkbox, radio, submit (button) e
reset (button);
<select> : listbox, combobox;
<textarea> : campo de texto de múltiplas
linhas.
32. Formulários
Há dois métodos:
post
orientado para a transferência de grandes
quantidades de dados,
get
os dados fazem parte da URL associado à
consulta enviada para o servidor.
41. Molduras
<frameset> ... </frameset> é o comando HTML
responsável pela divisão da janela do browser em
duas ou mais partes
<frame>. é usado para carregar esses ficheiros
parâmetros:
src - define o ficheiro a ser carregado no frame;
name - define o nome do frame e possibilita o aparecimento
do conteúdo do link de um frame no outro.
45. Referência
Costa, C. J. (2007). Desenvolvimento para web.
ITML press/Lusocredito.
Pereira, A., & Poupa, C. (2013). Linguagens
web, 5ª edicao, Edições Silabo
Percivalm R. (2017) Confident Coding: Master
the Fundamentals of Code and Supercharge
Your Career (Confident Series) 1st Edition,
KognPage
http://www.w3.org/