Academia verao 2011 - HTML + CSS
- 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; }