Curso de HTML. Ementa: Introdução à linguagem HTML. Núcleo de Computação Eletrônica Universidade Federal do Rio de Janeiro

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

Download "Curso de HTML. Ementa: Introdução à linguagem HTML. Núcleo de Computação Eletrônica Universidade Federal do Rio de Janeiro"

Transcrição

1 Curso de HTML Núcleo de Computação Eletrônica Universidade Federal do Rio de Janeiro Ementa: Introdução Fundamentos Listas Ligações Imagens Tabelas Frames Formulários Multimídia Folhas de Estilo Tópicos Especiais (publicação, scripts, applets, etc.) Introdução à linguagem HTML

2 Conceitos básicos Hipertexto Linguagem HTML Editores de HTML Tópicos Fundamentos da linguagem Conceitos Básicos WEB Um dos serviços da Internet Disponibilizar documentos independente da localização. Referências através de Hipertextos. O que é Hipertexto?

3 O que é Hipertexto? Hipertexto é liberdade! Liberdade do peso das aplicações computacionais tradicionais. (...) Você pode ler sobre coisas que não previa encontrar. A alegria de inesperadamente ler sobre alguma coisa nova e a oportunidade de aprendizagem acidental durante a tentativa de localizar um fato específico faz do hipertexto uma aventura prazerosa para muitas pessoas que de outro modo evitariam os computadores. [Shneiderman89, pg. 2] O que é Hipertexto? Conceitos Básicos Tecnologia Cliente-Servidor

4 Conceitos Básicos Home-Pages Documento projetado para ser a página de entrada em um site. Com o tempo a expressãp passou a significar qualquer página na Internet. Cuidado especial no projeto. Conceitos Básicos URL (Uniform Resource Locator) Permite localizar um objeto na Internet Formato de endereçamento protocolo://servidor/pastas/arquivo Protocolo: nomalmente http http - Hypertext Transfer Protocol Outros protocolos: telnet, ftp, etc Linguagem HTML Hypertext Markup Language Linguagem de marcação para formatação de documentos. Interpretada pelo browser. Independente da plataforma de visualização (portabilidade). Padronização pela W3C Versão atual HTML 4.01

5 Editores de HTML Um arquivo HTML é um arquivo texto: pode ser criado por qualquer editor. Algumas ferramentas servem para facilitar o processo de criação de páginas Filtros conversores: Rtftohtml Pstohtml Editores Wysiwyg: Netscape Composer FrontPage Express Editores de tags: HTML Assistant HotDog W3e Gerenciadores de site: FrontPage AOLPress Macromedia Dreamweaver HTML (HyperText Markup Language) Linguagem de Marcação de HiperTexto (específica para Web) HTML - fundamentos elemento de conteúdo conteúdo etiqueta inicial etiqueta final elemento vazio etiqueta única <P> Faça as coisas <B> o mais simples </B> que puder.<br> Não as mais simples. </P> <P align= right >(Albert Einstein) </P> atributo valor

6 Resumo Web: um dos serviços da Internet rede de informação sob a forma de hipertexto HTML (HyperText Markup Language) linguagem de marcação de hipertexto específica para documentos da Web fundamentos: elemento (de conteúdo ou vazio) etiqueta atributo = valor Fundamentos de HTML Tópicos Estrutura de um documento HTML Criando, testando e modificando páginas HTML Parágrafo, quebra de linha, linha horizontal Cabeçalho Formatação de texto Caracteres especiais

7 Estrutura de um documento HTML documento HTML cabeçalho do documento conteúdo do documento <HTML> <HEAD> <TITLE>Título da Página</TITLE> </HEAD> <BODY>... Conteúdo da Página... </BODY> </HTML> Criando, testando e modificando páginas HTML Para criar uma nova página: No Bloco de Notas, escreva o código HTML. Salve o arquivo com extensão.htm (ou.html) Para visualizar a página: No Microsoft Internet Explorer, abra o seu arquivo. Para modificar a página: No Bloco de Notas, faça as modificações que desejar no código da página e salve novamente. No Microsoft Internet Explorer, atualize a página. Parágrafo <P>conteúdo </P> align = left center right justify <P align="center">aqui vou eu...</p>

8 Parágrafo pré-formatado <PRE> conteúdo </PRE> <PRE>O conteúdo deste parágrafo será apresentado exatamente como digitado.</pre> <BR> Quebra de Linha <P>Faça as coisas o mais simples que puder.<br> Não as mais simples.</p> Linha Horizontal <HR> width = 50 (medida em pixel s) width = 50% (medida em percentagem da janela) <HR width =80%>

9 Cabeçalho <H1> conteúdo </H1> (varia de <H1> até <H6>) align = left center rigth justify <H1 align=center>título</h1> <H2>Tópico</H2> Alinhamento geral <DIV align=tipo> conteúdo </DIV> tipo = left center right justify <CENTER> conteúdo </CENTER> Comentário <!-- comentário --> <!-- qualquer coisa aqui dentro -->

10 Formatação de texto <FONT>conteúdo</FONT> face = nome de fonte size = tamanho da fonte (1..7; +/- n) color = cor (sistema RGB) <FONT face= Verdana, Arial size=7 color=rgb(255,0,125) >...conteúdo... </FONT>...conteúdo... Formatação de texto Estilos físicos: modificam fisicamente a aparência do texto. Negrito (Bold) Itálico Sublinhado (Underline) Riscado Subrescrito Subscrito Grande Pequeno Fonte Monoespaçada <B> texto </B> <I> texto </I> <U> texto </U> <STRIKE> texto <STRIKE> <SUP> texto </SUP> <SUB> texto <SUB> <BIG> texto </BIG> <SMALL> texto </SMALL> <TT> texto </TT> Formatação de texto Estilos lógicos: expressam a semântico do texto (será formatado pelo visualizador de acordo com a semântica). Citação ou referência Definição Código de computador Ênfase Forte ênfase...outros: <CITE>... <CITE> <DFN>... <DFN> <CODE>... <CODE> <EM>... <EM> <STRONG>... <STRONG> <KBD>, <VAR>, <ABBR>, <ACRONYM>

11 Caracteres especiais á á < < ã ã > > â â & & à à " " ç ç <HTML> <HEAD> <TITLE>Poesia</TITLE> </HEAD> <BODY> <P>"Para ser <BIG>grande</BIG>, sê inteiro:<br> Nada teu exagera ou <STRIKE>exclui </STRIKE>.<BR> <B><I>Sê todo em cada coisa </I></B>.<BR> Põe quanto és no <SMALL>mínimo</SMALL> que fazes.<br> Assim em cada lago a lua toda <FONT face="vassallo" color=rgb(150,150,0)> b r i l h a</font>,<br> porque <SUP>alta</SUP> vive."</p> <P align= right >(Do poema "Para Ser Grande" - Ricardo Reis) </P> </BODY> </HTML>

12 Listas Lista ordenada Lista não-ordenada Lista de definição Tópicos Lista ordenada Lista ordenada: <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. </LI> </OL>

13 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> Lista não-ordenada Lista não-ordenada: <UL> <LI>Primeiro item.</li> <LI>Segundo item.</li> <LI>Terceiro item.</li> <LI>Quarto item.</li> </UL> Lista não-ordenada <UL> type= disc circle square <UL type= square > conteúdo </UL>

14 Lista de definição <DL> <DT>Termo de Definição </DT> <DD>Definição do Termo </DD> </DL> Lista de definição <P>Tipos de Listas: <DL> <DT>Lista ordenada</dt> <DD>Explicita a numeração dos itens da lista.</dd> <DT>Lista não-ordenada</dt> <DD>Utiliza marcadores para os itens da lista.</dd> <DT>Lista de definição </DT> <DD>Listagem de termos e definições.</dd> </DL> </P> Ligações

15 Tópicos URL Ligação para outro documento endereço absoluto endereço relativo Ligação para seção de um mesmo documento de outro documento Ligação para arquivo Ligação para serviço URL (endereços da Internet) especifica qualquer arquivo na Internet formato de endereçamento: url - Uniform Resource Locator http - HyperText Transfer Protocol Ligação para outro documento (endereço absoluto) <A href= url >conteúdo </A> <A href="http://www.ufrj.br/home.html">ufrj</a>

16 Ligação para outro documento (endereço relativo) exercicio index.htm poesia.htm poesias ricardo.htm musicas chico.htm Ligação para outro documento (endereço relativo) Para página no mesmo diretório: <A href= poesia.htm >Para ser Grande (Ricardo Reis)</A> Para avançar um diretório: <A href= musicas/chico.htm >Chico Buarque</A> Para voltar diretórios../ <A href=../poesia.htm >Para ser grande (Ricardo Reis)</A> <A href=../cancoes/chico.htm >Chico Buarque</A> Ligação para seção (do mesmo documento) Tópicos da página: - Ligação para documento - Ligação para seção Ligação para documento Blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá Ligação para seção Blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá

17 Ligação para seção (de outro documento) Tópicos: - Seçao 2 de histórico.htm historico.htm Secao 1 Blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá Secao 2 Blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá Ligação para seção Definição de seção: <A name= secao >... </A> Ligação para seção do mesmo documento: <A href= #secao >... </A> Ligação para seção de outro documento: <A href= url#secao >... </A> Ligação para arquivo Se existe plug-in associado à extensão do arquivo, o arquivo será aberto. Ex.: imagem.gif documento.doc Se este plug-in ainda não existe, será perguntado se você deseja abrir (num outro programa do seu computador) ou salvar no disco. Ex.: compactado.zip programa.exe Ex: <A href= compactado.zip >compactado.zip (76Kb)</A>

18 Ligação para outro serviço Uma ligação pode ser feita para correio eletrônico, FTP, Newsgroup, Gopher, Telnet etc. <A href= >...</A> Exercício 1 Ligação para seção do mesmo documento Hiperlivro de Receitas Doces: Torta de chocolate com coco Gelato de abacaxi Salgado: Strogonoff do Mariano Torta de chocolate com coco blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá Voltar para menu principal Gelato de abacaxi blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá Voltar para menu principal Strogonoff do Mariano blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá Voltar para menu principal Exercício 2 Ligação para outro documento hiperlivro receitas.htm doces chocolate.htm gelato.htm salgados strogonoff.htm

19 Imagens Definições Imagem gif x jpeg Elemento IMG Atributos Imagem com ligação Algumas finalidades Algumas dicas Tópicos Definições Fotos, desenhos, gráficos, esquemas etc. Arquivo armazenado no computador Tipos de arquivos usados nas imagens da Web: GIF e JPEG

20 Imagem GIF x JPEG JPEG Alta compactação, perdas na definição Adequado para fotos GIF Compactação média, sem perdas na definição Adequado para logotipos, ícones, textos etc. Permite: animações (gifanimada) transparentização (de uma cor) Imagens: produção x cópia Produção: Construção com programas: MS Paint, Corel PhotoPaint, PhotoShop, 3D Studio etc. Digitalização: através de scanner ou outros periféricos Cópia: A partir de CD s (bibliotecas de imagens) No navegador, utilize o botão direito do mouse sobre a imagem e escolha a opção Salvar figura como...

21 Elemento IMG <IMG src= url > <IMG src="ufrj.gif"> <IMG src="nce.jpg"> Atributos src= url border=número width=número height=número hspace=número vspace=número alt= texto localizador do arquivo espessura em pixel largura da imagem altura da imagem espaço horizontal espaço vertical texto alternativo <IMG src= ufrj.gif border=2 width=100 height=40 alt= UFRJ > Atributo alinhamento (align) align= bottom middle top align= bottom align= middle align= top

22 Atributo alinhamento (align) align= left right align= left faz com que a imagem fique flutuando ao lado esquerdo do parágrafo, fazendo com que as linhas fiquem ao redor da imagem align= right faz com que a imagem fique flutuando ao lado direito do parágrafo, fazendo com que as linhas fiquem ao redor da imagem. Imagem com ligação <A href="http://www.ufrj.br/home.html">... </A> <A href="http://www.ufrj.br/home.html"> <IMG src= ufrj.gif border=0> </A> Algumas finalidades Papel de parede - para o fundo do documento

23 Algumas finalidades Barra - separar partes do documento Bola - marcador para listas Item um Item dois Item três Algumas finalidades Ícones - para indicar algo Botões - para levar a outros documentos Algumas finalidades logomarca, texto diferente (título), mapa, foto, esquema etc. - para ilustrar algo, embelezar, divertir etc.

24 Algumas dicas: Cuidado com o tamanho! Ser original e criativo (evitar cópias) Usar criteriosamente (não abusar das imagens) Procurar definir um estilo imagens parecidas (traço, coloração, forma etc.) relacionar ao tema Tabelas Elementos (e atributos): TABLE CAPTION TR TD TH Tópicos

25 Elementos Tabela<TABLE> Título <CAPTION> Linhas (TableRow) <TR> Cabeçalho Célula (TableDate) <TH> <TD> Exemplo <TABLE border="1"> <CAPTION>Tabela de notas </CAPTION> <TR> <TH>Aluno</TH> <TH>Trabalho</TH> <TH>Nota</TH> </TR> <TR> <TD>Mariano Gomes Pimentel</td> <TD><A href="http://www.catar.com.br/usuarios/mariano"> Receitas</A></TD> <TD>100</TD> </TR> </TABLE> Exercício

26 Exercício <table border="1"> <tr> <th>receitas</th> <th>nota</th> </tr> <tr> <td valign="top">torta de chocolate com coco</td> <td>9</td> </tr> <tr> <td valign="top">gelato de Abacaxi</td> <td>7,2</td> </tr> <tr> <td valign="top">strogonoff do Mariano</td> <td>9,5</td> </tr> </table> 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 Atributos de TABLE bgcolor=cor width=pixels /Porcentagem height=pixels/porcentagem

27 Exemplo <TABLE border="1" bgcolor="#d7d7d7" cellspacing="5" cellpadding="0" width="100%">... </TABLE> Atributo de CAPTION (align) <CAPTION align=top> <CAPTION align=bottom> Atributo de células (TH e TD) Agrupamento de linhas: <TD rowspan=2> Agrupamento de colunas: <TD colspan=11>

28 Atributo de células (TH e TD) bgcolor= #cor RGB hexadecimal width = pixels % height = pixels % align = left center right justify valign = top middle bottom Exercício Exercício <table border="1" cellspacing= "0" cellpadding="3" align="center"> <tr> <td rowspan="2" valign="top" align="center">a</td> <td colspan="2" align="center">b</td> </tr> <tr> <td>b1</td> <td>b2</td> </tr> <tr> <td>c1</td> <td>c2</td> <td>c3</td> </tr> </table>

29 Frames FRAMESET FRAME Atributos Frames aninhados Ligação com destino Tópicos FRAMESET FRAMESET - Divisão do quadro em colunas ou linhas <FRAMESET COLS= 100,* > e o resto...

30 FRAMESET FRAMESET - Divisão do quadro em colunas ou linhas <FRAMESET ROWS= 50,*,50% > 50...e o resto... 50% FRAME FRAME - Para configurar cada divisão <FRAMESET ROWS= 50,*,50% > <FRAME src= url1 name= titulo > <FRAME src= url2 name= conteudo > <FRAME src= url3 name= rodape > </FRAMESET> Exercício MENU CONTEÚDO

31 Atributos FRAMESET COLS = lista de divisão em colunas (pixels, porcentagem ou *) ROWS = lista de divisão em linhas (pixels, porcentagem ou *) FRAME NAME = texto SRC = url SCROLLING= auto yes no FRAMEBORDER = 0 1 NORESIZE MARGINWIDTH= pixels MARGINHEIGHT = pixels nome do frame página inicial apresentação da barra de rolagem desenhar ou não uma borda dentro do frame se presente, o frame não será redimensionável margem horizontal entre frame e conteúdo margem vertical entre frame e conteúdo Frames aninhados <FRAMESET COLS= 150,* > <FRAME src= menu.htm name= menu > <FRAMESET ROWS= 70,* > <FRAME src= titulo.htm name= titulo > <FRAME src= conteudo.htm name= conteudo > </FRAMESET> </FRAMESET> MENU TÍTULO CONTEÚDO Ligação com destino Na página menu.htm :... <A href= pagina1.htm target= conteudo > PG 1 </A>... MENU PG 1 TÍTULO CONTEÚDO PG 2

32 Ligação com destino <A href=url target=destino > destino: = nome do frame para um frame específico = _self para o mesmo frame = _top para toda a janela = _parent para o frame pai = _blank abrir numa nova janela Formulários Tópicos Elementos (e seus atributos): FORM TEXTAREA INPUT SELECT / OPTION LABEL O que fazer com os dados?

33 FORM Formulário possibilita a entrada de dados do usuário: pesquisa, cadastro, reserva, comércio eletrônico etc. <FORM> conteúdo (controles + texto, imagens, tabelas, etc.) </FORM> Controles São objetos para a entrada de dados: TEXTAREA (área de texto) INPUT (caixa de texto, caixa de senha, caixa de checagem, escolha e botões) SELECT (menu) LABEL (rótulo) TEXTAREA <FORM> <TEXTAREA rows=5 cols=20>aqui o texto inicial, que será mostrado exatamente como for digitado. </TEXTAREA> </FORM> name = texto rows= número cols= número nome do controle número de linhas visíveis número de colunas visíveis (caract. por linha)

34 INPUT Permite a entrada de tipos especiais de dados type = text type = password type = checkbox type = radio type = file type = button type = reset type = submit INPUT type= text <INPUT type="text" name="nome" size=30> type = text name = texto size = número maxlength = número value = texto cria uma caixa de texto nome do controle número de caracteres visíveis máximo de caracteres a serem digitados texto inicial INPUT type= password <INPUT type="password " name= senha" size=8> type = password name = texto size = número maxlength = número value = texto cria uma caixa de senha nome do controle número de caracteres visíveis máximo de caracteres a serem digitados texto inicial (não deve ser utilizado...) Obs: Só com o formulário não garante-se segurança.

35 INPUT type= checkbox <INPUT type= checkbox" name="op1" checked> type = checkbox name = texto checked cria uma caixa de checagem nome do controle se presente, inicia marcado INPUT type= radio <INPUT type= radio" name= sexo value= M >... <INPUT type= radio" name= sexo value= F >... type = radio name = texto value = texto checked cria um botão de escolha nome do controle. Deve ser o mesmo para todos os botões de escolha de um mesmo grupo de opções exclusivas. valor associado à escolha, necessário para identificar a opção escolhida. se presente, inicia marcado INPUT type= file <INPUT type= file" name= foto size= 30 > type = file name = nome size = número value = texto cria um botão para procurar arquivo nome do controle número de caracteres visíveis pode ser utilizado, pelo visualizador, como nome do arquivo inicial

36 INPUT type= button <INPUT type= button" name= botaook value= OK > type = button name = nome value = texto cria um botão (de uso genérico) nome do controle texto dentro do botão INPUT type= reset <INPUT type= reset" name= breset" value= Limpar > type = reset name = texto value = texto cria um botão limpar (reinicializa os valores do formulário, geralmente em branco) nome do controle texto dentro do botão Obs: Quando o usuário apertar este botão, irá perder os dados já digitados. INPUT type= submit <INPUT type= submit" name= env value= Enviar > type = submit name = texto value = texto cria um botão enviar (envia os dados do formulário) nome do controle texto dentro do botão

37 SELECT (menus) <SELECT name= estado size=1>...opções... </SELECT> name = texto size = número multiple nome do controle número de opções visíveis se presente, possibilita seleção mútipla <SELECT name="comidas" size=6 multiple>... </SELECT> OPTION (menus) Constrói um item de opção de um menu. <SELECT name= navegador size=3> <OPTION value= MSIE >Internet Explorer</OPTION> <OPTION value= NE >Netscape</OPTION> <OPTION value= outros >Outros...</OPTION> </SELECT> value = texto valor da opção LABEL <INPUT type= radio name= opcompra value= sim id= opsim > <LABEL for= opsim > Sim </LABEL> for = id_controle indica qual o controle deve ser ativado Obs1.: Deve-se especificar id=texto dentro do controle a ser ativado pelo rótulo. Obs2.: Utilize criteriosamente - ainda não funciona adequadamente no Netscape!

38 O que fazer com os dados? 1 a opção: Enviar por correio eletrônico <FORM method="post" enctype="text/plain"> <P>Deixe uma mensagem pra mim<br> <TEXTAREA rows=5 cols=30></textarea><br> <INPUT type="submit" value="enviar"> </P> </FORM> O que fazer com os dados? 2 a opção: Enviar para um programa (CGI) <FORM method="post action="http://www.nce.ufrj/~mariano/cgi-bin/cadastro.pl">... </FORM> O que fazer com os dados? 3a opção: Utilizar javascript possibilita verificar a consistência de alguns dados do formulário construir efeitos especiais como menu das páginas do site mensagem rolante relógio etc.

39 Multimídia Tópicos Plugins Som de fundo Manipulação de eventos com imagem Imagem animada Mapa de imagem Dicas Multimídia Cada mídia é armazenada em um tipo de arquivo específico Texto: txt, doc, ps, pdf etc. Imagem: gif, jpg, jpeg, pcx, tif, tiff, bmp etc. Som: wav, mid, mpg, mpeg, ra, ram etc. Vídeo: avi, mpg, mpeg, mov, qt, rm, ram etc. Animação: fli, flc etc.

40 Ligação para arquivos multimídia Não é diferente da ligação para documento html: <A href= aquarela.mid >Aquarela (Toquinho)</A> O navegador carrega um programa auxiliar (plugin) capaz de visualizar o arquivo. Arquivos multimídia embutidos HTML + os principais visualizadores ainda não conseguem trabalhar bem com arquivos embutidos. Consultar: <OBJECT data=uri...> <EMBED src=uri...> <IMG dynscr=uri...> (HTML padrão) (Netscape) (Internet Explorer) Som de fundo <BGSOUND SRC= aquarela.mid volume=60 loop=0> <EMBED src= aquarela.mid volume=60 autostart=true hidden=true>

41 Elemento IMG Atributos: src= url border=número width=número height=número hspace=número vspace=número alt= texto localizador do arquivo espessura em pixel largura da imagem altura da imagem espaço horizontal espaço vertical texto alternativo Elemento IMG (manipulação de eventos) Atributos: name = texto nome do objeto imagem onmouseover = script o que acontece quando o mouse passa sobre a imagem (ex.: carregar outra imagem) onmouseout = script o que acontece quando o mouse sai da imagem (ex.:carregar a imagem original) Exemplo: imagem botão web.gif webup.gif As duas imagens são quase idênticas, execeto que o ícone da figura webup.gif encontra-se ligeiramente deslocado para noroeste. Esta segunda imagem irá substituir a primeira quando o mouse passar sobre a imagem. O resultado visual sugere um botão que se levanta quando o mouse passa sobre o ícone. <IMG src="web.gif" width="91" height="100" alt="web-receitas" border=0 name="bweb" onmouseover="bweb.src='webup.gif' " onmouseout="bweb.src='web.gif' ">

42 Exemplo: imagem botão iweb.gif - As duas imagens são quase idênticas, execeto que a imagem iwebup.gif encontra-se mais nítida. iwebup.gif - Esta segunda imagem irá substituir a primeira quando o mouse passar sobre a imagem. <IMG src="iweb.gif" width="103" height="48" alt="web-receitas" border=0 name="iweb" onmouseover="iweb.src='iwebup.gif' " onmouseout="iweb.src='iweb.gif' "> Atributos: Elemento IMG (manipulação de eventos) onmouseover = script onmouseout = script onclick = script ondblclick = script onmousedown = script onmouseup = script onmousemove = script Dicas: O truque está em fazer imagens parecidas mas com alguma coisa diferente que deve estar associado ao evento Obs.: Os atributos para lidar com eventos também podem ser colocados dentro da ligação (o Netscape só executa este efeito quando dentro desta etiqueta). P. ex.: <A href="web/web.html" onmouseover="bweb.src='webup.gif'" onmouseout="bweb.src='web.gif'"> <IMG src="web.gif" name="bweb" border=0 width="91" height="100" alt="web-receitas" > </A>

43 Dicas: Imagem default e onmouseout onmousemove Seção 1 Seção 1 Imagem default e onmouseout onmouseover onmousedown onmouseup Cuidado: observe que o smille irá zangar quando o usuário clicar! Ex: mestre-cuca observador <IMG src="chapeu3.gif" width="40" height="122" onmouseover="olhos.src='olhos45.gif'" onmouseout="olhos.src='olhos.gif'"> olhos135.gif olhos90.gif olhos45.gif olhos180.gif olhos.gif olhos0.gif olhos225.gif olhos270.gif olhos315.gif <IMG name="olhos" src="olhos.gif" width="102" height="54" onmouseover="olhos.src='olhosani.gif'" onmouseout="olhos.src='olhos.gif'"> Ex: mestre-cuca observador o1.gif o2.gif o3.gif o4.gif o5.gif Gif Animada olhosani.gif o6.gif o7.gif o8.gif <IMG name="olhos" src="olhos.gif" width="102" height="54" onmouseover="olhos.src='olhosani.gif'" onmouseout="olhos.src='olhos.gif'">

44 Imagem Animada Utilizar um programa para construção de imagem animada. O programa deve juntar várias imagens e gerar um novo arquivo onde as imagens são exibidas seqüencialmente. P. ex.: Gif Construction Set mindworkshop.com/alchemy/alchemy.html Mapa de imagem (exemplo) gilbertogil.com.br Mapa de imagem (exemplo)

45 Mapa de imagem <IMG src= "arvore.gif" usemap="#mapa">... <MAP name="mapa"> <AREA shape="rect" coords= 5,5,10,30 href="folha1.html" alt="folha1 > <AREA shape="circle" coords= 50,50,10 href="folha2.html" alt="folha2 > <AREA shape="poly" coords= 0,50,10,50,5,60" href="folha3.html" alt="folha3 > </MAP> Mapa de imagem MAP name=texto AREA shape=tipo coords=coordenadas href=url alt=texto shape= circle, coord = centrox, centroy, raio shape= rect, coord = X1,Y1, X2,Y2 shape= poly, coord= X1,Y1, X2,Y2, X3,Y3, X4,Y4,... Mapa de imagem Utilizar um programa para edição (visual) de mapa de imagem. P. ex.: MapEdit mapedit

46 Dicas Geralmente, multimídia em HTML é implementada através de: imagens (bem produzidas; imagens animadas; imagens com tratamento de eventos); ligações para arquivos multimídia; recursos especiais: Applet DHTML ( = CSS + script ) VRML Flash Macromidia Shockwave etc Publicação na Web Publicação na Web É preciso utilizar um servidor web provedores (pagos); instituições (NCE etc.); entrar em contato com os administradores para obter informações serviços gratuitos. cadastrar-se e, possivelmente, estar sujeito a incluir propagandas em suas páginas.

47 Publicação na Web Provedores e instituições: - será fornecido endereço e senha - utilizar FTP para transferência dos arquivos Publicação na Web (no NCE) Abrir conta na máquina ACD (ou outra máquina que será indicada) Publicar páginas a partir do diretório public_html (ou outro diretório que será indicado) mariano\public_html\home.html Publicação na Web (serviços gratuitos) Ex.: Compreender o processo particular de cada serviço

48 Registro de domínio Web Ex.: Verificar se o domínio já existe (Registro de Domínios) Cadastrar-se Receber (documentação - depois, boleta anual)...combinar com provedor sobre abertura Pagar taxa combinada com o provedor Fornecer dados do provedor para fapesp Noções de Script e Applet Script É uma linguagem de programação simplificada: não exige muito conhecimento de programação possibilita fazer coisas úteis de forma rápida é bastante limitado JavaScript (amplamente aceito) e VBScript (Microsoft) são as linguagens mais populares

49 Script Utilidades: Modificar o conteúdo da página dinamicamente Processar dados de formulários (preenchimento automático, validação etc.) Tratar eventos (click de botões, movimentação de mouse etc.) Realizar animações de objetos (CSS + Scripts = DHTML) Conceitos Fundamentais: funções tratamento de eventos Script (exemplo - direcionador simples de página) <html> <head> <title>redirecionador de página</title> <script langague="javascript"> <!-- location.href= //--> </script> </head> <body></body> </html> Script (exemplo - botão imprimir) <html> <head> <title>script para imprimir</title> <script langague="javascript"> <!-- function Imprimir() { browsername = navigator.appname browserver = parseint(navigator.appversion) if ( (browsername == "Netscape" && browserver >= 4) (browsername == "Microsoft Internet Explorer" && browserver >= 5) ) {window.print()} else {alert( Este botão só funciona no Netscape 4.x ou no Microsoft Internet + Explorer 5.x (e versões superiores). Você e stá utilizando o + browsername + + browserver + ".")} } //--> </script> </head> </body>... <a href="javascript:imprimir()"> <img src="../bimprimir.gif" width="56" height="66" border="0"></a>...

50 Script (Reaproveitamento) Consulte bibliotecas on-line de scripts (ou salve as páginas que contém os scripts que lhe parecem úteis) Ex.: Tony's JavaScript (em português, +200 scripts) geocities.com/researchtriangle/4084/frames.htm Tente compreender, por alto, como o script funciona. Faça adaptações para a sua página Applet São programas (geralmente pequenos) construídos com a linguagem de programação Java. exige conhecimento de programação possibilita fazer coisas úteis, mas não de forma tão rápida... Não é tão limitado quando comparado com os scripts. Applet Inserir como elemento de HTML: APPLET ou OBJECT; PARAM Dica para reaproveitamento: consultar bibliotecas on-line Copiar os arquivos necessários e tentar intuir como utilizar o código

51 Applet (exemplo de texto com efeitos especiais) <applet CODE="FunScroll.class" WIDTH="390" HEIGHT="60"> <param name="bgcolor" value="#ffffff"> <param name="fgcolor" value="#000000"> <param name="font" value="verdana, Arial, Times"> <param name="size" value="15"> <param name="delim" value="%"> <param name="line1" value="%5%left%sine-wave% color=#0000ff% StudioML %explode%"> <param name="line2" value="%20%down% StudioMLé uma empresa \n de informática.%up%">... </applet> studioml.com.br Folhas de Estilo Folhas de Estilo Cascade Style Sheets (CSS). Separa aparência e estrutura do documento. Permitem maior controle sobre a apresentação das páginas Margens Tamanho / tipo de fonte Espaçamento entre letras / palavras Cores Etc A partir da versão 3 do Explorer e 4 do Netscape. Devem estar na seção <HEAD> do documento.

52 Folhas de Estilo Exemplo: <style type= text/css > <!-- h1 { font-family: arial; color: blue; } h2 { font-family: arial; color: green; } --> </style> Sintaxe Geral <style> /* comentário */ seletor { propriedade: valor; propriedade: valor valor valor...;... } seletor, seletor { propriedade: valor;... } </style> Propriedades dos Estilos São as características que podem ser definidas para as tags através da CSS. Existem cerca de 120 propriedades diferentes.

53 Principais Propriedades Fonte color, font-family, font-size, font-style, font-weight, text-decoration Cor e imagem de fundo background-position, background-image, backgroundcolor, background-attachment, background-repeat Alinhamento de texto text-align, text-indent, vertical-align Espaçamento word-spacing, letter-spacing, line-height, margin, padding, white-space Valores Possíveis (I) Palavras Chave Dimensão (small - pequeno) Relação (bolder - mais escuro) Fonte de caracteres (arial, times, etc). Exemplo: P { font-size: small; font-weight: bolder; font-family: arial; } Valores Possíveis (II) Tamanho Valor seguido da unidade (pt, px, in, cm, mm) Exemplo: P { font-size: 12pt; } Percentuais Valor numérico seguido do simbolo % Exemplo: P { font-size: 110%; }

Ferramentas para Multimídia e Internet - 1486

Ferramentas para Multimídia e Internet - 1486 1 Ferramentas para Multimídia e Internet - 1486 HTML BÁSICO: O que é uma página WEB? Uma página WEB, também conhecida pelo termo inglês webpage, é uma "página" na World Wide Web, geralmente em formato

Leia mais

Introdução às Folhas de Estilo

Introdução às Folhas de Estilo Introdução às Folhas de Estilo Folhas de Estilo Cascading Style Sheets (CSS). Separa aparência e estrutura do documento. Permite maior controle sobre a apresentação das páginas Margens Tamanho / tipo de

Leia mais

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

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

Leia mais

DESENVOLVIMENTO WEB I - 7122

DESENVOLVIMENTO WEB I - 7122 6.2 - Formulários: Um dos recursos mais fascinantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário o usuário pode interagir com o servidor, enviando dados que

Leia mais

6.2 - Formulários: form
...
form action method POST GET exceto outros formulários form

6.2 - Formulários: form <form action=url_de_script method=método>...</form> form action method POST GET exceto outros formulários form 6.2 - Formulários: Um dos recursos mais fascinantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário o usuário pode interagir com o servidor, enviando dados que

Leia mais

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

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

Leia mais

Programação web Prof. Wladimir

Programação web Prof. Wladimir Programação web Prof. Wladimir HTML @wre2008 1 Sumário Histórico; Resumo XHTML; Tags; Edição de documentos HTML; Publicação de um documento; Estrutura básica de um documento HTML; Edição de documentos

Leia mais

PROGRAMAÇÃO WEB DO LADO DO CLIENTE

PROGRAMAÇÃO WEB DO LADO DO CLIENTE PROGRAMAÇÃO WEB DO LADO DO CLIENTE FORMULÁRIO Na linguagem HTML é permitido que o usuário interaja com o servidor através de formulários ligados a scripts desenvolvidos em linguagens como PHP, Servlets,

Leia mais

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO. I. Ementa HTML e XHTML, de estrutura e marcação utilizados na sua composição; CSS.

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO. I. Ementa HTML e XHTML, de estrutura e marcação utilizados na sua composição; CSS. UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Programação de Computadores

Leia mais

Introdução à Tecnologia Web

Introdução à Tecnologia Web Introdução à Tecnologia Web HTML HyperText Markup Language XTML extensible HyperText Markup Language Elementos da Seção do Corpo Tabelas Formulários Professor Alan Cleber Borim www.alanborim.com.br Índice.

Leia mais

OPERAÇÃO DE SOFTWARE E APLICATIVOS

OPERAÇÃO DE SOFTWARE E APLICATIVOS OPERAÇÃO DE SOFTWARE E APLICATIVOS 1 SUMÁRIO 1 INTRODUÇÃO A WEB... 4 1.1 O QUE É A WORLD WIDE WEB?... 4 1.2 COMO FUNCIONA A WWW?... 4 1.3 SERVIDORES WEB... 4 1.4 BROWSERS... 4 1.5 PADRÕES DA WEB... 5 1.6

Leia mais

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

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

Leia mais

Projeto e Criação de Páginas de Web

Projeto e Criação de Páginas de Web Programa do Curso Projeto e Criação de Páginas de Web João Sérgio S. Assis Núcleo de Computação Eletrônica da UFRJ Tel. (021) 2598-3214 Fax. (021) 2270-8554 e-mail: joao@nce.ufrj.br Material Notas de Aula

Leia mais

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Laboratório de Práticas

Leia mais

> Herbet Ferreira Rodrigues > contato@herbetferreira.com

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

Leia mais

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont APOSTILA Curso de HTML com PHP HTML Pablo Dapont PET Computação - sala 202 Prédio 43424 ( prédio dos laboratórios ) Instituto de Informática - UFRGS email : pet@inf.ufrgs.br Av. Bento Gonçalves, 9500 bloco

Leia mais

Introdução. HyperText Markup Language HTML. Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário

Introdução. HyperText Markup Language HTML. Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário Introdução HyperText Markup Language HTML Formulário Prof. Luis Nícolas de Amorim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ O usuário interage com os serviços

Leia mais

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

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

Leia mais

HTML Curso Básico HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos.

HTML Curso Básico HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos. HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos. 1 Índice 1 - INTRODUÇÃO 3 2 - TAGS 3 3 - EDITORES 3 4 - SALVANDO UMA PAGINA HTML 3 5 - INICIANDO UMA PÁGINA 3 6 - CONSTRUINDO

Leia mais

QUEM FEZ O TRABALHO?

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

Leia mais

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN Sumário 1. Introdução...1 2. Tags...1 3. HTML...1 4. Cabeça, Corpo

Leia mais

HTML -- Criação de Home Page

HTML -- Criação de Home Page PPáággi innaa 1 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ção (DL). Um detalhe

Leia mais

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

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

Leia mais

Curso PHP Básico. Jairo Charnoski do Nascimento

Curso PHP Básico. Jairo Charnoski do Nascimento Curso PHP Básico Jairo Charnoski do Nascimento Agenda Ferramentas necessárias Introdução HTML HTML? Tags Construindo seu primeiro website Observações sobre a estrutura Mais tags Atributos Agenda Cores

Leia mais

3 HTML Tabelas, frames e formulário

3 HTML Tabelas, frames e formulário 3 HTML Tabelas, frames e formulário Vinicius A. de Souza va.vinicius@gmail.com São José dos Campos, 2011. 1 Sumário Desenvolvimento Web Tabelas...3 Principais atributos das tabelas...4 Principais atributos

Leia mais

Formulários. Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros.

Formulários. Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros. Formulários Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros. O formulário depende de outros programas no servidor, para receber e

Leia mais

Roteiro 2: Conceitos de Tags HTML

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

Leia mais

Programação para Internet I

Programação para Internet I Programação para Internet I Aula 05 e 06 Fernando F. Costa nando@fimes.edu.br 1 Tags de Formatação de Texto - Permite que um texto se mova de um lado para o outro da página. Sintaxe:

Leia mais

CSS Cascading Style Sheets Folhas de Estilo em Cascata

CSS Cascading Style Sheets Folhas de Estilo em Cascata CSS Cascading Style Sheets Folhas de Estilo em Cascata Conjunto de instruções que controla a aparência de uma página Web 1. Regra CSS seletor { propriedade1: valor; propriedade2: valor; 2. Aplicação 2.1

Leia mais

HTML: Listas, Tabelas e Formulários CST Sistemas para Internet

HTML: Listas, Tabelas e Formulários CST Sistemas para Internet HTML: Listas, Tabelas e Formulários CST Sistemas para Internet Marx Gomes Van der Linden ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida ) Listas Listas de itens são bastante

Leia mais

Introdução. História. Como funciona

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

Leia mais

Desenvolvedor Web Docente André Luiz Silva de Moraes

Desenvolvedor Web Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável

Leia mais

Compêndio códigos.

Compêndio códigos. <html> Compêndio códigos ADVERTÊNCIA: A que se segue é apenas uma lista com as tags de HTML e os seus possíveis atributos, não pretende de modo algum ser um manual. Pressupõe, portanto, que já se saiba

Leia mais

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Desenvolvimento de Sites com PHP e Mysql Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção

Leia mais

Maurício Samy Silva. Novatec

Maurício Samy Silva. Novatec Maurício Samy Silva Novatec Sumário Agradecimentos...13 Sobre o autor...13 Introdução...15 Para quem foi escrito este livro... 15 Convenções tipográficas... 16 Site do livro... 18 Capítulo 1 O que é (X)HTML?...20

Leia mais

Compêndio códigos. {css}

Compêndio códigos. {css} Compêndio códigos {css} ADVERTÊNCIA: A que se segue é apenas uma lista com as propriedades de CSS, não pretende de modo algum ser um manual. Pressupõe, portanto, que já se saiba de antemão o signi cado

Leia mais

DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral

DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral Apostila retirada de http://www.ibestmasters.com.br DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral A tecnologia DHTML (Dynamic HTML) foi apresentada inicialmente como um conjunto

Leia mais

4. Características Gerais das Tabelas do HTML

4. Características Gerais das Tabelas do HTML 4. Características Gerais das Tabelas do HTML Curso de Extensão em HTML PUCRS A criação de uma tabela começa pelo tag e termina pelo tag. Antes do texto de cada linha da tabela você deve inserir o tag

Leia mais

O HTML possui sintaxes para os tags na ordem LIFO, ou seja, o último tag a ser digitado é o primeiro a ser fechado, por exemplo:

O HTML possui sintaxes para os tags na ordem LIFO, ou seja, o último tag a ser digitado é o primeiro a ser fechado, por exemplo: HTML é a sigla usada para Hyper Text Markup Language (linguagem de Marcação de Hipertexto). É a linguagem destinada a criação de páginas para a WEB. Ao contrário do que muita gente boa pensa, HTML não

Leia mais

Tecnologias para apresentação de dados - HTML. Aécio Costa

Tecnologias para apresentação de dados - HTML. Aécio Costa Tecnologias para apresentação de dados - HTML Aécio Costa Apresentação de Dados na Web Tecnologias client-side HTML CSS JavaScript HyperText Markup Language Uma linguagem de marcação utilizada para produzir

Leia mais

INTRODUÇÃO AO DESENVOLVIMENTO WEB

INTRODUÇÃO AO DESENVOLVIMENTO WEB INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Formulários Os formulários em HTML são usados para selecionar diferentes tipos de entradas do usuário. Um formulário é uma área que

Leia mais

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON COMPONENTES: ROBSON EDMILSON O HTML (Hiper Text Mark-up Language) é uma linguagem de programação hipertexto. O HTML tem códigos para criar páginas na web. Estes códigos que definem o tipo de letra, qual

Leia mais

EXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}

EXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: Times New Roman, serif;} Fontes A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada na máquina

Leia mais

CSS Luciano Otávio de Assis CSS

CSS Luciano Otávio de Assis CSS CSS O HTML tem suas limitações quando se tratar de se construir layout. É certo, você tem seis diferentes tipos s títulos e de 6 diferentes tamanhos de fontes. Quando você trabalha com tabelas, você tem

Leia mais

Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc

Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc Dicas Importantes: - Sempre crie um diretório em seu computador e salve todos os arquivos que vai usar (imagens e paginas),

Leia mais

Mais sobre uso de formulários Site sem Ajax

Mais sobre uso de formulários Site sem Ajax Mais sobre uso de formulários Site sem Ajax Página com busca padrão 1 Página com o resultado da busca carregada no local da anterior (o formulário está vazio) Site com Ajax 2 Site usando Ajax para preencher

Leia mais

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Formulários HTML Aula 07: Formulários e Frames HTML Os formulários HTML são utilizados, geralmente, como entradas de dados prépreenchimento,

Leia mais

CSS. Sérgio Nunes. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13

CSS. Sérgio Nunes. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13 CSS Sérgio Nunes Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13 1 Objetivos Conhecer as origens e os objetivos da linguagem CSS. Conhecer a estrutura base de uma regra CSS. Compreender

Leia mais

Apostila CSS - Introdução à folha de estilos

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

Leia mais

HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web;

HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web; HTML Introdução Introdução ao HTML HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web; É uma linguagem de hipertexto; Permite escrever texto de forma estruturada, que está

Leia mais

4.14 - Imagens: src único atributo que não pode ser omitido neste TAG Nota: img

4.14 - Imagens: <img src=...> src <img src=tecnologia.jpg> único atributo que não pode ser omitido neste TAG Nota: img 4.14 - Imagens: O TAG utilizado para a inclusão de imagens em páginas html é o: O atributo src especifica o local onde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso

Leia mais

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com Luiz Leão luizleao@gmail.com http://luizleao.com CONTEÚDO PROGRAMÁTICO DESTA UNIDADE HTML TAG S HTML LINGUAGEM HTML Hypertext Markup Language Interpretada pelo navegador Não linearidade da informação Formatação

Leia mais

4 - HTML Básico: 4.2 - Criando documentos HTML:

4 - HTML Básico: 4.2 - Criando documentos HTML: 4 - HTML Básico: 4.1 - O que é HTML? Os documentos na Web são organizados com o uso de comandos que são interpretados pelos browsers. Estes comandos compõem a linguagem HTML (HyperText Markup Language).

Leia mais

Os componentes de um formulário são: Form, Input, Select e AreaText

Os componentes de um formulário são: Form, Input, Select e AreaText HTML Formulário O elemento FORM, da HTML, é o responsável por prover documentos interativos no ambiente WWW de forma que uma pagina web exibida a um usuário possa submeter um conjunto de dados, informados

Leia mais

MÓDULO 1 - xhtml Básico

MÓDULO 1 - xhtml Básico MÓDULO 1 - xhtml Básico 1. Introdução xhtml significa Extensible Hypertext Markup Language (Linguagem de Marcação Hipertextual Extensível) e é a linguagem de descrição de documentos usada na World Wide

Leia mais

Web Design. Prof. Felippe

Web Design. Prof. Felippe Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre

Leia mais

4.14 - Imagens: SRC único atributo que não pode ser omitido neste tag Nota: img

4.14 - Imagens: <IMG SRC=...> SRC <IMG SRC=tecnologia.jpg> único atributo que não pode ser omitido neste tag Nota: img 4.14 - Imagens: O tag utilizado para a inclusão de imagens em páginas html é o: O atributo SRC especifica o local aonde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso

Leia mais

Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com

Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA INFORMÁTICA E METODOLOGIA - SUBSEQUENTE 1 Quem sou eu? Ana Paula Alves de Lima Formação: Bacharel em Sistemas de Informação;

Leia mais

Programação e Designer para WEB

Programação e Designer para WEB Programação e Designer para WEB html Prof. Rodrigo Rocha prof.rodrigorocha@yahoo.com http://www.bolinhabolinha.com Apresentação Onde Estamos Introdução a hipertexto. A linguagem. Ambientes para programação

Leia mais

APOSTILA DE PROGRAMAÇÃO WEB

APOSTILA DE PROGRAMAÇÃO WEB Programação Web - CSS 1 PROFESSOR LUIS NÍCOLAS DE AMORIM TRIGO APOSTILA DE PROGRAMAÇÃO WEB CSS CASCADING STYLE SHEETS (FOLHAS DE ESTILO EM CASCATA) Programação Web - CSS 2 INTRODUÇÃO CSS, também conhecido

Leia mais

Web design & HTML. avançado

Web design & HTML. avançado Web design & HTML avançado Helder da Rocha Rev.: WDHT-03-2000/04 A4 (ASIT) Copyright 1998, 1999, 2000 por Helder Lima Santos da Rocha. Todos os direitos reservados. Os direitos do autor sobre esta obra

Leia mais

Comandos Básicos de HTML

Comandos Básicos de HTML Comandos Básicos de HTML Agora iniciaremos o estudo ao HTML, para você fazer o site utilize o bloco de notas do windows(notepad) ou um outro editor de texto como Notepad++, Geany ou PSPAD. Para fazer você

Leia mais

Introdução ao HTML Hypertext Markup Language

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

Leia mais

HyperText Markup Language HTML

HyperText Markup Language HTML HyperText Markup Language HTML Prof. Luis Nícolas de Amorim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ Introdução Linguagem de Marcação de Hipertexto. Uma

Leia mais

Introdução 1ª Parte Web Web Web Web Browsers Editores Editores Etiquetas (tags) base indica que se trata de uma página escrita em linguagem HTML. Esta deve abranger todo o código;

Leia mais

Introdução à Cascading Style Sheets

Introdução à Cascading Style Sheets Estilo e Produtividade para Websites OVERVIEW História e Significado Por que usar? Como usar? Orientações ao Desenvolvedor O que é CSS? O que é CSS? Cascading Style sheets" ou "Folhas de Estilo Encadeadas

Leia mais

HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto)

HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto) HTML (Hypertext Markup Language Linguagem de Marcação de Hipertexto) CSS - Cascading Style Sheets CSS serve para definir propriedades de apresentação/formatação a aplicar em tags HTML. A sua utilização

Leia mais

Programação para Internet I

Programação para Internet I Programação para Internet I Aulas 09 e 10 Fernando F. Costa nando@fimes.edu.br Formulários O formulário representa o modo mais importante de interatividade que a linguagem HTML oferece. Um formulário pode

Leia mais

Programação para Internet

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

Leia mais

Programação para Internet

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

Leia mais

Tecnologia WEB I. Prof. Erwin Alexander Uhlmann. Dos princípios do HTML, estruturação com CSS e automação com Javascript

Tecnologia WEB I. Prof. Erwin Alexander Uhlmann. Dos princípios do HTML, estruturação com CSS e automação com Javascript 1 Tecnologia WEB I Prof. Erwin Alexander Uhlmann Dos princípios do HTML, estruturação com CSS e automação com Javascript UHLMANN, Erwin Alexander. Dos princípios do HTML, estruturação com CSS e automação

Leia mais

OURO MODERNO www.ouromoderno.com.br. Web Designer APOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo)

OURO MODERNO www.ouromoderno.com.br. Web Designer APOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo) Web Designer APOSTILA DE EXEMPLO (Esta é só uma reprodução parcial do conteúdo) 1 Índice Aula 1 HTML... 3 Tags... 4 Estrutura de uma Página HTML... 4 Cores e fontes... 7 Código Hexadecimal de uma cor...

Leia mais

Técnicas e processos de produção. Profº Ritielle Souza

Técnicas e processos de produção. Profº Ritielle Souza Técnicas e processos de produção Profº Ritielle Souza Ferramentas Programáveis Mensagem para mais de um destinatário FALE CONOSCO Definindo

Leia mais

Roteiro de Estudos e Atividades Avaliativas HTML

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

Leia mais

Tutorial de HTML. O que é HTML? Aprendendo

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

Leia mais

Conteúdo Programático do Web Design

Conteúdo Programático do Web Design Conteúdo Programático do Web Design O Ambiente Macromedia Dreamweaver Instalação do Dreamweaver Arquivos Utilizados na Apostila A Inicialização de Dreamweaver Área de Trabalho Dreamweaver Criação de uma

Leia mais

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

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

Leia mais

Desenvolvimento de Aplicações para Internet

Desenvolvimento de Aplicações para Internet Desenvolvimento de Aplicações para Internet Aula 03 Celso Olivete Júnior olivete@fct.unesp.br Na aula de hoje... Javascript: introdução, operadores lógicos e matemáticos, comandos condicionais. Javascript:

Leia mais

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

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

Leia mais

Ensino I nterativo Universidade Anhembi Morumbi. Multimídia I

Ensino I nterativo Universidade Anhembi Morumbi. Multimídia I Ensino I nterativo Universidade Anhembi Morumbi Multimídia I Objetivo Mostrar o que é preciso para o desenvolvimento de um Projeto para Web, apresentando os primeiros conceitos de HTML. Tópicos 1. Etapas

Leia mais

Escrito por Sáb, 15 de Outubro de 2011 21:16 - Última atualização Seg, 26 de Março de 2012 03:31

Escrito por Sáb, 15 de Outubro de 2011 21:16 - Última atualização Seg, 26 de Março de 2012 03:31 Preço R$ 129.00 Compre aqui Entre definitivamente para o mundo de desenvolvimento web. Curso Webdesigner, criação de Sites com HTML, DHTML, javascript e CSS + dreamweaver cs4. São 147 videoaulas, 2 dvd

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Listas A HTML permite definir três categorias distintas de listas: Ordenadas Sem ordenação Lista de definição 2/28 Listas

Leia mais

CSS - Background, Color e Fontes. Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br

CSS - Background, Color e Fontes. Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br Web Introdução Design CSS - Background, Color e Fontes Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br O que veremos... CSS Cores e fundos Fontes Cores e fundos Algumas propriedades

Leia mais

Curso de HTML. Rone Ilídio

Curso de HTML. Rone Ilídio Curso de HTML Rone Ilídio HTML HyperText Mark-up Language Linguagem criação de páginas Apresenta informações Formada por tags, exemplo: Tag H1: dados marcados com h1 Interessante: Acesse qualquer

Leia mais

neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css?

neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css? neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css? O html inclui uma tag para praticamente todos os elementos de design comumente

Leia mais

Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe:

Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe: 48 10. CSS 10.1 O que é CSS? CSS é a mesma coisa que Style Sheets e que Folhas de Estilo. Você já deve ter visto esses nomes em vários lugares. CSS é mais uma forma de aperfeiçoar seus documentos, o CSS

Leia mais

Prof. Erwin Alexander Uhlmann 1/7/2010

Prof. Erwin Alexander Uhlmann 1/7/2010 HTML 5 O html 5 é a nova versão do html 4. Foi desenvolvido para a interoperabilidade e padronização de plataformas e navegadores (motores). Compare as estruturas do html4 e do 5, abaixo: HTML 4 HTML 5

Leia mais

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com. #Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Apresentar os conceitos de utilização do CSS, Sintaxe, Seletores

Leia mais

Aula 05 HTML FORMULÁRIOS Prof. Daniela Pires Sumário

Aula 05 HTML FORMULÁRIOS Prof. Daniela Pires Sumário Sumário FORMULÁRIO EM HTML... 2 FORM... 2 ACTION... 2 METHOD... 2 INPUT... 2 INPUT TYPE TEXT... 2 INPUT TYPE PASSWORD... 2 CHECKBOX - Múltipla escolha... 4 RADIO - Escolha única... 4 Botões de ação...

Leia mais

INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES FRAMES. Professor Carlos Muniz

INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES FRAMES. Professor Carlos Muniz INTRODUCAO DESENVOLVIMENTO E DESIGN DE FRAMES Algumas páginas da internet são congeladas em seu cabeçalho ou em seu lado esquerdo, para construção de menus que geralmente precisam estar disponíveis para

Leia mais

XHTML. A versão mais recente desta linguagem é a XHTML (extensible HyperText Markup Language Linguagem de Marcação de Hipertexto Estendida).

XHTML. A versão mais recente desta linguagem é a XHTML (extensible HyperText Markup Language Linguagem de Marcação de Hipertexto Estendida). XHTML 1. Significado do Termo HTML (HyperText Markup Language Linguagem de Marcação de Hipertexto) é a linguagem na qual são feitas as páginas que irão compor um site da Internet. A versão mais recente

Leia mais

CURSO BÁSICO DE HTML Alessandro S Silveira. Lista de tags e atributos

CURSO BÁSICO DE HTML Alessandro S Silveira. Lista de tags e atributos CURSO BÁSICO DE HTML Alessandro S Silveira Lista de tags e atributos Os tags apresentados aqui formam uma compilação das definições oficiais da linguagem mais as extensões introduzidas por empresas como

Leia mais

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução O Gmail possui duas versões distintas para seu webmail: uma mais recente, que é a versão atual utilizada pelos usuários de Gmail, e

Leia mais

Conteúdo Dinâmico. Introdução. Interação Browser x Servidor Web. Interação Browser x Servidor Web

Conteúdo Dinâmico. Introdução. Interação Browser x Servidor Web. Interação Browser x Servidor Web Introdução Formulários rios & Conteúdo Dinâmico Mário Antonio Meireles Teixeira Dept o. de Informática - UFMA A Web surgiu inicialmente como uma nova forma de comunicação de informações, fazendo uso de

Leia mais

Curso de HTML. Daniel Destro do Carmo Softech Network Informática daniel@danieldestro.com.br

Curso de HTML. Daniel Destro do Carmo Softech Network Informática daniel@danieldestro.com.br Daniel Destro do Carmo Softech Network Informática daniel@danieldestro.com.br Definições conceituais O que é HTML? Criando e publicando uma página web Elementos da HTML Estrutura básica de uma página HTML

Leia mais

COMO FUNCIONA UM FORMULÁRIO

COMO FUNCIONA UM FORMULÁRIO FORMULÁRIOS Constitui-se numa das formas de a máquina cliente enviar informações para que um programa no servidor receba estes dados, processe-os e devolva uma resposta ao usuário, por meio do navegador,

Leia mais

O código acima descreve o formulário com uma caixa de texto e dois botões

O código acima descreve o formulário com uma caixa de texto e dois botões Formulários Formulários permitem que os usuários interajam com um servidor Web passando informações. Assim, através da Web, se pode ler e gravar informações em Banco de Dados, gerando enormes possibilidades

Leia mais