Post on 17-Apr-2015
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>