Slides Lição 04, Central Gospel, O Tribunal De Cristo, 1Tr24.pptx
Introdução HTML para programação web e SGC
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
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)
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
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
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)
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>
