Carregar apresentação
A apresentação está carregando. Por favor, espere
1
Prof. Wolley Profa. Érika
Aplicativos para Web Prof. Wolley Profa. Érika
2
Conteúdo Estrutura de página HTML HTML, XHTML, HTML 5
Padrões para criação de código HTML, XHTML, HTML 5 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
HTML, XHTML, HTML 5 Meta tags HTML 4.01
7
HTML, XHTML, HTML 5 Meta tags XHTML 1.0
8
HTML, XHTML, HTML 5 Meta Tags HTML 5
9
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 />
10
Introdução HTML Cabeçalho com H1, H2, H3, H4, H5, H6
11
Introdução HTML Texto formatado com as tags <p></p>
12
Laboratório 01 Vamos aplicar estes conceitos iniciais desenvolvendo a primeira parte de um currículo, com as seguintes etapas: Criar o arquivo .html Definir os cabeçalhos das sessões do currículo, Ex. Nome, Objetivo, Formação, Experiência, etc.. Preencher as sessões deste currículo com texto em parágrafos.
13
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
14
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
15
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
16
Links - Hiperlinks Link interno Link externo
17
Links - Hiperlinks Links Locais Ancora de destino
18
Links - Hiperlinks Atributo target
Permite abrir o conteúdo em uma nova janela
19
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
20
Exercício Exemplo
Apresentações semelhantes
© 2024 SlidePlayer.com.br Inc.
All rights reserved.