Programas Utilitários Básicos Profa. Leila Andrade Escola de Informática Aplicada UNIRIO.
24
Programas Utilitários Básicos Profa. Leila Andrade Escola de Informática Aplicada UNIRIO
Transcript of Programas Utilitários Básicos Profa. Leila Andrade Escola de Informática Aplicada UNIRIO.
Programas Utilitários Básicos
Profa. Leila Andrade
Escola de Informática Aplicada
UNIRIO
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.
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 LanguageFundamentos 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
<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 omenor, 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
seguinteFormato : 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
ordenadaFormato : <ul>
<li> texto do item
<li> texto do item </ul>
O Comando <ol> e <li> para criar uma lista ordenada Formato :<ol>
<li> texto do item
<li> texto do item </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>
<li> Primeiro item da lista
<li> Segundo item da lista
<li> Terceiro item da lista
<li> Quarto item da lista
</ol>
<hr>
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
<ul>
<li>Este é o primeiro sub item do segundo item da lista principal
<li>Este é o segundo sub item do segundo item da lista principal
<ul>
<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
</ul>
<li>Este é o terceiro item da lista principal e vamos parar por aqui.
</ul>
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”.
Formato : <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 href=“#home”> Volta ao início da página </a>
<a name=”parte3"><h3>3.Prática</h3></a>
Esta é a última seção do documento.<p>
<a href=“#home”> Volta ao início da página </a>
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>
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 diretórios
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>
