Introdução ao HTML 5 e Implementação de Documentos

Tamanho: px

Começar a partir da página:

Download "Introdução ao HTML 5 e Implementação de Documentos"

João Guilherme Carlos Castelo
8 Há anos
Visualizações:

1 Linguagem de Programação para Web Introdução ao HTML 5 e Implementação de Documentos Prof. Mauro Lopes

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

3 Plano de Aula Histórico e Evolução do HTML Documento HTML Cabeçalhos Linhas Horizontais Parágrafos Quebras de Linha Hipertextos 3

4 Evolução do HTML 4

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

lang= en : Define a língua do documento. Usado principalmente por leitores de telas.

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

No entanto existe a possibilidade de usar cabeçalho no corpo de um documento HTML, por meio das tags: <h[valor]> e

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

a tag <h3> é subtítulo da tag <h2> e assim por diante; Vamos

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

significa head row (linha de cabeçalho).

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

as tags <p> e </p>. O texto que será o parágrafo fica entre as tags <p> e </p>.

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

deslocado para a próxima linha; A tag <br /> é uma tag orfã, não possuindo comando

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

para outra página dentro do mesmo site (ligação interna ou relativa) De uma página para outra página de

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

em conjunto com os parâmetros: href (hipertext reference referência de hipertexto) usado para

13 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= > Pode ser o endereço de de alguém (ligação externa) <a href= maito:aluno@quelegal.com.br > 13

pdf > Pode ser uma página do mesmo site (ligação interna) <a href= compras.

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

recursos disponibilizados na Internet (HTTP ou FTP) SERVIDOR: é o nome do computador a ser acessado

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

definir não somente a âncora de origem com o href mas a âncora de destino com o parâmetro name ou

16 Hipertextos Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 16

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

Crie uma página sobre este assunto; Pesquise sobre Folha de Estilo (Quem criou, quais os tipos existentes, como utilizar,

18 Perguntas Página do Professor Mauro: 18

19 Próxima Aula... Recursos Básicos e Especiais do HTML. 19

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

Documentos relacionados

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Objetivo. O objetivo da disciplina é conhecer os princípios da programação de