José Frazão. Página 2 de 19

Transcrição

1

2 Página 2 de 19

3 Índice Página 1. Introdução 4 2. História e características 5 3. Sintaxe Texto Comandos básicos mais utilizados Fundo (Backgrounds) e cores Tabela de acentos e caracteres especiais em Imagens Hiperligações Listas Exemplos de programas em Conclusão Referencias 19 Página 3 de 19

4 1. Introdução Este trabalho é sobre a linguagem. Saber as características, estrutura de um documento e a sintaxe da linguagem. Página 4 de 19

5 2. História e características O não é uma linguagem de programação, é uma linguagem de marcação. As marcações informam o browser como formatar o conteúdo em cabeçalhos, parágrafos, listas e tabelas, informam também onde inserir links em hipertexto e onde inserir imagens e outros objectos. As maiorias das páginas na web são compostas por arquivos de texto com marcações. O browser interpreta e mostra o conteúdo fundamentado o meu modelo de apresentação, e são tolerantes a erros, ignorando alguma coisa que não seja ERRO é reportada pelo browser. O nasceu em 1991 no CERN (European Council for Nuclear Research), na suíça. Foi criado apenas como uma linguagem que tinha como função interligar e aceder de maneira simples e fácil os computadores dos laboratórios a outras instituições. O principal desenvolvimento acontece em 1992 com a liberação da biblioteca de desenvolvimento para WWW. Dando origem á construção de vários browsers WWW e servidores que tornaram a Web viável. O MOSAIC foi o primeiro browser multiplataforma (corre em qualquer sistema operativo) que explorava a capacidade de sons, vídeos e imagens da web. 3. Sintaxe Uma das características do é o facto de o código das páginas poder ser escrito com qualquer editor de texto, uma vez que se trata de texto vulgar (ASCII). Num documento, os elementos de formatação são sempre delimitados pelos caracteres < e >. um elemento de formataçao inicia a aplicaçao de uma determinada caracteristica a uma zona de texto e deve sempre corresponder a um outro elemento a terminar a aplicaçao dessa caracteristica. Por exemplo: <b> vamos testar! Para o trabalho da disciplina de Redes Web Locais</b> Página 5 de 19

6 A zona entre as marcas <b> e </b> irá aparecer no ecra como salientada (bold). O caracter / corresponde ao fim desse elemento. Todo o documento é normalmente composto por duas zonas principais: o cabecalho e o corpo. O cabecalho contém informaçao de controlo ou a informaçao acerca do documento, equanto no corpo está o contedúdo propriamente dito. A figura a seguir mostra ambas as zonas e a forma de as delimitar num documento. Figura 1. Estrutura de um documento Página 6 de 19

7 3.1. Texto Uma das formas em documentos para controlo de caracteres é fazer o texto relevante ser afectado pelos chamados de Heading. Existem 6 níveis de Headings correspondentes a letras de tamanho distinto: de <h1>(o maior) até <h6>(o mais pequeno). Assim escrevo no editor de texto: <h1>este é o maior</h1> <h2>está a diminuir</h2> <h3>e diminui</h3> <h4>cada vez mais</h4> <h5>pequeno</h5> <h6>este é o menor</h6> E aparece-me assim no browser: Figura 2. Exemplo de headings Página 7 de 19

8 3.2. Comandos básicos mais utilizados. Parágrafos <p>.texto</p> = paragrafo; O comando <P> tem como atributo align que define o alinhamento horizontal do parágrafo no texto. Este poderá ser: Alinhado à esquerda align="lef". Exemplo: <p align="left" > Este parágrafo está alinhado na parte esquerda da janela.</p> Centralizado align="center".exemplo: <palign="center">este paragrafo está centralizado.<p> Alinhado à direita.align="right".exemplo: <p align="right" > Este parágrafo está alinhado na parte direita da janela.</p>> Figura 3. Exemplo de parágrafo FONTES O elemento <font> permite inserir um texto com fontes, tamanhos, cores e tipos diferentes. Exemplo <FONT SIZE= n FACE= nome COLOR= cor > Texto </font> Página 8 de 19

9 No qual: SIZE: indica o tamanho da fonte que varia de 1 a 7, sendo 3 o valor padrão. FACE: indica o nome da fonte utilizada. As fontes padrões são:arial, TIMES NEW ROMAN, GEORGIA, COURIER, VERDANA. COLOR : Define a cor da fonte do texto, em hexadecimal. <B>(negrito).</B> Podemos destacar uma palavra ou partes do texto com o comando Bold (negrito). Por exemplo:<p>vamos <B>destacar</B> com o comando <B>Bold</B> palavras ou frases</p>. <STRONG> (ênfase forte)..</strong> Este comando tem um efeito muito parecido com o do par anterior. Assim <STRONG>Esta frase está destacado com <STRONG>. <B> Este está em negrito.</b> Do mesmo modo podemos fazer com que as letras de palavras ou frases sejam mostradas em ITÁLICO. Por exemplo:<p>podemos utilizar letras em <i>itálico</i> com o comando <i> em <i>palavras ou frases</i></p> <EM>- ênfase- </EM> Exemplo: Podemos utilizar <I> itálico </I> ou o <EM> ênfase <em> conseguindo resultados parecidos. Página 9 de 19

10 <U> (sublinhar)</u> Do mesmo modo em muitos casos queremos destacar frases ou palavras sublinhando. Por exemplo: Seja sublinhar a palavra <u> frase </u> <Br>break Saltar a linha é um comando que não tem fim de elemento </br>, visto que tem como efeito quebrar a linha em algum ponto continuando em outra, ou simplesmente saltar uma linha. <cite>citação</cite> Quando pretendemos citar alguma palavra ou frase. <code>código de programação</code> Quando pretendemos utilizar códigos de programação no documento. Entre muitos outros 3.3. FUNDO (BACKGROUNDS) E CORES Titulo do fundo (Tiled Bkground) <BODY BACKGROUND="URL"> Cor de fundo (Bkground Color) <BODY BGCOLOR="#$$$$$$"> Cor do texto (Text Color) <BODY TEXT="#$$$$$$"> Cor das Hiperligações (Link Color <BODY LINK="#$$$$$$"> Hiperligações visitados (Visited Link) <BODY VLINK="#$$$$$$"> Hiperligações activas (Active Link) <BODY ALINK="#$$$$$$"> Página 10 de 19

11 As cores são definidas por um nome (em inglês) ou um código hexadecimal precedido pelo sinal #. Figura 4. Tabela de cores Página 11 de 19

12 3.4. Tabela de acentos e caracteres especiais em Algo que é sempre desejável num documento de texto não anglosaxónico é a representação de caracteres nacionais das várias línguas, bem como a de caracteres especiais. Como é o exemplo destes caracteres: Á... Á á... á Â... Â â... â À... À à... à Å... Å å... å Ã... Ã ã... ã Ä... Ä ä... ä Æ... Æ æ... æ É... É é... é Ê... Ê ê... ê È... È è... è Ë... Ë ë... ë Ð... Ð ð... ð Í... Í í... í Î... Î î... î Ì... Ì ì... ì Ï... Ï ï... ï Ó... Ó ó... ó Ô... Ô ô... ô Ò... Ò ò... ò Ø... Ø ø... ø Õ... Õ õ... õ Ö... Ö ö... &ouml Ú... Ú ú... ú Û... Û û... û Ù... Ù ù... ù Ü... Ü ü... ü Ç... Ç ç... ç Ñ... Ñ ñ... ñ <... < >... > &... & "... " Ý... Ý ý... ý Þ... Þ þ... þ ß... &szlig 3.5. Imagens As imagens e outros objectos gráficos que existem nas páginas WWW estão na realidade localizados em ficheiros, que coexistem com os ficheiros na mesma árvore de directórios. As imagens estão geralmente em formato GIF ou JPEG. O formato GIF proporciona melhor a qualidade de imagem, mas em contra partida os ficheiros são maiores, levam mais tempo a importar. Enquanto o JPEG tem pior qualidade de imagem, mas devido ao mecanismo de compressão eficaz resulta em ficheiros muito pequenos. Essas imagens poderão estar registadas no Windows como devendo ser visualizadas com o browser. Página 12 de 19

13 A forma de colocar imagens em documentos, com referências interna é o seguinte: <img src = "(directoria)/ficheiro) > como por exemplo: <img src = "C:\Users\beto\Pictures\3D-TEC~1.JPG"> Também é possível colocar um atributo na marca <img para alinhar um eventual bloco de texto que seja colocado como adjacente á imagem. Esse atributo é o align: <p><img align = top src = "C:\Users\beto\Pictures\3D-TEC~1.JPG"> pagina em construçao/alinhamento no topo</p> <p><img align = middle src = "C:\Users\beto\Pictures\3D-TEC~1.JPG"> pagina em construçao/alinhamento no meio</p> <p><img align = bottom src = "C:\Users\beto\Pictures\3D-TEC~1.JPG"> pagina em construçao/alinhamento em baixo</p> <p><img align = left src = "C:\Users\beto\Pictures\3D-TEC~1.JPG"> pagina em construçao/alinhamento á esquerda</p> <p><img align = right src = "C:\Users\beto\Pictures\3D-TEC~1.JPG"></p> pagina em construçao/alinhamento á direita Figura 5. Imagens Página 13 de 19

14 Outro atributo que pode afectar o funcionamento da marca <img> é o border. Permite a colocação de uma linha delimitadora à volta da figura, com uma espessura controlada. <img src = "C:\Users\beto\Pictures\3D-TEC~1.JPG" border= 5 > no atributo border coloca-se a espessura pretendida para o traço, em pixels Hiperligações As hiperligações permitem ao desenhador ordenar as páginas por temas e ao utilizador ir às páginas de maior interesse. Existem dois tipos de hiperligações: internos e externos, consoante apontam para zonas para mesma página ou para outras páginas. Por exemplo as hiperligações externas: <a href= (endereço)/(directório)/(documento ) >(texto do link)))</a> Ou seja <a href = http//: > Meu Website </a> No caso do interno, utiliza-se a sintaxe muito semelhante: < a href = pagina2.html >Próxima pagina</a> 3.7. Listas Permitem organizar os dados a serem expostos de uma forma sistemática e que torna naturalmente mais fácil a leitura da informação. Em existem varias formas de organizar os dados em lista: Lista ordenada os elementos ficam organizados sequencialmente, ou seja os itens aparecem numerados e inicia-se com o elemento <ol>(ordened List), os itens são referenciados com o elemento<li>. Por exemplo: <ol> <li>da lista</li> <li>da lista</li> <li>da lista</li> </ol> Página 14 de 19

15 Figura 6. Lista ordenada Lista não ordenada inicia-se com um elemento <ul>(unordered List), e faz- se da mesma forma que a anterior: <ul> <li lista 1</li> <li>lista 2</li> <li>lista 5</li> </ul> Figura 7. Lista não ordenada Lista definição lista ideal para a disposição de itens com inclusão de explicação. a lista definição cria-se com o elemento <dl>, o primeiro item referenciase com <dt>( defenition Term) e o segundo com <dd>(definition description). <h2>lista de disciplinas </h2> <dl> <dt>rlw</dt> <dd> Redes Locais Web</dd> Página 15 de 19

16 <dt>pw</dt> <dd>programação Web</dd> <dt>bd</dt> <dd> Base de Dados</dd> <dt>ai</dt> <dd> Aplicações informáticas</dd> </dl> Figura 8. Lista definição 4. Exemplo de programas em <head> <meta content="text/html; charset=utf-8" http-equiv="content-type" /> <style type="text/css">.style1 { text-align: center; } </style> </head> <body style="background-color: #3366CC"> <form method="post"> Página 16 de 19

17 <div class="style1"> <strong><em> <textarea class="style1" name="textarea1" style="background-position: center; width: 529px; height: 259px; fontfamily: Algerian; font-size: xx-large; font-variant: small-caps; texttransform: uppercase; color: #FFFFFF; border-collapse: separate; caption-side: top; display: run-in; background-color: #808080; background-image: url('imagens/proiect-informatic.jpg'); font-style: italic;"> José Frazao WebSite Em Construção </textarea></em></strong></div> </form> <form method="post"> <textarea class="style1" name="textarea2" rows="1" style="background-position: center center; height: 186px; width: 930px; background-image: url('imagens/3d-tec~1.jpg');"></textarea></form> </body> </html> Figura 9. Exemplo de uma página Página 17 de 19

18 5. Conclusão A quantidade de informação no mundo do desenvolvimento Web é extremamente grande, é difícil uma pessoa saber todos os aspectos e particularidades. Como tinha escrito antes o não é uma linguagem de programação, mas sim uma linguagem de marcação, é um tipo de linguagem muito acessível, podemos criar um documento num editor de texto qualquer e guardar apenas o documento como.. Actualmente existem imensos programas que nos ajudam a criar um documento ou um site sem sequer mexer nos comandos, fazemos tudo por arrasto e cliques, o que torna ainda mais acessível e rápido a construção de um site, como é o exemplo que mostro no trabalho, creio que o fiz em menos de cinco minutos. Página 18 de 19

19 6. Referencias tml/-historia-do-html Página 19 de 19