Prof° Rafael Guem Murakami São Paulo 2006 Sumário 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. Definições............................................................................................................. 4 O que é HTML e onde utilizamos? ........................................................................ 4 Antes de desenvolver uma página.......................................................................... 4 O que significa o WWW?...................................................................................... 4 Podemos desenvolver uma página... ...................................................................... 5 Iniciando os comandos do HTML ......................................................................... 5 Cabeçalho e Título ................................................................................................ 5 A tag <body> ........................................................................................................ 6 Comando h............................................................................................................ 7 Formatação de texto .......................................................................................... 8 Inserindo Imagem.............................................................................................. 9 Tabela ............................................................................................................. 12 Links ............................................................................................................... 13 Lista ................................................................................................................ 14 Formulário ...................................................................................................... 15 Frame.............................................................................................................. 20 Áudio .............................................................................................................. 22 Vídeo .............................................................................................................. 23 Meta <meta> ................................................................................................... 23 Bibliografia ..................................................................................................... 25 ______________________________________________________________________ 2 Prof°. Rafael Guem Murakami <rafaelmurakami.tripod.com> Índice de figuras Figura 01 1: Exibindo o código fonte............................................................................. 5 Figura 01 2: Cabeçalho e Tìtulo .................................................................................... 6 Figura 01 3: Inserindo body .......................................................................................... 7 Figura 01 4: Cabeçalho do texto.................................................................................... 8 Figura 01 5: Formatação .............................................................................................. 9 Figura 01 6: Texto com figura ..................................................................................... 10 Figura 01 7: Inserindo tabela ...................................................................................... 13 Figura 01 8: Listas ...................................................................................................... 15 Figura 01 9: Formulário-1 .......................................................................................... 18 Figura 01 10: Formulário-2, com envio....................................................................... 20 Figura 01 11: Página com frame ................................................................................. 22 ______________________________________________________________________ 3 Prof°. Rafael Guem Murakami <rafaelmurakami.tripod.com> 1. Definições Internet -> Rede de computadores global, ou seja, é a conecção entre os computadores do mundo inteiro, como se fosse uma grande teia de aranha. Intranet->Uma rede de computadores local, ou seja, apenas algumas pessoas tem acesso a essa rede, em uma empresa, por exemplo, apenas os funcionários dessa empresa tem acesso, uma rede restrita. Extranet-> Utiliza-se a tecnologia de uma Internet para conectar duas ou mais intranets. Hotsite-> São páginas de Internet que tem por função fazer propaganda de determinado produto, lá apenas tem informações desse determinado produto. Website-> Páginas de Internet que contêm informações estáticas ou animadas e animação dentro dela. Homepage-> Páginas de Internet que tem informações, mas não contem animação como, por exemplo, feita no Flash. HTML(Hyper Text Markup Language-Hiper Texto de Linguagem de Formatação) ->HTML não é uma linguagem de programação, mas de formatação, não fazemos programas em HTML. 2. O que é HTML e onde utilizamos? O HTML é utilizado para fazer páginas Web, os comandos do HTML são formados por tags, Todos os comandos tem que ser feito entre as tags <html></html>, o que é colocado depois da tag</html> não é válido, pois o comando </html>, quer dizer final da página HTML. Os comandos principais têm o começo e o final, como por exemplo <head></head>, <body></body>, <html</html>, entre outros. Os caracteres </ juntos, quer dizer final do comando. 3. Antes de desenvolver uma página... Antes de começar a desenvolver uma página Web, precisamos primeiro fazer um projeto, ver qual será o público alvo dela e materiais que serão colocados. Para o projeto, se o Home vai ligar a todas as outras páginas e elas serão ligadas a Home, se a Home vai apenas ligar a uma página e essa ligada outra e assim sucessivamente, se todas as páginas se ligam. 4. O que significa o WWW? A World-Wide Web (também chamada Web ou WWW) é um sistema de informações organizado de maneira a englobar todos os outros sistemas de ______________________________________________________________________ 4 Prof°. Rafael Guem Murakami <rafaelmurakami.tripod.com> informação disponíveis na Internet. Ela implementa três ferramentas importantes: - um protocolo de transmissão de dados – HTTP(HyperText Transfer Protocol - Protocolo de Transferência de Hipertexto); - um sistema de endereçamento próprio – URL( Uniform Resource Locator - Localizador Uniforme de Recursos); - uma linguagem de marcação, para transmitir documentos formatados através da rede - HTML. 5. Podemos desenvolver uma página... Para fazer uma página em HTML existem muitos programas com essa finalidade como, por exemplo, o Microsoft FrontPage do pacote MS-Office. Agora existe um editor que vem em qualquer Windows o bloco de notas, isso mesmo, através dele podemos fazer uma página Web, só precisamos ter o cuidado de na hora de salvar, não esquecer de salvar com o “.html”, colocamos o “nome do arquivo.html” no campo salvar como, pronto já está salvo uma página Web, o que salvamos é o que chamamos de código fonte, para visualizar o código fonte de uma página, basta ir em “Exibir->Código Fonte”, logicamente com a página aberta, como mostra a figura abaixo. Figura 01 1: Exibindo o código fonte 6. Iniciando os comandos do HTML Para iniciar qualquer página de HTML começa-se pela tag <html> e no final da página fecha-se a tag </html> 7. Cabeçalho e Título Para o cabeçalho utiliza-se a tag <head> E o título <title> é o que vai na barra de título(azul-padrão Windows) Se digitarmos o seguinte exemplo: ______________________________________________________________________ 5 Prof°. Rafael Guem Murakami <rafaelmurakami.tripod.com> <html> <head> <title> Titulo do HTML </title> </head> </html> E salvarmos como “titulo.html” A frase “Titulo do HTML” vai aparecer na barra de título da página e o nome do arquivo “titulo.html”, irá aparecer na barra de endereço, como mostra a figura. Figura 01 2: Cabeçalho e Tìtulo Até o momento não tem nada salvo para aparecer na nossa página. Para iniciar a parte do corpo. 8. A tag <body> Tudo o que estiver dentro do comando body, será apresentado no corpo da página. <html> <head> <title> Titulo do HTML </title> </head> <body> Minha primeira aula de HTML. </body> </html> ______________________________________________________________________ 6 Prof°. Rafael Guem Murakami <rafaelmurakami.tripod.com> Figura 01 3: Inserindo body Para atualizar a página apenas apertamos a tecla “F5” com a página aberta. 9. Comando h Existe o comando h para o título do texto e ela varia de 1 até 6. Este comando é a formatação do título. <html> <head> <title> Titulo do HTML </title> </head> <body> Minha primeira aula de HTML. <h1> Cabeçalho em H1</h1> <h2> Cabeçalho em H2</h2> <h3> Cabeçalho em H3</h3> <h4> Cabeçalho em H4</h4> <h5> Cabeçalho em H5</h5> <h6> Cabeçalho em H6</h6> </body> </html> ______________________________________________________________________ 7 Prof°. Rafael Guem Murakami <rafaelmurakami.tripod.com> Figura 01 4: Cabeçalho do texto 10. Formatação de texto No HTML também existem comandos de formatação como o Negrito<b>, Itálico<i>, Sublinhado<u>, Subscrito<sub>, sobrescrito<sup>, podemos também escolher o nome da fonte com o comando <face> o nome da fonte é colocado entre aspas, tamanho<size>, a tag para dar início à formatação é o <font>, alinhamento<align> e o parágrafo por <p>. Para pular de linha é o <br>. Espaço em branco é . Pode-se passar também uma linha na horizontal com o comando <hr>, conseguimos trabalhar com o seu tamanho com % ou colocando o número de pixels, para largura<size>, tamanho<width>, posicionamento<align> e se não quiser deixar o efeito 3D<noshade>. Por padrão qualquer início de frase ou linha fica alinhado para a esquerda. <html> <head> <title> Titulo do HTML </title> </head> <body> <font face=“Comic Sans MS” face=3> A fonte é o Comic Sans MS de tamanho 3,<b> essa parte está em negrito</b>, <i> essa em itálico</i>,<u> essa sublinhado</u>, <br><sub> essa subscrito</sub> e <sup> essa sobrescrito</sup> <hr size=4 width=35% align=center> ______________________________________________________________________ 8 Prof°. Rafael Guem Murakami <rafaelmurakami.tripod.com> <p align=center> Essa frase está centralizado</p> <p align=right> Essa frase está na direita</p> <p align=left> Essa frase está na esquerda</p> </font> </body> </html> Figura 01 5: Formatação 11. Inserindo Imagem Para inserir imagem no HTML, temos o comando <img src=“nomedafigura.extensão”>, para inserir a imagem no HTML, tem que se saber qual é a sua extensão e a figura necessita estar no mesmo local que está sendo feito à página. Pode-se alterar o tamanho da imagem <width>largura e <heigth>-altura, colocar uma legenda quando o mouse fica sobre a figura<alt>, colocar borda<border> e alinhar a figura com o texto<align>. Para colocar uma imagem de fundo utiliza-se dentro da tag <body> o <background>,exemplo <body background=“figura.extensão”>, se a figura for menor que o tamanho da página, ela será repetida até cobrir toda a página. No <height> e <width> coloca-se valor numérico; No <alt> coloca-se valor texto entre aspas; No <border> coloca-se valor numérico e No <align> coloca-se top(superior da imagem com o topo do texto), middle (meio da imagem com a inferior do texto), bottom (inferior da imagem com o inferior do texto), left (imagem na margem à esquerda do texto e o texto à direita) ou right (imagem na margem à direita do texto e o texto à esquerda). <html> <head> <title> Titulo do HTML </title> ______________________________________________________________________ 9 Prof°. Rafael Guem Murakami <rafaelmurakami.tripod.com> </head> <body> <img src=“abstrato.jpg” width=500 heigth=30% align=bottom border=2> Texto1, texto1, texto1, Texto1, texto1, texto1, Texto1, texto1, texto1, </body> </html> Figura 01 6: Texto com figura Tabelas de caracteres e cores Existe uma tabela de cores e de caracteres, existe browsers que não exibem acentuação, cedilhas se não forem em códigos. As cores são em hexadecimal e os caracteres começam com o &(e comercial) e terminam com “;”. Para colocar uma cor de fundo utiliza-se o <bgcolor> dentro do <body>, exemplo: Para ficar com a cor azul de fundo <body bgcolor=“#0000FF”>. Caracter Entidade de Caracter Entidade Numérica Tabulação Horizontal 	 Espaço não ignorável " " " À À À Á Á Á Â Â Â Ã Ã Ã Ç Ç Ç É É É Ê Ê Ê Í Í Í Ó Ó Ó ______________________________________________________________________ 10 Prof°. Rafael Guem Murakami <rafaelmurakami.tripod.com> Ô Õ Ú Ü à á â ã ç é ê í ñ ó ô ò ú ü Ô Õ Ú Ü à á â ã ç é ê í ñ ó ô õ ú ü Ô Õ Ú Ü à á â ã ç é ê í ñ ó ô õ ú ü Tabela de Cores Através de Valores Hexadecimais Antiquewhite....... Aqua.................. Aquamarine........ Azure................. Beige.................. Bisque................ Black.................. Blanchedalmond Blue................... Blueviolet........... Brown................. Burlywood.......... Cadetblue........... Chatreuse........... Chocolate........... Coral.................. Carnflowerblue... Cornsilk.............. Crimson............. Cyan.................. Darkblue............. Darkcyan............ Darkgoldenrod.... Darkgray............ Darkgreen.......... Darkkhaki........... Darkmagenta...... Darkolivegreen... Darkorange........ Darkorchid.......... Darkred.............. Darksalmon........ Darkseagreen..... Darkslateblue..... #FAEBD7 #00FFFF #7FFFD4 #F0FFFF #F5F5DC #FFE4C4 #000000 #FFEBCD #0000FF #8A2BE2 #A52A2A #DEB887 #5F9EA0 #7FFF00 #D2691E #FF7F50 #6495ED #FFF8DC #DC143C #00FFFF #00008B #008B8B #B8860B #A9A9A9 #006400 #BDB76B #8B008B #556B2F #FF8C00 #9932CC #8B0000 #E9967A #8FBC8F #483D8B Goldenrod...................... Gray.............................. Green............................ Greenyellow................... Honeydew...................... Hotpink.......................... Indianred....................... Indigo............................ Ivory.............................. Khaki............................. Lavander....................... Lavanderblush............... Lawngreen..................... Lemonchiffon................. Lightblue........................ Lightcoral....................... Lightcyan....................... Lightgoldenrodyelloow... Lightgreen...................... Lightgray........................ Lightpink........................ Lightsalmon................... Lightseagreen................ Lightskyblue................... Lightslategray................ Lightsteelblue................ Lightyellow..................... Lime.............................. Limegreen..................... Linen............................. Magenta........................ Maroon.......................... Mediumaquamarine....... Mediumblue................... #DAA520 #808080 #008000 #ADFF2F #F0FFF0 #FF69B4 #CD5C5C #4B0082 #FFFFF0 #F0E68C #E6E6FA #FFF0F5 #7CFC00 #FFFACD #ADD8E6 #F08080 #E0FFFF #FAFAD2 #90EE90 #D3D3D3 #FFB6C1 #FFA07A #20B2AA #87CEFA #778899 #B0C4DE #3FFFFE0 #00FF00 #32CD32 #FAF0E6 #FF00FF #800000 #66CDAA #0000CD Olive..................... Olivedrab.............. Orange.................. Orangered............. Orchid................... Palegoldenrod....... Palegreen............. Paleturquoise........ Palevioletred......... Papayawhip.......... Peachpuff............. Peru...................... Pink...................... Plum..................... Powderblue........... Purple................... Red....................... Rsybrown.............. Royalblue.............. Saddlebrown......... Salmon................. Sandybrown.......... Seagreen.............. Seashell................ Sienna.................. Silver.................... Skyblue................. Slateblue............... Slategray.............. Snow..................... Springgreen.......... Steelblue............... Tan....................... Teal...................... #808000 #6B8E23 #FFA500 #FF4500 #DA70D6 #EEE8AA #98FB98 #AFEEEE #DB7093 #FFEFD5 #FFDAB9 #CD853F #FFC0CB #DDA0DD #B0E0E6 #800080 #FF0000 #BC8F8F #4169E1 #8B4513 #FA8072 #F4A460 #2E8B57 #FFF5EE #A0522D #C0C0C0 #87CEEB #6A5ACD #708090 #FFFAFA #00FF7F #4682B4 #D2B48C #008080 ______________________________________________________________________ 11 Prof°. Rafael Guem Murakami <rafaelmurakami.tripod.com> Darkslategray..... Darkturquoise..... Darkviolet........... Deeppink............ Deepskyblue...... Dimgray............. Dodgerblue......... Firebrick............. Floralwhite.......... Forestgreen........ Fuchsia.............. Gainsboro.......... Ghostwhite......... Gold................... #2F4F4F #00CED1 #9400D3 #FF1493 #00BFFF #696969 #1E90FF #B22222 #FFFAF0 #228B22 #FF00FF #DCDCDC #F8F8FF #FFD700 Mediumorchid................ Mediumpurple................ Mediumseagreen........... Mediumslateblue............ Mediumspringreen......... Mediumturquoise........... Mediumvioltred.............. Midnightblue.................. Mintcream...................... Mistyrose....................... Moccasin....................... Navajowhite................... Navy.............................. Oldlace.......................... #BA55D3 #9370DB #3CB371 #7B68EE #00FA9A #48D1CC #C71585 #191970 #F5FFFA #FFE4E1 #FFE4B5 #FFDEAD #000080 #FDF5E6 Thistle................... Tomato................. Turquoise.............. Violet.................... Wheat................... White.................... Whitesmoke.......... Yellow................... Yellowgreen.......... #D8BFD8 #FF6347 #40E0D0 #EE82EE #F5DEB3 #FFFFFF #F5F5F5 #FFFF00 #9ACD32 12. Tabela A tag de tabela é a <table> e </table>. Tudo que quiser colocar na tabela tem que ser colocada entre a tag de começo e fim da tabela. Para inserir uma linha é a <tr> e </tr>, para inserir uma célula é a <td> e </td> e para colocar uma borda<border>. Se quiser colocar uma cor de na tabela inteira é parecido com o <body>, mas invés de colocar o <bgcolor> dentro do <body>, vai utilizar o <table>, se quiser em uma célula utiliza-se o <bgcolor> dentro da <td> e para ficar em uma linha dentro do <tr>, para a figura é o mesmo método. Para deixar uma celular ocupando mais de uma coluna utiliza-se o <colspan> dentro da <td>, agora para deixar uma célula ocupando mais de uma linha utiliza-se o <rowspan> dentro da <td>. A tabela também tem uma tag para o título da tabela que é o <th> e </th>. A tabela como também para o conteúdo dentro da célula pode ser alinhada pela tag <align>. <html> <head> <title> Titulo do HTML </title> </head> <body> <table border=3 bgcolor="#000000"> <tr> <th colspan="3"><font color="#FFFFFF">Título ocupando 3 colunas</th> <tr> <td><font color="#FFFFFF">texto1</td> <td rowspan="2"><font color="#FFFFFF">célula ocupando 2 linhas</td> <td><font color="#FFFFFF">texto3</td> ______________________________________________________________________ 12 Prof°. Rafael Guem Murakami <rafaelmurakami.tripod.com> </tr> <tr> <td><font color="#FFFFFF">texto4</td> <td><font color="#FFFFFF">texto5</td> </tr> <tr> <td colspan="2"><font color="#FFFFFF">célula ocupando 2 colunas</td> <td><font color="#FFFFFF">texto7</td> </tr> </table> </body> </html> Figura 01 7: Inserindo tabela 13. Links É a ligação entre dois hipertextos que além de link pode ser chamado de hiperlink ou âncoras de hipertextos. A tag que indica o link é o <a href>...</a> <a href=“http://nome_do_ site”>LINK</a> No exemplo de cima a palavra “LINK” vai fazer o efeito de ligação para a página “nome_do_site”, essa página é de outro lugar pois tem o “http”, se fosse fazer uma ligação para outra página da sua web, bastava colocar o nome da página, não precisa colocar o “http”. <a href=“nome”><img src=“figura.extensão”></a> Nesse outro exemplo a imagem será a ligação para a página “nome”. Até agora apenas fizemos associação de página para página, para fazer associação com e-mail basta colocar o mailto. ______________________________________________________________________ 13 Prof°. Rafael Guem Murakami <rafaelmurakami.tripod.com> <a href=“mailto:[email protected]”>contato</a> Neste exemplo o link é a palavra “contato”, ao clicar na palavra irá abrir o programa de e-mail e com o destinatário “[email protected]”. 14. Lista Aqui será apresentada lista ordenada, não ordenada e de definição. A tag que inicia a lista ordenada é a <ol>...</ol> e para os itens tanto na ordenada e não ordenada é o <li>...</li>. Lista Ordenada: <ol>Lista ordenada <li> Ítem 1</li> <li> Ítem 2</li> <li> Ítem 3</li> </ol> Se deseja começar a lista de um determinado, basta colocar o <start=“n°”> na tag <ol>. O exemplo de baixo vai começar no número 22. <ol start=“22”>Lista ordenada <li> Ítem 22</li> <li> Ítem 23</li> <li> Ítem 24</li> </ol> Para começar uma lista não ordenada, utiliza-se a tag <ul>...</ul> Na lista não ordenada pode colocar a figura de um “disc”•, “square”▪ ou “circle”○, basta colocar o comando <type=“nome da figura”>, dentro da tag <ul> <ul type=“circle”> <li> Ítem x</li> <li> Ítem y</li> <li> Ítem z</li> </ul> A lista de definição, é uma lista para definir algum termo, palavra. Começa-se com a tag <dl>...<dl> e o termo com a tag <dt>...<d/t> e a definição com a tag <dd>...</dd> <dl> <dt>Honorável</dt> <dd> Digno de receber honras.</dd> </dl> Exemplo com as listas: <html> <head> <title> ______________________________________________________________________ 14 Prof°. Rafael Guem Murakami <rafaelmurakami.tripod.com> Titulo do HTML </title> </head> <body> <ol start=“22”><b>Lista ordenada</b> <li> Ítem 22</li> <li> Ítem 23</li> <li> Ítem 24</li> </ol> <ul type="square"><b>Lista não ordenada</b> <li> Ítem a</li> <li> Ítem b</li> <li> Ítem c</li> </ul> <dl> <dt><b>Honorável</b></dt> <dd> Digno de receber honras.</dd> </dl> </body> </html> Figura 01 8: Listas 15. Formulário No formulário pode-se ter a interatividade do usuário com a empresa, a tag para começar um formulário é a <form>...</form>, para poder enviar os ______________________________________________________________________ 15 Prof°. Rafael Guem Murakami <rafaelmurakami.tripod.com> dados do usuário para o desenvolvedor/empresa, tem que ter obrigatoriamente o atributo o method=“POST”, ter o botão submit e o action=“URL”. Já sabemos como começa e os comandos que necessitamos para enviar algum dado via formulário, agora vamos explorar um pouco mais os comandos do formulário. Dentro da tag <form> podemos colocar: Action=“URL”, a URL é o local do servidor e do programa que processa o formulário. Method=“método de troca de dados”, mostrar qual o método usado para enviar os dados, pode ser o GET ou POST. O mais utilizado é o POST, que envia toda a informação do FORM após a URL. O GET faz com que as informações seja anexadas ao endereço da URL.Utilizando o GET, os dados passam pelo software e fica temporariamente numa variável de contexto QUERY_STRING. Exemplo: <form method=“post” action=“http://wwww...”> Comando <input> Essa parte vai definir qual o tipo de informação que o usuário irá colocar. Type=“text”, tipo texto; type=“password”, tipo senha, type=“checkbox”, tipo de seleção, podendo selecionar mais que uma; type= “radio”, seleção, mas apenas uma seleção; type=“submit”, botão de envio; type=“reset”, apaga tudo que estava escrito; type=“hidden”; campo invisível o conteúdo é enviado junto com os demais; name=“textstring”, substitui o textstring por algum nome, esse nome vai ser o manipulador interno, não será mostrado ao usuário; value=“textsring”, para os campos “text” ou “password”, representa o valor padrão do campo. Para os campos “checkbox” ou “radio”, representa o valor que será enviado. Para o “submit” ou “reset”, indica o que será mostrado no botão; CHECKED, indica qual será marcado por padrão; size=“tamanho”, “tamanho”, será a quantidade de caracteres que será mostrado, nos tipos “text” ou “password”, delimita o tamanho do espaço e não quantidade de caracteres que pode ser colocado; maxlength=“comprimento”, “comprimento” delimita a quantidade de caracteres que pode ser colocado par os tipos “text” ou “password”. O comando <select>...</select> mostra uma lista de opções, para cada item tem que ser colocado o parâmetro <option>. Dentro do <select> coloca-se o name=“textstring”, “textstring” deve-se ser substituído por algum conteúdo;size=“tamanho”, esse campo é opcional, coloca-se a quantidade de itens que será apresentado por vez; MULTIPLE, esse parâmetro indica que pode ser selecionado mais que um item. Para não ficar apenas na teoria, vamos ver um exemplo de formulário, com alguns dos comandos vistos até aqui. <html> ______________________________________________________________________ 16 Prof°. Rafael Guem Murakami <rafaelmurakami.tripod.com> <head> <title> Titulo do HTML </title> </head> <body> <form> Digite seu nome: <input type=“text” name=“texto”> Senha: <input type=“password” name=“senha” size=10 maxlength=5> <p> Estado civil: <input type=“radio” name=“escolha” value=“solteiro”>Solteiro <input type=“radio” name=“escolha” value=“casado” CHECKED>Casado <input type=“radio” name=“escolha” value=“divorciado”>Divorciado <input type=“radio” name=“escolha” value=“viuvo”>Viúvo <b> Documentos apresentados:</b><br> <ul> <li><input type=“checkbox” name=“documento” value=“A”>CNH. <li><input type=“checkbox” name=“documento” value=“B”>CPF. <li><input type=“checkbox” name=“documento” value=“C”>RG. </ul> Cargo Pretendido: <select name=“cargo”> <option> Analista de Sistemas <option SELECTED> Desenvolvedor Web <option> Programador de C++ <option> Gerenciador de Banco de Dados </select> Línguas conhecidas: <select name=“lingua” multiple size=5> <option> Português</option> <option SELECTED>Inglês</option> <option> Alemão</option> <option>Espanhol</option> <option> Francês</option> <option>Japonês</option> <option>Outros</option> </select> </body> </html> ______________________________________________________________________ 17 Prof°. Rafael Guem Murakami <rafaelmurakami.tripod.com> Figura 01 9: Formulário-1 O comando <textarea>...</textarea>, faz com que tenho uma área maior para o usuário escrever um texto. Dentro do <textarea>, temos as propriedades name=“nome”, o “nome” será a variável trabalhada pelo formulárionão será mostrado ao usuário; rows=“num_linha”, coloca-se no lugar do “num_linha” a quantidade de linhas desejada na caixa de texto e cols=“num_cols”, coloca-se no lugar do “num_cols” a quantidade de colunas desejada na caixa de texto. O exemplo a seguir terá os comandos até aqui apresentado, com o comando de envio de dados também: <html> <head> <title> Titulo do HTML </title> </head> <body> <form action=“http://www....” method=“post”> Digite seu nome: <input type=“text” name=“texto”> Senha: <input type=”password” name=“senha” size=10 maxlength=5> <p> Estado civil: <input type=“radio” name=“escolha” value=“solteiro”>Solteiro ______________________________________________________________________ 18 Prof°. Rafael Guem Murakami <rafaelmurakami.tripod.com> <input type=“radio” name=“escolha” value=“casado” CHECKED>Casado <input type=“radio” name=“escolha” value=“divorciado”>Divorciado <input type=“radio” name=“escolha” value=“viuvo”>Viúvo <b> Documentos apresentados:</b><br> <ul> <li><input type=“checkbox” name=“documento” value=“A”>CNH. <li><input type=“checkbox” name=“documento” value=“B”>CPF. <li><input type=“checkbox” name=“documento” value=“C”>RG. </ul> Cargo Pretendido: <select name=“cargo”> <option> Analista de Sistemas <option SELECTED> Desenvolvedor Web <option> Programador de C++ <option> Gerenciador de Banco de Dados </select> Línguas conhecidas: <select name=“lingua” multiple size=5> <option> Português</option> <option SELECTED>Inglês</option> <option> Alemão</option> <option>Espanhol</option> <option> Francês</option> <option>Japonês</option> <option>Outros</option> </select> <br><hr> Pressione o botão para enviar: <input type=“submit” value=“Enviar”> ou <input type=“reset” value=“Apagar”> </body> </html> ______________________________________________________________________ 19 Prof°. Rafael Guem Murakami <rafaelmurakami.tripod.com> Figura 01 10: Formulário-2, com envio Percebam que ao apertar o botão “Enviar, começa a pesquisar a “URL” descrita na “Action”. Para alinhar os campos dos formulário basta utilizar o comando <PRE>...</PRE>, apenas descrever o <PRE> antes do primeiro campo e depois do último, antes de fechar o </form>. 16. Frame O comando frame é utilizado para deixar várias janelas/páginas em uma única janela/página. O frame assumi uma função parecida ao do body, onde colocamos o frame, não colocamos o body. Para iniciar o frame colocamos as seguintes tags <frameset><frame>...</frame>...</frameset>. Dentro do <frameset> utilizamos os seguintes atributos: cols=“tamanho”, no “tamanho” colocamos o valor do tamanho que queremos para o frame, será dividido em colunas; rows=“tamanho”, no “tamanho” colocamos o valor do tamanho que queremos para o frame, será dividido em linhas; a quantidade de números que vai ser colocado no “tamanho”, vai depender de quantas janelas vão ser colocadas nessa página, pode ser colocada em pixels, porcentagem ou tamanho relativo. Dentro do <frame> colocamos o endereço da página <frame ______________________________________________________________________ 20 Prof°. Rafael Guem Murakami <rafaelmurakami.tripod.com> src=“página”>, no lugar da “página”, coloca-se o endereço da página. Pode-se tirar também a borda de cada frame utilizando o atributo <frameborder=0> dentro do <frameset>, por padrão o <frameset> deixa com borda o <frame>, então se não colocar o <frameborder=0>, aparecerá a borda. Podemos também retirar a barra de rolagem, colocando o atributo<scrolling=no> no <frame>. Para colocar frame na página, as páginas que serão os frames terão que estar no mesmo lugar que está a sua página com os comandos do frame, a não ser que faça ligação com páginas de terceiros já disponíveis na Internet. O exemplo a seguir fará ligação com as páginas do Google, UOL e Terra. <html> <head> <title> Exemplo de Frame </title> </head> <frameset rows=33%,33% frameborder=0> <frameset cols=33%,33% frameborder=0> <frame scrolling=no src=“http://www.google.com”> <frame src="http://www.uol.com.br"> </frameset> <frame scrolling=no src=“http://www.terra.com.br”> </frameset> </html> ______________________________________________________________________ 21 Prof°. Rafael Guem Murakami <rafaelmurakami.tripod.com> Figura 01 11: Página com frame 17. Áudio Para inserir áudio em uma página Web, utilizamos a seguinte tag <embed src=“audio.extensão”>, ela insere o áudio como objeto, para esse podemos dimensionar o objeto na página com os comandos <width=“num_largura”> e <height=“num_altura”>, podemos também fazer com que o áudio comece automaticamente ou quando o usuário quiser com o <autostart=“true”>, para começar automaticamente ou <autostart=“false”>, para o usuário dar início do áudio quando quiser. Para o controle podemos ocultar, como também deixar que o usuário mexa no controle com o seguinte atributo <controller=“true”>, para aparecer ou <controller=“false”>, para não aparecer. Agora se quisermos que toque um áudio de fundo temos a seguinte tag <bgsound src=“audio.som”>, para esse podemos controlar a quantidade de vezes para tocar, com o atributo <loop= “1” ou “-1” ou “infinite”>, o “infinite” e o “-1”. Fazem com que o áudio não pare de tocar, em quanto o “1”, ele apenas toca uma vez. ______________________________________________________________________ 22 Prof°. Rafael Guem Murakami <rafaelmurakami.tripod.com> 18. Vídeo Para inserir vídeo utiliza-se o mesmo comando o <embed>, do áudio, apenas vai muda a extensão e o nome do arquivo <embed src=“video.mov”>, para esse também podemos controlar a quantidade de vezes, se aparece ou não o controle, se começa automaticamente, o exemplo a seguir aparece o controle, não começa automaticamente e não fica em loop. <embed src=“arquivo.mov” loop=“false” controller=“true” autoplay=“false”> 19. Meta <meta> Define valores especiais. Ela pode melhorar o nível da página HTML. Localiza-se no <head> do cógido fonte, sempre acompanha com os seguintes atributos “name/value”(nome/valor). name->nome da propriedade. content->valor da propriedade. http-equiv->usado para carregar páginas ou define atributos Exemplos: <meta name=“Keywords” lang=“pt-br” content=“Informática, treinamento, consultoria”> A propriedade keyword, mostra palavras chaves para páginas de busca, como o Google e a lang define qual língua será utilizada, no exemplo será o português-brasileiro, para o inglês britânico-“en” e inglês americano-“en-us” <meta name=“Author” content=“Rafael Guem Murakami”> A propriedae author, define quem é o autor da página. <meta name=“Description” content=“O HTML é a raiz da web”> A propriedade description, mostra qual frase ou palavas que devemse ser descrita nas páginas de busca. <meta name=“Copyright” content=“2005-2006 xxx Ltda.”> A propriedade copyright, define informações de direitos autorais. <meta name=“Generator” content=“Microsoft FrontPage”> A propriedade generator, define qual ferramenta foi utilizada para o desenvolvimento. <meta name= “Reply-To” content=“[email protected]”> A propriedade reply-to, define qual e-mail é de contato. ______________________________________________________________________ 23 Prof°. Rafael Guem Murakami <rafaelmurakami.tripod.com> <meta http-equiv=“Refresh” content=“3”> A propriedade refresh, irá recarregar automaticamente a página atual depois de 3 segundos. <meta http-equiv=“Refresh” content=“3;URL=http://www.aulas.com”> A propriedade refresh, irá carregaar automaticamente a página www.aulas.com depois de 3 segundos. <meta http-equiv=“Content-Language” content=“pt-br”> A propriedade content-language, define a linguagem da página. <meta http-equiv=”Content-Type” content=“text/html; charset=iso88591”> A propriedade content-type, define o tipo do conteúdo padrão. ______________________________________________________________________ 24 Prof°. Rafael Guem Murakami <rafaelmurakami.tripod.com> 20. Bibliografia LOUREIRO, Gustavo. CURSO SUPERIOR DE FORMAÇÃO ESPECÍFICA EM GESTÃO DE AMBIENTES INTERNET WEBMASTER / WEBDESIGNER. Apostila RAMALHO, José Antonio(2005). CURSO COMPLETO PARA DESENVOLVEDORES WEB. Editora Campus. SILVEIRA, Marcelo e PRATES, Rubens(2001). HTML 4 – GUIA DE CONSULTA RÁPIDA. Novatec ______________________________________________________________________ 25 Prof°. Rafael Guem Murakami <rafaelmurakami.tripod.com>
Download
