Programas Utilitários Básicos UNIRIO Escola de Informática Aplicada Programas Utilitários Básicos Profa. Leila Andrade
Criação de Web Sites I Introdução à plataforma Web HTML - Hypertext Markup Language CSS - Folhas de Estilo
Introdução à plataforma Web - Princípios de Internet/Intranet - Arquitetura da Web - Browsers e servidores Web
Serviços na Web http É um servidor da World Wide Web que contém documentos no formato “HTTP” e significa HyperText Transfer Protocol. Gopher É um servidor cujo conteúdo é composto por menus e diretórios com informações sobre arquivos e dados. Ftp É uma abreviação de File Transfer Protocol. Telnet Este protocolo inicia uma sessão para se conectar remotamente a outro computador. Wais Wide Area Indexed Server é um local onde documentos estão disponíveis em um formato especial de busca . Email Serviço de mensagens assíncronas.
Como se acessa uma página Web? O que é uma Web Page? Documento composto de textos, sons, imagens, animações, vídeos e códigos especiais chamados “tags”que possibilitam a exibição do documento na WWW. Como se acessa uma página Web? Através de um tipo especial de programa chamado Browser. O Navigator da Netscape e o Internet Explorer da Microsoft são exemplos de Browser.
Os principais Elementos de uma Página HTML
Como se cria uma Página Web ? Uma página pode ser criada usando uma linguagem de apresentação chamada HTML (Hypertext Markup Language) . HTML é uma linguagem simples que tem por finalidade básica formatar o texto exibido e criar ligações entre páginas Web, criando documentos com o conceito de hipertexto. O código fonte gerado será interpretado pelo browser que se encarregará de executar os comandos ou “tags” do código para formatar e acessar recursos da Web. O código fonte pode ser escrito usando um editor de texto simples, como o Bloco de Notas do Windows ou editores HTML.
O Código Fonte da Página
HTML - Hypertext Markup Language Fundamentos HTML 4.0 - Tags : São símbolos especiais que dizem ao Browser como o texto ou informação deve ser exibido. Em geral, são especificados em pares, delimitando um texto. Formato : <nome da tag> texto </nome da tag> Ex1 : <b> Este texto está em negrito </b> enquanto esta <i> palavra </i> está em itálico. Ex2 : <h3> Este comando gera um Título de tamanho 3 </h3>
A estrutura de um documento HTML <head> <title> Título da Página </title> </head> <body> </body> </html>
Acrescentando recursos de formatação Papel de parede e cores : <body bgcolor=“yellow” text=“#004040” link=“#808080” vlink=“#8000ff” background=“unilog.gif”> bgcolor define a cor de fundo text define a cor do texto link define a cor do link vlink define a cor do link após ser acionado background define a URL da figura que será colocada no fundo Fontes : <font size=“7” color=“blue” face=“Arial”> texto em azul</font>
Comandos HTML O Comando <h> para criar Títulos Formato : <hn> texto do cabeçalho </hn> onde “n” deve ser substituído por um número de 1 a 6. O Maior cabeçalho é especificado com o comando h1, e o menor, com h6. Exemplo : <h1> Cabeçalho de nível 1</h1> <h6> Cabeçalho de nível 6</h6> <hr> Obs 1: Os comandos de cabeçalhos inserem, além do texto, uma linha em branco antes e depois do texto. Obs 2: O comando <hr> traça uma linha horizontal.
Comandos HTML O Comando <p> para criar Parágrafo Formato : texto do parágrafo <p> Exemplo : <h1> Exemplo de parágrafo</h1> <hr> A linguagem HTML ignora a tecla enter no final da linha. Para finalizar um parágrafo deve-se inserir o comando “p” envolvido pelo sinal de <>. <p> Quando o comando de parágrafo é utilizado, uma linha em branco é inserida logo após sua utilização. <p> Obs : O Browser ajusta o texto de acordo com a largura da janela.
Comandos HTML O Comando <br> para quebrar linha e continuar na linha seguinte Formato : texto <br> Exemplo : <h1> Exemplo de quebra de linha</h1> <hr> Quando se deseja que o texto continue<br> na próxima linha deve-se utilizar o <br> para obter esse efeito.<br> Obs : Se colocarmos o <br> sem o texto será inserida uma linha em branco.
Comandos HTML O Comando <ul> e <li> para criar uma lista não ordenada Formato : <ul> <li> texto do item </ul> O Comando <ol> e <li> para criar uma lista ordenada Formato :<ol> </ol>
Comandos HTML Exemplo de listas <h2><b>Exemplo de lista não ordenada</b></h2> <ul> <li> Primeiro item da lista <li> Segundo item da lista <li> Terceiro item da lista <li> Quarto item da lista </ul> <hr> <h2><b>Exemplo de lista ordenada</b></h2> <ol> </ol>
Comandos HTML Exemplo de listas não ordenadas aninhadas <b>Listas não ordenadas aninhadas</b> <ul> <li>Este é o primeiro item da lista principal <li>Este é o segundo item da lista principal <li>Este é o primeiro sub item do segundo item da lista principal <li>Este é o segundo sub item do segundo item da lista principal <li>E este é o terceiro nível, ou seja um sub item de um subitem <li>Continuamos no terceiro nível. Notou como os marcadores mudam de formato para cada nível </ul> <li>Não se perca este é o terceiro sub item do segundo item da lista principal <li>Não se perca este é o quarto sub item do segundo item da lista principal <li>Este é o terceiro item da lista principal e vamos parar por aqui.
Exercício: Criar uma página pessoal com o seguinte layout
Links dentro de um mesmo documento Hiperlinks ou links São ligações especiais para vincular diferentes partes de um mesmo documento ou um documento a outros documentos criando uma navegação hipertextual. O comando para criar um link é o “a href”. Formato : <a href = “# nome” >Texto usado como hipertexto </a> Ex : <a href= “#parte1”> Introdução</a> Âncora É um ponto de referência ou endereço que será acessado por um link. Uma âncora é usada dentro de um mesmo documento para marcar o início de uma seção. O comando usado para criar uma âncora é o “a name”. <a name = “#nome da âncora” >Texto para linkar </a> Ex : <a name= “#parte1”> Introdução</a> Obs : o símbolo # é usado para indicar que o link está no documento atual.
Exemplo de links dentro de um mesmo documento <h2>Exemplo de links dentro do mesmo documento</h2> <ol> <li><a href="#parte1"> Introdução </a> <li>< a href ="#parte2"> Conceitos Básicos </a> <li>< a href ="#parte3"> Prática </a> </ol> <a name=”parte1"><h3>1.Introdução</h3></a> O uso de hipertexto é um dos melhores recursos da WEB para<br> tornar qualquer informação disponível para o leitor. <a name=”parte2"><h3>2. Conceitos básicos</h3></a> Este é o segundo link da página.<p> <a name=”parte3"><h3>3. Prática</h3></a> Esta é a última seção do documento.<p>
Ex. de links para retornar ao início da página <a name=“home”> </a> <h2>Exemplo de links dentro do mesmo documento c/ links p/ início da pg.</h2> <ol> <li><a href="#parte1"> Introdução </a> <li>< a href ="#parte2"> Conceitos Básicos </a> <li>< a href ="#parte3"> Prática </a> </ol> <a name=”parte1"><h3>1.Introdução</h3></a> O uso de hipertexto é um dos melhores recursos da WEB para<br> tornar qualquer informação disponível para o leitor. <a href=“#home”> Volta ao início da página </a> <a name=”parte2"><h3>2. Conceitos básicos</h3></a> Este é o segundo link da página.<p> <a name=”parte3"><h3>3.Prática</h3></a> Esta é a última seção do documento.<p>
Linkando Arquivos Locais Para linkar arquivos locais (num mesmo diretório) basta especificar o nome completo do arquivo (com a extensão). Ex1 : <a href= “exemplo.htm”> Introdução ao hipertexto </a> Ex2 : Vários links locais <h2>Exemplos de links externos locais</h2> <h5> arquivo EXEMP06D.HTM</h5> <ol> <li><A HREF="exemp06g.htm"> Introdução ao hipertexto </A> <li><A HREF="exemp06b.htm#parte2"> Conceitos Básicos de HTML</A> <li><A HREF="#parte3"> Prática </A> </ol>
Linkando Arquivos de outros diretórios O browser usa como referencial o diretório atual para iniciar a busca de páginas. Na Web, usa-se um esquema de path com a “/” para separar diretórios. Caso seja necessário subir um nível usa-se o símbolo “../”. Ex: <A HREF="../teste/pagina/teste.htm"> Página de outro diretório</A> Neste exemplo especifica-se o diretório que contém a página chamada. Este caminho NÃO É IGUAL ao do DOS. Aqui as barras de diretório são colocadas ao contrário.Você deve usar os caracteres "../" para subir um diretório. No exemplo acima o arquivo se encontra no diretório do DOS "c:\teste\página\teste.htm". Portanto, como estamos em um diretório abaixo do diretório raiz, temos que subir um nível e especificar o caminho com a nova notação "../teste/pagina/teste.htm"
Linkando Arquivos de Outros Servidores URL É uma abreviação de Uniform Resource Locator e serve para especificar a localização das páginas e arquivos em diretórios de servidores da Web. Um URL é composto de 2 partes : o primeiro é o protocolo Internet do documento; a segunda é o endereço do servidor da página. Sintaxe : protocolo://servidor/caminho/arquivo Ex : http://www.ibpinet.com.br/index.htm <a href=“http://www.coke.com”>Coca-Cola</a>