Um site informativo sobre plantas carnívoras.
Você tem um novo hobby: criar plantas carnívoras. Você encontrou um documento solto em um antigo livro do seu tio Epaminondas e, depois de lê-lo, decidiu criar uma página web com seu conteúdo. Além disso, você também tem uma pequena loja de sementes dessas plantas e deseja divulgá-la em uma página web.
Você deve pegar o documento do seu tio (arquivo:
/documentos-do-tio/pagina-plantas-specs.pdf
) e criar uma página web com o
mesmo conteúdo e formatação. Salve o arquivo como plantas.html
.
- A pasta
/imagens
contém os arquivos de imagens a serem usados.
Você pode ver todas as tags que precisará nos slides da aula. Veja algumas diretrizes úteis para você marcar o texto sobre as plantas carnívoras do tio Epaminondas:
- Termos em latim (exceto nomes próprios) devem estar enfatizados em itálico (há uma tag para isto).
- Citações devem aparecer em itálico (há duas tags para citação, mas você deve estilizá-las para que elas façam o texto ficar em itálico).
- A lista não-ordenada (de bolinhas) dos tipos de plantas deve conter links internos que fazem a página rolar para aquela seção de texto.
Sobre a estilização:
- As imagens devem ter uma borda (feita com CSS) e não precisam ser centralizadas.
Criar a página da loja seguindo o modelo do arquivo
/documentos-do-tio/pagina-loja.pdf
. Depois de criada, salve o arquivo
como loja.html
. Você deve também criar um hiperlink da página plantas.html
para sua nova loja.html
, e vice-versa.
Agora que você já criou as duas páginas e estilizou as duas, deve ter
criado regras de formatação em CSS dentro de elementos <style></style>
nas duas páginas.
Por exemplo, as regras da borda verde nas imagens pode estar repetida nos dois arquivos.
Para evitar repetição de código, é possível escrever código CSS em um arquivo separado e incluí-lo em cada arquivo html. Isso se chama refatorar:
-
Em vez de:
... <style> ... </style> </head>
-
Você pode:
<link rel="stylesheet" href="arquivo-de-estilos.css">
-
E mover suas regras CSS dentro de
<style>
para o novoarquivo-de-estilos.css
.
Note que, caso existam regras que só se apliquem a uma página, e não às duas, você deve criar outro(s) arquivo(s) CSS para conter apenas as regras exclusivas de cada página. Por exemplo, considere esta estrutura de pasta:
cefet-web-piranha-plant
images
...
css
estilos-comuns.css
estilos-plantas.css
estilos-loja.css
...
- Qual tag de citação devo usar?
- Há citações que ocorrem no meio de uma frase (chamamos isso de
inline
) e outras que são grandes e precisam ficar separadas do parágrafo (chamamos isso deblock
):- Citação
inline
: usamos<q>texto citado</q>
- Citação
block
: usamos<blockquote>texto citado</blockquote>
- Citação
- Há citações que ocorrem no meio de uma frase (chamamos isso de
- Podemos usar o elemento
<br>
(break line) para dar espaço?- Podemos, mas esta é uma péssima prática. Espaçamento é um conceito
de estilização, então deve ser feito usando CSS. Duas propriedades que
temos à disposição é
margin-top
emargin-bottom
. Por exemplo:-
Não faça isto:
<h1>Título</h1> <br> <br> <p>Assunto</p>
-
Em vez, faça isto em html e em CSS:
<h1>Título</h1> <p>Assunto</p>
h1 { margin-bottom: 30px; }
-
- Podemos, mas esta é uma péssima prática. Espaçamento é um conceito
de estilização, então deve ser feito usando CSS. Duas propriedades que
temos à disposição é
- Posso usar a tag
<em></em>
para deixar as coisas em itálico?- Essa não é a ideia. A tag
<em></em>
serve para marcar texto que, de alguma forma, possui ênfase. Por um acaso, o padrão dos navegadores é renderizá-los em itálico.
- Essa não é a ideia. A tag
- Os links para seções internas da página não estão funcionando.
-
Links internos (do tipo
<a href="#secao-jaula">jaula</a>
) apontam para algum elemento da página que possua um atributoid
(identificador) igual ao texto que está à direita da#
do link:<a href="#secao-jaula">jaula</a> <!-- outros elementos da página... --> <h2 id="secao-jaula">Armadilhas jaula</h2>
-
- Minhas bordas da tabela estão com um espaçamento! #comofaz?
-
Para que as bordas de uma tabela fiquem todas "juntinhas", há uma propriedade CSS:
table { border-collapse: collapse; }
-
- Quero colocar um ícone para minha página. #comofaz?
-
Salve uma imagem no formato
.ico
e, na página HTML, dentro do<head></head>
, coloque:<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
- Para configurar o ícone de forma que funcione da melhor forma também em smartphones, tablets e Windows 8+, veja este post do blog Tableless
-