• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Aula 02 - Font End
 

Aula 02 - Font End

on

  • 213 views

 

Statistics

Views

Total Views
213
Views on SlideShare
213
Embed Views
0

Actions

Likes
0
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Aula 02 - Font End Aula 02 - Font End Presentation Transcript

    • Grupo de Estudos Front-End Encontro 2 – Finalização do HTML 4 e introdução ao CSS 2
    • Desafios?Quem descobriu novos atributos?Quais atributos?Alguem modificou as listas?Alguma página em HTML foi feita?
    • Tira dúvida!
    • ImagensComo colocar imagens no HTML?<img> é a tag responsável por adicionar imagens nosHTMLA tag não necessita ser fechada com um </img>A tag <img> por sí não serve para nada, ela deve conteros atributos “src” e “alt” “src” é o atributo responsável por definir o caminho da imagem “alt” é o atributo responsável por dar uma descrição textual da imagem
    • Exemplo <img>
    • Resultado
    • Dúvidas?
    • Semântica SEOO atributo “alt” é muito importante, pois com esseatributo, você pode ampliar os resultados das buscas doseu site. Além de ser um item fundamental naacessibilidade do seu site.
    • LinksComo fazer links em HTML?<a>…</a><a> é a âncora.A tag <a> deve ser seguida do atributo “href”<a href=“contatos.html”>Contatos</a>
    • ContainersO html 4 trabalha com o containersContainers são feitos com a tag <div>Diferenciados com “id” e “class”
    • Exemplo
    • ID e CLASSID é o identificador. Uma tag com o atributo id só pode serchamado uma vez pelo CSS.CLASS é a classe do objeto. Umas tag com o atributoclass, pode e dever ser chamado mais de uma vez.
    • Exemplo
    • Dúvidas?
    • Introdução ao CSS
    • O Que é CSS?CSS = Cascading Style Sheets (Folhas de estilo emcamada)O CSS serve para diferenciar a camada de conteúdo dacamada de apresentaçãoServe também para diagramar, organizar o conteúdo dosite, atribuir tamanho, cor, tipográfia para o site
    • Como usar?Criar um arquivo CSS via DreamWeaverTodo código CSS deve está nesse arquivo e ser linkadocom o HTML. Para linkar basta colocar uma tag <link> Ex.: <link rel = “stylesheet” href = “url_do_arquivo.css”> O atributo “rel” significa a relevância do link para o arquivo O atributo “href” é o ondereço do arquivo .css
    • Semântica SEODentro da Semântica SEO para um CSS ser facilmentereconhecido pelo leitor do google, ele deve contar algunsatributos, como por exemplo o “type” e o “media”.O atributo “type” diz o tipo de arquivo que está sendolinkadoO atributo “media” diz o local onde o css vai ser aplicadoMelhor forma de se declarar o CSS: <link type=“text/css” rel=“stylesheet” href=“url_do_arquivo.css” media=“all”>
    • Como funciona?O CSS tem uma estrutura bem simples, ele funciona comseletores, propriedades e valores Ex.: seletor {propriedade: valor;}O CSS adimite mútiplas declarações Ex.: seletor {propriedade_1: valor; propriedade_2: valor;}No CSS algumas propriedades podem conter mais de umvalor Ex.: seletor {propriedade_1: valor1 valor2 valor3;}
    • ID e CLASS com CSSO “id” é identificado com “#” pelo cssO “class” é identificado com “.” pelo css
    • Desafio 1 – FormuláriosComo fazer um formulário em HTML?Como formatar um formulário?Desafio da semana é fazer um formulário, formatado comCSS, o formulário deve conter: Nome, e-mail, telefone, endereço, curso e matricula.Usem a criatividade e façam mais coisas dentro doformulário.
    • Desafio 2 – Formatação do site da aula anteriorUsando divs e css