Cabeçalho do documento

Tamanho: px
Começar a partir da página:

Download "Cabeçalho do documento"

Transcrição

1 Cabeçalho do documento O cabeçalho de uma página HTML fica dentro das Tags <HEAD> e </HEAD>, e dentro dessas Tags podemos usar Tags <TITLE>, <BASE>, <META>, <LINK>, <STYLE> e etc. A Tag TITLE Por exemplo para definir um título para a página podemos digitar qualquer caractere entre a TAG <TITLE>, como por exemplo: <TITLE> ::# título # :: </TITLE> A Tag BASE Através da Tag <BASE> podemos definir a URL padrão de uma página com o endereço completo do site, como por exemplo O exemplo abaixo mostra um título personalizado e a URL base para a página teste.html, repare que ao passar o mouse sobre o link a será mostrado a URL como mostra a imagem abaixo. Cabeçalho do documento 1

2 <html> <title> ::# título # :: </title> <base href=http://www.site.com> <body> <a href=pagina.html> link </a> </body> </html> A Tag META O elemento META contém informações gerais (meta-informação) sobre a página que na maior parte das vezes a Tag META é utilizada para fornecer informações para navegadores ou sites de busca descrevendo o conteúdo da página tais como descrição da página, palavras chaves, autor, url, tempo de recarregamento da página e etc. Descrição da página <META NAME="description" content="este é um site de música"> Palavras chaves Cabeçalho do documento 2

3 <META NAME="keywords" content="pop, Rock, Heavy Metal"> Autor <META NAME="autor" content="joão da Silva"> Direitos autorais <META NAME="copyright" content="nome DO SITE"> URL do site <META NAME="url" content="http://www.site.com"> Tempo de recarregamento de uma página em segundos <META HTTP-EQUIV="Refresh" content="5"> ou <META HTTP-EQUIV="Refresh" content="5;http://www.site.com/pagina.html"> Linguagem <META HTTP-EQUIV="Content-Language" content="pt-br"> Codificação de caracteres utf-8 (universal) ou iso <META HTTP-EQUIV="Content-Type" content="text/html; charset=utf-8"> Cabeçalho do documento 3

4 ou <META HTTP-EQUIV="Content-Type" content="text/html; charset=iso "> <html> <title> :: META Tags :: </title> <META NAME="description" content="este é um site de música"> <META NAME="keywords" content="pop, Rock, Heavy Metal"> <META NAME="autor" content="joão da Silva"> <META NAME="copyright" content="nome DO SITE"> <META NAME="url" content="http://www.site.com"> <META HTTP-EQUIV="Refresh" content="5"> <META HTTP-EQUIV="Content-Language" content="pt-br"> <META HTTP-EQUIV="Content-Type" content="text/html; charset=utf-8"> <body> <h1>meta Tags</h1> </body> </html> A Tag LINK A tag LINK é usada para referenciar um arquivo externo como ícones (.ico) ou arquivos CSS (.css) como mostra os exemplos abaixo: Cabeçalho do documento 4

5 Exemplo para um ícone: <html> <title> :: Icone :: </title> <link rel="shortcut ICON" href=icone.ico"> <body> <h1>icone</h1> </body> </html> Você pode usar o programa gráfico Gimp para criar o ícone e salvar o arquivo com a extensão.ico no mesmo diretório da página para isso abra o Gimp clicando em : Aplicações Gráficos Gimp Agora crie um arquivo novo com 30 pixels de largura e 30 de altura, aumente o tamanho do ZOOM para 200% ou 400% e faça seu ícone. Cabeçalho do documento 5

6 Agora salve o ícone clicando no menu Arquivo - Salvar Como, digite o nome para o arquivo.ico e escolha o mesmo diretório da página HTML e escolha em Tipo de Preenchimento (Por Extensão) a opção Ícone do Microsoft Windows. Cabeçalho do documento 6

7 Apenas confirme clicando em OK a opção de 256 cores Agora abra o arquivo HTML pelo navegador e será mostrado o ícone na barra de endereço. Cabeçalho do documento 7

8 Exemplo para um arquivo CSS externo: Crie um arquivo chamado Css.html e insira o código abaixo: Css.html <html> <title> :: Arquivo CSS :: </title> <link href="padrao.css" rel="stylesheet" type="text/css"> <body> <font class="font1"> Fonte 1 </font> <br> <font class="font2"> Fonte 2 </font> </body> Cabeçalho do documento 8

9 </html> Agora crie o arquivo Padrao.css no mesmo diretório do arquivo Css.html, onde é criado duas classes de fontes font1(cor: verde, tamanho: 20 pixels e fonte: Sans-serif e Verdana) e font2 (cor: vermelho, tamanho: 30 pixels e fonte: Sans-serif e Arial. Repare que para criar uma classe é usado um ponto. antes do nome da classe, sendo que isto é muito útil para criação de um site, pois você pode criar várias classes e quando você alterar o arquivo Padrao.css todas as páginas do site serão alteradas automaticamente. Padrao.css.font1 {color:green; font-size:20px; font-family:sans-serif, Verdana;}.font2 {color:red; font-size:30px; font-family:sans-serif, Arial;} Agora abra o arquivo Css.html é verá que a formatação foi aplicada no texto Fonte 1 e Fonte 2 através da opção CLASS da Tag <FONT> (<font class="font1"> Fonte 1 </font> e <font class="font2"> Fonte 2 </font>). A Tag STYLE Podemos usar a Tag <STYLE> dentro da Tag <HEAD> usando um arquivo externo como foi mostrado anteriormente com a Tag <LINK>. <link href="meu_estilo.css" rel="stylesheet" type="text/css"> Cabeçalho do documento 9

10 Ou usando a Tag <STYLE> internamente no próprio arquivo HTML, podendo ser especificada dentro da Tag <HEAD>, onde será aplicado em todas as Tags especificadas ou no corpo da página dentro da Tag <BODY>, onde será aplicado somente em uma Tag HTML especificada como mostra os exemplos abaixo: Exemplo da Tag <STYLE> entre as Tags <HEAD>...</HEAD> Onde: body {background-color: yellow} É a formatação da cor de fundo da página na Tag body (corpo); p {font-size: 20px; color:green; background-color: orange} É a formatação da Tag p (parágrafo), onde é aplicado o tamanho de 20 pixels, cor de verde, e cor de fundo laranja; hr {background-color: red; width: 200px; height: 1px; border:0} É a formatação da Tag hr (linha horizontal), onde é aplicado a cor de fundo vermelha, largura de 200 pixels, altura de 1 pixel e borda 0. <html> <style type="text/css"> body {background-color: yellow} p {font-size: 20px; color:green; background-color: orange} hr {background-color: red; width: 200px; height: 1px; border:0} </style> <body> <p> Texto 1</p> <p> Texto 2</p> <hr noshade> </body> 10

11 </html> Abra o arquivo HTML e veja o resultado no navegador onde o CSS é aplicado na Tag <body> e em todas ocorrências das Tags <p> e <hr>, como mostra a imagem abaixo: Exemplo da Tag <STYLE> entre as Tags <BODY>...</BODY> A única diferença de aplicar o CSS no corpo da página é que a Tag <STYLE> é aplicada diretamente nas Tags HTML no corpo da página entre as Tags <BODY>...</BODY> ao invés das Tags <HEAD>...</HEAD> no cabeçalho. <html> <body style="background-color: yellow"> <p style="font-size: 20px; color:green; background-color: orange"> Texto 1</p> <p> Texto 2</p> 11

12 <hr noshade style="background-color: red; width: 200px; height: 1px; border:0"> </body> </html> Abra o arquivo HTML e veja o resultado no navegador onde o CSS é aplicado somente na Tag <p> que é especificada na Tag <STYLE>, como mostra a imagem abaixo: 12

Webdesign A tag HEAD e as Meta tags

Webdesign A tag HEAD e as Meta tags Webdesign A tag HEAD e as Meta tags Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net HEAD Como vimos anteriormente, o nosso documento HTML é

Leia mais

Introdução. História. Como funciona

Introdução. História. Como funciona Introdução O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada. História O HTML foi criado

Leia mais

MANUAL DE BOAS PRÁTICAS

MANUAL DE BOAS PRÁTICAS MANUAL DE BOAS PRÁTICAS Este manual é de uso exclusivo de clientes, parceiros, fornecedores e colaboradores da Dinamize. No caso de dúvidas, entre em contato através do e-mail suporte@dinamize.com. HTML

Leia mais

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Sumário HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Linguagem HTML HTML é a abreviação de HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação de Hipertexto. Não é uma linguagem

Leia mais

TABLELESS E PROJETO ESTRUTURAL

TABLELESS E PROJETO ESTRUTURAL Barra Lateral 1 Barra Lateral 2 Barra Lateral 2 Barra Lateral Barra Lateral DISCIPLINA: FUNDAMENTOS E TECNOLOGIA EM WEB Professora: Adriana Silva TABLELESS E PROJETO ESTRUTURAL O termo TABLELESS refere-se

Leia mais

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS é uma linguagem para estilos (formatação) que define o layout de documentos HTML. CSS controla fontes, cores, margens,

Leia mais

QUEM FEZ O TRABALHO?

QUEM FEZ O TRABALHO? Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome

Leia mais

Unidade: O que é CSS? HTML e CSS? Boa aula!!!

Unidade: O que é CSS? HTML e CSS? Boa aula!!! Unidade: O que é CSS? HTML e CSS? Boa aula!!! Objetivo Construir: Padrões Web, Tableless e outros Como inserir o CSS nas páginas Sintaxe de utilização do CSS Tag DIV e tag SPAN Orientações Durante a explanação

Leia mais

CSS ETEC FRANCISCO MORATO. Professores: Kelly e Rafael

CSS ETEC FRANCISCO MORATO. Professores: Kelly e Rafael CSS ETEC FRANCISCO MORATO Professores: Kelly e Rafael 2015 Agenda Introdução; Website Layouts; CSS; Referências. 2 Website Layouts A maioria dos sites têm colocado o seu conteúdo em várias colunas; Ex.:

Leia mais

MANUAL DE BOAS PRÁTICAS

MANUAL DE BOAS PRÁTICAS MANUAL DE BOAS PRÁTICAS Este manual é de uso exclusivo de clientes, parceiros, fornecedores e colaboradores da Dinamize. No caso de dúvidas, entre em contato através do e-mail suporte@dinamize.com. HTML

Leia mais

Roteiro de Estudos e Atividades Avaliativas HTML

Roteiro de Estudos e Atividades Avaliativas HTML Roteiro de Estudos e Atividades Avaliativas HTML Faça essa atividade de forma individual ou em dupla, faça o máximo de questões que conseguir. Pesquise na Web o significado das tags e utilize-as para alcançar

Leia mais

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe

Leia mais

> Herbet Ferreira Rodrigues > contato@herbetferreira.com

> Herbet Ferreira Rodrigues > contato@herbetferreira.com Curso HTML & CSS > Herbet Ferreira Rodrigues > contato@herbetferreira.com Sumário > Apresentação > Introdução ao HTML História Começando a Programar > Tags em HTML Headings (Cabeçalhos) Parágrafos Formatação

Leia mais

Internet e Programação Web

Internet e Programação Web COLÉGIO ESTADUAL PEDRO MACEDO Ensino Profissionalizante Internet e Programação Web 2 Técnico Prof. Cesar 2014 1 1. CSS CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo,

Leia mais

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

Introdução ao HTML 5 e Implementação de Documentos Linguagem de Programação para Web Introdução ao HTML 5 e Implementação de Documentos Prof. Mauro Lopes 1-31 20 Objetivo Iremos aqui apresentar a estrutura básica de um documento HTML e iremos também apresentar

Leia mais

HTML. Conceitos básicos de formatação de páginas WEB

HTML. Conceitos básicos de formatação de páginas WEB HTML Conceitos básicos de formatação de páginas WEB HTML HyperText Markup Language Linguagem utilizada para criar hipertexto na web Ou seja, criar documentos estruturados utilizando para tal um conjunto

Leia mais

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013 Efeito cascata Aula 4 Modelo CSS Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Fontes das folhas de estilo Autor Usuário Agente do usuário

Leia mais

SIMULADOS & TUTORIAIS

SIMULADOS & TUTORIAIS SIMULADOS & TUTORIAIS TUTORIAIS HTML Como utilizar estilos em HTML com CSS Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte

Leia mais

1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão

1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão 1. HTML - Introdução Hyper Text Markup Language É uma linguagem de formatação de conteúdos Não é uma linguagem de programação Portável Não depende da plataforma em que é vizualizado Ficheiros de pequena

Leia mais

#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.

#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com. #Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Revisar os conceitos mais importantes da XHTML e do CSS. Desenvolver

Leia mais

Tutorial de HTML. O que é HTML? Aprendendo

Tutorial de HTML. O que é HTML? Aprendendo Tutorial de HTML Tutorial: O que é HTML? Aprendendo Títulos Textos Imagens Links Imagens Clicáveis Explorando o TAG BODY Música de Fundo Gifs Animados Tabelas Testando sua Página O que é HTML? HTML é uma

Leia mais

CRIAÇÃO DE SITES (AULA 7)

CRIAÇÃO DE SITES (AULA 7) Prof. Breno Leonardo Gomes de Menezes Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br CRIAÇÃO DE SITES (AULA 7) CSS significa CascadingStyleSheetes(Folhas de Estilo em Cascata). Não seria ótimo

Leia mais

7. Cascading Style Sheets (CSS)

7. Cascading Style Sheets (CSS) 7. Cascading Style Sheets (CSS) O CSS (Folha de Estilo em Cascata) é um padrão de formatação para páginas web que vai além das limitações impostas pelo HTML. O Cascading Style Sheets não é exatamente uma

Leia mais

Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo.

Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo. Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo. Como defino e escrevo uma classe? Classe é um seletor

Leia mais

PROGRAMAÇÃO PARA INTERNET HTML

PROGRAMAÇÃO PARA INTERNET HTML PROGRAMAÇÃO PARA INTERNET HTML Prof. Rafael Gross INTRODUÇÃO Quando acessamos uma página web, estamos interessados na informação contida nessa página. Essa informação pode estar na forma de texto, imagem

Leia mais

Introdução ao HTML Hypertext Markup Language

Introdução ao HTML Hypertext Markup Language Introdução ao HTML Hypertext Markup Language Prof. Marcus Ramos Tags São comandos que são inseridos juntamente com o texto a ser apresentado, e que definem a forma como o mesmo será exibido na tela do

Leia mais

O objetivo é criar um tema padrão com 3 colunas, cabeçalho, barra de menu e rodapé:

O objetivo é criar um tema padrão com 3 colunas, cabeçalho, barra de menu e rodapé: Este artigo tem por objetivo mostrar de maneira simples e direta o passo-a-passo de como criar um tema para XOOPS de maneira rápida e simples. Não vou adentrar a explicação de código, vou postando as estruturas

Leia mais

Programação para Internet

Programação para Internet Programação para Internet Aula 09 Os direitos desta obra foram cedidos à Universidade Nove de Julho Este material é parte integrante da disciplina oferecida pela UNINOVE. O acesso às atividades, conteúdos

Leia mais

TECNOLOGIAS WEB AULA 5 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD

TECNOLOGIAS WEB AULA 5 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD TECNOLOGIAS WEB AULA 5 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Apresentar as principais tags utilizadas na construção de páginas Web. Compreender as principais funcionalidades de cada tag utilizada.

Leia mais

1) Crie uma nova página chamada Exercício.html e deixe-a com o seguinte layout:

1) Crie uma nova página chamada Exercício.html e deixe-a com o seguinte layout: Exercícios: 1) Crie uma nova página chamada Exercício.html e deixe-a com o seguinte layout: a) O cabeçalho Sistema de Órgãos Colegiados deve ter tamanho 3 e ficar centralizado. b) Após o cabeçalho incluir

Leia mais

Algoritmia e Programação APROG HTML. Introdução. Nelson Freire (ISEP DEI-APROG 2014/15) 1/15

Algoritmia e Programação APROG HTML. Introdução. Nelson Freire (ISEP DEI-APROG 2014/15) 1/15 APROG Algoritmia e Programação HTML Introdução Nelson Freire (ISEP DEI-APROG 2014/15) 1/15 O que é o HTML? Sumário Geral Documento HTML Elemento HTML Estrutura Básica de Documento HTML Elementos Títulos

Leia mais

Roteiro 2: Conceitos de Tags HTML

Roteiro 2: Conceitos de Tags HTML Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias

Leia mais

HTML 5 + CSS APRESENTANDO O CSS ESTILOS LOCAIS

HTML 5 + CSS APRESENTANDO O CSS ESTILOS LOCAIS APRESENTANDO O CSS CSS Cascading Style Sheets, ou, em português, Folha de Estilo em Cascata - é uma linguagem de estilo que pode ser utilizada na formatação de documentos HTML. Com CSS, podemos criar regras

Leia mais

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza Webdesign HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML

Leia mais

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

Leia mais

PDI 1 - Projeto e Design de Interfaces Web

PDI 1 - Projeto e Design de Interfaces Web Introdução a HTML e XHTML Elementos básicos parte 2 Professor: Victor Hugo L. Lopes Agenda: --Aprofundando nos elementos básicos do HTML; --Criando Hiperlinks em HTML; 2 Estrutura básica de um documento

Leia mais

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Mini-curso de PHP Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Aula 1 Breve introdução de HTML, Conceitos básicos de PHP, Sintaxe, Separador de instruções e Comentários (Cap 1

Leia mais

Apostila CSS - Introdução à folha de estilos

Apostila CSS - Introdução à folha de estilos Apostila CSS - Introdução à folha de estilos Este documento é propriedade intelectual do Núcleo de Educação a distância da NRsystem e distribuído sob os seguintes termos: 1. As apostilas publicadas pelo

Leia mais

Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata

Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata Mudança de formatos no HTML título CSS - Cascading Style Sheets e os problemas do HTML Para mudar a cor de uma única linha de uma página seria relativamente fácil.

Leia mais

1 INTRODUÇÃO. Web é o diminutivo para World Wide Web.

1 INTRODUÇÃO. Web é o diminutivo para World Wide Web. 1 1 INTRODUÇÃO Antes de começarmos a trabalhar HTML, é necessário que se conheça alguns termos básicos que envolvem esta linguagem. Internet é um conjunto de pequenas redes de computadores, formando assim

Leia mais

teste