Aplicativos para Web Prof. Wolley Profa. Érika. Conteúdo Estrutura de página HTML – Padrões...

Aplicativos para Web

Prof. WolleyProfa. Érika

Conteúdo

• Estrutura de página HTML– 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

Estrutura de página HTML• Estrutura básica

Início

Fim

Configurações e Recursos utilizadas pela páginaEx. <meta charset=“UTF-8”>

JavaScript,CSS

Conteúdo que deve ser exibido pelo browserEx. Texto,

ImagemLinksetc...

• 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 HTMLPadrõ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

• Meta tags HTML 4.01

HTML, XHTML, HTML 5

• Meta tags XHTML 1.0

HTML, XHTML, HTML 5

• Meta Tags HTML 5

HTML, XHTML, HTML 5

• 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 linhaLinha 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

• 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.

Laboratório 01

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 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

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

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

• <h1> <h2>......<h6>• <p>• <br>• Listas <ol> e <ul>• Links – internos, externos, locais

• Exemplo

Exercício