Post on 07-Jul-2015
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
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
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
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;
}
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;}