Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
IDW (Introdução ao HTML)
Compartilhar
Prévia do material em texto
TEMA 1 – Introdução ao HTML INTRODUÇÃO Neste tema será apresentada a linguagem de marcação de hipertexto – HTML (hypertext markup language), que é utilizada para estruturar páginas Web. Com ela é possível formatar textos, inserir imagens e links, de maneira que esses elementos sejam interpretados e apresentados pelo navegador. É comum observar também autores que falam de XTML (eXtensible HyperText Mark-up Language), que nada mais é do que uma maneira rigorosa de estruturar o HTML. O objetivo deste conteúdo é apresentar como construir websites por meio de HTML. Para iniciar o estudo é importante conhecer a tag HTML, que é o comando com o qual os elementos das páginas são definidos. Uma vez conhecido o formato de uma tag, pode-se trabalhar com o conjunto de tags que a linguagem HTML possui. Com o conhecimento da estrutura básica de uma página web, pode-se explorar outros recursos que a HTML dispõe como listas, imagens e links que normalmente são utilizados como elementos informativos, além dos textos. Tais elementos proporcionam uma visão mais abrangente do assunto que se pretende contemplar, na página de internet que está sendo criada, tornando a navegação mais interessante. Tag Conforme Astrup, Jacobsen e Astrup (2014), tags são rótulos utilizados para informar ao navegador como deve ser apresentado o website. Todas as tags começam com o sinal de ‘<’ e terminam com o de ‘>’; de modo genérico, uma tag pode ser de abertura – representada por <tag> – e de fechamento – representada por </tag> (observa-se que a diferença desta para aquela é o símbolo de ‘/’). Por exemplo, a tag <b> inicia a ação de negrito no texto e a tag </b> finaliza a marcação. Um elemento é um par de rótulos e o conteúdo localizado entre eles (DUCKET, 2010). Tais elementos são utilizados para apresentar o conteúdo na página web e têm o seguinte formato genérico: <tag>conteúdo</tag>. Para compor o documento é necessário um editor de textos simples – como o bloco de notas, por exemplo – para escrever o código HTML que o browser interpretará e mostrará como resultado. Assim, todos os arquivos de páginas web devem ser salvos com a extensão .html ou .htm (onde .html é mais comumente utilizada) e após visualizados no navegador. Não é recomendável salvar arquivos com nomes contendo acentos, espaços ou quaisquer caractere especial, visto que o padrão as páginas web não contempla tais opções. Como opções de editor de textos para o código das páginas, recomenda-se o Notepad++ (https://notepad-plus-plus.org/download/v7.7.1.html) ou o Sublime Text (https://www.sublimetext.com/download), ambos gratuitos. A Figura 1 apresenta alguns exemplos de aplicações de tags HTML. Observe que o documento inicia com a tag <HTML> e finaliza com </HTML> indicando que é um documento de marcação. Figura 1 – Código HTML (Tags) https://notepad-plus-plus.org/download/v7.7.1.html https://www.sublimetext.com/download A Figura 2 apresenta o resultado da tags após o navegador interpretar. Observe que o conteúdo que estava no código-fonte na linha 3 não foi apresentado porque é um comentário, estes são destinados ao programadores apenas. Figura 2 – Visualização do Código HTML (Tags) É importante observar que uma tag pode conter atributos, seguidos de valores, os quais permitirão aplicar características diferentes da definição original ao conteúdo especificado. Neste caso, o formato da tag é o seguinte: <tag atributo=“valor”> CONTEÚDO </tag>, sendo que uma tag pode possuir um ou mais atributos, segundo a sua definição. Um exemplo de tags com atributos e seus respectivos valores é apresentado na Figura 3. A esquerda o código-fonte e a direita a interpretação do navegador. Figura 3 – Tags e atributos Um aspecto a ser considerado é que por razão de uma boa prática de programação, definem-se os valores dos atributos de uma tag entre aspas duplas “ ”, de preferência, mas as aspas simples ‘ ’ também podem ser utilizadas, apesar de não serem indicadas. Convém esclarecer que pelas diferentes características dos navegadores de internet, há tags – bem como seus atributos correspondentes e valores atribuídos – que executam em alguns navegadores e em outros não. Por isso, é sempre importante, ao desenvolver um site, testar o código em diferentes navegadores. Estrutura Básica do HTML Como em qualquer outra linguagem, HTML também possui uma estrutura básica para a criação das páginas web, sendo dividida em três partes: a estrutura principal, o cabeçalho e o corpo (KOBAYACHI; BEU, 2001). A Figura 4 apresenta a estrutura básica do HTML. Figura 4 – Estrutura básica do HTML As tags <HTML> </HTML> limitam a área da linguagem HTML, ou seja, onde inicia e termina o documento. Essas tags representam a estrutura principal da página. As tags <head> </head> são referentes ao cabeçalho e envolvem o título da página, limitado pelas tags <title> </title>; tal título aparecerá na barra superior do navegador de internet, utilizado para navegação de páginas web. Essas tags representam o cabeçalho da página. As tags <body> </body> limitam o corpo e envolvem todos os comandos de formatação, imagens, links, formulários, entre outros, ou seja, todas as demais tags necessárias para inserir o conteúdo na página web, são colocadas no âmbito da tag <body>. Essas tags representam o corpo da página. Na Figura 5 é apresentado um exemplo de código HTML, envolvendo as definições de tag e de estrutura básica estudadas até o momento. Figura 5 – Exemplo de código HTML A Figura 6 apresenta o código interpretado pelo navegador FireFox. Figura 6 – Exemplo de código HTML (visualização) Atributos Básicos São disponibilizados quatro atributos básicos que podem ser utilizados na maioria dos elementos de uma página web (DUCKETT, 2010), que são: id, title, class e style. O atributo id pode ser utilizado para identificar de forma única elementos dentro de uma página, podendo ser definido em qualquer parte do documento. Seu uso é mais evidente quando se trabalha com CSS ou JavaScript. Um exemplo com o atributo id pode ser visto na Figura 7. Figura 7 – Exemplo com atributo id Algumas regras devem ser respeitadas para o valor do atributo id: não é permitido acentos, espaços ou qualquer caractere especial; e deve ser único dentro do documento, não podendo existir dois atributos id com o mesmo valor. O atributo class é utilizado para especificar que um elemento pertence a uma classe de elementos, sendo comumente empregado com CSS. O valor do atributo class pode ser composto de um nome de classe ou também, dependendo do caso, pode ser uma lista separada por espaços, de nomes de classes. A Figura 8 apresenta um exemplo para o atributo class. Figura 8 – Exemplo com atributo class O atributo title dá um título sugerido para o elemento, onde o comportamento desse atributo dependerá do elemento que ele contiver; é muitas vezes exibido como uma dica ou enquanto o elemento está sendo carregado. Vale observar que nem todos os elementos que podem ter um atributo title, realmente precisam de um (DUCKETT, 2010). A sintaxe genérica para o atributo title é: title = “nometitulo”. É importante destacar que não seja feita confusão do atributo title com a tag <title>, pois os dois têm aplicações diferenciadas, com base no que já foi estudado até o momento. O atributo style permite especificar regras CSS dentro do elemento, que será visto no decorrer da disciplina. Formatação de Textos Os primeiros elementos normalmente colocados em uma página web são os textos, e para isso são disponibilizadas tags de formatação específicas. Para aplicar negrito, itálico e sublinhado utiliza-se, respectivamente, as tags: <b> texto </b>, <i> texto </i> e <u> texto </u>. O exemplo da Figura 9 apresenta estas formatações, combinando as tags de diferentesmaneiras. Figura 9 – Exemplo de formatação de texto Com a interpretação do navegador, tem-se o resultado apresentado na Figura 10. Figura 10 – Exemplo de formatação de texto (visualização) No exemplo apresentado acima (Figura 9), observa-se também as tags para quebra de linha <br>, criar um novo parágrafo <p> e centralizar conteúdo <center> (neste caso texto, mas pode ser igualmente aplicado para outros elementos). Nota-se que a tag <br> não necessita de fechamento, assim como a tag <p>, se não tiver atributo, também não necessita; porém quando a tag <p> possui um atributo (como no exemplo, é o caso do center), o fechamento </p> é obrigatório. O atributo align, na tag <p>, pode ter atribuído os valores de alinhamento: - à direita (right); - centralizado (center); - justificado (justify); - à esquerda (left), que é o padrão. Para aplicar formatações como cores, tamanhos e tipos de fonte tem-se a tag <font>, com os atributos color, size e face, e neste caso, o fechamento </font> é obrigatório. A Figura 11 apresenta a aplicação da tag <font>. Figura 11 – Exemplo de formatação de texto <font> A Figura 12 apresenta o código interpretado. Figura 12 – Exemplo de formatação de texto <font> (visualização) As cores utilizadas para o atributo color (linhas 8 e 13) podem ser definidas pelo nome da cor em inglês ou pelo código RGB (Red/Green/Blue) – vale observar que essa mesma definição de cores pode ser aplicada ao atributo bgcolor da tag <body>; os tamanhos de fonte para o atributo size podem variar de 1 até 7 (linhas 12 e 13); e o atributo face (linhas 6 e 12), que define o estilo da fonte a ser utilizado, pode ser empregado os estilos comuns disponíveis em qualquer editor de texto. O exemplo visto na figura acima apresenta, além da tag <font> e seus diferentes atributos, a tag <hr> que insere uma linha horizontal (linhas 7, 9, 11 e 13), normalmente utilizada para separar conteúdo de uma página web. Para a tag <hr> é possível utilizar atributos de cor (color), tamanho (size), largura (width) e alinhamento (align), não sendo necessário definir seu fechamento. Na tag <hr> as cores utilizadas para o atributo color podem ser definidas pelo nome da cor em inglês ou pelo código RGB (Red/Green/Blue); a altura (ou tamanho) pelo atributo size, sendo que pode receber qualquer valor numérico que represente pixels (quanto maior o valor numérico, mais “alta” será a linha horizontal); a largura definida pelo atributo width, que corresponde à largura da linha horizontal em relação à página web, pode receber um valor percentual entre 1 e 100; e o alinhamento dado pelo atributo align é determinado pelos valores left (à esquerda), right (à direita), ou centralizado (center), que é o padrão. Para trabalhar com elementos de títulos, subtítulos, entre outros, utiliza-se a tag <hn>, onde n possui uma variação de 1 a 6, sendo 1 o maior e 6 o menor (assim, <h1>, <h2>, <h3>, <h4>, <h5> e <h6>); automaticamente uma nova linha é aberta e o negrito é aplicado para o texto. A Figura 13 apresenta um exemplo com os diferentes tamanhos da tag <hn>. Observa- se que é possível definir o atributo align, para alinhar o texto à direita (right) - linha 7 -, centralizado (center) - linha 8 - ou à esquerda (left) - linhas 6, 9, 10 e 11 -, que é o padrão. Figura 13 – Exemplo de formatação de títulos A tag <div>, que necessita de fechamento </div>, permite alterar o estilo em partes específicas da página web e posicionar elementos, por meio do atributo align, sendo normalmente utilizada juntamente com código CSS. Na Figura 14 é apresentado um exemplo de código com a tag <div>. Figura 14 – Exemplo de formatação div Normalmente, a tag <div> é estilizada por um arquivo .css, sendo que para isso é preciso definir-se o atributo id ou o atributo class para tal tag, como, por exemplo, <div id="nome_do_id"> </div> ou <div class="nome_da_div"> </div>. Ou pode- se definir diretamente o atributo style na tag <div>, como, por exemplo, <div style="position:absolute;margin-left:10px; margin-top:10px; width:300px; height:140px; z-index:1"> </div>. Da mesma forma que a tag <p>, a tag <div> permite definir o atributo align, para posicionar o elemento à direita (right), centralizado (center) ou à esquerda (left), que é o padrão. Listas Quando se deseja organizar determinado conteúdo no formato de uma lista para, por exemplo, criar tópicos de textos para uma melhor exemplificação de um assunto, HTML proporciona tags específicas para que isso possa ser realizado. Assim, os tipos de listas são basicamente, conforme apresentado por Duckett (2010): - Não ordenadas – listas com marcadores, sem a preocupação com sua sequência. - Ordenadas (ou numeradas) – que usam uma sequência de números ou letras, em vez de marcadores. - De definição – são um tipo especial de lista, que permitem especificar um termo e sua definição. As tags utilizadas para a criação de uma lista não ordenada são <ul> e <li> e seus respectivos fechamentos, </ul> e </li>. A tag <ul> é utilizada para definir a lista e a tag <li> é dedicada a criação de cada um dos itens da lista. Juntamente com a tag <ul> é possível utilizar o atributo type que pode assumir os seguintes valores: - <ul type=“square”> insere um marcador quadrado; - <ul type=“circle”> insere um marcador circular; - <ul type=“disc”> insere um marcador redondo, que é o padrão. Um exemplo de lista não ordenada pode ser visto na Figura 15. Neste exemplo não se está utilizando o atributo type e, portanto, o formato de marcador criado é o padrão, redondo (linhas 8, 9, 10 e 11). Figura 15 – Lista não ordenada As tags utilizadas para criar uma lista ordenada são <ol> ... </ol> e <li> ... </li>. A tag <ol> é usada para definir a lista e a tag <li> é usada para cada item da lista. Também juntamente com a tag <ol> é possível utilizar o atributo type que pode assumir os seguintes valores: - <ol type=“a”> insere letras do alfabeto minúsculo na sequência. - <ol type=“A”> insere letras do alfabeto maiúsculo na sequência. - <ol type=“i”> inere algarismos romanos minúsculos. - <ol type=“I”> insere algarismos romanos maiúsculos. - <ol type=“1”> insere números decimais, que é o padrão. Além do atributo type, pode-se utilizar também o atributo start, que faz com o primeiro item da lista inicie por alguma letra, algarismo ou número específico inserido pelo programador. Um exemplo de aplicação de lista ordenada é apresentado na Figura 16, sendo que no mesmo observa-se o uso dos atributos type e start (linha 7). Figura 16 – Lista ordenada As tags utilizadas para criar uma lista de definição são <dl>, <dt> e <dd> e seus respectivos fechamentos </dl>, </dt> e <dd>. A tag <dl> cria a lista de definição, na tag <dt> é onde o termo é proposto, e na tag <dd> é onde o termo é definido. Um exemplo com lista de definição é apresentado na Figura 17. Figura 17 – Lista de definição É possível criar listas aninhadas, ou seja, lista dentro de lista, reunindo, por exemplo, os três tipos de listas apresentados, como é demonstrado na Figura 18. Figura 18 – Listas aninhadas Imagens As imagens dão uma perspectiva diferente a um site e em HTML a tag <img> é que possibilita inserir imagens de formato jpg/jpeg, gif, bmp e png, sendo este último o mais indicado, visto que o tamanho do arquivo costuma ser menor do que os outros três formatos citados. Para que a imagem possa ser efetivamente inserida na página web é necessário usar-se na tag <img>, o atributo src, que especifica qual é o nome do arquivo da imagem, bem como qual é a sua extensão (jpg, gif, bmp ou png). O atributo alt também é utilizado na tag de imagem e é altamente recomendado que o mesmo seja definido, como boa prática de programação. A tag <img> não tem obrigatoriedade de fechamento,mas é comum utilizar-se a definição da mesma como <img />, por exemplo, <img src="imagem1.png" alt="Texto explicativo." />. Na Figura 19 é apresentado um exemplo com a tag <img>, onde os atributos border, width, height e align também podem ser observados. Estes atributos determinam, respectivamente, a borda, a largura, a altura e o alinhamento da imagem, sendo opcionais. Os valores para borda, largura e altura são dados em pixels e para alinhamento são right e left (que é padrão) – para centralizar a figura é necessário usar a tag <center> (linha 6). Figura 19 – Imagens O resultado pode ser conferido na Figura 20. É importante salientar que a figura inserida na tag <img src=””> deve estar na mesma pasta que o documento, pois foi apenas referenciado o nome da imagem. Figura 20 – Interpretação de código Vale ressaltar que ao definir a altura e largura de uma imagem por meio dos atributos width e height, pode interferir na qualidade de apresentação da mesma; por exemplo, figuras menores que têm suas dimensões de largura e altura ampliadas tendem a ficar menos nítidas. Assim, é recomendado que para efetivamente aumentar ou diminuir dimensões de uma imagem, seja utilizado um editor de imagens, como Photoshop, Fireworks, entre outros. É possível definir uma imagem como plano de fundo da página web, sendo necessário, para isso, acrescentar o atributo background na tag <body>; deste modo, genericamente tem-se <body background=“nome e extensão do arquivo da imagem”>. A Figura 21 apresenta um exemplo de código com a definição de uma imagem como plano de fundo. Se a imagem de fundo não ocupar a totalidade da página web, ela será automaticamente repetida, para preencher o espaço correspondente, como é o caso do exemplo. Figura 21 – Imagem como pano de fundo . Links Um link (ligação) é uma parte importante para o funcionamento de um site, pois ele conecta uma página web a outra, e pode-se acessar um conteúdo com apenas um clique. Essa ideia é reforçada por Kobayachi (2001), quando considera que os links são conexões entre páginas de um mesmo site ou até mesmo para outros sites que estão na rede. Deste modo, a tag para criar links em páginas web é <a> (e seu fechamento </a>), sendo que é necessário utilizar o atributo href para determinar qual é o arquivo que estará vinculado. A forma genérica seria <a href=“conteúdo a ser vinculado”> ... </a>. Também há, para a tag <a>, o atributo target que é opcional e indica o alvo para que o conteúdo do link seja exibido; por padrão, clicar em um link faz com que o conteúdo seja aberto na mesma janela onde o link foi clicado. Porém, existe a alternativa de fazer com que tal conteúdo seja aberto em uma nova janela do navegador, sendo que para tanto é preciso definir o valor do atributo target como _blank. Um exemplo da aplicação desse atributo pode ser visto na Figura 22. Figura 22 – Tag href (link) Basicamente, há basicamente quatro tipos de links que podem ser definidos em uma página web: link local, link para um arquivo, link externo e link para e-mail. - Para link de arquivo, que é aquele que conduz a outra parte do mesmo site, define-se a tag <a href=“nomedoarquivo.html”> link para arquivo </a>, onde nomedoarquivo é o nome físico do arquivo com extensão html (ou htm), conforme o mesmo estiver salvo no computador. Um exemplo de código para esse tipo de link pode ser observado na Figura 22 (linha 6). - Para link local, que é aquele que ao clicar nos links de qualquer um dos tópicos, é redirecionado para a posição que tem a marcação. Este recurso também é muito utilizado dentro de menus de páginas únicas. Define-se a tag <a href=“#menu1”> link para o Menu 1 </a> para indicar o link e a tag para indicar onde o link deverá se posicionar <h1>Menu 1 <a name=“menu1”> </a></h1>. O atributo name, marca onde o link deverá ser apresentado. - Para link externo, que é uma ligação que a página web possui para outro site, é necessário definir-se a tag <a href =“URLdesejada”> link externo </a>, onde URLdesejada é o endereço do site que se deseja vincular ao link, como é apresentado na Figura 23. Figura 23 – Tag href (link externo) Ao clicar no link “Clique aqui!” é aberta uma nova aba com o site inserido na tag (linha 6). Figura 24 – Visualização da tag href (link externo) Vale ressaltar que para link externo é necessário colocar-se http:// antes do endereço propriamente dito, como no exemplo da Figura 22, http://www.ulbra.br. - Em link para e-mail, que cria uma conexão direta com o software de correio eletrônico do usuário, conforme configurado em seu computador, predefinindo o endereço do destinatário automaticamente, usa-se a tag <a href= “mailto:endereço@e- mail.com”> e-mail </a>, onde endereço@e-mail.com é o endereço de e-mail para o qual se deseja enviar uma mensagem ao clicar-se no link. Na Figura 25 é apresentado um exemplo de link para e-mail (linha 6). Figura 25 – Tag href (link e-mail) Vale observar que em link para e-mail é necessário colocar-se mailto: antes do endereço de e-mail desejado, como visto no exemplo da Figura 25, mailto:endereco@ulbra.br (linha 6). Os links podem ser disponibilizados tanto em textos (como apresentado nos exemplos das Figuras 22, 24 e 25), quanto em figuras; como mostra o exemplo da Figura 26. Figura 26 – Tag href (âncora) REFERÊNCIAS ASTRUP, A.; JACOBSEN, J. C; ASTRUP, J. Tutorial HTML. Disponível em: http://pt- br.html.net/tutorials/html/lesson3.php. Acesso em: jul/2019. DUCKETT, J. Introdução à Programação Web com HTML, XTML e CSS. 2ª Edição. Rio de Janeiro: Editora Ciência Moderna, 2010. KOBAYACHI, C.; BEU, E. L. Webdesigner: Estrutura e Programação. São Paulo: Érica, 2001. http://pt-br.html.net/tutorials/html/lesson3.php http://pt-br.html.net/tutorials/html/lesson3.php
Continue navegando
Compartilhar