aula 1 programação web i
TRANSCRIPT
![Page 1: Aula 1 programação web i](https://reader035.vdocuments.site/reader035/viewer/2022062903/58a07fa91a28ab19098b68f7/html5/thumbnails/1.jpg)
ANÁLISE E DESENVOLVIMENTO DE SISTEMAS
WEBAULA 1Unidade 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:
![Page 2: Aula 1 programação web i](https://reader035.vdocuments.site/reader035/viewer/2022062903/58a07fa91a28ab19098b68f7/html5/thumbnails/2.jpg)
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
![Page 3: Aula 1 programação web i](https://reader035.vdocuments.site/reader035/viewer/2022062903/58a07fa91a28ab19098b68f7/html5/thumbnails/3.jpg)
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)
![Page 4: Aula 1 programação web i](https://reader035.vdocuments.site/reader035/viewer/2022062903/58a07fa91a28ab19098b68f7/html5/thumbnails/4.jpg)
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:
![Page 5: Aula 1 programação web i](https://reader035.vdocuments.site/reader035/viewer/2022062903/58a07fa91a28ab19098b68f7/html5/thumbnails/5.jpg)
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
![Page 6: Aula 1 programação web i](https://reader035.vdocuments.site/reader035/viewer/2022062903/58a07fa91a28ab19098b68f7/html5/thumbnails/6.jpg)
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
![Page 7: Aula 1 programação web i](https://reader035.vdocuments.site/reader035/viewer/2022062903/58a07fa91a28ab19098b68f7/html5/thumbnails/7.jpg)
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.
![Page 8: Aula 1 programação web i](https://reader035.vdocuments.site/reader035/viewer/2022062903/58a07fa91a28ab19098b68f7/html5/thumbnails/8.jpg)
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>
![Page 9: Aula 1 programação web i](https://reader035.vdocuments.site/reader035/viewer/2022062903/58a07fa91a28ab19098b68f7/html5/thumbnails/9.jpg)
<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
![Page 10: Aula 1 programação web i](https://reader035.vdocuments.site/reader035/viewer/2022062903/58a07fa91a28ab19098b68f7/html5/thumbnails/10.jpg)
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>
![Page 11: Aula 1 programação web i](https://reader035.vdocuments.site/reader035/viewer/2022062903/58a07fa91a28ab19098b68f7/html5/thumbnails/11.jpg)
</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
![Page 12: Aula 1 programação web i](https://reader035.vdocuments.site/reader035/viewer/2022062903/58a07fa91a28ab19098b68f7/html5/thumbnails/12.jpg)
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>
![Page 13: Aula 1 programação web i](https://reader035.vdocuments.site/reader035/viewer/2022062903/58a07fa91a28ab19098b68f7/html5/thumbnails/13.jpg)
<link rel= "stylesheet" type= "text/css" href= "ESTILOS_01.CSS" />
</head>
<body>
<h1> Textos </h1>
<h2> Mudanças </h2>
<p> "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 algum impacto."</p>
</body>
</html>
4. Abra o Internet Explorer e abra o arquivo exemplo_01.html que criou no item anterior (Arquivo / Abrir).
![Page 14: Aula 1 programação web i](https://reader035.vdocuments.site/reader035/viewer/2022062903/58a07fa91a28ab19098b68f7/html5/thumbnails/14.jpg)
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;
![Page 15: Aula 1 programação web i](https://reader035.vdocuments.site/reader035/viewer/2022062903/58a07fa91a28ab19098b68f7/html5/thumbnails/15.jpg)
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" />
![Page 16: Aula 1 programação web i](https://reader035.vdocuments.site/reader035/viewer/2022062903/58a07fa91a28ab19098b68f7/html5/thumbnails/16.jpg)
</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 algum impacto."</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 sejam os obstáculos e as dificuldades. Se estamos possuídos de uma inabalável determinação, conseguiremos superá-los." </p>
</body>
</html>
![Page 17: Aula 1 programação web i](https://reader035.vdocuments.site/reader035/viewer/2022062903/58a07fa91a28ab19098b68f7/html5/thumbnails/17.jpg)
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>
![Page 18: Aula 1 programação web i](https://reader035.vdocuments.site/reader035/viewer/2022062903/58a07fa91a28ab19098b68f7/html5/thumbnails/18.jpg)
<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 algum impacto."</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 sejam os obstáculos e as dificuldades. Se estamos possuídos de uma inabalável determinação, conseguiremos superá-los." </p>
</body>
![Page 19: Aula 1 programação web i](https://reader035.vdocuments.site/reader035/viewer/2022062903/58a07fa91a28ab19098b68f7/html5/thumbnails/19.jpg)
</html>
<html>
<head>
<title> Bem-vindo! </title>
<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
![Page 20: Aula 1 programação web i](https://reader035.vdocuments.site/reader035/viewer/2022062903/58a07fa91a28ab19098b68f7/html5/thumbnails/20.jpg)
expandirão em proporções cada vez maiores.
Tudo o que fazemos produz efeito, causa algum impacto."</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 sejam os 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;
}
![Page 21: Aula 1 programação web i](https://reader035.vdocuments.site/reader035/viewer/2022062903/58a07fa91a28ab19098b68f7/html5/thumbnails/21.jpg)
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>
![Page 22: Aula 1 programação web i](https://reader035.vdocuments.site/reader035/viewer/2022062903/58a07fa91a28ab19098b68f7/html5/thumbnails/22.jpg)
<h2> Mudanças </h2>
<p> "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 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.
![Page 23: Aula 1 programação web i](https://reader035.vdocuments.site/reader035/viewer/2022062903/58a07fa91a28ab19098b68f7/html5/thumbnails/23.jpg)
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