Upload
raquel-amaro-faro
View
220
Download
3
Embed Size (px)
Citation preview
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