Download - Academia Verão 2011 - HTML
![Page 1: Academia Verão 2011 - HTML](https://reader035.vdocuments.com.br/reader035/viewer/2022080903/55abe72b1a28abba678b45e5/html5/thumbnails/1.jpg)
DECA, CTC: P3 e P4
DECA, CTC, P3 e P4
![Page 2: Academia Verão 2011 - HTML](https://reader035.vdocuments.com.br/reader035/viewer/2022080903/55abe72b1a28abba678b45e5/html5/thumbnails/2.jpg)
DECA, CTC: P3 e P4
P4 – Desenvolvimento para a Web: HTML, CSS e Javascript
![Page 3: Academia Verão 2011 - HTML](https://reader035.vdocuments.com.br/reader035/viewer/2022080903/55abe72b1a28abba678b45e5/html5/thumbnails/3.jpg)
DECA, CTC: P3 e P4
HTML
HyperText Markup Language•É 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
![Page 4: Academia Verão 2011 - HTML](https://reader035.vdocuments.com.br/reader035/viewer/2022080903/55abe72b1a28abba678b45e5/html5/thumbnails/4.jpg)
DECA, CTC: P3 e P4
HTML - História
Um pouco de história do HTML
http://en.wikipedia.org/wiki/HTML - History
![Page 5: Academia Verão 2011 - HTML](https://reader035.vdocuments.com.br/reader035/viewer/2022080903/55abe72b1a28abba678b45e5/html5/thumbnails/5.jpg)
DECA, CTC: P3 e P4
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
![Page 6: Academia Verão 2011 - HTML](https://reader035.vdocuments.com.br/reader035/viewer/2022080903/55abe72b1a28abba678b45e5/html5/thumbnails/6.jpg)
DECA, CTC: P3 e P4
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
![Page 7: Academia Verão 2011 - HTML](https://reader035.vdocuments.com.br/reader035/viewer/2022080903/55abe72b1a28abba678b45e5/html5/thumbnails/7.jpg)
DECA, CTC: P3 e P4
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”>
![Page 8: Academia Verão 2011 - HTML](https://reader035.vdocuments.com.br/reader035/viewer/2022080903/55abe72b1a28abba678b45e5/html5/thumbnails/8.jpg)
DECA, CTC: P3 e P4
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
![Page 9: Academia Verão 2011 - HTML](https://reader035.vdocuments.com.br/reader035/viewer/2022080903/55abe72b1a28abba678b45e5/html5/thumbnails/9.jpg)
DECA, CTC: P3 e P4
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
![Page 10: Academia Verão 2011 - HTML](https://reader035.vdocuments.com.br/reader035/viewer/2022080903/55abe72b1a28abba678b45e5/html5/thumbnails/10.jpg)
DECA, CTC: P3 e P4
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
![Page 11: Academia Verão 2011 - HTML](https://reader035.vdocuments.com.br/reader035/viewer/2022080903/55abe72b1a28abba678b45e5/html5/thumbnails/11.jpg)
DECA, CTC: P3 e P4
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
![Page 12: Academia Verão 2011 - HTML](https://reader035.vdocuments.com.br/reader035/viewer/2022080903/55abe72b1a28abba678b45e5/html5/thumbnails/12.jpg)
DECA, CTC: P3 e P4
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
![Page 13: Academia Verão 2011 - HTML](https://reader035.vdocuments.com.br/reader035/viewer/2022080903/55abe72b1a28abba678b45e5/html5/thumbnails/13.jpg)
DECA, CTC: P3 e P4
CSS
Cascading Style Sheets•É 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
![Page 14: Academia Verão 2011 - HTML](https://reader035.vdocuments.com.br/reader035/viewer/2022080903/55abe72b1a28abba678b45e5/html5/thumbnails/14.jpg)
DECA, CTC: P3 e P4
CSS
Cascading Style Sheets•É 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;
}
![Page 15: Academia Verão 2011 - HTML](https://reader035.vdocuments.com.br/reader035/viewer/2022080903/55abe72b1a28abba678b45e5/html5/thumbnails/15.jpg)
DECA, CTC: P3 e P4
CSS - selectores
.post {color: #333;text-size: 14px;font-weight: bold;
}
Pseudo-selectores
a {color: blue;
}a:hover {
color: red;}