HTML Básico. Antonio Fernando de Oliveira Núcleo de Computação Eletrônica da UFRJ Tel. (021)

Transcrição

1 HTML Básico Antonio Fernando de Oliveira Núcleo de Computação Eletrônica da UFRJ Tel. (021)

2 Referências Bibliográficas: Iniciando em HTML Ramalho, Makron Books Home pages: : Recursos e técnicas para criação de páginas WWW Andreia Alcântara e etc, Editora Campus HTML - A referência completa Ian S. Graham, Editora Campus Na Internet 2

3 Algumas Definições O que é a Internet? Meio de comunicação mundial ou rede mundial de computadores Qual é a origem da Internet? Pós 2ª Guerra Havia uma necessidade de criar um meio de comunicação que interligasse os centros militares de comando e que não possuísse uma base específica! 3

4 Algumas Definições O que é uma URL? URL (Uniform( Resource Locator) Esquema utilizado na Web para localizar uma determinada página ou arquivo. Como é o formato de uma URL? Exemplo 4

5 Algumas Definições O que é um Site? É uma união de Páginas que visam formar um único documento interligado. O que é uma Home Page? Documento projetado para ser a página principal de um Site, com o objetivo de redirecionar o usuário para outras Páginas relacionadas dentro do site. 5

6 Algumas Definições O que é Web Application? É um serviço usado para executar tarefas específicas na Web. Alguns exemplos Projetos de Pesquisa (Resources( Resources) Trabalho Cooperativo Cultura Publicação Eletrônica Promoção de Produtos e Serviços Comércio Eletrônico (e-commerce Commerce) Suporte Técnico (Technet( Technet) 6

7 Algumas Definições O que é um Browser? É um Navegador Um programa que permite a navegação e visualização de Home Pages na Web. Quais são os utilizados atualmente? Netscape - 10 % dos internautas Internet Explorer - 85 % dos internautas Opera - 5 % dos internautas 7

8 Algumas Definições O que são Web Servers? São programas (Servidores) capazes de disponibilizar informações na Web. Alguns exemplos: Em ambiente UNIX: NCSA, CERN, Apache Em ambiente Windows: PWS, IIS, Netscape, WebSite. 8

9 Algumas Definições O que é HTML? (Hyper Text Markup Language) É uma linguagem de marcação usada na formatação de documentos na Web. Algumas Características: É interpretada pelo browser. Descreve o documento independente da plataforma de visualização. 9

10 Projetando Sites para Web Divulgação Registro em mecanismo de buscas Permutas de banners Assessoria de imprensa Compra de banners em outros sites Mídias Convencionais (Televisão, Rádio, OutDoor,...) 10

11 Características Gerais de HTML Como é um documento HTML? Conteúdo HTML é um arquivo ASCII Marcações (tags( tags) ) usam < e > Ex: : <Nome_Tag Tag> A maior parte aparece em pares Ex: : <Nome_Tag Tag> >... </Nome_Tag Tag> Maiúsculas X Minúsculas (Não é Case-Sensitive Sensitive) Comentários: <! > 11

12 Características Gerais de HTML Estrutura do documento <HTML> < HEAD> <TITLE> </TITLE> </HEAD> <BODY>... </BODY> </HTML> 12

13 Comandos Básicos de Formatação Estilos físicos <B> </B> <I> </I> <U> </U> <S>...</S> <TT> </TT> <SUB> </SUB> <SUP> </SUP> (Negrito) (Itálico) (Sublinhado) (Tachado) (Espaçamento igual) (Subscrito) (Sobrescrito) Estilos lógicos <STRONG> </STRONG> <EM> </EM> <CITE> </CITE> (Mesmo que negrito) (Mesmo que itálico) (Mesmo que itálico) 13

14 Comandos Básicos de Formatação Separadores <P> <BR> Quebra de paragráfo Quebra de linha <HR> Linha horizontal size = n (Tamanho) width = n (Largura absoluta) width = n % (Largura relativa) noshade (Sem 3D) 14

15 Comandos Básicos de Formatação Cabeçalhos <H1> </H1> até <H6> </H6> Texto Pré-formatado <pre> > </pre pre> 15

16 Comandos Básicos de Formatação Alinhamento de Texto <DIV align= = center >...</ >...</div> <DIV align= = left >...</ >...</div> <DIV align= = right >...</ >...</div> <DIV align= = justify >...</ >...</div> OU <P align= = center >...</p> <P align= = left >...</p> <P align= = right >...</p> <P align= = justify >...</p> 16

17 Caracteres Especiais Acentuação, em ambiente Windows, é produzida diretamente (norma ISO Latin 1) Codificação em HTML á á < < ã &atild; > > â â & & à à " ç &ccedil

18 Listas 18

19 Listas não numeradas Exemplo: <UL> <LI> Correio Eletrônico </LI> <LI> Telnet </LI> <LI> FTP </LI> </UL> Observações: Listas podem ser aninhadas </LI> é opcional 19

20 Lista não-ordenada <UL> type= = disc circle circle square square <UL type= square > conteúdo </UL> 20

21 Listas numeradas Exemplo: <OL> <LI> Item número um.</li> <LI> Item número dois. </LI> <LI> Item número três. </LI> <LI> Item número quatro. </OL> Observações: Listas podem ser numeradas </LI> é opcional 21

22 Lista ordenada <OL> type="1" "A" "a" "I" "i" start=número inicial Lista ordenada: <OL type="i" start=5> <LI>Item número um.</li> <LI>Item número dois. </LI> <LI>Item número três. </LI> </OL> 22

23 Listas de definição Exemplo: <DL> <DT>Telnet Telnet</DT> <DD>É o protocolo mais usado na Internet para criar uma conexão com um nó remoto.</dd> <DT>FTP</DT> <DD>O "File Transfer Protocol" é o principal método de se transferir arquivos pela Internet. </DD> </DL> Observação: </DT> e </DD> são opcionais 23

24 Interligando documentos (Links) 24

25 Interligando Documentos Desviando para outro documento: <A HREF="url destino">texto</a> Observações: Caminhos relativos X absolutos Barras de diretórios: usar "/" em lugar de "\ Dentro de URLs, maiúscula é diferente de minúscula URL destino pode ser: outro documento, uma imagem, uma música, etc. 25

26 Interligando Documentos Interligando seções em uma página Definição de uma seção: <A NAME="seção">... </A> Link para uma seção da mesma página: <A HREF="#seção">... </A> Link para uma seção de outra página <A HREF="arquivo#seção">... </A> 26

27 Interligando Documentos Enviando mensagens de correio eletrônico <A HREF="mailto Quando o link for acionado, abre o programa de correio eletrônico do navegador, permitindo que o usuário envie uma mensagem para o endereço especificado. 27

28 Imagens, Fontes e Cores Multimídia Animações 28

29 Imagens, Fontes e Cores (I) Imagens embutidas num documento <IMG SRC= URL da imagem > Podem ser GIF ou JPG Atributos: ALT= texto alternativo mostrado no lugar da imagem ALIGN= TOP / BOTTOM / MIDDLE / LEFT / CENTER / RIGHT BORDER= largura da borda quando usada como âncora WIDTH= largura em pixels HEIGHT= altura em pixels VSPACE= espaço vertical ao redor da imagem em pixels HSPACE= espaco horizontal ao redor da imagem em pixels 29

30 Imagens, Fontes e Cores (II) Usando imagens como links: <A HREF= link.html html ><IMG SRC= x.gif gif ></A> Escolhendo Fontes e Cores de Caracteres <FONT SIZE = [+ ou -] número de 1 a </FONT> FACE = fonte1, fonte2, COLOR = cor do texto > 30

31 Imagens, Fontes e Cores (III) Imagem de fundo da página <BODY BACKGROUND= URL da Imagem > Cor de fundo, texto e links <BODY BGCOLOR= cor (fundo) TEXT= cor (texto) LINK= cor (links não visitados) ALINK= cor (links enquanto acionados) VLINK= cor (links já visitados) > 31

32 Imagens, Fontes e Cores (IV) A cor pode ser identificada pelo nome ou por #RRGGBB Exemplos: White #FFFFFF Red #FF0000 Green #00FF00 Coral #FF7F00 32

33 Manuseio de imagens (I) Qualquer programa de edição de imagens pode ser usado. Exemplos: Photoshop, Corel Draw, PaintShop Pro. 33

34 Manuseio de imagens (II) Operações comuns com imagens: Digitalização por scanner Captura de tela Redução e ampliação Recorte Alteração do formato gráfico Fundo transparente 34

35 Manuseio de imagens (III) Imagens Mapeadas A forma da sub área pode ser: Retângulo Círculo Polígono Existem inúmeros utilitários para facilitar a tarefa de marcar regiões numa imagem, gerando os comandos correspondentes (MapEdit, MapThis,, ) 35

36 Animações (I) GIFs Animados Composição de várias imagens em sequência num único arquivo GIF Montagem é feita com um programa a parte. Ex: Gifcon, GifAnimator, AnimaGif,,... MARQUEE <Marquee>...</ >...</Marquee> Permite criar letreiro de texto rolável Só funciona no IE e no Firefox 36

37 Animações (II) Animações em JAVA São produzidas por um programa (applet( applet) Pode usar uma applet pronta fornecida pela Sun java.sun.com/.com/applets/animator/index.html Mais difícil que criar um GIF animado HTML Dinâmico Só funciona nos browsers 4.x ou superior Controle sobre posição dos elementos através de linguagens de script 37

38 Multimídia (I) Exigem que o usuário possua um programa externo/plugin Formatos de áudio: wav,, mp3, au, aiff, mid, ra, etc. Formatos de vídeo: avi, mov, mpeg, rm, etc. 38

39 Multimídia (II) Inserindo áudio e vídeo: Através de links: <A HREF= xmas xmas.wav >link p/ música</a> Embutidos no documento: <EMBED SRC= x.avi avi > No Internet Explorer: <IMG DYNSRC= x.avi avi > <BGSOUND SRC= x.wav wav > 39

40 Tabelas 40

41 Tabelas (I) Definição da tabela em si: <TABLE>... </TABLE> Atributos: BORDER = largura da borda em pixels CELLSPACING = espaço entre as células CELLPADDING = espaço entre o texto e as bordas WIDTH = largura da tabela HEIGHT= altura da tabela BORDERCOLORLIGHT BORDERCOLORDARK 41

42 Atributos de TABLE border=pixels cellspacing=pixels cellpading=pixels espessura da borda espaço entre as células espaço entre dados e célula 42

43 Atributos de TABLE bgcolor=cor width=pixels/porcentagem height=pixels/porcentagem 43

44 Tabelas (II) Definição dos elementos da tabela: <CAPTION>...</CAPTION> - Título <TH>...</TH> - Cabeçalho <TR>...</TR> - Linha <TD>...</TD> - Célula Atributos: VALIGN = alinhamento vertical (TOP, MIDDLE ou BOTTOM) ALIGN = alinhamento horizontal (LEFT, CENTER ou RIGHT) ROWSPAN = número de linhas ocupadas pela célula COLSPAN = número de colunas ocupadas pela célula WIDTH = largura da célula HEIGHT = altura da célula 44

45 45

46 Tabela<TABLE> 46

47 Tabela<TABLE> Título CAPTION> 47

48 Tabela<TABLE> Título <CAPTION> Linhas (Table Row) <TR> 48

49 Tabela<TABLE> Título <CAPTION> Linhas (Table Row) <TR> Cabeçalho (Table Header)<TH> 49

50 Tabela<TABLE> Título <CAPTION> Linhas (Table Row) <TR> Cabeçalho (Table Header)<TH> Célula (Table Date) <TD> 50

51 Atributo de CAPTION (align( align) <CAPTION align=top> <CAPTION align=bottom> 51

52 Tabelas (III) Aplicando cores na tabela: BGCOLOR pode ser usado dentro de <TABLE> <TH> <TR> <TD> Aplicando imagem ao fundo de uma tabela: BACKGROUND pode ser usado dentro de : <TABLE> <TH> <TD> 52

53 Exercício 53

54 Frames 54

55 55

56 56

57 57

58 58

59 59

60 60

61 61

62 62

63 63

64 Frames Arquivo FRAMESET Define a divisão da tela em frames Exemplo: <HTML> <HEAD> </HEAD> <FRAMESET > <FRAME SRC= URL > <FRAME SRC= URL > </FRAMESET> </HTML> 64

65 Frames (II) Alguns atributos de frameset: COLS = 200,* ROWS = 30%,* BORDER = N (Largura da Borda) FRAMEBORDER = yes no FRAMESPACING = N (espaço entre frames) Alguns atributos de frame: SRC NAME SCROLLING = YES ou NO NORESIZE MARGINHEIGHT MARGINWIDTH (URL do Documento) (Nome do Frame) (Se tem ou não Scroll) (Tamanho fixo) (Altura de Margem) (Largura da Margem) 65

66 Frames (III) Compatibilizando o documento com navegadores que não utilizam frames: <HTML> <HEAD> </HEAD> <FRAMESET > <FRAME SRC= URL > </FRAMESET> <NOFRAMES> </NOFRAMES> </HTML> 66

67 Frames (IV) Links em páginas com frames <A HREF= url da pagina TARGET= nome do frame > Nomes especiais: _blank _self _parent _top 67

68 Formulários 68

69 Formulários: Codificação Básica <FORM METHOD= POST GET ACTION= URL do CGI >... definição dos ítens do formulário... </FORM> Para enviar o formulário por mail: <FORM ACTION= mailto mailto:nome@servidor ENCTYPE= text text/plain > 69

70 Formulários Campo de Texto Exemplo:... Conta:<INPUT TYPE= TEXT NAME= conta SIZE= 20 MAXLENGTH= 20 > Senha:<INPUT TYPE= PASSWORD NAME= senha SIZE= 20 MAXLENGTH= 20 >... Visualização: 70

71 Formulários (II) Área de Texto Exemplo:... Comentários:<BR> <TEXTAREA NAME= texto ROWS= 3 COLS= 40 > Digite aqui um texto qualquer. </TEXTAREA>... Visualização: 71

72 Formulários (III) Menus Exemplo:... Sexo: <SELECT NAME= sexo >... <OPTION SELECTED>Masculino <OPTION>Feminino </SELECT> Visualização: 72

73 Formulários (IV) Botões Sim ou Não Exemplo:... Áreas de interesse: <BR> <INPUT TYPE= checkbox checkbox NAME= b1 VALUE= Redes >Redes<br> <INPUT TYPE= checkbox checkbox NAME= b2 VALUE= BD >Bancos de Dados<br>... Visualização: 73

74 Formulários (V) Botões de Rádio Exemplo:... Sexo: <INPUT TYPE= RADIO NAME= sexo VALUE= M > Masculino... <INPUT TYPE= RADIO NAME= sexo VALUE= F >Feminino Visualização: 74

75 Vários Ítens Exemplo: <SELECT NAME="item" MULTIPLE SIZE=7> <OPTION> Item1 <OPTION SELECTED> Item 2 <OPTION SELECTED> Item 3... </SELECTED> 75

76 Formulários (VI) Botões de Envio Exemplo:... <INPUT TYPE= SUBMIT VALUE= Envia > <INPUT TYPE= RESET VALUE= Limpa >... Visualização: 76

77 Publicando Documentos 77

78 Publicando Documentos Para publicar uma página na Internet é necessário alojá-la la num servidor WWW (provedor de serviços internet). Publicação gratuita: Publicação na UFRJ: É necessário abrir conta na máquina ACD. acd.ufrj.br/~.br/~seunome 78

79 Publicando Documentos (II) O administrador pode definir outras associações Nome de arquivo padrão: index.html Atualização dos arquivos via FTP 79

80 FIM