Tópicos Especiais em Informática II: HTML + Css

Tópicos Especiais em Informática II
HTML + CSS
C o n te ú d o
• Introdução
– Histórico
• Web Standards
• Tableless
• HTML, XHTML
• Estrutura básica de um Corpo HTML e XHTML
• W3C
• TAGS
Prof. Luiz Alexandre - 2009

Introdução - Histórico
• No inicio da década de 90, Tim Berners-lee inventou o
HTML (Hypertext Markup Language), com a finalidade
inicial de tornar possível o acesso e a troca de informações
e de documentação de pesquisas, entre cientistas de
diferentes universidades.
• O projeto inicial tornou-se um sucesso jamais imaginado

por Tim Berners-Lee. Ao inventar o HTML ele lançou as
fundações da Internet tal como a conhecemos atualmente.
• Para visualizar o conteúdo de uma pagina em HTML, basta

clicar com o botão direito no browser e exibir o código
fonte.

Web Standards
• Conjunto de normas e padrões para criar e
interpretar conteúdo web.
• Web Standard soma 3 camadas:

– Informação (Apresentação)
– Estilo (CSS – Cascading Style Sheet)
– Comportamento (Javascript).

Tableless
• Tableless é uma forma de desenvolvimento
de sites que não utiliza tabelas para disposição
de conteúdo na página, sendo que tabelas
foram criadas para exibir dados tabulares.
• O conceito de Tableless recomenda utilizar

CSS como apresentação de paginas.

HTML, XHTML
• HTML é uma linguagem que possibilita
apresentar informações (documentação de
pesquisas científicas) na Internet.
• O XHTML(eXtensible Hypertext Markup

Language) é uma nova versão do HTML,
baseada nas regras de marcação XML, tais
regras permite criar páginas mais acessíveis
por qualquer dispositivo, seja móvel ou não.

W3C
• Órgão responsável por desenvolver
padrões para a criação e a interpretação dos
conteúdos para a Web
• Link [http://www.w3.org/]
• Validar paginas [http://validator.w3.org/]

Estrutura de um Corpo HTML
<html>
<head>
<title></title>
</head>
<body>
.
.
.
</body>
</html>

Estrutura de um Corpo XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Exemplo de XHTML Strict</title>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<p>…Conteúdo do XHTML aqui…</p>
</body>
</html>

TAGS - Conceitos
• As tags são rótulos que apresentam ao navegador quais
informações devem ser apresentadas.
• Iniciada por “<” e “>” - < rótulos >

• Encerrada por “</” e “>” - </ rótulos >
• Exemplo:
<p> Tag de parágrafo</p>

TAGS - HTML
• <html> e </html>
– Início e Fim do conteúdo de um documento HTML
• <head> e </head>
– Área reservada para o cabeçalho
• <title> e </title>
– Define o título da página
• <body> e </body>
– Corpo do documento.Onde será inserido o conteúdo da página.

TAGS - Metas
• <Meta>- bastante utilizada pelos programadores para definir quais
serão as palavras utilizadas para procurar nos sites de busca.
• <meta name=“Author ” content=“Luiz Alexandre”> - Define quem

foi o criador da página HTML
• <meta name=“Keywords ” content=“curso,html,css,necti ”> - Define

quais palavras-chaves que poderão ser utilizadas pelos sites de
busca
• <meta http-equiv=“Content-type ” contet=“text/html;charset=iso-
8859-1 ”> - Especifica o conjunto de caracteres utilizados na
página:iso-8859-1

TAGS - Body
• Corpo do documento, poderemos adicionar atributos ao corpo da pagina,
como cor, fonte e outros.
• Exemplo:
<body bgcolor="#FFFF66"> ...</body>
<<body background="imagem.jpg">...</body>

TAGS – Cabeçalhos (Heading)
• Os cabeçalhos servem para iniciar seções dentro de um
documento HTML, distintos do restante do texto,
identificando o início de um tópico.
• Existem seis tamanhos a serem utilizados,

<h1>,<h2>,<h3>,<h4>,<h5>e <h6> e todos eles devem ser
fechados pelas suas tags de fechamento, </h1>,…,</h6>
• Exemplo:
<h1> Meu titulo </h1>

TAGS – Parágrafos
• Os textos em HTML se dividem pelos parágrafos.
• Exemplo
<p> Meu Primeiro Parágrafo </p>
<p> Meu SegundoParágrafo </p>

TAGS – Quebra de linha
• A tag <br /> força a quebra de linha em um corpo de texto
• Exemplo
Esse texto irá sofrer uma quebra de linha aqui <br /> agora estamos
em outra linha.

TAGS – Formatação (Estilos)
• <b>texto </b> - negrito
• <i>texto </i> - itálico
• <em>texto</em> - itálico
• <u>texto</u> - sublinhado
• <s>texto</s> - tachado
• Exemplo
<p>Neste exemplo a palavra <em>Timão</em> ficará em itálico</p>

TAGS – Fonte
• Determina a aparência de um texto, ou seja formatando um
texto.
• Parâmetro size – Determina o tamanho da fonte

• Parâmetro color – Determina a cor da fonte
• Parâmetro face – Determina o tipo de fonte
• Exemplo:
<font size="5" color="#FF0000" face="Arial">Texto Formatado</font>

TAGS – Fonte
• Determina a formatação de um texto.
• Parâmetro size – Determina o tamanho da fonte

• Parâmetro color – Determina a cor da fonte
• Parâmetro face – Determina o tipo de fonte
• Exemplo:
<font size="5" color="#FF0000" face="Arial">Texto Formatado</font>
Dica: a utilização de sequencia de fontes, chama uma segunda fonte

caso o navegador não encontrar a primeira. Exemplo:
<font face="Arial,Helvetica,sans-serif">Texto Formatado</font>

TAGS – Link
• Tags para chamar uma pagina interna ou externa, enviar e-
mail e âncoras.
• Chamar uma página:
<a href=“http://www.google.com.br”>Google</a>
• E-mail:
<a href="mailto: alexandre_fatec@hotmail.com">Envie um email...</a>

TAGS – Link
• Âncoras:
Inicio da página
<a name=“inicio”>Inicio da página</a>
<a href=“#inicio”>Voltar para o inicio</a>

TAGS – Imagem
• Com a tag <img> poderemos inserir facilmente arquivos de
imagem com extensões: gif, jpg, bmp, png...
• Exemplo:
<img src="foto.png" alt="Minha imagem">

<img src="foto.png" alt="Minha imagem" width="89" height="45">
<img src="foto.png" alt="Minha imagem" width="89" height="45" border=“2">

TAGS – Linha Vertical
• Com a tag <hr> poderemos inserir uma linha vertical no corpo
do site.
• Exemplo:
<hr>
Ou
<hr />

TAGS – Tabelas
• Table hoje em dia o desenvolvimento de paginas com tabelas
esta em desuso, sendo substituído por tags “divs”, sendo as
tabelas utilizadas para tabular alguns dados.
<table> - Tag para criação de tabelas

Podemos utilizar atributos para criação de tabelas como exemplo
abaixo:
(width="75%“ border="1" cellspacing="5“)
<tr> - Tag para criação de linhas

<td> - Tag para criação de colunas

TAGS – Tabelas
<table width="75%"border="1" cellspacing="5">
<tr>
<td>textos</td>
<td>tabelas</td>
</tr>
<tr>
<td>figuras</td>
<td>formulários</td>
</tr>
<tr>
<td>figuras</td>
<td>formulários</td>
</tr>
</table>

TAGS – Tabelas
• Table hoje em dia o desenvolvimento de paginas com tabelas
esta em desuso, sendo substituído por tags “divs”, sendo as
tabelas utilizadas para tabular alguns dados.
<table> - Tag para criação de tabelas

Podemos utilizar atributos para criação de tabelas como exemplo
abaixo:
(width="75%“ border="1" cellspacing="5“)
<tr> - Tag para criação de linhas

<td> - Tag para criação de colunas

TAGS – Tabelas
• colspan – Utilizado para mesclar as células (linhas) de uma
tabela.
<tr>
<td width="24%"> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>

TAGS – Tabelas
• rowspan – Utilizado para mesclar as células (Colunas) de uma
tabela.
<tr>
<td width="57%" rowspan="2"> </td>
</tr>
<tr>
</tr>
</table>

Exercício 1
• Utilizando os recursos apresentados nessa aula, abra o bloco de notas e
desenvolva o layout do slide seguinte.
• Escolha uma imagem no Google e defina como fundo da página
• As imagens estão no site.
• Onde estiver azul são links para os respectivos sites, e em contato criar um
link para e-mail.
• Texto do site com 11px de tamanho;
• Use cabeçalhos para os títulos.
• Salve o Documento como pagina1.html

Exercício 2
• Utilizando os recursos apresentados nessa aula, abra o bloco de notas e
desenvolva o layout (com tabela)do slide seguinte .
• As imagens estão no site.
• Utilize cabeçalhos no texto.
• Onde estiver azul são links para os respectivos sites, e em contato criar um link
para e-mail.
• Defina o fundo da página com o hexadecimal: #FBFBBF;
• Largura da tabela: 800px;
• Texto do site com 11px de tamanho;
• Use cabeçalhos para os títulos.
• Salve o Documento como pagina2.html


Tópicos Especiais em Informática II: HTML + Css

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tópicos Especiais em Informática II: HTML + Css

Uploaded by

Copyright:

Available Formats

Tópicos Especiais em Informática II

Prof. Luiz Alexandre - 2009

• O projeto inicial tornou-se um sucesso jamais imaginado

• Para visualizar o conteúdo de uma pagina em HTML, basta

Prof. Luiz Alexandre - 2009

• Web Standard soma 3 camadas:

Prof. Luiz Alexandre - 2009

• O conceito de Tableless recomenda utilizar

Prof. Luiz Alexandre - 2009

• O XHTML(eXtensible Hypertext Markup

Prof. Luiz Alexandre - 2009

Prof. Luiz Alexandre - 2009

Prof. Luiz Alexandre - 2009

Prof. Luiz Alexandre - 2009

• Iniciada por “<” e “>” - < rótulos >

Prof. Luiz Alexandre - 2009

Prof. Luiz Alexandre - 2009

• <meta name=“Author ” content=“Luiz Alexandre”> - Define quem

• <meta name=“Keywords ” content=“curso,html,css,necti ”> - Define

Prof. Luiz Alexandre - 2009

<body bgcolor="#FFFF66"> ...</body>

Prof. Luiz Alexandre - 2009

• Existem seis tamanhos a serem utilizados,

Prof. Luiz Alexandre - 2009

Prof. Luiz Alexandre - 2009

Prof. Luiz Alexandre - 2009

Prof. Luiz Alexandre - 2009

• Parâmetro size – Determina o tamanho da fonte

<font size="5" color="#FF0000" face="Arial">Texto Formatado</font>

Prof. Luiz Alexandre - 2009

• Parâmetro size – Determina o tamanho da fonte

<font size="5" color="#FF0000" face="Arial">Texto Formatado</font>

Dica: a utilização de sequencia de fontes, chama uma segunda fonte

<font face="Arial,Helvetica,sans-serif">Texto Formatado</font>

• Chamar uma página:

<a href="mailto: alexandre_fatec@hotmail.com">Envie um email...</a>

Prof. Luiz Alexandre - 2009

<a name=“inicio”>Inicio da página</a>

<a href=“#inicio”>Voltar para o inicio</a>

Prof. Luiz Alexandre - 2009

<img src="foto.png" alt="Minha imagem">

Prof. Luiz Alexandre - 2009

Prof. Luiz Alexandre - 2009

<table> - Tag para criação de tabelas

<tr> - Tag para criação de linhas

Prof. Luiz Alexandre - 2009

Prof. Luiz Alexandre - 2009

<table> - Tag para criação de tabelas

<tr> - Tag para criação de linhas

Prof. Luiz Alexandre - 2009

Prof. Luiz Alexandre - 2009

Prof. Luiz Alexandre - 2009

• Escolha uma imagem no Google e defina como fundo da página

• As imagens estão no site.

• Salve o Documento como pagina1.html

• As imagens estão no site.

• Utilize cabeçalhos no texto.

• Salve o Documento como pagina2.html

You might also like