Prof. Wolley Profa. Érika Aplicativos para Web Prof. Wolley Profa. Érika

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

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

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

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

HTML, XHTML, HTML 5 Meta tags HTML 4.01

HTML, XHTML, HTML 5 Meta tags XHTML 1.0

HTML, XHTML, HTML 5 Meta Tags HTML 5

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

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

Introdução HTML Texto formatado com as tags <p></p>

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.

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

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 - Hiperlinks Links Locais Ancora de destino

Links - Hiperlinks Atributo target Permite abrir o conteúdo em uma nova janela

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

Exercício Exemplo