A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Programas Utilitários Básicos Profa. Leila Andrade Escola de Informática Aplicada UNIRIO.

Apresentações semelhantes


Apresentação em tema: "Programas Utilitários Básicos Profa. Leila Andrade Escola de Informática Aplicada UNIRIO."— Transcrição da apresentação:

1 Programas Utilitários Básicos Profa. Leila Andrade Escola de Informática Aplicada UNIRIO

2 Criação de Web Sites I 4 Introdução à plataforma Web 4 HTML - Hypertext Markup Language 4 CSS - Folhas de Estilo

3 Introdução à plataforma Web - Princípios de Internet/Intranet - Arquitetura da Web - Browsers e servidores Web

4 Serviços na Web 4 http É um servidor da World Wide Web que contém documentos no formato HTTP e significa HyperText Transfer Protocol. 4 Gopher É um servidor cujo conteúdo é composto por menus e diretórios com informações sobre arquivos e dados. 4 Ftp É uma abreviação de File Transfer Protocol. 4 Telnet Este protocolo inicia uma sessão para se conectar remotamente a outro computador. 4 Wais Wide Area Indexed Server é um local onde documentos estão disponíveis em um formato especial de busca. 4 Serviço de mensagens assíncronas.

5 O que é uma Web Page? 4 Documento composto de textos, sons, imagens, animações, vídeos e códigos especiais chamados tagsque possibilitam a exibição do documento na WWW. Como se acessa uma página Web? 4 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.

6 Os principais Elementos de uma Página HTML

7 Como se cria uma Página Web ? 4 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. 4 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. 4 O código fonte pode ser escrito usando um editor de texto simples, como o Bloco de Notas do Windows ou editores HTML.

8 O Código Fonte da Página

9 HTML - Hypertext Markup Language Fundamentos HTML 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 : texto Ex1 : Este texto está em negrito enquanto esta palavra está em itálico. Ex2 : Este comando gera um Título de tamanho 3

10 A estrutura de um documento HTML Título da Página

11 Acrescentando recursos de formatação 4 Papel de parede e cores : 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 4 Fontes : texto em azul

12 Comandos HTML 4 O Comando para criar Títulos Formato : texto do cabeçalho 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 : Cabeçalho de nível 1 Cabeçalho de nível 6 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 traça uma linha horizontal.

13 Comandos HTML 4 O Comando para criar Parágrafo Formato : texto do parágrafo Exemplo : Exemplo de parágrafo 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 <>. Quando o comando de parágrafo é utilizado, uma linha em branco é inserida logo após sua utilização. Obs : O Browser ajusta o texto de acordo com a largura da janela.

14 Comandos HTML 4 O Comando para quebrar linha e continuar na linha seguinte Formato : texto Exemplo : Exemplo de quebra de linha Quando se deseja que o texto continue na próxima linha deve-se utilizar o para obter esse efeito. Obs : Se colocarmos o sem o texto será inserida uma linha em branco.

15 Comandos HTML 4 O Comando e para criar uma lista não ordenada Formato : texto do item texto do item 4 O Comando e para criar uma lista ordenada Formato : texto do item

16 Comandos HTML 4 Exemplo de listas Exemplo de lista não ordenada Primeiro item da lista Segundo item da lista Terceiro item da lista Quarto item da lista Exemplo de lista ordenada Primeiro item da lista Segundo item da lista Terceiro item da lista Quarto item da lista

17 Comandos HTML 4 Exemplo de listas não ordenadas aninhadas Listas não ordenadas aninhadas Este é o primeiro item da lista principal Este é o segundo item da lista principal Este é o primeiro sub item do segundo item da lista principal Este é o segundo sub item do segundo item da lista principal E este é o terceiro nível, ou seja um sub item de um subitem Continuamos no terceiro nível. Notou como os marcadores mudam de formato para cada nível Não se perca este é o terceiro sub item do segundo item da lista principal Não se perca este é o quarto sub item do segundo item da lista principal Este é o terceiro item da lista principal e vamos parar por aqui.

18 Exercício: Criar uma página pessoal com o seguinte layout

19 Links dentro de um mesmo documento 4 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 : Texto usado como hipertexto Ex : Introdução 4 Â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 : Texto para linkar Ex : Introdução Obs : o símbolo # é usado para indicar que o link está no documento atual.

20 Exemplo de links dentro de um mesmo documento Exemplo de links dentro do mesmo documento Introdução Conceitos Básicos Prática 1.Introdução O uso de hipertexto é um dos melhores recursos da WEB para tornar qualquer informação disponível para o leitor. 2. Conceitos básicos Este é o segundo link da página. 3. Prática Esta é a última seção do documento.

21 Ex. de links para retornar ao início da página Exemplo de links dentro do mesmo documento c/ links p/ início da pg. Introdução Conceitos Básicos Prática 1.Introdução O uso de hipertexto é um dos melhores recursos da WEB para tornar qualquer informação disponível para o leitor. Volta ao início da página 2. Conceitos básicos Este é o segundo link da página. Volta ao início da página 3.Prática Esta é a última seção do documento. Volta ao início da página

22 Linkando Arquivos Locais 4 Para linkar arquivos locais (num mesmo diretório) basta especificar o nome completo do arquivo (com a extensão). Ex1 : Introdução ao hipertexto Ex2 : Vários links locais Exemplos de links externos locais arquivo EXEMP06D.HTM Introdução ao hipertexto Conceitos Básicos de HTML Prática

23 4 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: Página de outro diretório 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

24 Linkando Arquivos de Outros Servidores 4 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. 4 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 : 4 Coca-Cola


Carregar ppt "Programas Utilitários Básicos Profa. Leila Andrade Escola de Informática Aplicada UNIRIO."

Apresentações semelhantes


Anúncios Google