Advertisement
Guest User

Untitled

a guest
Nov 28th, 2014
136
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.73 KB | None | 0 0
  1. A página www.XKCD.com/138 encontra-se dividida em 4 blocos. O primeiro bloco situa-se no canto superior direito, e contêm apenas hiper-referências dispostas verticalmente. A forma como são introduzidas é feita recorrendo à marca <ul> para a criação de uma lista não ordenada, <li> para iniciar cada ponto da lista, e <a> para introduzir a hiper-referência, sendo os atributo para tal href.
  2. No segundo bloco, bloco do canto superior direito, tem-se conteúdo textual, em que a separação entee linhas se faz recorrendo à marca <br>, e duas imagens como hiper-referências. A introdução da imagem na página faz-se recorrendo à marca <img> onde são definidos os atributos height, width, alt, e src.
  3. O terceiro bloco, ou bloco central, apresenta uma sequência de botões que mais não são que hiper-referência, tendo já sido abrodado como são introduzidas. Código CSS e Javascript é responsável pela inserção dos botões em si, mas neste trabalho apenas se anaisa código HTML. A última imagem , ou "comic", publicada na página é apresentada a seguir aos botões. A sequência de botões é depois repetida. Seguidamente tem-se algum conteúdo textual, em que mais uma vez a separação entre linhas se faz reccorendo à tag <br>.
  4. Por fim, o quarto bloco, ou bloco do rodapé, tem inicialmente 5 imagens (que poderá ser cosiderada uma imagem divida em cinco). Cada divisão é uma hiper-referência que redireciona o utilizador para a página do site com a respetiva imagem. Esta divisão da imagem poderá ser tida como um mapa com zonas clicáveis. A forma como se introduz uma imagem e se divide a mesma em 5 partes é feita recorrendo em primeiro lugar à tag <img>, recorrendo aos atributos já referidos anteriormente e ao atributo usemap, onde é referido o nome do mapa a ser criado. Posteriormente é criado o mapa, usando a marca <map>, que utiliza os atributos id (que remeterá para código CSS ou Javascript) e name, onde será indicado o nome do mapa. A marca <area> é aberta seguidamente, e usa os atributos coord, shape, href e alt, que define, respetivamente, a dimensão de cada divisão, a sua forma, o site para onde reencaminha o utilizador, e o texto apresentado caso não se consiga apresentar a imagem. Neste bloco é também observável uma barra de pesquisa do Google, mais algum conteúdo textual e hiper-referências. Em relação à barra de pesquisa, haverá código em Javascript responsável pela sua implementação, no entanto não o iremos abordar.
  5. De forma a refazer a página sem as marcas <ul>, <li>, <ol> e <dl>, estas foram substituídas por marcas <div>. Foram adpatadas também as hiperligações presentes no código HTML original, bem como o código CSS, por forma a manter a página o mais parecido com o original.
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement