Cursinho online - HTML e CSS na Prática Completo

Prévia do material em texto

HTML e CSS na Prática
Estrutura do Curso
	Este curso está estruturado em dois capítulos:
Capítulo 1: Desenvolvimento Web
· Tópico 1: Internet
· Tópico 2: Estrutura Básica HTML
· Tópico 3: Cascading Style Sheets – CSS.
Capítulo 2: Tableless e HTML5
· Tópico 1: Conceito Tableless e HTML5
· Tópico 2: Simulação: Elaboração de Página Web.
CAPÍTULO 1
DESENVOLVIMENTO WEB
Internet
	Neste tópico, vamos conhecer a história da internet e a evolução dos navegadores. Além disso, vamos entender o que é acessibilidade na web.
	Conteúdos:
· Internet
· Navegadores
· Acessibilidade.
Ao finalizar este tópico, você será capaz de:
· Entender o funcionamento da internet.
· Compreender o que é acessibilidade na web.
Hoje em dia, é muito raro nos depararmos com alguém que nunca tenha escutado ou lido a palavra internet.
Como o avanço da tecnologia, a busca pela informação cresceu bastante. Como consequência, a internet se tornou essencial em nosso dia a dia.
Você sabe o que significa a palavra internet?
Internet
	O nome internet tem origem inglesa: inter, que deriva de international (internacional), e net (rede).
	internacional				rede		
	international				net
				 internet
Desse modo, podemos concluir que internet significa rede mundial de computadores.
	Para atender o que isso significa, precisamos voltar um pouco no tempo. Vamos lá?
Conceitos Históricos e a Evolução da Internet
	Vamos acompanhar, agora, os principais acontecimentos que culminaram na criação de internet e sua evolução nesse primeiro momento. Navegue pelas setas.
	A internet foi criada por volta de 1969 e surgiu com a finalidade de auxiliar a comunicação das forças armadas americanas em meio à guerra.
	O propósito inicial da internet era manter contato alternativo entre as tropas, caso os ataques inimigos interrompessem os meios tradicionais de telecomunicação da época.
	A busca por poder e vantagem fazia dos Estados Unidos e da União Soviética grandes potências mundiais na década de 1960.
	Temendo a perda de documentos sigilosos por meio de um ataque soviético, os americanos desenvolveram um sistema de comunicação capaz de compartilhar e descentralizar informações.
	Para tornar isso possível, foi necessária a criação de uma rede operacional de computadores, trabalho desenvolvido pela ARPA (Agência de Pesquisa em Projetos Avançados ou Advanced Research and Projects Agency, em inglês).
	A ARPANET foi então criada e passou a interligar bases e departamentos do governo americano.
ARPANET
	Vamos entender melhor como a ARPANET funcionava!
	A ARPANET utilizava um sistema de transmissão de dados conhecido como chaveamento de pacotes. Um chaveamento de pacotes divide as informações em pequenos pacotes diferentes e envia tais pacotes aos poucos.
	Na década de 1970, com a diminuição da tensão entre Estados Unidos e União Soviética, o governo dos Estados Unidos dividiu o sistema em dois:
· MILNET, com uso exclusivo para propósitos militares.
· ARPANET, que passou a ser desenvolvida por universidades e pesquisadores.
O desenvolvimento da ARPANET por pesquisadores culminou em uma nova função: a comunicação acadêmica.
	Você imagina como era feita a transmissão dos pacotes? Vamos descobrir!
	Imagine que você tenha de levar uma carta do ponto A ao ponto B. Para isso você precisa utilizar um meio de transporte rápido e eficiente.
	No entanto, não é possível ir direto de um ponto a outro, pois você precisa fazer pequenas paradas para entregar cópias das cartas ao longo do caminho. Vejamos:
 Ponto A							 Ponto B
	Muito parecido com uma linha de metrô, não é mesmo?
	Para realizar a comunicação, a ARPANET utilizava um sistema chamado backbone (espinha dorsal, em português). O backbone era formado por computadores potentes, ligados por linhas em lugares estratégicos, para realizar a transferência de um grande fluxo de dados.
	Computador
	 potente
	 (servidor)
							 Computador 
							 potente
							 (servidor)
 Computador
	 potente
	 (servidor)
World Wide Web
	Em 1989, Tim Berners-Lee apresentou a primeira proposta para a World Wide Web (rede mundial de computadores).
	Junto com um estudante do Conselho Europeu para pesquisar Nuclear(CERN), Tim Berners-Lee conseguiu realizar a primeira comunicação entre um cliente e um servidor por meio da internet.
A comunicação entre o cliente (navegador web) e o servidor foi realizada por meio do protocolo HTTP (hypertext transfer protocol ou protocolo de transferência de hipertexto, em português).
	As informações em textos ou imagens estão ligadas por meio de links ou hiperlinks. A troca de um conteúdo para outro é feita por meio do protocolo HTTP.
	A mensagem com a requisição de recurso é enviada ao servidor por meio do protocolo HTTP. O protocolo HTTP, por sua vez, retorna com a resposta.
	Conselho Europeu para Pesquisa Nuclear CERN
	É considerado o maior laboratório do mundo para estudos de física em partículas. Desde setembro de 1954, o CERN passou a se chamar Organisation Européenne pour la Recherche Nucléaire ou Organização Europeia para pesquisa Nuclear.
	Hipertexto
	Hipertexto é um texto em formato digital ligado a outros conjuntos de informação na forma de blocos de textos, imagens ou sons. O acesso aos conjuntos de informações se dá por meio de referências específicas, denominadas hiperlinks ou links.
	A World Wide Web (WWW ou apenas Web) é composta de pequenas quantidades de documentos interligadas por meio de hiperlinks. Os hiperlinks tornam a navegação não linear e independente.
	O conjunto de documentos é chamado de página web. Já os sítios ou sites são formados pelo conjunto de páginas web localizadas em um mesmo endereço.
	Conjunto de páginas			Conjunto de páginas
		 web					 web
				Hiperlink
		 Site					 Site
	As páginas web possuem títulos, imagens, textos, formulários e muito outros elementos.
	A estutura das páginas web é criada pela linguagem de marcação chamada HTML (hypertext mark-up language).
Falaremos mais sobre o HTML no próximo tópico. Agora, veremos como o uso da internet se expandiu nos últimos anos.
Você sabia que 49,2% da população mundial acessou a internet no mês de junho de 2016, segundo o site Internet World Stats?
Em números, essa quantidade corresponde a 3.611.375.813 de pessoas.
	Com a explosão da internet, os usuários se tornaram cada vez mais ativos. Isso culminou em um aumento gigante de dados disponíveis.
	O acesso à rede mundial de computadores ficou ainda mais fácil com os constantes lançamentos de novos produtos, como smartphones, tablets e notebooks. Grande parte da movimentação na internet é causada por redes sociais e aplicativos de mensagens instantâneas.
	Outro fator muito importante e que fortaleceu ainda mais o uso da internet foi a evolução dos navegadores web, os browsers.
	Vamos conhecer melhor os browsers?
Navegadores Web
	Certamente, você é um usuário assíduo da internet. Mas você sabe explicar o que é um navegador?
Um navegador (também conhecido como web browser ou browser) é um programa de computador que habilita seus usuários a interagirem com documentos virtuais da internet, as páginas da web. Tais páginas podem ser escritas em linguagens como HTML, XHTML ou HTML5.
	Por ser o primeiro a conseguir realizar a comunicação entre cliente (navegador web) e servidor, Tim Berners-Lee também foi o responsável pela criação do primeiro navegador web.
	Você sabe como era chamado o primeiro navegador web?
	O primeiro navegador web foi intitulado de World Wide Web, e foi implementado para realizar a comunicação entre pesquisadores e alunos do CERN.
	Agora que já sabemos o que é um navegador, vamos conhecer o surgimento e a evolução dos principais navegadores do mercado? Os anos a seguir para saber mais sobre essa evolução.
	1993		1995		2003		2011
		
		1994		1998		2008		2015
1993
	Em setembro de 1993, a NCSA lançou o NCSA Mosaic. Diferente do World Wide Web, que era baseado em texto, o Mosaic era um navegador gráfico.
	Originalmente, o World Wide Web rodava no sistema operacional UNIX.No entanto, não demorou muito para NCSA disponibilizar seu navegador para Macintosh e Microsoft Windows.
1994
	Em 1994, a empresa Netscape lançou o Netscape Navigator, que se tornou o navegador web mais popular do ano de 1995. Nesse mesmo ano, a Microsoft lançou o Internet Explorer e entrou na briga. Dessa forma, começou a “Guerra dos Navegadores”.
	A Netscape Communications Corporation foi fundada por Marc Andreessen, ex-líder do projeto NCSA Mosaic, e por mais cinco colegas. Entre esses colegas, havia outro ex-funcionário da NCSA, Jim Clark.
1995
	No dia 16 de agosto de 1955, foi lançado o Internet Explorer1. Esse navegador era uma reformulação do Syglass Mosaic, da empresa Syglass Inc. Devido ao esforço da Microsoft para integrar o Internet Explorer ao seu sistema operacional Windows, a Netscape perdeu força de mercado.
1998
	Em 1998, em uma tentativa de se recuperar no mercado, a Netscape decidiu liberar seu produto com o código aberto. Isso deu início ao projeto Mozilla.
	Apesar da decisão, a companhia acabou sendo vendida para AOL (America Online) no final de 1998. Após a compra da Netscape, a AOL optou por parar o desenvolvimento do navegador e passou a apoiar a iniciativa de construção de um navegador de código livre.
	A Netscape se tornou uma subsidiária da AOL e continuou apoiando o projeto Mozilla financeiramente. No entanto, abriu espaço para que alguns desenvolvedores ficassem descontentes com o rumo do projeto, já que tinha interesses comerciais e realizou a inclusão de funções pouco usadas no navegador. O resultado foi a criação de um projeto paralelo intitulado Firefox. O objetivo do projeto Firefox era a criação de um novo navegador.
2003
	O projeto Mozilla era administrado pela Mozilla organization. Tal organização tinha a responsabilidade de desenvolver e manter a manutenção do navegador Mozilla. No entanto, a partir de 2003, o navegador passou a ser comandado pela Mozilla Foundation.
	Atualmente, o navegador Mozilla Firefox ocupa a segunda posição entre os navegadores mais utilizados o site gs.statcounter.com. Desse modo, o Mozilla Firefoz está atrás apenas do Google Chrome, com 54,77%. O Internet Explorer ocupa a terceira posição, com 14,84%. Apesar de ter sido o navegador mais utilizado por muito tempo, o Internet Explorer acabou perdendo força com a criação de novos navegadores.
	Mozilla Foundation
	A Fundação Mozilla é uma organização sem fins lucrativos que detém os direitos de produtos como o Mozilla Firefox. Atualmente, o Mozilla Firefox é o principal objetivo da organização.
	A Fundação Mozilla também contribuiu com o desenvolvimento da internet com a criação de documentações, assim como a World Wide Web Consortium (W3C).
2008
	Em setembro de 2008, a versão Beta do Google Chrome foi lançada e chegou causando um alvoroço no mundo da internet. Em dezembro do mesmo ano, a Google disponibilizou a primeira versão estável do navegador.
	O Chrome foi criado pela gigante Google, segundo a empresa “o uso de aplicativos online é o futuro.” Com base nessa ideia, a empresa Google criou o Chrome para ser compatível com o maior número de aplicações possíveis.
2011
	Em 2011, o Google Chrome se tornou o navegador web mais utilizado no mundo. Com isso, superou o Mozilla Firefox e o Internet Explorer.
2015
	Lançado em abril de 2015, o Microsoft Edge já vem no Windows 10 no lugar do navegador Internet Explorer e possui um leitor de PDF integrado. Também substituiu o Internet Explorer Mobile.
Google Chrome
	O Google Chrome é um navegador web gratuito desenvolvido pela empresa Google, e sua primeira versão foi disponibilizada em 2008.
	Tornou-se um dos mais populares navegadores disponíveis para Windows, Mac (Mac OS), Linux (Ubuntu), Android e Ios.
	O navegador conseguiu diferenciar-se de seus concorrentes, principalmente, por sua agilidade e compatibilidade com a maioria dos sites, devido ao uso de plug-ins.
	Chrome é o programa mais instalado em computadores.
	Segundo levantamento do Avast, o navegador do Google é o siftware mais presente nos PCs de todo o mundo.
		Fonte: https://canaltech.com.br. Acesso em: mar. 2017.
Internet Explorer
	O Internet Explorer, mais conhecido como IE, consiste em uma série de navegadores desenvolvidos pela Microsoft e distribuídos nas versões dos sistemas operacionais Microsoft Windows. Sua primeira versão foi lançada em 1995.
	Já esteve entre os mais populares e utilizados do mundo, ocupando cerca de 95% do mercado entre os anos de 2002 e 2003.
	Sua participação caiu com o lançamento do Firefox em 2004 e, posteriormente, com o Google Chrome em 2008. Desde então, foi perdendo espaço entre os navegadores.
	
Após várias tentativas frustradas de melhorar a imagem do IE, com o lançamento o Windows 10, em 2015, a Microsoft substituiu o Internet Explorer pelo Microsoft Edge, com novos recursos e visual mais moderno.
Safari
	O navegador Safari é o navegador padrão do sistema operacional Mac OS X, da empresa Apple Inc.
	Lançado no ano de 2003 para ganhar uma fatia do mercado, o Safari precisou ser atualizado com a chegada do Firefox em 2004. Após algumas atualizações, o navegador adotou o modelo de abas. Hoje em dia, o modelo de abas é visto na maioria dos navegadores.
	A fim de acirrar a guerra entre os navegadores, a Apple lançou a versão para Windows do Safari em 2007.
O Safari é um pouco menos conhecido pelos brasileiros. Atualmente, é o quarto navegador mais utilizado no mundo, com 9,5% dos usuários totais.
		 Fonte: www.tecmundo.com.br. Acesso em: abr. 2017.
Outros Navegadores
	Você conhece outros navegadores?
Opera
	Lançado em 2006, o Opera foi criado pela empresa de telefonia norueguesa Telenor. Pioneiro na navegação por abas, o Opera foi um dos primeiros navegadores a apresentar uma versão mobile. Atualmente, é o quinto navegador mais utilizado no mundo, com 1,87% dos usuários totais.
Internet Explorer Mobile
	O Internet Explorer Mobile é um navegador usado em Windows Phone e Windows CE, com suporte a gestos e multi-touch.
Microsoft Edge
	Lançado em abril de 2015, o Microsoft Edge possui um leitor de PDF integrado e substituiu o Internet Explorer 11 e Internet Explorer Mobile.
	O Microsoft Edge possui um motor de renderização conhecido como EdgeHTML. O EdgeHTML auxilia no processo de formatação e exibição de conteúdos.
Normas e Padronizações do W3C
	Com o avanço da internet, ficou cada vez mais evidente a necessidade de criação de normas e padrões para garantir uma evolução adequada.
	Nesse contexto, o criador da Web, Tim Berners-Lee, é o atual diretor do World Wide Web Consortium (W3C).
	Você conhece o W3C?
O W3C é o consórcio internacional que tem como principal função o desenvolvimento de padrões que auxiliem no crescimento da internet.
	Vamos conhecer as linhas de pesquisa do W3C?
Normas e Padronizações do W3C
	Linhas de Pesquisa
	No site do W3C, existem diversos materiais com normas e padrões para auxiliar o desenvolvimento de conteúdo organizado e otimizado para internet.
	Algumas linhas de pesquisa do W3C são:
· Web Design & Aplicações
· Arquitetura Web
· Web Semântica
· Tecnologia XML
· Web Services
· Web de Dispositivos
· Navegadores e Ferramentas de Autoria.
Saiba mais
W3C
No site do W3C, podemos ler a definição de W3C:
“O Consórcio World Wide Web (W3C) é um consórcio internacional no qual organizações filadas, uma equipe em tempo integral e o público trabalham juntos para desenvolver padrões para a Web”. Liderado pelo inventor da web Tim Berners-Lee e o CEO Jeffrey, o W3C tem como missão conduzir a World Wide Web para que atinja todo seu potencial, desenvolvendo protocolos e diretrizes que garantam seu crescimento de longo prazo.”
Disponível em: www.w3c.br. Acesso em: dez. 2016.
Em meio a uma infinidade de padrões e normas, podemos encontrar um tema muito importante para o desenvolvimento social e humano: a acessibilidade.
Acessibilidade
	Você já deve ter ouvido falar em acessibilidade, não é mesmo? Nos dias de hoje, a preocupação com a acessibilidade é um grande ponto de discussão em diversos meios profissionais, sociais e econômicos.A inclusão de pessoas portadoras de deficiências ou com mobilidade reduzida permite em desenvolvimento incrível e essencial da sociedade. Nesse contexto, em uma ação conjunta do Grupo de trabalho (GT) de acessibilidade na web e do W3C BR, foi criada uma cartilha com instruções e orientações sobre o tema.
	Segundo a Cartilha W3C BR de acessibilidade web, acessibilidade é:
	Possibilidade e condição de alcance, percepção e entendimento para a utilização, em igualdade de oportunidades, com segurança e autonomia, do meio físico, do transporte, da informação e da comunicação, inclusive dos sistemas e tecnologias de informação e comunicação, bem como de outros serviços e instalações.
	Você já parou para pensar na importância de uma pessoa com mobilidade reduzida ou portadora de deficiência acessar a web? Assista à animação a seguir para entender melhor a importância da acessibilidade.
ACESSIBILIDADE WEB
	Vamos falar mais sobre acessibilidade na web!
	Vamos ver o que diz a Cartilha W3C?
	A Cartilha W3C BR define a acessibilidade na web da seguinte forma:
	Acessibilidade na web significa que pessoas com deficiência podem usar a web. Mais especificamente, a acessibilidade na web significa que pessoas com deficiência podem perceber, entender, navegar, interagir e contribuir para a web. E mais. Ela também beneficia outras pessoas, incluindo pessoas idosas com capacidades em mudança devido ao envelhecimento.
	Desse modo, vemos que a preocupação com a acessibilidade não se limita a disponibilizar softwares leitores de texto, sites ou páginas web. A acessibilidade busca a igualdade de oportunidades e o crescimento pessoal, independentemente da condição física.
Acessibilidade é proporcionar a interação de pessoas portadoras de deficiência ou mobilidade reduzida com o mundo.
Padrões Criados pelo W3C
	Você sabe quais são os benefícios de seguir os padrões criados pelo W3C?
O uso dos padrões criados pelo W3C no desenvolvimento torna os sites mais visíveis aos motores de busca, como Google, Bing e Yahoo.
	Além disso, os usuários também são beneficiados, já que os padrões W3C facilitam o acesso dos softwares leitores de texto e sintetizadores de voz.
	Sintetizadores de voz
	Sintetizadores de voz são programas que auxiliam pessoas portadoras de necessidades especiais ou mobilidade reduzida a navegarem pela internet.
	Agora que conhecemos um pouco dos padrões do W3C, que tal aplicarmos esses padrões na prática?
	Isso ficará para o próximo tópico!
	Antes de continuar, que tal fazer alguns exercícios sobre o que acabamos de ver? Vamos lá!
Exercícios de Fixação
	Agora, veja o quanto você sobre o assunto tratado neste tópico. Realize os exercícios a seguir e aproveite para fixar melhor os conceitos vistos até aqui.
	Questão 1
	Diversas das maiores transformações ocorridas na sociedade contemporânea se deram devido ao advento da internet, a rede mundial de computadores, capaz de transformar desde a forma de o ser humano se comunicar até o modo de se realizarem pesquisas científicas.
	Marque V para verdadeiro e F para falso, considerando as informações a seguir, sobre o surgimento da internet e sua evolução.
informações 				V		F
A primeira proposta da WWW foi 	X
apresentada por Tim Berners-Lee.
Um fator importante que fortaleceu	X
 a internet foi a evolução dos browsers.
A internet foi criada no projeto MILNET, 		X
com uso exclusivo para propósitos
 militares.
A primeira comunicação entre um cliente 	X
(navegador web) e o servidor foi realizada
 utilizando o protocolo HTTP.
	Questão 2
	Sua empresa solicitou que você desenvolvesse uma aplicação web compatível nativamente com o Mac OS X. A recomendação é que você realize o desenvolvimento e os testes em um único navegador.
	Nessas condições, a escolha de navegador é o:
( X )Safari.
( )Firefox.
( )Chrome.
( )Netscape.
Encerramento do Tópico
	Neste tópico, pudemos acompanhar a evolução da internet, desde seu surgimento, com o ARPANET, até os dias atuais, com os inúmeros navegadores que foram criados ao longo dos anos.
	Além disso, conhecemos os padrões criados pelo W3C para o uso consciente da internet.
	Vimos também o conceito e as aplicações de acessibilidade na web.
	Caso ainda tenha dúvidas, você pode voltar e rever o conteúdo.
	Vamos prosseguir em nossos estudos? Siga para o próximo tópico.
Estrutura Básica HTML
	Neste tópico, vamos conhecer a estrutura básica do HTML e suas principais tags.
	Conteúdos:
· HTML.
Ao finalizar este tópico, você será capaz de:
· Entender a estrutura básica do HTML.
· Escrever códigos em HTML.
Linguagem HTML
	No tópico anterior, conhecemos a história da internet e a evolução dos navegadores. Será que já estamos preparados para conhecer a estrutura de uma página web?
	Você já ouviu falar em HTML?
O HTML é considerado a linguagem base da internet. Ele é o acrônimo de Hypertexxt Markup Language e significa Linguagem de Marcação de Hipertexto, em português.
	Acrônimo
	Um acrônimo é a junção de iniciais ou mais letras de um segmento.
HTML
	Vamos conhecer melhor a evolução do HTML ao longo dos anos e suas principais contribuições desde seu surgimento?
	Navegue pelas setas a seguir.
	Com o surgimento na web, Tim Berners-Lee desenvolveu o HTML.
	O HTML é uma abreviação de Hypertext Markup Language ou, traduzido, Linguagem de Marcação de Hipertexto.
	A linguagem HTML é usada para a publicação de conteúdo na web, como textos, imagens, vídeos, áudio etc.
	A proposta do HTML é suprir a necessidade de criar uma linguagem compatível com os diferentes meios de acesso.
	Somente nos anos 1990, o HTML ganhou força. Desde então, o HTML foi adotado por outros desenvolvedores e fabricantes de browsers.
	Nessa época, Marc Andreessen desenvolveu o navegador Mosaic – browser, responsável pela popularização do código HTML.
	Entre 1993 e 1995, o HTML evoluiu com as novas versões: HTML+, HTML 2.0, HTML 3.0. Essa evolução incluiu diversas mudanças para enriquecer a linguagem com novos recursos e aplicabilidades no mundo web.
	Apesar das melhorias, o HTML ainda não era tratado como um código padrão pelos profissionais desenvolvedores e pelos fabricantes de browsers.
	O HTML só se tornou padrão em 1997, quando um grupo de profissionais do W3C trabalhou na versão 3.2. Desde então, a linguagem HTML passou a ser tratada como uma prática comum.
	W3C – World Wide Web Consortium
	Consórcio internacional fundado por Tim Berners-Lee em 1994. O W3C era composto por empresas, órgãos governamentais e organizações independentes com a proposta de firmar padrões para a criação e a interpretação de conteúdos para a Web.
	O HTML está estruturado no conceito de hipertexto desde sua criação. Desse modo, elementos são conectados por palavras, imagens, vídeos, áudios e documentos, formando uma grande rede de informação.
	A conexão dos elementos do hipertexto é algo imprevisível, já que uma fantástica comunicação de dados é disponibilizada. Essa comunicação enriquece o conhecimento e estabelece novas informações relacionadas.
	Em 2004, um grupo de desenvolvedores das empresas Mozilla, Apple e Opera fundaram a WHATWG – Web Hypertext Application Technology Working Group. Com isso, teve início o desenvolvimento da nova versão do HTML, chamada de HTML5 atualmente.
	No início de 2009, o W3C anunciou a primeira especificação do HTML5. Depois de alguns anos de trabalho, a versão final do HTML5 foi prometida para 2012.
	Entre as alterações encontradas na nova versão do HTML5, estão:
· Novas APls, para o desenvolvimento de gráficos bidimensionais, por exemplo
· Aprimoramento do uso off-line
· Melhoria na depuração de erros
· Controle embutido de conteúdo multimídia, entre outras propostas.
Como vimos, a internet evolui rapidamente. Com o tempo, chegaram novos recursos e novas tecnologias nos navegadores, novos dispositivos, novos meios de acessos, bem como o avanço das linguagens, dos aplicativos e das bibliotecas tecnológicas.
Nesse contexto, o HTML foi obrigado a evoluir e acompanhar todo o processo de desenvolvimento web.
Atualmente, os problemas e as dificuldades são diferentesdo passado. Existe a necessidade da instalação de plug-ins para dar acesso aos recursos de mídias ou à execução de algum script com efeito no site.
O HTML foi reformulado e readequado para o HTML5 para facilitar, agilizar e disponibilizar o acesso a tais recursos, sem a necessidade de pré-requisitos de plugins.
Por exemplo, uma API no HTML5 oferecerá o funcionamento de sites que exigem a instalação de plugins no HTML4, atualmente.
Desse modo, a nova tecnologia HTML5 altera todo o cenário e o contexto de programação das linguagens web. O HTML5 ignora as famosas permissões necessárias para a visualização de uma imagem ou a exibição de um vídeo, por exemplo.
Linguagem HTML
	A linguagem HTML utiliza rótulos para informar ao navegador como a página deve ser apresentada. A maioria desses rótulos possui o mesmo formato: indicam a abertura e o fechamento da página.
	E o que são esses rótulos, você sabe?
Os rótulos HTML são conhecidos como tags. As tags iniciam com o sinal de menor (<) e terminam com o sinal de maior (>).
Tags
Você já viu uma tag?
	Como mencionamos, existem dois tipos básicos de tags:
· Tag de abertura
· Tag de fechamento
As duas se diferenciam apenas pela barra /. A barra indica o fechamento da tag, de modo que a tag de abertura não tem a barra.
	Vejamos:
<aberturadatag></fechamentodatag>
	Tags Nulas
	Em HTML, existem tags que são consideradas nulas.
	Uma tag nula possui autofechamento. As tags nulas são diferentes das não nulas (a maioria), já que não precisam de abertura e fechamento.
	Veja alguns exemplos de tags nulas:
	<meta>
						<img)
			<br>
Doctype
	O doctype ou DTD (Document Type definition ou Definição do Tipo de Documento, em português) é uma declaração com o tipo de documento de sua página web. Por meio do doctype, o navegador identifica e processa corretamente o documento.
	Você sabia que existem vários tipos de HTML?
	Exatamente! Como existem tipos diferentes de HTML, a declaração correta é de extrema importância. Com a declaração, o navegador não perde tempo tentando descobrir qual tipo de código foi utilizado na composição de sua página.
Quando o navegador identifica o tipo de HTML, pode utilizar o tipo de renderização adequada.
Vamos adiante para descobrir como declarar o doctype!
	A declaração do doctype deve estar na primeira linha do código. Desse modo, o navegador identificará o tipo de documento assim que acessar a página.
	Vejamos como é feita a declaração para os diferentes tipos de HTML.
HTML 5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//PT-BR”
http://www.w3.org/TR/html4/loose.dtd>
XHTML 1.0
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//PT-BR”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
	Dica!
	Você pode encontrar uma lista de como declarar seu doctype no site do W3C.
Agora que já sabemos para que serve o doctype, vamos entender o que são metatags.
Metatags
	As metatags são tags que fornecem dados aos navegadores e motores de busca sobre o documento HTML em que estão inseridas.
	As metatags não aparecem em sua tela, pois são informações específicas para os navegadores.
	Vejamos alguns exemplos de metatags:
	Descrição da página, palavras-chaves, autor do documento.
<meta name=”description” contente=”Descrição da página”>
<meta name=”Keywords” contente=”Palavras-chaves”>
<meta name=”author” contente=”nome do Autor”>
Agora, vamos aprender a inserir comentários nos códigos HTML!
Definição de Comentários
	No HTML, os comentários possuem uma abertura e um fechamento, assim como as tags.
	Os comentários são muito importantes para ajudar o desenvolvedor a realizar manutenções.
	Vejamos como é fácil inserir um comentário em HTML:
Simples, não é? Agora, vamos conhecer as explicações e os atributos.
Especificações e Atributos
	Os atributos são informações que inserimos nas tags para que elas tenham um comportamento desejado. Existem atributos que utilizamos em quase todas as tags. Já outros atributos podem ser exclusivos para um tipo de tag.
	Os atributos são inseridos junto com a tag de abertura. Vejamos:
<nomedetag atributo1=”valor do atributo 1” atributo2=”valor do atributo 2”>
</nomedatag>
	Alguns exemplos de atributos são:
	Atributo id			Atributo alt
			Atributo class
	Atributo name		Atributo contente
Ainda não está claro? Não se preocupe! Veremos a aplicação dos atributos na prática.
Publicação do Documento
	Carlos é um programador iniciante. Ele já sabe escrever códigos em HTML, mas ainda não descobriu como publicar os documentos na web.
	E você? Já sabe como publicar documentos em HTML? Navegue pelas setas e veja algumas informações necessárias para que Carlos consiga executar sua publicação.
	
Para tornar os documentos em HTML disponíveis na web, precisamos fazer uma publicação ou upload do conteúdo.
	A publicação dos documentos consiste no envio de todo o material produzido para um servidor. Isso significa criar um site que será disponibilizado por meio de um endereço URL.
	O nome dado ao armazenamento dos arquivos é hospedagem. A hospedagem costuma ser feita por empresas especializadas.
	Existem hospedagens gratuitas. No entanto, elas são vinculadas à propaganda ou podem gerar transtorno.
	Ao publicar um material, é indicado que você adquira um domínio para tornar mais fácil a busca e a exposição do conteúdo publicado.
	Agora, Carlos já pode executar a publicação de seus documentos na web!
	Ao contrário de Carlos, você sabe o que é necessário para publicar o conteúdo, mais ainda não sabe como produzir o material, não é mesmo?
	Não se preocupe! Agora, iremos dar início ao desenvolvimento de nosso site.
	Nesse percurso, vamos explicar o uso das tags e a formatação que fiemos em um passo a passo.
	Preparado? Vamos lá!
	Antes de começarmos a praticar, precisamos identificar cada tag da estrutura básica do HTML. Para isso, vamos analisar a estrutura que servirá de base para página que vamos desenvolver.
Estrutura básica
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Título da página</title>
</head>
<body>
</body>
</html>
1
Doctype
	Observe que a primeira linha de nossa estrutura HTML é a declaração do doctype.
	Você lembra que o doctype informa o tipo de documento que o navegador está acessando?
2
<html>
	A tag <thml> envolve, praticamente, todo o conteúdo da página.
	Assim como o doctype, a tag <html> também informa ao navegador que o conteúdo dentro dela é HTML.
3
<head>
	A tag <head> é a tag cabeça ou o cabeçalho da nossa página. Nesse sentido, a tag <head> desempenha um papel fundamental.
	Dentro dessa tag, inserimos as informações que o navegador vai ler, como títulos, descrições, palavras-chaves e outras.
4
<meta>
	As tags meta ou metatags são tags que fornecem dados aos navegadores e aos motores de busca sobre o documento HTML em que estão inseridas. Tais tags não aparecem em sua tela, pois são informações específicas para os navegadores.
	Você se lembra dos atributos? No caso apresentado, observe que a tag <meta> possui o atributo charset e o valor ‘utf-8’. O atributo charset informa ao navegador o tipo de codificação que deve ser usada.
5
<title>
	A tag <title>, dentro do head, é a tag que informa o título da página ao navegador.
	Atualmente, a tag <title> é considerada umas das tags mais importantes.
	Além de adicionar um título à aba no navegador, ela também auxilia os motores de busca a encontrarem o site no momento de uma pesquisa.
6
<body>
	A tag body é o corpo da página. Desse modo, a tag <body> é responsável por expor o conteúdo para o usuário final.
Escrita de Código
	Já está na hora de começarmos a praticar! Mas, primeiro, você sabe que ferramenta usar para começar a escrever códigos em HTML?
Códigos HTML podem ser escritos em qualquer editor de texto. Existem muitos editores grátis para download na internet.
	Agora, usaremos o Bloco de Notas (editor de texto nativo do sistema operacional Windows 10). Caso você não tenha essa versão do Windows, não se preocupe. Versões anteriores também possuem esse editor de texto instalado.
	Você notou que salvamos oarquivo com o nome de index.html, certo? Nesse caso, a extensão .html é o que define o tipo de arquivo.
	O nome INDEX não foi escolhido aleatoriamente. Na falta de um caminho informado pela página inicial de seu site, o servidor sempre irá procurar pela página index. Isso garante que o servidor abra a página inicial. A index é a página padrão dentro dos diretórios dos servidores.
? Isso significa que o nome index é obrigatório?
Não. Caso você queira que o nome de seu arquivo seja paginainicial.html, só terá de alterar a configuração de modo que o domínio aponte para o endereço da página inicial. Nesse caso, a página inicial será paginainicial.html.
Em outras palavras, você pode escolher outros nomes para sua página inicial. No entanto, aconselhamos que use sempre a forma padronizada (index.html), por ser um padrão e um bom hábito.
Separadores
	Agora que já aplicamos a estrutura básica, vamos aprender sobre os separadores.
	Os separadores desempenham um papel fundamental na estrutura de um documento HTML. São os separadores que organizam os textos dentro de uma página web.
	Para começar, dividiremos os separadores em três tipos:
· Quebra de linha
· Parágrafos
· Linha horizontal
Na sequência, vamos conhecer cada um deles.
Separadores – Quebra de Linha
	No desenvolvimento de conteúdos, é comum haver textos com grande quantidade de linhas. De modo geral, os navegadores quebram as linhas automaticamente. No entanto, pode ser necessário quebrar uma linha em determinado ponto.
	Nesse caso, usamos o elemento <br> para quebrar as linhas. No local em que inserirmos a tag <br>, o texto pulará para a próxima linha.
	A tag <br> é uma tag nula. Dessa forma, não precisamos inserir o </br> para o fechamento.
	Vamos praticar a inserção de quebras de linha? Para compor o texto, usaremos um recurso chamado Lorem Ipsum.
Lorem Ipsum
Lorem Ipsum é um texto utilizado para preencher espaços em layouts, páginas web e outras áreas.
O texto Ipsum é usado para ocupar, provisoriamente, lugares em que será inserido o texto definitivo. Existem diversos tipos de Ipsum. Em nosso próximo exemplo, usaremos um deles.
Separadores – Parágrafos
	Já sabemos que a utilização de tags <br> resulta em quebras de linhas. No entanto, não é recomendado usar muitas quebras de linha quando trabalhamos com uma grande quantidade de texto.
	Como vimos, a tag <br> deve ser usada em determinados pontos. Quando trabalhamos com textos longos ou com grande quantidade de parágrafos, devemos usar a tag <p>.
	A tag <p> tem a função de separar blocos de texto e significa parágrafo. Essa tag deve ser inserida da seguinte maneira:
			<p> Seu texto </p>
	Abertura				 fechamento
	
	Para testa a eficácia da tag <p> vamos voltar ao site lipsum.com e copiar dois parágrafos.
	Vamos ver como aplicar na prática.
Separadores – Linha Horizontal
	O último separador que iremos apresentar é a linha horizontal. Apesar de ser funcional, a linha horizontal não é muito utilizada atualmente.
	Para inserir uma linha horizontal, basta adicionar a tag <hr>. Desse modo, onde a tag <hr> for inserida, será gerada uma linha.
Você verá que o texto também será quebrado com a inserção da linha horizontal. Por conta disso, tome cuidado com a inclusão dessa tag no meio do texto.
	Assim com a tag <br>, a tag <hr> também é uma tag nula. Isso significa que não há necessidade de fechá-la.
Formatações de Cabeçalho e Textos
	O HTML possui uma grande quantidade de tags voltada para formatação de textos.
	A função das tags de formatação é facilitar e melhorar visualmente as páginas web.
As tags de formatação contribuem para um desenvolvimento mais rápido e eficiente de um conteúdo.
	Vamos conhecer as principais tags de formatação a seguir!
Títulos – Cabeçalhos
	Os títulos no HTML são divididos em seis níveis – de 1 a 6. Quando inseridos na página, os títulos se destacam dos demais textos pelo tamanho da letra.
	No HTML, a tag que representa os títulos é a <h>. Observe a composição da tag <h>:
<h + nível desejado > Seu título </h + nível desejado>
		Abertura da tag	Fechamento da tag
			<h>			</h>
	Exemplo: <h1> Seu Título </h1>
	
	<h1> Título nível 1
		</h1>
	<h2> Título nível 2 </h2>
	<h3> Título nível 3 </h3>
	<h4> Título nível 4 </h4>
	<h5> Título nível 5 </h5>
	<h6> Título nível 6 </h6>
Ainda está confuso? Vamos ver como aplicar tudo isso na prática.
	O texto que estamos usando em nossas demonstrações já possui um título. No entanto, não conseguimos distinguir o título do restante do texto, pois ainda não o formatamos.
	Agora, usaremos a tag <h> para dar destaque ao título. Preparado? 
	Após assistir à demonstração, você percebeu que já é possível distinguir o título dos demais textos, não é mesmo? Além disso, já sabemos como utilizar os níveis da tag <h> para alterar o tamanho da letra (fonte) do cabeçalho (título).
	Mas, e se quisermos alterar a formatação do texto? É isso o que veremos a seguir.
Formatação dos Textos
	Quando estamos criando uma página web, pode surgir a necessidade de destacar uma palavra das demais. Nessas ocasiões, podemos mudar a cor ou o tamanho da letra (fonte), inserir itálico ou sublinhado. Há muitas possibilidades!
	Vamos conhecer algumas tags que nos podem auxiliar a dar destaque às palavras. 
B
	Negrito – bold, em inglês
	Existem duas formas de aplicar o negrito com tags. Cada forma de aplicação possui uma função:
· <b> - Segundo a descrição do W3C, a tag <b> deve ser usada para destacar uma palavra.
· <Strong> - A tag <Strong> também destaca a palavra. No entanto, essa tag deve ser usada para representar algo importante, sério ou urgente.
/
	Itálico
	Assim como o negrito (bold), o itálico também possui duas formas de ser aplicado.
· <i> - Segundo as orientações do W3C, a tag <i> deve ser usada em termos técnicos. Por exemplo: O nome da flor é Orquídea.
· <em> - Já a tag <em> deve ser usada para dar ênfase a uma palavra. Por exemplo: Ela não passou por aqui ontem.
U
	Sublinhado, subscrito e sobrescrito
	As tags para sublinhas, subscrever e sobrescrever são:
· Tag <u> - A tag <u> adiciona sublinhado ao texto.
· Tag <sub> - O texto dentro da tag <sub> se torna subscrito (letras pequenas abaixo de um texto). Ex: H²0.
· Tag <sup> - Coloca o texto como sobrescrito (letras pequenas acima de um texto). Ex: X⁴.
Agora que conhecemos algumas das principais tags da estrutura básica de HTML, que tal fixar o que aprendemos por meio de um infográfico?
<title>
	Informa o título da página para o navegador, auxiliando os motores de busca a encontrarem seu site quando é feita uma pesquisa sobre determinado assunto.
Exemplo 
<h>
	Representa os títulos no HTML.
Exemplo
<head>
	Corresponde ao cabeçalho. Dentro dela, inserimos as informações que o navegador vai ler, como títulos, descrições, palavras-chaves e outras.
<br>
	Corresponde a uma quebra de linha. Por ser uma tag nula, não precisa do </br> para o fechamento.
<meta>
	Fornece dados aos navegadores e motores de busca sobre o documento HTML em que estão inseridas. Também é utilizada na formatação de caracteres especiais.
<body>
	É responsável por expor o conteúdo para o usuário final.
<i>
	Aplica itálico ao texto. É usada em termos técnicos.
<em>
	Aplica itálico ao texto. É usada para dar ênfase a uma palavra.
<u>
	Adiciona sublinhado ao texto.
<sub>
	O texto dentro da tag <sub> se torna subscrito.
<sup>
	Coloca o texto como sobrescrito.
<strong>
	Aplica negrito ao texto. É usada para representar algo importante, sério, urgente.
<b>
	Aplica negrito ao texto. É usada para destacar uma palavra.
<p>
	Significa parágrafo e tem a função de separar blocos de texto.
<html>
	Envolve praticamente todo o conteúdo da página e informa ao navegador que o conteúdo dentro dela é HTML.
<hr>
	Gera uma linha horizontal, acarretando a quebra do texto. É uma tag nula, o que elimina a necessidade de fechá-la.
Propriedades
	Até o momento, nossa página não tem nenhuma cor além do preto, certo?
	Agora, veremos como aplicar cores nos textos e no fundo das páginas.
	Além disso, vamos aprender a alterar o tamanhoe a família das fontes.
	Vamos lá!
Aplicação de Cores – Background e Foreground
	A aplicação de corres no texto, no fundo de páginas e nos links é de grande ajuda para distinguir os textos importantes nas páginas web. Para isso, passaremos a utilizar atributos, em vez de tags.
	Vamos iniciar o atributo bgcolor. Tal atributo tem como função adicionar cor de fundo (background) onde é inserido. Usaremos a tag <body> para exemplificar.
	O atributo bgcolor é adicionado da seguinte maneira:
<body bgcolor = “COR”> </body>
	Já as cores podem ser inseridas de duas formas:
· Por seus nomes em inglês.
· Por seus códigos hexadecimais.
Vejamos duas sugestões de aplicação das cores:
Código hexadecimal			Nome
#FFFF00					Yellow
#808000					Olive
#FFFFFF					White
#000000					Black
#FF0000					Red
#0000FF					Blue
#00FF00					Green
Aplicação de Cores- Background e Foreground
	Vamos ver como aplicar as cores de background e foreground na prática? 
Saiba mais
Cores
Veja outras cores no site:
www.w3schools.com/colors/colors_hex.asp.
No site de busca, você também pode procurar por: tabela de cores em HTML. Você terá várias opções, sempre com o código e o nome da cor.
Tamanho e Estilo do Texto
	Já sabemos como modificar a cor do fundo e a cor da fonte. Agora, vamos mudar o tamanho e o estilo do nosso texto.
	Vejamos:
<font size=”Tamanho da fonte”></font>
	Você pode definir o tamanho da fonte de várias formas diferentes.
	Por padrão, usamos o px. No entanto, você pode utilizar outras unidades de medida. Mais adiante, falaremos sobre as medidas.
Dica!
Não se esqueça de inserir a unidade de medida ao alterar o tamanho da fonte.
<font size = “20px”> seu texto </font>
Tamanho e Estilo do Texto
	Por meio da tag <font> e do atributo face, também conseguimos alterar o estilo da fonte que o texto terá.
<font face =”Verdana”> seu texto </font>
	Vejamos como incluir o atributo face na tag <font>;
	Com a chegada do HTML5 e do CSS3, o W3C orienta que qualquer aplicação de estilos seja feita por meio das folhas de estilo ou CSS.
	Mais adiante, veremos como aplicar o CSS.
Listas
	As listas são um recurso muito utilizado no HTML. Além do uso de listas na criação de tópicos, também é comum aplicar listas em outras funções, como em menus.
	As listas podem ser caracterizadas de três maneiras.
	Lista não ordenada
	As listas não ordenadas apresentam itens sem uma ordem sequencial. Podemos afirmar que são listas de pequenos marcadores.
	Para criar uma lista não ordenada, basta adicionar a tag <ul>. Já os itens são incluídos a partir da tag <li>. Vejamos um exemplo:
<ul>
<li> Fundação </li>
<li> Bradesco </li>
<li> Brasil </li>
</ul>
	Para demonstrarmos os tipos de lista, vamos criar um novo documento.
	Lista ordenada
	Conhecida também como lista numerada, a lista ordenada é utilizada para representar uma sequência ou numeração. A inserção da lista ordenada é feita com as tags <ol> e <li>.
	Vejamos:
<ol>
<li> Fundação</li>
<li> Bradesco</li>
<li> Brasil</li>
</ol>
	Lista de Definição
	A lista de definição é constituída por um termo e uma descrição. A criação desse modelo de lista utiliza três elementos do HTML. Vejamos:
<dl> - cria a lista.
<dt> - define o termo.
<dd> - adiciona a definição.
	A seguir, vamos entender como criamos os links!
Inserção de Links
	Conhecido também como hiperlink, o link é o segredo por trás da internet. A função do link é estabelecer a ligação com outros sites, páginas, imagens, sons e outros elementos.
	Os links podem direcionar o usuário para outra parte de uma mesma página, para outra página no próprio site ou para um arquivo.
	Para criar um link, precisamos de duas informações muito importantes:
· O local de destino de seu link (target)
· O local de origem, em que devemos clicar.
Quando inserimos um link, a tag <a> faz o papel de direcionar a navegação entre as páginas. O elemento a da tag significa action e realiza uma ação quando acionado.
	Para criar o link, o atributo href é obrigatório. Tal atributo guarda o novo endereço para onde o usuário será direcionado.
<a href=”Endereço destino”> Texto para seu link </a>
Inserção de Imagens
	O uso de imagens em páginas web é indispensável tanto por uma questão estética quanto para compreensão do conteúdo. O HTML possui uma tag específica para a inclusão de imagens.
	A tag <img> possibilita trabalhar com imagens. Os atributos dessa tag auxiliam na definição do tamanho, da posição e da descrição da imagem.
<img src=”Local onde está a imagem”>
	Vamos ver isso na prática?
Tabelas
	As tabelas sempre foram de extrema importância no HTML. No dia a dia de um profissional que trabalha com desenvolvimento web, o uso de tabela já foi essencial.
	A facilidade ao incluir imagens e textos tornava o uso das tabelas bem menos trabalhoso, sobretudo na organização dos layouts.
	Com a chegada dos aparelhos móveis, o uso de tabelas na composição de layout diminuiu consideravelmente. Ainda assim, as tabelas são usadas para exposição de dados e criação de relatórios.
	Para criar uma tabela, precisamos de três tags <table>, <tr> e <td>.
Não há como criar uma tabela sem usar a tag <table>. Table significa tabela, em inglês.
	Vamos praticar!?
	Agora, iremos criar uma tabela básica. Com esse exercício, vamos entender o funcionamento e a montagem de uma tabela em HTML.
	Como vimos, para criar uma tabela, são três as tags básicas. Nas tags para vê-las representadas na estrutura da tabela a seguir.
<table> - Tabela
	
	<td> - Coluna
	
	<tr> - Linha
	Com essas três tags básicas, conseguiremos criar a seguinte tabela:
<table>
 <tr>
 <td> Fundação Bradesco </td>
 <td> Apostila </td>
</tr>
 </table>
	Vamos ver como!
	Agora que já vimos quase toda a parte de estrutura básica do HTML, vamos conhecer os últimos itens.
Formulários – Forms
	A interação de um site com o usuário pode ser feita de diversas maneiras. Por exemplo, uma animação que chama atenção para um fato, um botão que aciona músicas ou um formulário que envia mensagens, e-mails, chats e dados ao servidor.
	Você sabe o que é um formulário?
Às vezes, e preciso enviar informações ao servidor. Os formulários cumprem esse papel. Por meio dos formulários, os dados são coletados e enviados ao servidor posteriormente,
	De modo geral, o formulário é composto de:
· Text área – campo de texto.
· Radio buttons – botões radiais.
· Checkboxes – caixas de seleção.
· Outros widgets – componentes.
Dica rápida!
Quando construímos um formulário, devemos lembrar que quanto menor for o número de campos a serem preenchidos, maior será a chance de manter o usuário no site ou de converter o interesse do usuário em cadastro.
Formulários – Forms
	Para criar um formulário, temos de usar uma tag específica. A tag <form> é a responsável por essa função. Vejamos:
<form action=”” method =” “> </form>
	Os atributos na tag <form> não são obrigatórios. No entanto, os padrões recomendam a definição de valores para os dois atributos a seguir:
Action
	O atributo action define o destino dos dados que foram coletados. De modo geral, o valor inserido nesse atributo é um URL.
Method
	O atributo methoad tem a função de definir o método do HTTP que será usado para enviar os dados – GET ou POST.
	Quando clicamos em um link da tag <a>, o link utiliza o método GET. O método GET possui capacidade para 1024 caracteres e é utilizado para passar pequenas informações ao servidor.
	Vamos observar alguns detalhes sobre a criação do formulário. Nos números abaixo:
<form action=”/deixaremos-em-branco” method=”post”> 
 	 <label> Text: </label>
 1	 <input type=”text”>
  	<label> Password: </label>
 	 <input type=”password”>
  3	<label> Textarea: </label>
 	 <textarea> </textarea >		2
</form>
1
	Observe que inserimos duas tags <input> com types diferentes para demonstrar a finalidade de cada uma. O atributo type da tag <input> é o mais importante. Tal atributo define como o elemento deve comportar-se.
2
	Também inserimos uma tag <textarea> para verificar a diferença dela com a tag <input> do tipo text.
3
	Por fim, inserimos uma tag <label> para cadaelemento, a fim de facilitar a identificação de cada um.
	Que tal ver como criar um formulário?
	Com você acompanhou na demonstração, temos três campos de coleta de dados. No entanto, ainda falta um elemento comum a todos os formulários: o botão enviar ou cadastrar.
	A seguir, veremos como inserir o botão!
	Para criar um botão, usaremos a tag <button>. Apesar de parecer óbvio, a tag button pode apresentar mais de um comportamento. O comportamento da tag button depende de seu type, que pode ser de três tipos.
Type submit
O type submit envia os dados do formulário à página-destino do atributo actions.
Type reset
O type reset redefine todos os campos para padrão, assim que acionado.
Type button
Uma tag button com o type button não realiza nenhuma ação, a não ser que seja acionada via codificação javascript.
	Vamos ver como inserir um botão em nosso formulário?
Type checkbox
	De modo geral, o imput com atributo type e valor checkbox são usados em questões com opções de escolha – sim ou não, por exemplo.
	Podemos selecionar mais de um checkbox. Isso torna o valor checkbox muito recomendado para opções de múltiplas escolhas.
Type Radio
	Agora vamos entender como o Type Radio se comporta?
Tag <select>
	A tag <select> é formada por um conjunto de opções <option>. Tais opções fornecem ao usuário uma lista organizada no formato drop-down.
	Vejamos:
<select>
 <option value=”verde”>Verde</option>
 <option value=”vermelho”>Vermelho</option>
 <option value=”azul”>Azul</option>
 <option value=”alpha”>Alpha</option>
 </select>
	A tag <select> é uma tag não nula. Isso significa que ela deve conter abertura <select> e fechamento </select>, além das opções inseridas. Veja um exemplo a seguir:
<option value=”valor a ser enviado ao servidor”> Texto Aqui </option>
	Vamos ver como aplicar a tag <select>?
Type Hidden – oculto
	O type hidden torna o campo input invisível para o usuário, permitindo, dessa forma, a passagem de dados para o servidor sem a necessidade de interação com o usuário.
	Vamos ver como funciona o type hidden na prática?
Composição de Página HTML
	Ao visitar um site, as páginas não são apenas textos e formulários.
Sem dúvida, a busca pela melhor experiência do usuário é a maior preocupação de empresas e profissionais da área de desenvolvimento web.
	Agora que você conhece as tags básicas para a composição de uma página HTML, é essencial que sua página tenha mais do que uma boa estrutura. A página deve ter, também, uma boa aparência. Mas isso já é assunto para o próximo tópico. Preparado?
	Antes de aprender a modificar a aparência de uma página HTML, que tal reforçar o que aprendemos sobre a estrutura por meio de exercícios?
Exercícios de Fixação
	Agora, veja o quanto você sobre o assunto tratado neste tópico. Realize os exercícios a seguir e aproveite para fixar melhor os conceitos vistos até aqui.
	Questão 1
	Você explicou a um estagiário sob sua supervisão que o HTML é considerado a linguagem base da internet e que é o acrônimo de Hypertext Markup Language (Linguagem de Marcação de Hipertexto, em português).
	Com relação à estrutura básica do HTML, marque V para verdadeiro e F para falso, considerando as informações a seguir.
informações 				V		F
Em HTML, existem tags que são	X
consideradas nulas, ou seja, que
 possuem um autofechamento.
As metatags são tags que fornecem	X
 dados aos navegadores e motores de
 busca sobre o documento HTML em 
que estão inseridas.
O Doctype é uma declaração com o			X
 tipo de documento de sua página 
web, pois sem a especificação explícita,
 o navegador não seria capaz de
 renderizar o documento HTML.
Os atributos são informações				X
 inseridas nas tags para que tenham
 o comportamento desejado, sendo
os mesmos para todas, permitindo a 
melhor definição do código HTML.
	Questão 2
	Em seu trabalho, você precisou avaliar um código HTML que apresenta a seguinte linha:
		<”DOCTYPE	HTML>
	Essa linha de código se caracteriza por:
( ) definir o nome do arquivo HTML.
( ) ser precedida da tag </html>.
( ) determinar o tipo de documento que possui a extensão doc.
( X ) especificar ao navegador o tipo de documento HTML.
Encerramento do Tópico
	Neste tópico, aprendemos sobre a estrutura básica da linguagem HTML.
	Além disso, conhecemos os procedimentos próprios da escrita dos códigos, como a aplicação dos separadores, a formatação dos cabeçalhos, rodapés, tamanho e estilos de textos.
	Vimos também como inserir links, imagens, atributos, listas, tabelas e formulários.
	Caso ainda tenha dúvidas, você pode voltar e rever o conteúdo.
	Vamos prosseguir em nossos estudos? Siga para o próximo tópico.
CSS
	Neste tópico, vamos conhecer e aprender a aplicar as propriedades do CSS.
	Conteúdos:
· Propriedades do CSS
· Aparência das páginas HTML.
Ao finalizar este tópico, você será capaz de:
· Reconhecer as propriedades do CSS.
· Modificar a aparência de uma página HTML por meio do CSS.
Você sabe o que significa a sigla CSS e qual sua função nas páginas web?
Cascading Style
Sheets
=
Folha de estilo
em cascata
Se as tags HTML definem a estrutura das páginas web, o CSS é o responsável por sua aparência.
Nesse sentido, o CSS foi criado para suprir a necessidade de dar mais autonomia à formatação de conteúdos. Além disso, o CSS facilita o reuso de regras.
Folha de Estilo em cascata – Cascading Style Sheets (CSS)
	A partir de agora, vamos conhecer e aprender a aplicar o CSS. Preparado? Navegue pelas setas a seguir entender como o CSS funciona.
Composição de Página HTML
	Como vimos, o objetivo principal do CSS é formatar as informações entregues pelo HTML.
	A ligação do CSS com a página de conteúdos pode ser feita de formas distintas – a partir de atributos, seletores, classes e propriedades para aplicar as regras contidas no CSS.
	Ao criar uma folha de regras CSS, precisamos salvar o documento da maneira correta. Assim como imagens e vídeos têm suas próprias extensões, as folhas de estilo também possuem uma extensão específica.
A extensão dos arquivos CCS é .css.
Tipos de CSS
	Acabamos de ver que o CSS pode ser aplicado no conteúdo HTML de diferentes maneiras:
· Inline – diretamente no HTML.
· Incorporado – por meio da tag <style>, no topo de página, dentro da tag <head>.
· Linkado ou externo – por meio da tag <link>, de modo a vincular o HTML a uma folha de estilos externa.
Agora vamos praticar? Iremos começar pelo CSS inline!
Vamos lá!
CSS Inline
	O CSS inline é adicionado junto ao código HTML por meio do atributo style. Isso permite atribuir novas propriedades e alterar o visual do elemento. Vejamos:
<p style=”color: red; font-size: 30px”> Texto aqui </p>
	Na demonstração a seguir, veremos a aplicação em uma estrutura HTML por meio do atributo style. Observe que essa aplicação é feita junto ao código HTML.
Agora, vamos ao CSS incorporado!
CSS Incorporado
	O CSS incorporado é declarado no início do código HTML e deve ser adicionado dentro da tag <head>. Nesse caso, precisamos abrir e fechar a tag <style>.
	Vejamos:
<style>
     p{
          color : blue; 
          font-size: 30px
          }
</style>
	Vamos ver essa aplicação na prática?
CSS Linkado ou Externo
	
	Imagine que você desenvolveu um site com várias páginas. Depois de um ano, você precisa trocar o tamanho da fonte (letra) de cada um dos textos.
	Provavelmente, você terá bastante trabalho, certo? Imagine ter de alterar a formatação de cada texto, um a um! Para evitar esse trabalho, uma folha de estilos externa pode ajudar.
Quando criamos uma folha de estilo separada do arquivo.html, essa folha pode ser ligada a várias páginas HTML ao mesmo tempo. Com isso, a manutenção é feita de modo muito mais rápido. Por conta disso, o CSS linkado ou externo é o mais utilizado.
	Vamos continuar a explicação sobre CSS
CSS Linkado ou Externo
	O CSS linkado, também conhecido como Externo, é aquele cujas regras css são declaradas em um documento a parte do documento HTML, ou seja, é necessário criar um arquivo com a extensão .css separado do arquivo .html.
	A ligação entre a página HTML e a folha deestilos (CSS) deve ser feita por meio de um link. Segundo as boas práticas para o desenvolvimento web, o link deve ser incluído no cabeçalho na página, dentro da tag <head>.
	O CSS linkado é ideal quando há a necessidade de se aplicar em várias páginas. Vejamos:
<head>
< link rel="stylesheet" type="text/css" href="folhadeestilo.css">
</head>
	A tag link informa ao navegador que há uma folha de estilos rel=’stysheet’ do tipo text/css no endereço apontado pelo atributo href. Veja como isso acontece na prática!
Criação de Comentários em CSS
	É importante sabermos que a criação de comentários no CSS é algo bastante simples. Basta inserirmos o conteúdo do comentário entre as barras (/**/). Vejamos:
/* Tudo o que estiver entre as barras vira comentário */
	Simples mesmo, não é?! Mais adiante, iremos praticar a inserção de comentários na folha de estilos CSS.
	Vamos em frente!
Atributos ou Propriedades e Classes
	Você sabe o que é um atributo? E uma classe? 
Atributos
Os atributos ou propriedades são informações de um elemento que permitem a formatação total de sua aparência, posição, dimensão e outros aspectos.
Desse modo, são exemplos de atributos a borda, o background, a largura e a altura.
Classes
Já as classes são um conjunto de atributos predefinidos com o objetivo de formatar um elemento. Esse conjunto de informações facilita a configuração dos elementos HTML.
Podemos aplicar a mesma classe em vários elementos distintos. Lembre-se! As classes são um tipo de seletor.
Seletores
	Você sabe para que serve um seletor?
Os seletores são as declarações que o CSS utiliza para identificar os elementos do HTML. Por meio dos seletores, podemos aplicar a formatação em quase qualquer parte de uma página web.
	Algumas das tags que aprendemos também são seletores. Se bem trabalhadas, essas tags podem ser de grande ajuda no dia a dia de um desenvolvedor.
	A estrutura para regras do CSS é:
seletor {propriedades: valor;}
	Existem inúmeros seletores. No entanto, listaremos apenas os amis importantes no quadro a seguir:
Seletor		Formato	Descrição
Universal	 *	 Qualquer elemento.
Tipo elemento	 <e>	 Seleciona qualquer elemento do tipo <e>.
Classe		 .	 Seleciona os elementos que contêm a classe.
ID		 #	 Seleciona o elemento identificado com o ID.
Link		 a	 Seleciona a pseudo-class link.
Hover		:hover	É aplicada quando posicionamos o mouse sobre 		o elemento.
	Veremos mais sobre os seletores adiante!
Propriedades de Folha de Estilo
	Na tabela que acabamos de ver, pudemos notar que tanto as classes como o ID são seletores. Nesse sentido, ambos desempenham um papel fundamental no desenvolvimento web.
	No CSS, as classes possuem uma função muito importante. Vamos entender por quê!
O ID possibilita a identificação de um elemento por vez. Já as classes permitem identificar mais de um elemento ao mesmo tempo e aplicar formatação de forma exemplar.
Saiba mais
Tabela de Seletores
Reveja os seletores listados no quadro a seguir.
	Seletor		Formato		Descrição
	Universal	 *		Qualquer elemento.
 Tipo elemento	 <e>		Seleciona qualquer elemento do
					Tipo <e>.
	Classe		 .		Seleciona os elementos que
					contêm a classe.
	ID		 #		Seleciona o elemento 
					identificado com o ID.
	Link		 a		Seleciona a pseudo-class link.
	Hover		:hover		É aplicada quando 
					posicionamos o mouse sobre 
					o elemento.
	Aplicação no CSS	
	Na folha de estilo, a propriedade class vem precedida por um ponto (.).
	.nomedaclasse { propriedade: valor;}
	Aplicação no HTML
	
<p class=’nome da classe’>Seu texto </p>
	
É possível aplicar mais de uma class em cada elemento:
	
	<p class=’primeira da classe segunda class’> Seu texto </p>
	
	Também podemos adicionar a mesma class em vários elementos:
	<p class=’primeira da classe’>Primeiro parágrafo</p>
	<p class=’primeira da classe’>Segundo parágrafo</p>
	<p classe=’primeira da classe’>Terceiro parágrafo</p>
Propriedades de Folha de Estilo
	Uma coisa muito importante que devemos saber sobre o ID é que ele deve ser único nos elementos. Vamos entender melhor por meio de uma analogia?
	Pense em seu número de CPF. Não há repetição de número de CPF, certo?
	O ID funciona do mesmo modo! Não existe um número de ID igual a outro.
	Agora, vejamos as formas de descrição do ID no CSS e no HTML.
	Aplicação no CSS
	No CSS, o ID deve ser descrito da seguinte forma:
	#seuID {propriedade: valor;} Exemplo: #menu{ border: 5px;} #footer { top: 30px;}
	Aplicação no HTML
	Já no HTML, o ID deve ser registrado do seguinte modo:
	<p id=’paragrafo1’>Seu texto</p>
	<div id=’amigo1> Seu texto </div>
	Dica rápida!
	É muito importante não utilizarmos o mesmo nome para os IDs e as classes. Desse modo, evitamos conflitos. Também não é aconselhável colocar ID e class no mesmo elemento. No entanto, isso é possível. Vejamos:
<p id=’amigo 1’ class=’amigo2’> Seu texto </p>
<p id=’amigo3’ class=’amigo2’> Seu texto </p>
Inserção de Imagens
	Pode parecer um pouco estranho, mas podemos inserir uma imagem na página web por meio do CSS. A propriedade que possibilita a inserção de imagem pelo CSS é o background. A propriedade background é dividida em vários modos e pode assumir valores específicos.
Background-color
	Define a cor do fundo de um elemento.
Background-image
	Insere uma imagem como fundo do elemento.
Background-size
	Confira o tamanho de imagem no elemento.
Background-position
	Define a posição da imagem em relação à caixa.
Background-attachment
	Define se a imagem de fundo rolará com a tela.
Background-repeat
	Define se a imagem de fundo pode se repetir ou não.
Formatação de Listas com Propriedades CSS
	
	Já aprendemos a crias listas no HTML, certo? Agora, iremos aprender a modificar a aparência das listas. Com isso, poderemos tornar as listas visualmente mais atraentes. 
	Para modificar a aparência das listas, o CSS oferece uma propriedade exclusiva de formatação a list-style. Tal propriedade é dividida em três características.
1
	List-style-type
		O list-style-type é responsável por configurar o tipo de marcador que a lista irá utilizar.
2
	List-style-position
	O list-style-position define a posição do marcador da lista.
3
	List-style-image
	O list-style-image define se os marcadores da lista serão imagens.
	Agora, você sabe como criar listas com diferentes aparências!
Exercícios de Fixação
	Agora, veja o quanto você sobre o assunto tratado neste tópico. Realize os exercícios a seguir e aproveite para fixar melhor os conceitos vistos até aqui.
	Questão 1
	Atuando como programador web, você sabe que o Cascading Style Sheets (CSS) foi criado para suprir a necessidade de dar mais autonomia à formatação de conteúdo.
	Marque V para verdadeiro e F para falso, considerando as informações a seguir, sobre as funcionalidades desse recurso.
Informações						v	f
Uma folha de regras CSS pode ser associada a um		X
 único documento HTML.
O objetivo principal do CSS é formatar as informações	X
 entregues pelo HTML.
No CSS linkado, é necessário criar um arquivo com a 	X
extensão .css separado do arquivo .html.
O CSS inline é declarado no início do código HTML, 		X
e deve ser adicionado dentro da tag <style>.
	Questão 2
	Seu supervisor pediu que você editasse uma página HTML5 para vincular um arquivo chamado arq1.css.
	Para isso, no cabeçalho da página, você deve inserir:
( ) <import type=”text/css” href=”arq1.css”>.
( ) <link rel=”stylesheet” type=”file/css” src=”arq1.css”>.
( x ) <link rel=”stylesheet”type=”text/css”href=”arq1.css”>.
( ) <external link rel=”stylesheet” type=”text/css” href=”arq1.css”>.
Encerramento do Tópico
	Neste tópico, conhecemos as propriedades do CSS e aprendemos a aplicá-las.
	Vimos também as diferenças entre os atributos, as classes e as funções desempenhadas pelos seletores.
	Além disso, aprendemos sobre os procedimentos para a aplicação das propriedades de folha de estilos, a inserção de imagens, a formatação de listas, o uso das cores e a criação de comentários em CSS.
	Caso ainda tenha dúvidas, você pode voltar e rever oconteúdo.
	Você está prestes a concluir o capítulo.
	Na tela Síntese, disponibilizamos, para facilitar seus estudos, um PDF com um resumo dos conteúdos abordados neste capítulo.
Síntese
	Navegue no mapa conceitual que sintetiza o conteúdo que acabamos de trabalhar. Todas as ramificações dos tópicos apresentados.
CAPÍTULO 2
TABLELESS E HTML5
Conceito Tableless e HTML5
	Neste tópico, vamos conhecer o conceito tableless e o surgimento do HTML5.
	Conteúdos:
· Conceito tableless
· Surgimento do HTML5.
Ao finalizar este tópico, você será capaz de:
· Entender as boas práticas do desenvolvimento web.
· Conhecer a estrutura do HTML5.
· Enumerar as vantagens do HTML5.
Linguagem HTML
	Vamos acompanhar um breve histórico do desenvolvimento da internet e dos navegadores?
1
	No início do desenvolvimento da internet, a quantidade de navegadores disponíveis era muito limitada.
2
	Nesse contexto, o número de usuários que utilizava a internet não se comparava ao atual. No entanto, havia a necessidade do desenvolvimento de páginas webs.
3
	A quantidade de pessoas com acesso à internet começou a crescer em 1995, quando a Microsoft lançou o Internet Explorer.
4
	Com o lançamento desse navegador, teve início a famosa guerra dos navegadores entre Netscape e Internet Explorer.
5
	Atualmente, os sites são desenvolvidos com formas gráficas, imagens, vídeos e outros recursos. Na época da guerra dos navegadores, as páginas eram feitas apenas com textos.
6
	Nesse contexto, os desenvolvedores adotaram as tabelas para construção de layouts. O uso das tabelas tinha como objetivo deixar a aparência dos sites mais usual e amigável. A técnica do uso de tabelas ficou conhecida como "layout" com tabelas.
	Como já vimos, o W3C é o consórcio responsável pelo desenvolvimento de padrões para a criação de conteúdos na web. O W3C defende que códigos em HTML devem desempenhar o papel para o qual foram criados. Nesse aspecto, as tabelas foram criadas para exibir dados tabulados, e não para desenvolver layouts.
	Segundo os padrões do W3C, os sites são divididos em três camadas. 
Informação
A camada de informação deve ser desenvolvida com códigos HTML ou XHTML.
Formatação
A camada de formatação deve utilizar folha de estilo (CSS) para formatação das informações.
Comportamento
A camada de comportamento deve usar Java script ou Ajax para definir o comportamento mediante as ações dos usuários.
Tableless
	Um site que utiliza os padrões desenvolvidos pelo W3C é considerado um site Tableless. Desse modo, um site Tableless não usa tabelas na composição de seu layout.
	No lugar das tabelas, um site Tableless utiliza as três camadas (informação, formatação e comportamento).
	Em HTML, existe um elemento que auxilia a composição de sites Tableless. Você sabe de que elemento estamos falando?
	As divs <div> são essenciais na composição de sites Tableless!
	Vamos adiante para entender o que é uma div.
Divs
	Você conhece sites que usam div em sua estrutura? Antes de responder, precisamos compreender melhor o que é uma div.
	O nome div vem da palavra divisão. Nesse sentido, a função da div é dividir trechos de códigos HTML. Dessa forma, podemos incluir outros elementos dentro da tag div e formatar o bloco de elementos individualmente. Por exemplo: imagens, links, textos, listas.
Em outra palavras, a div serve como container para os outros elementos. Tais containers possibilitam a criação de camadas para organizar a página web.
	Observe um exemplo:
< !DOCTYPE htm1>
<htm1>
<head>
 <meta charset=”UTF-8”>
 <title>Document</title>
 <link rel=”stylesheet” type=”text/css” href=”folhadeestilo.css”>
</head>
<body>
<div>
 <h1> O título </h1>
 <p> Aqui vai o texto </p>
 <img ׀src=’endereço da imagem’ alt=’ descrição curta da imagem’>
</div>
</body>
</htm1>
O título
Aqui vai o texto
	Vamos descobrir como trabalhar com as divs?
Identificação da div
	Para identificar uma div específica, você pode utilizar o atributo ID.
	<div id=’divtexto’>
		<h1> O título </h1>
		<p> Aqui vai o texto </p>
		<img src=’endereço da imagem’ alt=’descriçãp curt a da imagem’>
</div>
Formatação em divs diferentes
	Para usar a mesma formatação em várias divs diferentes, podemos utilizar o atributo CLASS. Por exemplo, se precisarmos usar a mesma formatação em vários blocos de texto da página.
	<div class=’configtexto’>
		<p> Aqui vai o texto </p>
	</div>
Utilização de dois atributos juntos
	Também podemos utilizar os dois atributos juntos, caso precisemos adicionar uma formatação.
	<div id=’divtexto’ class=’configtexto’>
		<h1> O título </h1>
		<p> Aqui vai o texto </p>
		<im src=’endereço da imagem’ alt=’descrição curt a da imagem’>
</div>
HTML
	Você conhece as diferenças entre HTML4 e HTML5? Vamos ver o que um especialista tem a dizer sobre as novidades que o HTML5 traz e as mudanças em relação ao HTML4.
	Agora, precisamos colocar em prática tudo que aprendemos, certo?
	Para isso, vamos elaborar uma página web seguindo as boas práticas de desenvolvimento web.
	Antes de começar, vamos fixar o que aprendemos até aqui?
Exercícios de Fixação
	Agora, veja o quanto você sobre o assunto tratado neste tópico. Realize os exercícios a seguir e aproveite para fixar melhor os conceitos vistos até aqui.
	Questão 1
	Um estagiário sob sua supervisão perguntou o que é um site Tableless, e você explicou que se trata de um site que utiliza os padrões desenvolvidos pelo W3C, que não usa tabelas para a composição do layout.
	Marque V para verdadeiro e F, considerando as demais informações a seguir, que você repassou ao estagiário, sobre os sites Tableless.
informações 						V	F
Uma das vantagens de trabalhar com sites Tableless	X
 é a sua facilidade de manutenção.
Tableless utilizam tag <div> e informações contidas	X
 em folhas de estilo para posicionamento dos 
elementos.
A técnica Tableless não recomenda a utilização de		X
 elementos de tabela em páginas HTML, em 
nenhuma hipótese.
Para criar um site Tableless, não é necessário ao 		X
usuário possuir conhecimento aprofundado em 
HTML e CSS.
	Questão 2
	Como programador de TI, você está desenvolvendo uma página web utilizando HTML e CSS com a técnica Tableless.
	Nesse caso, para o uso da mesma formatação em diferentes divs, você deve utilizar:
( ) <div><multiple>
 <p> Aqui vai o texto </p>
 </multiple>
 </div>
( ) <div ids=’multiple’>
 <p> Aqui vai o texto </p>
 </div>
( x ) <div class=’multiple’>
 <p> Aqui vai o texto </p>
 </div>
( ) <div id=’divtexto’ classes=’multiple’>
 <p> Aqui vai o texto </p>
 </div>
Encerramento do Tópico
	Neste tópico, você aprendeu o conceito tableless e a evolução do HTML ao longo dos anos. Além disso, você conheceu os padrões para a criação de conteúdos na web e as diferenças entre HTML4 e HTML5.
	Caso ainda tenha dúvidas, você pode voltar e rever o conteúdo.
	Vamos prosseguir em nossos estudos? Siga para o próximo tópico.
Simulação: Elaboração de Página Web
	Neste tópico, iremos elaborar uma página web seguindo as boas práticas do desenvolvimento web.
	Conteúdos:
· Etapas do desenvolvimento de uma página web.
Ao finalizar este tópico, você será capaz de:
· Elaborar uma página web seguindo as boas práticas de desenvolvimento web.
Editores de Texto HTML
	Se chegamos até aqui, significa que aprendemos muita coisa, certo?
	Agora, precisamos colocar em prática tudo o que aprendemos! Para isso, vamos precisar de um editor de texto mais eficaz do que o Bloco de notas.
	A quantidade de editores de texto disponíveis é muito grande. Os editores são essenciais para o desenvolvimento das páginas web, já que possuem funções que auxiliam o desenvolvedor, como autofechamento, autocomplete, diferenciação de trechos do código por cores, entre outras.
Coda, Textmate, Dreamweaver, Sublime Text, Notepad ++ e muitos outros aplicativos existem para essa função. No entanto, existe um editor de texto que vem se destacando dos demais. Além de uma interface limpa e clara, esse editor possui recursos extremamente funcionais e fáceis.
	Vamos descobrir que editoré esse?
Editor Sublime
O editor Sublime Text possui um arquivo que guarda as configurações do software. Com isso, o editor pode ser alterado e configurado do modo mais confortável para o desenvolvedor.
	Isso é uma grande vantagem, não acha? Desse modo, o editor permite que você guarde uma cópia do arquivo em algum lugar seguro e utilize-o para configurar seu Sublime em qualquer lugar que você vá, inclusive no caso de reinstalação.
	O editor também possibilita a inclusão de pluggins para facilitar o trabalho. Dessa forma, o editor fica totalmente curtomizado.
	Agora, usaremos a versão dois do Sublime. Caso você já tenha um editor de texto favorito, fique à vontade para utilizá-lo!
Estrutura de Pasta e Folha de Estilo
	Antes de começar a criar o site, temos de montar uma estrutura de pasta isso irá facilitar e organizar o desenvolvimento.
	Agora que já criamos a estrutura e a folha de estilo, chegou a hora de vincular o HTML ao CSS.
Container Principal
	Nosso próximo passo é criar um container. Em outras palavras, iremos criar uma caixa para todos os elementos.
	Existem várias tags que podem servir de container para outros elementos, como <section>, <article> e <main>. Como estamos familiarizados com a tag <div>, usaremos essa tag como container principal de nosso site, ok? Vejamos:
	Observe que utilizamos o atributo class para a div e nomeamos a div como ‘container-principal’. Essa medida irá facilitar a aplicação de estilos nos elementos que estiverem dentro da div.
Lembre-se de sempre salvar seu documento!
Menu
	Todo site precisa de um menu de navegação. De modo geral, o menu fica localizado no topo do site, próximo ao logo. Para isso, existem tags específicas.
Com a chegada do HTML5, algumas tags foram criadas para das maior entendimento ao código de uma página HTML. A tag <header> foi uma delas.
	O objetivo da tag <header> é encabeçar o conteúdo do site. Assim como as divs, a tag <header> é o container para outros elementos.
	Agora, em nossa demonstração, vamos começar a criar o menu de nosso site.
Margin e Padding
	Agora que já criamos a base da estrutura, que tal melhorarmos a aparência de nossa página? Abra a página de estilo para definirmos valores para algumas propriedades.
	Por padrão, alguns elementos HTML já têm com valores predefinidos em suas propriedades. Por exemplo, os parágrafos <p> possuem margin e padding nativos. Desse modo, a página mantém o mínimo de legibilidade mesmo que o CSS não seja carregado. E o que são margin e padding? Cada item a seguir para descobrir.
Margin
	A propriedade margin do CSS corresponde à dimensão da margem de cada elemento. Além disso, a margin evita que os elementos fiquem grudados uns nos outros.
	Observe que a parte em azul claro é a margin do elemento. Essa parte ajuda a separar um elemento do outro.
Margin e Padding – Unidades de Medidas
	Para aplicar margin e padding, precisamos saber quais as unidades de medidas disponíveis no CSS.
1
px – pixel
2
pt – ponto
3
em – equivale a, aproximadamente, 16 px
4
% - porcentagem
5
cm – centímetro
6
mm – milímetro
Margin e Padding
	Vimos que alguns elementos possuem padding e margin nativos. Por esse motivo, vamos iniciar resetando a margin e o padding de nossa página.
	Você se lembra da class que colocamos na primeira div que criamos?
	Vamos usar essa class para alterar a cor e o estilo da fonte que nossa página terá. Para isso, utilizaremos as propriedades color e font-family. A propriedade color define a cor que o etxto terá. De modo greal, o valor utilizado para a definição de cor é o hexadecimal. Vejamos:
Nome da propriedade: valor
color:#777;
Definição das Propriedades de uma Class
	Como vimos na explicação sobre o CSS, temos de utilizar o seletor ponto + nome da classe para definir as propriedades de uma class. Vejamos:
.container-principal {font-family: ‘verdana’; color:#777;}
	Nesse caso, estamos definindo que a fonte (letra) dos elementos que tiverem a class container-principal será da família Verdana e a cor será uma tonalidade de cinza (#777).
Fique tranquilo! A fonte Verdana está disponível na maioria dos computadores.
Header
	Agora, vamos inserir formatação para o header.
	A tag header também pode ser usada como seletor. Desse modo, podemos utilizar o nome da tag para inserir um estilo por meio do CSS. No entanto, quando fazemos isso, todos os elementos criados com essa tag terão o mesmo estilo.
	Como iremos ter apenas um header em cada página, isso não será um problema. Na demonstração a seguir, veremos as propriedades da formatação.
Position
	O CSS possui uma propriedade chamada position.
	 A propriedade position trabalha com coordenadas comandadas pelas seguintes propriedades:
· Top – superior
· Left – esquerda
· Right – direita
· Bottom – inferior.
Por definição, os elementos começas todos alinhados à esquerda – left. Caso algum valor seja definido para left, não faz sentindo atribuir valor para right. O mesmo ocorre com relação a top e bottom. Se fizermos isso, ele dará prioridade para o top e p left.
A propriedade position precisa de um ponto inicial para calcular a coordenada e posicionar o elemento na tela.
	Além disso, a prioridade position possui três valores possíveis.
Fixed
	O valor fixed fica o elemento nas coordenadas que atribuirmos. Mesmo com a rolagem da tela, o elemento permanece FIXO na posição definida.
Relative
	O ponto inicial para o cálculo de elementos com position definida como relative é o canto superior esquerdo do próprio elemento.
Absolute
	Diferente do relative, o valor absolute tem como ponto inicial o elemento em que ele está inserido – seu pai.
	No exemplo que acabamos de ver, definimos a position como absolute. Isso significa que a div logo terá como coordenada inicial o top e left do container do qual faz parte – o header.
Como o header tem o tamanho da janela e está no topo da página, a div logo se posicionará no canto superior da tela.
	Também definimos a largura da div logo em 300px e a altura como auto. Dessa forma, a div irá se adequar de modo proporcional ao valor da largura.
	Podemos visualizar o resultado salvando e atualizando o navegador.
Formatação da Imagem
	Agora, precisamos formatar a imagem que inserimos. Observe que a imagem está maior do que a largura que definimos para div logo. Para isso, vamos usar uma técnica conhecida como aninhamento.
	Como já temos um seletor class para nossa div, não precisamos criar outro para a imagem. Iremos aninhar outro seletor. Nesse caso, pode ser o próprio elemento img. Vejamos:
	Perceba que não criamos outra class para <img>, apenas utilizamos a técnica de aninhamento para fazer a configuração.
	Observe também que o width foi definido como 90%. Isso significa 90% de 300px, que corresponde à largura da div logo, e um margin-left de 10%.
	Dessa forma, a imagem do logo terá 280px de largura e 20px de margin-left.
Aparência do Menu
	Para finalizar a formatação do nosso topo, precisamos definir a aparência do menu (<nav>).
	Vejamos o resultado:
Section
	Agora que já definimos o estilo para o topo da página, iremos adicionar a imagem principal da home.
	Em vez de usarmos uma div como container para a imagem principal do site, utilizaremos a tag <section>.
	Section
	O elemento HTML section <section> representa uma seção genérica de um documento ou um agrupamento temático de conteúdos.
	Agora, vamos inserir os textos? Vamos lá!
Pop-ups
	Já configuramos o topo e a imagem principal. Vamos inserir textos na página?
	Para deixar a página mais elegante e com mais interação, utilizaremos pop-ups para mostrar os textos de conteúdo da home.
	O pop-up que iremos inserir não vai abrir em uma nova janela do navegador. Vamos utilizar um conceito conhecido como Janela Modal. A janela modal é uma janela secundária ou janela filha da tela principal. A função dessa janela secundária é fornecer informações importantes para o usuário.
	Para isso, criaremos três divs que vão servir de container para os textos da página. Vejamos:
	<div id=”openmodal” class=”modalDialog”> </div>
	<div id=”openmodal1” class=”modalDialog”>