HTML

Prof. Carlos J. Costa, PhD
Professor Associado de Sistemas de Informação
ISEG (Lisbon School of Economics and Management), Universidade de Lisboa

Enquadramento
 Protocolos:
 HTTP (hipertext
Transfer Protocol)
 TCP (Transmission
Control Protocol )
 IP (Internet Protocol)
 Ethernet

Enquadramento
 Servidor de DHCP (Dynamic Host
Configuration Protocol)
 tem por propósito atribuição de IP

Enquadramento
 DNS (Domain Name System)

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

Browser
 Fazer pedido HTTP
 Interpretar repostas
(HTML, CSS,
Javascript)
 Renderizar e Mostrar
no Ecã
 Também tem
ferramentas de
desenvolvimento

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).

Estrutura de Ficheiro HTML
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
Corpo da página
</body>
</html>

Codificação
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
HTML5
<meta charset="UTF-8">

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/

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/

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>

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”>

Parágrafos, Headings
 <p></p>
 <br>
 <pre> </pre>
 <h1></h1>
 <h2></h2>
 <h3></h3>
 <hr>

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>.

Comentários e código
 
 <code> </code>
<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>

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>

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

Hiperligações
 Referência relativa -> indicação apenas do
caminho
 Referência absoluta -> link indicando URL e
caminho completo (com a expressão http://)

Imagens
 <img src="url" alt="algum texto">
<html>
<head>
<title>Página 1</title>
</head>
<body>
Para voltar à página 2 clicar <a href = "pagina2.htm"> aqui</a>
<img src="boneco.jpg" alt="boneco” style = "width:100px; height:100px;">
</body>
</html>

Imagens
 JPG
 GIF
 PNG
 SVG
Atenção não suportado:
 BMP

Imagens
SVG no próprio documento:
<html>
<body>
<h1>exemplo de SVG</h1>
<svg width="400" height="400">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
<rect x="100" y="20" width="30" height="100" style="fill:rgb(0,0,255);stroke-
width:3;stroke:rgb(0,0,0)" />
</svg>
</body>
</html>

Simbolos especiais
 á &aacute
 à &agrave
 ã &atilde
 â &acirc
 ç &ccedil
 A sua utilização tem vindo a desaparecer
devido à utilização de UTF 8

Listas
<h3>Lista não numerada</h3>
<ul>
<li> Primeiro item </li>
<li> Segundo item </li>
<li> Terceiro item </li>
</ul>

Listas com títulos
<dl>
<dt>Um título da lista</dt>
<dd>Um primeiro texto</dd>
<dt>Outro Título</dt>
<dd>Novo texto para a lista</dd>
</dl>

Listas numeradas
<h3>Lista numerada</h3>
<ol>
<li> Primeiro item da Lista </li>
<li> Segundo item da Lista </li>
<li> Terceiro item da Lista </li>
<li> Quarto item da Lista</li>
</ol>

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;

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>

Div e Span
 <div> e <span> são elementos que funcionam
geralmente como contentores, permindo
agrupar outros elementos.

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.

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.

Formulários
<form method="post“ action="teste.php">
Digite o nome de sua cidade:
<input type="text" name="Cidades" value=Lisboa
size="15" maxlenght="15">
<input type="submit" value="enviar">
</form>

Formulários
Digite uma senha:
<input type="password" name="Senha"
value="minhasenha" size="10" maxlenght="10">

Formulários
CheckBox
Que outro curso pretende inscrever-se?<p>
<input type="checkbox" name="preferencia" value="mktg"
checked>Marketing
<input type="checkbox" name="preferencia"
value="grh">GRH<p>
value="fin">Finanças
value="ge">Gestão Estratégica<p>

Formulários
Radio
Em que curso se pretende inscrever?<p>
<input type="radio" name="preferencia" value="mktg"
checked>Marketing
<input type="radio" name="preferencia" value ="grh" >
GRH <p>
<input type="radio" name="preferencia" value="fin">
Finanças
<input type="radio" name="preferencia" value="ge">
Gestão Estratégica<p>

Formulários
Listbox
<select name="cursos" size = "10" multiple>
<option value="mktg" >Marketing</option>
<option value ="grh">GRH </option>
<option value="fin">Finanças </option>
<option value="ge">Gestão Estratégica </option>
</select>

Formulários
Combobox
<select name="cursos">
<option value="mktg" >Marketing</option>
<option value ="grh">GRH </option>
<option value="fin">Finanças </option>
<option value="ge">Gestão Estratégica </option>
</select>

Formulários
Área
<textarea name="opiniao" rows="5" cols="40">
Faça aqui um comentário ao funcionamento deste
curso
</textarea>

Formulários
Antes de fechar não esquecer:
<input type="reset">
<input type="submit“ value="enviar">

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.

Molduras
<HTML>
<head><title> frames</title></head>
<FRAMESET COLS = "308,100% " >
<FRAME SRC="pagina1.htm" NAME=“pagina 1">
<FRAME SRC="pagina2.htm" NAME=“pagina 2">
</FRAMESET>
<BODY>
</BODY>
</HTML>

Molduras
<HTML>
<head><title> frames 2</title></head>
<FRAMESET ROWS = "55,100% " border="0">
<FRAME SRC="frame.htm" NAME="Frame" SCROLLING="NO"
MARGINWIDTH="20" MARGINHEIGHT="0" NORESIZE>
<FRAMESET COLS = "108,100% " >
<FRAME SRC="pagina1.htm" NAME="pg1" RESIZE>
<FRAME SRC="pagina2.htm" NAME="pg2" RESIZE>
</FRAMESET>
</FRAMESET>
<BODY>
</BODY>

Molduras
<CENTER>
<iframe src=“http://iscte-iul.pt" width=740 height=255>
</iframe>
</CENTER>

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/

HTML

Mais conteúdo relacionado

Mais procurados

Semelhante a HTML

Mais de Carlos J. Costa

HTML