caelum - html - css - javascript - php, Notas de estudo de Gestão de Recursos Humanos

Baixe caelum - html - css - javascript - php e outras Notas de estudo em PDF para Gestão de Recursos Humanos, somente na Docsity!

Conheça mais da Caelum.

Cursos Online

www.caelum.com.br/online

Blog Caelum

blog.caelum.com.br

Newsletter

www.caelum.com.br/newsletter

Facebook

www.facebook.com/caelumbr

Twitter

twitter.com/caelum

Casa do Código

Livros para o programador

www.casadocodigo.com.br

Sumário

Õ Sobre o curso - o complexo mundo do front-end Õ Õ.Õ O curso e os exercícios.......................................... Õ Õ.ó O projeto de e-commerce........................................ ó Õ.ì Tirando dúvidas com instrutor..................................... ó Õ.¦ Tirando dúvidas online no GUJ..................................... ó Õ.¢ Bibliografia................................................. ì Õ.ä Para onde ir depois?............................................ ì

ó Introdução a HTML e CSS ¦ ó.Õ Exibindo informações na Web...................................... ¦ ó.ó Sintaxe do HTML............................................. ß ó.ì Estrutura de um documento HTML.................................. ß ó.¦ Tags HTML................................................ É ó.¢ Imagens................................................... Õþ ó.ä A estrutura dos arquivos de um projeto................................ ÕÕ ó.ß Editores e IDEs.............................................. ÕÕ ó.˜ Primeira página.............................................. ÕÕ ó.É Exercício: primeiros passos com HTML................................ Õ¦ ó.Õþ Estilizando com CSS........................................... Õä ó.ÕÕ Sintaxe e inclusão de CSS......................................... Õß ó.Õó Propriedades tipográficas e fontes................................... ÕÉ ó.Õì Alinhamento e decoração de texto................................... óþ ó.Õ¦ Imagem de fundo............................................. óÕ ó.Õ¢ Bordas.................................................... óÕ ó.Õä Exercício: primeiros passos com CSS.................................. óÕ ó.Õß Cores na Web............................................... óì ó.՘ Listas HTML................................................ ó¦ ó.ÕÉ Espaçamento e margem......................................... óä ó.óþ Exercícios: listas e margens....................................... ó˜ ó.óÕ Links HTML................................................ óÉ ó.óó Exercícios: links.............................................. ìþ ó.óì Elementos estruturais........................................... ìÕ ó.ó¦ CSS: Seletores de ID e filho....................................... ìÕ ó.ó¢ Fluxo do documento e float....................................... ìó ó.óä Exercícios: seletores CSS e flutuação de elementos.......................... ìì ó.óß O futuro e presente da Web com o HTML¢.............................. ì¢

ì HTML semântico e posicionamento no CSS ìß ì.Õ O processo de desenvolvimento de uma tela............................. ìß

i

ì.ó O projeto Mirror Fashion........................................ ìÉ ì.ì Analisando o Layout........................................... ¦þ ì.¦ HTML semântico............................................. ¦ó ì.¢ Pensando no header............................................ ¦ì ì.ä Estilização com classes.......................................... ¦¦ ì.ß Exercícios: header semântico...................................... ¦ä ì.˜ CSS Reset.................................................. ¦˜ ì.É Block vs Inline............................................... ¦É ì.Õþ Exercícios: reset e display........................................ ¢þ ì.ÕÕ Position: static, relative, absolute.................................... ¢Õ ì.Õó Exercícios: posicionamento....................................... ¢¦ ì.Õì Exercícios opcionais............................................ ¢¦

¦ Mais HTML e CSS ¢¢ ¦.Õ Analisando o miolo da página...................................... ¢¢ ¦.ó Formulários................................................ ¢¢ ¦.ì Posicionamento com float e clear.................................... ¢ä ¦.¦ Decoração de texto com CSS...................................... ¢ß ¦.¢ Cascata e herança no CSS........................................ ¢˜ ¦.ä Para saber mais: o valor inherit..................................... ¢É ¦.ß Exercícios: menu e destaque....................................... äþ ¦.˜ Display inline-block............................................ äì ¦.É Exercícios: painéis flutuantes...................................... ä¦ ¦.Õþ Seletores de atributo do CSSì...................................... äß ¦.ÕÕ Rodapé................................................... ä˜ ¦.Õó Substituição por Imagem......................................... äÉ ¦.Õì Estilização e posicionamento do rodapé................................ äÉ ¦.Õ¦ Exercícios: rodapé............................................. ßÕ ¦.Õ¢ Para saber mais: suporte HTML¢ no Internet Explorer antigo................... ßì ¦.Õä Exercícios opcionais............................................ ßì

¢ JavaScript e interatividade na Web ߢ ¢.Õ Introdução ao JavaScript......................................... ߢ ¢.ó Console do navegador.......................................... ßä ¢.ì Sintaxe básica............................................... ßä ¢.¦ Exercícios opcionais: fixação de sintaxe................................ ߘ ¢.¢ Interatividade na Web.......................................... ߘ ¢.ä Exercício: validação na busca com JS.................................. ˜Õ ¢.ß Funções temporais............................................ ˜ì ¢.˜ Exercício: banner rotativo........................................ ˜¦ ¢.É Para saber mais: sugestão para o desafio de pause/play....................... ˜¦ ¢.Õþ Para saber mais: vários callbacks no mesmo elemento........................ ˜ä

ii

É.ì Design mobile-first............................................ Õ¦ä É.¦ Progressive enhancement........................................ Õ¦ß É.¢ Box model e box-sizing.......................................... Õ¦˜ É.ä Exercícios: página de produto...................................... Õ¦É É.ß Evoluindo o design para desktop.................................... Õ¢ì É.˜ Media queries de conteúdo....................................... Õ¢ì É.É Exercícios: responsive design...................................... Õ¢¦ É.Õþ HTML¢ Input range............................................ Õ¢ä É.ÕÕ Exercícios: seletor de tamanho..................................... Õ¢ß É.Õó Tabelas................................................... Õ¢ß É.Õì Exercícios: detalhes............................................ Õ¢É É.Õ¦ Exercícios opcionais: fundo....................................... ÕäÕ É.Õ¢ Discussão em aula: importância do Progressive Enhancement na Web atual........... Õäó

Õþ PHP: parâmetros e bancos de dados Õäì Õþ.Õ Submissão do formulário......................................... Õäì Õþ.ó Parâmetros com PHP........................................... Õä¦ Õþ.ì Listas de definição no HTML...................................... Õä¦ Õþ.¦ Exercícios: checkout da compra..................................... Õä¢ Õþ.¢ Exercícios opcionais............................................ Õää Õþ.ä Banco de dados e SQL.......................................... Õäß Õþ.ß MySQL e phpMyAdmin......................................... Õä˜ Õþ.˜ Para saber mais: instalação do MySQL em casa............................ Õä˜ Õþ.É Buscas no MySQL com PHP....................................... Õä˜ Õþ.Õþ Refinando as buscas com WHERE................................... ÕäÉ Õþ.ÕÕ Exercícios: phpMyAdmin........................................ Õßþ Õþ.Õó Exercícios: PHP com MySQL...................................... ÕßÕ Õþ.Õì Busca de muitos resultados....................................... Õßì Õþ.Õ¦ Ordenação dos resultados........................................ Õßì Õþ.Õ¢ Exercícios: mais buscas com PHP.................................... Õßì Õþ.Õä Exercícios opcionais............................................ Õߢ

ÕÕ Bootstrap e formulários HTML¢ Õßä ÕÕ.Õ Bootstrap e frameworks de CSS..................................... Õßä ÕÕ.ó Estilo e componentes base........................................ Õßß ÕÕ.ì A página de checkout da Mirror Fashion............................... Õßß ÕÕ.¦ Exercício opcional: início do checkout sem PHP........................... ÕßÉ ÕÕ.¢ Exercícios: página de checkout..................................... ÕßÉ ÕÕ.ä Formulários a fundo........................................... ՘ó ÕÕ.ß Novos componentes do HTML¢.................................... Õ˜ß ÕÕ.˜ Novos atributos HTML¢ em elementos de formulário........................ ÕÉÕ ÕÕ.É Ícones com glyphicons.......................................... ÕÉó ÕÕ.Õþ Exercícios: formulários.......................................... ÕÉì

iv

ÕÕ.ÕÕ Validação HTML¢............................................. ÕÉä ÕÕ.Õó Para saber mais: controlando as validações HTML¢......................... ÕÉß ÕÕ.Õì Exercícios: validação com HTML¢................................... ÕÉÉ ÕÕ.Õ¦ Grid responsivo do Bootstrap...................................... óþþ ÕÕ.Õ¢ Exercícios: grids.............................................. óþó ÕÕ.Õä Para saber mais: componentes JS do Bootstrap............................ óþ¦ ÕÕ.Õß Exercícios opcionais: navbar e JavaScript............................... óþ¦ ÕÕ.՘ Para saber mais: outros frameworks CSS............................... óþß ÕÕ.ÕÉ Discussão em aula: os problemas do Bootstrap e quando não usá-lo............... óþß

Õó jQuery óþ˜ Õó.Õ jQuery - A função g............................................ óþ˜ Õó.ó jQuery Selectors.............................................. óþÉ Õó.ì Filtros customizados e por DOM.................................... óÕþ Õó.¦ Utilitário de iteração do jQuery..................................... óÕÕ Õó.¢ Características de execução....................................... óÕÕ Õó.ä Mais produtos na home......................................... óÕó Õó.ß Exercícios: jQuery na home....................................... óÕì Õó.˜ O elemento output do HTML¢..................................... óÕä Õó.É Exercícios: mostrando tamanho do produto com jQuery...................... óÕä Õó.Õþ Plugins jQuery............................................... óÕß Õó.ÕÕ Exercícios: plugin............................................. ó՘ Õó.Õó Exercícios opcionais............................................ ó՘

Õì Integrações com serviços Web óÕÉ Õì.Õ Web ó.þ e integrações........................................... óÕÉ Õì.ó iframes................................................... óÕÉ Õì.ì Vídeo embutido com YouTube..................................... óóþ Õì.¦ Exercícios: iframe............................................. óóþ Õì.¢ Exercício opcional: Google Maps.................................... óóþ Õì.ä Botão de curtir do Facebook....................................... óóÕ Õì.ß Exercícios: Facebook........................................... óóó Õì.˜ Para saber mais: Twitter......................................... óóó Õì.É Para saber mais: Google+........................................ óóì Õì.Õþ Exercícios opcionais: Twitter e Google+................................ óó¦ Õì.ÕÕ Fontes customizadas com @font-face.................................. óó¦ Õì.Õó Serviços de web fonts........................................... óó¢ Õì.Õì Exercícios: Google Web Fonts...................................... óó¢

Õ¦ Apêndice - Otimizações de front-end óóß Õ¦.Õ HTML e HTTP - Como funciona a World Wide Web?....................... óó˜ Õ¦.ó Princípios de programação distribuída................................. óìþ Õ¦.ì Ferramentas de diagnóstico - YSlow e PageSpeed.......................... óìþ

v

CZ£‡±¶™ Õ

Sobre o curso - o complexo mundo do front-end

“Ação é a chave fundamental para todo sucesso”

• Pablo Picasso

Vivemos hoje numa era em que a Internet ocupa um espaço cada vez mais importante em nossas vidas pesso- ais e profissionais. O surgimento constante de Aplicações Web, para as mais diversas finalidades, é um sinal claro de que esse mercado está em franca expansão e traz muitas oportunidades. Aplicações corporativas, comércio eletrônico, redes sociais, filmes, músicas, notícias e tantas outras áreas estão presentes na Internet, fazendo do navegador (o browser) o software mais utilizado de nossos computadores.

Esse curso pretende abordar o desenvolvimento de front-end (interfaces) para Aplicações Web e Sites que acessamos por meio do navegador de nossos computadores, utilizando padrões atuais de desenvolvimento e conhecendo a fundo suas características técnicas. Discutiremos as implementações dessas tecnologias nos diferentes navegadores, a adoção de frameworks que facilitam e aceleram nosso trabalho, além de dicas téc- nicas que destacam um profissional no mercado. HTML, CSS e JavaScript serão vistos em profundidade.

Além do acesso por meio do navegador de nossos computadores, hoje o acesso à Internet a partir de dis- positivos móveis representa um grande avanço da plataforma, mas também implica em um pouco mais de atenção ao trabalho que um programador front-end tem que realizar. No decorrer do curso, vamos conhe- cer algumas dessas necessidades e como utilizar os recursos disponíveis para atender também a essa nova necessidade.

Õ.Õ O h¶§«™ u ™« uìu§h‡h†™«

Esse é um curso prático que começa nos fundamentos de HTML e CSS, incluindo tópicos relacionados às novidades das versões HTML¢ e CSSì. Depois, é abordada a linguagem de programação JavaScript, para en- riquecer nossas páginas com interações e efeitos, tanto com JavaScript puro quanto com a biblioteca jQuery, hoje padrão de mercado.

Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

Durante o curso, serão desenvolvidas páginas de um Site de comércio eletrônico. Os exercícios foram proje- tados para apresentar gradualmente ao aluno quais são as técnicas mais recomendadas e utilizadas quando assumimos o papel do Programador front-end , quais são os desafios mais comuns e quais são as técnicas e padrões recomendados para atingirmos nosso objetivo, transformando imagens estáticas (os layouts) em código que os navegadores entendem e exibem como páginas da Web.

Os exercícios propostos são fundamentais para o acompanhamento do curso, desde os mais iniciais, já que são incrementados no decorrer das aulas. Igualmente importante é a participação ativa nas discussões e debates em sala de aula.

Õ.ó O £§™u±™ ou u-h™““u§hu

Durante o curso, vamos produzir um site para um e-commerce de moda chamado Mirror Fashion. Cons- truiremos várias páginas da loja com intuito de aprender os conceitos de HTML, CSS e JS.

Os conteúdos e o design da loja já foram pré-definidos. Vamos, aqui, focar na implementação, papel do programador front-end.

Õ.ì T†§Z•o™ o·ê†oZ« h™“ †•«±§¶±™§

Durante o curso, tire todas as suas dúvidas com o instrutor. HTML, CSS e JavaScript, apesar de parecerem simples e básicos, têm muitas características complexas que não podem deixar de ser totalmente compreen- didas pelo aluno. Os instrutores também estão disponíveis para tirar as dúvidas do aluno após o término do treinamento, basta entrar em contato direto com o instrutor ou com a Caelum, teremos o prazer em ajudá-lo.

Se você está acompanhando essa apostila em casa, pense também em fazer o curso presencial na Caelum. Você terá contato direto com o instrutor para esclarecer suas dúvidas, aprender mais tópicos além da apostila, e trocar experiências.

Õ.¦ T†§Z•o™ o·ê†oZ« ™•†•u •™ GUJ

Recomendamos fortemente a busca de recursos e a participação ativa na comunidade por meio das listas de discussão relacionadas ao conteúdo do curso.

O GUJ.com.br é um site de perguntas e respostas para desenvolvedores de software que abrange diversas áreas, sendo que front-end é um dos principais focos. A comunidade do GUJ tem mais de Õ¢þ mil usuários e Õ milhão e meio de mensagens. É o lugar ideal pra você tirar suas dúvidas e encontrar outros desenvolvedores.

http://www.guj.com.br

Capítulo Õ - Sobre o curso - o complexo mundo do front-end - O projeto de e-commerce - Página ó

CZ£‡±¶™ ó

Introdução a HTML e CSS

“Quanto mais nos elevamos, menores parecemos aos olhos daqueles que não sabem voar.”

• Friedrich Wilhelm Nietzsche

ó.Õ Eì†f†•o™ †•€™§“Zl¢u« •Z Wuf

A única linguagem que o navegador consegue interpretar para a exibição de conteúdo é o HTML. Para iniciar a exploração do HTML, vamos imaginar o seguinte caso: o navegador realizou uma requisição e recebeu como corpo da resposta o seguinte conteúdo:

Mirror Fashion.

Bem-vindo à Mirror Fashion, sua loja de roupas e acessórios.

Confira nossas promoções. Receba informações sobre nossos lançamentos por email. Navegue por todos nossos produtos em catálogo. Compre sem sair de casa.

Para conhecer o comportamento dos navegadores quanto ao conteúdo descrito antes, vamos reproduzir esse conteúdo em um arquivo de texto comum, que pode ser criado com qualquer editor de texto puro. Salve o arquivo como index.html e abra-o a partir do navegador à sua escolha.

Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

Parece que obtemos um resultado um pouco diferente do esperado, não? Apesar de ser capaz de exibir texto puro em sua área principal, algumas regras devem ser seguidas caso desejemos que esse texto seja exibido com alguma formatação, para facilitar a leitura pelo usuário final.

Usando o resultado acima podemos concluir que o navegador por padrão:

• Pode não exibir caracteres acentuados corretamente;
• Não exibe quebras de linha.

Para que possamos exibir as informações desejadas com a formatação, é necessário que cada trecho de texto tenha uma marcação indicando qual é o significado dele. Essa marcação também influencia a maneira com que cada trecho do texto será exibido. A seguir é listado o texto com uma marcação correta:

Mirror Fashion

Mirror Fashion. Bem-vindo à Mirror Fashion, sua loja de roupas e acessórios.

Capítulo ó - Introdução a HTML e CSS - Exibindo informações na Web - Página ¢

Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

Científico da ABNT. Porém, com o tempo e a evolução da Web e de seu potencial comercial, tornou-se necessária a exibição de informações com grande riqueza de elementos gráficos e de interação.

ó.ó S†•±Zìu o™ HTML

O HTML é um conjunto de tags responsáveis pela marcação do conteúdo de uma página no navegador. No código que vimos antes, as tags são os elementos a mais que escrevemos usando a sintaxe . Diversas tags são disponibilizadas pela linguagem HTML e cada uma possui uma funcionalidade específica.

No código de antes, vimos por exemplo o uso da tag . Ela representa o título principal da página.

Mirror Fashion

Note a sintaxe. Uma tag é definida com caracteres < e >, e seu nome (HÕ no caso). Muitas tags possuem conteúdo, como o texto do título ("Mirror Fashion”). Nesse caso, para determinar onde o conteúdo acaba, usamos uma tag de fechamento com a barra antes do nome: .

Algumas tags podem receber atributos dentro de sua definição. São parâmetros usando a sintaxe de nome=valor. Para definir uma imagem, por exemplo, usamos a tag e, para indicar qual imagem carre- gar, usamos o atributo src:

Repare que a tag img não possui conteúdo por si só. Nesses casos, não é necessário usar uma tag de fecha- mento como antes no h1.

ó.ì E«±§¶±¶§Z ou ¶“ o™h¶“u•±™ HTML

Um documento HTML válido precisa seguir obrigatoriamente a estrutura composta pelas tags , e e a instrução . Vejamos cada uma delas:

A ±Z <„±“>

Na estrutura do nosso documento, antes de tudo, inserimos uma tag . Dentro dessa tag, é necessário declarar outras duas tags: e . Essas duas tags são “irmãs”, pois estão no mesmo nível hierárquico em relação à sua tag “pai”, que é .

Capítulo ó - Introdução a HTML e CSS - Sintaxe do HTML - Página ß

Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

A ±Z <„uZo>

A tag contém informações sobre nosso documento que são de interesse somente do navegador, e não dos visitantes do nosso site. São informações que não serão exibidas na área do documento no navegador.

A especificação obriga a presença da tag de conteúdo dentro do nosso <head>, permitindo especi- ficar o título do nosso documento, que normalmente será exibido na barra de título da janela do navegador ou na aba do documento.

Outra configuração muito utilizada, principalmente em documentos cujo conteúdo é escrito em um idioma como o português, que tem caracteres como acentos e cedilha, é a configuração da codificação de caracteres, chamado de encoding ou charset.

Podemos configurar qual codificação queremos utilizar em nosso documento por meio da configuração de charset na tag <meta>. Um dos valores mais comuns usados hoje em dia é o UTF-˜ , também chamado de Unicode. Há outras possibilidades, como o latinÕ , muito usado antigamente.

O UTF-˜ é a recomendação atual para encoding na Web por ser amplamente suportada em navegadores e editores de código, além de ser compatível com praticamente todos os idiomas do mundo. É o que usaremos no curso.

<html> <head> <title>Mirror Fashion

A ±Z

A tag contém o corpo do nosso documento, que é exibido pelo navegador em sua janela. É necessário que o tenha ao menos um elemento “filho”, ou seja, uma ou mais tags HTML dentro dele.

Mirror Fashion

A Mirror Fashion

Capítulo ó - Introdução a HTML e CSS - Estrutura de um documento HTML - Página ˜

Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

PZ§[§Z€™«

Quando exibimos qualquer texto em nossa página, é recomendado que ele seja sempre conteúdo de alguma tag filha da tag . A marcação mais indicada para textos comuns é a tag de parágrafo :

Nenhum item na sacola de compras.

Se você tiver vários parágrafos de texto, use várias dessas tags

para separá-los:

Um parágrafo de texto.

Outro parágrafo de texto.

MZ§hZl¢u« ou x•€Z«u

Quando queremos dar uma ênfase diferente a um trecho de texto, podemos utilizar as marcações de ênfase. Podemos deixar um texto “mais forte” com a tag ou deixar o texto com uma “ênfase acentuada” com a tag . Também há a tag , que diminui o tamanho do texto.

Por padrão, os navegadores renderizarão o texto dentro da tag em negrito e o texto dentro da tag em itálico. Existem ainda as tags e , que atingem o mesmo resultado visualmente, mas as tags e são mais indicadas por definirem nossa intenção de significado ao conteúdo, mais do que uma simples indicação visual. Vamos discutir melhor a questão do significado das tags mais adiante.

Compre suas roupas e acessórios na Mirror Fashion.

ó.¢ I“Zu•«

A tag define uma imagem em uma página HTML e necessita de dois atributos preenchidos: src e alt. O primeiro aponta para o local da imagem e o segundo, um texto alternativo para a imagem caso essa não possa ser carregada ou visualizada.

O HTML ¢ introduziu duas novas tags específicas para imagem: e . A tag define uma imagem com a conhecida tag . Além disso, permite adicionar uma legenda para a imagem por meio da tag .

Fuzz Cardigan por R$ 129,90

Capítulo ó - Introdução a HTML e CSS - Imagens - Página Õþ

Material do Treinamento Desenvolvimento Web com HTML, CSS e JavaScript

ó.ä A u«±§¶±¶§Z o™« Z§¤¶†ê™« ou ¶“ £§™u±™

Como todo tipo de projeto de software, existem algumas recomendações quanto à organização dos arquivos de um site. Não há nenhum rigor técnico quanto a essa organização e, na maioria das vezes, você vai adaptar as recomendações da maneira que for melhor para o seu projeto.

Como um site é um conjunto de páginas Web sobre um assunto, empresa, produto ou qualquer outra coisa, é comum todos os arquivos de um site estarem dentro de uma só pasta e, assim como um livro, é recomendado que exista uma “capa”, uma página inicial que possa indicar para o visitante quais são as outras páginas que fazem parte desse projeto e como ele pode acessá-las, como se fosse o índice do site.

Esse índice, não por coincidência, é convenção adotada pelos servidores de páginas Web. Se desejamos que uma determinada pasta seja servida como um site e dentro dessa pasta existe um arquivo chamado index.html , esse arquivo será a página inicial a menos que alguma configuração determine outra página para esse fim.

Dentro da pasta do site, no mesmo nível que o index.html, é recomendado que sejam criadas mais algumas pastas para manter separados os arquivos de imagens, as folhas de estilo CSS e os scripts. Para iniciar um projeto, teríamos uma estrutura de pastas como a demonstrada na imagem a seguir:

Muitas vezes, um site é servido por meio de uma aplicação Web e, nesses casos, a estrutura dos arquivos depende de como a aplicação necessita dos recursos para funcionar corretamente. Porém, no geral, as apli- cações também seguem um padrão bem parecido com o que estamos adotando para o nosso projeto.

ó.ß Eo†±™§u« u IDE«

Existem editores de texto como Gedit (www.gnome.org), Sublime (http://www.sublimetext.com/) e Note- pad++ (http://notepad-plus-plus.org) , que possuem realce de sintaxe e outras ferramentas para facilitar o desenvolvimento de páginas. Há também IDEs (Integrated Development Environment), que oferecem re- cursos como autocompletar e pré-visualização, como Eclipse e Visual Studio.

ó.˜ P§†“u†§Z £[†•Z

A primeira página que desenvolveremos para a Mirror Fashion será a Sobre, que explica detalhes sobre a empresa, apresenta fotos e a história.

Capítulo ó - Introdução a HTML e CSS - A estrutura dos arquivos de um projeto - Página ÕÕ