programação web html css php, Notas de estudo de Introdução à Programação de Computadores

Baixe programação web html css php e outras Notas de estudo em PDF para Introdução à Programação de Computadores, somente na Docsity!

Escola Estadual de

Educação Profissional - EEEP

Ensino Médio Integrado à Educação Profissional

Curso Técnico em Informática

Programação Web

HTML - CSS - PHP

Escola Estadual de Educação Profissional [EEEP] Ensino Médio Integrado à Educação Profissional

• Informática - Programação WEB (HTML-CSS-PHP)
• O que é Internet Índice
• O que é World-Wide Web........................................................................................................... - HTTP - URL - HTML
• Introdução à Linguagem HTML
• Publicação de documentos
• Documento básico e seus componentes - A seção - Atributos de ....................................................................................................................... - Cabeçalhos..................................................................................................................................... - Cabeçalho centralizado.................................................................................................................. - Cabeçalho alinhado à direita - Separadores.................................................................................................................................... - Quebra de linha - Parágrafos - Linha Horizontal - Listas em HTML - Listas de Definição - Listas não-numeradas - Listas e “sub-listas” - Blocos de texto - - - ..................................................................................................................................... - Formatação de frases - Estilos Lógicos................................................................................................................................... - Estilos Físicos - Cores e fontes - Cores - Tamanho............................................................................................................................................. - Fontes - Caminhos (uso de links) - Caminho relativo - Caminho absoluto - Atributos básicos de imagem......................................................................................................... - ALT - WIDTH e HEIGHT - BORDER - ALIGN
• Tabelas......................................................................................................................................
• Elementos básicos de tabelas - Títulos, linhas e elementos - Títulos compreendendo mais de uma coluna ou linha....................................................................... - Tabelas sem borda..............................................................................................................................
• Alinhamentos em tabelas - Alinhamentos simples - Alinhamentos combinados................................................................................................................. - Alinhamentos de linhas......................................................................................................................
• Atributos de largura..................................................................................................................
• Atributos de espaçamento - Extensões de tabelas - Cor de fundo - Cor de borda - Imagem de fundo
• Frames
• Formulários - CGI Scripts - Visão Geral
• Áudio e Vídeo
• Folhas de Estilo - Um título genérico
• Introdução as CSS - O HTML atual - Os problemas criados - A solução proposta - As restrições - O efeito cascata
• A regra CSS - A regra CSS e sua sintaxe.............................................................................................................. - Agrupamento de Seletores - O seletor classe - O seletor ID - Inserindo comentários nas CSS
• Vinculando folhas de estilo a documentos
• A propriedade font - As fontes nos elementos HTML - Valores válidos para as propriedades da fonte............................................................................... - color A cor da fonte - font-family...O tipo de fonte - font-size...O tamanho de fonte - font-style...O estilo de fonte - font-variant...fontes maiúsculas "menores" - font-weight...Peso das fontes - negrito (intensidade da cor) - font...Todas as propriedades das fontes em uma declaração única................................................
• A propriedade text - Os textos nos elementos HTML - Valores válidos para as propriedades do texto............................................................................... - color A cor do texto - letter-spacing...O espaço entre letras - word-spacing...O espaço entre palavras - text-align...Alinhar o texto - text-decoration...Decoração do texto - text-indent...Recuo do texto - text-transform...Forma das letras do texto
  • A propriedade margin
• A propriedade border - As bordas nos elementos HTML - Valores válidos para as propriedades das bordas........................................................................... - border-width, border-style e border-color - border-style - border-width - Definir a espessura das bordas superior, esquerda e direita - border (declaração única) - Propriedades CSS das bordas
  • A propriedade padding
  • A propriedade background
    • O fundo dos elementos HTML
    • Valores válidos para as propriedades do fundo
    • A cor do fundo
    • A imagem de fundo
    • Repetir verticalmente a imagem de fundo
    • Repetir horizontalmente a imagem de fundo
    • Posicionar uma imagem de fundo
    • Ajustar uma imagem de fundo fixa, que não "rola" com a tela.
    • Todas as propriedades do fundo em uma declaração única
  • A propriedade list
    • Mudando o estilo das listas HTML
    • Valores válidos para as propriedades do lista
    • list-style-image...imagem para marcadores de lista.......................................................................
    • list-style-position...posição dos marcadores de lista
    • list-style-type...os tipos de marcadores de lista
    • Definir os marcadores de listas não ordenadas..............................................................................
    • Definir os marcadores de listas ordenadas
    • list-style...duas propriedades das listas em uma declaração única
  • Pseudo-elementos CSS
  • Controlando as entrelinhas e o espaçamento entre elementos HTML
    • As propriedades line-height e margin............................................................................................
    • Alterando o espaçamento entre linhas
    • E o espaçamento (a distância) entre os parágrafos?
    • Dicas adicionais
  • As medidas CSS de comprimento
    • Introdução
    • Unidades de medida de comprimento CSS válidas
    • UNIDADE RELATIVA
    • UNIDADE ABSOLUTA
    • Entendendo as unidades de medida CSS
  • Definindo cores em uma regra CSS
• Introdução ao PHP .................................................................................................................. - O que é PHP? - Como surgiu? - Porque aprender PHP? - Sintaxe básica - Delimitador e separador do código em PHP.................................................................................... - Comentários - Extensão de arquivos - Comandos de saída(output) - Tipo de Dados - Variáveis - Constantes - Operadores................................................................................................................................... - Operadores de atribuição
  • Operadores aritméticos
  • Operadores de comparação
  • Operadores lógicos
  • Operadores de strings
  • Precedência de Operadores
• Expressões
• Trabalhando com Arrays
  • O que é um array?
  • Arrays numericamente indexados....................................................................................................
  • Acessando o conteúdo de array
  • Utilizando loops para acessar o array
  • Arrays Associativos
  • Arrays multidimensionais
• Estruturas de Controle
  • IF
  • ELSE
  • ELSEIF
  • SWITCH
  • BREAK
  • CONTINUE
  • FOR..................................................................................................................................................
  • FOREACH
  • WHILE
  • DO...WHILE
• Funções
  • Criação
  • Retornando Valores de uma Função
• Criando bloco de códigos reutilizáveis
  • require( )
  • include( )
• Funções de Data
  • Date
    • Getdate
  • Time
  • Mktime.............................................................................................................................................
• Formulários..................................................................................................................................
  • Métodos GET e POST
  • Formulários na prática
  • Acessando o MySQL via PHP
• Sessões e Cookies
  • Sessões
  • Cookies

Isso é possível porque cada programa em execução recebe também seu endereço próprio dentro do computador: no caso de programas que se comunicam pela Internet, esse endereço é o número TCP.

Assim, continuando a comparação com endereços físicos, suponhamos que seu computador é um prédio de apartamentos com um dado número IP; seu browser e seu programa de e-mail seriam apartamentos distintos nesse prédio, cada qual com seu número TCP.

Outros protocolos

Veremos que, para cada tipo de recurso disponível pela Internet, também existe um protocolo de comunicação específico, além do TCP/IP.

Recursos da Internet

E-mail

Serviço de intercâmbio assíncrono de mensagens, o "correio eletrônico" utiliza-se dos protocolos POP ou IMAP e SMTP.

FTP

Permite a transferência de arquivos, pelo protocolo FTP - File Transfer Protocol.

Telnet

Permite a conexão e interação com computadores remotos, simulando um terminal, pelo protocolo telnet.

Gopher

Sistema precursor da World-Wide Web, utiliza o protocolo gopher para apresentar menus de navegação, documentos e imagens.

O que é World-Wide Web

A World-Wide Web (também chamada Web ou WWW) é, termos gerais, a interface gráfica da Internet. Ela é um sistema de informações organizado de maneira a englobar todos os outros sistemas de informação disponíveis na Internet.

Sua idéia básica é criar um mundo de informações sem fronteiras , prevendo as seguintes características:

• interface consistente;
• incorporação de um vasto conjunto de tecnologias e tipos de documentos;
• "leitura universal".

Para isso, implementa três ferramentas importantes:

• um protocolo de transmissão de dados - HTTP;
• um sistema de endereçamento próprio - URL;
• uma linguagem de marcação, para transmitir documentos formatados através da rede - HTML.

HTTP

HTTP significa HyperText Transfer Protocol - Protocolo de Transferência de Hipertexto.

O HTTP é o protocolo usado para a transmissão de dados no sistema World-Wide Web. Cada vez que você aciona um link, seu browser realiza uma comunicação com um servidor da Web através deste protocolo.

URL

O sistema de endereçamento da Web é baseado em uma sintaxe chamada URI (Universal Resource Identifier - Identificador Universal de Recursos ). Os endereços que utilizamos atualmente são os URLs, que seguem essa sintaxe.

URL significa Uniform Resource Locator - Localizador Uniforme de Recursos.

Um exemplo de URL é:

http://www.icmc.usp.br/ensino/material/html/url.html

Esse endereço identifica:

• o protocolo de acesso ao recurso desejado (http),
• a máquina a ser contactada (www.icmc.usp.br),
• o caminho de diretórios até o recurso (ensino/material/html/), e
• o recurso (arquivo) a ser obtido (url.html).

Através de URLs também acionamos programas ( scripts ), enviamos parâmetros para esses programas, etc.

HTML

HTML significa HyperText Markup Language - Linguagem de Marcação de Hipertexto.

Não é possível programar em linguagem HTML, pois ela é simplesmente uma linguagem de marcação: ela serve para indicarmos formatações para textos, inserir imagens e ligações de hipertexto.

Os browsers são os responsáveis por identificar as marcações em HTML e apresentar os documentos conforme o que foi especificado por essas marcações.

Introdução à Linguagem HTML

HTML (HyperText Markup Language - Linguagem de Formatação de Hipertexto) é fruto do "casamento" dos padrões HyTime e SGML.

HyTime - Hypermedia/Time-based Document Structuring Language Hy Time (ISO 10744:1992) - padrão para representação estruturada de hipermídia e informação baseada em tempo. Um documento é visto como um conjunto de eventos concorrentes dependentes de tempo (áudio, vídeo, etc.), conectados por webs ou hiperlinks. O padrão HyTime é independente dos padrões de processamento de texto em geral. Ele fornece a base para a construção de sistemas hipertexto padronizados, consistindo de documentos que alicam os padrões de maneira particular SGML - Standard Generalized Markup Language Padrão ISO 8879 de formatação de textos: não foi desenvolvido para hipertexto, mas torna-se conveniente para transformar documentos em hiper-objetos e para descrever as ligações. SGML não é padrão aplicado de maneira padronizada: todos os produtos SGML têm seu próprio sistema para traduzir as etiquetas para um particular formatador de texto.  DTD - Document Type Definition - define as regras de formatação para uma dada classe de documentos. Um DTD ou uma referência para um DTD deve estar contido em qualquer documento conforme o padrão SGML.

Portanto, HTML é definido segundo um DTD de SGML.

Documento básico e seus componentes

A estrutura de um documento HTML apresenta os seguintes componentes:

Titulo do Documento

texto, imagem, links, ...

As etiquetas HTML não são sensíveis à caixa. Traduzindo: tanto faz escrever , , , , ...

Os documentos se dividem em duas seções principais, que veremos a seguir.

**A seção **

**** contém informações sobre o documento. O elemento **** , por exemplo, define um título, que é mostrado no alto da janela do browser. Nesta página, por exemplo, está definido assim:

<HEAD><TITLE>A seção <HEAD> - Tutorial HTML do ICMC-USP

Todo documento WWW deve ter um título ; esse título é referenciado em buscas pela rede, dando uma identidade ao documento. Para ver na prática a importância do título, se você adicionar esta página aos seus Favoritos (Bookmarks).

Note que o título da página se tornou a âncora de atalho para ela. Por isso é sugerido que os títulos dos documentos sejam sugestivos, evitando-se títulos genéricos como "Introdução". O título também é bastante significativo para a listagem de uma página nos resultados de pesquisas nos catálogos da Internet.

Além do título, **** contém outras informações de importância para os robôs de pesquisa, indicadas nos campos ****.

**Campos **

Os campos têm dois atributos principais:

 NAME, indicando um nome para a informação

 HTTP-EQUIV, que faz uma correspondência com campos de cabeçalho do protocolo HTTP; a informação desse campo pode ser lida pelos browsers, e provocar algumas ações.

Título do Documento

Este documento, por exemplo, tem as seguintes informações:

< META HTTP-EQUIV ="content-type" CONTENT ="text/html; charset=iso-8859-1"> < META HTTP-EQUIV ="pragma" CONTENT ="no-cache"> A seção <HEAD> - Tutorial HTML do ICMC-USP < META NAM E="Author" CONTENT ="Maria Alice Soares de Castro - [email protected]">

< META NAME ="Generator" CONTENT ="Namo WebEditor v5.0"> < META NAME ="Description" CONTENT ="Manual de referência para webdesigners e desenvolvedores de sites"> < META NAME ="KeyWords" CONTENT ="HTML, WWW, Webpublishing, Internet, Webdesign">

Alguns valores dos atributos META NAME são inseridos automaticamente por alguns editores, por exemplo: Generator e Author. Os campos Description e KeyWords ajudam a classificação da página em algumas ferramentas de busca. Essas informações não têm qualquer efeito na apresentação da página, mas servem como uma explicação ou documentação sobre as informações contidas nela.

Há poucos valores para META HTTP-EQUIV em uso. O mais comum é content-type , que indica o conjunto de caracteres usado na página: essa informação ajuda o browser a exibir corretamente os caracteres especiais que estiverem presentes no texto.

Um exemplo de uso comum do atributo HTTP-EQUIV é promover a mudança automática de páginas, atribuindo-lhe o valor Refresh.

...

onde:

pagina.html é a página a ser carregada automaticamente segundos é o número de segundos passados até que a página indicada seja carregada.

Como foi comentado no exemplo, o efeito é interessante, mas para que serve? Se não pensamos em uma finalidade útil para esse efeito, caímos na tentação de usá-lo “à toa”.

A aplicação mais utilizada é a atualização automática de um documento que, por exemplo, tenha uma foto produzida por uma câmara de vídeo: pode-se forçar, com o Refresh, a atualização dessa página, mostrando para o leitor sempre uma imagem mais atual de algum evento sendo focalizado pela câmara. Outra utilização é em “chats”, ou em páginas que desviem a navegação por documentos desenvolvidos para browsers avançados.

_A seção _

Tudo que estiver contido em **** será mostrado na janela principal do browser, sendo apresentado ao leitor. **** pode conter cabeçalhos, parágrafos, listas, tabelas, links para outros documentos, imagens, formulários, animações, vídeos, sons e scripts embutidos. Veja um documento básico em HTML.

Atributos de

Através de atributos de , podemos definir cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (marca d’água):

onde: BGCOLOR cor de fundo (quando não é indicada, o browser irá mostrar uma cor padrão, geralmente o cinza ou branco; alguns editores poderão estabelecer o branco para o fundo da página) TEXT

Este é um cabeçalho de nível 1

Dentro de um cabeçalho de nível 2

mas o mais comum é que os browsers "entendam" essa formatação como sendo:

Este é um cabeçalho de nível 1 dentro de um cabeçalho de nível 2

• ou seja, como se estivesse faltando uma etiqueta de fechamento de antes de , e faltando uma abertura de depois do fechamento de , oferecendo o seguinte resultado:

Este é um cabeçalho de nível 1

dentro de um cabeçalho de nível 2

Os editores WYSIWYG naturalmente não permitem o aninhamento de cabeçalhos.

Alinhamento

Os cabeçalhos têm atributos de alinhamento:

Cabeçalho centralizado

Cabeçalho centralizado

Cabeçalho alinhado à direita

Cabeçalho alinhado à direita

Cabeçalho alinhado à esquerda (default)

Cabeçalho alinhado à esquerda (default)

Separadores

Como vimos no primeiro exemplo, as quebras de linha do texto fonte não são significativas na apresentação de documentos em HTML. Para organizar os textos, precisamos de separadores, apresentados aqui.

Quebra de linha

Quando queremos mudar de linha, usamos o elemento
. Isso só é necessário quando queremos uma quebra de linha em determinado ponto, pois os browsers já quebram as linhas automaticamente para

apresentar os textos. Com sucessivos
, podemos inserir diversas linhas em branco nos documentos. Esse elemento tem um atributo especial, que será apresentado no item sobre inserção de imagens.

Parágrafos

Para separar blocos de texto, usamos o elemento

: Parágrafo 1;

Parágrafo 2. que produz:

Parágrafo1;

Parágrafo2.

Combinando parágrafos e quebras de linha, temos: Parágrafo 1;
linha 1 do parágrafo 1,
linha 2 do parágrafo 1.

Parágrafo 2;
linha 1 do parágrafo 2,
linha 2 do parágrafo 2. O resultado da marcação acima é:

Parágrafo 1; linha 1 do parágrafo 1, linha 2 do parágrafo 1.

Parágrafo 2; linha 1 do parágrafo 2, linha 2 do parágrafo 2.

tem atributo de alinhamento, como os cabeçalhos:

Assim como os trens, as boas idéias às vezes chegam com atraso.
(Giovani Guareschi)

Assim como os trens, as boas idéias às vezes chegam com atraso. (Giovani Guareschi)

Como diz o provérbio chinês: “É melhor passar por ignorante uma vez do que permanecer ignorante para sempre”.

Como diz o provérbio chinês: “É melhor passar por ignorante uma vez do que permanecer ignorante para sempre”.

Este é o alinhamento padrão (default), e por isso não vou colocar nenhuma frase especial.

Este é o alinhamento padrão (default), e por isso não vou colocar nenhuma frase especial.

Linha Horizontal

insere uma linha horizontal: Erro! Indicador não definido. Essa linha tem diversos atributos, oferecendo resultados diversos.

item de uma lista item de uma lista, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto item

 item de uma lista

 item de uma lista, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto

 item

A diferença entre o resultado da marcação HTML e do Word está na mudança dos marcadores, assinalando os diversos níveis de listas compostas:

Documentos básicos Documentos avançados

formulários

CGI

contadores relógios

Detalhes sobre imagens

 Documentos básicos

 Documentos avançados

o formulários

 CGI

o contadores

o relógios

 Detalhes sobre imagens

Essa lista pode ter marcadores diferentes, indicados através do atributo TYPE, que assume os valores CIRCLE, SQUARE e DISC (default):

um item mais um item

o um item

o mais um item

Cada item também pode ter seu atributo específico:

um item mais um item último item

 um item

o mais um item

 último item

Listas Numeradas

item de uma lista numerada item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto item de lista numerada

1. item de uma lista numerada
2. item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto
3. item de lista numerada

Estas listas não apresentam numeração em formato 1.1, 1.2 etc., quando compostas:

1. Documentos básicos
2. Documentos avançados
   1. formulários
      1. CGI
      2. contadores
      3. relógios
   2. Detalhes sobre imagens

Porém, através do atributo TYPE (HTML 3.2), pode-se lidar com a numeração dos itens:

Documentos básicos Documentos avançados

formulários

CGI

contadores relógios

Detalhes sobre imagens

I. Documentos básicos

II. Documentos avançados

a. formulários

i. CGI

b. contadores

c. relógios

III. Detalhes sobre imagens