A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Escola de Engenharia de Piracicaba Sistemas de Apoio a Decisão Aula 3 – Introdução a HTML Wladimir da Costa.

Apresentações semelhantes


Apresentação em tema: "Escola de Engenharia de Piracicaba Sistemas de Apoio a Decisão Aula 3 – Introdução a HTML Wladimir da Costa."— Transcrição da apresentação:

1 Escola de Engenharia de Piracicaba Sistemas de Apoio a Decisão Aula 3 – Introdução a HTML Wladimir da Costa

2 FUNDAÇÃO MUNICIPAL DE ENSINO ESCOLA DE ENGENHARIA DE PIRACICABA Introdução a HTML HTML (HyperText Markup Language) – é uma Linguagem de Formatação/Marcação de Hipertexto (texto, áudio, som, etc.); Todo documento HTML apresenta elementos entre parênteses angulares ( ); Esses elementos são as etiquetas (tags) de HTML, que são os comandos de formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento, representada com uma “barra” ( / ):...

3 FUNDAÇÃO MUNICIPAL DE ENSINO ESCOLA DE ENGENHARIA DE PIRACICABA Introdução a HTML As etiquetas são necessária para definir a formatação de uma porção de texto, e assim marcamos onde começa e onde termina o texto com a formatação especificada; Obs.: Sempre a primeira página de uma Home Page deve receber o nome Index.htm ou Index.html (Microsoft). Esta página é que irá acionar as outras páginas de sua Home Page.

4 FUNDAÇÃO MUNICIPAL DE ENSINO ESCOLA DE ENGENHARIA DE PIRACICABA Introdução a HTML A estrutura básica de uma página HTML apresenta os seguintes componentes: Titulo do Documento texto, imagem, links, etc... Observe as tags, fazendo demarcação

5 FUNDAÇÃO MUNICIPAL DE ENSINO ESCOLA DE ENGENHARIA DE PIRACICABA Introdução a HTML CONCEITO DOS TAGS USADOS NESTE EXERCÍCIO TAG O QUE FAZ Marca o início e o fim do documento HTML. Com ele você inicia e finaliza a construção da página Web. Marca o início e do fim do cabeçalho, ou seja, a área onde serão descritos cabeçalhos e o título da página Marca o início e o fim do título. O título da página aparecerá na barra superior do browser Marca o início e o fim do corpo da página

6 FUNDAÇÃO MUNICIPAL DE ENSINO ESCOLA DE ENGENHARIA DE PIRACICABA Introdução a HTML Vamos aprender mais um pouco? TAG O QUE FAZ Marca um título, onde se pode determinar o tamanho da letra (n) do título. O n representa um valor que pode ser de 1 a 5, o tamanho muda de forma decrescente, ou seja, o número 1 é o maior tamanho do título. Insere uma linha horizontal Marca um parágrafo e acrescenta uma linha em branco. Insere uma quebra de linha Descrimina um comentário no programa Centraliza textos e imagens Cria paragrafo com margem na 1 linha Deixa uma frase “rodando” align=center align=right align=left align=justify

7 FUNDAÇÃO MUNICIPAL DE ENSINO ESCOLA DE ENGENHARIA DE PIRACICABA Introdução a HTML EXERCÍCIO 1 Vamos praticar? 1- Abra o bloco de notas 2- Digite a sequência abaixo: Minha Home Page na EEP Aqui neste espaço desenvolverei minha Home Page! Aguarde!! 3- Salve o arquivo com o nome Index.html em Meus documentos e acesse via browser.

8 FUNDAÇÃO MUNICIPAL DE ENSINO ESCOLA DE ENGENHARIA DE PIRACICABA Introdução a HTML Exercício 2 Melhorando Minha Home Page Este é o título Principal - tamanho1 Este é o título Secundário, porém alinhado ao CENTRO - tamanho 2 Estou adorando criar páginas – tamanho 3 Este é o 1º Primeiro Paragráfo esta é 2ª Linha do 1º Paragráfo usando a quebra de linha o comando br Com este recurso inicio um novo paragráfo Criando um novo parágrafo com MARGEM Fim de Página !!!

9 FUNDAÇÃO MUNICIPAL DE ENSINO ESCOLA DE ENGENHARIA DE PIRACICABA Introdução a HTML Comando de cores: Para alterar a cor de letra do texto TAG O QUE FAZ Altera a cor do texto da letra. Altera o tipo da letra Altera o tamanho da letra. Onde n é o tamanho Frase

10 FUNDAÇÃO MUNICIPAL DE ENSINO ESCOLA DE ENGENHARIA DE PIRACICABA Introdução a HTML Continuamos aprendendo um pouco mais? Definindo formatação de cor de fundo e letra para a página Você deve ter observado que em alguns sites, as cores de fundo e tipos de letras da página são bem diversificados, ou seja, há uma alteração de cores entre o fundo e a cor e o tamanho da letra. Todas essas configurações são feitas dentro do tag.

11 FUNDAÇÃO MUNICIPAL DE ENSINO ESCOLA DE ENGENHARIA DE PIRACICABA Introdução a HTML - Tabela de Cores

12 FUNDAÇÃO MUNICIPAL DE ENSINO ESCOLA DE ENGENHARIA DE PIRACICABA Introdução a HTML Comando de cores: TAGO QUE FAZ Marca o início e o fim do corpo da página Atributos Bgcolor = define a cor do fundo da página Text = define a cor do texto padrão da página Background = permite inserir uma imagem como fundo da página – JPG ou GIF Bgproperties = fixa a imagem no fundo da página quando a página é rolada, criando um efeito de marca d’água.

13 FUNDAÇÃO MUNICIPAL DE ENSINO ESCOLA DE ENGENHARIA DE PIRACICABA Introdução a HTML - Alterando cor de fundo e letra Exercício 3: Página com Fundo Colorido e Texto BRANCO Definindo cor de fundo azul e TEXTO em branco Observe que estamos iniciando um parágrafo e tudo o que estamos escrevendo está sendo exibido em branco. Para alterar a cor e tamanho da letra utilize os comandos face e size, sendo esse praticado no exercício 4.

14 FUNDAÇÃO MUNICIPAL DE ENSINO ESCOLA DE ENGENHARIA DE PIRACICABA Introdução a HTML - Alterando formato da letra Exercício 4: Alterando cor e tamanho da Letra Definindo cor, tamanho e tipo de letra Observe que estamos iniciando um parágrafo e tudo o que estamos escrevendo ainda está sendo exibido em branco. Neste novo parágrafo estamos trabalhando com o tipo de letra arial, tamanho 10 e cor vermelha.

15 FUNDAÇÃO MUNICIPAL DE ENSINO ESCOLA DE ENGENHARIA DE PIRACICABA Criando links: Comando: Frase que aparece na página Onde: tag que marca o início e o fim do link href= atributo que especifica o nome da referência “URL” é o nome do local para onde desejar linkar (ir) Exemplo: Exemplo1 Conheça a Escola de Engenharia de Piracicaba - EEP

16 FUNDAÇÃO MUNICIPAL DE ENSINO ESCOLA DE ENGENHARIA DE PIRACICABA Exercício 5 Realizando links Realizando links a páginas e endereços Acesse o Exercício 4 Visite o site da EEP

17 FUNDAÇÃO MUNICIPAL DE ENSINO ESCOLA DE ENGENHARIA DE PIRACICABA Comando para inserir imagem O texto está no centro da imagem FUNDAÇÃO MUNICIPAL DE ENSINO ESCOLA DE ENGENHARIA DE PIRACICABA

18 FUNDAÇÃO MUNICIPAL DE ENSINO ESCOLA DE ENGENHARIA DE PIRACICABA Introdução a HTML - Colocando Figura na Página Exercício 6 Trabalhando com Imagens O texto está no topo da imagem O texto está no centro da imagem O texto está no rodapé da imagem

19 Exercício Construa pelo meno três páginas, sendo que nestas páginas deve ter: 1- Títulos de Browser informando o que cada página aborda; 2- Títulos em cada página informando o assunto que está se referindo, e abaixo desse colocar sempre uma linha horizontal para posterior digitar o texto da página ; 3- Uma das página deve ter fundo colorido diferente da cor do texto aplicada na mesma; 4- Uma das página deve ter uma imagem como fundo; 6-Trabalhar com links entre as páginas, sempre a página chamada deve ter um link para retornar a página principal, e links para endereços da Web; 7- Trabalhar em uma página com a figura Aluno.jpg e textos. Bom trabalho!


Carregar ppt "Escola de Engenharia de Piracicaba Sistemas de Apoio a Decisão Aula 3 – Introdução a HTML Wladimir da Costa."

Apresentações semelhantes


Anúncios Google