A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Prof. Wolley Profa. Érika

Apresentações semelhantes


Apresentação em tema: "Prof. Wolley Profa. Érika"— Transcrição da apresentação:

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


Carregar ppt "Prof. Wolley Profa. Érika"

Apresentações semelhantes


Anúncios Google