HTML
Propaganda
Criação de Páginas Web Apresentação n.º1 • A Internet • HTML Básico TIC 9º Ano Internet Como funciona a Internet? Os intervenientes Cliente & Servidor Como funciona a Internet? Client & Server Servidor do Google INTERNET Pedido da página http://www.google.pt O Browser faz Cliente o pedido. O servidor envia a página solicitada. Client - Browser CÓDIGO HTML Browser Página Web Internet Explorer Netscape Mozilla Firefox Opera INTERNET SERVER Etc... Recebe código HTML. Cria a página web. Server - Servidor Executa permanentemente um programa especial Web server • Sempre ligado. • Contém o site. Aguarda um pedido de acesso a uma página efectuado por um Web browser Modelo Cliente-Servidor da WWW Cliente Web Solicita página Utilizador Página solicitada ou Erro Protocolo HTTP Servidor Web Documentos Imagens Vídeos Sons,... URL - Universal Resource Locator URL Documento HTML Web browser Web server HTTP Hipertext Transfer Protocol HiperText Transfer Protocol (Protocolo de transferência de hipertexto) O protocolo HTTP define o modo como são solicitadas e enviadas páginas web na Internet. URL Universal Resource Locator http://www.empresa.com/index.html Domínios com edu gov mil net org … Organização comercial Instituição de ensino Entidade governamental Instituição militar Hosts não administrativos organização não lucrativa … pt br de ... Portugal Brasil Alemanha ... gerais Indicadores geográficos HTML Linguagem HTML HyperText Markup Language Linguagem HTML Um programa HTML reside num ficheiro de texto simples (extensão: html ou htm) HTML Linguagem HTML Um programa HTML inclui uma série de TAGS (marcas) colocadas no texto que se reflectem na página Web. <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> <P> </P> Exemplo de código HTML <HTML> <HEAD> <TITLE> A minha primeira página na internet </TITLE> </HEAD> <BODY> <P> Olá, o meu nome é Gollum </P> <HR> <P> <BR> </P> <HR> </BODY> </HTML> TAGS <HTML> Declara que o texto seguinte define uma página HTML. A tag </HTML> termina a página. TAGS <HEAD> Define a área de cabeçalho (header) da página. A tag </HEAD> termina a zona de cabeçalho. <BODY> Delimita o conteúdo que será visualizado na página. A tag </BODY> termina a zona de conteúdo. TAGS <TITLE> Define o título da página que é visualizado na barra de título do browser. A tag </TITLE> termina o título. TAGS <P> Início de um parágrafo. </P> termina o parágrafo. <BR> Mudança de linha <HR> Horizontal line/horizontal rule. <COMMENT> Utilizado para comentar o código. TAGS Formatação de Caracteres <B> </B> Bold <I> </I> Itálico <U> </U> Sublinhado Hiperligações: <A HREF = “http://www.google.pt”> GOOGLE </A> TAGS Imagens em documentos HTML <IMG SRC=“http://www.empresa.com/directório/elefantes.gif”> HTML Imagem com origem noutro site TAGS <IMG SRC=“gollum.gif"> <IMG SRC=“gollum.gif" BORDER=4> <IMG SRC=“gollum.gif" BORDER=8> <IMG SRC=“gollum.gif" BORDER=16> O qualificador BORDER coloca uma linha Delimitadora à volta da figura, com uma espessura controlada em pixels. TAGS BORDER=4 BORDER=40 TAGS Headings (cabeçalhos) Uma página Web pode ter no máximo 6 níveis de headings <H1> </H1> <H2> </H2> <H3> </H3> <H4> </H4> <H5> </H5> <H6> </H6> Nível alto Nível baixo HTML TAGS Imagem de fundo <BODY BACKGROUND = “gollum.jpg”> TAGS Tabelas <table border cellspacing=0 cellpadding=5> <tr> <td colspan=2 align=center>Filmes</td> </tr> <tr> <td> Irmandade do anel</td> <td> Duas Torres</td> </tr> <table> … </table> <tr> <td> Olá</td> <td> O meu nome é Gollum</td> </tr> </table> TAGS <table border cellspacing=0 cellpadding=5> cellspacing – espaço ente células. <tr> <td colspan=2 align=center>Filmes</td> </tr> cellpadding – espaço entre o texto e a linha. <tr> <td> Irmandade do anel</td> <td> Duas Torres</td> </tr> <tr> <td> Olá</td> <td> O meu nome é Gollum</td> </tr> </table> TAGS - TABELAS <table border cellspacing=0 cellpadding=5> cellspacing – espaço ente células. <tr> <td colspan=2 align=center>Filmes</td> </tr> cellpadding – espaço entre o texto e a linha. <tr> <td> Irmandade do anel</td> <td> Duas Torres</td> </tr> <tr> <td> Olá</td> <td> O meu nome é Gollum</td> </tr> </table> 1 linha 3 colunas 2 linhas 3 colunas 3 linhas e 3 colunas 3 linhas e 1 coluna 5 linhas e 1 coluna 5 linhas e 2 colunas União entre células • Rowspan • Colspan Exemplo 1 rowspan Esta TAG indica que esta célula irão ser unidas duas células ao longo da coluna. Exemplo 2 Situação inicial: Pretendemo s unir estas 3 células. 3 linhas e 5 colunas Exemplo 2 (continuação) colspan Esta TAG indica que nesta célula irão ser unidas três células ao longo das colunas. Exemplo 3 Exemplo 4 Standards A visitar… http://www.w3.org World Wide Web Consortium
