HIPERTEXT MARKUP LANGUAGE LINGUAGEM DE MARCAÇÃO DE HIPERTEXTOWorld - mundo Wide - amplo, largo - Worldwide - mundial, universal Web - teia (de aranha) ou rede (de computadores) ... sons. corporativo ou pessoal. Imagem Desenhos. efeitos visuais. animações.. formato. eventos. tamanho. estilos... símbolos.. formato. . material didático..Texto Mensagens. fundo. voz. trabalhos. . Áudio Músicas.. Características: tamanho. fotos. efeitos. cor. Características: loop. Características: tamanho. eventos. .. . fonte. qualidade.. filmes. . Página principal Página inicial Home . HP Ir para lá Página X Agora ir para lá Página Y Agora ir o final Final Ir para HP . O Browser é um interpretador. é um programa de computador que consegue ler a página HTML. . ou o Browser. ele ³decifra´ os interpretador comandos escritos em HTML. interpretar seus comandos e apresentar na tela em uma forma compreensível para o usuário. verifica sua sintaxe e então executa-os. Se houver qualquer alteração na página.O navegador WEB. Portanto. a linguagem HTML ³acontece´ no computador do usuário. ou seja. após ler. é necessário carregar novamente para mostrar as atualizações. é apresentada na tela a página inicial (HP que está armazenada em um HP) computador (servidor na WEB (internet A partir da HP servidor) internet). IIS.br. por exemplo.Servidor é todo computador que possui uma função específica em uma rede...feevale. .) Quando digitamos www. ³navegamos´ pelas outras telas por meio de seus links. Geralmente são máquinas mais potentes tanto em processamento (velocidade) como em armazenamento (capacidade). . O programa que é executado no servidor para disponibilizar as páginas é chamado de servidor WEB (Apache. feevale. interpreta e mostra página <html> HTML <head> <title>HP</title> </head> <body> <p>Página Inicial</p> </body> </html> Servidor WEB envia código HTML da página inicial (HP) .br Computador do usuário recebe.Usuário digita um endereço WEB no Browser www. sem formatação. Também pode ser utilizado programas específicos para isso: Dreamweaver da Macromedia. .Uma página HTML pode ser criada/editada em um editor de texto comum... sem necessariamente ter um conhecimento maior de programação e de HTML. pois seu conteúdo é texto. Programas freeware também podem ser encontrados na WEB. A vantagem dos programas editores de página HTML é que eles adotam as facilidades e recursos do Windows para criar páginas. . Front Page da Microsoft. por exemplo. Bloco de Notas. Geralmente são utilizadas em pares ³< >´ e < / >´. que são marcas padrão usadas para indicar ao Browser os comandos a serem executados. <html> <head> <title>New Page 1</title> </head> <body> <p>Curso de HTML. As tags são digitadas entre ³<³ e ³>´.As páginas html possuem extensão htm ou html html.</p> </body> </html> . Os comandos são chamados de TAGS. <html> e </html> representam o início e o final da página e englobam todos os comandos (head e body).. o título. .<head> e </head> contém os parâmetros de configuração da página. . . identificação..<body> e </body> é o próprio conteúdo da página. <html> <head> <title>New Page 1</title> </head> <body> <p>Curso de HTML. keywords..</p> </body> </html> . e. .) color = "#000080´ (hexa) <html> <head> <title>New Page 1</title> </head> <body> <p align="center"><b><i><u><font face="Verdana" size="2" color="#000080">Curso de HTML. 3. arial.) size = tamanho (1. ...</font></b></i></u></p> </body> </html> Observar as tags </> fechando cada formato..<b> </b>: negrito <i> </i>: itálico <u> </u>: sublinhado <font> </font>: formatação da fonte face = ³nome da fonte´ (p. 2.. . left ou right) <html> <head> <title>New Page 1</title> </head> <body> <p align="center"><font face="Verdana" size="2" color="#000080">Curso de HTML.</font></p> <p align="left"><font face="Verdana" size="2" color="#000080">Turma 2004/2</font></p> <p align="right"><font face="Verdana" size="2" color="#000080">Disciplina: Didática<br> Professor Paulo</font></p> </body> </html> .<p> e </p>: quebra de página align = alinhamento (center. <ul> </ul>: listas não numeradas <li> </li>: tópicos da lista Tópicos Tópico 1 Tópico 2 <html> <head> <title>Listas</title> </head> <body> <p><b><font face="Verdana" size="2" color="#000080">Tópicos</font></b></p> <ul> <li> <p align="left"><font face="Verdana" size="2" color="#000080">Tópico 1</font></li> <li> <p align="left"><font face="Verdana" size="2" color="#000080">Tópico 2</font></li> </ul> </body> </html> . Tópico 1 2.<ol> </ol>: listas numeradas <li> </li>: tópicos da lista Tópicos 1. Tópico 2 <html> <head> <title>Listas</title> </head> <body> <p><b><font face="Verdana" size="2" color="#000080">Tópicos</font></b></p> <ol> <li> <p align="left"><font face="Verdana" size="2" color="#000080">Tópico 1</font></li> <li> <p align="left"><font face="Verdana" size="2" color="#000080">Tópico 2</font></li> </ol> </body> </html> . <hr>: insere uma barra horizontal na página <html> <head> <title>Barras Horizontais</title> </head> <body> <p><font face="Verdana" size="2" color="#000080">Barras</font></p> <hr size="4"> <p><font face="Verdana" size="2" color="#000080">Texto da página</font></p> </body> </html> . jpg´ align = ³left´ width = ³109´ height = ³122´> </body> </html> .<img src = ³imagem. <html> <head> <title>Imagens</title> </head> <body> <img src = ³rv001.jpg´: insere uma imagem com largura e altura definido. br´>Página da Feevale</a> </body> Email <html> </html> <head> <title>Links</title> </head> <body> <a href = ³mailto:[email protected]. mesma pasta <html> <head> <title>Links</title> </head> <body> <a href = ³pagina2.html´>Ir para página 2</a> </body> Outros servidores </html> <html> <head> <title>Links</title> </head> <body> <a href = ³http://www.br´>Enviar um mail</a> </body> </html> .Páginas do mesmo servidor. Background Arquivo de som da página (c/s loop) Imagem de fundo Cor do fundo Cor do texto Cores dos links <html> <head> <title>Formato da Página</title> <bgsound src=³musica.mid" loop="1"> </head> <body background="snoopy.jpg" bgcolor="#FFFFFF" text="#00FF00³ link="#333333" vlink="#000000" alink="#000000"> <p>Esta página contém uma figura de fundo</p> </body> </html> . com. left ou right) Valign = alinhamento vertical na célula (top.Tabela Linhas Colunas <html> <head> <title>Tabelas</title> </head> <body > <p>Esta página contém uma tabela</p> <table border = ³2´ cellspacing = ³1´ cellpading = ³2´> <tr> <td align = center valign = top>Nome</td> <td align = left>Endereço</td> </tr> <tr> <td>Paulo</td> <td>ppasqua@terra. middle ou botton) .br</td> </tr> </table> </body> </html> Border: espessura da borda Cellspacing = espaço entre as células Cellpading = distância do texto até a borda da célula Align = alinhamento horizontal do texto na célula (center. *Nowrap: evita quebra de linha COLSPAN: Mesclar colunas em uma única célula <html> <head> <title>Tabelas</title> </head> <body > <p>Esta página contém uma tabela</p> <table> <tr> <td colspan = 2>Nome e e-mail</td> </tr> <tr> <td>Paulo</td> <td>[email protected]</td> </tr> </table> </body> </html> <html> <head> <title>Tabelas</title> </head> <body > <p>Esta página contém uma tabela</p> <table border = ³2´> <tr> <td>Nome</td> <td>Cidade</td> </tr> <tr> <td>Paulo</td> <td rowspan = 3>Porto Alegre</td> </tr> <tr> <td>Mario Quintana</td> </tr> <tr> <td>Elis Regina</td> </tr> </table> </body> </html> ROWSPAN: Mesclar linhas em uma única célula . Bordas Alinhamento Cores Identificação Espaçamento Tamanho Rowspan Colspan Interatividade . Observar tamanho das figuras. Enquanto educadores. textos e figuras devem considerar facilidades/dificuldades do usuário para acessar a internet. banners. cores de fundo e do texto.Ao publicar uma página você passa a ser autor e seu trabalho fica disponível para quem navegar pela WEB. A qualidade está no conteúdo do nosso trabalho e também no seu formato. somos responsáveis pela qualidade e exatidão dos nossos trabalhos. . disposição e quantidade de material na página. Cores.