HTML É uma linguagem de marcação utilizada para criar interfaces gráficas pelo navegador. Define blocos de construção de elementos visuais, como imagens , formularios , títulos entre outros.
CSS É uma linguagem para aplicação de estilos em documentos HTML, isto é, mudar sua aparência visual, através da mudança dos atributos como cor de fundo background, tipo de fonte font-style, cor color, bordas border e assim por diante.
Sempre iniciamos um documento HTML com um doctype, sua função é informar ao navegador como ele deve desenhar a página. Nesse caso indicamos que é um documento HTML5.
Dentro do head está todas as configurações do documento que não são visíveis, mas definem como ele deve ser construido, como por exemplo incluir outros arquivos.
Tags de marcação O HTML5 possui diversos tipos de tags, algumas são usadas para definir sua estrutura: header Cabeçalhos nav Menus de navegação main Conteúdo principal section Sessões do conteúdo div Bloco estrutural footer Rodapé
Semântica Buscadores como o Google se baseiam nos elementos HTML para adivinhar qual texto da página é importante. Utilizar as tags corretas para cada situação é uma técnica conhecida como web semântica.
Especializadas em exibir elementos gráficos como texto, lista, tabelas, imagem, formulários: Tags de conteúdo h1, h2, h3, h4, h5, h6 Títulos p, strong, em Elementos textuais ol, ul, li Listas img Image a Links com outras páginas
1 2 3 4 5 Elementos block e inline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Minus, dolorque ducimus officia modi reprehender saepe. Elementos inline não forçam a quebra de linha mantendo a continuidade do texto, geralmente, são usados, para da realçe as palavras:
Exercício Criar um arquivo HTML, como os items abaixo, cada qual em um section com uma classe: ● Header com um título; ● Paragrafos (como negrito, itálico e um link) ● Listas ordenadas e desordenadas ● Tabelas ● Formulário (Para inserir um texto e botão)
1 2 3 4 5 Para usar o CSS para estilizar o HTML, nós precisamos inclui-lo neste último. Para tal inserimos a tag link no head, tal qual: Vinculando o HTML com o CSS
1 2 3 4 5 Adicionar um estilo à um elemento p { color: red; } Para tal precisamos selecionar o elemento e aplicar um estilo, no exemplo abaixo aplicamos a cor de fonte vermelha no elemento p:
0 1 2 3 4 5 6 7 8 9 10 Estilizando classes /* Classes sempre se iniciam com um ponto */ .verde { color: green; } .grande { font-size: 50px; width: 1000px; } Atenção com o ponto e vírgulo no final de cada diretriz!
Detalha as opções de ajuste da caixa de um elemento. A soma de todos esses elementos é representa sua largura total. Box-model margin border padding width
JavaScript É uma linguagem de programação interpretada, projetada para se executada pelo navegadores e capaz de manipular e interagir com os elementos HTMLs.
Criar um arquivo CSS e vincula-lo, com o HTML (): ● Alterar a fonte do geral para Arial 12px; ● Crie classes com bordas e margens e aplique nos elementos; ● Deixa o "designer" em você fluir! Exercício