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,,,,, – 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. JavaScript, CSS Conteúdo que deve ser exibido pelo browser Ex. Texto, Imagem Links etc...

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 Estrutura de página HTML Padrões de criação

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

Cabeçalho e Sessões da Página –,,,,,, – quebra temática de linha Parágrafo – Texto com parágrafo Negrito em negrito Itálico em itálico Quebra de linha Linha 1 Tags HTML (parte 1)

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

Texto formatado com as tags Introdução HTML

Listas Ordenadas item 1 item 2 Não Ordenadas item 1 item 2 Ordinate list lista Undefined list lista

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 e os quais estabelecem os pontos de ancoragem e de ligação: – Internos: mesmo site – Externos: outros sites – Locais: mesma página

Links - Hiperlinks São dois lados envolvidos no vínculo de hipertexto com as tags : – 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

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 de programação Utilizar os recurso discutidos até o momento – DOCTYPE e charset – Tags Listas e Links – internos, externos, locais

Exemplo Exercício