Tecnologias para Internet - Aula 2

897 visualizações

Publicada em

Slides referentes a 2ª aula da disciplina de Tecnologias para Internet, realizada no dia 05/02/2011

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
897
No SlideShare
0
A partir de incorporações
0
Número de incorporações
19
Ações
Compartilhamentos
0
Downloads
32
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Tecnologias para Internet - Aula 2

  1. 1. Tecnologias para Internet Thyago Maia Tavares de Farias Aula 2
  2. 2. Sumário <ul><li>Formatos de dados para a WEB; </li></ul><ul><li>Introdução ao HTML </li></ul><ul><li>XML </li></ul><ul><li>DTD </li></ul><ul><li>XLST </li></ul>
  3. 3. Formato de dados para a WEB <ul><li>Os três principais formatos em uso para dados na Internet são: </li></ul><ul><ul><li>HTML </li></ul></ul><ul><ul><ul><li>Principal linguagem de apresentação para a Internet </li></ul></ul></ul><ul><ul><li>XML </li></ul></ul><ul><ul><ul><li>Modelo de dados hierárquico e auto-descritivo; </li></ul></ul></ul><ul><ul><li>DTD </li></ul></ul><ul><ul><ul><li>Esquema de padronização para XML </li></ul></ul></ul><ul><ul><li>XSLT </li></ul></ul><ul><ul><ul><li>XML + informações para apresentação </li></ul></ul></ul>
  4. 4. Introdução ao HTML <ul><li>HTML: </li></ul><ul><ul><li>Hypertext Markup Language, ou Linguagem de marcação de hipertexto; </li></ul></ul><ul><ul><li>Trata-se de uma linguagem para formatação de texto (e não uma linguagem de programação!); </li></ul></ul><ul><ul><li>Comandos representados por TAGs: </li></ul></ul><ul><ul><ul><li>Palavra-chave ou termo associado a uma informação; </li></ul></ul></ul><ul><ul><ul><li>Ex.: Imagem, artigo, vídeo, parágrafo, formatação; </li></ul></ul></ul><ul><ul><ul><li>Descreve e permite a classificação da informação; </li></ul></ul></ul>
  5. 5. Introdução ao HTML <ul><li>HTML: </li></ul><ul><ul><li>Ainda Sobre tags em HTML: </li></ul></ul><ul><ul><ul><li>Uma tag HTML é formatada da seguinte maneira: </li></ul></ul></ul><ul><ul><ul><ul><li>< + palavra-chave + > para iniciar o conteúdo da tag; </li></ul></ul></ul></ul><ul><ul><ul><ul><li>< + palavra-chave + > para finalizar o conteúdo da tag; </li></ul></ul></ul></ul><ul><ul><ul><li>Algumas das principais tags são: </li></ul></ul></ul><ul><ul><ul><ul><li><html> </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Marca o início do documento </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li><ul> </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Representa uma lista </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li><li> </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Representa uma entrada na lista </li></ul></ul></ul></ul></ul>
  6. 6. Introdução ao HTML <ul><li>HTML: </li></ul><ul><ul><li>Ainda Sobre tags em HTML: </li></ul></ul><ul><ul><ul><li>Algumas das principais tags são: </li></ul></ul></ul><ul><ul><ul><ul><li><h1>, <h2>, <h3>... </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Texto de cabeçalho (Título, subtítulo...) </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li><b> </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Negrito </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li><table> </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Tabela </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li><tr> e <td> </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Linhas e colunas em uma tabela, respectivamente </li></ul></ul></ul></ul></ul>
  7. 7. Introdução ao HTML <ul><li>Corpo de uma página HTML: </li></ul><ul><ul><li><html> </li></ul></ul><ul><ul><li><head></head> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><ul><li></html> </li></ul></ul>
  8. 8. Introdução ao HTML <ul><li>Corpo de uma página HTML: </li></ul><ul><ul><li><html> Descreve o início da página HTML </li></ul></ul><ul><ul><li><head></head> Descreve o cabeçalho da página </li></ul></ul><ul><ul><li><body> Descreve o conteúdo visível da página </li></ul></ul><ul><ul><li>Aqui será criado o conteúdo </li></ul></ul><ul><ul><li></body> Descreve o fim do conteúdo visível </li></ul></ul><ul><ul><li></html> Descreve o fim da página HTML </li></ul></ul>
  9. 9. Introdução ao HTML <ul><li>Exemplo: Uma página com título no navegador, título na página e conteúdo em negrito: </li></ul><ul><ul><li><html> </li></ul></ul><ul><ul><li><head><title> Exemplo 1 </title></head> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li><h1> O primeiro exemplo do curso </h1> </li></ul></ul><ul><ul><li><b> Texto em negrito </b> </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><ul><li></html> </li></ul></ul>
  10. 10. Introdução ao HTML <ul><li>A página deverá ser salva com as extensões .html ou .htm; </li></ul><ul><li>Recomenda-se que o nome do arquivo HTML não tenha caracteres especiais (ç,&,%), caracteres acentuados ou espaços; </li></ul><ul><li>HTML não é case sensitive. </li></ul><ul><li>Exercício: Execute um editor de texto (ex.: notepad) digite o exemplo anterior, salve o arquivo e veja o resultado. </li></ul>
  11. 11. Introdução ao HTML <ul><li>Exercício: Criar um currículo online </li></ul><ul><ul><li>Crie uma página HTML que exibirá seu currículo em navegadores (clientes). Algumas tags que poderão ser utilizadas: </li></ul></ul><ul><ul><ul><li><h1>,<h2>... (Título, subtítulo...) </li></ul></ul></ul><ul><ul><ul><li><p></p> (Parágrafo) </li></ul></ul></ul><ul><ul><ul><li><b></b> (Negrito) </li></ul></ul></ul><ul><ul><ul><li><br/> (Pular linha – Esta tag não necessita fechamento) </li></ul></ul></ul><ul><ul><ul><li>Pesquise por outras tags na Internet </li></ul></ul></ul>
  12. 12. Introdução ao HTML <ul><li>Links HTML </li></ul><ul><ul><li>São tags que direcionam o acesso para outro conteúdo na Internet, a partir de uma página HTML; </li></ul></ul><ul><ul><li>Formato da tag: </li></ul></ul><ul><ul><ul><li><a href=“localizacao/recurso”> Texto do link </a> </li></ul></ul></ul><ul><ul><ul><li>Onde localizacao/recurso identifica o endereço a ser direcionado pelo link </li></ul></ul></ul><ul><ul><ul><li>Ex.: <a href=“http://www.thyagomaia.com”>Meu site</a> </li></ul></ul></ul>

×