Curso de Web Design | Como Criar uma Galeria de Imagens - Parte 01: O Html5
Criar uma galeria de imagens para colocar num site, num blog ou mesmo numa loja virtual é algo bem fácil de fazer e traz um resultado bem interessante para estas mídias digitais.
E, nestas próximas postagens estarei ensinando através de 3 vídeo aulas, que irão compor a série “Curso de Web Design”, como fazer uma galeria de imagens de forma fácil e rápida com html5, css3 e javascript.
No primeiro vídeo, o qual está um pouco mais abaixo, ensino o html, no próximo vídeo mostro como criar o css, e no terceiro, o qual encerra o projeto, mostro fazer toda a programação com javascript. Clique Aqui para ver os outros vídeos!
Como Criar uma Galeria de Imagens – Parte 01: O Html5
Neste artigo, o qual é o primeira da série, estarei abordando pontos interessantes sobre a estrutura html5 do projeto para que você possa entender a importância do html no processo de construção.
Aqui você entenderá como a coisa funciona, vendo o porquê de se fazer as coisas por este caminho.
Como de praxe, aqui no artigo procurarei abordar coisas que não falei na vídeo aula, até para que o não sejam 2 conteúdos falando a mesma coisa.
No vídeo iniciarei o projeto galeria de imagens mostrando como é fácil criar o html que define a estrutura. Caso fique alguma dúvida comente, pois é importante que você compreenda tudo.
Aqui recomendo que, ao ver a vídeo aula preste bastante atenção nos elementos que compõe a estrutura, pois, desta forma você não será um webdesigner, programador(a) copy-paste.
Quer Baixar o Arquivo Html5 com os Códigos desta Aula?
Caso, queira fazer o download do projeto que fiz para fazer um comparativo entre o seu código html e o meu, basta preencher o campo abaixo e clicar no botão e já conseguirá fazer o download do projeto.
Curso de Web Design: Aprenda Html5, Css3, Javascript, Php e MySQL em Mais de 28 Horas de Aulas em Vídeo!
Aproveito a oportunidade para te fazer um convite rápido ao meu curso de WebDesign.
Nele ensino o que você precisa saber para criar seus próprios projetos web (sites e aplicativos web) começando do zero. Quando digo do zero, é do zero mesmo.
Para iniciar este curso você só precisa de: boa vontade, conexão com a internet e um dispositivo (computador, notebook ou netbook) com capacidade de rodar, executar os programas que mostrarei. Caso tenha dúvidas sobre o teu equipamento, basta perguntar no chat aqui do portal.
Então, se você quer aprender a trabalhar com html5, css3, javascript, php e mysql para criar sites e/ou aplicativos web seguindo as idéias suas e de seus clientes, Clique Aqui e venha Participar do Curso! Pois, já são mais de 28 horas de aulas em vídeos!
Galeria de Imagens: O Container do Projeto!
Fazer uma galeria de imagens com html5 é algo tranquilo e fácil. Contudo, é necessário entender alguns conceitos, por exemplo, o container.
Se analisar o conceito de galeria de quadros, logo veremos que a própria galeria é um container, afinal, é nela que os que os quadros ficam “contidos”.
Caso tranportássemos o prédio da galeria para um lugar diferente, o que aconteceria com o quadros? Iriam juntos, não concorda?
Aqui o conceito é o mesmo, pois neste projeto, o elemento div será um container (um “prédio”) que nos permitirá manipular (“transportar”), as imagens com mais facilidade, mantendo o visual já definido pelo designer.
Pode parecer meio vago agora, mas quando chegar o momento de criar os estilos css, o container será o ponto de partida.
Containers: Div, Section ou Article?
Para criar um container que conterá todas as imagens e será a referência principal para definir o visual do projeto, utilizaremos a tag div. Todavia, você poderia tranquilamente usar as tags section ou article do html5.
Utilizar uma tag diferente afetará a semântica do projeto, mas a aparência permaneceria a mesma, uma vez que é responsabilidade do css3 estabelecer o visual.
Galeria de Imagens: Definindo os Itens com List Item (tag li)!
Além do container, temos também os itens que compõe o projeto, o qual ficarão responsáveis por envolver cada imagem de modo isolado.
Na galeria, o container envelopará todas as imagens de uma vez só, mas o item list receberá apenas uma imagens.
Como elemento para conter cada imagem usaremos a tag li (list item), que normalmente é utilizado para criar itens de lista.
Ao usar a tag li faz-se necessário trabalhar também com a tag ul ou ol, afinal, semanticamente falando, não tem sentido usar um item de lista fora de uma lista.
Apenas uma observação, utilizar aqui a tag ul (unordered list) ou a tag ol (ordered list) não tem diferença visual, pois no css deve-se remover os marcadores de item (a numeração no caso das listas ordenadas e as bolinhas no das não ordernadas).
Caso opte por, em vez de fazer com li (item da lista), fazer com figure, recomendo que, não utilize a tag ul ou a ol.
Projeto Completo: Todas as Vídeos Aulas da série Como Fazer uma Galeria de Imagens!
No momento, em que escrevo, todas as vídeo aulas do projetos já estão publicados num artigo postado aqui no blog. Então, Clique Aqui para ver os vídeos ensinando como fazer os estilos css e como criar os script javascript.
Tem Dúvidas? Deixe um comentário!
Espero que tenha gostado da aula e se está curtindo o conteúdo postado aqui no portal, deixe um comentário, um like, compartilhe com seus amigos, me ajudando assim a divulgar o meu trabalho. Bom, estudo e qualquer dúvida é só comentar.
Quer Ser um Desenvolvedor Front-End e Back-End?
Está querendo estudar desenvolvimento web para se tornar um programador/desenvolvedor back-end e front-end te convido a conhecer o meu curso sobre Desenvolvimento Web, aonde Ensino como Trabalhar com Html5, Css3, Javascript, Php e Sql (MySQL e MariaDB) para criar projetos para Web como Sites e Aplicativos Web. Atualmente o curso possui mais de 31 Horas de Aulas em Vídeo e mais de 100 Vídeos Aulas prontas. Clique Aqui e Venha conhecer o Curso!
