Tecnologias para Internet - Aula 2

Tecnologias para Tecnologias para InternetInternet

Thyago Maia Tavares de Thyago Maia Tavares de FariasFarias

Aula 2Aula 2

SumárioSumário

Formatos de dados para a WEB;Formatos de dados para a WEB; Introdução ao HTMLIntrodução ao HTML XMLXML DTDDTD XLSTXLST

Formato de dados para a Formato de dados para a WEBWEB

Os três principais formatos em uso para Os três principais formatos em uso para dados na Internet são:dados na Internet são:

HTMLHTML Principal linguagem de apresentação para a Principal linguagem de apresentação para a

InternetInternet XMLXML

Modelo de dados hierárquico e auto-descritivo;Modelo de dados hierárquico e auto-descritivo; DTDDTD

Esquema de padronização para XMLEsquema de padronização para XML

Introdução ao HTMLIntrodução ao HTML

HTML:HTML: Hypertext Markup Language, ou Linguagem Hypertext Markup Language, ou Linguagem

de marcação de hipertexto;de marcação de hipertexto; Trata-se de uma linguagem para formatação Trata-se de uma linguagem para formatação

de texto (e não uma linguagem de de texto (e não uma linguagem de programação!);programação!);

Comandos representados por TAGs:Comandos representados por TAGs: Palavra-chave ou termo associado a uma Palavra-chave ou termo associado a uma

informação;informação; Ex.: Imagem, artigo, vídeo, parágrafo, formatação;Ex.: Imagem, artigo, vídeo, parágrafo, formatação; Descreve e permite a classificação da informação;Descreve e permite a classificação da informação;

Introdução ao HTMLIntrodução ao HTML HTML:HTML:

Ainda Sobre tags em HTML:Ainda Sobre tags em HTML: Uma tag HTML é formatada da seguinte Uma tag HTML é formatada da seguinte

maneira:maneira: < + palavra-chave + > para iniciar o conteúdo da tag;< + palavra-chave + > para iniciar o conteúdo da tag; <\ + palavra-chave + > para finalizar o conteúdo da <\ + palavra-chave + > para finalizar o conteúdo da

tag;tag; Algumas das principais tags são:Algumas das principais tags são:

<html><html> Marca o início do documentoMarca o início do documento

<ul><ul> Representa uma listaRepresenta uma lista

<li><li> Representa uma entrada na lista Representa uma entrada na lista


HTML:HTML: Ainda Sobre tags em HTML:Ainda Sobre tags em HTML:

Algumas das principais tags são:Algumas das principais tags são: <h1>, <h2>, <h3>...<h1>, <h2>, <h3>...

Texto de cabeçalho (Título, subtítulo...)Texto de cabeçalho (Título, subtítulo...) <b><b>

NegritoNegrito <table><table>

TabelaTabela <tr> e <td><tr> e <td>

Linhas e colunas em uma tabela, Linhas e colunas em uma tabela, respectivamente respectivamente


Corpo de uma página HTML:Corpo de uma página HTML:

<html><html>

<head></head><head></head>

<body><body>

</body></body>

</html></html>


Corpo de uma página HTML:Corpo de uma página HTML:

<html> <html> Descreve o início da página HTMLDescreve o início da página HTML

<head></head> <head></head> Descreve o cabeçalho da Descreve o cabeçalho da páginapágina

<body> <body> Descreve o conteúdo visível da Descreve o conteúdo visível da páginapágina

Aqui será criado o conteúdoAqui será criado o conteúdo

</body> </body> Descreve o fim do conteúdo visívelDescreve o fim do conteúdo visível

</html> </html> Descreve o fim da página HTMLDescreve o fim da página HTML


Exemplo: Uma página com título no Exemplo: Uma página com título no navegador, título na página e navegador, título na página e conteúdo em negrito:conteúdo em negrito:<html><html><head><title><head><title>Exemplo 1Exemplo 1</title></head></title></head><body><body><h1><h1>O primeiro exemplo do cursoO primeiro exemplo do curso</h1></h1><b><b>Texto em negritoTexto em negrito</b></b></body></body></html></html>


A página deverá ser salva com as A página deverá ser salva com as extensões .html ou .htm;extensões .html ou .htm;

Recomenda-se que o nome do arquivo Recomenda-se que o nome do arquivo HTML não tenha caracteres especiais HTML não tenha caracteres especiais (ç,&,%), caracteres acentuados ou (ç,&,%), caracteres acentuados ou espaços;espaços;

HTML não é case sensitive.HTML não é case sensitive. Exercício: Execute um editor de texto Exercício: Execute um editor de texto

(ex.: notepad) digite o exemplo anterior, (ex.: notepad) digite o exemplo anterior, salve o arquivo e veja o resultado.salve o arquivo e veja o resultado.


Exercício: Criar um currículo onlineExercício: Criar um currículo online Crie uma página HTML que exibirá seu Crie uma página HTML que exibirá seu

currículo em navegadores (clientes). currículo em navegadores (clientes). Algumas tags que poderão ser utilizadas:Algumas tags que poderão ser utilizadas: <h1>,<h2>... (Título, subtítulo...)<h1>,<h2>... (Título, subtítulo...) <p></p> (Parágrafo)<p></p> (Parágrafo) <b></b> (Negrito)<b></b> (Negrito) <br/> (Pular linha – Esta tag não necessita <br/> (Pular linha – Esta tag não necessita

fechamento)fechamento) Pesquise por outras tags na InternetPesquise por outras tags na Internet


Links HTMLLinks HTML São tags que direcionam o acesso para outro São tags que direcionam o acesso para outro

conteúdo na Internet, a partir de uma página conteúdo na Internet, a partir de uma página HTML;HTML;

Formato da tag:Formato da tag: <a href=“localizacao/recurso”><a href=“localizacao/recurso”>Texto do Texto do

linklink</a></a> Onde localizacao/recurso identifica o endereço a Onde localizacao/recurso identifica o endereço a

ser direcionado pelo linkser direcionado pelo link Ex.: <a href=“http://www.thyagomaia.com”>Meu Ex.: <a href=“http://www.thyagomaia.com”>Meu

site</a>site</a>

Introdução ao HTMLIntrodução ao HTML Exercício: Criar uma página de acesso Exercício: Criar uma página de acesso

ao currículo criado anteriormenteao currículo criado anteriormente Crie uma página HTML que conterá um Crie uma página HTML que conterá um

título de apresentação do tipo (<h1>) título de apresentação do tipo (<h1>) “Acesse meu currículo”;“Acesse meu currículo”;

Abaixo do título (<br/>) insira um link que, Abaixo do título (<br/>) insira um link que, ao ser clicado, fará com que o navegador ao ser clicado, fará com que o navegador acesse o conteúdo indicado. Ex.: Caso tenha acesse o conteúdo indicado. Ex.: Caso tenha sido criada anteriormente a página sido criada anteriormente a página curriculo.html, o link será:curriculo.html, o link será:

<a href=“curriculo.html”>Clique aqui e visite-<a href=“curriculo.html”>Clique aqui e visite-o</a>o</a>


Imagens HTMLImagens HTML Utilizamos uma tag específica para o Utilizamos uma tag específica para o

carregamento de imagens;carregamento de imagens; Tais tags possuem atributos para formatar Tais tags possuem atributos para formatar

a imagem a ser exibida no navegador;a imagem a ser exibida no navegador; Formato da tag:Formato da tag:

<img src=“imagem” width=“largura” <img src=“imagem” width=“largura” height=“altura” />height=“altura” />

Em imagem será digitada a Em imagem será digitada a localização+arquivo de imagem;localização+arquivo de imagem;

Width e Height receberão valores numéricos;Width e Height receberão valores numéricos;


Exercício: Ilustrando a página criada Exercício: Ilustrando a página criada no exercício anteriorno exercício anterior Utilizando a tag img do HTML e algum Utilizando a tag img do HTML e algum

arquivo de imagem localizado em seu arquivo de imagem localizado em seu computador (procure deixar a imagem na computador (procure deixar a imagem na mesma pasta onde você salvou o arquivo mesma pasta onde você salvou o arquivo HTML do exemplo anterior), insira uma HTML do exemplo anterior), insira uma imagem no seu web site, de preferência imagem no seu web site, de preferência abaixo do título e acima do link;abaixo do título e acima do link;

Exemplo: <img src=“Exemplo: <img src=“areia.jpgareia.jpg” ” widht=“widht=“300300” height=“” height=“100100” />” />

Tecnologias para Internet - Aula 2

Technology

Transcript of Tecnologias para Internet - Aula 2