Introdução ao HTML5 e CSS3
Assista ao mini curso de Html e Css no nosso canal do youtube clicando AQUI
HTML
É a abreviação de HyperText Markup Language (Linguagem de Marcação de Hypertexto) e é uma linguagem usada para publicação de texto, imagens, vídeos, áudios, etc. na web.
HTML5
É a versão atual do HTML, que foi otimizada para fornecer ferramentas para o CSS e o JavaScript fazerem melhor o seu trabalho, de forma que um website seja leve e funcional.
A estrutura básica de uma página em HTML é a seguinte:
<!DOCTYPE HTML>
<html lang=”pt-br”>-
<head>
<meta charset=”UTF-8″>
<title></title>
</head>
<body>
</body>
</html>
O doctype é a primeira linha antes do código, pois é a instrução que indica ao navegador a versão de marcação do código inscrito, ou seja, o navegador vai entender que ali começa uma página web.
TAG HTML
<html> Aqui começa a marcação propriamente dita. Esta marcação, vai estar sempre no topo da codificação. E precisa sempre conter o atributo “LANG” para indicar ao navegador qual o idioma utilizado na página ou utilizado no texto.
As tags se iniciam com o atributo (no caso, HTML) entre os símbolos de “<“(menor que) e “>” (maior que) e se encerram com uma barra “/” antes do mesmo atributo dentro dos mesmos símbolos de “menor que” e “maior quer” </html>.
TAG HEAD
Aqui ficam as informações sobre a página e o conteudo publicado. Sendo um desses conteudos a meta tag CHAR SET
<meta charset=”UTF-8″> que é o decodificador do idioma utilizado, não importando se o texto vai estar em português ou chinês. Aqui também ficam contidos a tag de título da página ( <title>) e a folha de estilo (CSS).
<head>
<meta charset=”UTF-8″>
<title>O título da sua página</title>
<link rel=”stylesheet” href=”style2.css”>
</head>
Note que algumas tags não precisam de fechamento. Isso é porque esses atributos tem uma finalidade em si mesmo, e não precisam delimitar que seu uso é até determinado ponto.
TAG BODY
Aqui é onde ficam todos os elementos que serão visíveis na web página.
Todo o conteudo que não está dentro da tag <BODY> fica oculto, pois se trata de informações de funcionamento da página e não fazem parte do visual. Por isso, é importante não confundir a tag <HEAD> com o HEADER que é o cabeçalho da página e que portanto fica dentro da tag <BODY>.
CSS
É a sigla em inglês para Cascading Style Sheet (Folha de Estilo em Cascata) E a razão do nome “cascata” é porque as informações vão sendo escritas de cima para baixo.
O HTML é o alicerce de um website, enquanto o CSS é o estilo visual. Usando uma analogia simplificada, o HTML é como se fosse a estrutura de uma construção e o CSS o seu acabamento.
Conteúdo Visível
É o conteúdo que fica localizado dentro da tag BODY e as principais tags ( Sim, tags. qualquer conteúdo dentro de uma página html deve estar contido dentro de uma tag html) são:
H1, H2, H3 , H4, H5 e H6
Que são tags de destaque sendo a tag H1 usada para títulos, a tag H2 para subtítulos e as outras para realçar um texto diferenciando-o de um texto normal.
P
Tag utilizada para identificar um parágrafo.
Strong
Tag utilizada para realçar palavras transformando-as em estilo negrito.
Em
Tag que realça uma palavra ou texto, transformando-os em estilo itálico.
Meta Tags.
Meta tags são elementos de comando html, criados para descrever o conteúdo de uma página para os mecanismos de busca.
Meta tags são extremamente importantes do ponto de vista de SEO, pois permitem que os mecanismos de pesquisa categorizem o conteúdo do site corretamente.
Lista de Links
Você vai encontrar links de apoio para todas as aulas sobre HTML5 e CSS3 na nossa Lista de Links.
Obs: Esta lista de links, faz parte do Curso de Webdesigner Profissional e as divisões por seção são parte do curso. Entretanto, quem não for aluno do curso, também poderá acessar os links atravéz deste nosso blog.