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

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

Material desenvolvido por Alan Carvalho

Apresentações semelhantes


Apresentação em tema: "Material desenvolvido por Alan Carvalho"— Transcrição da apresentação:

1 Material desenvolvido por Alan Carvalho
HTML Material desenvolvido por Alan Carvalho

2 Objetivos Introduzir conceitos fundamentais sobre a Web, como hipertexto, hipermídia, linguagens de marcação e outros. Permitir que o Aluno conheça e saiba aplicar recursos da linguagem de marcação de hipertexto HTML na criação de sites. Permitir que o Aluno conheça e saiba aplicar recursos da linguagem de definição de estilos CSS na criação de sites.

3 Tópicos Principais Conceitos Fundamentais sobre a Web HTML CSS

4 Conceitos Fundamentais sobre a Web

5 1 Introdução Conceito de Hipertexto O que é a World Wide Web
Origem da Web Características da Web W3 Consortium

6 Conceito de Hipertexto
Hipertexto é um texto construído para ser não-linear, contendo pontos de ligação para outros textos. Hipermídia é um termo usado para hipertexto que não é formado somente por texto, mas por imagens, vídeo ou sons, por exemplo. Ted Nelson definiu o termo “hipertexto” por volta de 1965 e provavelmente “hipermídia” também.

7 O que é a World Wide Web Numa tradução livre do original obtido no W3 Consortium: “A WorldWideWeb (W3) é uma iniciativa de larga escala para acesso e recuperação de documentos por hipermídia, com o intuito de permitir acesso universal a uma grande variedade de documentos.”

8 Origem da Web (1/2) Em 1989, Tim Berners-Lee e Robert Caillau começaram a pensar num modelo de sistema de integração de documentos que pudesse ser usado pelos diferentes tipos de computadores do CERN (laboratório de pesquisa nuclear onde trabalhavam, em Genebra). Não havia uma linguagem comum que permitisse essa integração. Alguns usavam PostScript, TeX e SGML.

9 Origem da Web (2/2) A partir da linguagem de marcação SGML eles projetaram a linguagem HTML e o protocolo HTTP, para transporte dos dados através da rede. O projeto foi iniciado em 1989 e em 1992 a Web passou a existir como parte da Internet.

10 Características da Web (1/3)
Fornecer um meio simples de buscar informações armazenadas em sistemas remotos, de forma que possam ser lidas por seres humanos. Permitir que a informação possa ser definida em um formato comum entre fornecedor e consumidor da informação. Permitir a exibição de textos e gráficos nos diversos dispositivos existentes.

11 Características da Web (2/3)
Permitir a criação e manutenção de conjuntos de documentos por seus próprios autores. Permitir a ligação entre esses documentos ou conjuntos de documentos. Permitir um meio de busca, baseado em palavras-chave, além de poder ser navegada através dos links.

12 Características da Web (3/3)
Permitir o uso de software de domínio público, livre de taxas e que este possa fazer a interface com eventuais sistemas proprietários.

13 W3 Consortium (1/2) É uma associação de empresas, entidades de pesquisa e grupos de usuários ao redor do mundo com o intuito de definir especificações técnicas que regulem o funcionamento da Web. Possui hoje mais de 500 membros, entre eles Netscape, Microsoft, IBM, Novell, Cisco, entre outros.

14 W3 Consortium (2/2) Exemplos: HTML, HTTP, CSS, SMIL, PICS, XHTML, SVG, PNG, DOM, XML etc. Todas as especificações estão disponíveis para consulta e, em alguns casos, download.

15

16 HTML

17 2 Introdução O que é a HTML Tags e Atributos
Estrutura Básica de uma Página Ambiente de Desenvolvimento Publicação e Recuperação

18 O que é a HTML HTML (HyperText Markup Language) é a língua padrão para publicação de hipertexto e hipermídia na Web. É uma linguagem baseada na SGML, mas sem a complexidade dessa última. HTML não é uma linguagem de programação.

19 Tags ou Elementos Tags ou elementos são marcações que permitem definir a estrutura do documento. <enciclopédia> <volume> <tópico> conteúdo </tópico> </volume> </enciclopédia> Algumas tags não possuem o respectivo fechamento

20 Atributos (1/2) São propriedades relativas às tags, que possuem valores definidos por default ou pelo autor do documento. <enciclopédia nome=“Saber Total”> <volume numero=“1”> <tópico nome=“Internet”> conteúdo </tópico> </volume> </enciclopédia> Nem todas as tags têm atributos

21 Atributos (2/2) Quando a tag tiver vários atributos, estes devem aparecer separados por um espaço. É recomendado que seus valores sejam escritos entre aspas. Não é necessário escrever os atributos no fechamento da tag. A ordem dos atributos dentro de uma tag não é importante.

22 Estrutura Básica de uma Página
Uma página típica possui: Document Type Definition (às vezes) A tag <HTML> Uma seção delimitada pela tag <HEAD> Uma seção delimitada pela tag <BODY> Em alguns casos usa-se a tag <FRAMESET>

23 DTD (1/4) A DTD (Document Type Definition) é uma declaração SGML colocada no início do documento. Define o “dicionário” utilizado na construção da página. Importante no processo de validação. Opcional nos outros casos, em se tratando de HTML.

24 DTD (2/4) Na HTML 4 existem três DTDs:
Strict – inclui todos os elementos que não foram considerados “depreciados” ou não aparecem em definições de framesets. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd">

25 DTD (3/4) Transitional – inclui a Strict DTD e todos os elementos considerados “depreciados”. É considerada uma forma de manter a compatibilidade com versões anteriores da HTML. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

26 DTD (4/4) Frameset – inclui todos os elementos necessários para a criação de frames. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

27 <HTML> Colocada após a DTD e fechada no final da página, define que a página é um documento HTML. É opcional e considerada depreciada quando se declara a DTD pois acaba sendo redundante.

28 <HEAD> Colocada logo após a tag <HTML> ou a DTD.
Opcional porém, se usada, precisa ser aberta e fechada. Define uma seção da página onde aparecem informações sobre a mesma como título e palavras-chave para pesquisa.

29 <TITLE> Opcional e definida dentro da seção aberta por <HEAD>. Toda página deve ter um título. Precisa ser aberta e fechada. Alguns browsers podem ler o título para pessoas com limitações visuais.

30 <BODY> Opcional e definida após o final da seção aberta por <HEAD>. Se for utilizada, precisa ser aberta e fechada. Define a seção onde o conteúdo da página é inserido, seja ele texto, imagem, animação, som, vídeo etc.

31 <html> <head> <title>Web Sites - HTML</title> </head> <body> <h1>A Linguagem HTML</h1> <p>HTML e a linguagem fundamental para marcacao de hipertexto e publicacao de conteudo na World Wide Web.</p> </body> </html>

32 Ambiente de Desenvolvimento
Ambiente básico de desenvolvimento: Editor de textos que salve em formato ASCII sem formatação. Browsers para testar as páginas Microsoft Internet Explorer Netscape Communicator 4.7x Netscape 6.01

33 Ambiente de Desenvolvimento
Outros softwares, como editores WYSIWYG (ou quase), podem aumentar a produtividade do desenvolvedor, desde que este saiba o que está fazendo. Macromedia Dreamweaver Adobe GoLive Microsoft FrontPage Allaire HomeSite

34 Publicação e Recuperação (1/3)
Os documentos (páginas) e todos os arquivos que compõem o site necessitam ser disponibilizados para visualização a partir de um servidor Web ou servidor HTTP. Para isso, utiliza-se algum software que trabalhe com o protocolo FTP ou a simples gravação dos arquivos em algum diretório configurado para receber o site no disco do servidor Web.

35 Publicação e Recuperação (2/3)
Após a publicação, as páginas estão disponíveis para visualização através do browser. Para acessar uma página qualquer: 1. O visitante requisita a URL da página no browser. 2. O browser envia através da rede a requisição para o servidor.

36 Publicação e Recuperação (3/3)
3. O servidor recebe a solicitação e pesquisa na estrutura de diretórios se a página desejada existe. Se não existir: devolve uma mensagem de erro Se existir: envia a página para o browser, que começa a interpretar e exibir seu conteúdo 4. Para cada arquivo referenciado na página, uma nova requisição será feita pelo browser.

37

38 Formatação de Página e Texto
3 Cores de Texto e Fundo Cabeçalhos Parágrafos e Blocos Negrito, Itálico, Sublinhado e outros efeitos Réguas Definindo Características de Fonte Listas

39 O sistema sRGB (1/2) As cores são definidas por tons de vermelho (R), verde(G) e azul(B). São 255 tons para cada cor, formando aproximadamente 16M cores definidas por um código hexadecimal de seis dígitos. Em alguns casos, o nome da cor pode ser usado no lugar do código. Uso da paleta segura de 216 cores.

40 O sistema sRGB (2/2)

41 Acentuação Não se recomenda acentuar o texto diretamente, como se estivesse usando um processador de textos. No lugar disso, recomenda-se usar as chamadas “referências de caracteres”, que são códigos para símbolos especiais, como acentos e outros sinais. Na especificação HTML existe a relação completa de códigos.

42 Cores de Texto e Fundo <body bgcolor=“cor” text=“cor”>
bgcolor – define a cor de fundo text – define a cor do texto Se não definidas, usa-se o padrão do browser. A cor obedece ao padrão sRGB (single RGB) e pode ser definida com seu nome ou código hexadecimal.

43 Cabeçalhos <hn align=“val”>texto</hn>
Define um padrão de título O “n” é um número de 1 a 6 (1 é o maior título; 6 é o menor título) O atributo align permite definir o alinhamento do cabeçalho (left, right, center ou justify).

44 Parágrafos e Quebras de Linha
São definidos pela tag <p>, que tem seu fechamento opcional. <p align=“val”>texto</p> Os parágrafos serão separados por uma linha em branco. As quebras de linha são definidas pela tag <br>, que não tem fechamento.

45 Blocos Definidos pela tag <div>, que tem seu fechamento obrigatório. <div align=“val”>texto</div> Muito utilizados na definição de camadas para efeitos de HTML dinâmica. Assemelham-se também a parágrafos.

46 Efeitos de Texto <b>texto</b> - negrito <i>texto</i> - itálico <u>texto</u> - sublinhado <sup>texto</sup> - sobrescrito (expoente) <sub>texto</sub> - subscrito (índice) <big>texto</big> - aumenta o texto <small>texto</small> - diminue o texto <tt>texto</tt> - usa fonte monoespaçada <pre>texto</pre> - obedece formatação

47 Réguas Definidas pela tag <hr>, que não têm fechamento.
<hr width=“larg” align=“val” size=“alt” noshade> width – largura da régua align – alinhamento horizontal size – espessura da linha em pixels noshade – se definido, preenche a linha

48 Definindo Fontes Através da tag <font>, cujo fechamento é obrigatório, definem-se três atributos para a fonte. <font size=“tam” color=“cor” face=“tipos”>texto</font> size – tamanho do texto (entre 1 e 7) color – cor (código ou nome) face – lista de tipos

49 Definindo Fontes O nome da fonte não é case-sensitive.
Caso o usuário não tenha a 1ª fonte da lista instalada em seu computador, será assumida a próxima fonte e assim sucessivamente, até utilizar a fonte padrão do browser. Não há uma correspondência entre o tamanho da cor e qualquer medida tipográfica (pt, por exemplo).

50 Listas Usadas para exibir listas de ítens. Podem ser: Não-ordenadas
Definição

51 Listas Não-Ordenadas (1/2)
Definidas pela tag <ul>, com seu respectivo fechamento e pela tag <li>, sem necessidade de fechamento. <ul> <li>Software <li>Hardware <li>Manuais </ul>

52 Listas Não-Ordenadas (2/2)
As tags <ul> e <li> aceitam o atributo type, que define o tipo do marcador (circle, square ou disc). <ul type=“circle”> <li>Software <li type=“disc”>Hardware <li>Manuais </ul>

53 Listas Ordenadas (1/3) Definidas pela tag <ol>, com seu respectivo fechamento e pela tag <li>, sem necessidade de fechamento. <ol> <li>Software <li>Hardware <li>Manuais </ol>

54 Listas Ordenadas (2/3) As tags <ol> e <li> aceitam o atributo type, que define o estilo de numeração (1, A, a, I ou i). <ol type=“I”> <li>Software <li type=“A”>Hardware <li>Manuais </ol>

55 Listas Ordenadas (3/3) A tag <ol> aceita o atributo start, que define o valor inicial para os elementos da lista. <ol type=“I” start=“5”> <li>Software <li>Hardware <li>Manuais </ol>

56 Listas de Definição (1/2)
Permitem listar tópicos e suas definições, numa idéia de sumário. <dl>...</dl> - inicia e termina a lista <dt> - define um tópico <dd> - define o texto desse tópico

57 Listas de Definição (2/2)
<dl> <dt>HTML <dd>Linguagem de marcacao usada na Web <dt>JavaScript <dd>Linguagem de scripts usada para automacao de paginas <dt>ASP <dd>Tecnologia que permite criar conteudo dinamico </dl>

58

59 4 Inserindo Imagens Tipos de Imagens Aceitas A tag <IMG>
Definindo a URL Definindo Texto Alternativo Definindo as Dimensões Definindo o Alinhamento Definindo o Espaçamento Plano de Fundo

60 Tipos de Imagens Aceitas
GIF (Graphical Interchange Format) JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics) Esses tipos de arquivo proporcionam compressão com boa qualidade de apresentação. Imagens de outros tipos devem ser convertidas.

61 A tag <IMG> A tag <IMG> é usada para inserir uma imagem em qualquer parte do conteúdo de uma página. Ela não possui fechamento, pois não delimita uma área da página para inserção da imagem. Quanto maior o tamanho do arquivo da imagem, mais tempo levará para seu download.

62 Definindo a URL (1/2) <img src=“URL”>
Define a URL da imagem a ser inserida na página para exibição. Pode ser uma URL relativa ou absoluta. O arquivo poderá fazer parte de outro site, desde que não infrinja a legislação de direitos autorais.

63 Definindo a URL (2/2) A URL relativa baseia-se na URL da página.
A URL absoluta é o caminho completo para o recurso. Usar imagens de outro site tem algumas desvantagens. Se a imagem não for encontrada ou carregada, aparecerá algum sinal indicativo em seu lugar.

64 Definindo Texto Alternativo
Caso o browser não possa exibir imagens, pode ser definido um texto alternativo, que aparecerá no espaço destinado à imagem. Essa é uma prática recomendada. O atributo ALT permite definir o texto alternativo. Alguns desenvolvedores colocam o tamanho do arquivo no texto.

65 Definindo as Dimensões
Normalmente, as imagens são exibidas em seu tamanho natural. Pode-se mudar o tamanho da imagem na tela, declarando suas novas dimensões (WIDTH para largura e HEIGHT para altura) em pixels ou usando uma porcentagem. Somente uma das medidas pode ser informada. O ajuste é feito automaticamente. É recomendado definir esses atributos.

66 Definindo o Alinhamento
O alinhamento da imagem é em relação ao conteúdo inserido logo após essa imagem. O atributo usado para isso é ALIGN e seus valores podem ser bottom, middle, top, left e right. Cada browser pode interpretar esses valores de forma diferente. Não é vantajoso em todos os casos.

67 Definindo o Espaçamento
Serve como uma espécie de margem ao redor da figura, separando-a do conteúdo que aparece antes e após a figura. Existem dois atributos que definem os espaçamentos: VSPACE (vertical) e HSPACE (horizontal), definidos em pixels. Servem como paliativo para posicionamento da imagem.

68 Plano de Fundo <body background=“url”>
Define uma figura para servir como “papel de parede” da página. A figura é repetida por toda a página. A cor de fundo fica “atrás” da figura. Quanto menor o tamanho do arquivo, melhor. Cuidado com as cores e padrão da figura.

69

70 5 Criando Links A tag <A> Definindo a URL Links para Arquivos
Links para Criando Âncoras (bookmarks) Cores dos Links Mapas de Imagem

71 A tag <A> A tag <A> permite definir links, que são regiões de uma página que servirão de ponto de acesso para qualquer URL. Essa tag precisa ser fechada, quando usada. Os links são destacados no browser por default; geralmente o texto fica sublinhado e as figuras com uma borda ao seu redor.

72 Definindo a URL Use <a href=“URL”>conteúdo</a>
A URL pode ser relativa ou absoluta. A URL pode ser qualquer arquivo ou recurso disponível na rede. Se a URL não existir, será retornada uma mensagem “404 Error” para o browser.

73 Links para Arquivos Basta que o link aponte para uma URL referente a um arquivo. Se o tipo do arquivo for reconhecido pelo browser, ele poderá ser aberto. Caso não seja, aparecerá a caixa para que o usuário defina o que fará com o arquivo. Possibilidade de criar links de download.

74 Links para e-mail <a href=“mailto:endereco”>conteúdo</a>
O software de do usuário será acionado automaticamente, caso esteja instalado e configurado corretamente. Não há segurança de que a mensagem será enviada.

75 Criando Âncoras (1/2) Âncoras ou bookmarks são pontos determinados dentro de uma página para os quais é possível criar links. Isso permite que sejam criados links para outras partes dentro da mesma página, facilitando a navegação quando o conteúdo da página é longo. Ex: FAQ (Frequently Asked Questions)

76 Criando Âncoras (2/2) <a name=“nome”></a> Cria a âncora.
<a href=“#nome”>conteúdo</a> Permite o acesso a essa âncora.

77 Cores dos Links <body link=“cor” vlink=“cor” alink=“cor”>
link – os links para páginas que ainda não foram visitadas. vlink – os links para páginas que já foram visitadas. alink – o link ativo (o último link acionado) A relação de páginas acessadas fica no histórico do browser.

78 Mapas de Imagem (1/7) Permite definir mais de um link para uma mesma imagem. O link é relativo a uma determinada região da imagem, delimitada por coordenadas relativas ao primeiro pixel (0,0) da imagem. Três tipos de regiões podem ser definidas: Círculos – Retângulos (ou quadrados) – Polígonos (formas irregulares)

79 Mapas de Imagem (2/7) O mapa de imagem é uma espécie de “gabarito de links” aplicado sobre uma determinada imagem. Todo mapa deve ter um nome, para que possa ser vinculado a uma imagem. Para dar o nome ao mapa, usa-se a tag <map>, que precisa ser fechada. <map name=“nome”>dados</map>

80 Mapas de Imagem (3/7) Para marcar regiões circulares:
<area shape=“circle” href=“URL” coords=“x,y,z”> x,y – coordenadas do centro do círculo z – raio do círculo em pixels <area shape=“circle” href=“saopaulo.html” coords=“100,200,50”>

81 Mapas de Imagem (4/7) Para marcar regiões retangulares:
<area shape=“rect” href=“URL” coords=“a,b,c,d”> Cada par representa um dos cantos opostos do retângulo (ou quadrado). <area shape=“rect” href=“URL” coords=“10,20,100,100”>

82 Mapas de Imagem (5/7) Para marcar regiões irregulares:
<area shape=“polygon” href=“URL” coords=“x,y,x1,y1,x2,y2,x3,y3,x4,y4...”> x e y – coordenadas que marcam cada vértice do polígono

83 Mapas de Imagem (6/7) Para vincular o mapa à imagem:
<img usemap=“#nome_do_mapa”>

84 Mapas de Imagem (7/7) Os editores de sites (FrontPage, DreamWeaver etc) têm recursos para criação facilitada de mapas de imagens. Existem softwares especialmente desenvolvidos para a criação de mapas de imagens.

85

86 6 Tabelas Definindo a Tabela Definindo Linhas e Dados
Largura de Tabela e Células Alinhamento de Tabela, Linhas e Células Cores e Fundos Expandindo Células Espaçamento entre Células

87 Definindo a Tabela Tabelas são usadas não só para exibir dados em formato de linhas ou colunas, mas principalmente para controlar o posicionamento de imagens e textos em uma página. A tag <table> é usada para criar tabelas. Deve ser aberta e fechada.

88 Definindo Linhas e Dados
Use <tr> para definir cada linha de dados. Essa tag pode ou não ser fechada. Use <td> ou <th> para definir cada célula que faça parte de uma determinada linha. Essas tags podem ou não ser fechadas. A tag <th> coloca automaticamente os dados em negrito e centralizados.

89 Largura de Tabela e Células
O atributo width pode ser usado tanto na tabela (tag <table>) como nas células (tags <td> ou <th>). A largura pode ser em pixels ou em porcentagem. Se a largura da tabela for em porcentagem, esta se adaptará ao espaço da janela do browser.

90 Alinhamento O atributo align pode ser usado na tabela, linhas e células, controlando o alinhamento horizontal dos dados. O atributo valign pode ser usado nas linhas e células, controlando o alinhamento vertical dos dados.

91 Cores e Fundos A tabela é transparente. Por isso, assume a cor de fundo da página. O atributo bgcolor pode ser usado na tabela, linhas e células para definir a cor de fundo. O atributo background não faz parte da especificação padrão HTML e é tratado de formas diferentes pelos browsers.

92 Expandindo Células O atributo colspan permite estender o alcance de uma célula por diversas colunas na tabela. O atributo rowspan permite estender o alcance de uma célula por diversas linhas na tabela.

93 Espaçamento entre Células
O atributo cellspacing controla o número de pixels entre as células. O atributo cellpadding controla o número de pixels dentro das células.

94

95 7 Formulários Considerações Iniciais Definindo o Formulário
Definindo Controles Tipos de Controles Controle de Tabulação Teclas de Acesso Evitando o Acesso a Controles Definindo o Envio

96 Considerações Iniciais
No que se refere à HTML, é importante notar que é possível apenas criar a interface, ou seja, definir os campos com suas características básicas. Não se consegue implementar qualquer espécie de programação ou interação com bancos de dados em HTML, para o que são necessárias outras linguagens e tecnologias como JavaScript, ASP, PHP etc.

97 Definindo o Formulário (1/2)
A tag <form> é usada para definir o início e o final do formulário. É necessário fechar essa tag. Na tag <form> existem diversos atributos que definem o endereço de destino dos dados, bem como a forma de codificação dos dados e o método de envio. Esses atributos serão vistos nesse Capítulo.

98 Definindo o Formulário (2/2)
Existem diversos tipos de campos, semelhantes aos encontrados em caixas de diálogo de diversos softwares, de forma que o preenchimento do formulário é, até certo ponto, conhecido pela maior parte dos usuários. Quaisquer limites e/ou restrições devem ser indicadas no formulário e geralmente usam-se legendas para isso.

99 Definindo Controles Controle é o nome que se dá a cada campo do formulário. Todo controle possui um atributo (name) que o identifica. Todo controle possui valores iniciais (default) ou definidos pelo usuário quando do preenchimento do formulário. Todos os valores decorrentes do preenchimento do formulário são considerados texto.

100 Texto Simples Exibe uma única linha de texto, na qual pode ser inserida qualquer espécie de caractere. São usadas para nomes, endereços, endereços de , CEP, números, CPF, RG etc. <input type=“text” name=“nome” size=“tam” maxlength=“tam” value=“valordefault”> Essa tag não possui fechamento.

101 Caixa de Texto Exibe uma caixa de texto que pode ser dimensionada pelo desenvolvedor. Qualquer espécie de caractere pode ser inserida nessa caixa e não há como definir limite de caracteres. <textarea name=“nome” rows=“lin” cols=“col”>valordefault</textarea> O fechamento dessa tag é necessário.

102 Caixa de Seleção (combo) – 1/2
Exibe um menu com diversas opções, sendo que o usuário pode selecionar uma ou mais opções. <select name=“nome” size=“lin” multiple> É necessário fechar essa tag.

103 Caixa de Seleção (combo) – 2/2
A tag <option> define cada opção do menu. O fechamento dessa tag é opcional. <option value=“valor” selected>Texto O valor representa a informação atribuída ao campo se a opção for escolhida. Se o atributo selected for usado, a opção virá previamente selecionada, sendo que o default é a primeira opção.

104 Checkbox É uma caixa do tipo liga/desliga que pode ser modificada livremente pelo usuário. <input type=“checkbox” name=“nome” value=“valor” checked> Se o atributo checked for usado, a caixa virá ligada por default. Essa tag não possui fechamento.

105 Radio São botões semelhantes a checkboxes, mas que são de escolha mutuamente exclusiva, ou seja, em um grupo de botões, apenas um deles pode ser selecionado. <input type=“radio” name=“nome” value=“valor” checked> Essa tag não possui fechamento. Os nomes dos botões em um grupo precisam ser os mesmos.

106 Campos Ocultos São usados geralmente quando é necessário enviar alguma espécie de informação que não deva ser alterada pelo usuário, pois o campo não aparece para modificação. <input type=“hidden” name=“nome” value=“valor”> Essa tag não possui fechamento.

107 Senha Semelhante à caixa de texto de uma linha, na qual aparecem asteriscos durante a digitação dos dados. <input type=“password” name=“nome” size=“tam” maxlength=“tam”> Esse campo não possui qualquer segurança do tipo criptografia; apenas exibe os asteriscos. Essa tag não possui fechamento.

108 Arquivo Permite a seleção de um arquivo no disco do computador do visitante. <input type=“file” name=“nome”> Esse campo é geralmente usado para permitir upload de arquivos, mas necessita de um script auxiliar (ASP, PHP, CGI) para que o envio do arquivo funcione. Essa tag não possui fechamento.

109 Botões (1/3) Existem quatro tipos de botões, definidos através da tag <input>, que não possui fechamento. submit: faz com que o browser envie os dados para o endereço definido na tag <form>. reset: faz com que o formulário seja recarregado.

110 Botões (2/3) image: cria um botão de envio baseado em uma imagem, cuja URL deve ser definida na tag. button: cria um botão que não possui ação previamente definida, devendo esta ser programada pelo desenvolvedor através de scripts executados no browser (com JavaScript ou VBScript, por exemplo).

111 Botões (3/3) <input type=“submit” value=“texto”>
<input type=“reset” value=“texto”> <input type=“image” src=“URL”> <input type=“button” value=“texto”>

112 Controle de Tabulação Normalmente, o cursor passa de um controle para outro através da tecla [Tab] na sequência da inserção dos controles no formulário. Caso deseje alterar essa sequência, pode-se utilizar o atributo tabindex, com valores válidos de 1 a <input type=“text” name=“nome” tabindex=“3”>

113 Teclas de Acesso Pode ser programada uma tecla de acesso rápido ao controle através do atributo accesskey. Em sistemas Windows, deve-se usar [Alt]+tecla. No Macintosh, usa-se [Cmd]+tecla. <input type=“text” name=“nome” accesskey=“n”>

114 Evitando o Acesso ao Controle
O acesso ao controle pode ser evitado através dos atributos disabled e readonly. Valores de controles disabled não são enviados. Valores de controles readonly são enviados. <input type=“text” name=“nome” readonly> <input type=“text” name=“nome” disabled>

115 Definindo o Envio (1/3) O envio é definido através de atributos da tag <form>: action – define a URL responsável pela entrega dos dados, geralmente um script criado pelo desenvolvedor ou fornecido pelo provedor. Pode ser usada a URL mailto: para acionar o software de do cliente.

116 Definindo o Envio (2/3) method – pode ser post ou get. Se for get, os dados serão anexados à URL definida no atributo action, separados desta por um “?” e separados entre si por um “&”. Existe um limite de 1024 caracteres nesse método. Se for post, os dados serão enviados diretamente para a URL definida em action. O melhor método dependerá da necessidade do desenvolvedor.

117 Definindo o Envio (3/3) enctype – define o tipo MIME dos dados a ser usado, quando o método for post. O valor default é application/x-www-form-urlencoded, que transforma caracteres especiais em códigos “escaped”. Se for usado mailto: em action, deverá ser usado text/plain.

118

119 8 Frames Conceito Criando o Frameset Definindo os Frames
Usando Targets Controlando a Aparência dos Frames Conteúdo Alternativo

120 Conceito (1/2) Os frames permitem exibir diversas páginas ao mesmo tempo dentro da mesma janela do browser, criando ou não uma relação entre essas páginas. Isso permite manter determinadas informações sendo exibidas, enquanto que outras são modificadas.

121 Conceito (2/2) Exemplo: ter ao mesmo tempo um banner sendo exibido em uma região da janela, uma barra de navegação sendo exibida em outra e o conteúdo propriamente dito sendo exibido em uma terceira parte da janela. O banner pode ser trocado a qualquer instante sem a necessidade de recarregar a página por completo, o mesmo acontecendo com o conteúdo, quando um link for acionado.

122 Criando o Frameset (1/4) Frameset é uma espécie de gabarito, que representa a disposição das páginas na janela do browser. Para criar o frameset usa-se a tag <frameset>, que precisa ser fechada. <frameset cols=“listadecolunas”> <frameset rows=“listadelinhas”>

123 Criando o Frameset (2/4) <frameset cols=“50%,50%”>
Define duas colunas, cada uma ocupando 50% da largura da janela. <frameset rows=“10%,30%,60%”> Define três linhas, sendo que a primeira (superior) ocupa 10% da altura da janela, a segunda (central) ocupa 30% dessa altura e a última (inferior) ocupa 60% da altura da janela.

124 Criando o Frameset (3/4) <frameset cols=“200,*”>
Define duas colunas, sendo a primeira (da esquerda) com 200 pixels de largura e a segunda com o espaço restante da janela do browser. <frameset rows=“*,30%”> Define duas linhas, sendo que a inferior ocupa 30% da altura disponível e a superior o espaço restante.

125 Criando o Frameset (4/4) <frameset cols=“1*, 3*”>
Define duas colunas, sendo que a da esquerda receberá 25% (1/4) e a da direita 75% (3/4) do espaço disponível. <frameset cols=“50%,*” rows=“50%,*”> Define duas colunas com 50% de largura e duas linhas com 50% de altura, formando uma grade.

126 Definindo os Frames Através da tag <frame> define-se o conteúdo de cada frame. Para cada frame criado em <frameset> é obrigatória a inserção de uma tag <frame>. <frame src=“url”> Outras características podem ser definidas através dessa tag. Ainda veremos quais são elas.

127 Usando Targets (1/2) Por default, um link abrirá sua URL no mesmo frame onde se localiza. Caso queira indicar outro frame, é necessário inserir no link o atributo target, seguido do nome do frame. Então, ao criar o frame, seu nome deve ser definido através do atributo name da tag <frame>.

128 Usando Targets (2/2) Outros targets interessantes são:
_blank – faz com que a página seja aberta em outra janela do browser. _top – faz com que a página seja aberta ocupando toda a janela do browser, ou seja, destruindo os frames. _self – faz com que a página seja aberta no próprio frame do link.

129 Aparência dos Frames (1/3)
Existem diversos atributos da tag <frame> que permitem controlar a aparência dos frames. frameborder – se definido como 1 (default), desenha uma linha separadora entre o frame e aqueles que lhe são próximos. Se definido como 0, não desenha essa linha. noresize – se inserido, faz com que o frame não possa ser redimensionado.

130 Aparência dos Frames (2/3)
marginwidth – define a margem esquerda do conteúdo do frame em pixels. marginheight – define a margem superior do conteúdo do frame em pixels. Esses atributos também podem ser definidos na tag <body>, embora isso não esteja previsto na especificação HTML padrão.

131 Aparência dos Frames (3/3)
scrolling – se definido como auto (default), informa ao browser que, se necessário, deve exibir a barra de rolagem no frame. Se definido como no, não exibe a barra e se for yes, exibe a barra sempre. Para controlar o espaçamento entre os frames, existem dois atributos não definidos pelo W3C: framespacing e border, que devem ser inseridos na tag <frameset>.

132 Conteúdo Alternativo (1/2)
Existem browsers que não suportam o uso de frames ou mesmo que possam ser configurados para não aceitar frames. Assim, existe a necessidade de definir um conteúdo alternativo para ser exibido nesses casos. Isso é feito através da tag <noframes>, que é inserida no frameset e precisa ser fechada.

133 Conteúdo Alternativo (2/2)
<html> <frameset rows=“100,*”> <frame src=“superior.html”> <frame src=“inferior.html”> <noframes> aqui vem a página a ser exibida caso o browser do visitante não suporte frames </noframes> </frameset> </html>

134

135 9 Metatags Conceito Informações de Documentação Mecanismos de Busca
Definindo o Carregamento Fontes de Informação

136 Conceito Metatags ou tags meta são tags de informação sobre a página onde estão inseridas. Todas as metatags aparecem na seção <head> da página. Algumas metatags definem características referentes ao carregamento da página, enquanto outras apenas servirão como documentação da página, por exemplo.

137 Informações de Documentação
Declarando o nome do autor: <meta name=“author” content=“seu nome”> Declarando o nome do software usado: <meta name=“generator” content=“EditPad”>

138 Mecanismos de Busca (1/2)
Relação de palavras-chave: <meta name=“keywords” content=“lista_de_palavras”> Descrição da página: <meta name=“description” content=“descrição da página ou site”>

139 Mecanismos de Busca (2/2)
Controle do “robot” de catalogação: <meta name=“robots” content=“controles”> Os controles podem ser: all: inclui todas as páginas no índice (é o default) index: inclui a página no índice noindex: não inclui a página no índice nofollow: não inclui qualquer página a partir dessa no índice

140 Definindo o Carregamento (1/2)
Definindo a data de expiração: <meta http-equiv=“Expires” content=“Tue, 08 May :00:00 GMT”> Controle do cache: <meta http-equiv=“Cache-Control” content=“no-cache”>

141 Definindo o Carregamento (2/2)
Suporte a idiomas: <meta http-equiv=“Content-Language” content=“br,pt,en”> Conjunto de caracteres padrão: <meta http-equiv=“Content-Type” content=“text/html; charset=ISO ”>

142 Fontes de Informação Especificação HTML 4.01 http://www.w3.org
RFC 2616

143

144 CSS

145 10 Introdução à CSS O que é CSS Detalhes de Sintaxe Unidades de Medida
Cores Utilizando CSS

146 O que é CSS CSS (Cascading Style Sheets) é uma linguagem que permite aos desenvolvedores anexar estilos (definição de fontes, alinhamento, espaçamento etc.) a documentos estruturados (páginas HTML e XML, por exemplo).

147 O que é CSS Uma das vantagens de se trabalhar com CSS é a possibilidade de manter a estrutura e conteúdo separados, o que facilita a manutenção em muitos casos. O W3C recomenda que, no lugar de tags e atributos considerados depreciados, sejam utilizados os recursos da CSS.

148 O que é CSS A especificação mais atual é a CSS2, suportada parcialmente pelos browsers. Essa especificação foi baseada na CSS1, tendo sido acrescentados diversos recursos. Está em desenvolvimento a especificação CSS3. As especificações podem ser obtidas no site do W3C (http://www.w3.org).

149 Detalhes de Sintaxe A CSS possui uma sintaxe própria, baseada nos conceitos de propriedade e valor, que podem ser associados aos conceitos de atributo e valor. Uma declaração é composta pela propriedade, seguida de dois pontos e de seu respectivo valor. propriedade:valor;

150 Detalhes de Sintaxe As declarações podem, dependendo do caso, ser escritas em grupos, devendo ser separadas por ponto-e-vírgula. font-weight:bold; font-size:10pt; color:Blue; font-family:Verdana,Helvetica

151 Detalhes de Sintaxe Se uma propriedade inexistente for inserida, será ignorada pelo browser. Se um valor inexistente ou utilizado de maneira inválida for inserido, será ignorado pelo browser.

152 Unidades de Medida A CSS possui uma gama muito maior de unidades de medida que a HTML, permitindo uma melhor definição da apresentação do conteúdo. Alguns exemplos: pt – pontos (1/72”) pc – picas (12pt) mm – milímetros cm – centímetros in – polegadas px – pixels

153 Cores Também existe uma maior variedade de representações das cores:
- nomes das cores: os 16 nomes padronizados na linguagem HTML podem ser usados - código hexadecimal da cor - rgb(nn,nn,nn) - rgb(nn%,nn%,nn%)

154 Utilizando CSS Existem quatro maneiras de utilizar as propriedades da CSS em uma página: 1. Modificando o comportamento de tags 2. Usando CSS inline 3. Usando Classes e IDs 4. Usando Folhas de Estilo externas

155 Utilizando CSS 1. Modificando o comportamento de tags
Define-se na folha de estilos, delimitada pela tag <style> (que precisa ser fechada), quais as novas propriedades das tags desejadas. Exemplo: abrir a página cssbeh.html

156 Utilizando CSS 2. Usando CSS inline
Utiliza-se o atributo style na tag que o aceitar, definido cada declaração separada por ponto-e-vírgula. Exemplo: abrir a página cssin.html

157 Utilizando CSS 3. Usando Classes e IDs
Pode-se definir um conjunto de declarações e atribuir-lhe um nome de classe, que pode ser entendido como um nome de estilo. Os IDs também podem ser entendidos como nomes de estilos, embora sejam mais usados na definição de camadas para uso em DHTML.

158 Utilizando CSS 3. Usando Classes e IDs (cont.)
As classes têm seus nomes iniciados por ponto, enquanto que os IDs têm o “#” (sharp) no início de seu nome. Exemplo: abrir a página csscla.html

159 Utilizando CSS 4 . Usando Folhas de Estilo externas
É o modo mais flexível e poderoso de utilização das folhas de estilo, pois pode-se modificar a apresentação das páginas sem a necessidade de alterá-las, bastando efetuar a modificação na folha de estilos. Uma folha de estilos externa é um arquivo .CSS, sem qualquer componente da HTML.

160 Utilizando CSS 4. Usando Folhas de Estilo externas (cont.)
Para associar a folha de estilos à página, usa-se a tag <link>, que não possui fechamento: <link rel=“stylesheet” href=“URL” type=“text/css”> rel – o tipo de link href – o endereço e nome do arquivo .CSS type – o tipo MIME da folha de estilos

161 Utilizando CSS 4. Usando Folhas de Estilo externas (cont.)
A tag <link> é inserida na seção <head>. Exemplo: abrir a página cssext.html

162

163 11 Propriedades de Texto Indentação da 1ª Linha Alinhamento Decoração
Espaçamento Caixa Alta / Baixa

164 Indentação da 1ª Linha text-indent: define a indentação da 1ª linha de um bloco de texto. Seus valores podem ser quaisquer medidas válidas (ver unidades de medida) ou uma porcentagem. A porcentagem será calculada em função da largura total do bloco de texto. cssindent

165 Alinhamento text-align: define o alinhamento de um bloco. Seus valores podem ser left, right, center ou justify. O W3C recomenda que essa propriedade seja utilizada em substituição ao atributo align, presente em diversas tags HTML. cssalign

166 Decoração text-decoration: permite adicionar alguns efeitos decorativos ao texto. Seus valores válidos são: none - remove qualquer efeito underline - equivale ao sublinhado overline - coloca uma linha acima do texto line-through - equivalente ao tachado blink - texto piscante (muitos browsers não suportam esse efeito) cssdecor

167 Espaçamento letter-spacing: define o espaçamento entre as letras em um bloco de texto. Seus valores podem ser: normal - o espaçamento normal, definido através dos atributos da fonte utilizada para a exibição do texto medida - qualquer medida válida, que será adicionada ao espaçamento normal entre as letras cssletter

168 Caixa Alta / Baixa text-transform: define efeitos de caixa alta ou baixa. Seus valores são: none - sem qualquer efeito uppercase - coloca em caixa alta lowercase - coloca em caixa baixa capitalize - coloca as primeiras letras das palavras em caixa alta e as demais em caixa baixa csstransform

169

170 12 Propriedades de Fonte Tipo da Fonte Estilo de Fonte
Caixa Alta / Baixa Versalete Negrito Tamanho de Fonte

171 Tipo da Fonte font-family: define uma lista de tipos de fonte que deverão ser usadas na exibição do texto. Caso algum nome de fonte tenha espaços, como por exemplo Times New Roman, esse nome deverá vir entre aspas. Se as fontes definidas na lista não estiverem instaladas, será assumida a fonte default do browser. cssffamily

172 Estilo de Fonte (1/3) font-style: permite escolher entre
normal - estilo “normal” da fonte em uso oblique - estilo “Oblique”, “Slanted” ou “Incline” da fonte em uso (equivale ao itálico em muitos casos) italic - estilo itálico da fonte em uso cssfstyle1

173 Estilo de Fonte (2/3) font-variant: seus valores são
small-caps: produz letras em estilo versalete normal: define que a fonte não terá o estilo versalete cssfstyle2

174 Estilo de Fonte (3/3) font-weight: define o “peso” da fonte. Seus valores podem ser níveis de negrito, sendo que o 100 é o menor nível e o 900 é o mais forte normal - o mesmo que 400, sem negrito bold - o mesmo que 700 bolder - o próximo nível de negrito lighter - o nível anterior de negrito cssfstyle3

175 Tamanho de Fonte font-size: possui os valores
xx-small / x-small / small / medium / large / x-large / xx-large - escala do menor ao maior tamanho possível medida - uma medida válida pode ser usada porcentagem - uma porcentagem relativa ao tamanho de fonte que está sendo usado cssfsize

176

177 13 Tratando Links Conceito A pseudo-classe link
A pseudo-classe visited A pseudo-classe hover A pseudo-classe active

178 Conceito Os browsers costumam exibir os links de maneiras diferentes, de acordo com as ações executadas pelo usuário durante a navegação. Através da HTML pode-se definir uma série de cores para diferentes tipos de links. Isso também é possível através das chamadas pseudo-classes em CSS.

179 As pseudo-classes link e visited
A pseudo-classe link refere-se às características dos links ainda não visitados pelo usuário. A pseudo-classe visited refere-se às características dos links já visitados pelo usuário. Essas pseudo-classes são mutuamente exclusivas, ou seja, um link não terá as características das duas classes ao mesmo tempo. csslink

180 As pseudo-classes hover e active
A pseudo-classe hover refere-se às características do link quando o usuário passa com o ponteiro do mouse sobre o link. A pseudo-classe active refere-se às características do link ativo. Essas pseudo-classes não são mutuamente exclusivas, ou seja, um link poderá ter as características das duas classes ao mesmo tempo. csshover

181 Classes Individuais As pseudo-classes afetam todos os links de uma página, porém podem ser criadas classes para determinados links. As características das pseudo-classes que afetam todos os links serão herdadas pelas classes criadas pelo usuário. cssindiv

182

183 14 Cores e Fundos Cor de Primeiro Plano Cor de Fundo Imagem de Fundo
Repetição da Imagem de Fundo Posição da Imagem de Fundo Efeito de Marca d’água

184 Cor de Primeiro Plano color: define a cor de primeiro plano, geralmente aplicada ao texto. color: cor Relembrando, há quatro formas de definir a cor: color: red color: #ff0000 color: rgb(255,0,0) color: rgb(100%,0,0) csscolor

185 background-color: cor
Cor de Fundo background-color: define a cor de fundo, com as mesmas possibilidades da propriedade color. background-color: cor Caso não seja definida qualquer cor, será adotado o padrão definido no browser do visitante. cssbackc

186 background-image: url(URL)
Figura de Fundo background-image: define a imagem de fundo, de forma semelhante ao atributo background da tag <body>. background-image: url(URL) Se a figura não puder ser exibida, prevalecerá a cor de fundo definida. cssbacki

187 Repetição da Imagem de Fundo
background-repeat: define a repetição da imagem de fundo. O default é o valor repeat, que provoca a repetição na horizontal e vertical. background-repeat: valor Outros valores possíveis são: repeat-x: repete somente na horizontal repeat-y: repete somente na vertical no-repeat: exibe apenas uma vez a imagem cssbackir

188 Posição da Imagem de Fundo
background-position: define a posição da imagem de fundo, sendo que os valores válidos são: esq top - define a posição a partir da esquerda e topo em termos percentuais ou com uma medida válida As palavras left, right, center, top e bottom também podem ser usadas. cssbackip

189 background-attachment: valor
Efeito de Marca d’água background-attachment: define se a imagem de fundo ficará fixa ou acompanhará a rolagem da página, como é o default. background-attachment: valor Os valores possíveis são: scroll: a imagem acompanha a rolagem da página fixed: a imagem fica fixa no fundo da página cssbackia

190

191 15 Box Model O “box model” Margens Externas Margens Internas
Estilos de Borda Cor de borda Espessura de borda

192 O “box model” A CSS define que todo conteúdo é inserido em uma “caixa” e que podem ser definidas medidas de margem externa e interna, além de estilos de borda para a caixa. A margem externa é tratada como margin. A margem interna é tratada como padding. As bordas que podem ser colocadas ao redor das caixas são tratadas como border.

193 Margens Externas margin-top: define a margem superior externa da caixa. margin-bottom: define a margem inferior externa da caixa. margin-left: define a margem esquerda externa da caixa. margin-right: define a margem direita externa da caixa. Qualquer medida válida pode ser usada. cssmarge

194 Margens Internas padding-top: define a margem superior interna da caixa. padding-bottom: define a margem inferior interna da caixa. padding-left: define a margem esquerda interna da caixa. padding-right: define a margem direita interna da caixa. Qualquer medida válida pode ser usada. cssmargi

195 Estilos de Borda (1/2) border-top-style: define o estilo da borda superior da caixa. border-bottom-style: define o estilo da borda inferior da caixa. border-left-style: define o estilo da borda esquerda da caixa. border-right-style: define o estilo da borda direita da caixa.

196 Estilos de Borda (2/2) Os estilos válidos para bordas são:
dotted dashed solid double groove ridge inset outset none ou hidden cssbords

197 Cor de Borda border-top-color: define a cor da borda superior da caixa. border-bottom-color: define a cor da borda inferior da caixa. border-left-color: define a cor da borda esquerda da caixa. border-right-color: define a cor da borda direita da caixa. cssbordc

198 Espessura de Borda border-top-width: define a espessura da borda superior da caixa. border-bottom-width: define a espessura da borda inferior da caixa. border-left-width: define a espessura da borda esquerda da caixa. border-right-width: define a espessura da borda direita da caixa. cssbordw

199

200 16 Posicionamento Introdução Posicionamento Absoluto
Posicionamento Relativo Posicionamento em Camadas Visibilidade

201 Introdução É possível posicionar elementos usando a CSS para definir o que chamamos de camada. Os tipos de posicionamento possíveis são definidos pela propriedade position e seus valores são: absolute – a posição é fixa na janela relative – a posição é na verdade a distância em relação a algum ítem posicionado na janela

202 Posicionamento Absoluto
position: absolute A posição da camada é definida através das medidas top, left, right e bottom. A camada terá uma posição fixa na janela, independente de outros elementos inseridos. Qualquer medida válida pode ser usada. cssposica

203 Posicionamento Relativo
position: relative A posição da camada é definida através das medidas top, left, right e bottom. A camada terá posicionamento absoluto ao ítem após o qual foi inserida. Qualquer medida válida pode ser usada. cssposicr

204 Posicionamento em Camadas
Toda camada em CSS é posicionada em três dimensões: horizontal, vertical e um “eixo-Z”, o que permite posicionar itens em camadas, um sobre o outro no espaço da janela do browser. Isso pode ser efetivado através da propriedade z-index: camada sendo que a camada base é a 0 e sobre ela são definidas as outras camadas. csslayer

205 Visibilidade Uma camada pode ter sua visibilidade controlada através da propriedade visibility, que possui os seguintes valores: visible – a camada fica visível (default) hidden – a camada fica invisível Uma vez que o estado de uma camada seja definido, somente poderá ser modificado através de linguagens de script, como JavaScript. cssvisible

206


Carregar ppt "Material desenvolvido por Alan Carvalho"

Apresentações semelhantes


Anúncios Google