Autoria Web
Propaganda
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA Linguagem de Programação para Web Introdução ao HTML 5 e Implementação de Documentos Prof. Mauro Lopes Linguagem de Programação para WEB – Prof. Mauro Lopes 1 - 20 31 INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA Objetivo • Iremos aqui apresentar a estrutura básica de um documento HTML e iremos também apresentar os elementos básicos usados na construção de um documento. O aluno deverá entender a sintaxe e a utilização dos elementos: – – – – – cabeçalho linhas de separação configuração de parágrafos quebras de Linha hipertextos Linguagem de Programação para WEB – Prof. Mauro Lopes 2 -20 INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA Plano de Aula • • • • • • • Histórico e Evolução do HTML Documento HTML Cabeçalhos Linhas Horizontais Parágrafos Quebras de Linha Hipertextos Linguagem de Programação para WEB – Prof. Mauro Lopes 3 -20 INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA Evolução do HTML Linguagem de Programação para WEB – Prof. Mauro Lopes 4 -20 INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA Documento HTML Doctype: •Usado por validadores e não por navegadores; •Anteriormente definia versão do HTML. E como será quando surgir uma nova versão ? lang=“en”: •Define a língua do documento. Usado principalmente por leitores de telas. meta charset=“utf-8”: •A tag “meta charset” define quais caracteres podem fazer parte de um documento HTML. Linguagem de Programação para WEB – Prof. Mauro Lopes 5 -20 INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA Cabeçalhos • Apresentamos anteriormente a tag <title> e </title> para a definição do título a ser apresentado na barra de título do programa de navegação. • No entanto existe a possibilidade de usar cabeçalho no corpo de um documento HTML, por meio das tags: <h[valor]> e </h[valor]> Em que [valor] é um numérico inteiro de 1 a 6 • Os valores numéricos definem o tamanho da fonte do cabeçalho a ser apresentado no topo do documento; • Sendo: 1 – Fonte maior; 6 – Fonte menor; Linguagem de Programação para WEB – Prof. Mauro Lopes 6 -20 INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA Cabeçalhos • As tags de cabeçalho devem ser usadas dentro das tags <body> e </body>; • A tag <h2> é um subtítulo da tag <h1>, a tag <h3> é subtítulo da tag <h2> e assim por diante; Vamos ver na prática !!! Acompanhe o exemplo exposto pelo Professor. Linguagem de Programação para WEB – Prof. Mauro Lopes 7 -20 INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA Linhas Horizontais • Para definir divisão entre os cabeçalhos e o texto ou até mesmo para separar partes de um texto, utilizamos a tag orfã <hr />; • <hr />, significa head row (linha de cabeçalho). Esta tag não possui parâmetros de ajuste ou formatação; Vamos ver na prática !!! Acompanhe o exemplo exposto pelo Professor. Linguagem de Programação para WEB – Prof. Mauro Lopes 8 -20 INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA Parágrafos • A linguagem de marcação de hipertextos HTML, não reconhece as quebras de linha ocasionadas pela tecla [enter] e nem os espaços em branco (no caso de mais de um); • Para criar um parágrafo, usamos as tags <p> e </p>. O texto que será o parágrafo fica entre as tags <p> e </p>. Estas tags devem ser usadas dentro das tags <body> e </body>; Vamos ver na prática !!! Acompanhe o exemplo exposto pelo Professor. Linguagem de Programação para WEB – Prof. Mauro Lopes 9 -20 INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA Quebras de Linha • A tag de quebra de linha <br /> é usada quando precisamos quebrar uma linha em um parágrafo; • A partir do ponto de definição de <br /> o texto é deslocado para a próxima linha; • A tag <br /> é uma tag orfã, não possuindo comando de finalização; Vamos ver na prática !!! Acompanhe o exemplo exposto pelo Professor. Linguagem de Programação para WEB – Prof. Mauro Lopes 10 -20 INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA Hipertextos • O Hipertexto é o recurso mais importante da linguagem HTML, pois é através deste recurso que se estabelecem as ligações de uma página a outras páginas; • Existem 3 tipos de ligação: – De uma página para outra página dentro do mesmo site (ligação interna ou relativa) – De uma página para outra página de sites na Internet (ligação externa ou absoluta) – Pontos de ligação dentro da mesma página (ligação local) Linguagem de Programação para WEB – Prof. Mauro Lopes 11 -20 INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA Hipertextos • O uso e a definição de hipertexto são obtidos por meio das tags <a> e </a> (âncoras), que definem os pontos de ancoragem e de ligação internos, externos ou locais; • As tags <a> e </a> são usadas em conjunto com os parâmetros: – href (hipertext reference – referência de hipertexto) usado para estabelecer os pontos de ligação internos e externos; – name (nome) para estabelecer os pontos de ligação locais; Linguagem de Programação para WEB – Prof. Mauro Lopes 12 -20 INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA Hipertextos • Criando um ponto de ligação interno ou externo: <a href=“ponto de ligação”> Aonde ponto de ligação: • Pode ser um documento dentro da estrutura do site (ligação interna): <a href=“/doc/contrato.pdf”> • Pode ser uma página do mesmo site (ligação interna) <a href=“compras.html”> • Pode ser um endereço para outro site (ligação externa) <a href=“http://www.google.com”> • Pode ser o endereço de email de alguém (ligação externa) <a href=“maito:[email protected]”> Linguagem de Programação para WEB – Prof. Mauro Lopes 13 -20 INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA Hipertextos • O ponto de ligação do href é um endereço URL, sua estrutura é a seguinte: PROTOCOLO://SERVIDOR/DIRETÓRIO/RECURSO#PONTO Aonde: PROTOCOLO: pode ser um protocolo de acesso a recursos disponibilizados na Internet (HTTP ou FTP) SERVIDOR: é o nome do computador a ser acessado DIRETÓRIO: é o local de destino; RECURSO: é o recurso (página, imagem, video, etc); PONTO: ponto de ligação local a ser acessado; Linguagem de Programação para WEB – Prof. Mauro Lopes 14 -20 INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA Hipertextos • O ponto de ligação local é utilizado dentro do próprio documento. Ele é utilizado quando o documento é extenso e precisamos navegar dentro dele; • Neste caso é preciso definir não somente a âncora de origem com o href mas a âncora de destino com o parâmetro name ou id; • No entanto, na âncora de origem será necessário utilizar o caractere tralha (#) antes do nome do ponto de ligação; Linguagem de Programação para WEB – Prof. Mauro Lopes 15 -20 INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA Hipertextos Vamos ver na prática !!! Acompanhe o exemplo exposto pelo Professor. Linguagem de Programação para WEB – Prof. Mauro Lopes 16 -20 INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA ATIVIDADE • Atividade para a Próxima Aula: – Pesquise sobre os Servidores Web existentes (nome, fabricante, funcionalidades, versões) e explique como este funciona. Crie uma página sobre este assunto; – Pesquise sobre Folha de Estilo (Quem criou, quais os tipos existentes, como utilizar, exemplos). Crie uma página sobre este assunto; – Pesquise sobre o Alfabeto de Caracteres ISO (O que é, para que serve, qual a sua importância em uma página, e como utilizá-lo). Crie uma página sobre este assunto. Linguagem de Programação para WEB – Prof. Mauro Lopes 17 -20 INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA Perguntas Página do Professor Mauro: http://www.dai.ifma.edu.br/~mlcsilva Linguagem de Programação para WEB – Prof. Mauro Lopes 18 -20 INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA Próxima Aula... • Recursos Básicos e Especiais do HTML. Linguagem de Programação para WEB – Prof. Mauro Lopes 19 -20 INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO – IFMA Referências • Materiais avulsos da Internet e o Livro Guia de Orientação e Desenvolvimento de Sites - Html , Xhtml , Css e Javascript / Jscript, Jose Augusto N. G. Manzano, 1ª Edição - Editora Érica, 382 páginas. Linguagem de Programação para WEB – Prof. Mauro Lopes 20 -20
