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

Academia Verão 2011 - HTML

on

  • 363 views

 

Statistics

Views

Total Views
363
Views on SlideShare
363
Embed Views
0

Actions

Likes
0
Downloads
2
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

Academia Verão 2011 - HTML Academia Verão 2011 - HTML Presentation Transcript

  • DECA, CTC, P3 e P4
  • P4 – Desenvolvimento para a Web: HTML, CSS e Javascript
  • 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
  • HTML - História Um pouco de história do HTML http://en.wikipedia.org/wiki/HTML - History
  • 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
  • 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
  • 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 ” >
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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;
    • }
  • CSS - selectores .post { color: #333; text-size: 14px; font-weight: bold; } Pseudo-selectores a { color: blue; } a:hover { color: red; }