. Isso foi feito para que os robôs de busca possam reconhecer melhor o código da página e separar o conteúdo principal dos elementos auxiliares.
Usando as novas tags, um modelo HTML5 em branco poderia ter esta aparência:
Menu de navegação
Conteúdo – o conteúdo principal da página.
Simplificando a escrita de DOCTYPE
Vamos lembrar como era antes, no HTML4 a tag DOCTYPE ficava assim:
Agora a gravação é mínima, provavelmente não poderia ser mais simples:
Simplificações semelhantes ocorreram com outras tags, portanto, a transição para o padrão HTML5 simplifica bastante a escrita.
Tags opcionais em HTML5
O novo padrão trouxe muito alívio aos designers de layout. Em particular, o uso dos elementos HTML, HEAD e BODY não é mais necessário para marcação HTML5. Se eles não existirem, o navegador ainda pensa que existem. Na verdade, dos obrigatórios em HTML5, apenas
.
Interpretação do russo como idioma principal de um documento HTML
Marcação define o idioma do documento. Surgem regularmente discussões na Internet sobre a sua grafia correta, em particular a grafia correta de “ru-RU”. Estou inclinado a acreditar que “-RU” é redundante, uma vez que a língua russa não possui dialetos e grafias como o inglês (britânico e americano). O sufixo RU especifica onde o russo é falado. Isto é, se en-US significa “Inglês falado nos Estados Unidos”, então ru-RU significa “Russo falado na Rússia”, o que é redundante.
No entanto, nada de ruim acontecerá se você continuar usando a opção “ru-RU”.
Quando o HTML5 começou a ser suportado pelos navegadores modernos, ele começou a ser usado em quase todos os sites modernos. HTML5 em conjunto com CCS3 oferece enormes oportunidades para a criação de sites incríveis, funcionais e fáceis de usar.
Nesta coleção, tentei coletar modelos de sites responsivos da mais alta qualidade construídos em HTML5 e CSS3. Mesmo sendo gratuitos, você pode ver que a maioria desses modelos parecem modelos premium.
5. SquadFree – modelo Bootstrap HTML5 gratuito
Squad Free - modelo de bootstrap responsivo
6. Pluton – modelo de uma página Bootstrap HTML5 gratuito
Pluton - modelo de uma página Bootstrap HTML5 gratuito
9. E-Shopper - modelo gratuito para loja online
E-Shopper - modelo gratuito para uma loja online
10. AdminLTE – modelo de painel de controle administrativo
AdminLTE - modelo de painel de controle administrativo
11. Magnético - modelo gratuito para site de fotógrafo
Magnético - modelo gratuito para site de fotógrafo
12. Mabur – modelo de portfólio responsivo
Mabur - modelo de portfólio responsivo
13. Moderna – modelo de site responsivo no Bootstrap
Moderna - modelo de site responsivo no Bootstrap
14. Sport Here – modelo de site minimalista
Sport Here - modelo de site minimalista
15. Crafty – modelo de site corporativo responsivo
Crafty - modelo de site corporativo responsivo
16. Infusão – modelo de portfólio de uma página
Infusão - modelo de portfólio de uma página
17. Yebo – modelo de site HTML/CSS em estilo simples
Yebo - modelo de site HTML/CSS de estilo simples
18. Vinte – modelo HTML5 com efeito de paralaxe
Vinte - modelo HTML5 com efeito de paralaxe
19. Urbanic - modelo Bootstrap
Urbanic - modelo Bootstrap
20. Calma – Modelo de Portfólio
Calma - Modelo de Portfólio
21. Mamba – modelo de uma página
Mamba - modelo de uma página
23. Escovado – modelo de site responsivo de uma página
Escovado – modelo de site responsivo de uma página
24. Big Picture - modelo de site HTML5
Big Picture - modelo de site HTML5
25. Tesselatte – modelo de site responsivo gratuito
Tesselatte – modelo de site responsivo gratuito
26. Overflow – modelo de site HTML5 responsivo
Overflow - modelo de site HTML5 responsivo
27. Runkeeper – modelo de site de aplicativo móvel
Runkeeper - modelo de site de aplicativo móvel
28. Pinball – modelo de blog responsivo
Pinball - modelo de blog responsivo
29. Bak One – modelo de site responsivo de uma página
Bak One - modelo de site responsivo de uma página
30. Andia – modelo de site gratuito
Andia - modelo de site gratuito
31. Produkta – 4 modelos HTML em um
Produkta - 4 modelos HTML em um
33. Studio Francesca – modelo de site responsivo
Studio Francesca – modelo de site responsivo
34. Prólogo – modelo de site HTML5
Então, queridos webmasters novatos, aprendemos o básico de HTML.
Agora vamos aplicar esse conhecimento e rapidamente fazer um pequeno site e colocá-lo na Internet.
É verdade que é difícil criar um recurso completo usando apenas html, mas um site de cartão de visita com várias páginas é bem possível.
Se esse é exatamente o objetivo de alguém e não há desejo de aprender outras linguagens de programação, então este artigo é para essa pessoa.
Resumindo, numa versão auto-escrita, sem utilizar um CMS, não existe nada mais simples.
E para quem precisa de algo mais legal, no final do artigo há links para artigos com código de template de bloco usando CSS, e código de site dinâmico usando PHP.
Criaremos um site em puro html diretamente nesta página, por assim dizer - um site dentro de um site, totalmente funcional e pronto para ser preenchido com conteúdo.
Vamos dividir todo o processo em três partes.
1. Crie um diretório de sites em seu computador.
2. Criação de site.
3. Transferência do site do nosso computador para a hospedagem, ou seja, para a Internet.
Criando um diretório de site em seu computador
O primeiro ponto é o mais simples. Como criar um diretório é mostrado de forma muito clara no artigo (todos os links desta página abrem em uma janela separada para não se perderem).
Vou mostrar detalhadamente o que e em qual pasta colocar após o código da página principal, para que você já tenha algo para ir ao diretório.
Passemos então ao segundo ponto, o mais criativo.
Criando um modelo de site
Para criar um modelo, você precisará de um editor no qual deverá colar o código abaixo.
Pode ser um simples bloco de notas do Windows ou qualquer outro editor de texto.
Vamos usar uma tabela HTML multicamadas como base para o modelo. Anteriormente, antes do advento do CSS, todos os sites eram escritos em tabelas, mas agora o layout de blocos se tornou mais popular.
Mas até hoje, a estrutura da tabela não está desatualizada e é usada com sucesso.
Por exemplo, um script CMS H de investimento com funcionalidades complexas, inteiramente desenvolvido com base em tabelas.
Então, aqui está um site com design minimalista.
Como projetar tabelas no futuro é mostrado detalhadamente no artigo.
Nome do site (organização)
Descrição do site
lar
Olá queridos futuros webmasters! Tenho 55 anos e tenho o prazer de recebê-lo em meu site.
Por que decidi fazer isso? Durante os 3 meses em que compreendi a construção de sites e a criação deste recurso, descobri que os autores dos guias de criação de sites consideram muitas das nuances certas e não prestam atenção a elas.
Cardápio
informações gerais
Texto de informação geral
Nome do site
<
!--Crie uma tabela contêiner, na qual especificamos o seguinte >
borda = "1" !--Crie uma linha-- >!--Crie uma célula de linha-- >
