Olá Pessoal.
A melhor maneira de aprender a criar páginas para WEB é praticando. Para facilitar o desenvolvimento desta atividade, primeiro vamos ter em mãos as anotações do caderno e o material do blog:
Material
- Introdução ao HTML 5 – https://www.blogson.com.br/introducao-ao-html-5/
- Introdução ao BootStrap – https://www.blogson.com.br/introducao-ao-bootstrap/
Material extra
Caso queria consultar outras fontes o W3Schools é a minha fonte de consulta favorita, ele trás exemplos de todos os códigos. O material do W3Schools é em inglês, mas bem simples de compreender.
Exercício – Criar uma página de produto
Seguindo o exemplo usado em aula, vamos criar agora uma página para produto com o visual semelhante a este;
aba fotos:
Usando as classes img, img-responsive e img-thumbnail
aba comentários:
O que deve ser feito?
- Criar uma página semelhante a mostrada acima.
- Utilizar o Google WebFonts.
- Estilizar a página com BootStrap.
- Utilizar as classes de DIV container, row e col-md para criar o layout da página.
- Utilizar glapicon no botão de compra.
- Pesquisar na documentação do Bootstrap como utilizar o componente panel e implementar na sua página. Veja um exemplo aqui: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_panels_contextual&stacked=h
- Pesquisar na documentação do Bootstrap como utilizar o componente nav e implementar na sua página. Veja um exemplo aqui: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs_dynamic&stacked=h OBS: Este componente necessita de JQuery. Acrescente no head do seu HTML o código a seguir;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
- Incorporar um vídeo do Youtube na página. Veja a aula aqui.
Só isso!
Bons estudos.