Aula Da Brance de Neve

UNIVERSIDADE PAULISTA
Comunicação Digital – Campi: Pinheiros

Sup. Tec. em Design Gráfico 44316
Design Audiovisual para Web 99B6
Objetivos Primários: Criar uma página Web real e válida

Objetivos Secundários: Apresentar algumas das tags HTML e propriedades CSS
- Design Audiovisual Para Web –
1. Reapresentar a estrutura de construção de um arquivo HTML com seus elementos básicos

fundamentais (<!DOCTYPE> <html></html> <herad></head> <title></title> <meta
charset="utf-8" /> <body><body);
2. Iniciar a apresentação de tags HTML;
Bônus tags áudio e vídeo;
3. Criar uma página completa contando com imagem e CSS.
Prof.ª M.ª Selma Rofino 20/09/2020 pág. 1

Prof. Esp. Francisco José Lopes Turno: Diurno / Noturno Turmas: DP4-DP3
Conceitos anteriormente apresentados.
Estrutura de um arquivo HTML (reforçando conceitos vistos na aula anterior)
Essa estrutura acima mostrada é formada por um conjunto mínimo de tags HTML, mostrado a
seguir:
<!DOCTYPE html>
<html>
<head>
<title>Nome da página</title>
<meta charset="UTF-8" />
</head>
<body>
</body>
</html>
A definição de tipo é o <!DOCTYPE html>.

A página como um todo fica entre as tags <html> e </html>, o doctype fica de fora.
Os controles e metadados estão entre <head> e </head>.
E o conteúdo propriamente dito da página entre <body> e </body>.
O ambiente de trabalho a usar

Utilizaremos um editor de textos, que pode ou não ter facilidades integradas. Essas facilidades são:
verificador de sintaxe, colorizador de elementos, edição visual etc.

Nossa primeira abordagem pode ser feita usando o bloco de notas (notepad) ou mesmo o
notepad++. O bloco de notas é parte acessória integrante do Windows e o notepad++ é programa
gratuito disponível na Internet para download no site <https://notepad-plus-plus.org>. E para
aqueles que não dispõe de um computador/laptop podem utilizar o editor de HTML da w3schools
no URL <https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic>.
HTML – HyperText Makup Language

Temos o HTML como um acrônimo (ou mesmo uma sigla) de HyperText Makup Language, que em
português é Linguagem de Marcação de Hiper Texto. Então de maneira geral podemos entender
que HTML é uma forma de marcar um texto, veja então o que se quer dizer com marcar um texto.
Tome um texto, por exemplo, a história de Banca de Neve e os Sete anões:
Branca de Neve e os sete anões

Era uma vez um rei que vivia num reino distante, com a sua filha pequena, que se chamava Branca
de Neve. O rei, como se sentia só, voltou a casar, achando que também seria bom para a sua filha
ter uma nova mãe.
A nova rainha era uma mulher muito bela, mas também muito má, e não gostava de Branca de
Neve que, quanto mais crescia, mais bela se tornava. A rainha malvada tinha um espelho mágico,
ao qual perguntava, todos os dias:
‐ Espelho meu, espelho meu, haverá mulher mais bela do que eu?
E o espelho respondia:
‐ Não minha rainha, és tu a mulher mais bela!
Mas uma manhã, a rainha voltou a perguntar o mesmo ao espelho, e este respondeu:
‐ Tu és muito bonita minha rainha, mas Branca de Neve é agora a mais bela!
Enraivecida, a rainha ordenou a um dos seus servos que levasse Branca de Neve até à floresta e
a matasse, trazendo‐lhe de volta o seu coração, como prova...
Observe que de alguma forma o título deverá ser visualmente diferenciado dos parágrafos para que
não pareça apenas mais um deles.
O HTML nos oferece uma coleção de tags para marcação de títulos (ou cabeçalhos) que são: h1
(<h1></h1>) h2 (<h2></h2>) h3 (<h3></h3>) h4 (<h4></h4>) h5 (<h5></h5>) h6 (<h6></h6>),
sendo h1 o de mais alto nível e h6 o de mais baixo nível, que por padrão são apresentados em
tamanhos diferenciados e proporcionais ao nível hierárquico.
Para marcar os parágrafos o HTML nos brinda com a tag p (<p></p>).
Ambas as tags operam aos pares, de tal forma que colocamos a primeira tag (também adjetivada
de tag de abertura) no ponto do texto onde se deseja que comece a valer a função designada pela
tag e a segunda tag no ponto do texto onde se deseja que termine a validade da função. Usando o
título como exemplo vide abaixo a marcação inserida no trecho de texto:
<h1>Branca de Neve e os sete anões</h1>

Desta forma na palavra Branca a exibição será sob forma de título de alto nível e tal efeito só
cessará ao final da palavra anões.
Então se usarmos essa ideia marcando todo o texto resultará o seguinte:
<h1>Branca de Neve e os sete anões</h1>

<p>Era uma vez um rei que vivia num reino distante, com a sua filha pequena, que se chamava
Branca de Neve. O rei, como se sentia só, voltou a casar, achando que também seria bom para a
sua filha ter uma nova mãe.</p>
<p>A nova rainha era uma mulher muito bela, mas também muito má, e não gostava de Branca de
Neve que, quanto mais crescia, mais bela se tornava. A rainha malvada tinha um espelho mágico,
ao qual perguntava, todos os dias:</p>
<p>‐ Espelho meu, espelho meu, haverá mulher mais bela do que eu</p>
<p>E o espelho respondia:</p>
<p>‐ Não minha rainha, és tu a mulher mais bela!</p>
<p>Mas uma manhã, a rainha voltou a perguntar o mesmo ao espelho, e este respondeu:</p>
<p>‐ Tu és muito bonita minha rainha, mas Branca de Neve é agora a mais bela!</p>
<p>Enraivecida, a rainha ordenou a um dos seus servos que levasse Branca de Neve até à floresta
e a matasse, trazendo‐lhe de volta o seu coração, como prova...<p>
Da mesma forma podemos inserir uma ilustração em meio ao texto, acrescentando a tag de imagem
que tem a seguinte sintaxe:
<img src=”Nome_do_Arquivo_de_imagem” alt=”Descrição cerca a imagem” title=”nome para a

imagem”>
Observe que: src é um atributo cujo valor indica qual é e onde está o arquivo com a imagem a ser
exibida, alt é um texto alternativo que descreve a imagem para, por exemplo, que programas
leitores de tela possam “falar” ao usuário deficiente visual o que é ou o que está na imagem, e
finalmente title que é o nome dado a imagem (não tem relação com o nome do arquivo) que os
buscadores consideram ao efetuar suas buscas.
BONUS – Tags Áudio e Vídeo

Um importante acréscimo em termos de multimídia foi a introdução das tags que dão conta de
nativamente reproduzir peças de áudio e de vídeo, são elas:
<audio></audio>
e
<video></video>
apoiadas pela tag <source>
A tag áudio admite os atributos: autoplay; controls; loop; muted; preload e src.
A tag vídeo admite os mesmos atributos e adicionalmente: height e width.
Já a tag source é usada para especificar os arquivos de mídia a serem reproduzidos e aceita os
atributos: media; sizes; src; srcset; e type.

Mãos à massa:
1ª Etapa (melhor explicada no passo a passo Minha Primeira Página Web)

Digite o texto da história da Branca de neve, ou copie o arquivo com o texto caso já o tenha em seu
pen-drive, ou caso esteja disponível no ftp do laboratório (juntamente com a imagem ilustrativa de
Branca de Neve) para a máquina que está usando, pode ser no desktop ou em uma pasta que você
vai criar (sem esquecer onde está gravando por favor) e comece a efetuar as marcações como
explicado na parte teórica, caso você quando chegar no ponto de inserir a ilustração use o arquivo
de imagem, ou estes endereço <https://bebeatual.com/artimg/branca_de_neve_3.jpg> onde a
imagem está na Internet.
Nota a tag de imagem fica assim usando a imagem da Internet:
<img src="https://bebeatual.com/artimg/branca_de_neve_3.jpg" alt="desenho de Branca de neve" title="Branca de Neve">
ou
<img src="http://unip.qaplaweb.com.br/bdn/bdn.jpg" alt="desenho de Branca de neve" title="Branca de Neve">
Agora siga os passos abaixo, como uma receita segura para chegar à construção da sua primeira
página Web completa.
O texto parte do mais simples portanto usa o Bloco de Notas do Windows, mas pode ser adaptado
aos mais diversos editores de texto que se deseje utilizar ok.

Minha Primeira Página Web
Muito bem veremos neste laboratório como montar uma página HTML em passos mínimos e básicos.
Procure não pular as etapas propostas para tirar o máximo proveito dos detalhes a serem observados, que num
trabalho de maior volume podem fazer muita diferença.
1ª – Veja, no final desta nota de aula, como deverá ser a aparência da página que será construída.
2ª – Inicie por criar um arquivo txt (com o bloco de notas ou com o NotePad++) chamado bdn.txt com o seguinte
conteúdo, todo em uma única linha (copie e cole se tiver este arquivo no computador):
Branca de Neve e os sete Anões. ERA UMA VEZ um rei que vivia num reino distante, com a sua filha pequena, que se
chamava Branca de Neve. O rei, como se sentia só, voltou a casar, achando que também seria bom para a sua filha
ter uma nova mãe. A nova rainha era uma mulher muito bela, mas também muito má, e não gostava de Branca de
Neve que, quanto mais crescia, mais bela se tornava. A rainha malvada tinha um espelho mágico, ao qual
perguntava, todos os dias: - Espelho meu, espelho meu, haverá mulher mais bela do que eu? E o espelho respondia: -
Não minha rainha, és tu a mulher mais bela! Mas uma manhã, a rainha voltou a perguntar o mesmo ao espelho, e
este respondeu: - Tu és muito bonita minha rainha, mas Branca de Neve é agora a mais bela! Enraivecida, a rainha
ordenou a um dos seus servos que levasse Branca de Neve até à floresta e a matasse, trazendo-lhe de volta o seu
coração, como prova...
(Obs.: Se possível o professor fornecerá o arquivo pela rede do laboratório)
3ª – Abra um navegador (desde que não seja o MS Edge) e arraste para ele o arquivo BdN.txt (isto irá abrir o arquivo
no navegador). Observe como se apresenta o arquivo na tela. Sem parágrafos, ou quebras de linha, ou seja, ruim
mesmo.
4ª – Faça uma cópia do arquivo chamando-o de bdn2.txt, edite o arquivo e arrume os parágrafos como necessário,
conforme o modelo mostrado no final deste documento. Depois repita a operação de abri-lo num navegador.
Observe que agora o fluxo do texto parece mais normal, mas ainda está longe de ser algo apresentável.
5ª – Como um navegador é feito para abrir páginas web, então vamos trocar o nome de nosso arquivo para
bdn2.html e então em seguida vamos abri-lo no navegador web.
Instruções para quem usar o bloco de notas
 Abra o arquivo bdn2.txt no bloco de notas

 No menu Arquivo, escolha a opção Salvar Como... (Ctrl+Shift+S).
 Na caixa de diálogo “Nome:” digite bdn.html
 Na caixa de seleção “Tipo:” marque “Todos os arquivos (*.*)”
 Na caixa de seleção “Codificação:” garanta estar na opção ANSI
 Pressione o botão “Salvar”. Pronto!
Instruções para quem usar o NotePad++
 Abra o arquivo bdn2.txt no notePad++

 Na orelhinha com o nome do arquivo clique com o botão direito do mouse
 Surge um menu selecione a opção Renomear (ou Rename)
 Na caixa de diálogo denominada “Nome:” (ou name) digite html no lugar de txt
 Clique no botão “Salvar” (ou save). Pronto!

Agora observe que no navegador perdemos as quebras de linha que havíamos conseguido na 4ª etapa. Isto se deve
ao fato de o navegador estar agora mostrando um arquivo do tipo HTML e não mais um TXT, que era mostrado
exatamente como é.
Abuse do momento, no arquivo bdn2.html ainda aberto no editor, tecle um <ENTER> (a tecla ) após cada letra da
palavra “Branca” e entre o “sete” e o “Anões” digite uns 10 espaços. Salve o arquivo e abra-o no navegador
novamente, para observar o que mudou.
Viu que no máximo foi inserido UM espaço entre as letras que você colocou o <ENTER> que foi, solenemente,
ignorado e que o espaçamento entre o sete e o Anões NÃO sofreu alterações.
Assim é num arquivo HTML, não adianta querer formatá-lo com o editor de textos.
Aqui o aprendizado é que: para um HTML qualquer formatação no arquivo texto é ignorada.
6ª – Nesta etapa e nas próximas você aperfeiçoará o arquivo HTML aos poucos para poder observar os efeitos que as
marcações HTML têm sobre o resultado mostrado ao usuário. Para não perder o histórico a cada etapa será criado
um novo arquivo, partindo de uma cópia do anterior. Então faça uma cópia (ctrl-c; ctrl-v) de bdn2.html renomeando
a cópia para bdn3.html.
ATENÇÃO: Lembre que normalmente o Windows ESCONDE a extensão do arquivo
Abra o arquivo (bdn3.html) com o bloco de notas (Arquivo / Abrir / [altere o tipo de *.txt para todos *.* e localize o
arquivo] ) ou para abri-lo no NotePad++ clique com o botão direito no arquivo e use a opção de menu devida (Edit
with NotePad++). Inicialmente desfaça as últimas alterações (inserção das teclas ENTER e espaços do final da 5ª
etapa). Em seguida na primeira linha (Antes do: Branca de Neve e os sete anões) insira o seguinte:
<html>
<body>
E após a última insira:

</body>
</html>
Desta forma você terá definido o arquivo como um arquivo HTML e terá de quebra marcado o corpo (conteúdo) do
documento. Agora após cada parágrafo escreva a marcação <br>, de forma que o navegador saiba onde deve trocar,
quebrar, as linhas do texto.
Salve o arquivo (bdn3.html) e abra-o no navegador, e observe que as linhas estão sendo “trocadas” nos lugares
devidos (mas seu espaçamento ainda não é ótimo).
7ª – Nesta etapa você marcará as funções dos trechos do arquivo (título do texto como título, parágrafos como
parágrafos, e assim por diante). Copie bdn3.html como bdn4.html e abra-o no bloco de notas (ou NotePad++). Elimine
(apague) todas as etiquetas <br> inseridas na 6ª etapa. Na linha Branca de Neve e os sete Anões, insira a tag de
abertura <h3> logo no início da linha, e a tag de fechamento </h3> ao seu final. NÃO se preocupe em “avisar” que se
deve trocar de linha (como feito antes como <br>), pois a tag h3 por si só pede que seu conteúdo fique em uma linha
própria (qualquer dos h1 até h6 tem esse efeito). Agora para cada período de texto (pode chamar de parágrafo, pois
é o que eles são), deve ser antecedido e sucedido pelas marcas <p> e </p>. Salve o arquivo bdn4.html e abra-o no
navegador.
Muito melhor, não é? Observe que os parágrafos entre si agora têm um espaçamento maior que as linhas de um
mesmo parágrafo.

8ª – Nesta etapa você dará mais graça à página ilustrando-a, e completando mais sua estrutura. Como nas etapas
anteriores, gere uma cópia da última versão do arquivo e a nomeie de bdn5.html.
Na linha seguinte à marca <html> (e antes de <body>), insira este conteúdo:

<head>
<title>Branca de Neve</title>
</head>
Entre a linha marcada como <h3></h3> (título) e o primeiro parágrafo, insira a tag de imagem mostrada aqui:
<img src="bdn.jpg" alt="Branca de Neve" title="Branca de Neve" width="229" height="277">
Salve o arquivo editado (bdn5.html) e abra-o no navegador.
Você deverá ver na guia do navegador o nome da página (Branca de Neve). Até agora só se via o endereço e nome
do arquivo da página, além de logo abaixo do título um retângulo em branco escrito dentro dele Branca de Neve.
Isso é porque o nome do arquivo de imagem no diretório de seu computador não está de acordo com o código
HTML. Altere o nome do arquivo na tag img de bdn.jpg para bdn_.jpg e recarregue a página no navegador.
ATENÇÃO: Lembre que normalmente o Windows ESCONDE a extensão do arquivo
Pronto agora sim! (lembre-se de que o arquivo de imagem e o arquivo html devem estar no mesmo local do
computador e não em pastas diferentes, já que não dissemos em que pasta está a imagem, só seu nome)
Pesquise por que o retângulo tinha o texto Branca de Neve em seu interior? (dica atributo alt da tag img)
9ª – A página está começando a ficar mais apresentável, mas ainda falta um tanto de estilo e cor nela! Faça mais uma
vez cópia da última versão e a chame de bdn6.html agora (isto só vai até bdn10.html evolutivamente, então vamos
com calma).
Para dar um “tapa” na página, seria legal deixar a ilustração circundada por texto e dar cor ao título não é. Insira um
pouco de CSS (bem pouco) na página e dê uma geral na diagramação, com as seguintes alterações...
Após a linha com a marca <title></title> (antes do </head>) insira estas linhas:
<style>
body {
font-family: arial
}
</style>
Altere a tag de abertura <h3> para <h3 style="color: navy">, após a tag de fechamento </h3> (antes da
imagem), em uma nova linha, insira as seguintes declarações:
<table width="640" cellspacing="0" cellpadding="5" border="0">
<tr valign="bottom">
<td align="center" width="231">
Após a tag <img> insira a seguinte linha:
</td><td>, após a linha com ‘...mais bela do que eu?</p>’, insira as linhas:
</td></tr>
<tr><td colspan="2">
Finalmente, antes da linha </body>, insira as linhas:

</td></tr>
</table>
Salve esta versão (bdn6.html) da página e abra-a no navegador.
Hmmm, agora está tomando forma não é então!
Na porção head da página (lá no início do arquivo) foram embutidas instruções de estilo com CSS, depois in-line você
formatou com mais CSS o título, finalmente diagramou a página através do uso de uma tabela com duas colunas na
primeira linha (primeira coluna para a ilustração e a segunda para o texto) e uma só coluna na segunda.
10ª – Nossa página está ótima, mas não parece meio que sacanagem usar tabelas, que são para mostrar dados, para
fazer a diagramação? Deve haver uma forma mais correta para isso, não é? Sim há, e você vai vê-la agora mesmo.
Tome uma cópia do arquivo bdn6.html e a chame de bdn7.htm. Você fará agora algumas mudanças profundas no
arquivo.
Onde havia a declaração CSS no head (entre as marcas <style> e </style>), substitua-a pelas linhas a seguir:
body {
font-family: arial;
font-size: 16px;
}
#container {
width: 640px;
}
h3 {
font-size: 140%;
color: navy;
}
#ilust {
float: left;
padding: 10;
}
#intro {
float: rigth;
padding-top: 10px;
}
#corpo {
clear:both
}
Hmmmm... o CSS cresceu bastante!
Entre a tag <body> e <h3 "style=color: navy">, insira uma linha contendo <div id="container" que
conterá a toda informação da página. Retire o CSS in-line de h3, deixando como era originalmente, ou seja, apenas
<h3>, sem a parte do "style=color: navy".
Vamos retirar as linhas:

<table width="640" cellspacing="0" cellpadding="5" border="0">
<tr valign="bottom">
<td align="center" width="231">

</td><td>
</td></tr>
<tr><td colspan="2">
E também
</td></tr>
</table>
Desta forma eliminando a tabela usada para diagramar a página, e em seu lugar usaremos alguns <div> como a
seguir.
Logo após a ta <body> insira a tag <div id=”container”>.
A tag <img> será antecedida pela tag de abertura <div id="ilust"> e sucedida pela tag de fechamento </div>.
Os três primeiros parágrafos serão antecedidos pela tag de abertura <div id="intro"> e sucedidos pela tag de
fechamento </div>. Com isso simulamos as duas células da primeira linha da tabela.
O último conjunto de parágrafos (são 5 deles), serão antecedidos por <div id="corpo"> e sucedidos por </div>
além de outro </div> (este último fechando o <div id="container"> aberto anteriormente e não fechado até
aqui).
Salvar e abrir o arquivo (bdn7.html) “renovado” no navegador. Veja que visualmente a mudança é pequena, no
entanto a página está dentro do “padrão semântico” agora, o que proporciona um melhor posicionamento nos sites
de busca.
Para finalizar nossa construção crie um arquivo com o bloco de notas (ou o NotePad++) e como conteúdo escreva:
/* Arquivo de folha de estilo para a página da Branca de Neve e os sete Anões */
body {
font-family: arial;
font-size: 16px;
}
#container {
width: 640px;
}
h3 {
font-size: 140%;
color: navy;
}
#ilust {
float: left;
padding: 10;
}
#intro {
float: rigth;
padding-top: 10px;
}
#corpo {
clear:both
}

Salve-o chamando de bdn.css.
Agora copie bnd7.html, juro que será a última cópia e alteração, como bdn.html, que será a versão final da página da
Branca de Neve e os sete Anões.
Edite o bdn.html, substituindo toda a tag <style> (abertura e fechamento) </style> e seu conteúdo por:
<link rel="stylesheet" type="text/css" href="bdn.css">
Agora você tem o conteúdo separado da formatação. Um no arquivo HTML e o outro no arquivo CSS.
Pronto chegamos no exemplo do estado de arte dos padrões Web onde as camadas do site estão devidamente
separadas, sem mistura de finalidades nos arquivos do site.
Temos:
 conteúdo em arquivo HTML;

 formatação em arquivo CSS;
 e poderíamos, se fosse o caso, ter ação em arquivo JS.
Assim se utiliza o tripé tecnológico da web moderna, HTML / CSS / JS, ou seja: conteúdo / estilo / ação.
ATENÇÃO: a próxima aula não terá uma nota de aula tão detalhada como foi esta, mas era necessário ser assim, para
chamar atenção aos detalhes.
Bom estudo gente!
Branca de Neve e os sete Anões

ERA UMA VEZ um rei que vivia num reino distante, com a sua filha pequena, que se chamava
Branca de Neve. O rei, como se sentia só, voltou a casar, achando que também seria bom para
a sua filha ter uma nova mãe. A nova rainha era uma mulher muito bela, mas também muito má,
e não gostava de Branca de Neve que, quanto mais crescia, mais bela se tornava.
A rainha malvada tinha um espelho mágico, ao qual perguntava, todos os dias:
- Espelho meu, espelho meu, haverá mulher mais bela do que eu?
E o espelho respondia:
- Não minha rainha, és tu a mulher mais bela!
Mas uma manhã, a rainha voltou a perguntar o mesmo ao espelho, e este respondeu:
- Tu és muito bonita minha rainha, mas Branca de Neve é agora a mais bela!
Enraivecida, a rainha ordenou a um dos seus servos que levasse Branca de Neve até à floresta e a matasse, trazendo-
lhe de volta o seu coração, como prova...


Aula Da Brance de Neve

Enviado por

Direitos autorais:

Formatos disponíveis

Você também pode gostar

Aula Da Brance de Neve

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aula Da Brance de Neve

Enviado por

Direitos autorais:

Formatos disponíveis

UNIVERSIDADE PAULISTA

Comunicação Digital – Campi: Pinheiros

Objetivos Primários: Criar uma página Web real e válida

- Design Audiovisual Para Web –

1. Reapresentar a estrutura de construção de um arquivo HTML com seus elementos básicos

Prof.ª M.ª Selma Rofino 20/09/2020 pág. 1

Conceitos anteriormente apresentados.

Estrutura de um arquivo HTML (reforçando conceitos vistos na aula anterior)

A definição de tipo é o <!DOCTYPE html>.

O ambiente de trabalho a usar

Prof.ª M.ª Selma Rofino 20/09/2020 pág. 2

HTML – HyperText Makup Language

Branca de Neve e os sete anões

Para marcar os parágrafos o HTML nos brinda com a tag p (<p></p>).

<h1>Branca de Neve e os sete anões</h1>

Prof.ª M.ª Selma Rofino 20/09/2020 pág. 3

Então se usarmos essa ideia marcando todo o texto resultará o seguinte:

<h1>Branca de Neve e os sete anões</h1>

<img src=”Nome_do_Arquivo_de_imagem” alt=”Descrição cerca a imagem” title=”nome para a

BONUS – Tags Áudio e Vídeo

Prof.ª M.ª Selma Rofino 20/09/2020 pág. 4

1ª Etapa (melhor explicada no passo a passo Minha Primeira Página Web)

Nota a tag de imagem fica assim usando a imagem da Internet:

<img src="https://bebeatual.com/artimg/branca_de_neve_3.jpg" alt="desenho de Branca de neve" title="Branca de Neve">

<img src="http://unip.qaplaweb.com.br/bdn/bdn.jpg" alt="desenho de Branca de neve" title="Branca de Neve">

Prof.ª M.ª Selma Rofino 20/09/2020 pág. 5

Minha Primeira Página Web

(Obs.: Se possível o professor fornecerá o arquivo pela rede do laboratório)

Instruções para quem usar o bloco de notas

 Abra o arquivo bdn2.txt no bloco de notas

Instruções para quem usar o NotePad++

 Abra o arquivo bdn2.txt no notePad++

Prof.ª M.ª Selma Rofino 20/09/2020 pág. 6

ATENÇÃO: Lembre que normalmente o Windows ESCONDE a extensão do arquivo

E após a última insira:

Prof.ª M.ª Selma Rofino 20/09/2020 pág. 7

Na linha seguinte à marca <html> (e antes de <body>), insira este conteúdo:

Salve o arquivo editado (bdn5.html) e abra-o no navegador.

ATENÇÃO: Lembre que normalmente o Windows ESCONDE a extensão do arquivo

Após a tag <img> insira a seguinte linha:

Finalmente, antes da linha </body>, insira as linhas:

Prof.ª M.ª Selma Rofino 20/09/2020 pág. 8

Salve esta versão (bdn6.html) da página e abra-a no navegador.

Hmmm, agora está tomando forma não é então!

Hmmmm... o CSS cresceu bastante!

Vamos retirar as linhas:

Prof.ª M.ª Selma Rofino 20/09/2020 pág. 9

Logo após a ta <body> insira a tag <div id=”container”>.

Prof.ª M.ª Selma Rofino 20/09/2020 pág. 10

Salve-o chamando de bdn.css.

 conteúdo em arquivo HTML;

Bom estudo gente!

Branca de Neve e os sete Anões

A rainha malvada tinha um espelho mágico, ao qual perguntava, todos os dias:

- Não minha rainha, és tu a mulher mais bela!

Prof.ª M.ª Selma Rofino 20/09/2020 pág. 11

Você também pode gostar