SlideShare uma empresa Scribd logo
1 de 12
Ambiente Web
Aula Extra – HTML
Professor: Anderson Henrique
Como funciona a Construção de Sites
Simples

Parte I
O que vamos aprender:


Utilizando a Linguagem HTML



Construindo nosso Primeiro Site



TAGS Principais



Salvando Documento e Visualizando



Formatações Simples
HTML



A linguagem de Marcação de Hipertexto é utilizada na construção
de websites;



A Sintaxe é simples, os comandos são identificados pelos sinais de
“< >”, podem ser fechados quando usamos “</ >”.



Vamos praticar abrindo o “Notepad”, Bloco de Notas;
Construindo nosso primeiro
site
Abra o bloco de notas, Menu Iniciar no campo pesquisar
digite “Notepad”, execute o programa
<HTML> Este comando inicia nosso documento html
<HEAD>

Este comando inicia o cabeçalho do site

<TITLE> Este comando inicia o título do site
Aqui você digita o título do site
</TITLE> Este comando fecha o título do site
</HEAD> Este comando fecha o cabeçalho do site
<BODY> Este comando inicia o corpo do site

Aqui você insere todo o conteúdo do site, tudo o que
for inserido aqui aparecerá no navegador
</BODY> Este comando fecha o corpo do site
</HTML> Este comando fecha nosso documento html
Salvando e Visualizando
Após digitar esses códigos, vá no menu “Arquivo”,
selecione a opção “Salvar Como...”
Após abrir essa caixa de
diálogo, escolha o local
onde deseja salvar o
documento, e nomeie o
documento com
“index.html”, de
preferência o salve em
uma pasta com o seu
nome.

Index.html
Meu exemplo
Página será visualizada
assim
Comando TITLE
Comando BODY
Formatação Simples
<BR> - QUEBRA DE LINHA
<P> - PARÁGRAFO
<HR> - LINHA NA HORIZONTAL
<B> - NEGRITO
<U> - SUBLINHADO
<I> - ITÁLICO

<FONT SIZE> - TAMANHO DA FONTE
<FONT COLOR> - COR DA FONTE
<FONT FACE> - TIPO DE FONTE
Atividade


Construir um site simples utilizando a linguagem HTML
falando sobre tecnologia (tema livre);



Salvar este site, sentando em dupla deve conter
informações sobre os 02 alunos;

Mais conteúdo relacionado

Mais procurados

Publicando na nuvem
Publicando na nuvemPublicando na nuvem
Publicando na nuvemindiqueazure
 
Criando rsumo expansivel automático para blog
Criando rsumo expansivel automático para blogCriando rsumo expansivel automático para blog
Criando rsumo expansivel automático para blogMarilucia Santos
 
Como bloquear portas de redes no windows
Como bloquear portas de redes no windows Como bloquear portas de redes no windows
Como bloquear portas de redes no windows Atos Silva
 
Como remover portais de sites como o qvo6, hao123, v9, ask, entre outros da s...
Como remover portais de sites como o qvo6, hao123, v9, ask, entre outros da s...Como remover portais de sites como o qvo6, hao123, v9, ask, entre outros da s...
Como remover portais de sites como o qvo6, hao123, v9, ask, entre outros da s...Pedro Domacena
 
Rui simoes pedrosantos
Rui simoes pedrosantosRui simoes pedrosantos
Rui simoes pedrosantosRui Simoes
 
Como retirar o site hao123 da página inicial do navegador
Como retirar o site hao123 da página inicial do navegadorComo retirar o site hao123 da página inicial do navegador
Como retirar o site hao123 da página inicial do navegadorKelly Schuvaizerski
 
Criando Blog Ste
Criando Blog SteCriando Blog Ste
Criando Blog Stentetlcursos
 
Html para e-mail marketing - Aula 02 - Webdesign - 2020-01
Html para e-mail marketing - Aula 02 - Webdesign - 2020-01Html para e-mail marketing - Aula 02 - Webdesign - 2020-01
Html para e-mail marketing - Aula 02 - Webdesign - 2020-01Renato Melo
 
Configuração Outlook Express
Configuração Outlook ExpressConfiguração Outlook Express
Configuração Outlook ExpressPicture Corp
 
Como criar a sua Conta Master na WCM777
Como criar a sua Conta Master na WCM777Como criar a sua Conta Master na WCM777
Como criar a sua Conta Master na WCM777Dinho Garcia
 
HTML - Webdesign - 2021-01
HTML - Webdesign - 2021-01HTML - Webdesign - 2021-01
HTML - Webdesign - 2021-01Renato Melo
 
Introdução à informática
Introdução à informáticaIntrodução à informática
Introdução à informáticaDaniel Brandão
 
Html - Iniciando a programação - Webdesign 2019-02 - Aula 2
Html - Iniciando a programação - Webdesign 2019-02 - Aula 2Html - Iniciando a programação - Webdesign 2019-02 - Aula 2
Html - Iniciando a programação - Webdesign 2019-02 - Aula 2Renato Melo
 

Mais procurados (19)

Publicando na nuvem
Publicando na nuvemPublicando na nuvem
Publicando na nuvem
 
Criando rsumo expansivel automático para blog
Criando rsumo expansivel automático para blogCriando rsumo expansivel automático para blog
Criando rsumo expansivel automático para blog
 
Tutorial Slides
Tutorial  SlidesTutorial  Slides
Tutorial Slides
 
Conhecendo o dreamwevaer CS5.5 - Aula 02
Conhecendo o dreamwevaer CS5.5 - Aula 02Conhecendo o dreamwevaer CS5.5 - Aula 02
Conhecendo o dreamwevaer CS5.5 - Aula 02
 
03874f
03874f03874f
03874f
 
Como criar um Blog
Como criar um BlogComo criar um Blog
Como criar um Blog
 
Como bloquear portas de redes no windows
Como bloquear portas de redes no windows Como bloquear portas de redes no windows
Como bloquear portas de redes no windows
 
Como remover portais de sites como o qvo6, hao123, v9, ask, entre outros da s...
Como remover portais de sites como o qvo6, hao123, v9, ask, entre outros da s...Como remover portais de sites como o qvo6, hao123, v9, ask, entre outros da s...
Como remover portais de sites como o qvo6, hao123, v9, ask, entre outros da s...
 
Rui simoes pedrosantos
Rui simoes pedrosantosRui simoes pedrosantos
Rui simoes pedrosantos
 
Como retirar o site hao123 da página inicial do navegador
Como retirar o site hao123 da página inicial do navegadorComo retirar o site hao123 da página inicial do navegador
Como retirar o site hao123 da página inicial do navegador
 
Criando Blog Ste
Criando Blog SteCriando Blog Ste
Criando Blog Ste
 
Html para e-mail marketing - Aula 02 - Webdesign - 2020-01
Html para e-mail marketing - Aula 02 - Webdesign - 2020-01Html para e-mail marketing - Aula 02 - Webdesign - 2020-01
Html para e-mail marketing - Aula 02 - Webdesign - 2020-01
 
CRIANDO BLOG
CRIANDO BLOGCRIANDO BLOG
CRIANDO BLOG
 
Configuração Outlook Express
Configuração Outlook ExpressConfiguração Outlook Express
Configuração Outlook Express
 
Como criar a sua Conta Master na WCM777
Como criar a sua Conta Master na WCM777Como criar a sua Conta Master na WCM777
Como criar a sua Conta Master na WCM777
 
HTML - Webdesign - 2021-01
HTML - Webdesign - 2021-01HTML - Webdesign - 2021-01
HTML - Webdesign - 2021-01
 
Introdução à informática
Introdução à informáticaIntrodução à informática
Introdução à informática
 
Html - Iniciando a programação - Webdesign 2019-02 - Aula 2
Html - Iniciando a programação - Webdesign 2019-02 - Aula 2Html - Iniciando a programação - Webdesign 2019-02 - Aula 2
Html - Iniciando a programação - Webdesign 2019-02 - Aula 2
 
Manual de configuração do outlook
Manual de configuração do outlookManual de configuração do outlook
Manual de configuração do outlook
 

Destaque

Vírus de computador natan
Vírus de computador   natanVírus de computador   natan
Vírus de computador natanJoel Barbosa
 
A Internet e mudanças no comportamento do consumidor | GOOMARK & GOOGLE
A Internet e mudanças no comportamento do consumidor | GOOMARK & GOOGLEA Internet e mudanças no comportamento do consumidor | GOOMARK & GOOGLE
A Internet e mudanças no comportamento do consumidor | GOOMARK & GOOGLEGoomark
 
Capítulo 5 vírus
Capítulo 5   vírusCapítulo 5   vírus
Capítulo 5 vírusrafaelcef3
 
Virus de computador
Virus de computadorVirus de computador
Virus de computadorvitinhozika
 

Destaque (7)

Vírus de computador natan
Vírus de computador   natanVírus de computador   natan
Vírus de computador natan
 
Dream 11
Dream 11Dream 11
Dream 11
 
Web07
Web07Web07
Web07
 
A Internet e mudanças no comportamento do consumidor | GOOMARK & GOOGLE
A Internet e mudanças no comportamento do consumidor | GOOMARK & GOOGLEA Internet e mudanças no comportamento do consumidor | GOOMARK & GOOGLE
A Internet e mudanças no comportamento do consumidor | GOOMARK & GOOGLE
 
Capítulo 5 vírus
Capítulo 5   vírusCapítulo 5   vírus
Capítulo 5 vírus
 
Aula 3 - Vício em internet
Aula 3 - Vício em internetAula 3 - Vício em internet
Aula 3 - Vício em internet
 
Virus de computador
Virus de computadorVirus de computador
Virus de computador
 

Semelhante a Construindo Primeiro Site HTML

Semelhante a Construindo Primeiro Site HTML (20)

Sistemas operacionais (extra)
Sistemas operacionais (extra)Sistemas operacionais (extra)
Sistemas operacionais (extra)
 
5098 html
5098 html5098 html
5098 html
 
5098 html
5098 html5098 html
5098 html
 
Curso html
Curso htmlCurso html
Curso html
 
HTML (A linguagem)
HTML (A linguagem)HTML (A linguagem)
HTML (A linguagem)
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
2 html,xhtml e css
2   html,xhtml e css2   html,xhtml e css
2 html,xhtml e css
 
Web design
Web designWeb design
Web design
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
[Old] Curso de programação web dia 01
[Old] Curso de programação web dia 01[Old] Curso de programação web dia 01
[Old] Curso de programação web dia 01
 
Html manual
Html manualHtml manual
Html manual
 
Html manual
Html manualHtml manual
Html manual
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Webpages
WebpagesWebpages
Webpages
 
Webpages
WebpagesWebpages
Webpages
 
Aula 02 e 03 estrutura básica parte 01 e 02
Aula 02 e 03 estrutura básica parte 01 e 02Aula 02 e 03 estrutura básica parte 01 e 02
Aula 02 e 03 estrutura básica parte 01 e 02
 
Apostila+de+html
Apostila+de+htmlApostila+de+html
Apostila+de+html
 
Apostila HTML
Apostila HTMLApostila HTML
Apostila HTML
 
Apostila de Html - Marcos Rogério Fernandes
Apostila de Html - Marcos Rogério FernandesApostila de Html - Marcos Rogério Fernandes
Apostila de Html - Marcos Rogério Fernandes
 

Mais de Anderson Henrique (20)

Sistemas operacionais aulas 14 e 15
Sistemas operacionais aulas 14 e 15Sistemas operacionais aulas 14 e 15
Sistemas operacionais aulas 14 e 15
 
Sistemas operacionais aula 13
Sistemas operacionais aula 13Sistemas operacionais aula 13
Sistemas operacionais aula 13
 
Sistemas operacionais aula 12
Sistemas operacionais aula 12Sistemas operacionais aula 12
Sistemas operacionais aula 12
 
Sistemas operacionais aula 11
Sistemas operacionais aula 11Sistemas operacionais aula 11
Sistemas operacionais aula 11
 
Sistemas operacionais aula 10
Sistemas operacionais aula 10Sistemas operacionais aula 10
Sistemas operacionais aula 10
 
Sistemas operacionais aula 09
Sistemas operacionais aula 09Sistemas operacionais aula 09
Sistemas operacionais aula 09
 
Sistemas operacionais Aula 08
Sistemas operacionais Aula 08Sistemas operacionais Aula 08
Sistemas operacionais Aula 08
 
Sistemas operacionais 07
Sistemas operacionais 07Sistemas operacionais 07
Sistemas operacionais 07
 
Sistemas operacionais 06
Sistemas operacionais 06Sistemas operacionais 06
Sistemas operacionais 06
 
Sistemas operacionais 05
Sistemas operacionais 05Sistemas operacionais 05
Sistemas operacionais 05
 
Sistemas operacionais 04
Sistemas operacionais 04Sistemas operacionais 04
Sistemas operacionais 04
 
Sistemas operacionais 03
Sistemas operacionais 03Sistemas operacionais 03
Sistemas operacionais 03
 
Sistemas Cadastro
Sistemas CadastroSistemas Cadastro
Sistemas Cadastro
 
Sistemas operacionais cadastro
Sistemas operacionais cadastroSistemas operacionais cadastro
Sistemas operacionais cadastro
 
Sistemas operacionais 02
Sistemas operacionais 02Sistemas operacionais 02
Sistemas operacionais 02
 
Sistemas operacionais
Sistemas operacionaisSistemas operacionais
Sistemas operacionais
 
Php04
Php04Php04
Php04
 
Php03
Php03Php03
Php03
 
Php02
Php02Php02
Php02
 
Php01
Php01Php01
Php01
 

Construindo Primeiro Site HTML

  • 1. Ambiente Web Aula Extra – HTML Professor: Anderson Henrique Como funciona a Construção de Sites Simples Parte I
  • 2. O que vamos aprender:  Utilizando a Linguagem HTML  Construindo nosso Primeiro Site  TAGS Principais  Salvando Documento e Visualizando  Formatações Simples
  • 3. HTML  A linguagem de Marcação de Hipertexto é utilizada na construção de websites;  A Sintaxe é simples, os comandos são identificados pelos sinais de “< >”, podem ser fechados quando usamos “</ >”.  Vamos praticar abrindo o “Notepad”, Bloco de Notas;
  • 4. Construindo nosso primeiro site Abra o bloco de notas, Menu Iniciar no campo pesquisar digite “Notepad”, execute o programa
  • 5. <HTML> Este comando inicia nosso documento html <HEAD> Este comando inicia o cabeçalho do site <TITLE> Este comando inicia o título do site Aqui você digita o título do site </TITLE> Este comando fecha o título do site </HEAD> Este comando fecha o cabeçalho do site <BODY> Este comando inicia o corpo do site Aqui você insere todo o conteúdo do site, tudo o que for inserido aqui aparecerá no navegador </BODY> Este comando fecha o corpo do site </HTML> Este comando fecha nosso documento html
  • 6. Salvando e Visualizando Após digitar esses códigos, vá no menu “Arquivo”, selecione a opção “Salvar Como...”
  • 7. Após abrir essa caixa de diálogo, escolha o local onde deseja salvar o documento, e nomeie o documento com “index.html”, de preferência o salve em uma pasta com o seu nome. Index.html
  • 9.
  • 11. Formatação Simples <BR> - QUEBRA DE LINHA <P> - PARÁGRAFO <HR> - LINHA NA HORIZONTAL <B> - NEGRITO <U> - SUBLINHADO <I> - ITÁLICO <FONT SIZE> - TAMANHO DA FONTE <FONT COLOR> - COR DA FONTE <FONT FACE> - TIPO DE FONTE
  • 12. Atividade  Construir um site simples utilizando a linguagem HTML falando sobre tecnologia (tema livre);  Salvar este site, sentando em dupla deve conter informações sobre os 02 alunos;