Escola de Engenharia de Piracicaba Sistemas de Apoio a Decisão

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

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 (< e >); 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” ( / ): <etiqueta>...< / etiqueta>

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.

Introdução a HTML A estrutura básica de uma página HTML apresenta os seguintes componentes: <HTML> <HEAD> <TITLE> Titulo do Documento </TITLE> </HEAD> <BODY> texto, imagem, links, etc... </ BODY> </HTML> Observe as tags, fazendo demarcação

Introdução a HTML CONCEITO DOS TAGS USADOS NESTE EXERCÍCIO TAG O QUE FAZ <html> Marca o início e o fim do documento HTML. Com ele você inicia e finaliza a construção da página Web. <head> 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 <title> Marca o início e o fim do título. O título da página aparecerá na barra superior do browser <body> Marca o início e o fim do corpo da página

Introdução a HTML Vamos aprender mais um pouco? TAG O QUE FAZ <hn> 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. <hr> Insere uma linha horizontal <p> Marca um parágrafo e acrescenta uma linha em branco. <br> Insere uma quebra de linha <! > Descrimina um comentário no programa <center> Centraliza textos e imagens <blockquote> Cria paragrafo com margem na 1 linha <marquee> Deixa uma frase “rodando” align=center align=right align=left align=justify

Introdução a HTML EXERCÍCIO 1 Vamos praticar? 1- Abra o bloco de notas 2- Digite a sequência abaixo: <html> <head><title>Minha Home Page na EEP</title></head> <body> Aqui neste espaço desenvolverei minha Home Page! Aguarde!! </body> </html> 3- Salve o arquivo com o nome Index.html em Meus documentos e acesse via browser.

Introdução a HTML Exercício 2 <!Início do Documento HTML> <html> <head><title>Melhorando Minha Home Page</title> </head> <! Início do Corpo da Página> <body> <! O comando h inicia um cabeçalho > <h1>Este é o título Principal - tamanho1</h1> <h2><center>Este é o título Secundário, porém alinhado ao CENTRO - tamanho 2</center></h2> <h5>Estou adorando criar páginas – tamanho 3</h5> <! O próximo comando insere uma linha horizontal> <hr> <! O comando p indica inicio de parágrafo e br indica a quebra de uma linha de um Parágrafo> <p>Este é o 1º Primeiro Paragráfo <br> esta é 2ª Linha do 1º Paragráfo usando a quebra de linha o comando br </p> <p>Com este recurso inicio um novo paragráfo </p> <p> <blockquote> Criando um novo parágrafo com MARGEM </blockquote> </p> <! O comando abaixo deixa uma frase rodando na tela> <marquee> Fim de Página !!! </marquee> <! O próximo comando indica o Fim do Corpo da Página – fim da programação> </body> <! Fim do Documento HTML> </html>

Introdução a HTML Comando de cores: Para alterar a cor de letra do texto TAG O QUE FAZ <font color = > Altera a cor do texto da letra. <font face= > Altera o tipo da letra <font size= n > Altera o tamanho da letra. Onde n é o tamanho <p> <font face=arial size=10 color=red> Frase </font> </p>

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

Introdução a HTML - Tabela de Cores

Introdução a HTML Comando de cores: TAG O QUE FAZ <body> 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. <body bgcolor=blue text=white> <body background=fundo.jpg bgproperties=fixed>

Introdução a HTML - Alterando cor de fundo e letra Exercício 3: <html> <head><title>Página com Fundo Colorido e Texto BRANCO</title></head> <! O Comando abaixo altera a cor de fundo para azul e a cor de letra para branco na página> <body bgcolor=blue text=white> <! O Comando center centraliza frases ou figuras. > <center> <h1>Definindo cor de fundo azul e TEXTO em branco</h1> </center> <! O comando hr insere uma linha horizontal. > <hr> <p> Observe que estamos iniciando um parágrafo e tudo o que estamos escrevendo está sendo exibido em branco. </p> <p> Para alterar a cor e tamanho da letra utilize os comandos face e size, sendo esse praticado no exercício 4. </p> </body> </html>

Introdução a HTML - Alterando formato da letra Exercício 4: <html> <head><title>Alterando cor e tamanho da Letra</title></head> <body bgcolor=blue text=white> <center> <h1>Definindo cor, tamanho e tipo de letra</h1> </center> <hr> <p> Observe que estamos iniciando um parágrafo e tudo o que estamos escrevendo ainda está sendo exibido em branco. </p> <! O Comando abaixo altera o tipo, tamanho e cor da letra> <p> <font face=arial size=10 color=red> Neste novo parágrafo estamos trabalhando com o tipo de letra arial, tamanho 10 e cor vermelha. </font> </p> </body> </html>

Criando links: Comando: <A HREF=”URL”>Frase que aparece na página</a> Onde: <a> 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: <a href=index.html>Exemplo1</a> <a href= Conheça a Escola de Engenharia de Piracicaba - EEP</a>

Exercício 5 <html> <head> <title>Realizando links</title></head> <body> <h1><font color=red><center> Realizando links a páginas e endereços </center></color></h1> <hr> <a href=exe4.html>Acesse o Exercício 4 </a> <br> <a href= o site da EEP</a> </body> </html>

Comando para inserir imagem <img src=image.jpg align="middle">O texto está no centro da imagem </img>

Introdução a HTML - Colocando Figura na Página Exercício 6 <html> <head> <title>Trabalhando com Imagens</title></head> <body> <img src=image.jpg align=top>O texto está no topo da imagem </img> <br> <img src=image.jpg align=middle>O texto está no centro <img src=image.jpg align=down>O texto está no rodapé </body> </html>

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!

Escola de Engenharia de Piracicaba Sistemas de Apoio a Decisão

Apresentações semelhantes

Apresentação em tema: "Escola de Engenharia de Piracicaba Sistemas de Apoio a Decisão"— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback

Login

Autorizar-se através da rede social:

Escola de Engenharia de Piracicaba Sistemas de Apoio a Decisão

Apresentações semelhantes

Apresentação em tema: "Escola de Engenharia de Piracicaba Sistemas de Apoio a Decisão"— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback