Post on 22-May-2015
x(html)
(X)HTMLhttp://www.w3schools.com/html/default.asp
(X)HTMLconceitos introdutórios
atualmente um documento HTML é composto por uma série de elementos formatados por CSS.
Em HTML (normalmente referimos como HTML o que é XHTML) existe uma clara distinção entre estrutura e forma.
O XHTML é uma versão mais restrita e limpa do HTML e é definido como uma aplicação XML. O XHTML é uma combinação de HTML com XML, uma depuração do HTML tendo em conta a organização estrutural do XML.
(X)HTMLconceitos introdutórios
além disso, o XHTML
• é uma linguagem de “marcação” / markup (e não programação!) usada nas páginas da web;
• os documentos são escritos apenas com texto;
• cada página é um ficheiro que tem a extensão .htm (ou .html);
• o nome do ficheiro tem de ser em minúsculas, sem acentos e sem espaços (tal como todos os ficheiros utilizados no projeto web tais como imagens, scripts, pastas, etc...).
(X)HTMLconceitos introdutórios | identação do código
(X)HTMLconceitos introdutórios
um elemento HTML é constituído preferencialmente por 3 partes
• marcador / etiquetas (tags) de inicio constituída pelos símbolos < e > e uma palavra reservada (p, form, img, etc...)
• um conteúdo
• marcador (tags) de fim
<p> html </p>
<marcador de início> conteúdo </marcador de fim>
elemento
(X)HTMLconceitos introdutórios | marca de início
como foi referido anteriormente, o marcador de inicio é constituída pelos símbolos < e > e uma palavra reservada.
exemplo: <a><p>
No entanto, alguns têm ainda atributos que o personalizam ou complementam e que podem ser obrigatórios ou opcionais. O seu valor é colocado entre aspas.
exemplos: <a href=”index.htm”> <img src=”test.jpg”> <div id=”intro”>
<marcador de início atributo=””> conteúdo </marcador de fim>
<marcador de início> conteúdo </marcador de fim>
(X)HTMLconceitos introdutórios | conteúdo
conteúdo é basicamente o texto que aparece nas páginas;Pode ser escrito em português, com maiúsculas, minúsculas, acentos e espaços
<marcador de início> conteúdo </marcador de fim>
(X)HTMLconceitos introdutórios | marca de fim
a marca de fim serve exclusivamente para indicar que o fim do elemento que estamos a utilizar
Usa-se o sinal /
Por exemplo:
</p></table>
<marcador de início> conteúdo </marcador de fim>
o XHTML exige uma sintaxe limpa e apresenta as seguintes características:
• Os elementos têm que ser claramente aninhados (nested) da seguinte forma:<b><i> Isto é um texto a bold e itálico </i></b> e não desta<b><i> Este é um texto a bod e itálico </b></i>
• Os seus elementos devem ser sempre fechados<p>Isto é um parágrafo</p>
• Os elementos vazios, também, devem ser fechados e com um espaço extraantes da barra<br /> <hr /> <img src="imagem.jpg" />
• Os seus elementos devem ser sempre em minúsculas
(X)HTMLconceitos introdutórios | características do XHTML
exemplo da estrutura base de um documento HTML:
<html>
<head> ... </head>
<body> ... </body>
</html>
(X)HTMLestrutura da página
cabeçalho
corpo
à luz do XHTML, um documento vazio teria então o seguinte aspeto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "www.w3.org—xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> .... </head> <body> .... </body>
</html>
(X)HTMLestrutura da página
cabeçalho
corpo
DOCTYPE – O tipo de DTD (document type definition) indica ao browser qual o tipo de marcação que está a ser usada e um link para o documento.
Por defeito pomos a última mais usada:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "www.w3.org—xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
(X)HTMLestrutura da página | definição do DTD
o cabeçalho do documento contém diversas informações importantes para o correto funcionamento e formatação do conteúdo do documento (pode ser entendido como os bastidores do palco principal).
Por exemplo, é nesta área que se define o titulo que aparece na barra superior do navegador (ou mais recentemente, no separador). De que forma? Recorrendo à etiqueta <title>
Ex.<title> atelier de multimédia </title>
(X)HTMLestrutura da página | o cabeçalho | title
o elemento <meta> é usado para conter meta-informação sobre os conteúdos do documento, de forma a que os mecanismos de pesquisa possam mais facilmente identificar e catalogar os documentos encontrados.
• keywords (palavras chave para os motores de busca)• tipo de conteúdos e de linguagem• tipo de codificação dos caracteres• autor• descrição da página• tempo de atualização automática• entre outros...
(X)HTMLestrutura da página | o cabeçalho | meta
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>atelier de multimédia</title><meta name="author" content=“marco pinheiro"><meta name="description" content=“página da uc"><meta name="keywords" content=“palavras chave, separadas, por, virgulas">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/><link rel="StyleSheet" href="stylesheet.css" type="text/css"media="all" /><script type="text/javascript" src="javascriptfile.js"></script>
</head>
(X)HTMLestrutura da página | o cabeçalho | exemplo de meta info.
é ainda nesta zona que se definem os links para os ficheiros externos.
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>atelier de multimédia</title><meta name="author" content=“marco pinheiro"><meta name="description" content=“página da uc"><meta name="keywords" content=“palavras chave, separadas, por, virgulas">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/><link rel="StyleSheet" href="stylesheet.css" type="text/css"media="all" /><script type="text/javascript" src="javascriptfile.js"></script>
</head>
(X)HTMLestrutura da página | o cabeçalho | ex. de links declarados
o elemento body contêm todos os elementos, atributos e informação que a página deve apresentar ao leitor.
O elemento body deve ser composto depois do elemento head e antes da tag de fecho do elemento html:
...<body> Todos os conteúdos do documento XHTML.</body>...
(X)HTMLestrutura da página | o corpo (body)
o elemento <!-- --> permite-nos inserir comentários no código HTML. Os comentários não são lidos pelo browser, embora sejam visíveis na source do documento.
<!—Isto é um comentário num doc. XHTML -->
(X)HTMLestrutura da página | os comentários
títulos (cabeçalhos)
existem 6 níveis de títulos (headings).
o nível de importância é definido por um número entre 1 e 6.
o mais importante será o <h1> e o menos importante o <h6>. Esta importância
Ex.
<h1>Mais importante</h1> <h2>2º mais importante</h2> <h6>Último</h6>
(X)HTMLestrutura da página | elementos do corpo | <h1> ... <h6>
parágrafo e quebra de linha
parágrafos: delimitam blocos de informação<p> conteúdo do parágrafo </p>
quebra de linha: <br />(elemento que não precisa de marca do fim)
Ex.
<p> Em OM temos três áreas: HTML, CSS e Drupal. A UC tem 60 horas. <br /> O docente é o Marco Pinheiro, quer gostem quer não!</p>
(X)HTMLestrutura da página | elementos do corpo | <p>; <br />
o elemento hr permite definir réguas horizontais que podem ser usadas para quebrar textos longos ou para estruturar melhor um documento.
o elemento hr é um elemento vazio, logo, não tem tag de fecho, devendo ser fechado na tag de abertura, precedida de um espaço.
<p>Textos muito longos podem ser divididos emsecções com headings ou, em alternativa,réguas horizontais</p> <hr /> <h3>Um headingtambém quebra o texto.</h3> <p>Podendo um novotexto começar imediatamente a seguir.</p>
As réguas são formatadas por defeito a toda a largura da janela do documento, com sombreado.
(X)HTMLestrutura da página | as réguas horizontais hr
negrito<b>…</b> <strong> ... </strong>
itálico<i>…</i><em> ... </em>
sublinhado (underline)<u>…</u>
Ex.
<p> Em OM temos três áreas: <b>HTML, CSS e Drupal</b>. A <i>UC</i> tem 60 horas. <br /> O docente é o <u>Marco Pinheiro</u>, quer gostem quer não!</p>
(X)HTMLestrutura da página | elementos do corpo | formatação txt
e agora estarão a pensar: e como se formata o tipo de letra, tamanho, cor, etc.? >> CSS (mais adiante).
(X)HTMLestrutura da página | elementos do corpo | formatação txt
As imagens são normalmente usadas inline, ie, inseridas num bloco de texto.O elemento img é sempre usado com o atributo src (source) que aponta para a url da imagem, no servidor que aloja o documento html ou outro e com o atributo alt, que fornece uma descrição em texto da imagem. O elemento img é um elemento vazio, devendo portanto ser sempre fechado com />.
O atributo alt permite que os browsers possam apresentar texto em lugar da imagem caso o suporte de imagens esteja desligado, o browser apenas suporte texto, enquanto a imagem é carregada, ou se a imagem estiver, por alguma razão, inacessível.
As imagens são dimensionadas automaticamente pelo browser quando carregadas. Contudo, em documentos complexos, por vezes é recomendável utilizar também os atributos width e height para indicar ao browser a dimensão das mesmas, de forma a que a página possa ser formatada mesmo que estas estejam inacessíveis ou demorem mais tempo a carregar.
(X)HTMLestrutura da página | elementos do corpo | imagens
imagem <img src=“caminho e nome da imagem com a extensão” [alt=”texto alternativo”] [width=”largura”] [height=”altura”] />
<img src=“logotipo.jpg” />
nota: ter em atenção que o caminho e o nome do ficheiro da imagem têm de ser escritos partindo do ponto de partida do documento; ou seja, se a imagem estiver na directoria do documento HTML só se escreve o nome do ficheiro. Se estiver noutra directoria temos de seguir os mesmo cuidados que nas hiperligações
mais uma vez: usar minúsculas, não usar acentos e espaços nos nomes das imagens!
(X)HTMLestrutura da página | elementos do corpo | imagens
imagem <img src=“caminho e nome da imagem com a extensão” />
<p> Uma imagem com o tamanho real: <img src="http://meusregistros.pbwiki.com/f/grav_criancas_sala_de_aula2.jpg" /> </p>
no caso de se pretender apresentar a imagem com dimensões diferentes do original, poderão ser utilizadas as propriedades width (largura) e height (altura) e especificar a medida (em píxeis).
<p>Uma imagem com 48 pixeis de comprimento e 48 pixeis de altura <img src="http://meusregistros.pbwiki.com/f/grav_criancas_sala_de_aula2.jpg" width="48" height="48" /> </p>
<p>Uma imagem com 148 pixeis de comprimento e 48 pixeis de altura <img src="http://meusregistros.pbwiki.com/f/grav_criancas_sala_de_aula2.jpg" width="148" height="48" /> </p>
(nota: caso não se especifique uma destas duas propriedades, o redimensionamento será feito de forma proporcional, o que é bastante útil)
(X)HTMLestrutura da página | elementos do corpo | imagens
imagem <img src=“caminho e nome da imagem com a extensão” />
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sol" /> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercúrio" /> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Vénus" /></map>
uma vez que a tarefa pode tornar-se demorada, existem diversas ferramentas que ajudam a fazer esta tarefa:
• http://www.maschek.hu/imagemap/imgmap• editores de html (dreamweaver, kompozer, etc.)
(X)HTMLestrutura da página | elementos do corpo | image maps
lista<ol>…</ol>
elemento de uma lista <li>…</li>
Ex.
<ol> <li>Informatica</li> <li>Fotografia</li> <li>Video</li></ol>
(X)HTMLestrutura da página | elementos do corpo | listas numeradas
Ex.<font size=1> <h4>Lista numeradas:</h4>
<ol><li>Maças</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol>
<h4>Lista com letras:</h4>
<ol type="A"> <li>Maças</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol>
...
(X)HTMLestrutura da página | elementos do corpo | listas numeradas
Ex.<font size=1> <h4>Lista com letras minusculas:</h4> <ol type="a"> <li>Maças</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol>
<h4>Lista com numeros romanos:</h4>
<ol type="I"> <li>Maças</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol>
...
(X)HTMLestrutura da página | elementos do corpo | listas numeradas
Ex.<font size=1> <h4>Lista com numeros romanos minusculos:</h4>
<ol type="i"> <li>Maças</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol>
</font>
(X)HTMLestrutura da página | elementos do corpo | listas numeradas
lista<ul>…</ul>
elemento de uma lista <li>…</li>
Ex.
<ul> <li>Informatica</li> <li>Fotografia</li> <li>Video</li></ul>
(X)HTMLestrutura da página | elementos do corpo | listas n/ numeradas
O elemento a (anchor) define ligações relativas ou absolutas. Ao contrário da maior parte dos elementos, o elemento a requer sempre ou o atributo href ou o atributo name.
<a href=”documento”> descrição </a><a name=”zona1”> descrição </a>
(X)HTMLestrutura da página | elementos do corpo | âncoras
O elemento a (anchor) define ligações relativas ou absolutas. Ao contrário da maior parte dos elementos, o elemento a requer sempre ou o atributo href ou o atributo name.
O atributo name permite que secções de um documento XHTML sejam rotuladas com uma referência específica. O atributo name permite criar links para uma secção específica dentro do documento. Assim, se tivermos um documento longo podemos criar dentro do documento um link para o topo, por exemplo.
A utilização deste elemento apenas com o atributo name não resulta na criação de um link visível mas sim na marcação de um alvo para criação de links.
(X)HTMLestrutura da página | elementos do corpo | âncoras (internas)
Assim, o link
<a href="#topo">Topo</a>
remete-nos para o topo desta página. Quando os links são feitos dentro de um mesmo documento, devemos sempre especificar o name com #,
<a name=”topo”> bla bla bla </a>
mesmo quando queremos linkar ao topo do documento (e neste caso deveremos criar um name no topo), caso contrário, especificando apenas o nome do documento, faremos com que o browser recarregue a página.
(X)HTMLestrutura da página | elementos do corpo | âncoras (internas)
hiperligação (link)faz a ligação a outros documentos
<a href=”documento”> descrição </a>
Ex.
<p>Já passaste pelo <a href="http://elearning.esev.ipv.pt/moodle1112/course/view.php?id=613">Moodle de OM</a>? É bastante útil!</p>
(X)HTMLestrutura da página | elementos do corpo | âncoras (externas)
hiperligação (link)faz a ligação a outros documentos
Ex.
Ligação de um ficheiro que está em w:\tm\ficheiro1.htm para um que está em w:\tm\ficheiro2.htm<a href=“ficheiro2.htm>…</a>
Ligação de um ficheiro que está em w:\tm\ficheiro1.htm para um que está em w:\tm\teorica\ficheiro2.htm<a href=“teorica/ficheiro2.htm>…</a>
Ligação de um ficheiro que está em w:\tm\ficheiro1.htm para um que está em w:\hj\ficheiro2.htm<a href=“../hj/ficheiro2.htm>…</a>
(X)HTMLestrutura da página | elementos do corpo | âncoras (externas)
a nova página abre na janela atual do navegador. Se desejarmos abrir uma nova janela em cima da já aberta, utilizar o atributo target=”_BLANK”
<a href=”documento” target=”_BLANK”> descrição </a>
pode e deve ainda ser adicionada descrição à hiperligação recorrendo ao atributo title
<a href=”documento” target=”_BLANK” title=”clique para aceder à nossa unidade curricular”> descrição </a>
(X)HTMLestrutura da página | elementos do corpo | âncoras (externas)
muitas vezes é usada para estruturar a informação
tabela <table>…</table>
linha (table row)<tr>…</tr> célula (table data)<td>…</td> (no caso de ser a primeira linha: <th> ... </th> - cabeçalho)
<table border=“2”><tr> <th>título 1</th> <th>título 2</th></tr><tr> <td>Célula da 2ª linha e 1ª Coluna</td> <td>Célula da 2ª linha e 2ª Coluna</td></tr></table>
(X)HTMLestrutura da página | elementos do corpo | as tabelas
também pode ser adicionada uma legenda à tabela<caption>Legenda</caption>
Ex.
<h4> Esta tabela tem legenda e borda de 6: </h4>
<table border="6"> <caption>Legenda da tabela...</caption> <tr> <th>tit1</th> <th>tit2</th> <th>tit3</th> </tr><tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>
(X)HTMLestrutura da página | elementos do corpo | as tabelas
as iframes servem para abrir uma janela para outro local (ou documento) dentro do próprio documento. É como que uma “janela” para outro local!
<iframe src="URL"></iframe>
Ex.
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
(X)HTMLestrutura da página | elementos do corpo | iframes
(X)HTMLembeber conteúdos externos | widgets sociais
http://developers.facebook.com/docs/plugins/
http://web.appstorm.net/how-to/social-media-how-to/6-tools-to-create-a-google-plus-profile-widget-for-your-site/
youtube.com
twitter.com/about/resources/widgets/
(X)HTMLvalidação do código escrito
http://validator.w3.org
(X)HTMLestrutura da página | formulários
(X)HTMLestrutura da página | formulários
http://www.w3schools.com/html/html_forms.asp
• Dentro do grupo dos formulários, o HTML oferece os seguintes elementos:
• Input
• text fields (caixa de input de uma linha)• file fields • checkbox (liga/desliga)• buttons (submit / reset)• radio (caixa de opção)• hidden fields (campos oculos)
• textareas (áreas de texto)
• select (caixas de combinação / listagem)
• fieldset’s (delimitação e agrupamento de campos)
(X)HTMLestrutura da página | formulários | tags essenciais
• Qualquer formulário criado em HTML é delimitado com as tags <form> (e </form>...)
• A tag form tem as seguintes propriedades:
• action - ficheiro que irá receber / processar os dados
• method - tipo de envio (GET ou POST)
• enctype - tipo de dados a ser enviado pode ser de dois tipos:
• application/x-www-form-urlencoded - envio apenas de texto
• multipart/form-data - envio de texto / ficheiro (binário) Ex. upload de uma foto, documento, etc.
• Ex. <form action="formProcessa.php" method="post" enctype="application/x-www-form-urlencoded" name=”formulario”>
(X)HTMLestrutura da página | formulários | tags essenciais | form
• A tag <input type=”text”> desenha uma caixa de texto
• Tem a seguinte propriedade:
• size - número de caracteres que mostrará antes de desaparecerem
• Ex. <input type="text" size="45" name="nome">
(X)HTMLestrutura da página | formulários | tags essenciais | input
• A tag <input type=”password”> desenha uma caixa de texto
• Tem a seguinte propriedade:
• size - número de caracteres que mostrará antes de desaparecerem
• Ex. <input type="password" name="passwd" size="45">
(X)HTMLestrutura da página | formulários | tags essenciais | input
• As tags <input type=”hidden”> criam um campo cujo valor é definido apenas no código html e como tal, nunca aparecerá desenhado junto dos outros campos.
• Obs. se o utilizador tiver curiosidade e for ver o código fonte da página, terá acesso ao valor declarado no mesmo!
• Ex. <input type="hidden" name="escondido" value="192.168.1.1">
(X)HTMLestrutura da página | formulários | tags essenciais | input
• A tag <input type=”checkbox”> criam uma caixa cujo valor será de uma lógica booleana, ou seja, sim ou não
• Caso o utilizador active esta caixa, será enviado para o servidor o valor atribuido à mesma (value). Caso contrário, a variável é passada para o servidor com valor nulo
• Caso o programador queira ter a caixa activada de forma predefinida, deverá adicionar a propriedade checked com o valor checked
• Ex. <input type="checkbox" name="aceita" value="sim" checked="checked">
(X)HTMLestrutura da página | formulários | tags essenciais | input
• A tag <input type=”radio”> criam uma caixa cujo valor será de uma lógica booleana, ou seja, sim ou não
• Caso o programador queira ter a caixa activada de forma predefinida, deverá adicionar a propriedade checked.
Nota importante: Se for dado o mesmo nome às tags (neste caso - prato), o utilizador pode apenas escolher uma opção! Caso contrário, poderia activar diversas tags radio.
• Exemplos:
<label>Peixe<input type="radio" name="prato" value="Peixe" checked></label><label>Carne<input type="radio" name="prato" value="Carne"></label><label>Salada<input type="radio" name="prato" value="Salada"></label>
(X)HTMLestrutura da página | formulários | tags essenciais | input
• A tag <input type=”file”> desenha uma caixa que permite seleccionar um ficheiro do computador do cliente (que mais tarde será enviado para o servidor)
• Ex. <input type="file" name="foto" >
(X)HTMLestrutura da página | formulários | tags essenciais | input
• As tags <input type=”submit”> e <input type=”reset”> desenham um botão no formulário
• A única diferença entre eles é apenas o fim a que se destinam.
• reset - limpa todos os campos que constam do formulário
• submit - envia os dados do formulário para o servidor para ser processado
• Ex. <input type="submit" name=”bt_encomenda” value=”Encomendar”>
• Ex. <input type="reset" name=”bt_reseta” value=”Limpar campos”>
(X)HTMLestrutura da página | formulários | tags essenciais | input
• A tag <select> criam uma caixa se listagem capaz de mostrar diversos valores sempre que o utilizar clicar na mesma.
• Só será enviado para o servidor a opção seleccionada pelo utilizador.
• Exemplo:
<select name="sexo"> <option value="Masc" selected>M</option> <option value="Fem">F</option> <option value="Hibrido">H</option></select>
(X)HTMLestrutura da página | formulários | tags essenciais | select
• Ao contrário da tag <input type=”text”> que cria uma caixa de uma só linha, a tag <textarea> permite que o utilizador tenha uma caixa de introdução de dados mas desta feita com várias linhas ao seu dispor.
• Tem as seguintes propriedades:
• cols - número de caracteres que mostrará em largura
• rows - número de linhas que a caixa terá
• Ex. <textarea cols="50" rows="5" name="mensagem"> </textarea>
!! ao contrário das outras caixas de input, esta tag necessita ser fechada!
(X)HTMLestrutura da página | formulários | tags essenciais | textarea
• A tag <label> cria um rótulo para o campo de input de forma a que o utilizador tenha conhecimento do que se pretende com o mesmo.
• Ex.
<label> nome do utilizador <input type="text" name="nomeUser"></label>
(X)HTMLestrutura da página | formulários | tags essenciais | label
• A tag <fieldset> desenha uma moldura em volta de um ou vários campos do formulário de forma a agrupá-los visualmente com uma moldura em torno dos mesmos;
• Acrescenta ainda uma pequena legenda que descreve o “tema” a que os campos se referem.
• Ex. <fieldset><legend>dados profissionais</legend> ... (campos aqui!) ... </fieldset>
(X)HTMLestrutura da página | formulários | tags essenciais | fieldset
• cheat sheet de HTML:http://elearning.esev.ipv.pt/moodle1112/file.php/613/html/html-cheat-sheet.pdf
(X)HTMLreferências
• http://www.w3schools.com/html• http://www.leonelcunha.net/aulas12p/recursos/ppm_2_XHTML_CSS.pdf
• tutoriais vídeo:• http://www.guanabara.info/category/lp/html/
(X)HTMLreferências
o futuro?
HTML5http://www.w3schools.com/html5/html5_reference.asp
CSS3http://html5-showcase.com/