Academia Verão 2011 - HTML

DECA, CTC: P3 e P4

DECA, CTC, P3 e P4

DECA, CTC: P3 e P4

P4 – Desenvolvimento para a Web: HTML, CSS e Javascript

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

DECA, CTC: P3 e P4

HTML - História

Um pouco de história do HTML

http://en.wikipedia.org/wiki/HTML - History

http://en.wikipedia.org/wiki/HTML

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

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

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”>

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

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

http://campus.ua.sapo.pt/

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

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

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

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;

}

http://tech.journalism.cuny.edu/documentation/css-cheat-sheet/



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;}

Academia Verão 2011 - HTML

Technology

Transcript of Academia Verão 2011 - HTML