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
Introdução ao HTMLIntrodução ao HTML
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
Introdução ao HTMLIntrodução ao HTML
Corpo de uma página HTML:Corpo de uma página HTML:
<html><html>
<head></head><head></head>
<body><body>
</body></body>
</html></html>
Introdução ao HTMLIntrodução ao 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
Introdução ao HTMLIntrodução ao 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>
Introdução ao HTMLIntrodução ao 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.
Introdução ao HTMLIntrodução ao HTML
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
Introdução ao HTMLIntrodução ao HTML
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>
Introdução ao HTMLIntrodução ao HTML
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;
Introdução ao HTMLIntrodução ao HTML
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” />” />
Top Related