HTML - Parte 2: Caracteres, Tags, Imagens e Links

Prévia do material em texto

HTML - Parte 2
DCC 121 - Laborato´rio de Programac¸a˜o Web
Prof. Luiz Maur´ılio da Silva Maciel
Departamento de Cieˆncia da Computac¸a˜o
Instituto de Cieˆncias Exatas
Universidade Federal de Juiz de Fora
1o de setembro de 2014
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 2 1o de setembro de 2014 1 / 23
Roteiro
1 Caracteres especiais
2 As tags <div> e <span>
3 Imagens
4 Links
5 Exerc´ıcios
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 2 1o de setembro de 2014 2 / 23
Caracteres especiais
Caracteres especiais em HTML
Quando editamos um texto, a maioria dos caracteres utilizados pode
ser obtida de forma simples atrave´s do teclado
Todas as letras do nosso alfabeto, assim como nu´meros e s´ımbolos
mais utilizados esta˜o presentes na maioria dos teclados
Pore´m certos caracteres, como por exemplo os s´ımbolos < e > na˜o
sa˜o exibidos diretamente pelo navegador
Nesse caso, precisamos usar co´digos para esses caracteres especiais
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 2 1o de setembro de 2014 3 / 23
Caracteres especiais
Co´digos
Co´digos em HTML tem a seguinte forma:
&codigo;
Sendo que existem co´digos por nomes colocados na forma &nome; ou
por nu´meros colocados na forma &#numero;
Por exemplo o s´ımbolo de < pode ser representado por &lt; ou por
&#60;
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 2 1o de setembro de 2014 4 / 23
Caracteres especiais
Adicionando espac¸os
Navegadores sempre ”truncam” espac¸os em HTML
Ou seja, se no co´digo aparecem 10 espac¸os em branco, o navegador
cortara´ 9 e so´ exibira´ um u´nico espac¸o
Para adicionarmos espac¸os reais, utilizamos o co´digo &nbsp;
Exemplo:
Vamos adicionar espac¸os. <br/>
Vamos adicionar &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; espac¸os.
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 2 1o de setembro de 2014 5 / 23
Caracteres especiais
Exemplos de co´digos
As tabelas a seguir apresentam alguns co´digos u´teis em HTML:
S´ımbolo Co´digo (nome) Co´digo (nu´mero)
Espac¸o ( ) &nbsp; &#160;
Menor que (<) &lt; &#60;
Maior que (>) &gt; &#62;
E comercial (&) &amp; &#38;
Copyright ( c©) &copy; &#169;
Trademark (TM) &trade; &#8482;
Marca registrada ( R©) &reg; &#174;
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 2 1o de setembro de 2014 6 / 23
Caracteres especiais
Exemplos de co´digos
S´ımbolo Co´digo (nome) Co´digo (nu´mero)
Aspas (”) &quot; &#34;
Travessa˜o (–) &mdash; &#8212;
Colchete esquerdo ([) &lbrack; &#91;
Colchete direito (]) &rbrack; &#93;
Chave esquerda ({) &lbrace; &#123;
Chave direita (}) &rbrace; &#125;
Mais co´digos podem ser encontrados em
http://www.w3schools.com/html/html_entities.asp
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 2 1o de setembro de 2014 7 / 23
As tags <div> e <span>
A tag <div>
A tag <div> e´ um elemento em n´ıvel de bloco que pode ser usada
como um container para agrupar outros elementos em HTML
Na˜o tem significado especial, com excec¸a˜o de que o navegador
quebrara´ uma linha antes e depois dessa tag
Junto com CSS a tag <div> pode ser usada para atribuir estilo aos
blocos
Pode ser usado tambe´m para definir o layout da pa´gina
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 2 1o de setembro de 2014 8 / 23
As tags <div> e <span>
A tag <span>
De modo similar, a tag <span> pode ser usada como um container
para texto dentro de um bloco ou para´grafo
Na˜o tem nenhum significado especial
Em conjunto com CSS pode ser utilizada para atribuir estilo a partes
do texto
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 2 1o de setembro de 2014 9 / 23
As tags <div> e <span>
Os atributos id e class
Os atributos id e class podem ser atribu´ıdos a qualquer elemento
HTML
O atributo id estabelece um identificador u´nico para um elemento
O identificador de um elemento pode ser utilizado para estilizar esse
elemento com CSS
Pode ser utilizado tambe´m para estabelecer ligac¸o˜es (links) dentro da
pro´pria pa´gina
O atributo class especifica uma classe para um elemento
A classe de um elemento serve de refereˆncia para as folhas de estilo
(CSS)
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 2 1o de setembro de 2014 10 / 23
Imagens
Imagens em HTML
Em HTML, imagens sa˜o definidas pela tag <img/>
Essa tag na˜o possui conteu´do (somente atributos) e na˜o precisa de
uma tag de fechamento
O atributo src estabelece a localizac¸a˜o da imagem
Exemplos:
<img scr=“book.jpg”/>
<img scr=“http://www.ioa.ucla.edu/publications/browse-
books/cotsen-advanced-seminar/Book.jpg”/>
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 2 1o de setembro de 2014 11 / 23
Imagens
Atributos de imagens
O atributo alt especifica um texto alternativo para a imagem
O texto do atributo alt sera´ exibido caso a imagem na˜o possa ser
exibida (por exemplo, por causa de uma conexa˜o lenta, um erro no
atributo src, ou se o usua´rio usa um leitor de tela)
Exemplo:
<img scr=“book.jpg” alt=“Um livro”/>
Atenc¸a˜o ao utilizar imagens: cada imagem em uma pa´gina
corresponde a uma requisic¸a˜o feita ao servidor
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 2 1o de setembro de 2014 12 / 23
Imagens
Atributos de imagens
O tamanho com que a imagem e´ exibida e´ estabelecido por dois
atributos:
width: estabelece a largura da imagem
height: estabelece a altura da imagem
Os valores de width e height podem ser especificados em pixels
(tamanho absoluto que a imagem sera´ exibida) ou em porcentagem
(porcentagem da tela ocupada pela imagem)
Exemplos:
<img scr=“book.jpg” alt=“Um livro” width=“200” height=“100”/>
<img scr=“book.jpg” alt=“Um livro” width=“50%”
height=“50%”/>
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 2 1o de setembro de 2014 13 / 23
Links
Links em HTML
Links permitem navegar de forma na˜o linear na Web (hipertexto,
hiperm´ıdia)
Possibilita a criac¸a˜o de Web Sites
Pode estabelecer ligac¸a˜o com outras pa´ginas ou entre partes da
pro´pria pa´gina
Links sa˜o inseridos com a tag <a>
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 2 1o de setembro de 2014 14 / 23
Links
Criando links
O atributo href e´ utilizado para definir o destino do link
O texto que fica entre as tags de abertura <a> e fechamento </a>
sera´ o texto do link
Exemplo:
<a href=“http://www.ufjf.br/portal/”>
Acesse o site da UFJF
</a>
<br/>
<a href=“info.html”>
Para mais informac¸o˜es
</a>
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 2 1o de setembro de 2014 15 / 23
Links
O atributo target
O atributo target estabelece onde o link abrira´
Por default os links abrem na mesma janela ou aba em que esta˜o
definidos
Para que o link seja aberto em uma nova janela ou aba do navegador
utilizamos o valor “ blank” para o atributo target
Exemplo:
<a href=“http://www.ufjf.br/portal/” target=“ blank”>
Acesse o site da UFJF
</a>
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 2 1o de setembro de 2014 16 / 23
Links
Links internos
Pode-se estabelecer ligac¸o˜es para partes da pro´pria pa´gina atual
Para isso deve-se atribuir um id para o elemento que se deseja
referenciar
O elemento e´ referenciado pelo atributo href da tag <a>
utilizando-se o valor “#id tag”, onde id tag e´ o valor do atributo id
do elemento que se deseja referenciar
Exemplo:
Defina um para´grafo com o id paragrafo1
<p id=“paragrafo1”>
Texto do para´grafo...
</p>
Pode-se estabelecer um link para o para´grafo da seguinte forma:
<a href=“#paragrafo1”>
Va´ para o Para´grafo 1
</a>
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 2 1o de setembro de 2014 17 / 23
Links
Imagens como links
Pode-se tambe´m utilizar imagens como links
Para isso, basta colocar uma imagem (<img/>) entre as tags <a> e
</a>
Exemplo:
<a href=“http://www.ufjf.br/portal/”target=“ blank”>
<img src=“logo ufjf.jpg” alt=“Acesse o site da UFJF”
width=“100” height=“50”/>
</a>
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 2 1o de setembro de 2014 18 / 23
Exerc´ıcios
Exerc´ıcio
Crie uma pa´gina Web da seguinte forma:
1 O t´ıtulo (title) da sua pa´gina deve ser UFJF
2 Adicione um cabec¸alho de n´ıvel 1 (h1) com o texto: Universidade
Federal de Juiz de Fora
3 Adicione um para´grafo da seguinte forma:
A Universidade Federal de Juiz de Fora (UFJF) e´ uma instituic¸a˜o
brasileira de ensino superior situada na Zona da Mata de Minas
Gerais, na cidade de Juiz de Fora. A UFJF foi criada em 1970 1960
por ato do enta˜o Presidente Juscelino Kubitschek, a fim de tornar-se
um po´lo acadeˆmico e cultural de uma regia˜o de 2,5 milho˜es de
habitantes.
4 Adicione uma imagem da UFJF
5 Adicione um para´grafo com o texto:
Entre os institutos e departamentos que compo˜em a UFJF, podemos
citar:
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 2 1o de setembro de 2014 19 / 23
Exerc´ıcios
Exerc´ıcio
6 Adicione a seguinte lista (atenc¸a˜o aos links dos departamentos. Eles
devem abrir em outra janela):
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 2 1o de setembro de 2014 20 / 23
Exerc´ıcios
Exerc´ıcio
7 Adicione o seguinte para´grafo:
Neste semestre, o Departamento de Cieˆncia da Computac¸a˜o esta´
oferecendo a disciplina DCC121 — Laborato´rio de Programac¸a˜o Web.
O ”gabarito”do primeiro exerc´ıcio da disciplina pode ser visto
<aqui>.
8 O <aqui> do pa´ragrafo anterior deve ser um link para o seu
documento HTML da u´ltima aula (abra o link na mesma janela)
9 Adicione uma linha horizontal
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 2 1o de setembro de 2014 21 / 23
Exerc´ıcios
Exerc´ıcio
10 Adicione um cabec¸alho de n´ıvel 3 (h3) com o texto: Nota:
O [1] da lista do item 6 deve ser um link para esse cabec¸alho
11 Adicione o seguinte para´grafo:
[1] Clique na imagem abaixo para acessar o site do Instituto de
Cieˆncias Exatas:
12 Adicione uma imagem como link para o site do ICE
O link deve abrir em outra janela
Sua imagem deve aparecer no navegador com largura de 200 e altura
de 150 pixels
Caso a imagem na˜o possa ser carregada o navegador deve exibir o
texto: ICE
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 2 1o de setembro de 2014 22 / 23
Exerc´ıcios
Instruc¸o˜es para o envio dos exerc´ıcios
Crie um arquivo compactado (.zip, .rar ou .7z) contendo todos os
arquivos dos exerc´ıcios
Nomeie seu arquivo da seguinte forma:
DCC121 Tarefa2 NumeroDeMatricula NomeSobrenome.zip
Exemplo: DCC121 Tarefa2 200822017 LuizMaciel.zip
Envie para o email do professor (luiz.maurilio@ice.ufjf.br) com o
seguinte assunto: DCC121 Tarefa 2
Prazo para envio: ate´ as 23:59 de 07/09/2014 (domingo)
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 2 1o de setembro de 2014 23 / 23
	Caracteres especiais
	As tags <div> e <span>
	Imagens
	Links
	Exercícios