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
Turma: 9330
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

Email mkt e html: Introdução
Email mkt e html: IntroduçãoEmail mkt e html: Introdução
Email mkt e html: IntroduçãoRenato Melo
 
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
 
Configurando SSL com Let’s Encrypt, Easy Engine e WP-CLI
Configurando SSL com Let’s Encrypt, Easy Engine e WP-CLIConfigurando SSL com Let’s Encrypt, Easy Engine e WP-CLI
Configurando SSL com Let’s Encrypt, Easy Engine e WP-CLIRafael Funchal
 
WordCamp Floripa 2018: Configurando SSL com Let’s Encrypt, Easy Engine e WP-CLI
WordCamp Floripa 2018: Configurando SSL com Let’s Encrypt, Easy Engine e WP-CLIWordCamp Floripa 2018: Configurando SSL com Let’s Encrypt, Easy Engine e WP-CLI
WordCamp Floripa 2018: Configurando SSL com Let’s Encrypt, Easy Engine e WP-CLIRafael Funchal
 
Rafael Funchal - Configurando SSL com Let’s Encrypt, EasyEngine e WP-CLI
Rafael Funchal - Configurando SSL com Let’s Encrypt, EasyEngine e WP-CLIRafael Funchal - Configurando SSL com Let’s Encrypt, EasyEngine e WP-CLI
Rafael Funchal - Configurando SSL com Let’s Encrypt, EasyEngine e WP-CLIWordPress Floripa
 
Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.
Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.
Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.Leonardo Soares
 
Kerberos ticket renewal on mac os mountain lion
Kerberos ticket renewal on mac os mountain lionKerberos ticket renewal on mac os mountain lion
Kerberos ticket renewal on mac os mountain lionCarlos Costa
 
Como fazer uma bela limpeza de arquivos no pc
Como fazer uma bela limpeza de arquivos no pcComo fazer uma bela limpeza de arquivos no pc
Como fazer uma bela limpeza de arquivos no pcVanderlei Nascimento
 
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
 
Publicando na nuvem
Publicando na nuvemPublicando na nuvem
Publicando na nuvemindiqueazure
 
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
 
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
 
Css no webdesign
Css no webdesignCss no webdesign
Css no webdesignRenato Melo
 

Mais procurados (18)

Email mkt e html: Introdução
Email mkt e html: IntroduçãoEmail mkt e html: Introdução
Email mkt e html: Introdução
 
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
 
Configurando SSL com Let’s Encrypt, Easy Engine e WP-CLI
Configurando SSL com Let’s Encrypt, Easy Engine e WP-CLIConfigurando SSL com Let’s Encrypt, Easy Engine e WP-CLI
Configurando SSL com Let’s Encrypt, Easy Engine e WP-CLI
 
WordCamp Floripa 2018: Configurando SSL com Let’s Encrypt, Easy Engine e WP-CLI
WordCamp Floripa 2018: Configurando SSL com Let’s Encrypt, Easy Engine e WP-CLIWordCamp Floripa 2018: Configurando SSL com Let’s Encrypt, Easy Engine e WP-CLI
WordCamp Floripa 2018: Configurando SSL com Let’s Encrypt, Easy Engine e WP-CLI
 
Rafael Funchal - Configurando SSL com Let’s Encrypt, EasyEngine e WP-CLI
Rafael Funchal - Configurando SSL com Let’s Encrypt, EasyEngine e WP-CLIRafael Funchal - Configurando SSL com Let’s Encrypt, EasyEngine e WP-CLI
Rafael Funchal - Configurando SSL com Let’s Encrypt, EasyEngine e WP-CLI
 
Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.
Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.
Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.
 
Kerberos ticket renewal on mac os mountain lion
Kerberos ticket renewal on mac os mountain lionKerberos ticket renewal on mac os mountain lion
Kerberos ticket renewal on mac os mountain lion
 
Como fazer uma bela limpeza de arquivos no pc
Como fazer uma bela limpeza de arquivos no pcComo fazer uma bela limpeza de arquivos no pc
Como fazer uma bela limpeza de arquivos no pc
 
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...
 
Publicando na nuvem
Publicando na nuvemPublicando na nuvem
Publicando na nuvem
 
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
 
Instalar Ocomon Ubuntu 2
Instalar Ocomon Ubuntu 2Instalar Ocomon Ubuntu 2
Instalar Ocomon Ubuntu 2
 
Aula 5 - Cookies e sessões em PHP
Aula 5 - Cookies e sessões em PHPAula 5 - Cookies e sessões em PHP
Aula 5 - Cookies e sessões em PHP
 
Aula 5 - Cookies e Sessões em PHP
Aula 5 - Cookies e Sessões em PHPAula 5 - Cookies e Sessões em PHP
Aula 5 - Cookies e Sessões em PHP
 
Aula 5 php
Aula 5 phpAula 5 php
Aula 5 php
 
5098 html
5098 html5098 html
5098 html
 
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
 
Css no webdesign
Css no webdesignCss no webdesign
Css no webdesign
 

Destaque

Destaque (7)

November 14 class
November 14 classNovember 14 class
November 14 class
 
Grupos primarios
Grupos primariosGrupos primarios
Grupos primarios
 
Final_Report of MTR of CDMP 2013
Final_Report of MTR of CDMP 2013Final_Report of MTR of CDMP 2013
Final_Report of MTR of CDMP 2013
 
Biblioteca, dinamizadora do traballo por proxectos
Biblioteca, dinamizadora do traballo por proxectosBiblioteca, dinamizadora do traballo por proxectos
Biblioteca, dinamizadora do traballo por proxectos
 
Saint-Seb' Le mag 134 mai-juin 2015
Saint-Seb' Le mag 134 mai-juin 2015Saint-Seb' Le mag 134 mai-juin 2015
Saint-Seb' Le mag 134 mai-juin 2015
 
Immunostimulation in aquatic animals
Immunostimulation in aquatic animalsImmunostimulation in aquatic animals
Immunostimulation in aquatic animals
 
Extreme Peanuts extreme sports
Extreme Peanuts extreme sports Extreme Peanuts extreme sports
Extreme Peanuts extreme sports
 

Semelhante a Construindo meu primeiro site HTML

Semelhante a Construindo meu primeiro site HTML (20)

Sistemas operacionais (extra)
Sistemas operacionais (extra)Sistemas operacionais (extra)
Sistemas operacionais (extra)
 
5098 html
5098 html5098 html
5098 html
 
HTML (A linguagem)
HTML (A linguagem)HTML (A linguagem)
HTML (A linguagem)
 
Curso html
Curso htmlCurso html
Curso html
 
[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
 
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
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Html manual
Html manualHtml manual
Html manual
 
Apostila+de+html
Apostila+de+htmlApostila+de+html
Apostila+de+html
 
Apostila HTML
Apostila HTMLApostila HTML
Apostila HTML
 
Webpages
WebpagesWebpages
Webpages
 
Webpages
WebpagesWebpages
Webpages
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
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
 
Html - Apostila
Html - ApostilaHtml - Apostila
Html - Apostila
 
Apostila Html completa e simples
Apostila Html completa e simplesApostila Html completa e simples
Apostila Html completa e simples
 
A87c5f081429cf
A87c5f081429cfA87c5f081429cf
A87c5f081429cf
 

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 meu primeiro site HTML

  • 1. Ambiente Web Aula Extra – HTML Professor: Anderson Henrique Como funciona a Construção de Sites Simples Parte I Turma: 9330
  • 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;