Desde que comecei a aprender sobre HTML nos anos 90, sempre achei quase impossível encontrar bons exemplos sólidos de HTML na Internet. Teria sido bom ter alguns sites que oferecem os mais recentes exemplos de códigos de sites dinâmicos mais interessantes.
Bem, muita coisa mudou desde os anos 90, e o advento de linguagens dinâmicas de codificação da web, como PHP e CSS, realmente tornam o HTML old-school. Então, novamente, você precisa entender o HTML antigo antes de entender as linguagens que criam dinamicamente o HTML exibido pelos navegadores.
Felizmente, agora existem alguns sites incríveis que oferecem exemplos e tutoriais de codificação HTML bem projetados e úteis. Certamente ainda existem muitos sites de tutorial de HTML muito ruins por aí, então decidi reunir oito dos meus sites favoritos.
Devo mencionar que o MUO é provavelmente o primeiro lugar para começar, com artigos interessantes sobre HTML básico. 5 Passos para entender o código HTML básico 5 Passos para entender o código HTML básico Leia mais, efeitos de HTML legal 7 Cool HTML Effects que qualquer um pode adicionar ao seu site 7 Cool HTML Effects que qualquer pessoa pode adicionar ao seu site Não se desespere! Você não precisa saber CSS ou PHP para construir um site sofisticado. Algum bom HTML antigo e saber copiar e colar serve. Leia mais e dicas de HTML 5 HTML Dicas para criar um site rápido carregamento gratuito 5 dicas HTML para criar um site rápido de carregamento gratuito Leia mais para ajudar o seu site carregar mais rápido.
Os oito sites a seguir não apenas oferecem uma base boa e sólida sobre codificação HTML, mas também oferecem o melhor ambiente de aprendizado, com ferramentas que você pode usar para testar o que você aprende.
1. Cão HTML
Um dos meus sites favoritos que eu geralmente verifico primeiro sempre que esqueço a sintaxe básica das instruções HTML é o HTML Dog. O site é bem projetado, ao contrário de 90 por cento dos sites de web design por aí que parecem ter sido construídos nos anos 90 e nunca atualizados. O formato é simples e rápido - basta clicar no link Exemplos na página principal, e você encontrará uma lista de elementos HTML como layout, coloração, texto e muito mais.
O HTML Dog fornece exemplos claros em caixas de códigos em branco que você pode copiar e colar em seu próprio código HTML. Você pode ver a saída HTML real ao vivo do código de amostra no painel à direita.
2. W3Schools
Agora, enquanto o HTML Dog é o meu favorito quando se trata de verificar a sintaxe básica, o W3Schools é o lugar que eu geralmente uso quando quero ter um pouco de imaginação com o meu código da web. É um dos recursos mais populares para todos os exemplos de codificação simples e dinâmicos, do PHP a JQuery e Javascript - mas você também encontrará uma seção incrível cheia de exemplos básicos de codificação HTML.
O legal sobre o W3Schools é que, como o HTML Dog, eles incorporaram uma útil ferramenta de tela dividida onde você pode testar o código que você aprende em cada lição. Basta ajustar o HTML um pouco, clique em " Executar " e você verá os resultados na área à direita. Muito útil!
3. Quackit
Outro site que está no mesmo nível do W3Schools em termos de utilidade e design moderno é o Quackit. Sim, o nome é um pouco bobo, mas o site oferece muitos exemplos úteis.
Na área HTML, você encontrará vários exemplos de código em caixas de texto que você pode destacar e copiar - com o efeito de exibição real mostrado na coluna " Exemplo ".
4. Landofcode.com
Outro site que oferece a útil ferramenta de tela dividida para testar o código HTML é o LandOfCode. O site principal oferece um bom número de exemplos HTML, tudo a partir de formatação de texto HTML e vinculação adequada a formulários HTML, folhas de estilo e meta tags. Mas a verdadeira jóia deste site é o Editor de Códigos Online do PractiCode.
Este é realmente um pouco mais avançado do que a ferramenta W3Schools e HTML Dog, pois possui botões adicionais que permitem visualizar os resultados em uma nova janela, não apenas na área de exibição à direita.
5. Codecademy
Um dos sites mais conhecidos para aprender qualquer idioma é obviamente o Codecademy. E quando se trata de aprender HTML básico, a Codecademy não decepciona com seu primeiro site usando o curso de HTML e CSS.
A área de trabalho do curso, como o resto do Codecademy, é bastante avançada e dá a você a flexibilidade de brincar na área de código e ver sua página da Web em tempo real na atualização correta conforme você faz alterações. Você também pode alternar para a tela inteira para ver como seu site se parece em uma janela completa do navegador.
O bom deste curso é que ele também incorpora o aprendizado sobre o uso de CSS para formatar suas páginas. 10 Exemplos simples de código CSS Você pode aprender em 10 minutos 10 Exemplos simples de código CSS Você pode aprender em 10 minutos Vamos ver como criar um folha de estilo inline para que você possa praticar suas habilidades em CSS. Então, passaremos para 10 exemplos básicos de CSS. De lá, sua imaginação é o limite! Leia mais, que qualquer pessoa que esteja aprendendo HTML básico deve aprender ao mesmo tempo em que está aprendendo HTML.
6. EchoEcho
Alguns sites que eu gostaria de abordar não são os melhores - mas eles estão acima de outros sites de código HTML porque são bem escritos, bem formatados e cobrem o tópico completamente. O primeiro deles é o EchoEcho. Este site tem uma seção HTML que é provavelmente uma das listas mais completas de elementos HTML para aprender em um só lugar.
Cada um deles fornece um exemplo muito claro de como o código HTML deve ser estruturado, juntamente com uma explicação de todos os parâmetros e opções disponíveis que você pode usar.
Este site é realmente dedicado a oferecer muito mais do que tutoriais - o seu D-Zine online! é essencialmente uma revista online dedicada a todas as coisas relacionadas ao web design.
7. Java2s
A seção HTML / CSS do site do Java2 é como uma enciclopédia de tags HTML para iniciantes e especialistas. O layout é perfeito, especialmente para pessoas que talvez já saibam quais tags HTML desejam usar, mas não conseguem lembrar exatamente a sintaxe exata.
A lista de tags está limpa e em ordem alfabética para que você possa rolar rapidamente para baixo para encontrar o que deseja. Depois de clicar na tag, você verá uma lista de casos de uso de exemplo e, ao clicar em um deles, verá o snippet de código exato que você precisa usar para implementá-lo.
Você pode clicar em Experimentar este exemplo para ver a página HTML resultante em uma nova janela do navegador.
8. Awwwards
Por último, como é sempre uma boa ideia aprender como codificar, vendo exemplos de código excelente, tenho que dar os parabéns a um dos sites mais úteis da Internet que todos os alunos que são novos no HTML devem marcar. O site é chamado de Awwwards.
Awwwards concede prêmios para o site do ano, mês e dia, e até dá alguns polegares para os melhores desenvolvedores e sites para celular. Navegar por essas seleções lhe dará muitas idéias sobre quais elementos e layouts funcionam melhor quando você está montando suas próprias páginas da web.
Vá em frente e crie
Não há nada tão estimulante quanto passar dias, ou mesmo meses, codificar seu próprio site e finalmente revelar sua obra-prima para o mundo. Se você é um bom aluno de HTML e boas práticas de design de HTML, certamente pode se juntar às fileiras de desenvolvedores da Web que contribuíram para o melhor que a Web tem a oferecer.
Não esqueça de conferir a lista de exemplos HTML do MakeUseOf 17 Exemplos simples de código HTML Você pode aprender em 10 minutos 17 Exemplos simples de código HTML Você pode aprender em 10 minutos Se você conhece as seguintes 17 tags HTML (e as extras que vão com eles), você será capaz de criar uma página básica a partir do zero ou ajustar o código criado por um aplicativo como ... Read More que o ajudará a começar seu caminho.
Você conhece outros recursos de exemplo HTML realmente úteis para programadores da Web que estão aprendendo como criar páginas da Web? Compartilhe seus próprios recursos na seção de comentários abaixo.