Aplicativos para Internet
Prof.ª Erika Miranda
Prof. Wolley W. Silva
Conteúdo
•Estrutura de página HTML
–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
Estrutura de página HTML
•Estrutura básica
Início
Fim
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...
•Para criarmos nossos documentos html, iremosseguir 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
Estrutura de página HTMLPadrões de criação
HTML, XHTML, HTML 5
•HTML (Hypertext Markup Language) - Linguagem deMarcaçã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á emdesenvolvimento.
–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
•Cabeçalho e Sessões da Página
–<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 />
Tags HTML (parte 1)
•Cabeçalho com H1, H2, H3, H4, H5, H6
Introdução HTML
•Texto formatado com as tags <p></p>
Introdução HTML
Listas
•Ordenadas
<ol>
<li> item 1</li>
<li> item 2</li>
</ol>
•Não Ordenadas
<ul>
<li> item 1</li>
<li> item 2</li>
</ul>
Ordinate list
lista
Undefined list
lista
Links - Hiperlinks
•O recurso de hipertexto permite vinculartextos, imagens, sons, etc...
•O uso e a definição de hipertexto são obtidospor meio das tags <a> e </a> os quaisestabelecem os pontos de ancoragem e deligação:
–Internos: mesmo site
–Externos: outros sites
–Locais: mesma página
Links - Hiperlinks
•São dois lados envolvidos no vínculo dehipertexto com as tags <a> </a>:
–O lado onde se inicia o ponte de ligação chamadode link
–O lado de chegada (destino) chamado âncora
–Usa-se também os parâmetros
•href
•name
•id
Links - Hiperlinks
•Link interno
•Link externo
•Links Locais
Links - Hiperlinks
•Ancora de destino
•Atributo target
–Permite abrir o conteúdo em uma nova janela
Links - Hiperlinks
Exercício
•Criar uma página para um site de ensino deprogramaçã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
•Exemplo
Exercício
