SlideShare uma empresa Scribd logo
1 de 12
Sistemas Operacionais
Aula Extra – HTML
Professor: Anderson Henrique
Como funciona a Construção de Sites Simples
Parte I
Utilizando a Linguagem HTML
Construindo nosso Primeiro Site
TAGS Principais
Salvando Documento e Visualizando
Formatações Simples
O que vamos aprender:
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;
HTML
Abra o bloco de notas, Menu Iniciar no campo pesquisar
digite “Notepad”, execute o programa
Construindo nosso primeiro site
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Este comando inicia nosso documento html
Este comando inicia o cabeçalho do site
Este comando inicia o título do site
Aqui você digita o título do site
Este comando fecha o título do site
Este comando fecha o cabeçalho do site
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
Este comando fecha o corpo do site
Este comando fecha nosso documento html
Após digitar esses códigos, vá no menu
“Arquivo”, selecione a opção “Salvar Como...”
Salvando e Visualizando
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
<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
Formatação Simples
Construir um site simples utilizando a linguagem
HTML falando sobre você, quem é você, o que gosta
de fazer, onde estuda, onde mora, qual a carreira
profissional que você pretende seguir;
Salvar este site, sentando em dupla deve conter
informações sobre os 02 alunos;
Atividade

Mais conteúdo relacionado

Mais procurados (20)

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
 
03874f
03874f03874f
03874f
 
Tuturial Html
Tuturial HtmlTuturial Html
Tuturial Html
 
Tutorial sobre-flogs-12848
Tutorial sobre-flogs-12848Tutorial sobre-flogs-12848
Tutorial sobre-flogs-12848
 
Tutorial Sobre Flogs
Tutorial Sobre FlogsTutorial Sobre Flogs
Tutorial Sobre Flogs
 
Como criar um Blog
Como criar um BlogComo criar um Blog
Como criar um Blog
 
Webdesign 02- HTML
Webdesign 02- HTMLWebdesign 02- HTML
Webdesign 02- HTML
 
Manual de configuração do outlook
Manual de configuração do outlookManual de configuração do outlook
Manual de configuração do outlook
 
Registro Forum
Registro ForumRegistro Forum
Registro Forum
 
Como Criar os Fóruns de Atividades no E-Proinfo
Como Criar os Fóruns de Atividades no E-ProinfoComo Criar os Fóruns de Atividades no E-Proinfo
Como Criar os Fóruns de Atividades no E-Proinfo
 
Introdução à informática
Introdução à informáticaIntrodução à informática
Introdução à informática
 
Criando Blog Ste
Criando Blog SteCriando Blog Ste
Criando Blog Ste
 
Ambiente web aula 02
Ambiente web   aula 02Ambiente web   aula 02
Ambiente web aula 02
 
Webdesign - Hmtl - Aula 01 - 2019-01
Webdesign - Hmtl - Aula 01 - 2019-01Webdesign - Hmtl - Aula 01 - 2019-01
Webdesign - Hmtl - Aula 01 - 2019-01
 
03874g
03874g03874g
03874g
 
Como Configurar E Mail
Como Configurar E MailComo Configurar E Mail
Como Configurar E Mail
 
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 (A linguagem)
HTML (A linguagem)HTML (A linguagem)
HTML (A linguagem)
 
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
 
Css no webdesign
Css no webdesignCss no webdesign
Css no webdesign
 

Destaque

Sistemas operacionais 05
Sistemas operacionais 05Sistemas operacionais 05
Sistemas operacionais 05Anderson Maciel
 
Sistemas operacionais (extra ii)
Sistemas operacionais (extra ii)Sistemas operacionais (extra ii)
Sistemas operacionais (extra ii)Anderson Maciel
 
Sistemas operacionais 06
Sistemas operacionais 06Sistemas operacionais 06
Sistemas operacionais 06Anderson Maciel
 
Social media contests for roi
Social media contests for roiSocial media contests for roi
Social media contests for roi00000000A1
 
1º ano feira do livro
1º ano feira do livro1º ano feira do livro
1º ano feira do livrofranfarujo
 
Manajemen resiko (fix)
Manajemen resiko (fix)Manajemen resiko (fix)
Manajemen resiko (fix)Ikbal Fauzi
 
Digital surya 07 oktober 2013
Digital surya 07 oktober 2013Digital surya 07 oktober 2013
Digital surya 07 oktober 2013Portal Surya
 
Communication final rishil shah
Communication final rishil shahCommunication final rishil shah
Communication final rishil shahRishil Shah
 
Anton azwar ardywinata - j1 f109003
Anton azwar ardywinata - j1 f109003Anton azwar ardywinata - j1 f109003
Anton azwar ardywinata - j1 f109003Notnaa Originally
 
PRENSA ESCOLAR DESPERTAR TABLONERO
PRENSA ESCOLAR DESPERTAR TABLONEROPRENSA ESCOLAR DESPERTAR TABLONERO
PRENSA ESCOLAR DESPERTAR TABLONEROWister Martinez
 
[Jurnal] 07520244086 bisono indra cahya
[Jurnal] 07520244086 bisono indra cahya[Jurnal] 07520244086 bisono indra cahya
[Jurnal] 07520244086 bisono indra cahyaindraf13
 
Home Insurance - a presentation by Richard Strauss Insurance Brokers
Home Insurance - a presentation by Richard Strauss Insurance BrokersHome Insurance - a presentation by Richard Strauss Insurance Brokers
Home Insurance - a presentation by Richard Strauss Insurance BrokersRSIB
 
Sredna gora-50
Sredna gora-50Sredna gora-50
Sredna gora-50ilko gruev
 
Лекция 5: B-деревья (B-trees, k-way merge sort)
Лекция 5: B-деревья (B-trees, k-way merge sort)Лекция 5: B-деревья (B-trees, k-way merge sort)
Лекция 5: B-деревья (B-trees, k-way merge sort)Mikhail Kurnosov
 
Philippineswwii 110516221426-phpapp01
Philippineswwii 110516221426-phpapp01Philippineswwii 110516221426-phpapp01
Philippineswwii 110516221426-phpapp01Vher Lucion
 
Dodo pizza brand pyramid 2013
Dodo pizza brand pyramid 2013Dodo pizza brand pyramid 2013
Dodo pizza brand pyramid 2013Fedor Ovchinnikov
 

Destaque (20)

Sistemas operacionais 05
Sistemas operacionais 05Sistemas operacionais 05
Sistemas operacionais 05
 
Sistemas operacionais (extra ii)
Sistemas operacionais (extra ii)Sistemas operacionais (extra ii)
Sistemas operacionais (extra ii)
 
Sistemas operacionais 06
Sistemas operacionais 06Sistemas operacionais 06
Sistemas operacionais 06
 
Social media contests for roi
Social media contests for roiSocial media contests for roi
Social media contests for roi
 
1º ano feira do livro
1º ano feira do livro1º ano feira do livro
1º ano feira do livro
 
Svenska 8 c vecka 41
Svenska 8 c vecka 41Svenska 8 c vecka 41
Svenska 8 c vecka 41
 
Manajemen resiko (fix)
Manajemen resiko (fix)Manajemen resiko (fix)
Manajemen resiko (fix)
 
Digital surya 07 oktober 2013
Digital surya 07 oktober 2013Digital surya 07 oktober 2013
Digital surya 07 oktober 2013
 
Communication final rishil shah
Communication final rishil shahCommunication final rishil shah
Communication final rishil shah
 
Anton azwar ardywinata - j1 f109003
Anton azwar ardywinata - j1 f109003Anton azwar ardywinata - j1 f109003
Anton azwar ardywinata - j1 f109003
 
PRENSA ESCOLAR DESPERTAR TABLONERO
PRENSA ESCOLAR DESPERTAR TABLONEROPRENSA ESCOLAR DESPERTAR TABLONERO
PRENSA ESCOLAR DESPERTAR TABLONERO
 
Private Companies
Private CompaniesPrivate Companies
Private Companies
 
[Jurnal] 07520244086 bisono indra cahya
[Jurnal] 07520244086 bisono indra cahya[Jurnal] 07520244086 bisono indra cahya
[Jurnal] 07520244086 bisono indra cahya
 
Home Insurance - a presentation by Richard Strauss Insurance Brokers
Home Insurance - a presentation by Richard Strauss Insurance BrokersHome Insurance - a presentation by Richard Strauss Insurance Brokers
Home Insurance - a presentation by Richard Strauss Insurance Brokers
 
Sredna gora-50
Sredna gora-50Sredna gora-50
Sredna gora-50
 
Types of Economies
Types of EconomiesTypes of Economies
Types of Economies
 
Лекция 5: B-деревья (B-trees, k-way merge sort)
Лекция 5: B-деревья (B-trees, k-way merge sort)Лекция 5: B-деревья (B-trees, k-way merge sort)
Лекция 5: B-деревья (B-trees, k-way merge sort)
 
Philippineswwii 110516221426-phpapp01
Philippineswwii 110516221426-phpapp01Philippineswwii 110516221426-phpapp01
Philippineswwii 110516221426-phpapp01
 
Dodo pizza brand pyramid 2013
Dodo pizza brand pyramid 2013Dodo pizza brand pyramid 2013
Dodo pizza brand pyramid 2013
 
Dentition intro
Dentition introDentition intro
Dentition intro
 

Semelhante a Sistemas operacionais (extra)

Semelhante a Sistemas operacionais (extra) (20)

Ambiente web (extra)
Ambiente web (extra)Ambiente web (extra)
Ambiente web (extra)
 
5098 html
5098 html5098 html
5098 html
 
5098 html
5098 html5098 html
5098 html
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Html manual
Html manualHtml manual
Html manual
 
[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 de HTML para iniciantes
Apostila de HTML para iniciantesApostila de HTML para iniciantes
Apostila de HTML para iniciantes
 
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 manual
Html manualHtml manual
Html manual
 
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
 
T2Ti-ERP-3-Introducao-as-Tecnologias-Web.pdf
T2Ti-ERP-3-Introducao-as-Tecnologias-Web.pdfT2Ti-ERP-3-Introducao-as-Tecnologias-Web.pdf
T2Ti-ERP-3-Introducao-as-Tecnologias-Web.pdf
 
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
 
Tele cine mozer
Tele cine mozerTele cine mozer
Tele cine mozer
 
Apostila+de+html
Apostila+de+htmlApostila+de+html
Apostila+de+html
 
Apostila HTML
Apostila HTMLApostila HTML
Apostila HTML
 

Mais de Anderson Maciel (20)

Dream 07
Dream 07Dream 07
Dream 07
 
Dream 06
Dream 06Dream 06
Dream 06
 
Dream 05
Dream 05Dream 05
Dream 05
 
Dream 04
Dream 04Dream 04
Dream 04
 
Dream 03
Dream 03Dream 03
Dream 03
 
Dream 02
Dream 02Dream 02
Dream 02
 
Dream 01
Dream 01Dream 01
Dream 01
 
Corel 09
Corel 09Corel 09
Corel 09
 
Corel 08
Corel 08Corel 08
Corel 08
 
Corel 05
Corel 05Corel 05
Corel 05
 
Corel 07
Corel 07Corel 07
Corel 07
 
Corel 06
Corel 06Corel 06
Corel 06
 
Corel 04
Corel 04Corel 04
Corel 04
 
Corel 03
Corel 03Corel 03
Corel 03
 
Corel 02
Corel 02Corel 02
Corel 02
 
Corel 01
Corel 01Corel 01
Corel 01
 
Administração financeira 15
Administração financeira 15Administração financeira 15
Administração financeira 15
 
Administração financeira 14
Administração financeira 14Administração financeira 14
Administração financeira 14
 
Administração financeira 13
Administração financeira 13Administração financeira 13
Administração financeira 13
 
Administração financeira 12
Administração financeira 12Administração financeira 12
Administração financeira 12
 

Sistemas operacionais (extra)

  • 1. Sistemas Operacionais Aula Extra – HTML Professor: Anderson Henrique Como funciona a Construção de Sites Simples Parte I
  • 2. Utilizando a Linguagem HTML Construindo nosso Primeiro Site TAGS Principais Salvando Documento e Visualizando Formatações Simples O que vamos aprender:
  • 3. 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; HTML
  • 4. Abra o bloco de notas, Menu Iniciar no campo pesquisar digite “Notepad”, execute o programa Construindo nosso primeiro site
  • 5. <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> Este comando inicia nosso documento html Este comando inicia o cabeçalho do site Este comando inicia o título do site Aqui você digita o título do site Este comando fecha o título do site Este comando fecha o cabeçalho do site 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 Este comando fecha o corpo do site Este comando fecha nosso documento html
  • 6. Após digitar esses códigos, vá no menu “Arquivo”, selecione a opção “Salvar Como...” Salvando e Visualizando
  • 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.
  • 10. Página será visualizada assim Comando TITLE Comando BODY
  • 11. <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 Formatação Simples
  • 12. Construir um site simples utilizando a linguagem HTML falando sobre você, quem é você, o que gosta de fazer, onde estuda, onde mora, qual a carreira profissional que você pretende seguir; Salvar este site, sentando em dupla deve conter informações sobre os 02 alunos; Atividade