Para criar uma página web atraente é preciso que você esteja atento aos novos elementos do HTML5 e cada função deles. Contudo, vamos aprender neste artigo que somente a linguagem HTML não é suficiente desenvolver um web site interessante aos clientes e consumidores. 

A linguagem HTML é conhecida por estruturar uma página, e agora vamos conhecer a linguagem CSS, que oferece todo o visual  e estilo para o site. Antes de começar a projetar em CSS, você precisa conhecer os códigos HTML, toda a estrutura básica da linguagem, os novos elementos HTML5 e as suas funções.

Para começar inserindo as tags de HTML e CSS, você pode usar ferramentas simples como o editor de texto do computador, como o Notepad do Windows - também conhecido como bloco de notas -, o TextEdit do Mac ou outro editor de acordo com o seu sistema operacional.

Quando você estiver em um nível intermediário ou avançado é recomendado o uso de ferramentas mais sofisticadas para um maior conhecimento e domínio das linguagens. Existem várias ferramentas usadas por desenvolvedores como o Brackets, Atom, Dreamweaver, Sublime Text, Notepad ++, dentre outros.

Se você ainda não conhece as novidades da versão atual da linguagem HTML, não deixe de fazer o Curso Online HTML 5 ‍ do portal Foco Educação Profissional.

Aplicar CSS ao documento HTML5

Em 1996 surgiu a primeira versão de Cascading Style Sheets - em uma tradução livre "Folhas de Estilo em Cascata" - mais conhecido apenas como CSS. O intuito desse mecanismo é de adicionar estilos ao documento HTML. Esses estilos podem ser cores, fontes e toda a aparência de um site. 

Para auxiliar os desenvolvedores web, o CSS dá a possibilidade de separar a aparência da página ao conteúdo estrutural do documento, ou seja, o CSS faz apenas uma "ligação" com o HTML, não ficando dentro do documento e contendo os estilos necessários para o site.

Caso o programador deseje fazer algum tipo de modificação na aparência da página, basta ele modificar apenas o arquivo CSS. Entretanto, como toda linguagem e mecanismo, o HTML e o CSS nasceram com algumas deficiências e precisando de atualizações e modernizações.

Uma das mudanças mais eficazes que o HTML implementou foi a extinção da necessidade de plug-ins para apresentação de vídeos, daí surge a versão HTML5 e a versão CSS3 para eliminar essa necessidade, criar aplicações mais modernas e complexas, otimizar a compreensão e auxiliar o desenvolvimento web.

O HTML5 e o CSS3 hoje são compatíveis com todos os dispositivos e suportam aplicações muito mais ricas do que suas primeiras versões. O HTML5 chegou com novas tags com suporte para vídeo e ádio e o CSS3 chegou com uma série de recursos visuais que modernizaram a aparência das páginas. As últimas novidades de CSS3 são as possibilidades de construção de animações em 2D e 3D.

A principal função do CSS3 é a criação de recursos visuais modernos e animações de vários jeitos e efeitos. A aplicação que mais ficou famosa é a de criação de um relógio de ponteiros, usando marcadores apenas do CSS3, legal né?!

Outra possibilidade de estilo interessante de aparência para um site é a borda arredondada. Esse efeito gráfico está muito na "moda" em páginas web e os desenvolvedores estão usando desse recurso para deixar os sites visualmente agradáveis e atraentes. 

Para inserir esses e outros recursos, você precisa abrir a tag "link" e importar o arquivo CSS3. Feito isso, no marcador "body", você deverá inserir o elemento "div" - muito usado para incluir esses efeitos e animações - e escrever o seu texto.

Com os elementos "div" e "style" você inclui vários recursos inovadores. Além das bordas arredondadas pode-se criar um efeito de sombra em figuras e em textos, mudar o tamanho, a posição e a forma de elementos HTML, dentre outras inúmeras possibilidades.

Para aprender esses e outros recursos, você pode fazer o Curso Online Web Design para Iniciantes‍ ou o Curso Online Web Design Avançado‍. A escolha vai de acordo com o nível do seu conhecimento. Entretanto, lembre-se: é essencial fazer o curso HTML5 antes para você saber estruturar o seu documento antes de incluir efeitos e animações.

Como adicionar imagens e links?

Inserir uma imagem em um documento HTML é muito fácil, basta incluir a tag "img". Para colocar uma imagem de fundo, aí deve-se usar a linguagem CSS, que falaremos mais a seguir. 

Quando incluímos uma imagem no corpo da página, precisamos especificá-la, como identificar o caminho para chegar nesta imagem dentro das pastas do site, um texto alternativo caso a imagem não carregue, uma largura, altura, entre outras características.

Para isso, você deverá inserir dentro do elemento "img" os atributos dessa imagem. O atributo "src" indica o caminho em que se encontra a imagem, "height" define a altura, "width" a largura e "alt" para incluir um texto alternativo caso a imagem da página não carregue ou para ser lido por navegadores de voz.

Para inserir uma imagem de fundo ou adicionar cor de fundo, o desenvolvedor precisar usar o CSS. Basicamente são 5 propriedades que você pode usar para mudar o plano de fundo da sua página, inserir uma imagem de fundo ou posicionar uma imagem em um seção ou página. Vamos conhecê-las:

• Background: é a tag que define quase toda a configuração de mudança de fundo de uma página;

• Background-attachment: define se a imagem é fixa ou "mexe" de acordo com o rolamento da página;

• Background-color: configura a cor do plano de fundo;

• Background-image: configura a imagem do plano de fundo;

• Background-repeat: define se uma imagem de fundo será repetida e como será;

Já a adição de links acontece através dos elementos HTML5. Para adicionar uma URL (endereço de uma outra página ou um local da mesma página), você precisa acrescentar o termo "a href" e logo em seguida adicionar o link da página desejada, assim: 

Se quiser que o link abra em outra janela: 

Se for um link na mesma página - também conhecido como âncora - basta dizer qual local em que o link será direcionado, assim: 

Áudio e vídeo do HTML5

Como já dito anteriormente, a versão atual da linguagem adicionou as tags "audio" e "video" entre os mais novos códigos HTML possibilitando a fácil incorporação de mídia nos documentos da linguagem. 

Esses elementos foram os mais comentados entre os programadores, já que com esses marcadores a necessidade de plug-ins externos para mídia foram extintos. Essa novidade acendeu uma discussão quanto ao futuro do Flash Player da Adobe, a principal ferramenta que fornecia esses plug-ins de multimídia.

Antigamente desenvolver em HTML era algo bem complexo, com o avanço e modernização da linguagem, a versão HTML5 trouxe novas funcionalidades e cada vez mais facilidades para o seu aprendizado. Para manipular o elemento "audio", por exemplo, é tão fácil como manipular a tag "img", que é de imagem.

A tag "audio", assim como o elemento para inserção de imagem, possui alguns atributos para uma boa reprodução da mídia. Alguns deles são:

• Autoplay: define que assim que o áudio estiver pronto, ele começará a ser tocado;

• Loop: assim que a música ou som terminar de tocar, ele começará a tocar de novo;

• Src: atributo que define o local onde o som será tocado.

Com o mecanismo de CSS você também pode realizar algumas modificações no seu player, como mudar a cor, posição, tamanho, entre outras possibilidades.

A tag "video" segue um esquema muito parecido. O elemento contém os mesmos atributos de "audio", acrescentando apenas os de altura e largura. As especificações de altura e largura são muito importantes e não devem ser esquecidas pelo programador, caso contrário, a falta delas podem causar um estrago no layout da página web. 

Já pensou em aprender isso e muito mais? Comece agora mesmo o curso HTML5 do Foco Educação Profissional. O portal é um dos sites de cursos online com certificado mais qualificados do Brasil!

Listas ordenadas e não ordenadas

Entre os códigos HTML você também pode criar listas ordenadas e não ordenadas, mas como funciona? Os marcadores para criação dessas listas também são muito fáceis de usar e são muito conhecidos entre programadores por facilitar o desenvolvimento web. 

Para criar listas ordenadas, usa-se o elemento "ol", que é uma abreviação de "Ordered List", que é lista ordenada em português. Assim você vai criar itens em forma sequencial, como neste exemplo:

1. Brasil

2. Alemanha

3. Inglaterra

4. Espanha

O código-fonte para formar os itens acima são:

Percebemos que dentro do marcador "ol" encontramos o elemento "li", usado para listar cada item que queremos colocar dentro da nossa lista. O "li" é usado tanto para as listas ordenadas como para listas não ordenadas.

Se o desenvolvedor insere o código de lista ordenada sem especificar um tipo, automaticamente o documento HTML vai colocar a ordem dos itens com uma lista numerada, como vimos acima.

Caso queira diferenciar a sua lista ordenada, basta colocar dentro da tag "ol" o atributo "type" e escolher um outro caractere, que pode ser letras do nosso alfabeto ou números romanos. 

Para inserir uma lista não ordenada usamos o marcador "ul" no lugar da tag "ol". O elemento para lista não ordenada pode vir como um disco, conhecido como bullet points para listar - que é o padrão -, um círculo ou um quadrado, assim:

• Brasil

• Alemanha

• Inglaterra

• Espanha

Vemos que a lista está separada em itens, mas não tem ordenação. Esse disco é o padrão da tag "ul" quando o desenvolvedor não especifica o tipo. No curso HTML5 você vai aprender a usar de forma mais aprofundada e correta esses e outros novos elementos contido na versão atual da linguagem.

Tabelas

Mesmo que você seja um iniciante na linguagem HTML5, já deve ter percebido que, explicando de uma forma bem resumida, o HTML serve para inserir conteúdos em um documento e o CSS é usado para deixar a página web mais bonita, estilizada e visuavelmente agradável. 

Como vimos no início deste artigo, o CSS formata os elementos HTML, coloca cores, estilos, bordas, espaçamentos e outros formatos diferenciados. O HTML fica com a parte semântica e estrutural, inserindo e seperando os elementos em seções, formulários, listas, parágrafos e tabelas, que veremos logo a seguir. Por fim a linguagem JavaScript - que veremos em outro momento - tem a prioridade de melhorar a experiência do usuário com a página.

Os elementos usados para construir uma tabela simples com HTML são:

• Table: define o início e o fim da tabela;

• Thead: define o início e o fim do cabeçalho da tabela;

• Tbody: define o início e o fim do corpo da tabela;

• Tr: serve para criar uma linha na tabela para separar os elementos. Pode ser inserido tanto no cabeçalho como no corpo da tabela;

• Th: define uma célula para o cabeçalho da tabela, dentro da linha;

• Td: define uma célula para o corpo da tabela, dentro de uma linha.

Com esses elementos você pode criar uma tabela com quantas colunas, linhas e células você necessitar. Muito fácil, não é mesmo? Com o curso online HTML5 você aprende exatamente como usar todas essas tags e diversas dicas importantes da linguagem. Vale lembrar que o portal Foco Educação Profissional possui esse e outros cursos online essenciais para alavancar sua carreira!

Cursos online com certificado: a melhor opção para sua conquista profissional

Só uma graduação não é suficiente para aprendermos os assuntos necessários para uma carreira de sucesso. Por isso mesmo existem empresas que oferecem cursos online com certificado para complementar os nossos estudos e conhecimentos.

O Foco Educação Profissional é um exemplo. O portal oferece mais de 1.000 cursos online em várias áreas do conhecimento para você se capacitar e ficar preparado para todos os desafios do mercado de trabalho.

O curso online HTML5 vai lhe ensinar todas as novidades e mudanças da linguagem para você que quer ser um bom desenvolvedor web. Além do mais, o portal não oferece apenas cursos online da área de tecnologia e informática. São diversas áreas do conhecimento para você ser um profissional completo!

A plataforma é 100% online e compatível com todos os dispositivos, como o seu computador, tablet e celular. Assinando o Pacote Master por apenas 12 parcelas de R$19,90 (com 10% de desconto para pagamento à vista), você tem acesso irrestrito aos diversos cursos da plataforma, podendo estudar quando e onde quiser.

São mais de 140 mil alunos que já experimentaram a plataforma e que aprovaram os cursos online com certificado. O setor pedagógico é dedicado e preparado para oferecer um dos melhores conteúdos do Brasil, além do que, todos os cursos ganham atualizações constantes.

Você investe uma única vez e tem acesso a todos os cursos do portal sem mensalidades e por um ano inteiro, incrível né?! Vale lembrar que a carga horária do certificado quem escolhe é você, elas vão de 5h a 420 horas, totalmente opcional.

Faça agora mesmo a sua inscrição e aproveite esta grande oportunidade de estudar com qualidade, pagando pouco e do conforto da sua casa. E aí, gostou do nosso artigo? Aqui no nosso blog você encontra esse e outros conteúdos com bastante informação e conhecimento para você ficar sempre atualizado.

Se você gostou, não deixe de compartilhar este artigo com os seus familiares e amigos. Caso tenho alguma dúvida ou alguma opinião, comente aqui embaixo! Em breve vamos trazer mais assuntos relacionados a tecnologia e informática. Até mais!