SlideShare uma empresa Scribd logo
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	
  
Conteúdo da Aula
1. Conceitos basicos;
2. Introdução ao HTML
4/17/14 Apresentado por Ruben Manhiça 2
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
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
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
Serviços básicos da Internet
• E-mail: correio eletrônico
• FTP: transferência de arquivos
• WWW: comunicação por meio de hipertexto
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
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
Clientes Web
• Browser (navegador ou paginador)
• Exemplos:
– Internet Explorer
– Mozilla Firefox
– Opera
– Safari
– Konqueror
– Chrome
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
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
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
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
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
Protocolos
• HTTP (Hypertext Transport Protocol)
• FTP (File Transfer Protocol)
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
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
Linguagem HTML
• A linguagem HTML é transportada pelo protocolo
HTTP (HyperText Transfer Protocol) ou Protocolo de
Transferência de Hypertexto
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
Estrutura básica de uma página HTML
<html>
<head>
</head>
<body>
</body>
</html>
Cabeçalho	
  
Corpo	
  
Documento	
  HTML	
  
21
Exemplo
<html>
<head>
<title>Primeira pagina</title>
</head>
<body>
<p>Primeiro Paragrafo
</body>
</html>
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
Exemplos de tags
• <h1> ... </h1>
• <br>
• <p>
• <h1 align="center"> ... </h1>
nome do
atributo
24
Exemplos de editores HTML
• Notepad++
• Dreamweaver
• FrontPage
• NVU
• Etc
25
Comentários em HTML
• <!-- [comentário] -->
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
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
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
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
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
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
Padrões de Cores
• Padrão de cores RGB (Red, Green, Blue)
• Padrão de cores CMYK (Cyan, Magenta, Yellow,
Black)
33
Algumas cores nomeadas
Black Marron Green Navy
Sliver Red Lime Blue
Gray Puple Olive Teal
White Fuchsia Yellow Aqua
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
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
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>
FIM!!!
Duvidas e Questões?

Mais conteúdo relacionado

Semelhante a 0. Introdução ao HTML pptx.pdf

AULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxAULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptx
JEANCLEVERSONPRATAS
 
Curso de html básico
Curso de html básicoCurso de html básico
Curso de html básico
higson
 
Sobre o HTML
Sobre o HTMLSobre o HTML
Sobre o HTML
Diego Curumim
 
DESENVOLVIMENTO DE APLICAÇÕES WEB
DESENVOLVIMENTO DE APLICAÇÕES WEBDESENVOLVIMENTO DE APLICAÇÕES WEB
DESENVOLVIMENTO DE APLICAÇÕES WEB
Patrick Monteiro
 
Slides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSSSlides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSS
fernandamota929941
 
Cliente Servidor
Cliente ServidorCliente Servidor
Cliente Servidor
LuisFernandodosSanto16
 
Aula1web html
Aula1web htmlAula1web html
Aula1web html
blackbanks
 
TÓPICOS AVANÇADOS EMENG. DE COMPUTAÇÃO II 2 semana.pdf
TÓPICOS AVANÇADOS EMENG. DE COMPUTAÇÃO II 2 semana.pdfTÓPICOS AVANÇADOS EMENG. DE COMPUTAÇÃO II 2 semana.pdf
TÓPICOS AVANÇADOS EMENG. DE COMPUTAÇÃO II 2 semana.pdf
Leandrovilela19
 
Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTML
Tales Augusto
 
Aplicativo aula04
Aplicativo aula04Aplicativo aula04
Aplicativo aula04
Cláudio Amaral
 
Ferramentas Web 2.0
Ferramentas Web 2.0Ferramentas Web 2.0
Ferramentas Web 2.0
Silvia Pereira
 
Ferramentas Web 2.0
Ferramentas Web 2.0Ferramentas Web 2.0
Ferramentas Web 2.0
Silvia Pereira
 
Disciplina de Laboratório WEB
Disciplina de Laboratório WEBDisciplina de Laboratório WEB
Disciplina de Laboratório WEB
Franciosney Souza
 
Slides .pptx.pdf
Slides .pptx.pdfSlides .pptx.pdf
Slides .pptx.pdf
ssuser546d49
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Luiz Antonio
 
Curso html basico_aula-001
Curso html basico_aula-001Curso html basico_aula-001
Curso html basico_aula-001
EEM Dr. Romão Sampaio
 
HTML HardCore Parte 1 - Conceitos
HTML HardCore Parte 1 - ConceitosHTML HardCore Parte 1 - Conceitos
HTML HardCore Parte 1 - Conceitos
George Mendonça
 
Apostila html2
Apostila html2Apostila html2
Apostila html2
Marcio Chiaveli
 
html basico primeiro slide para iniciantes- 1.pptx
html basico primeiro slide para iniciantes- 1.pptxhtml basico primeiro slide para iniciantes- 1.pptx
html basico primeiro slide para iniciantes- 1.pptx
LeonardoPaz31
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
Léo Dias
 

Semelhante a 0. Introdução ao HTML pptx.pdf (20)

AULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxAULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptx
 
Curso de html básico
Curso de html básicoCurso de html básico
Curso de html básico
 
Sobre o HTML
Sobre o HTMLSobre o HTML
Sobre o HTML
 
DESENVOLVIMENTO DE APLICAÇÕES WEB
DESENVOLVIMENTO DE APLICAÇÕES WEBDESENVOLVIMENTO DE APLICAÇÕES WEB
DESENVOLVIMENTO DE APLICAÇÕES WEB
 
Slides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSSSlides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSS
 
Cliente Servidor
Cliente ServidorCliente Servidor
Cliente Servidor
 
Aula1web html
Aula1web htmlAula1web html
Aula1web html
 
TÓPICOS AVANÇADOS EMENG. DE COMPUTAÇÃO II 2 semana.pdf
TÓPICOS AVANÇADOS EMENG. DE COMPUTAÇÃO II 2 semana.pdfTÓPICOS AVANÇADOS EMENG. DE COMPUTAÇÃO II 2 semana.pdf
TÓPICOS AVANÇADOS EMENG. DE COMPUTAÇÃO II 2 semana.pdf
 
Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTML
 
Aplicativo aula04
Aplicativo aula04Aplicativo aula04
Aplicativo aula04
 
Ferramentas Web 2.0
Ferramentas Web 2.0Ferramentas Web 2.0
Ferramentas Web 2.0
 
Ferramentas Web 2.0
Ferramentas Web 2.0Ferramentas Web 2.0
Ferramentas Web 2.0
 
Disciplina de Laboratório WEB
Disciplina de Laboratório WEBDisciplina de Laboratório WEB
Disciplina de Laboratório WEB
 
Slides .pptx.pdf
Slides .pptx.pdfSlides .pptx.pdf
Slides .pptx.pdf
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 
Curso html basico_aula-001
Curso html basico_aula-001Curso html basico_aula-001
Curso html basico_aula-001
 
HTML HardCore Parte 1 - Conceitos
HTML HardCore Parte 1 - ConceitosHTML HardCore Parte 1 - Conceitos
HTML HardCore Parte 1 - Conceitos
 
Apostila html2
Apostila html2Apostila html2
Apostila html2
 
html basico primeiro slide para iniciantes- 1.pptx
html basico primeiro slide para iniciantes- 1.pptxhtml basico primeiro slide para iniciantes- 1.pptx
html basico primeiro slide para iniciantes- 1.pptx
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
 

Mais de RubenManhia

4. Introdução ao PHP.pdf
4. Introdução ao PHP.pdf4. Introdução ao PHP.pdf
4. Introdução ao PHP.pdf
RubenManhia
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf
RubenManhia
 
2. Introdução a Logica Matematica.pdf
2. Introdução a Logica Matematica.pdf2. Introdução a Logica Matematica.pdf
2. Introdução a Logica Matematica.pdf
RubenManhia
 
Introdução ao Java_14Agosto2012.pdf
Introdução ao Java_14Agosto2012.pdfIntrodução ao Java_14Agosto2012.pdf
Introdução ao Java_14Agosto2012.pdf
RubenManhia
 
23-08-12-Operadores em Java e Leitura de dados por Teclado.pdf
23-08-12-Operadores em Java e Leitura de dados por Teclado.pdf23-08-12-Operadores em Java e Leitura de dados por Teclado.pdf
23-08-12-Operadores em Java e Leitura de dados por Teclado.pdf
RubenManhia
 
21-08-12-Introdução a Programação em Java.pdf
21-08-12-Introdução a Programação em Java.pdf21-08-12-Introdução a Programação em Java.pdf
21-08-12-Introdução a Programação em Java.pdf
RubenManhia
 
SI-BiblioRef.pdf
SI-BiblioRef.pdfSI-BiblioRef.pdf
SI-BiblioRef.pdf
RubenManhia
 

Mais de RubenManhia (7)

4. Introdução ao PHP.pdf
4. Introdução ao PHP.pdf4. Introdução ao PHP.pdf
4. Introdução ao PHP.pdf
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf
 
2. Introdução a Logica Matematica.pdf
2. Introdução a Logica Matematica.pdf2. Introdução a Logica Matematica.pdf
2. Introdução a Logica Matematica.pdf
 
Introdução ao Java_14Agosto2012.pdf
Introdução ao Java_14Agosto2012.pdfIntrodução ao Java_14Agosto2012.pdf
Introdução ao Java_14Agosto2012.pdf
 
23-08-12-Operadores em Java e Leitura de dados por Teclado.pdf
23-08-12-Operadores em Java e Leitura de dados por Teclado.pdf23-08-12-Operadores em Java e Leitura de dados por Teclado.pdf
23-08-12-Operadores em Java e Leitura de dados por Teclado.pdf
 
21-08-12-Introdução a Programação em Java.pdf
21-08-12-Introdução a Programação em Java.pdf21-08-12-Introdução a Programação em Java.pdf
21-08-12-Introdução a Programação em Java.pdf
 
SI-BiblioRef.pdf
SI-BiblioRef.pdfSI-BiblioRef.pdf
SI-BiblioRef.pdf
 

Último

OS elementos de uma boa Redação para o ENEM.pdf
OS elementos de uma boa Redação para o ENEM.pdfOS elementos de uma boa Redação para o ENEM.pdf
OS elementos de uma boa Redação para o ENEM.pdf
AmiltonAparecido1
 
Reino-Vegetal plantas e demais conceitos .pptx
Reino-Vegetal plantas e demais conceitos .pptxReino-Vegetal plantas e demais conceitos .pptx
Reino-Vegetal plantas e demais conceitos .pptx
CarinaSantos916505
 
UFCD_4667_Preparação e confeção de molhos e fundos de cozinha_índice.pdf
UFCD_4667_Preparação e confeção de molhos e fundos de cozinha_índice.pdfUFCD_4667_Preparação e confeção de molhos e fundos de cozinha_índice.pdf
UFCD_4667_Preparação e confeção de molhos e fundos de cozinha_índice.pdf
Manuais Formação
 
Educação trabalho HQ em sala de aula uma excelente ideia
Educação  trabalho HQ em sala de aula uma excelente  ideiaEducação  trabalho HQ em sala de aula uma excelente  ideia
Educação trabalho HQ em sala de aula uma excelente ideia
joseanesouza36
 
D20 - Descritores SAEB de Língua Portuguesa
D20 - Descritores SAEB de Língua PortuguesaD20 - Descritores SAEB de Língua Portuguesa
D20 - Descritores SAEB de Língua Portuguesa
eaiprofpolly
 
Fernão Lopes. pptx
Fernão Lopes.                       pptxFernão Lopes.                       pptx
Fernão Lopes. pptx
TomasSousa7
 
UFCD_10145_Enquadramento do setor farmacêutico_indice.pdf
UFCD_10145_Enquadramento do setor farmacêutico_indice.pdfUFCD_10145_Enquadramento do setor farmacêutico_indice.pdf
UFCD_10145_Enquadramento do setor farmacêutico_indice.pdf
Manuais Formação
 
Leonardo da Vinci .pptx
Leonardo da Vinci                  .pptxLeonardo da Vinci                  .pptx
Leonardo da Vinci .pptx
TomasSousa7
 
PP Slides Lição 11, Betel, Ordenança para exercer a fé, 2Tr24.pptx
PP Slides Lição 11, Betel, Ordenança para exercer a fé, 2Tr24.pptxPP Slides Lição 11, Betel, Ordenança para exercer a fé, 2Tr24.pptx
PP Slides Lição 11, Betel, Ordenança para exercer a fé, 2Tr24.pptx
LuizHenriquedeAlmeid6
 
UFCD_3546_Prevenção e primeiros socorros_geriatria.pdf
UFCD_3546_Prevenção e primeiros socorros_geriatria.pdfUFCD_3546_Prevenção e primeiros socorros_geriatria.pdf
UFCD_3546_Prevenção e primeiros socorros_geriatria.pdf
Manuais Formação
 
Slide de biologia aula2 2 bimestre no ano de 2024
Slide de biologia aula2  2 bimestre no ano de 2024Slide de biologia aula2  2 bimestre no ano de 2024
Slide de biologia aula2 2 bimestre no ano de 2024
vinibolado86
 
AULA-001---AS-CELULAS_5546dad041b949bbb7b1f0fa841a6d1f.pdf
AULA-001---AS-CELULAS_5546dad041b949bbb7b1f0fa841a6d1f.pdfAULA-001---AS-CELULAS_5546dad041b949bbb7b1f0fa841a6d1f.pdf
AULA-001---AS-CELULAS_5546dad041b949bbb7b1f0fa841a6d1f.pdf
SthafaniHussin1
 
A QUESTÃO ANTROPOLÓGICA: O QUE SOMOS OU QUEM SOMOS.pdf
A QUESTÃO ANTROPOLÓGICA: O QUE SOMOS OU QUEM SOMOS.pdfA QUESTÃO ANTROPOLÓGICA: O QUE SOMOS OU QUEM SOMOS.pdf
A QUESTÃO ANTROPOLÓGICA: O QUE SOMOS OU QUEM SOMOS.pdf
AurelianoFerreirades2
 
JOGO DA VELHA FESTA JUNINA - ARQUIVO GRATUITO.pdf
JOGO DA VELHA FESTA JUNINA - ARQUIVO GRATUITO.pdfJOGO DA VELHA FESTA JUNINA - ARQUIVO GRATUITO.pdf
JOGO DA VELHA FESTA JUNINA - ARQUIVO GRATUITO.pdf
ClaudiaMainoth
 
TUTORIAL PARA LANÇAMENTOGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
TUTORIAL PARA LANÇAMENTOGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGTUTORIAL PARA LANÇAMENTOGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
TUTORIAL PARA LANÇAMENTOGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
ProfessoraTatianaT
 
497417426-conheca-os-principais-graficos-da-radiestesia-e-da-radionica.pdf
497417426-conheca-os-principais-graficos-da-radiestesia-e-da-radionica.pdf497417426-conheca-os-principais-graficos-da-radiestesia-e-da-radionica.pdf
497417426-conheca-os-principais-graficos-da-radiestesia-e-da-radionica.pdf
JoanaFigueira11
 
Atividade de reforço de matemática 2º ano
Atividade de reforço de matemática 2º anoAtividade de reforço de matemática 2º ano
Atividade de reforço de matemática 2º ano
fernandacosta37763
 
slides de Didática 2.pdf para apresentar
slides de Didática 2.pdf para apresentarslides de Didática 2.pdf para apresentar
slides de Didática 2.pdf para apresentar
JoeteCarvalho
 
Introdução à Sociologia: caça-palavras na escola
Introdução à Sociologia: caça-palavras na escolaIntrodução à Sociologia: caça-palavras na escola
Introdução à Sociologia: caça-palavras na escola
Professor Belinaso
 
Dicas de normas ABNT para trabalho de conclusão de curso
Dicas de normas ABNT para trabalho de conclusão de cursoDicas de normas ABNT para trabalho de conclusão de curso
Dicas de normas ABNT para trabalho de conclusão de curso
Simone399395
 

Último (20)

OS elementos de uma boa Redação para o ENEM.pdf
OS elementos de uma boa Redação para o ENEM.pdfOS elementos de uma boa Redação para o ENEM.pdf
OS elementos de uma boa Redação para o ENEM.pdf
 
Reino-Vegetal plantas e demais conceitos .pptx
Reino-Vegetal plantas e demais conceitos .pptxReino-Vegetal plantas e demais conceitos .pptx
Reino-Vegetal plantas e demais conceitos .pptx
 
UFCD_4667_Preparação e confeção de molhos e fundos de cozinha_índice.pdf
UFCD_4667_Preparação e confeção de molhos e fundos de cozinha_índice.pdfUFCD_4667_Preparação e confeção de molhos e fundos de cozinha_índice.pdf
UFCD_4667_Preparação e confeção de molhos e fundos de cozinha_índice.pdf
 
Educação trabalho HQ em sala de aula uma excelente ideia
Educação  trabalho HQ em sala de aula uma excelente  ideiaEducação  trabalho HQ em sala de aula uma excelente  ideia
Educação trabalho HQ em sala de aula uma excelente ideia
 
D20 - Descritores SAEB de Língua Portuguesa
D20 - Descritores SAEB de Língua PortuguesaD20 - Descritores SAEB de Língua Portuguesa
D20 - Descritores SAEB de Língua Portuguesa
 
Fernão Lopes. pptx
Fernão Lopes.                       pptxFernão Lopes.                       pptx
Fernão Lopes. pptx
 
UFCD_10145_Enquadramento do setor farmacêutico_indice.pdf
UFCD_10145_Enquadramento do setor farmacêutico_indice.pdfUFCD_10145_Enquadramento do setor farmacêutico_indice.pdf
UFCD_10145_Enquadramento do setor farmacêutico_indice.pdf
 
Leonardo da Vinci .pptx
Leonardo da Vinci                  .pptxLeonardo da Vinci                  .pptx
Leonardo da Vinci .pptx
 
PP Slides Lição 11, Betel, Ordenança para exercer a fé, 2Tr24.pptx
PP Slides Lição 11, Betel, Ordenança para exercer a fé, 2Tr24.pptxPP Slides Lição 11, Betel, Ordenança para exercer a fé, 2Tr24.pptx
PP Slides Lição 11, Betel, Ordenança para exercer a fé, 2Tr24.pptx
 
UFCD_3546_Prevenção e primeiros socorros_geriatria.pdf
UFCD_3546_Prevenção e primeiros socorros_geriatria.pdfUFCD_3546_Prevenção e primeiros socorros_geriatria.pdf
UFCD_3546_Prevenção e primeiros socorros_geriatria.pdf
 
Slide de biologia aula2 2 bimestre no ano de 2024
Slide de biologia aula2  2 bimestre no ano de 2024Slide de biologia aula2  2 bimestre no ano de 2024
Slide de biologia aula2 2 bimestre no ano de 2024
 
AULA-001---AS-CELULAS_5546dad041b949bbb7b1f0fa841a6d1f.pdf
AULA-001---AS-CELULAS_5546dad041b949bbb7b1f0fa841a6d1f.pdfAULA-001---AS-CELULAS_5546dad041b949bbb7b1f0fa841a6d1f.pdf
AULA-001---AS-CELULAS_5546dad041b949bbb7b1f0fa841a6d1f.pdf
 
A QUESTÃO ANTROPOLÓGICA: O QUE SOMOS OU QUEM SOMOS.pdf
A QUESTÃO ANTROPOLÓGICA: O QUE SOMOS OU QUEM SOMOS.pdfA QUESTÃO ANTROPOLÓGICA: O QUE SOMOS OU QUEM SOMOS.pdf
A QUESTÃO ANTROPOLÓGICA: O QUE SOMOS OU QUEM SOMOS.pdf
 
JOGO DA VELHA FESTA JUNINA - ARQUIVO GRATUITO.pdf
JOGO DA VELHA FESTA JUNINA - ARQUIVO GRATUITO.pdfJOGO DA VELHA FESTA JUNINA - ARQUIVO GRATUITO.pdf
JOGO DA VELHA FESTA JUNINA - ARQUIVO GRATUITO.pdf
 
TUTORIAL PARA LANÇAMENTOGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
TUTORIAL PARA LANÇAMENTOGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGTUTORIAL PARA LANÇAMENTOGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
TUTORIAL PARA LANÇAMENTOGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
 
497417426-conheca-os-principais-graficos-da-radiestesia-e-da-radionica.pdf
497417426-conheca-os-principais-graficos-da-radiestesia-e-da-radionica.pdf497417426-conheca-os-principais-graficos-da-radiestesia-e-da-radionica.pdf
497417426-conheca-os-principais-graficos-da-radiestesia-e-da-radionica.pdf
 
Atividade de reforço de matemática 2º ano
Atividade de reforço de matemática 2º anoAtividade de reforço de matemática 2º ano
Atividade de reforço de matemática 2º ano
 
slides de Didática 2.pdf para apresentar
slides de Didática 2.pdf para apresentarslides de Didática 2.pdf para apresentar
slides de Didática 2.pdf para apresentar
 
Introdução à Sociologia: caça-palavras na escola
Introdução à Sociologia: caça-palavras na escolaIntrodução à Sociologia: caça-palavras na escola
Introdução à Sociologia: caça-palavras na escola
 
Dicas de normas ABNT para trabalho de conclusão de curso
Dicas de normas ABNT para trabalho de conclusão de cursoDicas de normas ABNT para trabalho de conclusão de curso
Dicas de normas ABNT para trabalho de conclusão de curso
 

0. Introdução ao HTML pptx.pdf

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