Academia Verão 2011 - HTML
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
395
On Slideshare
395
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. DECA, CTC, P3 e P4
  • 2. P4 – Desenvolvimento para a Web: HTML, CSS e Javascript
  • 3. HTML
    • H yper T ext M arkup L anguage
    • É a linguagem que fornece os “blocos” elementares com os quais se constrói a estrutura das páginas web
    • É escrito com recurso a etiquetas ( tags ) encapsuladas em “< >”
      • <html>, <form>, <script>, <img>, etc...
      • Normalmente surgem aos pares, uma de início e uma de fecho: <span> </span>
      • Dentro destas etiquetas é colocado o conteúdo
    • Estas tags , quando processadas por um browser, não são mostradas ao utilizador mas sim interpretadas pelos mesmo e mostrada uma representação gráfica do conteúdo. (Para ver estas tags temos que recorrer à opção View Source/Ver Código Fonte do browser)
    • Permite-nos criar documentos com uma estrutura semântica .
    • Pode ser complementada com CSS para associar estilos aos elementos da estrutura
    • Pode ser complementada com Javascript para associar comportamentos aos elementos da estrutura
  • 4. HTML - História Um pouco de história do HTML http://en.wikipedia.org/wiki/HTML - History
  • 5. HTML - Elementos
    • Os elementos de HTML são representados sobre a forma de <tags>
    • Elementos de estrutura do documento
    • Elementos do <head>
    • Elementos do <body>
      • Block elements
      • Inline elements
    • Imagens e formulários
    • Tabelas
  • 6. HTML – Elementos de estrutura do documento
    • <html>
    • Elemento base de qualquer documento HTML
    • <head>
    • Contém informação e metadados para o processamento do codumento
    • Os CSS são incluídos neste elemento
    • Os scripts (javascript) podem ser incluídos neste elemento
    • <body>
    • Contém o conteúdo a ser mostrado ao utilizador
  • 7. HTML – Elementos do <head>
    • <link>
    • Ligação para um CSS externo
      • <link rel=“ stylesheet ” type= “ text/css ” href= “ estilos.css ” >
    • <style>
    • Contentor para regras de CSS
    • <title>
    • Define o título da página
    • <script>
    • Pode funcionar como contentor para código javascript externo ou como link para um ficheiro javascript externo
      • <script>alert(‘Sou um bloco de código Javascript’);</script>
      • <script src=“ javascript.js ” >
  • 8. HTML – Elementos do <body> | Block level
    • Os elementos de Block level devem ser compreendidos como:
    • Objectos rectangulares que não quebram entre linhas
    • Têm margens, largura e altura
    • Podem , na sua generalidade, conter elementos inline
    • <p>...</p> - define um parágrafo de texto
    • <h1>...</h1>, <h2>...</h2> (...) <h6>...</h6> - Definem cabeçalhos com diferente destaque em casa secção do HTML.
    • Listas
      • <ol>...</ol> - Lista ordenada
      • <ul>...</ul> - Lista não ordenada
      • <li>...</li> - Item de lista
    • <div>...</div> - Contentor genérico
  • 9. HTML – Elementos do <body> | Inline level
    • Os elementos de Inline level devem ser compreendidos como:
    • Parte do fluxo textual de um documento
    • Não têm margens, largura e altura
    • Não podem conter elementos de block level
    • <a>...</a> - Elemento de âncora. Geralmente utilizado para criar links
      • <a href= http://campus.ua.sapo.pt >Sapo Campus UA</a>
    • <span>...</span> - Contentor genérico
  • 10. HTML – Elementos do <body> | Imagens e Formulários
    • <img>
    • Utilizado para incluir imagens no documento
      • <img src=“ imagem.jpg ” alt= “ Foto super gira ” >
    • <form>
    • Contentor para formulários
      • <form action=“ comprar.php ” >...</form>
    • <input>
      • type= checkbox | radio | button | submit | text | password | fille | hidden
    • <label>
      • Descrição de um input
  • 11. HTML – Elementos do <body> | Tabelas
    • <table>...</table>
    • <tr>...</tr> - linha da tabela
    • <th>...</th> - célula do cabeçalho da tabela
    • <td>...<th> - célula da tabela
    • <thead>...</thead> - cabeçalho da tabela
  • 12. HTML – Atributos, Classes e IDs
    • Cada tag possuí uma série de atributos próprios:
    • <a href=“”>
    • <img src=“” alt=“”>
    • <form action=“”>
    • <input name=“”>
    • <label for=“”>
    • E todas podem possuir os atributos genéricos “ id ” e “ class ”
    • A mesma “ class ” pode ser reutilizada tantas vezes quanto desejado em qualquer número de elementos, deve ser semântica, descrevendo a função do bloco e não a sua aparência.
      • É utilizada como alvo dos CSS
    • O id tem que ser único, só podendo aparecer só podendo haver um elemento com determinado id em cada página
  • 13. CSS
    • C ascading S tyle S heets
    • É uma linguagem de folhas de estilos que descreve o aspecto de uma estrutura semântica de markup (HTML)
    • O CSS usa selectores para aplicar o estilos
  • 14. CSS
    • C ascading S tyle S heets
    • É uma linguagem de folhas de estilos que descreve o aspecto de uma estrutura semântica de markup (HTML)
    • O CSS usa selectores para aplicar o estilos
    • #corpo – aplica estilo ao elemento HTML com o id=“corpo”
    • .post – aplica estilos aos elementos HTML com a class=“ post ”
    • Depois de cada selector escolhe-se as propriedades a aplicar - http ://tech.journalism.cuny.edu/documentation/css-cheat-sheet /
    • selector {
    • propriedade1 : valor;
    • propriedade2 : valor;
    • }
  • 15. CSS - selectores .post { color: #333; text-size: 14px; font-weight: bold; } Pseudo-selectores a { color: blue; } a:hover { color: red; }