AULA 1 - PROGRAMAÇÃO WEB I

Prévia do material em texto

ANÁLISE E DESENVOLVIMENTO DE SISTEMAS
WEBAULA 1
Unidade 1 – HTML (acrônimo para a expressão HyperText Markup Language)
1. HTML
HTML (acrônimo para a expressão HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores.
Todo documento HTML apresenta elementos entre parênteses angulares (< e >); esses elementos são as etiquetas (tags) de HTML, que são os comandos de formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento:
 
2. Editores HTML
Como dito anteriormente, um arquivo html pode ser criado usando um editor de texto simples, como o bloco de notas. Porém há editores sofisticados para a criação de código HTML, alguns exemplos:
Página 
3. Estrutura básica de um documento
As etiquetas básicas de HTML, cuja presença é altamente recomendada nas páginas são:
 
3.1 Tags do cabeçalho
Dentro do cabeçalho podemos encontrar os seguintes comandos:
onde:
BGCOLOR: cor de fundo (quando não é indicada, o browser irá mostrar uma cor padrão, geralmente o cinza ou branco)
TEXT cor dos textos da página (padrão: preto)
LINK cor dos links (padrão: azul)
ALINK cor dos links, quando acionados (padrão: vermelho)
VLINK cor dos links, depois de visitados (padrão: azul escuro ou roxo)
Seus valores são dados em hexadecimal, equivalentes a cores no padrão RGB (Red, Green, Blue). Browsers atuais aceitam 16 nomes de cores - por exemplo, podemos escrever BGCOLOR="BLUE". Porém, browsers mais antigos não apresentarão as cores indicadas.
Página 3 de 11 
Anterior
4. Hiperligações
5. Listas em HTML
Listas Não Numeradas, essa lista pode ter marcadores diferentes, indicados através do atributo TYPE, que assume os valores CIRCLE, SQUARE e DISC (default):
Listas Numeradas, através do atributo TYPE pode-se lidar com a numeração dos itens:
Página 4 de 11
6. Images em HTML 
Em HTML, imagens são definidas com a tag <IMG>
Aqui temos um exemplo simples, onde definimos largura e altura da imagem a ser exibida:
Os atributos WIDTH="largura" HEIGHT="altura" não são necessários, porém uma das vantagens de se usar esses atributos é que o browser pode montar mais rapidamente as páginas, por saber de antemão o espaço que deverá ser reservado a elas. O atributo ALT="descrição_da_imagem" também não é obrigatório, ele indica um texto alternativo, descrevendo brevemente a imagem, que é apresentado no lugar da imagem nos browsers texto, ou quando se desabilita o carregamento de imagens em browsers gráficos. É recomendável que esteja sempre presente.
Ainda temos os atributos BORDER e ALIGN:
O atributo BORDER traça uma borda ao redor da imagem, e nós definimos sua largura. Já o atributo ALIGN define o alinhamento da imagem.
 
7. Tabelas
É possível englobar colunas e linhas, através dos atributos COLSPAN (para colunas) e ROWSPAN (para linhas):
Neste exemplo, vemos que o cabeçalho Colunas 1 e 2 compreende duas colunas (COLSPAN=2); o cabeçalho 3 linhas compreende, por sua vez, 3 linhas (ROWSPAN=3).
Página 
8. Formulários
A linguagem HTML também permite que o cliente (navegador) interaja com o servidor, preenchendo campos, clicando em botões e passando informações.
O elemento FORM, da linguagem HTML, é justamente o responsável por tal interação. Ele provê uma maneira agradável e familiar para colotar dados do usuário através da criação de formulários com janelas de texto, botões, etc. Veja os exemplos a seguir:
Página 6 de 11
WEB AULA 2
Unidade 1 – CSS (Folha de Estilo em Cascata)
 
1. CSS (Folha de Estilo em Cascata)
Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento. O Cascading Style Sheets não é exatamente uma linguagem, mas sim um conjunto de regras e tags que ajudam a melhorar o layout das páginas. Com ela é possível economizar muito trabalho além de oferecer recursos que o html padrão não oferece.
Ao invés de colocar a formatação dentro do documento, o desenvolvedor cria um link (ligação) para uma página que contém os estilos. Quando quiser alterar a aparência da página(s) basta portanto modificar apenas um arquivo do estilo CSS.
Vantagens em usar CSS:
• Separação Lógica da Estruturação e da Formatação das Informações: os style sheets permitem isolar os códigos de formatação aplicado a várias páginas, de maneira que as mudanças gerais de estilo podem ser feitas editando apenas um único arquivo.
• Redução do Tamanho e de Tempo de Carregamento das Páginas: Ao colocar as formatações em uma única folha de estilo referenciada por cada página, ocorre a redução da quantidade de código das páginas e conseqüentemente isto reduz também a quantidade de dados que têm que ser transmitidos e analisados pelos browsers.
OBS.: Para visualizar inovações de layout programadas em Cascading Style Sheet é necessário utilizar o browser Internet Explorer versão 3.0 ou superior, ou o Netscape Navigator a partir da versão 4.0.
Os Styles Sheets permitem, por exemplo, configurar todos os comandos  em uma página ou em um site inteiro de uma só vez.
A maior parte dos programas de editoração eletrônica e processadores de texto modernos trabalham com folhas de estilos. O processo consiste em definir um rótulo (nome do estilo) para um determinado parágrafo e em seguida alterar os seus atributos. Todo parágrafo que for rotulado com aquele estilo passará a exibir as características definidas anteriormente. Qualquer alteração nos atributos de um estilo afetará todos os parágrafos que estiverem rotulados com ele.
Para uma abordagem mais completa, consulte a documentação oficial do W3C: http://www.w3.org/Style/.
 
2. Como Criar um Estilo
A sintaxe de uma regra CSS compreende um seletor uma propriedade e um valor escritos como mostrado abaixo:
seletor {propriedade: valor;}
Nota: ao conjunto propriedade: valor; denominamos declaração CSS.
Por exemplo:
p {text-indent:10pt;} é uma regra CSS
Onde:
• p é o seletor.
• {text-indent: 10pt} é a declaração CSS.
• text-indent - é a propriedade CSS
• 10pt - é o valor CSS
Página 7 de 11 
3. Para que servem as folhas de estilo
3.1 Separar apresentação da estrutura
Com isto é possível voltar a suportar browsers antigos que antes estavam condenados por não conseguirem ler a informação sem perdas. Com a informação toda armazenada no HTML (estrutura), a apresentação (estilo) seria uma camada a mais, alterando a disposição do texto, cores, etc., mas sem afetar a estrutura essencial da informação. Isto permite que uma página tenha vários estilos e use scripts (programas embutidos) para decidir qual carregar (em função do browser e da plataforma). Isto é muito menos trabalho que fazer uma página para cada browser e plataforma, pois a atualização é feita apenas no HTML. Também, com isso, é possível ter uma folha de estilos especial somente para impressão, onde haveria informações de quebra de páginas, etc.
 
3.2 Manutenção de um grande site
Uma folha de estilos serve para toda uma coleção de páginas, podendo ser usada para dar um estilo consistente a todo o site. Sendo aplicada em separado da informação e estrutura, não precisará ser atualizada todas as vezes que a informação for mudada. A página pode ser atualizada em um editor HTML ou gerador de HTML simples, sem recursos de cor ou alinhamento, e ser formatada na hora em que for carregada pelo browser. É possível também fazer o contrário: mudar o estilo sem alterar a informação, como ter uma página que sempre carrega com um estilo diferente. 
O uso das folhas de estilo depende da boa estrutura do HTML. A linguagem CSS (é uma linguagem declarativa) trabalha com os elementos tratando-os como "objetos". Cada parágrafo <P>, cada <H1>, cada <IMG> é um objeto. Objetos podem ser agrupados de várias formas. A cada objeto ou grupode objetos podem ser atribuídas propriedades de estilo definidas em regras. Por exemplo, considere a seguinte regra: "todo objeto P da classe 'editorial' será azul, terá tamanho de 12 pontos, espaçamento duplo, alinhamento pela direita e usará a família de fontes Arial, ou, se esta não existir, Helvetica, ou então a fonte sem-serifa default do sistema". Um arquivo CSS com apenas a regra acima conteria o texto:
 P.editorial {color: 0000ff; 
                    font-size: 12pt;
                    line-height: 24pt; 
                    text-align: right; 
                    font-family: arial, helvetica, sans-serif}
Se a folha de estilos acima for aplicada a uma página que possua parágrafos <P> rotulados com o nome "editorial" (atributo 'CLASS=editorial'), eles serão formatados de acordo com as propriedades especificadas se o browser suportar CSS. Se o browser não suportar CSS, a estrutura será mantida (embora a aparência não seja a ideal) e o usuário conseguirá ter acesso à informação estruturada, mesmo em um meio de visualização mais limitado.
2.2 Aplicação
A aplicação em HTML acontece dessas 2 principais formas: Internamente ao código HTML ou externamente. Quando a aplicação é interna ao código, ela aparece no cabeçalho, entre as tags, pelo uso do atributo style.
Exemplo interno ao HTML: <html>
<head>
<title> Bem-vindo! </title>
<style type="text/css">
          body {background-color: #0000FF;}
</style>
</head>
<body>
         Aprendendo CSS em um fundo azul!
</body>
</html>
Na aplicação externa é a aplicação recomendada, onde o usuário cria seu documento CSS em um editor de texto, com extensão.css e adiciona-se um link no documento em HTML, entre as tags, "chamando"a folha de estilo "estilo.css". Veja o exemplo abaixo:
Veja outros exemplos em: http://www.pereiraaps.com.br/Apostilas/css.basico.pdf.
ARQUIVO DE ESTILO-estilo.css
body {
background-color: #0000FF;
}
p {
font-size: 3
}
ARQUIVO HTML-exemplo.html
<html>
<head>
<title> Bem-vindo! </title>
<link rel= "stylesheet" type= "text/css" href= "CSS/estilo.css" />
</head>
<body>
<p> Fazendo minha folha de estilos!!! </p>
<p> No caso, o arquivo HTML esta salvo em "HTML" e o *.css em "HTML/CSS"
</body>
</html>
"chamando"a folha de estilo "estilo.css". Veja o exemplo abaixo:
Veja outros exemplos em: http://www.pereiraaps.com.br/Apostilas/css.basico.pdf.
4. Tabela de cores RGB
Veja a tabela de cores RGB completa em: http://shibolete.tripod.com/RGB.html
EXEMPLOS para teste do CSS
Os exemplos apresentados a seguir podem ser testados seguindo o procedimento descrito em cada exemplo.
1. Crie uma pasta com nome TESTE e dentro da pasta teste crie uma pasta com nome EXEMPLO01.
EXEMPLO 01
2. Crie um arquivo em um editor (pode ser o bloco de notas) contendo o código abaixo e Grave com nome ESTILOS_01.CSS
Faça teste alterando o código das cores (veja a tabela de cores RGB)
h1 {
color:#CC3299;
text-decoration: underline;
text-transform: uppercase
}
h2 {
color: #FF0000;
text-decoration: line-through;
text-transform: none
}
p {
text-ident: 1cm;
line-height: 20px;
text-align: left
} 
3. Crie outro arquivo também usando o bloco de notas contendo o código abaixo e grave com nome exemplo_01.html
<head>
<title> Bem-vindo! </title>
<link rel= "stylesheet" type= "text/css" href= "ESTILOS_01.CSS" />
</head>
<body>
<h1> Textos </h1>
<h2> Mudan&ccedil;as </h2>
<p> "Se voc&ecirc; quer transformar o mundo, experimente primeiro promover o seu aperfei&ccedil;oamento pessoal e realizar inova&ecirc;&otilde;es no seu pr&oacute;prio interior.Estas atitudes se refletir&atilde;o em mudan&ccedil;as
positivas no seu ambiente familiar.Deste ponto em diante, as mudan&ccedil;as se expandir&atilde;o em propor&ccedil;&otilde;es cada vez maiores.
Tudo o que fazemos produz efeito, causa algum impacto."</p>
</body>
</html>
4. Abra o Internet Explorer e abra o arquivo exemplo_01.html que criou no item anterior (Arquivo / Abrir).
Página 
Exercício 02
5. Crie uma pasta com nome EXEMPLO02 dentro da pasta TESTE.
6. Crie um arquivo no bloco de notas com nome ESTILOS_02.CSS dentro e grave dentro da pasta EXEMPLO02.
h1 {
color: #DDA0DD;
font-family: arial;
font-weight: bold;
}
h2 {
color: #3366FF;
font-family: arial;
font-variant: small-caps;
}
p.1 {
font-family: serif;
font-size: x-small;
font-style: italic
}
p.2 {
font-family: sans-serif;
font-size: 90%;
font-style: oblique
}
7. Crie outro arquivo contendo e grave com nome exemplo_02.html dentro da pasta EXEMPLO02
<html>
<head>
<title> Bem-vindo! </title>
<link rel= "stylesheet" type= "text/css" href= "ESTILOS_02.CSS" />
</head>
<body>
<h1> Textos </h1>
<h2> Mudan&ccedil;as </h2>
<p class="1"> "Se voc&ecirc; quer transformar o mundo, experimente primeiro promover o seu aperfei&ccedil;oamento pessoal e realizar inova&ecirc;&otilde;es no seu pr&oacute;prio interior.Estas atitudes se refletir&atilde;o em mudan&ccedil;as positivas no seu ambiente familiar.Deste ponto em diante, as mudan&ccedil;as se
expandir&atilde;o em propor&ccedil;&otilde;es cada vez maiores. 
Tudo o que fazemos produz efeito, causa algum impacto."</p> 
<h2> Determina&ccedil;&atilde;o </h2>
<p class="2"> "Determina&ccedil;&atilde;o, coragem e autoconfian&ccedil;a s&atilde;o fatores decisivos para o sucesso. N&atilde;o importa quais sejam os obst&aacute;culos e as dificuldades. Se estamos possu&iacute;dos de uma inabal&aacute;vel determina&ccedil;&atilde;o, conseguiremos super&aacute;-los." </p>
</body>
</html>
8. Abra o arquivo criado no item anterior para visualizar as formatações.
Página 
<html>
<head>
<title> Bem-vindo! </title>
<link rel= "stylesheet" type= "text/css" href= "ESTILOS_02.CSS" />
</head>
<body>
<h1> Textos </h1>
<h2> Mudan&ccedil;as </h2>
<p class="1"> "Se voc&ecirc; quer transformar o mundo, experimente primeiro promover o seu aperfei&ccedil;oamento pessoal e realizar inova&ecirc;&otilde;es no seu pr&oacute;prio interior.Estas atitudes se refletir&atilde;o em mudan&ccedil;as positivas no seu ambiente familiar.Deste ponto em diante, as mudan&ccedil;as se
expandir&atilde;o em propor&ccedil;&otilde;es cada vez maiores. 
Tudo o que fazemos produz efeito, causa algum impacto."</p> 
<h2> Determina&ccedil;&atilde;o </h2>
<p class="2"> "Determina&ccedil;&atilde;o, coragem e autoconfian&ccedil;a s&atilde;o fatores decisivos para o sucesso. N&atilde;o importa quais sejam os obst&aacute;culos e as dificuldades. Se estamos possu&iacute;dos de uma inabal&aacute;vel determina&ccedil;&atilde;o, conseguiremos super&aacute;-los." </p>
</body>
</html>
<html>
<head>
<title> Bem-vindo! </title>
<link rel= "stylesheet" type= "text/css" href= "ESTILOS_02.CSS" />
</head>
<body>
<h1> Textos </h1>
<h2> Mudan&ccedil;as </h2>
<p class="1"> "Se voc&ecirc; quer transformar o mundo, experimente primeiro promover o seu aperfei&ccedil;oamento pessoal e realizar inova&ecirc;&otilde;es no seu pr&oacute;prio interior.Estas atitudes se refletir&atilde;o em mudan&ccedil;as positivas no seu ambiente familiar.Deste ponto em diante, as mudan&ccedil;as se
expandir&atilde;o em propor&ccedil;&otilde;es cada vez maiores. 
Tudo o que fazemos produz efeito, causa algum impacto."</p> 
<h2> Determina&ccedil;&atilde;o </h2>
<p class="2"> "Determina&ccedil;&atilde;o, coragem e autoconfian&ccedil;a s&atilde;o fatores decisivos para o sucesso. N&atilde;o importa quais sejam os obst&aacute;culos e as dificuldades. Se estamos possu&iacute;dos de uma inabal&aacute;vel determina&ccedil;&atilde;o, conseguiremos super&aacute;-los." </p>
</body>
</html>
http://www.pereiraaps.com/Apostilas/css.basico.pdf
9. Crie uma pasta com nome EXEMPLO03 dentro da pasta TESTE.
10. Crie um arquivo no bloco de notas com nome ESTILOS_03.CSS dentro e grave dentro da pasta EXEMPLO03.
h1 {
border-width: thick;
border-style: outset;
border-color: gold;
}h2 {
border-width: 20px;
border-style: double;
border-color: red;
}
p {
border-top-width: 1px;
border-style: solid;
border-color: blue;
}
11. Crie outro arquivo contendo e grave com nome exemplo_03.html dentro da pasta EXEMPLO03.
<html>
<head>
<title> Bordas! </title>
<link rel= "stylesheet" type= "text/css" href= "ESTILOS_03.CSS" />
</head>
<body>
<h1> Bordas CSS </h1>
<h2> Mudan&ccedil;as </h2>
<p> "Se voc&ecirc; quer transformar o mundo, experimente primeiro promover o seu
aperfei&ccedil;oamento pessoal e realizar inova&ecirc;&otilde;es no seu
pr&oacute;prio interior.Estas atitudes se refletir&atilde;o em mudan&ccedil;as
positivas no seu ambiente familiar.Deste ponto em diante, as mudan&ccedil;as se
expandir&atilde;o em propor&ccedil;&otilde;es cada vez maiores.
Tudo o que fazemos produz efeito, causa algum impacto."</p>
</body>
</html>
Veja outros exemplos de bordas para o estilo border-style:
http://www.pereiraaps.com.br/Apostilas/css.basico.pdf (página 16).
 
12. Abra o arquivo criado no item anterior (.HTML)  para visualizar as formatações.
 
Links – Material de apoio
 (html) 
 (html)
http://pt.kioskea.net/contents/html/htmlform.php3 (exemplo de formulário)
http://desenaviegas.com/forms.html  (exemplo de formulário)
http://www.educandusweb.com.br/ewce/portal/formularios/apoio/arquivos/apoio1020_apostila_html.pdf  (html, css, java script)
Página 11 de 11