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 HTML e com ligações de hipertexto que permitem a navegação de uma página, ou secção, para outra. As páginas web usam com freqüência arquivos gráficos associados para fins de ilustração, e também estes arquivos podem ser ligações clicáveis. Como se acessa uma página WEB? Através de um navegador WEB, também conhecido como Browser (IE, Firefox, Google Chrome, Safari). O que são TAGs? As TAGs são case-sensitives? São códigos que fazem a formatação de uma página WEB (código html). Ex: <Font size="2">teste</font> <center> Hoje é segunda-feira </center> As TAGs não são case-sensitives, isto é, possuem a mesma função se escritas em maiúsculas ou minúsculas. Estrutura de uma página HTML: <HTML> <HEAD> <TITLE> TÍTULO DA PÁGINA </TITLE> </HEAD> <BODY> </BODY> </HTML> Marcas de parágrafo: <P> <p align = justify or center ou left or right >Texto que receberá a formatação</p> Quebra de linha: <BR> Obs.: <BR> <BR> = <P> Alterando atributos da fonte: Fonte: <font> </font> <Font size = 5 //tamanho da fonte face = Arial // tipo da fonte color = #004080 // cor da fonte </Font> Estilos de texto: Negrito: <B> </B> Itálico: <I> </I> Sublinhado: <U> </U> Sobrescrito: <SUP> </SUP> 3² Subscrito: <SUB> </SUB> H₂O URLs e Links: <A HREF = index.htm > Página inicial </A> //Abre na mesma página <A HREF = index.htm TARGET = _blank > Página inicial </A> // Abre outra janela (aba)
2 Inserindo Imagens: <IMG SRC = img/foto.jpg > // O img é o nome do diretório onde a imagem está armazenada Imagens clicáveis: <A HREF = xxx.php > <IMG SRC = foto.jpg ></A> // A foto tem que estar no mesmo diretório, não no img Tamanho do Título: Vai de H1 até H6: <H1> Título </H1> Obs: O H1 possui a maior fonte. Tabelas: Tags para montar uma tabela: <TABLE BORDER = 1 BGCOLOR = RED > // ABRE LINHA <TD> A1 </TD> // ABRE E FECHA COLUNA <TD> A2 </TD> // FECHA LINHA </TABLE> // FECHA TABELA Listas em HTML: ** Como mesclar células: colspan => mescla colunas rowspan => mescla linhas <TABLE> <TD> 1 </TD> <TD COLSPAN = 2 > 2 </TD> <TD COLSPAN = 3 > 3 </TD> <TD ROWSPAN = 2 COLSPAN = 2 > 4 </TD> <TD> 5 </TD> <TD> 6 </TD> </TABLE> 1 2 3 4 5 6 ** Listas não numeradas: <LI> FLAMENGO <LI> VASCO <LI> BOTAFOGO FLAMENGO VASCO BOTAFOGO
3 ** Listas dentro de listas: <LI> TIMES DO RIO <LI> FLAMENGO <LI> VASCO <LI> BOTAFOGO <LI> TIMES DE SÃO PAULO <LI> SÃO PAULO <LI> PALMEIRAS TIMES DO RIO o FLAMENGO o VASCO o BOTAFOGO TIMES DE SÃO PAULO o SÃO PAULO o PALMEIRAS Pode definir qual marcador queremos usar: <UL type = circle> <LI> disc o circle square ** Listas numeradas: <OL> <LI> FLAMENGO <LI> VASCO RESULATDO: 1. FLAMENGO 2. VASCO Para fazer um link <OL> <LI> <A HREF = "www.flamengo.com.br" TARGET = _blank >FLAMENGO</A> TIPOS DE CONTADORES <OL TYPE = I> <LI> DOC BÁSICOS <LI> DOC AVANÇADOS <OL TYPE = a> <LI> FORMULÁRIOS <OL TYPE = i> <LI> CGI
4 <LI> CONTADORES <LI> RELÓGIOS <LI> DETALHES SOBRE IMAGENS I. DOC BÁSICOS II. DOC AVANÇADOS a. FORMULÁRIOS i. CGI b. CONTADORES c. RELÓGIOS III. DETALHES SOBRE IMAGENS Definição de número de começo <OL START = 4 TYPE = a> <LI> FUTEBOL <LI> BASQUETE <LI> FUTSAL d. FUTEBOL e. BASQUETE f. FUTSAL FRAMES CAB. PHP HOME.PHP // DIVIDE A TELA EM DOIS FRAMES <HTML> <HEAD> <TITLE> TITULO </TITLE> </HEAD> <FRAMESET FRAMESPACING = 10 BORDER = "FALSE" FRAMEBORDER = 0 ROWS = 30%, 70% > <FRAME NAME = TOPO SRC = CAB.PHP TARGET = MAIN SCROLLING = NO NORESIZE> <FRAME NAME = MAIN SRC = HOME.PHP TARGET = MAIN SCROLLING = YES NORESIZE> </FRAMESET> <NO FRAMES> <BODY> Esta página usa recursos de frame e o seu browser não suporta este recurso. </BODY> </NO FRAME> </HTML> OBS.: barra de rolagem Não pode redimensionar
5 Formulários: <FORM action = URL de script method = método >... </FORM> Action: especifica a URL do script ao qual serão enviados os dados do formulário. Method: Seleciona um método para acessar a URL de ação. Os métodos usados atualmente são get e post. Ambos os métodos transferem os dados do browser para o servidor, com a seguinte diferença básica: o Post: Os dados fazem parte do corpo de mensagem enviada ao servidor e transfere grande quantidade de dados. o Get: os dados fazem parte da URL (endereço) <INPUT> O campo <INPUT> tem um atributo type, o qual atribuímos seus valores diferentes para gerar vários tipos diferentes de entrada de dados. Campo de dados texto: Quando o input não apresenta atributos é assumido que o type = text (default) Nome: <input type = text name = Nome > Ou apenas Nome: <input name = Nome > Nome: Campo de dados senha: Entrada de texto na qual os caracteres são escondidos por asteriscos (*) ou. Login: <input type = text name = login > Senha: <input type = password name = senha > Nome: Maria Senha: ********* Alguns atributos para os campos do tipo text e password: o Value: pode ser usado para dar um valor inicial a um campo. Desse modo se o usuário não preencher este campo, será adotado esse valor padrão. Se o usuário quiser entrar com dados, ele apaga o que se encontra escrito e escreve o texto desejado. Nome: <input type = text name = Nome value = Seu nome > Nome: Seu nome o Size: especifica o tamanho do espaço na tela para o campo do formulário. Só é válido para campos text e password. O valor default (padrão) é 20. Endereço: <input type = text size = 35 > Endereço: -------------------------- 35 caracteres
o Maxlenght é o número máximo de caracteres aceito em um campo de dados (somente text e password). Dia do mês <input type = text Maxlenght = 2 > Dia do mês: ------------------------- Por default, o espaço destinado na tela é de 20 caracteres, mais não consegue digitar mais que 2, especificado no Maxlenght. Campo de dados oculto (hidden): Usado quando apesar da informação ser importante para o programa que irá processar os dados, esta não necessita ser apresentada ao usuário. <input type="hidden" name="matricula" value="25"> Atributos válidos do identificador INPUT para o tipo HIDDEN: o name: é o nome simbólico deste INPUT. o value: é o valor relacionado a este INPUT. Múltipla escolha: o Checkbox insere um botão para escolha de opções <input type = checkbox name = esporte value = Basquete > Basquete <BR> <input type = checkbox name = esporte value = bocha > Bocha Uma diretiva checked marca uma escolha inicial: <input type = checkbox name = esporte value = volei checked > Volei Basquete Bocha Volei Escolha única: Radio insere um botão de escolha de valores para uma opção, isto é, somente uma alternativa pode ser escolhida. <input type = Radio name = time value = Palmeiras > Palmeiras <BR> <input type = Radio name = time value = Flamengo > Flamengo <BR> Uma diretiva checked marca uma escolha inicial: <input type = Radio name = time value = Fluminense checked > Fluminense 6 Botões de ação Palmeiras Flamengo Fluminense Submit apresenta o botão que causa o envio dos dados de entrada para o servidor. <input type = submit>
7 Enviar Consulta É possível modificar o rótulo desse botão através do atributo value <input type = submit value = Enviar Mensagem > Enviar Mensagem Reset restaura os valores originais das entradas de dados. <input type = reset> Redefinir É possível modificar o rótulo desse botão através do atributo Value: <input type = reset value = Apagar Tudo! > Apagar Tudo! SELECT Apresenta uma lista de valores através de campos option: <select name = Sabor size = 4 > <Option> Abacaxi <Option selected> Creme <Option> Morango <Option> Chocolate <Option> Coco </select> Textarea: Abre uma área para entrada de texto, de acordo com os atributos para o número de colunas, linhas e, se for o caso, um valor inicial <textarea cols = 40 rows = 5 name="comentario">deixe seu comentário</textarea>