Aplicativos para Internet

Apresentação em tema: "Aplicativos para Internet"— Transcrição da apresentação:

1 Aplicativos para Internet
Prof. Wolley W. Silva

2 Conteúdo Estrutura de página HTML Tags HTML (parte 1)
Padrões para criação de código Tags HTML (parte 1) Cabeçalho e Sessões <h1>, <h2>, <h3>, <h4>, <h5>, <h6> Listas Ordenadas e não Ordenadas Links

3 Estrutura de página HTML
Estrutura básica Início Configurações e Recursos utilizadas pela página Ex. <meta charset=“UTF-8”> JavaScript, CSS Conteúdo que deve ser exibido pelo browser Ex. Texto, Imagem Links etc... Fim

4 Estrutura de página HTML Padrões de criação
Para criarmos nossos documentos html, iremos seguir as observações abaixo: Devemos criar os documentos bem formados, boa endentação Todas as tags devem ser escritas com letras minúsculas Uso de tags de fechamento é obrigatória Elementos vazios (br, hr, ...) devem ser fechados com a / Atributos devem ser escritos também com letras minúsculas Os valores dos atributos devem ser escritos dentro de aspas (“....”) Todos os atributos devem ter nome e valor associados

5 HTML, XHTML, HTML 5 HTML (Hypertext Markup Language) - Linguagem de Marcação de Hipertexto XHTML (eXtensible Hypertext Markup Language) Combina tags de marcação com regras XML Exibição de páginas web em diferentes dispositivos (televisão, celular, tablets...) HTML 5: Sua especificação começou em 2008 e ainda está em desenvolvimento. Reduzir a necessidade de plugins externos (como o Flash) HTML5 deve ser independente do dispositivo O processo de desenvolvimento deve ser visível para o público

6 Tags HTML (parte 1) Cabeçalho e Sessões da Página Parágrafo • Negrito
<H1>, <H2>, <H2>, <H3>, <H4>, <H5>, <H6> <hr> quebra temática de linha Parágrafo <p>Texto com parágrafo</p> • Negrito <b>em negrito</b> • Itálico <i>em itálico</i> • Quebra de linha Linha 1 <br />

7 Introdução HTML Cabeçalho com H1, H2, H3, H4, H5, H6

8 Introdução HTML Texto formatado com as tags <p></p>

9 Listas Ordenadas <ol> <li> item 1</li>
Ordinate list Ordenadas <ol> <li> item 1</li> <li> item 2</li> </ol> Não Ordenadas <ul> </ul> lista Undefined list lista

10 Links - Hiperlinks O recurso de hipertexto permite vincular textos, imagens, sons, etc... O uso e a definição de hipertexto são obtidos por meio das tags <a> e </a> os quais estabelecem os pontos de ancoragem e de ligação: Internos: mesmo site Externos: outros sites Locais: mesma página

11 Links - Hiperlinks São dois lados envolvidos no vínculo de hipertexto com as tags <a> </a>: O lado onde se inicia o ponte de ligação chamado de link O lado de chegada (destino) chamado âncora Usa-se também os parâmetros href name id

12 Links - Hiperlinks Link interno Link externo

13 Links - Hiperlinks Links Locais Ancora de destino

14 Links - Hiperlinks Atributo target
Permite abrir o conteúdo em uma nova janela

15 Exercício Criar uma página para um site de ensino de programação
Utilizar os recurso discutidos até o momento DOCTYPE e charset Tags <h1> <h2>......<h6> <p> <br> Listas <ol> e <ul> Links – internos, externos, locais

16 Exercício Exemplo