Baixe apostila-webdesign e outras Notas de estudo em PDF para Marketing, somente na Docsity!
ÍNDICE
- DEFINIÇÃO.......................................................................................................... HTML
- CRIANDO DOCUMENTOS HTML.......................................................................
- 2.1 - ELEMENTOS BÁSICOS.........................................................................
- 2.1.1 - TÍTULOS..............................................................................................
- 2.1.2 - CABEÇALHO.......................................................................................
- 2.1.3 - PARÁGRAFO.......................................................................................
- 2.1.4 - QUEBRA DE LINHA.............................................................................
- 2.1.5 - COMENTÁRIOS...................................................................................
- 2.1.6 - LISTA DE ELEMENTOS BÁSICOS......................................................
- 2.1.7 - DICAS...................................................................................................
- FORMATAÇÃO DE TEXTO.................................................................................
- 3.1 - DEFININDO FONTES.............................................................................
- 3.2 - ESTILO DE TEXTOS..............................................................................
- 3.3 - FORMATANDO BLOCO DE TEXTOS....................................................
- 3.3.1 - TAG DIV...............................................................................................
- CONTROLE DE CORES E GRÁFICOS DE FUNDO...........................................
- 4.1 - CORES E ELEMENTOS GRÁFICOS DE FUNDO..................................
- 4.1.1 - BACKGROUND (IMAGEM DE FUNDO)..............................................
- 4.1.2 - BGCOLOR............................................................................................
- 4.2 - CORES DE LETRAS E LINKS................................................................
- 4.2.1 - ATRIBUTO TEXT..................................................................................
- 4.2.2 - ATRIBUTO LINK, VLINK E ALINK........................................................
- LINKS.....................................................................................................................
- 5.1 - ÂNCORAS..............................................................................................
- 5.2 - INTERLIGANDO DOCUMENTOS EM OUTROS DIRETÓRIOS...........
- 5.3 - INTERLIGANDO URL'S.........................................................................
- 5.4 - LINKS PARA E-MAILS...........................................................................
- LISTAS..................................................................................................................
- 6.1 - LISTAS NÃO NUMERADAS.....................................................................
- 6.2 - LISTAS NUMERADAS..............................................................................
- 6.3 - LISTA DE DEFINIÇÕES...........................................................................
- 6.4 - LISTA INTERCALADAS............................................................................
- IMAGENS...............................................................................................................
- 7.1 - INSERINDO IMAGENS NA PÁGINA.......................................................
- 7.2 - DIMENSIONANDO IMAGENS.................................................................
- 7.3 - ALINHANDO IMAGENS...........................................................................
- 7.3.1 - ALINHAMENTO EM RELAÇÃO AO NAVEGADOR...............................
- 7.3.2 - ALINHAMENTO EM RELAÇÃO AO TEXTO... ......................................
- 7.4 - OUTROS ATRIBUTOS..............................................................................
- 8.TABELAS................................................................................................................
- 8.1 - MARCAÇÕES BÁSICAS...........................................................................
- 8.2 - DESENVOLVENDO UMA TABELA SIMPLES..........................................
- 8.3 - ATRIBUTOS DE CONTROLE DE TABELAS............................................
- 8.4 - CORES E IMAGEM NA TABELA..............................................................
- 8.4.1 - CORES NA TABELA..............................................................................
- 8.5 - IMAGEM DE FUNDO NAS TABELAS.......................................................
- CORES................................................................................................................
- 9.1 - MATIZ, SATURAÇÃO E TONALIDADE.................................................
- 9.2 - SISTEMA DE REPRESENTAÇÃO DAS CORES...................................
- 9.3 - PSICOLOGIA DAS CORES....................................................................
- TIPOLOGIA.......................................................................................................
- 10.1 - ESTILO ANTIGO.....................................................................................
- 10.2 - ESTILO MODERNO................................................................................
- 10.3 - SERIFA GROSSA...................................................................................
- 10.4 - SEM SERIFA...........................................................................................
- 10.5 – MANUSCRITO........................................................................................
- 10.6 – DECORATIVO........................................................................................
- FERRAMENTAS DO PHOTOSHOP................................................................ PHOTOSHOP
- 11.1 – INICIANDO O PHOTOSHOP...............................................................
- EXERCÍCIOS PARA REVISÃO......................................................................
- VISUALIZANDO AS IMAGENS.......................................................................
- EXERCÍCIOS PARA REVISÃO......................................................................
- SELECIONANDO E MOVENDO IMAGENS....................................................
- 13.1 – MARCA DE SELEÇÃO........................................................................
- 13.2 – LAÇO...................................................................................................
- 13.3 – VARINHA MÁGICA..............................................................................
- 13.4 – CORTE DEMARCADO........................................................................
- EXERCÍCIOS PARA REVISÃO......................................................................
- MODIFICANDO AS SELEÇÕES.....................................................................
- 14.1 – FILTROS..............................................................................................
- EXERCÍCIOS PARA REVISÃO......................................................................
- TRANSFORMANDO AS SELEÇÕES..............................................................
- 15.1 – PINCEL................................................................................................
- 15.2 – FERRAMENTA DEGRADÊ.................................................................
- 15.3 – CARIMBO............................................................................................
- 15.4 – DESFOQUE, NITIDEZ E BORRAR.....................................................
- EXERCÍCIOS PARA REVISÃO......................................................................
- FERRAMENTAS DE TEXTO...........................................................................
- EXERCÍCIOS PARA REVISÃO......................................................................
- CRIAÇÕES DE ARQUIVOS PARA WEB........................................................
- EXERCÍCIOS PARA REVISÃO......................................................................
- VOCABULÁRIO UTILIZADO NO PHOTOSHOP............................................
- SEJA UM BOM WEB DESIGNER...................................................................
- APRESENTANDO O DREAMWEAVER.......................................................... DREAMWEAVER
- 20.1 – BARRA DE TÍTULOS...........................................................................
- 20.2 – BARRA DE MENUS.............................................................................
- 20.3 – BARRA INSERIR..................................................................................
- 20.4 – BARRA DE FERRAMENTAS DOCUMENTOS....................................
- 20.5 – PAINÉIS................................................................................................
- 20.6 – GRUPOS DE PAINÉIS.........................................................................
- 20.7 – ÁREA DE DESENVOLVIMENTO.........................................................
- 20.8 – VISUALIZAÇÃO DO DREAMWEAVER................................................
- 20.9 – BARRA DE STATUS............................................................................
- 20.1.1 – MENUS CONTEXTUAIS....................................................................
- EXERCÍCIOS PARA REVISÃO.......................................................................
- CRIANDO UM NOVO SITE...............................................................................
- INICIANDO UMA PÁGINA NO DREAMWEAVER...........................................
- 22.1 – CRIANDO E SALVANDO UMA NOVA PÁGINA......................................
- 22.2 – CRIANDO O ARQUIVO INDEX.HTM.......................................................
- 22.3 – DEFININDO AS PROPRIEDADES DA PÁGINA......................................
- 22.4 – INSERINDO TABELAS...........................................................................
- 22.5 – MAPEAMENTO DE IMAGENS...............................................................
- EXERCÍCIOS PARA REVISÃO..........................................................................
- LINKS E NAVEGAÇÃO...................................................................................
- 23.1 – LOCALIZAÇÃO E CAMINHOS DOS DOCUMENTOS..............................
____________________________________________________________
Página - 3 -
2. CRIANDO DOCUMENTOS HTML
Todo documento HTML precisa conter certas tags padronizadas, no mínimo , , e , pois elas constituem as duas partes básicas de um documento HTML que são: o HEAD (cabeçalho) e o BODY (corpo do documento). **
Curso de WebDesign
Este é o primeiro nível de cabeçalho.
Bem-vindo ao mundo do HTML. Este é o primeiro parágrafo.
Este é o segundo paragráfo
** A tag contém, entre outras coisas, o (título), e a tag <BODY> armazena todo o conteúdo do documento, normalmente composto de parágrafos, listas, tabelas, etc. Para interpretar corretamente o conteúdo do documento HTML, os browsers esperam informações em acordo com as especificações HTML. Abra o bloco de notas, e digite o código acima e salve-o como primeiro.html. Em seguida, abra arquivo primeiro.html no navegador (Internet Explorer, ou outro).
____________________________________________________________
Página - 4 - 1.1 Modelo de arquivo HTML Explicação: A primeira TAG que encontramos no documento é <HTML>. Ela é o elemento raiz de um documento HTML, pois dentro dela está todo o conteúdo da página. Esta tag diz ao navegador para iniciar um novo documento HTML, onde o conteúdo que deverá ser exibido esta entre as tags <HTML> e <\HTML>. O texto contido ente as TAG <HEAD> e <\HEAD> define o cabeçalho do documento. Estas informações são importantes pois indicam ao navegador a forma que a página deve ser apresentada graficamente. A tag <TITLE> define o título da página. Observe a figura 1.1 o topo do navegador, está informado Curso de WebDesign. A tag <BODY> informa ao navegador o que deverá ser exibido graficamente. O corpo da página “BODY” é constituido pelo conteúdo que está entre as tags <BODY> e </BODY>.
____________________________________________________________
Página - 5 - 2.1 ELEMENTOS BÁSICOS 2.1.1 TÍTULOS Todo documento em HTML deve possuir um título. O título é exibido em local separado da página, e é utilizado para identificar o documento em outros contextos, de modo que o título deve indicar claramente o conteúdo do documento.
As tag utilizadas para títulos são: e <\TITLE>. **<html> <title>Este é o título
E este o cabeçalho de nível 2 Aqui entra o texto do documento ...
** Fígura2.1 Modelo de título 2.1.2 CABEÇALHO Os cabeçalhos normalmente são usados para títulos e sub-títulos de uma texto da página. A linguagem HTML possui seis níveis de cabeçalhos, numerados de 1 a 6; quanto menor o nível, maior será o destaque. Em geral, os cabeçalhos são exibidos em letras maiores e em negrito, e o HTML adiciona uma linha em branca antes e depois do cabeçalhos. O primeiro cabeçalho de uma página deve ser marcada como .
____________________________________________________________
Página - 6 - COMANDO:
Texto do Cabeçalho
Onde o y é um número que poderá ser especificado entre 1 a 6, definindo o nível do
cabeçalho. **COMANDO: Cabeçalho nível 1 Cabeçalho nível 2 Cabeçalho nível 3 Cabeçalho nível 4 Cabeçalho nível 5 Cabeçalho nível 5 ** Fígura 2.1 Modelo de Cabeçalhos
____________________________________________________________
Página - 7 - 2.1.3 PARÁGRAFO A tag
é utilizada para definir o ínicio de um parágrafo, criando uma linha em branco entre cada parágrafo. O tag
também é responsável pelo alinhamento dos parágrafos. O alinhamento pode ser: LEFT : Parágrafo alinhado a esquerda. CENTER: Parágrafo alinhado ao centro. RIGHT: Parágrado alinhado a direita. JUSTIFY : Parágrafo justificado. **
Alinhamento de parágrafos
Este parágrafo utiliza o alinhamento padrão dos navegadores de Internet (esquerdo).
Este parágrafo utiliza o alinhamento centralizado
Este parágrado utiliza o alinhamento à direita.
** _Fígura 2.2 Modelo de alinhamento de parágrafos_
____________________________________________________________
Página - 8 - 2.1.4 QUEBRA DE LINHA A tag
é usada para terminar uma linha sem iniciar um novo parágrafo. Esta tag
, ou “line break”, provoca uma mudança de linha sem acrescentar espaço extra entre as linhas.
Não desanime se o aspecto do código fonte lhe aparecer assustador. Se esse for o caso, pode ter certeza que a página que está visualizando foi feita por um programa específico. Ao longo do curso, será possível verificar que o código HTML bem escrito a mão é muito fácil de ler, mas muitas pessoas complicam o código para confundir. ______________________________________________________________________ **Exercícios Revisão**
REVISÃO – CÁPITULO 1 e 2
**1) Qual o símbolo que determina o fechamento de uma tag?
- Quais os elementos básicos de uma página HTML?
- Qual a diferença entre a tag
e a tag
?
- Quando utilizamos os comentários?**
____________________________________________________________
Página - 11 -
3. FORMATAÇÃO DE TEXTOS
3.1 DEFININDO FONTES
A tag permite que você insira em sua página um texto com fontes, tamanhos, cores e tipos diferentes. **COMANDO: Texto ** Onde: SIZE: indica o tamanho da fonte que varia de 1 a 7, sendo 3 o valor padrão da maioria dos navegadores. FACE: indica o nome da fonte utilizada. As fontes padrões da maioria dos navegadores são: ARIAL, TIMES NEW ROMAN, GEORGIA, COURIER, VERDANA. COLOR : Define a cor da fonte do texto, em hexadecimal. Fígura 3.1 Modelo de Formatação de Fontes
____________________________________________________________
Página - 12 - Caso a fonte utilizada na página não esteja disponível para o usuário que visitá-la, a fonte será substituida então pela fonte padrão do navegador utilizado pelo usuário. Pode-se definir mais de uma fonte FACE, pois caso a primeira não esteja instalada no sistema do usuário, o navegador reconhe a próxima fonte definida. 3.2 ESTILO DE TEXTOS O HTML define muitos elementos para formatar textos, como por exemplo escrever em negrito, itálico ou sublinhado. ELEMENTO DESCRIÇÃO Define texto escrito em negrito. Define texto com letra maior. Define texto enfatizado. (escrita com caracteres itálicos) Define texto escrito com caracteres itálicos. Define texto com letra menor. Define texto forte (escrita com caracteres em negrito) Texto subscrito (alinhado um pouco mais para baixo) Texto sobrescrito (alinhado um pouco mais para cima) Texto pulsante COMANDO:
**
Exemplo
Isto é texto em negrito
Isto é texto forte
Isto é texto maior
Isto é texto enfatizado
Isto é texto itálico
Isto é texto mais pequeno
Este texto contém uma parte alinhada mais abaixo
Este texto contém uma parte alinhada mais acima
**
____________________________________________________________
Página - 13 - Fígura 2.4 Modelo de formatação de texto 3.3 FORMATANDO BLOCO DE TEXTOS 3.3.1 TAG DIV A tag permite alinhar horizontalmente qualquer elemento em sua página. O alinhamento pode ser: left, center ou right. Onde a posição pode ser: LEFT: Alinhamento a esquerda; CENTER: Alinhamento centralizado; RIGHT: Alinhamento a direita. O padrão de alinhamento da tag é a esquerda. **COMANDO: Elementos a serem alinhados
ALINHAMENTO DE ELEMENTOS COM A TAG DIV
Usando a TAG DIV
Usando a tag DIV é possível alinhar o texto sem problemas
Pode utilizar o alinhamento a direita que alinha o seu texto na margem direita da tela.
Como um texto criado em um editor de texto para ser exibido na página.
** ______________________________________________________________________ **Exercícios Revisão**
REVISÃO – CAPÍTULO 3
**1) Qual a tag utilizada para formatar textos?
- O que significa os atributos FACE e SIZE?
- Quais tags utilizarei para: a) Exibir o texto em negrito:____________________________________________________________ b) Exibir o texto em itálico:
- Qual a função da tag ?**
____________________________________________________________
Página - 14 -
- Para tornar a visualização das páginas mais rápidas, alguns usuários não utilizam imagens em suas páginas, em vez disso utilizam o atributo BGCOLOR.
____________________________________________________________
Página - 17 - 4.2 CORES DE LETRAS E LINKS 4.2.1 ATRIBUTO TEXT O atributo TEXT é utilizado para controlar a cor do texto normal de uma página, ou seja, define a cor de todo o texto do documento, execeto os links. O atributo TEXT é inserido na tag , tendo como padrão a cor preto (#000000). **COMANDO: Corpo da Página
Cor de texto - TEXT
CORES DE LETRAS DE TEXTO NORMAL
Com esse atributo você controla a cor do texto em uma página.
** _Fígura 4.3 Modelo do uso do atributo TEXT_
____________________________________________________________
Página - 18 - 4.2.2 ATRIBUTO LINK, VLINK E ALINK Os atributos LINK, VLINK e ALINK fazem o controle das cores do textos que funcionam como link na página. LINK: Define cores de links não visitados. Cor padrão o AZUL. VLINK: Define as cores dos links já consultados. Cor padrão vermelho-púrpura. ALINK: Define as cores dos links selecionados, ou seja, quando o usuário pressionou o botão do mouse e ainda não soltou. Cor padrão vermelho. **COMANDO: Corpo da página
Cor de Links - LINK VLINK ALINK
EXEMPLO DE CORES
O fundo da página está com uma cor especial:
Lightyellow - RGB : #FFFFE0
Alink = GreenYellow - RGB:"#ADFF2F"
Link = MediumBlue RGB:"#0000CD"
Vlink = Aquamarine- RGB: "#7FFFD4"
**
____________________________________________________________
Página - 19 - Fígura 4.4 Modelo de cores de Links
Exercícios Revisão
REVISÃO – CAPÍTULO 4
**1) Porque é importante ter cautela ao utilizar cores e imagens de fundo em páginas para WEB?
- Qual a diferença entre o atributo BACKGROUND e BGCOLOR?
- O atributo TEXT é utilizado em qual TAG?
- Defina os atributos:**
**a) LINK:
_ b) VLINK:
c) ALINK: ____________________________________________________________________________**
____________________________________________________________
Página - 20 -
5. LINKS
O principal poder do HTML, está na capacidade de ligar partes de textos e imagens a outros documentos. A interligação entre documentos é feito utilizando a tag , e não se restringe apenas a outras páginas. Os links podem apontar para qualquer recurso disponível na WEB, podendo ser uma página em HTML, uma imagem, um arquivo de som, um filme, etc. 5.1 ÂNCORAS As âncoras são links que utilizamos quando queremos buscar o conteúdo na mesma página. São muito utilizadas em páginas que têm o conteúdo extenso, onde definimos seções na páginas, sendo que cada seção terá um nome que servirá de referência para o link. Para criarmos uma âncora selecionamos um local da página para inserí-la.
Onde: ** e ;** **** : utilizada para encerrar a tag. Com essa tag você inserirá uma imagem ou texto que indicará ao usuário que ao clicar neste tipo de link, este irá guiá-lo até o local onde foi inserida a âncora. ** Texto ou imagem **
____________________________________________________________
Página - 21 - Onde: **** = encerra a TAG. O símbolo # indica ao navegador que o link se encontra na mesma página. É indispensável o uso de #. 5.2 INTERLIGANDO DOCUMENTOS EM OUTROS DIRETÓRIOS Para interligar documentos em outros diretórios é necessário apenas indicar o caminho completo da localização do mesmo. Quando falamos de WEB, a forma de localizar arquivos é diferente do Windows e DOS, vejamos por que: A barra utilizada para separar diretórios é a barra convencional ( / ) ; O diretório atual será sempre o ponto de partida para buscarmos arquivos em outro diretório; Caso o arquivo esteja localizado em outros níveis de diretórios, utilizamos “ .. / ”.
programa de envio de e-mail, podendo ser este o OULTLOOK EXPRESS ou outro que estiver configurado no computador. **Texto ou Imagem ** Onde: mailto = informa ao navegador que o link é para e-mails; endereço = deverá ser informado o e-mail que será direcionada as mensagens.
Exercícios Revisão
REVISÃO – CAPÍTULO 5
**1) Qual a tag utilizada para indicar links?
- O que são âncoras? E para que servem?
- Como fazer links com arquivos que estão em outros diretórios, o que utilizamos?
- Escreva o comando para fazer links para e-mails.**
____________________________________________________________
Página - 24 -
6. Listas
As listas são utilizadas para organizar os conteúdos das páginas, servindo como resumos ou índices dos sites. As listas podem conter links para outras páginas, para arquivos ou outros sites. Existem 4 tipos de listas, sendo estas: LISTA NÃO NUMERADA; LISTA NUMERADA LISTA DE DEFINIÇÕES LISTA INTERCALADAS. 6.1 LISTAS NÃO NUMERADAS As listas não numeradas inserem marcadores na frente de cada item. Comando: ** Item 1 Item 2 Item 3 ** Onde: : indica o ínicio da lista pontuada; TYPE=”formato”: indica o formato do marcador da lista, pode ser: disc : formato de ponto (padrão utilizado pelos navegadores); square: formato de quadrado; circle: formato de círculo; : indica os tópicos da lista. : indica o fim da lista.
____________________________________________________________
Página - 25 - **
Listas não numeradas **
** Listas não numeradas
Type = "disc" Item 1 Item 2 Item 3
type="square" Item 1 Item 2 Item 3
type = "circle" Item 1 Item 2 Item 3
** Fígura 6.1 Modelo de lista não numerada
____________________________________________________________
Página - 26 - 6.2 LISTAS NUMEREDAS A lista numerada é semelhante a lista não numerada, porém no lugar de marcadores é inserido na página uma lista numérica ou alfabética, com valor pré-definido ou não. Comando: ** Item 1 Item 2 Item 3 ** Onde: OL: indica o ínicio da lista numerada. Type=”formato” : indica o formato da numeração da lista, que pode ser: 1: Lista numérica A: Lista alfabética com letras maiúsculas; a: Lista alfabética com letras minúsculas; I : Lista numérica com números romanos maiúsculos; i : Lista numérica com números romanos minúsculos. START=”n” : indic o valor inicial da lista numerada; : indica o tópico da lista. indica o fim da lista numerada. **
Listas numerada
Listas numeradas Lista numerada padrão
Item 1 Item 2 Item 3
Lista numerada padrão com START="10"
Item 1**
As listas intercaladas são utilizadas para melhor organizar as estruturas dos itens, podendo criar hierarquias, unindo listas numeradas com listas não numeradas. **
Listas Intercaladas
Lista Intercaladas
Estados da Região Sul
Paraná Santa Catarina
Estados da região Sudeste
São Paulo Rio de Janeiro Minas Gerais
**
____________________________________________________________
Página - 30 - Fígura 6.4 Modelo de Lista Intercalada
Exercícios Revisão
REVISÃO – CAPÍTULO 6
**1) Para que servem as listas?
- Defina: a) LISTA NÃO NUMERADA:** ________________________________________________________________
_ b) LISTA NUMERADA:_________________________________________________________________ ___
_ c) LISTA DE DEFINIÇÕES: ________________________________________________________________
_ **d) LISTA INTERCALADA:______________________________________________________________
- A tag é utilizada para indicar qual tipo de lista?
- Para escreve uma lista alfabética, qual o comando devo utilizar? Escreva o comando.
- Qual a diferença entre a lista de definições das demais listas?**
____________________________________________________________
Página - 31 -
7. Imagens
Hoje em dia, a grande maioria dos navegadores exibem imagens dispostas em sites, porém as imagens possuem formatos específicos, pois não é qualquer tipo de arquivo de imagem que deve ser inserido em uma página para WEB. Os formatos mais aceitos são os arquivos com a extensão: .GIF ou. JPEG (JPG). O formato GIF (Grafic Interchange Format) suporta no máximo 256 cores e gera imagens com tamanhos menores. Este formato é muito utilizado para desenhos ou gráficos, gerando arquivos com a extensão .GIF. Já o formato JPEG (Joint Photografic Engineering Group) suporte 16 milhões de cores e pode reduzir o tamanho de uma imagem em até 10 vezes. Este formato é muito utilizado para fotos, gerando arquivos com a extensão .JPEG ou JPG. Ao utilizar gifs animados, tenha cuidado, pois estes arquivos podem ocupar bastante espaço em disco. O tamanho dos gifs animados dependerá da quantidade de cores e quadros utilizados para a animação. Estes detalhes farão com que sua página carregue mais rápido no navegador do usuário, tornado assim a visitação ao site mais agradável.
____________________________________________________________
Página - 32 - **7.1 INSERINDO IMAGENS NA PÁGINA Comando: ** Onde: : tag que indica que há uma imagem na página. Src =”diretorio/arquivo” : atributo que indica o diretório e a imagem que deverá ser exibida. Fígura 7.1 Modelo de inserção de imagens
____________________________________________________________
Página - 33 - 7.2 DIMENSIONANDO IMAGENS Todas as imagens possuem um tamanho x e y, sendo x sua largura e y a sua altura. O tamanho das imagens exibidas no navegador pode ser redimensionada. Para redimensionar a imagem utilizamos dois atributos: o WIDHT e o HEIGHT. Comando:
Onde: Widht=”n”: indica a largura da imagem em pixels. Height=”n” : indica a altura da imagem em pixels. Fígura 7.2 Modelo de redimensionamento de imagens NOTA: MUITO CUIDADO , ao redimensionar imagens, pois elas podem perder a sua definição, ficando com o aspecto distorcido.
____________________________________________________________
Página - 34 - 7.3 ALINHANDO IMAGENS As imagens inseridas em uma página podem ser posicionadas na tela da seguinte forma: TOP, MIDDLE, BOTTOM, LEFT e RIGHT. O atributo utilizado para alinhar a imagem é o ALIGN.
2) Defina os alinhamentos: a) TOP: ________________ ____________________________________________________________
_ **b) MIDDLE:
_**
_ c) BOTTOM : ___________________________________________________________________________
_ **d) LEFT:
e) RIGHT:
__
- O atributo ALT é utilizado para:**
____________________________________________________________
Página - 38 -
8. Tabelas
As tabelas são muito utilizadas na internet hoje em dia, para estruturar o layout das páginas, para organizar dados, etc. Em uma tabela podemos inserir textos, imagens, links e outros elementos e ainda podemos utilizar uma tabela dentro outra tabela. No primeiro contato, é possível achar difícil a compreensão das tags utilizadas para estruturar as tabelas, mas com o uso tornará mais fácil a utilização e a interpretação de possíveis falhas que um editor de HTML qualquer possa gerar. **8.1 MARCAÇÕES BÁSICAS ** Esta tag indica o ínicio e o fim da tabela. O atributo border insere uma borda para marcar a divisão das células.
Esta tag indica as linhas da tabela.
Esta tag indica as células contidas em cada linha da tabela. É nesta tag que inserimos os dados que serão exibidos na tabela.
Esta tag define os títulos de uma tabela, podendo ser utilizado em qualquer célula. A diferença entre a tag e a tag é que o conteúdo inserido entre as tags será
exibido em negrito.
Esta tag insere a legenda da tabela. Deve ser inserida entre as tags .
____________________________________________________________
Página - 39 - 8.2 DESENVOLVENDO UMA TABELA SIMPLES Com base no conteúdo do item acima, vamos desenvolver nossa primeira tabela. **1.º MODELO
Primeira Célula – 1ª Linha Segunda Célula – 1ª Linha
Primeira Célula – 2ª Linha Segunda Célula – 2ª Linha
** Onde o comando acima irá ser exibido da seguinte forma: Fígura 8.1 Primeiro modelo de tabela
____________________________________________________________
Página - 40 - **2.º MODELO
Modelo 2 de Tabelas Simples
Itens/Mês Janeiro Fevereiro Março
Usuários 100 200 300
Linhas 1 2 3
** Fígura 8.2 Segundo exemplo de tabela
____________________________________________________________
Página - 41 - 8.3 ATRIBUTOS DE CONTROLE DE TABELAS WIDTH Este atributo é utilizado para alterar a largura da tabela e das células em relação ao navegador. Os valores inseridos podem ser em pixel ou em percentuais, ou seja, este atributo determina a área da tela que a tabela irá ocupar. Comando: **1º MODELO – WIDTH na tag
Segunda Terça Quarta**
