O documento introduz conceitos básicos de HTML, incluindo tags, atributos e como formatar texto. Explica como criar cabeçalhos, parágrafos e inserir quebras de linha. Também discute como especificar cores, tamanhos de fonte e estilos como negrito e itálico.

1. Programação Web e SGC
Introdução ao HTML
UNIVERSIDADE EDUARDO MONDLANE
FACULDADE DE ENGENHARIA
DEPARTAMENTO DE ENGENHARIA ELECTROTÉCNICA
Docentes: Dr Alfredo Covele
Eng Ruben Manhiça
Maputo,
April
17,
2014

2. Conteúdo da Aula
1. Conceitos basicos;
2. Introdução ao HTML
4/17/14 Apresentado por Ruben Manhiça 2

3. 3
Introdução
• HTML = HyperText Markup Language
• HTML é a linguagem de marcação universal para
Web. HTML permite que você formate texto, adicione
gráficos, crie links, entradas de formulários, frames,
tabelas, etc e salve tudo em uma arquivo texto que
qualquer navegador pode ler e exibir.
• A chave do HTML são as tags que indicam qual
conteúdo virá em seguida.

4. 4
Conceitos
• Hipertexto: um documento hipertexto provê links
visualmente claros a outros documentos e
selecionando um link em um documento nos leva a
outra documento
• Internet: é um sistema global de computadores em
rede que permite comunicação entre usuários e
transferência de arquivos entre quaisquer duas
máquinas da rede

5. 5
Conceitos
• Multimídia: combina várias tecnologias de
apresentação num esforço de apelar aos vários
sentidos quanto possível (vale-se de gráficos, sons,
animações e vídeos para criar um completa e rica
experiência computacional)

6. 6
Serviços básicos da Internet
• E-mail: correio eletrônico
• FTP: transferência de arquivos
• WWW: comunicação por meio de hipertexto

7. 7
Modelo Cliente / Servidor
Browser Servidor Web
request
response
Mozilla Firefox
Internet Explorer
Opera
Konqueror
Safari
Chrome
Apache
Internet Information Server (IIS)
Cliente Servidor

8. 8
Modelo Cliente-Servidor
• Cliente Web (web client) à é o programa
responsável para exibição das páginas solicitas pelo
usuário
• Servidor Web (web server) à armazena e permite o
acesso aos dados

9. 9
Clientes Web
• Browser (navegador ou paginador)
• Exemplos:
– Internet Explorer
– Mozilla Firefox
– Opera
– Safari
– Konqueror
– Chrome

10. 10
URL (Uniform Resource Locator)
• Permite que cada documento na Web possua uma
endereço único que indica o nome do arquivo,
diretório, nome do servidor e o protocolo usado para
requisição do documento

11. 11
Exemplo
• http://www.engenharia.uem.mz/images/stories/
pdf_files/plano_informatica.pdf
• Onde:
http:// à protocolo usado
www.engenharia.uem.mz à nome do servidor
images/stories/pdf_files à diretório dentro do servidor
plano_informatica.pdf à nome do arquivo solicitado

12. 12
Protocolos
• file: um arquivo no PC local
• ftp: um arquivo em um servidor FTP
• http: um arquivo em WWW
• gopher: um arquivo em um servidor Gopher
• mailto: um email em um servidor de Emails
• news: um Newsgroup da UseNet
• telnet: uma conexão Telnet
• wais: um arquivo em um servidor WAIS

13. 13
Site (Web Site) ou Sítio
• Um site WWW é um conjunto de páginas (com uso
de hipertexto) relacionados organizadas
hierarquicamente onde podemos encontrar
informações do um assunto, empresa, etc.

14. 14
Conceitos
• Website: é uma ou mais páginas Web ligadas de
uma forma significativa
• Web server: é o computador real que armazena
o website
• Web pages: são os elementos individuais de um
website, como uma página é para um livro.
• Home page: em termos de publicação web, é o
ponto de entrada ao resto de páginas em um
website (é a página inicial ou mais importante)

15. 15
Protocolos
• HTTP (Hypertext Transport Protocol)
• FTP (File Transfer Protocol)

16. 16
SGML e HTML
SGML (Standard Generalized Markup Language) que é
uma linguagem usada para fazer documentos que
possam ser lidos em diversas plataformas
HTML à é baseada na SGML
Não possui uma estrutura rígida e exata
Define a estrutura da página estabelecendo suas
características

17. 17
Linguagem HTML (Hypertext Markup
Language)
• Define a estrutura de uma página estabelecendo seu
título, texto, listas, subtítulos, localização de imagens,
etc.
• É uma linguagem para criação e manipulação de
textos, imagens e não necessita de grande
conhecimentos teóricos e lógica de programação

18. 18
Linguagem HTML
• A linguagem HTML é transportada pelo protocolo
HTTP (HyperText Transfer Protocol) ou Protocolo de
Transferência de Hypertexto

19. 19
Linguagem HTML
• Uma página HTML pode ser criada com uso de
qualquer editor de textos porém deve ter a
extensão .html ou .htm

20. 20
Estrutura básica de uma página HTML
<html>
<head>
</head>
<body>
</body>
</html>
Cabeçalho
Corpo
Documento
HTML

21. 21
Exemplo
<html>
<head>
<title>Primeira pagina</title>
</head>
<body>
<p>Primeiro Paragrafo
</body>
</html>

22. 22
Tags e Atributos
Tags (marcações)
Tags são representadas entre os sinais < e > e finalizadas por
</ >
Atributos
são características dos comandos representados
pelas tags. Os atributos podem apresentar
parâmetros
Exemplo:
<INPUT TYPE="text" VALUE=Campinas
NAME=‘cidade’ READONLY>

23. 23
Exemplos de tags
• <h1> ... </h1>
• <br>
• <p>
• <h1 align="center"> ... </h1>
nome do
atributo

24. 24
Exemplos de editores HTML
• Notepad++
• Dreamweaver
• FrontPage
• NVU
• Etc

25. 25
Comentários em HTML
• <!-- [comentário] -->

26. 26
Tags
• <br> à faz a quebra de uma linha
• <p> e </p> à parágrafo
• <tag /> à tag única, sem lista de atributos
• <tag p1=“val1” p2=“val2” /> à tag única, com
lista de valores
• <tag>texto</tag> à par de tags, sem lista de
valores e conteúdo inserido entre elas
• <tag p1=“val1”>texto</tag>à par de tags, sem
lista de valores e conteúdo inserido entre elas

27. 27
Cabeçalhos
Cabeçalhos são definidos com as tags <h1> a
<h6>
<h1> defines o maior cabeçalho enquanto <h6>
define o menor cabeçalho.
• <h1>Este é um cabeçalho</h1>
• <h2>Este é um cabeçalho</h2>
• <h3>Este é um cabeçalho</h3>
• <h4>Este é um cabeçalho</h4>
• <h5>Este é um cabeçalho</h5>
• <h6>Este é um cabeçalho</h6>

28. 28
Formatação de Textos
Dois tipos de formatação:
• Lógica
• Física
A idéia dessa separação é a independência entre
especificação e apresentação

29. 29
Formação Lógica e Física
• A formatação lógica acompanha o significado lógico
do texto marcado. Sua apresentação varia em
função do navegador usado podendo oferecer
resultados distintos
• A formatação física especifica explicitamente o estilo
que se quer o texto, como letras em itálico, negrito,
sublinhado, etc.

30. 30
Tag <font>
Atributos:
size à tamanho da fonte
color àdefine a cor da fonte do texto
face à é o nome da fonte que a tag vai apresentar

31. 31
Atributos
Atributo Exemplo Proposta
size="número" size="2" Define o tamanho da fonte
size="+número " size="+1" Aumenta o tamanho da fonte
size="-número " size="-1" Diminui o tamanho da fonte
face="nome-da-face" face="Times" Define o nome da fonte
color="valor-da-cor" color="#eeff00" Define a cor da fonte
color="nome-da-cor" color="red" Define a cor da fonte

32. 32
Padrões de Cores
• Padrão de cores RGB (Red, Green, Blue)
• Padrão de cores CMYK (Cyan, Magenta, Yellow,
Black)

33. 33
Algumas cores nomeadas
Black Marron Green Navy
Sliver Red Lime Blue
Gray Puple Olive Teal
White Fuchsia Yellow Aqua

34. 34
Tags de estilos físicos
• <b> (bold) negrito
• <i> (italic) itálico
• <tt> fonte de máquina de escrever (monoespaçada)
• <u> (underline) sublinhado
• <s> (strikethrough)

35. 35
Parágrafo
• Tag <p>
• <p align="[left|right|center|justify]"> [texto] </
p>
– left – seleciona alinhamento a esquerda
– right – seleciona alinhamento a direita
– center – seleciona alinhamento ao centro
– justify – justifica o texto do parágrafo
• Exemplo
<p>Primeiro parágrafo</p>

36. 36
Linha Horizontal
• As linhas horizontais podem ser usadas para separar
visualmente seções de uma página da web.
• Em HTML a separação é realizada por meio da tag
<hr>
• Exemplo:
<hr size="5" width="50%" align="center" noshade>

37. FIM!!!
Duvidas e Questões?