Aula 1 programação web i

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:

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 grupo de 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>
AprendendoCSSemumfundoazul!
</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 arquivoemum editor(pode seroblocode notas) contendoo códigoabaixoe Grave com nome ESTILOS_01.CSS
Faça teste alterandoocódigodas cores(vejaa tabelade coresRGB)
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 arquivotambémusandooblocode notascontendoo códigoabaixoe grave com nome exemplo_01.html

<head>
<linkrel="stylesheet"type="text/css"href="ESTILOS_01.CSS"/>
</head>
<body>
<h1> Textos</h1>
<h2> Mudanças</h2>
<p> "Se vocêquertransformaro mundo,experimenteprimeiropromoveroseuaperfeiçoamentopessoal e realizarinovaêõesnoseupróprio
interior.Estasatitudesse refletirãoemmudanças
positivasnoseuambiente familiar.Deste pontoemdiante,asmudançasse expandirãoemproporçõescadavezmaiores.
Tudo o que fazemosproduzefeito, causaalgumimpacto."</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 arquivono blocode notascom nome ESTILOS_02.CSS dentroe grave dentroda pastaEXEMPLO02.
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 arquivocontendoe grave com nome exemplo_02.html dentrodapastaEXEMPLO02
<html>
<head>

</head>
<body>
<h1> Textos</h1>
<h2> Mudanças</h2>
<p class="1"> "Se vocêquertransformaro mundo,experimente primeiropromoveroseuaperfeiçoamentopessoal e realizarinovaêõesnoseu
própriointerior.Estasatitudesse refletirãoemmudançaspositivasnoseuambientefamiliar.Deste ponto emdiante,asmudançasse
expandirãoemproporçõescadavezmaiores.
<h2> Determinação</h2>
<p class="2"> "Determinação,corageme autoconfiançasãofatoresdecisivosparao sucesso.Nãoimportaquaissejamosobstáculose as
dificuldades.Se estamospossuídosde umainabaláveldeterminação,conseguiremossuperá-los."</p>
</body>
</html>

8. Abra o arquivo criado no item anterior para visualizar as formatações.
Página
<html>
<head>
<link rel= "stylesheet" type= "text/css" href= "ESTILOS_02.CSS" />
</head>

<body>
<h1> Textos </h1>
<h2> Mudanças </h2>
<p class="1"> "Se você quer transformar o mundo, experimente primeiro promover o seu aperfeiçoamento pessoal e realizar inovaêões
no seu próprio interior.Estas atitudes se refletirão em mudanças positivas no seu ambiente familiar.Deste ponto em diante, as
mudanças se
expandirão em proporções cada vez maiores.
Tudo o que fazemos produz efeito, causa algumimpacto."</p>
<h2> Determinação </h2>
<p class="2"> "Determinação, coragem e autoconfiança são fatores decisivos para o sucesso. Não importa quais sejamos
obstáculos e as dificuldades. Se estamos possuídos de uma inabalável determinação, conseguiremos superá-los." </p>
</body>

</html>
<html>
<head>
<link rel= "stylesheet" type= "text/css" href= "ESTILOS_02.CSS" />
</head>
<body>
<h1> Textos </h1>
<h2> Mudanças </h2>
<p class="1"> "Se você quer transformar o mundo, experimente primeiro promover o seu aperfeiçoamento pessoal e realizar inovaêões
no seu próprio interior.Estas atitudes se refletirão em mudanças positivas no seu ambiente familiar.Deste ponto em diante, as
mudanças se

expandirão em proporções cada vez maiores.
Tudo o que fazemos produz efeito, causa algumimpacto."</p>
<h2> Determinação </h2>
<p class="2"> "Determinação, coragem e autoconfiança são fatores decisivos para o sucesso. Não importa quais sejamos
obstáculos e as dificuldades. Se estamos possuídos de uma inabalável determinação, conseguiremos superá-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>
</head>
<body>
<h1> Bordas CSS</h1>

<h2> Mudanças</h2>
<p> "Se vocêquertransformaro mundo,experimenteprimeiropromoveroseu
aperfeiçoamentopessoal e realizarinovaêõesnoseu
própriointerior.Estasatitudesse refletirãoemmudanças
positivasnoseuambiente familiar.Deste pontoemdiante,asmudançasse
expandirãoemproporçõescadavezmaiores.
</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

Aula 1 programação web i

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Aula 1 programação web i

Aula 1 programação web i