Programação web Prof. Wladimir HTML @wre2008 1
Sumário Histórico; Resumo XHTML; Tags; Edição de documentos HTML; Publicação de um documento; Estrutura básica de um documento HTML; Edição de documentos HTML; Páginas na Web; Comandos básicos de HTML; @wre2008 2
História A página Web em nosso navegador parece uma só entidade. São compostos por: Diferentes arquivos como imagens; Os vídeos; E o mais importante o código fonte. O código das páginas são escritas em uma linguagem chamada HTML: Indica onde colocar o texto, imagem ou vídeo; E a forma como são colocadas na página. @wre2008 3
História O que significa HTML? Hipertexto é um sistema para a visualização de informação Acrônimo cujos para documentos a expressão contêm inglesa referências HyperText internas Markup para Language, outros documentos. que significa Linguagem de Marcação de Hipertexto. HTML é uma junção dos padrões HyTime e SGML. HyTime: padrão para a representação estruturada de hipermídia e conteúdo baseado em tempo. SGML: padrão para formatação de texto. @wre2008 4
História Tim Berners-Lee criou o HTML original para que suas pesquisas pudessem ser transmitidas para os seus colegas de uma forma rápida por meio de uma internet pública (atual internet). Antigamente, o código HTML apresentava um código flexível para facilitar o seu uso para quem não tinha familiaridade com a mesma. @wre2008 5
História Atualmente, a sintaxe é mais rígida, permitindo códigos mais precisos. Em 93, foi publicado por Berners-Lee e Dan Connolly na IETF uma aplicação formal para o SGML. IETF (sigla em inglês de Internet Engineering Task Force) preocupa-se com o avanço da arquitetura da internet e seu perfeito funcionamento. @wre2008 6
História Em 95, foi publicado pela IETF o HTML 2.0. Desde 96, as especificações da internet vêm sendo mantidas pela World Wide Web Consortium (W3C). Atualmente, a W3C lançou o HTML 5.0. A partir do lançamento do HTML 4.0, no final de 97, o consórcio tem focado no desenvolvimento do XHTML. @wre2008 7
História XHTML é uma especificação HTML baseado em XML, que é considerada um sucessor do HTML. O XHTML faz uso de uma sintaxe mais rigorosa e menos ambígua para tornar o HTML mais simples de ser processado e entendido. HTML não é uma linguagem de programação, mas sim uma linguagem de formatação. @wre2008 8
Resumo XHTML XHTM (sigla do inglês extensible Hypertext Markup Language), combina as tags do HTML com as regras do XML. Esse processo de padronização tem como objetivo a visualização de páginas Web em diversos dispositivos (televisão, palm, celular, etc.). Ou seja, melhorar a acessibilidade. O XHTML consegue ser interpretado por qualquer dispositivo, independentemente da plataforma utilizada. @wre2008 9
Tags Todo comando em HTML é escrito entre os sinais de < e >, chamados de tags, ou etiquetas. A maioria das tags apresentam um sinal correspondente de fechamento: </tag> Essa metodologia é feita para assinalar onde começa e onde termina um determinado texto especificado pela tag. @wre2008 10
Tags Algumas tags são chamadas de vazios, pois apenas inserem alguma coisa no documento: <tag> Praticamente todas as tags apresentam a seguinte nomenclatura: <comando atributo= valores >... </comando> Exemplo: <HR color= red > Onde: HR = comando que desenha uma linha; color = atributo que define a cor da linha; red = valor do atributo color, será a cor da linha. @wre2008 11
Edição de documentos HTML Os documentos em HTML são como arquivos ASCII comuns, que podem ser editados em vi, emacs, textedit, notepad, ou qualquer editor simples. Existem editores de texto fonte: facilitam a inserção das etiquetas, orientando o uso de atributos e marcações. Ex.: W3e, HotDog, Crimson Editor. Tela do Crimson Editor @wre2008 12
Edição de documentos HTML Editores WYSIWYG Oferecem ambiente de edição com um resultado final das marcações (pois o resultado final depende do browser usado para visitar a página). Ex.: FrontPage, Namo Editor, Dreamweaver. Tela do Namo Editor @wre2008 13
Edição de documentos HTML Além dos editores específicos para HTML, editores bastante utilizados, como o Word, entre outros, permitem a exportação de seus documentos próprios para o formato HTML. O documento HTML produzido, normalmente terá extensão.html ou.htm. @wre2008 14
Publicação de um documento Para que uma pagina seja publicada na internet é necessário que tenha um endereço fixo, alojada em um servidor. @wre2008 15
Edição de documentos HTML As tags recomendadas em um documento HTML são: <html>: define o início de um documento HTML e indica ao navegador que todo conteúdo posterior deve ser tratado como uma série de códigos HTML. <head>: define o cabeçalho de um documento HTML, que traz informações sobre o documento que está sendo aberto. <title>: é o titulo do site que irá aparecer no topo do navegador Web. @wre2008 16
Edição de documentos HTML <body>: define o conteúdo principal, o corpo do documento. Esta é a parte do documento HTML que é exibida no navegador. No corpo podem-se definir propriedades comuns a toda a página, como cor de fundo, margens, e outras formatações. Através de parâmetros da tag <BODY>, podemos definir cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (marca d água): @wre2008 17
Edição de documentos HTML <body background="imagem.gif"> - imagem que você deseja configurar como fundo de tela. <body bgcolor="cor"> - cor de fundo de tela. <body text="cor"> - cor padrão de todo o texto da página. <body link="cor"> - determina a cor de todos os links da página. <body vlink="cor"> - determina a cor de todos os links já visitados na página. <body alink="cor"> - determina a cor dos links ativos. @wre2008 18
Edição de documentos HTML O exemplo seguinte determina que a cor de fundo do site será amarela, o texto será preto, os links ainda não visitados serão azuis, os links já visitados serão roxos, e os links ativos serão verdes: <body bgcolor="yellow" text="black" link="blue" vlink="purple alink="green">conteúdo</body> É recomendado que as tags de comandos sejam escritas dentro dos limites das tags <body> e </body>. @wre2008 19
Edição de documentos HTML @wre2008 20
Páginas na Web Dois tipos de páginas: Sem movimentos e funcionalidades além de links; Com efeitos especiais e nas quais podemos interagir. Páginas estáticas, são criadas em HTML: Fáceis de criar; Não permite criar grandes efeitos. Páginas dinâmicas, são criadas em HTML com o auxilio de outras linguagens: Mais complicadas de se criar; Permitem uma gama de efeitos bem maior. @wre2008 21
Páginas Dinâmicas Uma página é dinâmica quando realiza efeitos especiais ou implementa alguma funcionalidade ou interatividade. Utilizam como código base o HTML e dentro deste código outra linguagem Web. @wre2008 22
Páginas Dinâmicas de Cliente São as páginas dinâmicas que se processam no cliente. Nestas páginas, toda a carga de processamento dos efeitos e funcionalidades é suportada pelo navegador. Vantagens: Menor trabalho para o servidor; Oferecem respostas imediatas; Permitem a utilização de recursos locais; Desvantagens: São dependentes do sistema do cliente (Pode funcionar em um navegador e no outro não). @wre2008 23
Páginas Dinâmicas de Servidor São páginas reconhecidas, interpretadas e executadas pelo próprio servidor. Vantagens: Clientes não consegue ver os scripts; Independentes do navegador do usuário; Desvantagens: Servidor mais potente e com mais capacidade. @wre2008 24
Páginas Dinâmicas de Servidor @wre2008 25
Comandos HTML Comentário: <!-- Comentário--> Os links são classicamente agrupados da seguinte forma: Links internos: os que se dirigem a outras partes dentro da mesma página. Links locais: os que se dirigem a outras páginas do mesmo site web. Links remotos: os que se dirigem à páginas de outros sites web. Links com endereços de correio: para criar uma mensagem de correio dirigido a um endereço. Links com arquivos: Para que os usuários possam fazer download de arquivos. @wre2008 26
Comandos HTML Exemplos de Links: <a href= http://www.google.com.br">google</a> <a href= mailto:wla@pucsp.com">wladimir</a> Âncoras: <a name=região> - este atributo permite que você crie links internos na mesma página. Por exemplo: <a href="#explicação">saiba mais sobre o meu site</a> <a name="explicação">o meu site</a> O caracter "#" indica que se trata de um link em uma mesma página. @wre2008 27
Comandos HTML Ainda pode ser utilizado o atributo: target = Indica o frame em que será carregado o arq_destino. Os principais valores utilizado na target são: _blank - faz com que o browser abra uma janela nova e sem título. _self - apresenta o documento na mesma janela em que a sua URL foi chamada. _parent - carrega o documento na janela que chamou a janela do link. _top - carrega o link na janela principal do browser. @wre2008 28
Comandos HTML Imagens: <img src= computer.gif"> Formatação: <b> - Negrito <i> - Itálico <u> - Sublinhado <strike> ou <s> - Frase riscada <sub> - Frase subscrita <sup> - Frase sobrescrita <big> - Texto menor <small> - Texto menor @wre2008 29
Comandos HTML Formatação de fonte: <font face="tipologia" size="tamanho" color="cor"></font> determina o tipo da fonte, o tamanho e a cor do texto que será escrito entre essas tags. <font face="verdana" size="1">html</font> Mudar o tamanho da fonte: <h1>a</h1> <h2>a</h2> <h3>a</h3> <h4>a</h4> <h5>a</h5> @wre2008 30
Comandos HTML Formatação: <center> - Centraliza os elementos na página. <br> - Nova linha. <p> - Início de um novo parágrafo: <p align="center"> </p> <p align="left"> Revisão de Html </p> <p align="right"> </p> Revisão de Html Revisão de Html @wre2008 31
Comandos HTML Alinhamento de bloco de texto <div align=" "></div> Configura o alinhamento de um bloco todo de texto. O alinhamento pode ser à esquerda (left), à direita (right) e ao centro (center). <HR> - parâmetro utilizado para colocar linhas horizontais em uma página. Você pode determinar a altura, a largura e o alinhamento da linha. Por exemplo: <hr size=8 align="center" width=75%> Size - configura a espessura da linha; Width - configura a largura da linha (pode ser em porcentagem ou em pixels); Align - determina o posicionamento da linha. @wre2008 32
Comandos HTML Formatação: Exemplo: A B AB <pre>a B</pre> A B Marquee: <MARQUEE BEHAVIOR=SCROLL WIDTH=30%>Texto</MARQUEE> Texto <MARQUEE BEHAVIOR=SLIDE DIRECTION=RIGHT>Texto</MARQUEE> Texto <MARQUEE BEHAVIOR=SLIDE DIRECTION=LEFT>Texto</MARQUEE> Texto @wre2008 33
Comandos HTML Imagens <img> As imagens usadas na Web são armazenadas em arquivos com extensão *.gif, *.xbm, *.jpg (ou *.jpeg), *.png. Parâmetros: ALT = Texto alternativo que é apresentado no lugar da imagem no browsers texto. Width e Height = largura e altura, respectivamente (em pixels). Align = Alinhar a imagem na página. Border = A imagem aparece com uma borda. hspace - especifica um espaço em branco a ser deixado entre as bordas esquerda e direita da imagem, em pixels. Ou seja, os textos que forem escritos ao redor da imagem não ficarão grudados nela. @wre2008 34
Comandos HTML Parâmetros tabelas: align Justifica o texto da célula da mesma forma que se fosse o de um parágrafo. valign Podemos escolher se queremos que o texto apareça acima (top), no centro (middle) ou abaixo (bottom) da célula. bgcolor Dá cor à célula ou escolha de linha. bordercolor Define a cor da borda. @wre2008 35
Comandos HTML Outros atributos que podem ser unicamente atribuídos a uma célula e não ao um conjunto de células de uma linha são: background Permite-nos colocar um fundo para a célula a partir de um link a uma imagem. height Define a altura da célula em pixels ou porcentagem. width Define a largura da célula em pixels ou porcentagem colspan Expande um célula horizontalmente. rowspan Expande um célula verticalmente. @wre2008 36
Comandos HTML Tabelas: <table border=1> <tr> <td> Agosto </td> <td> Setembro </td> </tr> <tr> <td> Outubro </td> </tr> </table> @wre2008 37
Comandos HTML Tabelas: <table border=1> <tr> <td width="100" height="40"> Agosto </td> <td> Setembro </td> </tr> <tr> <td> Outubro </td> </tr> </table> @wre2008 38
Comandos HTML Tabelas: <table border=1 cellpadding="30" cellspacing="20"> <tr> <td> Agosto </td> <td> Setembro </td> </tr> <tr> <td> Outubro </td> </tr> </table> @wre2008 39
Comandos HTML Tabelas: <table border=1> <tr> <td> Agosto </td> <td> Setembro <br><br><br> </td> </tr> </table> Tabelas: <table border=1 > <tr> <td valign="top"> Agosto </td> <td> Setembro <br><br><br> </td> </tr> </table> @wre2008 40
Comandos HTML Tabelas: <table border=1 bgcolor="#ffff00"> <tr bgcolor="#ff0000"> <td bgcolor="#00ffff"> Agosto </td> <td> Setembro </td> </tr> </table> @wre2008 41
Comandos HTML Tabelas: @wre2008 42
Comandos HTML Tabelas aninhadas: <table cellspacing="10" cellpadding="10" border="3"> <tr> <td align="center"> Célula da tabela principal </td> <td align="center"> <table cellspacing="2" cellpadding="2" border="1"> <tr> <td>tabela aninhada, célula 1</td> <td>tabela aninhada, célula 2</td> </tr> <tr> <td>tabela unida, célula 3</td> <td>tabela aninhada, célula 4</td> </tr> </table> </td> </tr> </table> @wre2008 43
Comandos HTML Música de fundo: Para por uma música de fundo adicione o seguinte comando: <embed src="arquivo.ext" autostart="true" loop="numero_de_vezes_que_vai_tocar"> @wre2008 44