ppt_ws_html_css_php
DESCRIPTION
HTML, CSS, PHPTRANSCRIPT
Vamos criar um site!
1
O que é o HTML?
HTML significa Hyper Text Markup Language e é uma linguagem de marcação utilizada para produzir páginas web.
Documentos HTML são descritos por tags HTML.
Cada tag HTML descreve um conteúdo diferente.
HTML
2
Introdução ao HTML
Para escrever HTML pode-se usar um qualquer editor de texto;
Um browser lê HTML e usa as tags para mostrar o documento.
Existem códigos que permitem restringir determinada funcionalidade a um determinado browser
Sempre que possível deve-se utilizar letra minúscula nas tags.
HTML
3
Estrutura de página HTMLHTML
4
HTML BásicoHTML
5
DOCTYPE - define o tipo de document como HTML
O texto entre <html> e </html> descreve um document HTML
O texto entre <head> e </head> forneceinformação sobre o documento
O texto entre <title> e </title> fornece um título aodocumento
O texto entre <body> e </body> descreve o conteudo visivel da página
<!DOCTYPE html><html><head><title>Título da página</title>
</head>
<body>
<h1>Isto é um títuto</h1>
<p>Isto é um paragrafo.</p>
</body>
</html>
Elementos HTMLHTML
6
Titulos - de <h1>…</h1> a <h6>…</h6>
Paragrafos - <p>…</p>
Links - <a>…</a>
Imagens - <img src=“neecist.jpg" alt=“neecist.org" width="150" height=“200">
Os elementos podem conter outros elementos (“Nested HTML Elements”).
Nunca esquecer de colocar a tag final (como </p>).
Linha em branco - <br>. Trata-se de um caso especial, “Empty HTML Elements”, porque não tem conteudo e pode não ser fechado. Caso seja deve ser <br />
Linha horizontal - <hr>
Atributos HTMLHTML
7
Língua do Site - <html lang="en-US">
Titulo - <p title=“Sobre o NEEC">…</p>
Links - <a href=“neecist.org">NEEC</a>
Fonte e imensões de Imagens - <img src=“neecist.jpg" alt=“neecist.org" width="150" height=“200">
Atributo “Alt” (fornece um texto alternativo para uma imagem - <img src=“neecist.org" alt="W3Schools.com" width="104" height="142">
Outros, por exemplo: disabled, id, style, title, value
Nota: comentários em HTML - <!– o comentário escreve-se aqui -->
TRY
IT!
8
HTML
Formatações em HTMLHTML
9
Inserir texto já pré-formatado com espaços e com linhas - <pre>
Inserir cor de fundo - <body style="background-color:lightgrey">
Negrito sem importância extra - <b>…</b>
Negrito com importância semantica - <strong>…</strong>
Itálico sem importância extra - <i>…</i>
Itálico com importância semantica - <em>…</em>
Texto pequeno - <small>…</small>
Realçado com marcador fluorescente - <mark>…</mark>
Texto rasurado - <del>…</del>
Formatações em HTMLHTML
10
Sublinhado - <ins>…</ins>
Texto subescrito (abaixo da linha)- <sub>…</sub>
Texto supercrito (acima da linha)- <sup>…</sup>
Pequenas citações - <q>…</q>
Longas citações - <blockquote>…</blockquote>
Abreviaturas - <abbr>…</abbr>
Definições - <dfn>…</dfn>
Contacto/endereço - <adress>…</adress>
Obra citada ao citar texto - <cite>…</cite>
Formatações em HTMLHTML
11
Sublinhado - <ins>…</ins>
Texto subescrito (abaixo da linha)- <sub>…</sub>
Texto supercrito (acima da linha)- <sup>…</sup>
Pequenas citações - <q>…</q>
Longas citações - <blockquote>…</blockquote>
Abreviaturas - <abbr>…</abbr>
Definições - <dfn>…</dfn>
Contacto/endereço - <adress>…</adress>
Obra citada ao citar texto - <cite>…</cite>
Tabelas em HTMLHTML
12
<table style="width:100%"><tr>
<td>NEEC</td><td>MEEC</td>
</tr><tr>
<td>IST</td><td>Lisboa</td>
</tr></table>
Table define a tabelatr define uma linhatd define uma coluna
Formulários em HTMLHTML
13
Definir o formulário - <form>…</form>
Um formulário pode ter vários tipos de entradas como se vai ver mais à frente:
<input type="text" name="nome">
<input type="radio" name="sexo" value="masculino" checked>Masculino<input type="radio" name="sexo" value="feminino">Feminino
<select name="Idade"><option value="20">20</option><option value="21">21</option><option value="22">22</option></select>
<textarea name="message" rows="10" cols="30"></textarea>
<input type="submit" value="Submeter"></form>
TRY
IT!
14
HTML
15
CSS O que é o CSS?
CSS significa Cascading Style Sheets e é uma linguagem usada para descrever o formato e aspecto de um documento como HTML.
Podes usá-la para personalizar as tuas páginas.
16
CSS Secções – revisitar HTML
<!DOCTYPE html><html><head><title>seccoes</title></head><body><div style="width:100%;">
<div style="width:100%;display:block;margin-right:auto;margin-left:auto;"><div style="width:30%;background-color:blue;display: inline-block;">
<div style="color:yellow;"> Divception </div></div><div style="width:30%;background-color:yellow;display: inline-block;">
<div style="color:red;"> Divception </div></div><div style="width:30%;background-color:red;display: inline-block;">
<div style="color:yellow;"> Divception </div></div>
</div></div></body></html>
17
CSS Onde inserir CSS?
EXTERNAL<header><title> Selectores </title>
INTERNAL<link rel='stylesheet' type='text/css' href='examples.css' />
<style>body {background-color: linen;}h1 { color: maroon;margin-left: 40px;}
</style></header>
<body>
<div style="width:100%;display:block;margin-right:auto;margin-left:auto;">
<h1>INLINE</h1></div>
</body>
18
CSS Selectores e classes
#container-outter{margin:15px;border:1px solid black;background:#99CCFF;}
#container-inner{margin:15px;padding:15px;border:1px solid black;background:white;}
body{color:black;font-family:sans-serif;}
h1{font-weight:bold;}
p{color:#006699;}
.my_paragraph{color:#0000FF;}
p.my_paragraph{color:#33CCFF;}
19
CSS Selectores e classes (2)
<header><title> Selectores </title><link rel='stylesheet' type='text/css' href='examples.css' /></header>
<div id='container-outter'><div id='container-inner'>
<h1> Exemplo de texto com tag h1 </h1>O texto sem 'tags' a envolvê-lo recebe a formatação geral de body.<p> O texto com tag p recebe a formatação do selector genérico p. </p><div class='my_paragraph'> (…) </div><div class='my_paragraph'><p> (…) </p></div><div><p class='my_paragraph'> (…) p></div><div><p class='my_paragraph'> (…) <span class='my_paragraph'>palavra</span> (…) </p></div>
</div></div>
CSS
TRY
IT!
20
21
CSS Margens e fronteiras
.exemplo{Width:100%;Margin:20px;Padding:15px;
}
22
CSS Blocos
.seccao3{display:inline-block;margin-left:auto;margin-right:auto}
.seccao1{display:inline;}
.seccao2{display:block;margin-left:auto;margin-right:auto;}
23
CSS Tipos de letra
.exemplo{font-size:100%;font-familly: ‘Raleway’,sans-serif;font-weight:bold;
}
1. http://www.google.com/fonts2. Escolher uma fonte3. “Add to Collection”4. Use
24
CSS Fundos
.exemplo{background-color:linen;background-image: url(“imagem.png");background-repeat:no-repeat;
}
É bom colocar uma cor de fundo para o caso da imagem não ser encontrada A escolha da imagem de fundo nem sempre é simples. Normalmente pretende-seOcupe sempre o espaço total. Há duas hipóteses:
• Imagem com grande resolução que possa ser expandida• Imagem que permita repetição à partida - padrão
CSS
TRY
IT!
25
O que é o PHP?
PHP é uma linguagem interpretada baseada em C usada no lado do servidor que permite gerar conteúdo de HTML.
PHP
26
Sintaxe
<?php
// Colocar aqui o código a executar
Echo “HELLO WORLD”;
?>
PHP
27
<?php
// Não é necessário declarar as variáveis
$numero = 1234;$string = “NEECIST”;Echo “Numero: $numero <br> String: $string”;
?>
PHP Variáveis
28
<?php
$numero = 1234;$string = “NEECIST”;If ( $numero == 1234 ){
Echo “Numero: $numero <br> String: $string”;}
?>
PHP IF & WHILE
29
<?php
function escrever($string) {echo "$string ";
}escrever("Hello world!");
?>
PHP Funções
30
PHP
TRY
IT!
31
<form action="action_page.php“ method="POST“ >Nome:<br><input type="text" name="nome"><br><br><input type="submit" value="Submeter"></form>
<?phpIf ( isset ($_POST[‘nome’]) ){
$nome = $_POST[‘nome’];echo “Bem vindo $nome”;
}?>
PHP Formulários
32
include ‘footer.php';
or
require ‘footer.php';
PHP Require&include
33
<?php
session_start();if ( !isset ($_SESSION['number'])) $_SESSION['number']=0;$_SESSION['number']++;Echo "{$_SESSION['number']}";
?>
PHP Sessões
34
PHP
TRY
IT!
35
36
Java Script O que é o JavaScript?
Javascript é uma linguagem de scripting. É client-sided, correndo localmente no browser
Com esta linguagem podes:• Criar uma página com conteúdo dinamico.• Ter uma página com a qual o utilizador pode interagir.
37
Java Script Onde codar
<html><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script type="text/javascript">document.write("<h1>Isto foi escrito no header...</h1>");</script></head><body><script type="text/javascript">document.write("<h1>Isto foi escrito no body...</h1>");</script><script type="text/javascript" src="file.js">document.write("Isto veio do ficheiro externo e está no body</h1>");</script></body></html>
38
Java Script Sintaxe
<html><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><script type="text/javascript">var string = "cada comando é terminado por um ;";var string2 = 'a keyword var cria uma variavel';
var numero = 10; //Isto e um comentario! O javascript ignora espaços no codigo e line breaks
function escreve_algo(){document.write("a keyword function declara uma funcao que podemos chamar posteriomente <br> ");document.write(string+" <br> "+string2);}
escreve_algo(); //Aqui chamamos a função declarada anteriomente</script></body></html>
39
Java Script Variáveis
<html><body><script>var inteiro = 1;var floating = 2;
var resultado = inteiro + floating;document.write(resultado);var string = '<br>O resultado e: ';document.write(string+resultado+"<br>");document.write(1/2);document.write("<br>");
var numero_em_string = "2000";// Imprimir antes de converterdocument.write(numero_em_string+1000);var convertido = parseInt(numero_em_string);document.write("<br>");document.write(convertido+1000);</script><body></html>
40
Java Script Eventos
<html><head><title></title></head><body><script src="evento.js"></script><style>a:link { color: #FF0000;}a:visited { color: #00FF00;}div{text-align: center;}</style>
<div id="cena" style="background-color: red">O que esta aqui?</div><button type="button" onclick="showme()">clica aqui e descobre!</button><button type="button" onclick="onde()">Quero uma lista dos eventos que posso usar!</button><div id="hidden_cena" style="visibility: hidden; position: fixed; background-color: gray; position: relative; top: 50%; transform: translateY(-50%); font-size: 48px; height: 200px"><a style="position: relative; top: 50%; transform: translateY(-50%);" href="http://www.w3schools.com/jsref/dom_obj_event.asp">http://www.w3schools.com/jsref/dom_obj_event.asp</a></div></body></html>
41
Java Script Eventos(2)
function showme(){cena = document.getElementById("cena");cena.style.backgroundColor = "lightgreen";cena.innerHTML = Date();}
function onde(){coise = document.getElementById("hidden_cena");coise.style.visibility = "visible";}
TRY
IT!
42
Java Script
Obrigada!
43
A equipa: