Guia do iniciante para criar páginas da web HTML5 / CSS3

Este artigo faz parte do nosso "Série de tutoriais HTML5 / CSS3" - dedicado a ajudar a torná-lo um melhor designer e / ou desenvolvedor. Clique aqui para ver mais artigos da mesma série.

HTML5 e CSS3 varreram a web em apenas dois anos. Antes deles, havia muitas semânticas alteradas na forma como se espera que os web designers criem páginas da Web e, com sua chegada, recebam uma série de suportes incríveis, como mídia alternativa, tags no estilo XML e atributos de entrada progressiva para designers da web. recursos como animação.

Embora a maioria dos desenvolvedores pareça mostrar demonstrações complexas, mas complexas, HTML5 / CSS3 não são realmente ciência de foguetes, e eu estarei conduzindo você pelo processo de relaxamento para construir uma página HTML5 / CSS3 padrão com explicação abrangente e detalhada e tada! Bônus como recursos de aprendizado e modelos gratuitos de HTML5 estão disponíveis para você. Portanto, aproveite esta oportunidade para iniciar sua jornada em HTML5!

Alterações entre HTML4 e HTML5

Você pode estar se perguntando por que é importante mudar para o HTML5. Há uma infinidade de razões, mas principalmente porque você será trabalhando com os padrões globais da Internet como qualquer outro designer. Desta forma, você encontrará mais suporte on-line e seu sites serão processados corretamente em navegadores modernos que são constantemente melhorados.

(Fonte da imagem: W3C)

A comparação entre HTML4 e HTML5 é difícil de detectar no nível da superfície. Ao visualizar o novo rascunho do HTML5, você pode ver os elementos em destaque e corrigir os procedimentos de tratamento de erros. Os desenvolvedores do navegador têm gostado especificamente das novas especificações para renderização de páginas da Web padrão.

O que é mais do HTML5 é a conversão do nosso navegador moderno. Com estas novas especificações, a Web como um todo é agora vista como plataforma de aplicação para HTML (especialmente HTML5), CSS e JavaScript sejam criados. Além disso, este sistema elegantemente cria harmonia entre web designers e desenvolvedores definindo padrões comuns que todos os navegadores devem seguir.

Além disso, muitos elementos foram criados para representar mídia digital da nova era. Esses incluem e que são enormes para suporte multimídia. Em alguns navegadores, você pode concluir a validação de formulários diretamente em HTML. Concedido, ainda há uma grande necessidade de jQuery, uma vez que existem muitos desenvolvedores de software que ainda precisam reconhecer os recursos. Se você quiser uma lista de tags, marque esta tabela W3Schools para saber mais sobre eles.

Esqueleto nu HTML5

Eu acho que a maneira mais fácil de entender qualquer tópico é mergulhar direto nele. Então, vou construir um modelo de esqueleto HTML5 muito básico para uma página da web. Eu incluí alguns dos elementos mais recentes, que espero categorizar um pouco mais tarde.

   Nossa primeira página HTML5       Bem-vindo, um e todos!
   Casa
 Sobre nós
 Contatos
 
 
 
   algum conteúdo aqui.
 
  mas alguns aqui também!
 
 
  Alguns avisos legais e de direitos autorais aqui. Talvez use o símbolo © um pouco.

De imediato, isto não é muito diferente de uma página HTML4 padrão. O que você pode perceber é que nós não precisa incluir mais tags de fechamento automático. Esta é uma notícia realmente maravilhosa, pois economizará muito tempo de seus projetos de desenvolvimento.

Para quem não sabe, em rascunhos XHTML havia muitos elementos rotulados fecho automático. Isso terminaria com uma barra antes do operador 'maior que' para indicar que você não precisaria incluir outra tag de fechamento em outro lugar. Como exemplo, para criar uma meta tag de palavras-chave, você usaria sem a necessidade de um fechamento em outro lugar.

Esta regra ainda se aplica em HTML5. Mas agora você nem precisa da barra extra! é completamente válido, embora você tenha permissão para continuar usando o padrão XHTML / XML. Para todos os navegadores compatíveis com os padrões, os dois elementos serão processados da mesma forma.

Definindo nossas áreas de página

A maioria do nosso novo código não deve ser muito chocante. Nosso doctype é hilário mais simples mais do que nunca, não há necessidade de atributos corporais excessivos, e as informações em nosso cabeçalho estão claramente identificadas. Continuando, gostaria de focar sua atenção no conteúdo dentro de nossa tag. Isso inclui toda a estrutura da página principal. Eu usei intencionalmente algumas tags HTML5 para indicar como você pode incluí-las em seu próprio trabalho.

Primeiro você verá a página inteira encapsulado dentro de um div tag. Eu rotulei isso com um ID de embrulho, o que significa que envolve todo o conteúdo do nosso site. Isto é útil para definir um conteúdo máximo de largura ou posição ao redor da tela. Em seguida eu fracionei a página em 3 elementos principais - um

, Um núcleo

, e um curto

. Dentro da minha área de cabeçalho personalizada, adicionei uma exibição simplista do título da página e itens de navegação usando o

tag como um wrapper.

Agora para o

com um ID de testemunho Eu apliquei um secundário clearfix. Esse recurso faz com que possamos flutuar livremente 2 colunas dentro e não vamos experimentar nenhum conteúdo perdido ou fenômenos estranhos. E com razão, assim como dentro eu coloquei dois

tags que incluirão nossa área de conteúdo principal e barra lateral, respectivamente. Nós estaremos usando estilos CSS para separá-los.

Da mesma forma a calma rodapé tag funciona bem para diferenciar este conteúdo entre a página. Dentro eu coloquei um parágrafo solene que pode conter algumas informações sobre direitos autorais e propriedade. Mas as chances são boas que você vai querer incluir um pouco mais de conteúdo, como links secundários para suas páginas.

Magia Criativa CSS3

Para finalizar este layout básico de estêncil, podemos usar alguns estilos CSS. No modelo HTML5 básico, adicionei um folha de estilo CSS externa para que possamos manter nossas áreas de código separadas. Isso vai esclarecer muita confusão a longo prazo, quando suas páginas e estilos começarem a ser exibidos em páginas diferentes.

(Fonte da imagem: W3C)

Então eu não passei muito tempo com CSS, mas o suficiente para mostrar alguns efeitos legais. Em primeiro lugar eu usei alguns dos configurações de raio de borda para construir efeitos muito interessantes de hover link de navegação. Você pode direcionar esse mesmo efeito no código do modelo, basta adicionar as seguintes linhas no documento CSS.

 nav display: bloco; margem inferior: 10px;  nav ul estilo da lista: nenhum; tamanho da fonte: 14px;  nav ul li display: inline;  nav ul li a display: bloco; flutuar: esquerda; preenchimento: 3px 6px; cor: # 575c7d; text-decoration: nenhum; intensidade da fonte: Negrito;  nav ul li a: hover fundo: # deff90; cor: # 485e0f; -webkit-border-radius: 3px; -moz-border-radius: 3px; raio de fronteira: 3px; preenchimento: 3px 6px; margem: 0; text-decoration: nenhum;

Outro efeito legal é o estilos de clearfix. Este não é um conceito totalmente novo com CSS3, mas é importante para construir páginas da Web compatíveis com padrões. Muitas vezes, quando você está olhando para flutuar conteúdo ao lado do outro, você experimentará falhas de posicionamento de buggy. Isso é causado por margens de offset e erros na configuração de larguras absolutas para o seu conteúdo flutuante.

Este conceito pode parecer um pouco confuso, e eu adicionei um pequeno código abaixo para ajudar. Basicamente, estamos direcionando dois

elementos, #esquerda e #certo para corresponder ao seu lado da página. Eu defini cada um com uma largura definida e flutuando para a esquerda, para que eles se acumulem ao lado um do outro. Desde o nosso recipiente div # core contém o clearfix classe, isso significa que todo o conteúdo interno pode mova-se livremente e limpa automaticamente o espaço extra depois.

/ * núcleo da página * / div # core display: block; limpar ambos; margem inferior: 20px;  seção # esquerda largura: 550px; flutuar: esquerda; margem: 0 15px;  section # right float: left; largura: 300px;  / * clearfix * / .clearfix: após content: "."; display: bloco; limpar ambos; visibilidade: oculto; altura da linha: 0; altura: 0;  .clearfix exibição: inline-block;  html [xmlns] .clearfix display: bloco;  * html .clearfix altura: 1%;

Esses bits de código são simples para começar. Eles também pertencem ao nosso código de modelo HTML5 construído anteriormente, portanto, isso é uma prática simples. Mas quando se trata de viciados em web reais, você estará procurando mais funcionalidades CSS3.

Sintaxe CSS3 menos conhecida

Para construir páginas HTML5 / CSS3 completas, você começará a usar algumas folhas de estilo muito mais complexas. Muitos designers conhecem o código abreviado (como o font: property), uma vez que estes são padrões antes mesmo do CSS2.

Mas existem algumas novas propriedades em CSS3 que muitos designers não estão pensando. Muitos deles não são apenas para estética, mas também incluem efeitos de animação. Abaixo está uma pequena lista explicando algumas das propriedades que você pode considerar brincar. Tente procurar por exemplos de sintaxe se você se sentir perdido.

Sombra da caixa: adiciona um efeito de sombra puro aos elementos da sua página. Você recebe 4 parâmetros que definem a posição esquerda / direita, para cima / para baixo, desfoque de sombra e cor. Observe que as sombras de caixa não são consideradas espaço adicional para a largura / altura original.
text-shadow: cria belas sombras por trás do texto da sua página. Com os efeitos corretos, suas letras podem aparecer logo na página.
raio de bordaCantos arredondados demoraram muito para se tornarem padrões aceitos. Poucos anos atrás, muitos designers da web 2.0 estavam criando imagens de fundo apenas para encaixar cantos arredondados com o CSS. Mas usando CSS3 border-radius você pode manipular a curva de cada borda em qualquer elemento.
opacidade: Parece uma propriedade simples que muitos designers não consideram. Opacidade espera uma entrada numérica única variando de 0 a 1,0 (0% - 100%). Esse efeito funciona muito bem como uma animação de foco.
@Tipo de letra: Outro belo exemplo de alguns estilos complexos de CSS e tipografia. Web designers agora podem trabalhar com suas próprias fontes personalizadas definindo-as como variáveis dentro de seus documentos CSS.
dimensionamento de caixa: por padrão, o box-sizing irá definir todos os seus elementos como content-box. Isso significa que largura, preenchimento e bordas são todos incluídos na largura máxima. Mas definido para caixa de borda você pode definir uma largura máxima (digamos 20px) e adicionar preenchimento / bordas incluir-se-á nisso, removendo assim o espaço dentro do objeto. É uma propriedade fantástica, uma vez que você domina sua desenvoltura.

Todas essas propriedades têm suas vantagens e desvantagens. Eu não recomendaria tentar empinar todos eles em suas páginas da web. Mas prática lhe dará uma mentalidade clara para entrar no desenvolvimento de mais sites com facilidade.

Mais uma parte essencial da sintaxe adicionada que vale a pena mencionar é seletores de atributos. Com CSS3 você pode agora definir estilos com base em atributos HTML (como tipo, href, título) e até mesmo fornecer valores específicos. Por exemplo, podemos segmentar links com um atributo de título definido e fornecer a eles um conjunto de ícones de plano de fundo.

 ul li [título ^ = "ico"] background: url ('meu-ícone.gif');

Se você perceber que incluí um símbolo de cursor antes do sinal de igual. Este é um operador que define todos os itens da lista que contêm o prefixo, ico. Alternativamente, você pode substituir o acento circunflexo (^) por um sinal de dólar ($) para direcionar a área de sufixo do seu título. Desta forma, o CSS3 sabe adicionar imagens de fundo onde você pode definir os títulos como 'first ico' ou 'book ico'. Leia um pouco mais sobre os seletores de atributos se estiver interessado.

Colocando tudo junto

No núcleo das páginas web HTML5 e CSS3 é simplicidade. Os desenvolvedores da Web estão tentando construir sites altamente criativos em menos tempo e com menos estresse. Os novos recursos do HTML5 permitem isso com bastante espaço de manobra. E usar alguns dos novos seletores e propriedades CSS3 lhe dará vantagens a longo prazo.

(Fonte da imagem: W3C)

Mas você também deveria estar considerando o usuário final. O processo de construção de uma página da web termina ao final do lançamento do site público. Seu objetivo é por favor audiência com informações de fácil acesso, e não apenas leitores humanos, mas rastreadores de mecanismo de pesquisa e bots de indexação. A semântica evoluiu muito para incluir novos elementos de layout HTML5, dividindo layouts de página consistentemente. Nunca foi tão fácil construir uma pequena seção de navegação e rodapé alinhada com todos os navegadores modernos.

Uma vez que você tenha se acostumado a construir páginas web em HTML5, provavelmente começará a pesquisar animações de página. Mesmo efeitos menores com JavaScript e AJAX podem ser majoritariamente melhorar a experiência do usuário e o desempenho do site. Embora isso não faça parte do escopo do artigo, eu recomendo brincar com o jQuery se você tiver algum tempo. A biblioteca de código aberto é surpreendente e permite prototipagem rápida sobre elementos de página HTML5.

Recursos adicionais

Blogueiros de todo o mundo têm discutido as novas tendências em HTML5 e CSS3 e compartilhando recursos para o público. O tempo está mudando e a comunidade da web está mudando com eles. Você deve considerar algumas áreas de nicho para estudar e construir um pequeno interesse.

Abaixo estão algumas listas adicionais, artigos e tutoriais que você pode gostar. Tomei a liberdade de dividir as listas em recursos HTML5 e CSS3. Com base no que você está procurando, deve haver alguns tópicos aqui para todos. Aproveite também a breve galeria de temas HTML gratuitos disponíveis para download online!

HTML5

HTML5: 15 experiências inspiradoras
HTML5: 19 aplicativos da Web
HTML5: 48 demonstrações de potencial Flash-Killing
Criar Formulário de Contato HTML5 / CSS3 Baseado em Ajax

CSS3

CSS3: um guia para iniciantes
CSS3: Criando campo de pesquisa
CSS3: usando pseudo-classes
CSS3: 30+ Tutoriais úteis

Bônus: modelos e temas em HTML5

Companhia de design

Pronto para entrar no maravilhoso mundo do HTML5? Aqui está um modelo HTML5 completamente livre, com scripts jQuery e fontes personalizadas armados para você testar livremente!

Um tema HTML5 / CSS3

Esse tema baseado em HTML5 / CSS3 tem um design de layout de blog comum para você criar seu próprio blog HTML5 com recursos extensos ou simplesmente acessar o código e aprender algo sobre ele.

Yoko

Yoko é um tema WordPress moderno que fala sobre flexibilidade com seu layout responsivo baseado em consultas de mídia CSS3, que é a capacidade de se ajustar a diferentes tamanhos de tela, conhecer isso!

Cinzento

Se você preferir o estilo clássico do blog WordPress, o Gray provavelmente é para você com seus recursos CSS3 integrados, como raio de borda, vários planos de fundo, sombra de texto etc..

Guia do Iniciante para Flock, o Navegador de Mídia Social

Guia do Iniciante para o Desenvolvimento iOS A Interface - Parte I

Guia para iniciantes na configuração do Windows 7 Media Center