Web Designer

1
Prof. João Falcão

EETEPA Paes de Carvalho

CURSO TÉCNICO EM INFORMÁTICA
Disciplina: WEB DESIGNER
Professor: JOÃO FALCÃO
Turma: INFO-SUB-2022

APLICAÇÕES PRÁTICAS – HTML E CSS

 Abaixo uma visão da página web que construiremos ao longo deste tutorial:

PASSO 1: ESCREVENDO O HTML

 O passo 1 consiste em abrir seu editor de texto (Notepad++, Sublime Text, Bloco de Notas, ou
outro de sua preferência), crie uma pasta com o nome Atividade-WEB-IV e digite o código
mostrado abaixo, salvando o arquivo com o nome minhapagina.html.
Web Designer
2
Prof. João Falcão

PASSO 2: ADICIONANDO CORES

 Comecemos com uma folha de estilos incorporada ao arquivo HTML.
 Mais a frente, separaremos os arquivos HTML e CSS.
 Separar os arquivos é uma boa técnica, pois isto permite usar a mesma folha de estilos para vários arquivos
HTML: você precisará escrever uma só folha de estilos.
 Por ora vamos colocar nossa CSS no mesmo arquivo HTML.
 Vamos precisar inicialmente do elemento <style> no nosso arquivo HTML.
 A folha de estilos será colocada dentro deste elemento.
 Volte ao seu editor e acrescente mais cinco linhas de código dentro da tag "head" do seu arquivo HTML:

 As linhas a acrescentar estão destacadas acima na cor vermelha.

 A primeira linha informa que trata-se de uma folha de estilos escrita para CSS (“text/css”).
 A segunda linha diz que as regras de estilo a seguir, aplicam-se ao elemento “body”.
 A terceira determina que os textos serão em cor purple (púrpura) e a linha a seguir coloca a cor #d8da3d
(amarela esverdeada) para o fundo da página.
 Em CSS as folhas de estilos são constituidas de regras.
 Cada regra compõe-se de três partes:
1. um selector (no exemplo: “body”), que informa ao browser qual é a parte do documento a qual se aplica
a regra;
2. uma propriedade (no exemplo, 'color' e 'background-color', duas propriedades distintas), que
especifica qual é o aspecto do layout que está sendo estilizado;
3. e um valor ('purple' e '#d8dna3d'), que fornece o valor da propriedade.
 No exemplo nota-se que as regras podem ser combinadas. Ali estão escritas duas propriedades.
 Poderíamos ter escrito duas regras separadamente sem combiná-las:
o body {color: purple}
o body {background-color: #d8da3d}
 Mas, como as duas regras valem para o elemento body, escrevemos uma só vez o elemento e colocamos
as propriedades com seus valores, juntas.
 A cor de fundo (background-color) do elemento body valerá para todo o documento.
 Não foi escrita nenhuma regra adicional colocando fundo de outra cor para os outros elementos da página
(p, li, address…) então por 'default' eles não terão cor de fundo (ou seja: serão transparentes).
Web Designer
3
Prof. João Falcão

 A propriedade 'color' determina a cor dos textos para o elemento body e todos os elementos contidos em
body herdarão esta cor, a menos que uma outra regra CSS determine uma cor diferente para qualquer
elemento na página.

A página com cores adicionadas, renderizada em um browser.

 Cores podem ser escritas em CSS de variadas maneira.
 Neste exemplo foram mostradas duas delas: pelo nome da cor (“purple”) e por seu código hexadecimal
(“#d8da3d”).

PASSO 3: ADICIONANDO FONTES

 Outra coisa bem fácil de se estilizar são as fontes para os elementos da página.
 Neste exemplo, vamos escolher fonte “Georgia” para os textos, exceto para o cabeçalho h1 ao qual
atribuiremos a fonte “Helvetica.”
 Não há como saber quais são as fontes que os visitantes do seu site têm instaladas em suas máquinas, por
isso é de boa técnica sempre especificarmos fontes alternativas nas folhas de estilos: se a fonte Georgia
não estiver disponível as fontes Times New Roman ou Times irão substituí-la sem grandes prejuízos e ainda
mais, se ambas também estiverem indisponíveis o navegador do visitante usará uma fonte (with serif) com
serifas.
 Se a fonte Helvetica não estiver instalada, as fontes Geneva, Arial e SunSans-Regular são similares e se
nenhuma delas estiver disponível o browser usará uma fonte sem serifas.
 No seu editor de textos acrescente mais estas linhas:
Web Designer
4
Prof. João Falcão

 Salve o arquivo, abra novamente o navegador e dê um "Reload" (Atualizar) na página para visualizar as
fontes diferentes para o cabeçalho h1 e o restante do texto.

PASSO 4: ADICIONANDO O MENU DE NAVEGAÇÃO

 A lista no topo da página destina-se a se constituir no menu de navegação. Web sites em geral tem uma
barra de navegação disposta horizontalmente no topo ou um menu na lateral da página e nossa página
também terá seu menu de navegação. Usaremos um menu na lateral esquerda, por considerarmos mais
interessante que uma barra no topo...
 Nosso menu já esta no código HTML da página. Ele é a lista <ul> no topo. Os links ali inseridos não levam a
lugar algum pois nosso “Web site” tem uma só página. Incluiremos depois mais páginas.
 Agora precisamos mover a lista para a esquerda e o restante do texto para a direita com a finalidade de
abrir espaço para a lista. As propriedades CSS que usaremos para isto são 'padding-left' (para mover o
texto para a direita) e 'position', 'left' e 'top' (para posicionar o menu).
 No editor de texto adicione mais estas linhas no arquivo HTML:
Web Designer
5
Prof. João Falcão

 Salve o arquivo e dê "Reload" (Atualizar) no browser para ver o menu a esquerda do texto.

 A regra 'position: absolute' determina que o elemento ul seja posicionado na página independentemente
de qualquer texto que venha antes ou depois no código HTML e as propriedades 'left' e 'top' indicam qual a
posição a ocupar.
 No nosso caso, 2em abaixo do topo e 1em para a direita do lado esquerdo da janela do browser.
 '2em' significa 2 vezes o tamanho da fonte adotada. Por exemplo: se o menu está com fonte de 12 points,
2em equivalem a 24 points.
 A unidade 'em' é muito usada em CSS, pois ela permite que as medidas se adaptem automaticamente ao
tamanho de fonte que os usuários costumam utilizar em suas preferências pessoais.
 A maioria dos browsers possuem a facilidade de permitir que o usuário aumente ou diminua o tamanho de
fonte ao visualizar uma página web.
Web Designer
6
Prof. João Falcão

PASSO 5: ESTILIZANDO OS LINKS

 O menu de navegação mais se parece com uma lista do que com um menu.
 Vamos estilizá-lo. Comecemos removendo os marcadores de lista e deslocando o menu mais para a
esquerda, para o lugar agora ocupado pelos marcadores.
 Vamos acrescentar um fundo branco para os itens da lista e também um quadrado preto.
 Até agora ainda não definimos as cores para os links, então esta é a hora: azul para links não visitados e
púrpura para links já visitados:

 Tradicionalmente os browsers renderizam os hyperlinks com um sublinhado e com cores.

 Usualmente as cores adotadas pelos browsers são as mesmas que adotamos no nosso exemplo: azul para
links não visitados (ou visitados há muito tempo) e púrpura para links já visitados.
 Em HTML, criamos hyperlinks com o elemento <a>, assim para especificar cores para links estabelecemos
regras CSS para "a".
 Para fazermos diferenciação entre links visitados e não visitados estão previstas duas "pseudo-classes" CSS
(:link e :visited). Elas são chamadas de "pseudo-classes" para diferenciá-las das classe de atributos, que
são usadas nos código HTML, por exemplo a class="navbar" do nosso exemplo.
Web Designer
7
Prof. João Falcão

PASSO 6: ADICIONANDO UMA LINHA HORIZONTAL

 A última regra para estilização que escreveremos em nosso exemplo será para adicionar uma linha
horizontal separando o texto principal da assinatura ao pé da página.
 Usaremos a propriedade 'border-top' para colocar uma linha horizontal pontilhada acima do elemento
<address>:

 Aqui completamos a folha de estilos.

 A seguir vamos ver como colocar a folha de estilos em um arquivo separado e com isto usar uma folha
para várias páginas.
Web Designer
8
Prof. João Falcão

PASSO 7: COLOCANDO A FOLHA DE ESTILOS EM UM ARQUIVO SEPARADO

 Temos agora um arquivo HTML com uma folha de estilos incorporada.

 Quando nosso site crescer, provavelmente muitas páginas deverão compartilhar a mesma folha de estilos.
 Existe uma maneira bem mais racional do que sair copiando a folha de estilos em cada uma das páginas
do Web site: se colocarmos a folha de estilos em um arquivo separado, todas as páginas do site poderão
conter um link apontando para este arquivo.
 Para nosso arquivo de folha de estilo precisaremos criar um outro arquivo de texto. Escolha “New” no menu
File do seu editor de texto.
 A seguir, no editor, copie tudo o que estiver dentro do elemento <style> no HTML e cole no arquivo novo que
você acabou de criar.
 Não copie as tags <style> e </style>. Elas são do HTML e não pertencem ao arquivo CSS.
 Agora na nova janela do editor que você abriu deverá estar com esta folha de estilos:

 Escolha “Save As…” no menu File, e salve com o nome “meuestilo.css” no mesmo diretório/pasta onde está
o arquivo minhapagina.html.
 Agora volte para o arquivo HTML. Apague tudo que estiver dentro do elemento <style> incluindo <style> e
</style> e coloque no lugar um elemento <link> como mostrado abaixo:
Web Designer
9
Prof. João Falcão

 Este link informa ao browser que que a folha de estilos para a página está em um arquivo chamado
“meuestilo.css” e como nenhum diretório está indicado no caminho do link o browser procurará no mesmo
diretório do arquivo HTML.
 Se você salvar o arquivo HTML e der um "Reload" (Atualizar) na página, nenhuma mudança ocorrerá: a
página continua estilizada da mesma maneira mas agora as regras de estilo estão em um arquivo externo.

 O próximo passo agora é carregar os arquivos criados, minhapagina.html e meuestilo.css para seu Web site.
Web Designer
10
Prof. João Falcão

CÓDIGOS PRONTOS
minhapagina.html (com CSS embutido) minhapagina.html (com CSS separado)

meuestilo.css