Tribunal Trib unal Superior do Trabalho
Objetivos Desenvolver competências para o domínio das técnicas de utilização dos aplicativos mais comuns (Dreamweaver e Photoshop) e também conhecimentos fundamentais para a programação visual de Websites.
Carga horária: 80h
Docente: Prof. Glauber Freitas
Professor e Instrutor de Informática Formado em Sistemas de Informação Pós Graduando em Objetos, Sistemas Distribuídos e Internet – UnB Contato:
[email protected] [email protected] m
Alunos
Bem-Vindos Quem é Quem
O curso...
Introdução HTML Dreamweaver Photoshop Design para Web Projeto de Web Site
Introdução - HTML
A Internet
Endereçamento na Internet
nome@ domínio Nome = identificação do usuário (geralmente o login) @ = AT, “está localizado” Domínio = Nome do computador onde “está localizado” o usuário “nome”
Elementos de um Projeto Web
Página Web – Arquivo de texto formatado como HTML Home Page – Página pessoal ou inicial do site. Web Site – Sítio, Lugar; conjunto de páginas HTML, que contém informações relacionadas. Também podem fazer parte de um Web Site arquivos de texto, programas, imagens, etc.
Estrutura de um Web Site
Um Web Site pode estár organizado de três maneiras: ○ Sequencial ○ Árvore ○ Mista
Estrutura de um Web Site :
Sequencial
Estrutura de um Web Site :
Árvore Home Page
Estrutura de um Web Site :
Mista
HTML
Hypertext Markup Language Linguagem ultilizada para criação de páginas na Web Atualmente trabalha em conjunto com outras tecnologias (JavaScript, CSS), que proporciona páginas mais interativas. Interpretado pelo navegador e exibido da maneira corresponden correspondente te
Editores WYSIWYG
What you see is what you get! Programass editores que criam o HTML Programa automaticamente. automaticam ente. Ex: Dreamweave Dreamweaver, r, Front Page, Composer Funcionamento
Tags HTML
Os comandos em HTML são chamados de tags Eles dizem ao navegador como o texto, a informação e as imagens serão formatadas e exibidas Os Tags são identificados pelos símbolos < > e > < nome da tag > . . .
Tags HTML Os tags podem ser: Abertos (simples):
ex.
Fechados: . . .
Compostos: ... ... ... ...
Regras e Dicas HTML Fechar sempre os tags fechados e compostos
NUNCA esquecer um sinal de “<“ ou de ”>” no ínicio ou fim da tag Não usar espaço no tag (no interior dos sinais < e > ) comando>
ERRADO!!! NUNCA!!!
Boas Práticas HTML/Dicas
Maiúsculas ulas (não é estrita estritamente mente Nome dos TAGS – Maiúsc necessário mas facilitada a leitura do código. Nome dos arquivos (inclusíve extenção “.html” ou “.htm”) – Minúsculas. Verifique suas págins em diferentes navegadores para assegurar uma experiencia de visualização consistente. Revise a grafia e gramatica antes de publicar sua página; Verifique todos os links entre as Páginas
Estrutura Básica de uma Página Aula 01 Minha primeira página HTML
Estrutura Básica de uma Página Aula 01 Minha primeira página HTML
Aqui você coloca seus códigos HTML, Textos, Imagens e Informações
Atributos do Tag
BGCOLOR; cor de fundo da pagina TEXT; cor do texto da pagina LINK; cor dos links VLINK; cor dos links visitados ALINK; cor do link ativo BACKGROUND; define uma imagem como fundo da pagina
Tabela de cores RGB
Exemplo da tag Aula 02 Minha segunda página HTML
Atributo
Atributo “background” Serve para adicionar uma imagem como plano de fundo da página HTML.
BGPROPERTIES= "FIXED”
IE users only
Títulos/Cabeçalhos
No corpo do texto podem ser colocados até seis níveis de títulos. A hierarquia começa em , como o maior título, e termina em , como o menor.
Exemplo Títulos/Cabeçalhos Aqui será Exibido o texto com a cor padrão da página, e no maior tamanho possível
Aqui será exibido um texto menor...
...aqui será exibido um texto menor...
...aqui será exibido um texto menor...
...aqui será exibido um texto menor...
...E aqui será exibido o menor texto possível com a tag
...
Ultilize a tag quando você quiser centralizar blocos de texto, imagens, tabelas etc. dentro da página exibida. Seu uso é muito simples e pode ser descrito da seguinte forma:
Essa frase aparecerá centralizada na página.
TER>
Tag
A principal diferença entre a página HTML e um editor de textos tradicional é que a página não reconhece o fim de um parágrafo com o pressionamento da tecla Enter. Se você simplesmente escrever palavras sem TAGS de formatação em um arquivo html elas serão formatadas em um grande único parágrafo. Você precisa forçar o fim do parágrafo e a quebra de linha usando TAGS especiais. O TAG responsável pela quebra de parágrafos é o TAG
. Ele iniciará um novo parágrafo e pulará uma linha entre o texto.
Observação
Os parágrafos são digitados normalmente. O tag
serve para indicar o início de um novo parágrafo. Se o tag
for colocado antes de um título (
, por exemplo), a marca de parágrafo é ignorada. Nesse caso, o próprio título se encarrega de colocar o espaço necessário.
Atributo align; alinhamento, left – center – right. ex:
Tag
Linhas Assim como as marcas de parágrafo, as quebras de linha são indicadas por um tag simples. Para abrir uma nova linha, usa-se o tag
.
Tag
A tag
cria uma linha horizontal no documento. Tem função decorativa Utilizada normalmente para separar seções de informação Atributos: Align; posição (right, left, center). Size; espessura da linha em pixels. Width;largura da linha em px ou porcentagem porc entagem em relação a página.
Ex:
Listas
Na linguagem HTML existem elementos específicos para a criação de listas, que podem ser listas ordenadas (OL), listas sem ordenação (UL), ou listas de definições (DL). Podem ser criadas listas aninhadas, ou seja, listas dentro de listas.
Listas Ordenadas Ordered Lists
Entre os elementos de início e fim, os itens da lista são definidos pelos elementos -
. O atributo opcional TYPE define como será o tipo de numeração de cada linha. Os tipos disponíveis são: “A” (A, B, ..., Z), “a” (a, b, ..., z), “I” (i, ii, ..., v), e “1” (1, 2, ..., 5). Se omitido, é utilizado o tipo padrão (1, 2, 3, 4). O atributo opcional START define a partir de que elemento a numeração deve se iniciar.
Exercício Listas Ordenadas Lista ordenada por números
- Elemento 1
- Elemento 2
- Elemento 3
- Elemento 4
Lista ordenada por letras, iniciando em D
h2> - Elemento 1
- Elemento 2
- Elemento 3
- Elemento 4
Listas Não Ordenadas Unordered Lists.
A estrutura das listas sem ordenação é a mesma das listas ordenadas, sendo que, na apresentação, os itens serão precedidos por um marcador (bullet).
O atributo TYPE pode ser: – square: É um quadrado preenchido. – circle: É um círculo vazado.
– disk: É um círculo preenchido.
Exercício Listas Não-Ordenadas Lista Não-Ordenada
- Elemento 1
- Elemento 2
- Elemento 3
- Elemento 4
Código do exercício continua no slide seguinte...
Exercício continuação... Duas listas Não-Ordenadas aninhadas
- Elemento 1
- Elemento 2
- Elemento 2.1
- Elemento 2.2
- Elemento 2.3
- Elemento 3
- Elemento 4
Lista de Definição
...
- São marcas que englobam uma lista de definições, ideais para a criação de glossários e coisas do gênero. A estrutura desta lista é diferente das outras, pois existem dois elementos – o termo a ser definido (DT) (DT),, e a definição propriamente dita (DD) (DD).. Na exibição cada termo aparece em uma linha, e a respectiva definição na linha seguinte, deslocada para a direita.
Exercício : Lista de Definição Listas de Definição Listas de Definição
- HTML
- HyperText Markup Language
- OL
- Listas Ordenadas
- UL
- Listas Sem Ordenação
- LI
- Elemento da Lista
Margem Outro controle sobre o alinhamento dos elementos da página pode ser conseguido através da mudança de margem. O texto sempre começa a uma determinada distância da janela do navegador (um pouco diferente em cada navegador). Às vezes, será necessário aumentar essa margem e fazer com que o texto comece mais para dentro da página. O par de tags e
serve para aumentar a margem. O efeito desse tag pode ser acumulado para conseguir margens maiores. Veja os exemplos:
Texto com mais margem
Texto com mais margem ainda
Texto Pré-Formatado
Apresenta o Texto da mesma maneira que foi digitado Com este tag, todos todos os espaços e entradas entradas de parágrafo (o resultado da tecla ENTER) são respeitados. Com a Pré-Formatação, pode-se controlar o espaçamento com abrra de espaço e colocar o texto em praticamente qualquer lugar da página
. . . .
Formatação de Texto Todos os TAGS de formatação e estilo de texto devem ter seus tag de fechamento, pois senão ele se espalhará em toda sua página e não apenas onde você escolheu.
Estilos de caracteres
Os principais estilos de texto são:
Estilo Negrito Itálio Sublinhado
Sintaxe Texto Texto Texto
Fu n ç ã o Deixa o texto em Negrito Deixa o texto em Itálio Deixa o texto Sublinhado
Fontes, Tamanhos e Cores O Tag é ultilizado para produzir a maioria das modificações em blocos de texto Feliz 2008!
Hyperlinks Com o HTML é possível fazer-se ligações a partir de um bloco de texto ou imagem à um outro documento e também ligações entre os elementos do próprio documento, como áreas ou seções diferentes no do decorrer do documento. Os Hyperlinks são destacados nos browsers por cores distintas ou sublinhados. (obs.: Nem sempre)
Hyperlinks Criação de um hyperlink básico: âncora* url = é o caminho absoluto ou relativo do documento/arquivo/seção de destino. âncora = bloco de texto ou imagem que será ultilizado como ligação entre o elemento especificado no atributo HREF e o documento que possui o link. É ela que será clicada pelo usuário para que o hyperlink passe a funcionar
Ex: Visitar o Google
Caminhos Absolutos
Ultilizam a URL completa do documento que está sendo referenciado pelo link
Caminhos Relativos
Links para seções de um documento
Especificando um Destino