Baixe o app para aproveitar ainda mais
Prévia do material em texto
Programação WEB Prof. Carlos Souza 1 HTML Agenda Conceito HTML Características Publicação Elementos Estruturais Estrutura da Página Cabeçalho Corpo Conceito HTML Linguagem que define a estrutura de páginas web. Permite publicar documentos online e inclusão de material multimídia. Hoje está na versão 5. Evolução do HTML O HTML tem bastante história e desde 1992 passou por várias versões e a linguagem evoluiu muito de lá pra cá. Em 1992, a W3C, de Tim Berners-Lee, lança o HTML com apenas algumas marcações de texto e link. Em 1993 apareceram marcações de tabelas, formulários e alguns estilos para definir a aparência. Em 1994 é lançado o HTML v2.0 com algumas de suas características padronizadas. Em 1996 foi lançado o CSS1 para formatar todos os estilos visuais da página separado do documento HTML. Evolução do HTML Em 1999 é lançado o HTML v4.01. Em 2000 o HTML evolui para (X)HTML, unindo documentos XML com HTML. Em 2008 começa a documentação do HTML 5, ao qual está evoluindo e é a versão atual. O HTML5 foi criado exatamente para dar significado semântico às páginas web, além de padronizar e facilitar o entendimento das sessões de um site pelos navegadores. Características da HTML É uma linguagem simples que mistura conteúdo textual e marcações (tags). É usada para exibir conteúdo formatado num cliente web (na vegador) e também para interagir com sistemas baseados na web, hospedados em um servidor. As tags de marcação são usadas para descrever: Aparência; posicionamento (layout); Conteúdo; e elementos na página (ex.: formulários, imagens, etc). Características da HTML As tags são formadas assim: <nome_da_tag [parâmetros] ... >; Cada página web (ou HTML) é representada por um arquivo com a extensão .html ou .htm; A especificação da HTML é definida e mantida pelo consórcio W3C, e atualmente está na versão 5.0; O nome do arquivo devem ser em minúsculas, sem acentos e sem espaços. HTML – Publicação Publicação Uma página HTML pode ser aberta em qualquer navegador existente, diretamentedo disco rígido, porém a sua publicação na web depende da disponibilização da página por meio da um progra ma de servidor de páginas web, conhecido como webserver, que deve estar disponível e visível na WWW (internet), com IP público. HTML – Publicação Publicação Os servidores web geralmente trabalham na porta 80 do protocolo TCP/ IP, e ficam escutando as requisições HTTP e atendem enviando a página s olicitada ao cliente que fez a requisição. O navegador é o responsável por exibir as páginas. HTML – Elementos Estruturais Estrutura html, head, body, div, span Meta-Informação DOCTYPE, title, link, meta, style Formatação h1, h2, h3, h4, h5, h6, p, strong, em, abbr, acronym address, bdo, blockquote, cite, q, code, ins, del, dfn, kbd, pre, samp, var, br, center, b, i, tt, sub, sup, big, small, hr Links a, base HTML – Elementos Estruturais Imagens and Objetos img, area, map, object, param Listas ul, ol, li, dl, dt, dd Tabelas table, tr, td, th, tbody, thead, tfoot, col, colgroup, caption Formulários form, input, textarea, select, option, optgroup, button, label, fieldset, legend Script script, noscript HTML - Estrutura da Página <html> <head> </head> <body> Textos Imagens Links </body> </html> Tags HTML Esta tag define de inicio e fim de uma página HTML Dentro da página temos duas secções Cabeçalho: <head>…</head> Corpo ou Conteúdo: <body>…</body> Title Aparece na barra de título do navegador: <title>…</ title > <html>…</html> HTML - Estrutura da Página HTML - Cabeçalho <HEAD> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-1"> <TITLE>Tecnologia dos Media</TITLE> <META NAME="Author" CONTENT=“Pedro Costa"> <META NAME="Description" CONTENT=“Página da disciplina"> <META NAME="KeyWords" CONTENT=“informatica,computadores"> </HEAD> Metas Informações META Dão informações variadas sobre a página: Tipo de conteúdos e de linguagem Autor Descrição da página Keywords HTML - Cabeçalho DOCTYPE Define a versão do HTML utilizado Strict: Contém todos os elementos e attributos HTML, incluindo os de apresentação e os já obsoleto (como Font e Center). Framesets não são permitidos. Transitional: Esse DTD contem todos os elementos HTML e atributos, incluindo elementos de apresentação e obsoleto (como Font e Center). Framesets não são permitidos Frameset: O mesmo que o DTD, porém poderá conter Framesets. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> HTML - Cabeçalho Controle de Cache Cache-control Esta tag é apenas reconhecida pelo http 1.1 e permite os seguintes valores: Public: Os dados da página podem ser armazenados de forma Compartilhada. Private: É o contrário de public, o cache é armazenado para um específico usuário. No-Cache: A página não é armazenada em Cache. No-Store: É feito um cache temporário, a página não é arquivada. <meta http-equiv="cache-control" content="no-cache" /> ou <meta http-equiv=“pragma" content="no-cache" /> HTML - Cabeçalho Controle de Cache Refresh: Especifica um tempo em segundos para o browser atualizar a página, opcionalmente pode-se adicionar uma URL para a qual será redirecionado. <meta http-equiv="refresh" content="15;url=http://www.thechessman.org" /> HTML - Cabeçalho Controle de Indexação Robots Especifica informações de indexação para os robôs de busca: All: Valor default, significa vazio, o robô de busca não recebe nenhuma informação. Index: Os robôs de busca podem incluir a página normalmente. Follow: Robôs podem indexar a página e ainda seguir os links para outras páginas que ela contém. NoIndex:Os links podem ser seguidos, mas a página não é indexada. NoFollow: A página é indexada, mas os links não são seguidos. None: Os robôs podem ignorar a página. NoArchive (Apenas Google): A página não é arquivada. HTML - Cabeçalho Conteúdo Content-language Declara a(s) linguagem(ns) natural(is) do documento. Pode ser usada pelos motores de busca para categorizar por idioma. Content-type Define o tipo de conteúdo da página e o tipo de codificação de caracteres. Pode-se dizer que é a meta tag mais importante, sempre deve ser usada. <meta http-equiv="content-language" content="pt-br, en-US, fr" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> HTML - Cabeçalho Conteúdo Content-Script-Type Define o tipo padrão da linguagem de script do documento. Content-Style-Type Define o tipo padrão de linguagem para estilização do documento. <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> HTML - Cabeçalho Conteúdo Description Contém uma descrição da página Content-type Define o tipo de conteúdo da página e o tipo de codificação de caracteres. Pode-se dizer que é a meta tag mais importante, sempre deve ser usada. <meta name="description" content="...resumo da página..." /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> HTML - Cabeçalho Palavras-Chave Keywords As keywords tipicamente são usadas por alguns motores de busca para indexar os documentos juntamente com informações encontradas em seu título e body. As frases ou palavras devem ser separadas por vírgulas. <meta name="keywords" content="Noticias, Jornal, Economia " /> 23 HTML - Corpo O elementos têm uma estrutura de encaixe hierárquico, mas não podem ser intercalados. <p>Paragrafo com texto <b>tipo bold</b> texto normal novamente</p> Correto Incorreto <p>Texto que não <b> aparece</p> correctamente</b> HTML - Corpo Paragrafo Parágrafos: delimitam blocos de informação - <p>…</p> , deixando uma linha em branco entre cada parágrafo. Exemplo: <p> Em TM temos três áreas: Informática, Fotografia e Vídeo. A disciplina tem 11 horas semanais.<br> Dividida em 6 para Informática e 2,5 para as restantes.</p> Resultado Em TM temos três áreas: Informática, Fotografia e Vídeo. A disciplina tem 11 horas semanais. Dividida em 6 para Informática e 2,5 para as restantes. HTML - Corpo Quebra de linha Exemplo: <p> Para inserir<br>um break<br>num<br>paragrafo,<br>usa-se a marca br. Resultado Para inserir um break num paragrafo usa-se uma marca br. Quebra de linha: <br> - Elemento que não precisa de marca do fim HTML - Corpo Cabeçalhos Existem 6 níveis de cabeçalhos, desde o mais importante <h1> até ao menos <h6>. Exemplo: <h1>Mais importante</h1> <h2>2º mais importante</h2> <h6>Último </h6> Resultado Mais Importante 2º mais importante Último <h1 align="center">Este é o cabeçalho 1</h1> <p>Este cabeçalho está centralizado em relação ao tamanho da página.</p> Este é o cabeçalho 1 Este cabeçalho está centralizado em relação ao tamanho de página Formatação do texto Negrito ou bold - <b>…</b> Italico - <i>…</i> Sublinhado - <u>…</u> Exemplo: <p> Em TM temos três áreas: <b>Informática, Fotografia e Vídeo</b>. A disciplina tem <i>11 horas semanais</i>.<br> Dividida em 6 para <u>Informática</u> e 2,5 para as restantes.</p> Resultado Em TM temos três áreas: Informática, Fotografia e Vídeo. A disciplina tem 11 horas semanais. Dividida em 6 para Informática e 2,5 para as restantes. HTML - Corpo Formatação do texto Exemplo: <b>Este texto está em bold</b> <br> <i> Este texto está em italico </i> <br> <small> Este texto mais pequeno </small> Resultado Este texto está em bold Este texto está em italico Este texto mais pequeno HTML - Corpo Tamanho e fonte: <FONT SIZE="4”>Alterado o tamnho da fonte</FONT> <FONT FACE="Arial">Alterada a fonte</FONT> <FONT SIZE=“10" FACE=“Verdana”>Alterados tamanho e fonte</FONT> Formatação do texto HTML - Corpo Elementos do Corpo Cor: <FONT COLOR="COR">TEXTO COLORIDO</FONT> Código Cor #800000 Vermelho Escuro #008000 Verde Escuro #808000 Amarelo Escuro #000080 Azul Escuro #c0c0c0 Verde Claro #c0dcc0 Verde Garrafa #a6caf0 Azul Claro #808080 Cinza Escuro #ff0000 Vermelho #0000ff Azul #ffff00 Amarelo #ffffff Branco #000000 Preto Formatação do texto Elementos do Corpo Listas Numeradas Lista - <ol>…</ol> Elemento de uma lista <li>…</li> Exemplo: <ol><li>Informatica</li> <li>Fotografia</li> <li>Video</li> </ol> Resultado 1. Informatica 2. Fotografia 3. Video HTML - Corpo Exemplo <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 maiúsculas:</h4> <ol type="A“> <li>Maças</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol> <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>RLista com numeros romanos:</h4> <ol type="I"> <li>Maças</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol> <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> HTML - Corpo Listas não numeradas e sub listas Lista - <ul>…</ul> Elemento de uma lista <li>…</li> Exemplo: <ul><li>Informática</li> <ul><li>Teórica</li> <li>Prática</li></ul> <li>Fotografia</li> <li>Video</li> </ul> Resultado • Informática • Teórica • Prática • Fotografia • Vídeo HTML - Corpo Exemplo <h4>Lista com discos:</h4> <ul type="disc"> <li>Maças</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ul> <h4>Lista com circulos:</h4> <ul type="circle"> <li>Maças</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ul> <h4>Lista com quadrados;</h4> <ul type="square"> <li>Maças</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ul> HTML - Corpo O World Wide Web utiliza-se das Uniform Resource Locators (URLs) para especificar a localização de arquivos em servidores. Uma URL inclui o tipo de recurso acessado (p.e, gopher, WAIS), o endereço do servidor, e a localização do arquivo. Se escreve de acordo com o esquema abaixo: protocolo://servidor[:port]/path/filename Onde protocolo é uma das seguintes definições Hiperligações file um arquivo no seu sistema local, ou servidor de ftp http um arquivo em um servidor World Wide Web gopher um arquivo em um servidor Gopher WAIS um arquivo em um servidor WAIS news um Usenet newsgroup telnet uma conexão Telnet HTML - Corpo Hiperligações internas É possível interligar documentos em outro diretório especificando-se o caminho relativo a partir do documento corrente, em relação ao que está sendo interligado. A marcação <A>, que define o ponto de partida para os links, é denominada de âncora. <a href=”pasta/documento”>…</a> Exemplo: <a href=“Estado/Bahia.html”>Bahia</a> Nesse exemplo, a página relacionada está na na subpasta Estado. <A HREF=“/imagens/incon1.gif”> Este indica que o arquivo incon1.gif deverá ser buscado no diretório imagens que está imediatamente acima do diretório raiz do seu servidor WWW HTML - Corpo Exemplo: Ligação de um arquivo que está em c:\Web\arquivo1.htm para um que está em c:\Web\arquivo2.htm <a href=“arquivo2.htm>…</a> Ligação de um arquivo que está em w:\tm\arquivo1.htm para um que está em c:\Web\teorica\arquivo2.htm <a href=“teorica/arquivo2.htm>…</a> Ligação de um arquivo que está em w:\tm\arquivo1.htm para um que está em c:\hj\arquivo2.htm <a href=“../hj/arquivo2.htm>…</a> Hiperligações internas HTML - Corpo Hiperligações internas É possível interligar seções em um mesmo documento, apontar uma palavra ou trecho de um texto. O "ponto de partida“ é definido atribuindo a uma âncora um nome qualquer, precedido do caracter #: Exemplo: Veja o início da <a href="#item1">segunda sessão</a>. O "ponto de chegada“ é definido atribuindo-se a uma âncora o nome correspondente ao do ponto de partida: Esta <a name="item1">segunda sessão</a> trata de.. HTML - Corpo Exemplo: <p>O site de busca é o <a href=“http://www.google.com.br”>Google</a></p> Resultado O site de busca é o Google Hiperligações externas Para interligar documentos em sites distintos, especifica-se a URL do documento que está sendo interligado. 40 HTML - Corpo Imagens Imagem - <img src=“caminho e nome da imagem com a extensão”> Exemplo: <img src=“R01.jpg”> Resultado Ter em atenção que o caminho e o nome do arquivo da imagem tem de ser escrito partindo do ponto de partida do documento Ou seja se a imagem estiver na directoria do documento HTML só se escreve o nome do arquivo. Se estiver noutra directoria temos de seguir os mesmo cuidados que nas hiperligaçõesUsar minúsculas, não usar acentos e espaços nos nomes das imagens 41 HTML - Corpo Imagens Exemplo: <p> Uma imagem com o tamanho real: <img src="http://meusregistros.pbwiki.com/f/grav_criancas_sala_de_aula2.jpg" > </p> <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="48px" height="48px"> </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="148px" height="48px"> </p> 42 HTML - Corpo Tabelas Muitas vezes é usada para estruturar a informação Tabela <table>…</table> Linha <tr>…</tr> Celula <td>…</td> Exemplo: <table border=“2px”> <tr> <td>Célula da 1ª linha e 1ª Coluna</td> <td>Célula da 1ª linha e 2ª Coluna</td> </tr> <tr> <td>Célula da 2ª linha e 1ª Coluna</td> <td>Célula da 2ª linha e 2ª Coluna</td> </tr> </table> Resultado Célula da 1ª linha e 1ª Coluna Célula da 1ª linha e 2ª Coluna Célula da 2ª linha e 1ª Coluna Célula da 2ª linha e 2ª Coluna 43 HTML - Corpo Tabelas Exemplo: <h4> Esta tabela tem legenda e borda de 6 pixels: </h4> <table border="6px"> <caption>Legenda</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> Resultado Esta tabela tem legenda e borda de 6 pixels: Legenda 100 200 300 400 500 600 44 HTML - Corpo Tabelas Exemplo: <h4>Esta tabela celulas coloridas</h4> <table border="1"> <tr> <td bgcolor="red">primeira</td> <td>linha</td> </tr> <tr> <td background="3dm-overall.gif"> segunda</td> <td bgcolor="yellow">linha</td> </tr> </table> Resultado Esta tabela tem células coloridas primeira linha segunda linha HTML - Corpo Elemento FORM Os formulários são delimitados pelas tags <FORM>… </FORM>; Essas tags permitem agrupar vários elementos de formulário (botões, campos de texto, campos de seleção, etc…); A tag form possui os seguintes atributos: METHOD (Obrigatório) - Indica sob qual forma será enviada as respostas “POST” é o valor que corresponde um envio de dados armazenados no corpo do pedido “GET” corresponde um envio dos dados codificados no URL, e separados do endereço do certificado por um ponto de interrogação AÇÃO (Obrigatório) - Indica o endereço de envio (certificado CGI ou endereço correio electrônico (mailto:adresse.email@machine)) HTML - Corpo Elemento FORM Assim a sintaxe da tag FORM é: <form action="demo_page.asp” method="post" enctype="multipart/form-data"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> <input type="submit" value="Submit" /> </form> Valor Descrição application / x-www-form- urlencoded Padrão. Todos os caracteres são codificados antes de serem enviadas (espaços são convertidos em "+" símbolos e caracteres especiais são convertidos em valores HEX ASCII) multipart / form-data Não os caracteres são codificados. Esse valor é necessário quando você estiver usando formulários que possuem um arquivo de controle de upload text / plain Os espaços são convertidos para símbolos "+", mas sem caracteres especiais são codificados
Compartilhar