Introducao HTML CSS

Anlise e Desenvolvimento de Sistemas
Contedo: Introduo ao Desenvolvimento Web Prof.(a): Veronice de Freitas Semestre: 5
HTML / CSS
Estrutura do Texto
VINCULANDO FOLHAS DE ESTILO DOCUMENTOS............................................................... 2 EXEMPLOS .......................................................................................................................................... 5 EXEMPLOS ........................................................................................................................................ 18 OUTROS EXEMPLOS ....................................................................................................................... 35 VERSES DO HTML......................................................................................................................... 44 TABELA DE CARACTERES ............................................................................................................ 47 MATERIAL DE APOIO ..................................................................................................................... 48
TESTANDO HTML / CSS - W3SCHOOLS.COM

possvel testar os cdigos HTML / CSS usando w3schools.com (veja as indicaes nas figuras abaixo). Teste o cdigo
Exemplos cdigo HTML / CSS
http://www.w3schools.com/css/css_examples.asp http://www.w3schools.com/css/tryit.asp?filename=trycss_background-color_body
UNOPAR VIRTUAL (pgina: 1)
VINCULANDO FOLHAS DE ESTILO DOCUMENTOS

http://maujor.com/tutorial/insetut.php
As folhas de estilo podem ser vinculadas a um documento HTML de trs maneiras distintas: Importadas ou linkadas; Incorporadas; Inline.
Folha de estilo externa

Uma folha de estilo dita externa, quando as regras CSS esto declaradas em um documento a parte do documento HTML. A folha de estilo um arquivo separado do arquivo html. O arquivo de folha de estilo deve ser gravado com a extenso .css Uma folha de estilo externa ideal para ser aplicada a vrias pginas. Com uma folha de estilo externa, voc pode mudar a aparncia de um site inteiro mudando regras de estilos contidas em um arquivo apenas (o arquivo da folha de estilo). O arquivo css da folha de estilo externa dever ser linkado ou importado ao documento HTML, dentro da seo head do documento. A sintaxe geral para linkar uma folha de estilo chamada estilo.css mostrada a seguir.
<head> ... <link rel="stylesheet" type="text/css" href="estilo.css"> ... </head>
O navegador "ler" as regras de estilo do arquivo estilo.css, e formatar o documento de acordo com elas. Uma folha de estilo externa pode ser escrita em qualquer editor de texto. O arquivo no deve conter nenhuma tag HTML. As folhas de estilo devem ser gravadas com uma extenso.css
Folha de estilo incorporada ou interna

Uma folha de estilo dita incorporada ou interna, quando as regras CSS esto declaradas no prprio documento HTML. Uma folha de estilo incorporada ou interna, ideal para ser aplicada a uma nica pgina. Com uma folha de estilo incorporada ou interna, voc pode mudar a aparncia de somente um documento, aquele onde a folha de estilo est incorporada. As regras de estilo incorporadas e vlidas para o documento so declaradas na seo head do documento com a tag de estilo <style>, conforme sintaxe mostrada a seguir.
<head> ... <style type="text/css"> <!-body { background: #000; url(imagens/minhaimagem.gif); } h3 { color: #f00; } p { margin-left: 15px; padding:1.5em; } --> </style> ... </head>
O navegador "ler" as regras de estilo na prpria pgina, e formatar o documento de acordo com elas. Nota: Um navegador ignora normalmente as tags desconhecidas. Isto significa que um navegador antigo que no suporte estilos, ignorar a tag <style>, mas o contedo da tag ser mostrado na tela. possvel impedir que um navegador antigo mostre o contedo da tag, "escondendo-o" atravs do uso da marcao de comentrio do HTML. Observe a incluso dos smbolos  (fecha comentrio) no cdigo acima. Nos dias atuais mesmo os navegadores mais antigos ainda em uso suportam CSS e a prtica de se marcar regras de estilo com sinais de comentrio HTML est em desuso.
Folha de estilo inline

Uma folha de estilo dita inline, quando as regras CSS esto declaradas dentro da tag do elemento HTML com uso do atributo style. Um estilo inline s se aplica a um elemento HTML. Ele perde muitas das vantagens de folhas de estilo pois mistura a apresentao com a marcao. Use este mtodo excepcionalmente, por exemplo: quando quiser aplicar um estilo a uma nica ocorrncia de um elemento. A sintaxe para aplicar estilo inline mostrada a seguir:
<p style="color:#000; margin: 5px;"> Aqui um pargrafo de cor preta e com 5px nas 4 </p> margens.
Folhas de estilo mltiplas

Se alguma propriedade for definida para um mesmo elemento em folhas de estilo diferentes, entrar em ao, o EFEITO CASCATA e prevalecero os valores da folha de estilo mais especfica.
Suponha, uma folha de estilo externa com as seguintes declaraes para o seletor h2:
h2 { color: #fc0; text-align: center; font: italic 9pt Verdana, Sans-serif; }
e, uma folha de estilo interna com as seguintes propriedades para o seletor h2:
h2 { color: #fc0; text-align: center; font: italic 10pt Verdana, Sans-serif; }
Estando ambas as folhas vinculadas ao documento h um conflito no tamanho da fonte para o elemento h2. e Sendo a folha interna declarada depois da externa na seo head do documento, prevalecer a folha interna e a fonte de h2 ter o tamanho igual a 10 pt. Exemplo: Folha de estilo externa geral.css
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 } <html> <head> <title> Bem-vindo! </title> <link rel= "stylesheet" type= "text/css" href= "geral.css" /> </head> <body> <h1> ttulo nvel 1</h1> <h2> Mudanas </h2> <p class="1"> Teste 01 Pargrafo </p> <h2> ttulo de nvel 2</h2> <p class="2"> Teste 02 Pargrafo </p> </body> </html>
Exemplo01.css
Resultado
EXEMPLOS
Exemplo base para as atividades: exemplo_01.css body { background-color: #FF0000; } exemplo_01.html <html> <head> <title>Meu documento</title> <link rel="stylesheet" type="text/css" href=" exemplo_01.css" /> </head> <body> <h1>Minha primeira folha de estilos</h1> </body> </html>
ATIVIDADE_01: crie um documento HTML para inserir o CSS Interno ou incorporado crie o arquivo CSS com nome: abaixo e salve-o com o nome atividade_01.html atividade_01.css. <html> <head> <style type="text/css"> h1 {color: #0000FF; font-size: 30px; font-family: Comic Sans MS} p {text-indent: 1cm; background-color: yellow; font-family: arial} body {background-color:#00000F} </style> <head> <title> Meu primeiro style sheet</title> </head> <body> <h1>Meu primeiro style sheet</h1> <p>Agora terei o controle total!</p> </body> </html>
Estilos incorporados no documento HTML
atividade_01.css
atividade_01.html <html>
h1 {color: #0000FF; font-size: 30px; font-family: Comic Sans MS <head> } <title> Meu primeiro style sheet</title> <link rel="stylesheet" type="text/css" href="atividade_01.css " /> p {text-indent: 1cm; backgroundcolor: yellow; font-family: arial </head> } <body> body {background-color:#00000F } <h1>Meu primeiro style sheet</h1> <p>Agora terei o controle total!</p> </body> </html>
ATIVIDADE_02: Coloque uma imagem de fundo no documento CSS atividade_02.html, para isso salve uma imagem no mesmo diretrio dos seus arquivos e informe o nome do arquivo em url (veja o exemplo abaixo). body { background-image: url("imagem.jpeg"); } atividade_02.css atividade_02.html <html> Faa download de uma imagem para usar como background
h1 {color: #0000FF; font-size: 30px; font-family: Comic Sans MS <head> } <title> Meu primeiro style sheet</title> p {text-indent: 1cm; background- <link rel="stylesheet" type="text/css" href="atividade_02.css " /> color: yellow; font-family: arial </head> } <body> body { background-image: <h1>Meu primeiro style sheet</h1> url("imagem.jpeg"); } <p>Agora terei o controle total!</p> </body> </html>
ATIVIDADE_03: crie um documento HTML para inserir o CSS Interno ou incorporado abaixo e salve-o com o nome atividade_03.html crie o arquivo CSS com nome: atividade_03.css.
<html> <head> <title>Minha primeira pgina CSS</title> <style type="text/css"> h1 {font-size: 30px; font-family: arial} h2 {font-size: 15px; font-family: courier} p {font-size: 8px; font-family: times new roman} </style> </head> <body> <h1>Minha primeira pgina CSS</h1> <h2>Bem vindo minha primeira pgina CSS</h2> <p>Aqui voc ver como funciona CSS</p> </body> </html>
Estilos incorporados no documento HTML
atividade_03.css
atividade_03.html <html> h1 {font-size: 30px; font-family: <head> arial} <title>Minha primeira pgina CSS</title> h2 {font-size: 15px; font-family: <link rel="stylesheet" type="text/css" href="atividade_03.css " /> courier} </head> p {font-size: 8px; font-family: times new roman} <body> <h1>Minha primeira pgina CSS</h1> <h2>Bem vindo minha primeira pgina CSS</h2> <p>Aqui voc ver como funciona CSS</p> </body> </html>
ATIVIDADE_04: crie um documento HTML para inserir o CSS Interno ou incorporado abaixo e salve-o com o nome atividade_04.html crie o arquivo CSS com nome: atividade_04.css. <html> <head> <style type="text/css"> h3{ border-width: medium; border-style: solid; border-color: #00f; } p{ border-width: 6px; border-style: dashed; border-color: #f00; } </style> </head> <body> <h3>Borda mdia, contnua e azul</h3> <p>Borda 6px, tracejada e vermelha</p> </body> </html> atividade_04.css h3{ border-width: medium; border-style: solid; border-color: #00f; } p{ border-width: 6px; border-style: dashed; border-color: #f00; } atividade_04.html <html> <head> <link rel="stylesheet" type="text/css" href="atividade_04.css " /> </head> <body> <h3>Borda mdia, contnua e azul</h3> <p>Borda 6px, tracejada e vermelha</p> </body> </html>
ATIVIDADE_05: crie um documento HTML para inserir o CSS Interno ou incorporado abaixo dos dois exemplos (cdigo 01 e cdigo 02) e salve-o com o nome crie o arquivo CSS com nome: atividade_05.css (obs: use apenas atividade_05.html uma tag form na atividade 05 para juntar os dois cdigos). Codigo01 <!DOCTYPE html> <html> <head> <style type="text/css"> input { background-color: #B0E0E6; font: 12px verdana, arial, helvetica, sans-serif; color:#003399; border:2px solid #000099; } </style> </head> <body> <form name="form1" method="post" action=""> <input type="radio" name="radiobutton" value="radiobutton"> <br><br> <input type="checkbox" name="checkbox" value="checkbox"> <br><br> <input type="text" name="textfield"> <br><br> <input type="submit" name="Submit" value="Enviar"> </form> </body> </html> Codigo 02
<!DOCTYPE html> <html> <head>
Pode ser acrescentado no exemplo anterior
<style type="text/css"> select { background-color: #B0E0E6; font:12px verdana, arial, helvetica, sans-serif; color:#003399; } </style>
</head> <body> <form name="form5" method="post" action=""> <select name="select"> <option value="item_1"> item_1 da lista</option> <option value="item_1"> item_2 da lista</option> <option value="item_1"> item_3 da lista</option> <option value="item_1"> item_4 da lista</option> </select> </form> </body> </html>
atividade_05.css
input { background-color: #B0E0E6; font: 12px verdana, arial, helvetica, sans-serif; color:#003399; border:2px solid #000099; } select { background-color: #B0E0E6; font:12px verdana, arial, helvetica, sans-serif; color:#003399; }
atividade_05.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="atividade_05.css " /> </head> <body> <form name="form1" method="post" action=""> <input type="radio" name="radiobutton" value="radiobutton"> <br><br> <input type="checkbox" name="checkbox" value="checkbox"> <br><br> <input type="text" name="textfield"> <br><br>
<select name="select"> <option value="item_1"> item_1 da lista</option> UNOPAR VIRTUAL (pgina: 10)
<option value="item_1"> item_2 da lista</option> <option value="item_1"> item_3 da lista</option> <option value="item_1"> item_4 da lista</option> </select> </form>
<br><br> <input type="submit" name="Submit" value="Enviar"> </form> </body> </html> ATIVIDADE_06: 1) faa download do template abaixo (http://www.layouts-templates.com/free-website-templates.htm) e descompacte dentro da pasta das atividades. Analise os cdigos e procure alterar o contedo. Obs: veja o regulamento no site para usar os templates.
2) Aps descompactar os arquivos analise o cdigo ndex.htm e localize o bloco de cdigo abaixo: <ul> <li><a href="#"> About Us</a></li> <li><a href="#"> Gallery</a></li> <li><a href="#">News Articles</a></li> <li><a href="#">Make a Donation</a></li> <li><a href="#">Contact Us</a></li> <li> </ul>
Informe um nome para cada arquivo: exemplo: about.htm gallery.htm ...
Sugesto: <ul> <li><a href="about.htm"> About Us</a></li> <li><a href="gallery.htm"> Gallery</a></li> <li><a href="news.htm">News Articles</a></li> <li><a href="make.htm">Make a Donation</a></li> <li><a href="contato.htm">Contact Us</a></li> </ul> 3) Acrescente o item abaixo no menu como primeiro item: <li><a href="index.htm">Home</a></li> Ir ficar assim: <ul> <li><a href="index.htm">Home</a></li> <li><a href="about.htm"> About Us</a></li> <li><a href="gallery.htm"> Gallery</a></li> <li><a href="news.htm">News Articles</a></li> <li><a href="make.htm">Make a Donation</a></li> <li><a href="contato.htm">Contact Us</a></li> </ul> 4) Aps informar os nomes para cada item do menu copie o arquivo ndex.htm para about.htm Aps informar os nomes dos arquivos
Aps informar os nomes dos arquivos
4.1) Abra o arquivo about.html e localize o texto abaixo:
Ser utilizado a mesma estrutura da pgina ndex para criar a pgina about.htm. Obs: para isso ser removido algumas tags div.
Welcome to your Web Site
<div class="block"> <h1> <img src="images/ico_arrow.gif" height="16" title="ico_arrow" /> Welcome to your Web Site</h1> width="16" alt="ico_arrow"
Altere para: About
<div class="block"> <h1> <img src="images/ico_arrow.gif" title="ico_arrow" /> About</h1> height="16" width="16" alt="ico_arrow"
4.2) faa as alteraes abaixo no arquivo about.htm:
Texto alterado no item anterior.
<div id="content_right"> <div class="block"> <h1> <img src="images/ico_arrow.gif" title="ico_arrow" /> About</h1> >>>>> informe um texto aqui <<<<< <div class="clear"></div> </div> </div> <div class="clear"></div> </div>  Deixe somente essa estrutura e informe um texto para essa pagina.
height="16"
width="16"
alt="ico_arrow"
Local: >>>>> informe texto aqui <<<<< item sobre ns encontramos pginas).
um ( o que nas
4.3) repita o procedimento do item 4.2 para criar as outras pginas que informou no menu <li><a href="gallery.htm"> Gallery</a></li> <li><a href="news.htm">News Articles</a></li> <li><a href="make.htm">Make a Donation</a></li> <li><a href="contato.htm">Contact Us</a></li> Analise a estrutura de diviso (div) utilizada para essa rea de informao na pgina ndex e verifique como ir estruturar as outras pginas.
ATIVIDADE 07: Criando um site usando tabelas: Fonte: http://www.scheidt.com.br/ifpr/html/sem12/aula-livraria.pdf
Obs: as figuras esto na pasta da atividade 06. Disponvel em: http://www.scheidt.c om.br/ifpr/html/sem1 2/
1) Layout Crie a tabela contendo o layout abaixo
2) Insira as figuras (veja indicao na imagem abaixo)
3) Agora faa 3 telas: (ndex.html, jobs.html, cadastro.html) 3.1) index.html (contm 6 livros lanamentos)
veja os exemplos abaxo:
3.2) jobs.html (quando clicar no livro A cabea de steve jobs)
Layout tabela de jobs.html
3.3) cadastro.html (contm um formulrio para cadastro de um cliente).
EXEMPLOS
Cdigo 01: cabealho e pargrafo Cdigo
<html> <head> <title>Minha primeira pgina CSS</title> <style type="text/css"> h1 {font-size: 30px; font-family: arial} h2 {font-size: 15px; font-family: courier} p {font-size: 8px; font-family: times new roman} </style> </head> <body> <h1>Minha primeira pgina CSS</h1> <h2>Bem vindo minha primeira pgina CSS</h2> <p>Aqui voc ver como funciona CSS</p> </body> </html> http://www.vazzi.com.br/moodle/pluginfile.php/618/mod_resource/content/1/2%20-%20HTML,XHTML%20E%20CSS.pdf
Resultado
Cdigo 02: color ... A cor do texto (MAUJOR) Cdigo

<html> <head> <style type="text/css"> h1 {color: #FF0000;} h2 {color: #00FF00;} p {color: rgb(0,0,255);} </style> </head> <body> <h1>Este cabealho vermelho</h1> <h2>Este cabealho verde</h2> <p>Este pargrafo azul</p> </body> </html>
Resultado
Cdigo 03: letter-spacing...O espao entre letras (MAUJOR) Cdigo

<html> <head> <style type="text/css"> h2 {letter-spacing: 1.2em;} p {letter-spacing: 0.4cm;} </style> </head> <body> <h2> Este o cabealho</h2> <p> Este o pargrafo</p> </body> </html>
Resultado
Cdigo 04: text-align...Alinhar o texto (MAUJOR) Cdigo <html> <head> <style type="text/css"> h1 {text-align: left;} h2 {text-align: center;} h3 {text-align: right;} p {text-align: justify;} </style> </head>
Resultado
<body> <h1>Este o cabealho 1</h1> <h2>Este o cabealho 2</h2> <h3>Este o cabealho 3</h3> <p>Este o pargrafo cujo texto ...</p> </body> </html>
Cdigo 05: text-decoration...Decorao do texto (MAUJOR) Cdigo

<html> <head> <style type="text/css"> h1 {text-decoration: underline;} h2 {text-decoration: line-through;} h3 {text-decoration: overline;} a {text-decoration: none;} </style> </head> <body> <h1>Texto com sublinhado</h1> <h2>Texto com linha em cima</h2> <h3>Texto com sobrelinhado</h3> <p> <a href="http://www.maujor.com"> Este um link sem sublinhado</a> </p> </body> </html>
Resultado
Cdigo 06: text-transform...Forma das letras do texto Cdigo

<html> <head> <style type="text/css"> h1 {text-transform: none;} h2 {text-transform: capitalize;} h3 {text-transform: uppercase;} h4 {text-transform: lowercase;} </style> </head> <body> <h1>Texto com letras como digitadas</h1> <h2>Texto com primeira letra das palavras, maisculas</h2> <h3>Texto com todas letras, maisculas</h3> <h4>Texto com letras minsculas</h4> </body> </html>
Resultado
Cdigo 07: Cdigo <html> <head> <style type="text/css"> h3{ border-width: medium; border-style: solid; border-color: #00f; } p{ border-width: 6px; border-style: dashed; border-color: #f00; } </style> </head> <body> <h3>Borda mdia, contnua e azul</h3>
Resultado
<p>Borda 6px, tracejada e vermelha</p> </body> </html> Fonte: http://www.maujor.com/tutorial/bordertut.php

Cdigo 08: CSS externo Cdigo - CSS: codigo_08 .css

h1 { background-color: #cc9; border:10px solid #f00; padding: 5px; } h3 { background-color: #fc9; border:20px solid #039; padding: 15px; } p.um { background-color: #ff9; border:5px solid #f0f; padding: 5px; text-align:justify; } p.dois { background-color: #cff; border:2px solid #039; padding: 10px; text-align:justify; }
Cdigo HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Box Model</title> <link rel= "stylesheet" type= "text/css" href= "codigo_08 .css" /> </head> <body> <h1>Folhas de estilo em cascata</h1> <h3>A importncia do Box Model</h3> <p class="um"> Para projetar um layout CSS, seja para uma pgina web ou um site inteiro fundamental que o desenvolvedor entenda com detalhes como as folhas de estilo em cascata tratam os elementos HTML para fins de apresentao em uma mdia do usurio por exemplo: a tela de um monitor). </p> <p class="dois"> Todo elemento HTML uma "caixa" retangular a ser apresentada na tela com as estilizaes determinadas pelas regras CSS. As caixas so empilhadas uma aps a outra e constitudas de margens, bordas, espaamentos e o contedo propriamente dito. </p> </body> </html>
Cdigo 09: cabealho, pargrafo e background Cdigo Resultado

<!DOCTYPE html> <html> <head> <style type="text/css"> h1{ color: sienna; } p { margin-left: 20px; } body { background-image: url("codigo_09_gianeccini.png"); } </style> </head> <body> <h1>titulo 1</h1> <p>texto</p> <h1>titulo 2</h1> <p>texto</p> <h1>titulo 3</h1> <p>texto</p> </body> </html>
Cdigo 10: tabela (borda e alinhamento) Cdigo <!DOCTYPE html> <html> <head> <style> table,td,th { border:1px solid black; } td { text-align:right; } </style> </head> <body> <table>
Resultado
<tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table> </body> </html> http://www.w3schools.com/css/tryit.asp?filename=trycss_table_align Cdigo11: tabela (borda e padding) Cdigo
<!DOCTYPE html> <html> <head> <style> table, td, th { border:1px solid black; } td { padding:15px; } </style> UNOPAR VIRTUAL (pgina: 24)
Resultado
</head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table> </body> </html>
http://www.w3schools.com/css/tryit.asp?filename=trycss_table_padding Cdigo 12: lista no ordenada Cdigo

<html> <head> <style type="text/css"> ul.none { list-style-type: none; } ul.disc { list-style-type: disc; UNOPAR VIRTUAL (pgina: 25)
Resultado
} ul.circle { list-style-type: circle; } ul.square { list-style-type: square; } </style> </head> <body> <ul class="none"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ul> <ul class="disc"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ul> <ul class="circle"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ul> <ul class="square"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ul> </body> </html>
Fonte: http://maujor.com/tutorial/listtut.php Cdigo 13: lista ordenada Cdigo

<html> <head> <style type="text/css"> ol.decimal { list-style-type: decimal; } ol.lroman { list-style-type: lower-
Resultado
roman; } ol.uroman { list-style-type: upperroman; } ol.lalpha { list-style-type: loweralpha; } ol.ualpha { list-style-type: upperalpha; } </style> </head> <body> <ol class="decimal"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ol> <ol class="lroman"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ol> <ol class="uroman"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ol> <ol class="lalpha"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ol> <ol class="ualpha"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ol> </body> </html>
Fonte: http://maujor.com/tutorial/listtut.php
Cdigo 14: formulrio Cdigo

<!DOCTYPE html> <html> <head> <title>O meu primeiro documento HTML</title> </head> <body> <form action="mailto: maria@unopar.br " method="post" enctype="text/plain">
Resultado
Nome <input type="text" name="nome" size="30" maxlength="100"> <br> E-mail <input type="text" name="email" size="25" maxlength="100" value="@"> <br> Cidade <input type="text" name="cidade" size="20" maxlength="60"> <br> Sexo <br> <input type="radio" name="sexo" value="Masculino" checked> Homem <br> <input type="radio" name="sexo" value="Feminino"> Mulher <br> <br> Frequncia das viagens <br> <select name="utilizao"> <option value="1">Vrias vezes por dia <option value="2">Uma vez por dia <option value="3">Vrias vezes por semana <option value="4">vrias vezes por ms </select> <br><br> Comentrios sobre sua satisfao pessoal <br> <textarea cols="30" rows="7" name="comentrios"></textarea> <br> <br> <input type="checkbox" name="receber_info" checked> Desejo receber notificao das novidades nas linhas de nibus. <br> <br> <input type="submit" value="Enviar formulrio"> <br> <br> <input type="Reset" value="Apagar tudo"> </form> </body> </html> http://www.andrecavalcante.com/html_manual.pdf UNOPAR VIRTUAL (pgina: 28)
Cdigo 15: formulrio com CSS (campo INPUT) Cdigo Resultado <!DOCTYPE html> <html> <head> <style type="text/css"> input { background-color: #B0E0E6; font: 12px verdana, arial, helvetica, sansserif; color:#003399; border:2px solid #000099; } </style> </head> <body> <form name="form1" method="post" action=""> <input type="radio" name="radiobutton" value="radiobutton"> <br><br> <input type="checkbox" name="checkbox" value="checkbox"> <br><br> <input type="text" name="textfield"> <br><br> <input type="submit" name="Submit" value="Enviar"> </form> </body> </html> http://maujor.com/tutorial/cssforms.php (adaptado)
Cdigo 16: formulrio com CSS (campo SELECT) Cdigo Resultado

<!DOCTYPE html> <html> <head>
Pode ser acrescentado no exemplo anterior
<style type="text/css"> select { background-color: #B0E0E6; font:12px verdana, arial, helvetica, sans-serif; color:#003399; } </style> </head> <body> <form name="form5" method="post" action=""> <select name="select"> <option value="item_1"> item_1 da lista</option> <option value="item_1"> item_2 da lista</option> <option value="item_1"> item_3 da lista</option> <option value="item_1"> item_4 da lista</option> </select> </form> </body> </html>
http://maujor.com/tutorial/cssforms.php
Cdigo 17: formulrio com CSS Cdigo

<!DOCTYPE html> <html> <head> <style type="text/css"> form.login { background-color: #FFFFCC; width:380px; font: 11px Verdana, sans-serif; color: #003399; border: 2px solid #0000FF; padding-left:10px; } .campos { background-color:#B0E0E6; font: 11px georgia, sans-serif; color:#0033CC;
Resultado
margin-right: 20px; } </style> </head> <body> <form name="login"method="post" action="#" class="login"> <label>Usurio: <input name="user" type="text" tabindex="1" size="15" class="campos"> </label> <br><br> <label>Senha: <input name="password" type="password" tabindex="2" size="15" class="campos"> <input type="submit" name="Submit" value="OK" tabindex="3"> </label> </form> </body> </html> http://maujor.com/tutorial/cssforms.php (adaptado)
Cdigo 18: formulrio com CSS Cdigo

<!DOCTYPE html> <html> <head> <title>Formulário estilizado</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> #todoform { background:#4f4f4f; font:12px arial, verdana, helvetica, sans-serif; border-top:8px solid #cfcfcf; border-left:8px solid #cfcfcf; border-right:8px solid #696969; border-bottom:8px solid #696969; border-collapse:collapse; color:#ff9900; }
Resultado
#todoform th { background:#000000; padding:3px; font: bold 15px arial, verdana, helvetica, sans-serif; border-bottom:1px solid #ff9900; } #todoform td { padding:3px; } #todoform input { background:#b5b5b5; border:1px dashed #ff9900; } #todoform textarea { border:1px dashed #ff9900; background:#b5b5b5; } #todoform input.botao { background:#000000; color:#ffffff; border:2px solid #ffffff; } </style> </head> <body> <form name="nomedoform" action="" method="" > <table id="todoform"> <tr> <th colspan="2">Formulário de contato</th> </tr> <tr> <td><label>Nome</label> </td> <td><input name="nome" type="text" size="33" maxlength="1000"></td> </tr> <tr> <td><label>*e-mail</label> </td> <td><input name="email" type="text" size="33" maxlength="1000"></td>
</tr>
<tr> <td><label>Assunto</label></td> <td><input name="subject" type="text" size="33" maxlength="1000"></td> </tr> <tr> <td><label> *Comentários</label></td> <td><textarea name="comentario" cols="25" rows="7" ></textarea></td> </tr> <tr> <td><input name="submit" type="submit" value="Enviar" class="botao"> </td> <td>* Campos de preenchimento obrigatório</td> </tr> </table> </form> </body> </html>
http://www.maujor.com/tutorial/formContato.php Cdigo 19: estrutura / pgina (usando tabela) Cdigo

<!DOCTYPE html> <html> <body> <table width="500" border="0"> <tr> <td colspan="2" style="backgroundcolor:#FFA500;"> <h1>Main Title of Web Page</h1> </td> </tr> <tr> <td style="backgroundcolor:#FFD700;width:100px;"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript </td> <td style="backgroundcolor:#EEEEEE;height:200px;width:400px;"> Content goes here</td> UNOPAR VIRTUAL (pgina: 33)
Resultado
</tr> <tr> <td colspan="2" style="backgroundcolor:#FFA500;text-align:center;"> Copyright W3Schools.com</td> </tr> </table> </body> </html> Fonte: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_divs
Cdigo 20: estrutura / pgina (usando div) Cdigo

<!DOCTYPE html> <html> <body> <div id="container" style="width:500px"> <div id="header" style="backgroundcolor:#FFA500;"> <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div> <div id="menu" style="backgroundcolor:#FFD700;height:200px;width:100 px;float:left;"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="backgroundcolor:#EEEEEE;height:200px;width:400 px;float:left;"> Content goes here</div> <div id="footer" style="backgroundcolor:#FFA500;clear:both;textalign:center;"> Copyright W3Schools.com</div> </div> </body> </html>
Resultado
Fonte: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_divs
Veja a vdeo aula sobre DIV: http://web.iconectado.com.br/curso-html-e-css-aula-22-como-trabalhar-com-divs/

OUTROS EXEMPLOS
Pasta: outros_exemplos exemplo_01 Exemplo 01: DIV Fonte: http://www.codigopronto.com/artigo/144/Exemplo-Estrutura-de-Site-Tableless
Cdigo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html;charset=ISO-8859-1" /> UNOPAR VIRTUAL (pgina: 35)
<title>Exemplo Estrutura de Site Tableless</title> <style> body { margin:0px; background-color: #cccccc; font-family:"Trebuchet MS", Tahoma, Arial, Verdana; font-size:12px; color:#000; } #todo { position: relative; width: 750px; border: 1px solid black; margin:0px auto; background-color: white; } #topo { position: relative; width: 746px; height: 100px; border: 2px solid red; } #meio { position: relative; width: 750px; min-height: 400px; background-color: #eeeeee; } #rodape { width: 746px; height: 75px; border: 2px solid brown; } #esquerda { float: left; width: 150px; min-height: 400px; border: 2px solid green; } #miolo { float: left; width: 438px; min-height: 400px; border: 2px solid blue; }
#direita { float: right; width: 150px; min-height: 400px; border: 2px solid yellow; } #menu { width: 150px; height: 400px; } .itemMenu { width: 140px; height: 21px; background-color: lightyellow; padding: 3px 0px 0px 10px; border-bottom: 1px solid black; } #logo { float: left; width: 200px; height: 100px; text-align: center; background-color: #cccccc; margin-right: 20px; } .secao_miolo { width: 428px; height: 150px; text-align: center; background-color: #cccccc; margin: 2px 5px 4px 5px; } .secao_direita { width: 140px; height: 100px; text-align: center; background-color: #cccccc; margin: 4px 5px 4px 5px; } #rodape_direita { float: right; width: 200px; text-align: right; margin: 5px 10px 0px 0px } #rodape_direita a{color: #cc6600; text-decoration: none;} #rodape_direita a:hover{color: #cc6600; text-decoration: underline;} UNOPAR VIRTUAL (pgina: 37)
</style> </head> <body> <div id="todo"> <div id="topo"> <div id="logo">Logo</div> Aqui pode ser uma imagem de background e um texto. </div> <div id="meio"> <div id="esquerda"> <div id="menu"> <div class="itemMenu">Principal</div> <div class="itemMenu">Empresa</div> <div class="itemMenu">Produtos</div> <div class="itemMenu">Servios</div> <div class="itemMenu">Contato</div> </div> </div> <div id="miolo"> <div class="secao_miolo">Seo 1</div> <div class="secao_miolo">Seo 2</div> <div class="secao_miolo">Seo 3</div> </div> <div id="direita"> <div class="secao_direita">Seo 1</div> <div class="secao_direita">Seo 2</div> <div class="secao_direita">Seo 3</div> </div> <div style="clear: both;"></div> </div> <div id="rodape"> <div id="rodape_direita"> Av. xxx yyy zzz, No 765<br/> Manaus - AM - CEP: 89000-000<br/> Email: <a href="mailto:seuemail@seudominio.com.br">seuemail@seudominio.com.br</a> </div> </div> </div> </body> </html>
Pasta: outros_exemplos TEMPLATES EXEMPLO 01 Exemplo 02: estruturando um site usando template Fonte: http://www.layouts-templates.com/free-website-templates.htm
Como sugesto: copie o arquivo ndex.htm para criar os outros arquivos <div id="mainnav"> <ul> portifolio.htm, <li><a href="index.htm"><span>Home</span></a></li> services.htm, ... altere <li><a href="portifolio.htm"><span>Portfolio</span></a></li> <li><a href="services.htm"><span>Services</span></a></li> o contedo que est dentro <div id="content"> <li><a href="partners.htm"><span>Partners</span></a></li> da tag Alteraes sugeridas para o menu
<li><a href="contacts.htm"><span>Contacts</span></a></li> colocando o contedo das outras pginas veja o </ul> exemplo logo abaixo. </div>
Alteraes sugeridas para rea de contedo

<div id="content">
Retirei o bloco <div id="banner"> </div>
xxxxxxxx COLOQUE AQUI O TEXTO DO PORTIFLIO xxxxxxxxx </div>
Pasta: outros_exemplos templates exemplo_02_flash Exemplo 03: usando flash Fonte: http://www.layouts-templates.com/free-flash-template.htm
http://www.layouts-templates.com/free-template/website-template/1.htm
Veja o termo de uso para usar os templates
Pasta: outros_exemplos exemplo_02 Exemplo 04: formulrio FONTE: http://servlab.ucpel.tche.br/~aluno-web/programacaoweb/Rafael/ApostilaInfo.pdf
<HTML> <HEAD><title>Exemplo de Formulrio</title></HEAD> <BODY bgcolor=#F0f0f0> <FORM NAME="cadastro1" ACTION="http://www.servidor.com.br/cadastro/recebe_cadastro.php" METHOD="POST"> <B>Text: </B> <INPUT TYPE="TEXT" NAME="nomeUsuario" VALUE=""><BR> <B>CheckBox: </B> <INPUT TYPE="checkbox" NAME="check1" VALUE="1">Opo 1 <INPUT TYPE="checkbox" NAME="check1" VALUE="2">Opo 2 <INPUT TYPE="checkbox" NAME="check1" VALUE="3" checked>Opo 3<BR> <B>Select: </B> <SELECT NAME="select1"> <OPTION>1 Opo <OPTION>2 Opo <OPTION SELECTED>3 Opo <OPTION>4 Opo </SELECT><BR> <B>Radio: </B> <INPUT TYPE="radio" NAME="radio1" VALUE="1">Opo 1 <INPUT TYPE="radio" NAME="radio1" VALUE="2" checked>Opo 2 <INPUT TYPE="radio" NAME="radio1" VALUE="3">Opo 3<BR> <B>TextArea: </B> <TEXTAREA NAME="areatexto" ROWS=5 COLS=50> Deixe aqui sua mensagem UNOPAR VIRTUAL (pgina: 41)
</TEXTAREA><BR> <B>Submit: </B> (Envia o Formulrio): <INPUT TYPE="SUBMIT" VALUE="Enviar"><BR> <B>Reset: </B> (Limpa o Formulrio): <INPUT TYPE="RESET" VALUE="Limpar"> </FORM> </BODY> </HTML>
Pasta: outros_exemplos exemplo_03 versao01 e versao02 Exemplo 05 Fonte: http://www.maujor.com/w3ctuto/firstcss.html#external (descrio completa)
Verso 01: sem posicionar o menu
verso 01 (somente tag <body>)
padding-left: 11em;
body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d }
Verso 02: estrutura completa (menu lado esquerdo)
O texto principal direita e a lista de links esquerda.
ARQUIVO 02: geral.css (crie o arquivo dentro de uma pasta com nome CSS) body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d } ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } ul.navbar li { background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black } ul.navbar a { text-decoration: none } a:link { color: blue } a:visited { color: purple } address { margin-top: 1em; padding-top: 1em; border-top: thin dotted }
ARQUIVO 01: minhapagina.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> UNOPAR VIRTUAL (pgina: 43)
<title>Minha primeira pgina CSS</title> <link rel= "stylesheet" type= "text/css" href= "CSS/geral.css" /> </head> <body>  <ul class="navbar"> <li><a href="index.html">Home page</a> <li><a href="pensamentos.html">Pensamentos</a> <li><a href="cidade.html">Minha cidade</a> <li><a href="links.html">Links</a> </ul>  <h1>Minha primeira pgina CSS</h1> <p>Bem vindos minha pgina estilizada! <p>Minha pgina no contm imagens, mas pelo menos est estilizada. Ela contm links, ainda que eles no levem a lugar algum <p>Deveria haver mais textos aqui porm eu ainda no decidi o que escrever.  <address> Construda em 15 de dezembro de 2004<br> por mim mesmo.</address> </body> </html>
VERSES DO HTML
http://www.oficinadanet.com.br/artigo/580/quais_sao_a_versoes_do_html http://www.connection.ufma.br/Apostila_html_e_xhtml.pdf http://web.fe.up.pt/~ssn/2012/cdi/slides/05-html.pdf Uma breve explicao sobre as verses do HTML O HTML foi desenvolvido originalmente por Tim Bernes-Lee no CERN (Centro Europeu de Fsica de Partculas), e foi popularizado pelo navegador Mosaic, esse desenvolvido pela NCSA (National Center for Supercomputing Applications). Devido ao seu rpido crescimento na Web, foi necessrio criar um padro para que todos os autores e navegadores pudessem reconhecer quaisquer verses do HTML, que so as seguintes: HTML 2.0, HTML 3.2, HTML 4.0 e o HTML 4.01. O HTML 4.0 publicado como uma recomendao do W3C. Foram criadas 3 verses: Strict: elementos em desuso so proibidos Transitional: elementos em desuso aqui so permitidos Frameset: utilizado em documentos que fazem o uso de frames
Introduo ao XHTML Um arquivo XHTML um arquivo HTML, que pode ser lido por qualquer browser. No estamos falando de um novo HTML, com novas tags ou coisa assim. Pelo contrrio, o XHTML foi feito para funcionar mesmo em navegadores antigos. Mas, ao mesmo tempo, Um arquivo XHTML tambm um arquivo XML vlido, que pode ser lido por qualquer interpretador de XML. Meu primeiro conselho, nesse caso, que voc, se no trabalha com XML, deixe preocupao com o XHTML para depois de dominar bem o cdigo semntico e o layout tableless. No porque seja complicado, pelo contrrio, transformar HTML em XHTML bem simples, mas simplesmente porque voc pode obter benefcios muito significativos, e muito mais rapidamente, aprendendo CSS do que XHTML. HTML 2.0 (1995) primeira verso reconhecida ocialmente. HTML 3.2 (1997) primeira verso desenvolvida exclusivamente pelo W3C. HTML 4.01 (1999) introduo de tabelas, suporte de CSS, scripts, etc. Depois da verso 4.01, a W3C apostou no desenvolvimento da linguagem XHTML, uma verso mais formal da linguagem HTML. A adoo desta nova linguagem fui muito limitada e o desenvolvimento do XHTML foi abandonado. HTML5 a verso atualmente em desenvolvimento. Saiba mais em: http://www.connection.ufma.br/Apostila_html_e_xhtml.pdf (pginas: 4 at 7) http://www.connection.ufma.br/Apostila_html_e_xhtml.pdf http://www.tecmedia.com.br/alunos/downloads/xhtml-basico.pdf (xhtml) http://www.w3c.br/pub/Materiais/PublicacoesW3C/guia-xhtml-w3cbr.pdf (XMTML)
O que e para que serve um DOCTYPE?

http://www.leandrogarcia.com/blog/o-que-e-e-para-que-serve-um-doctype/ http://br.answers.yahoo.com/question/index?qid=20090303101951AAn3zgS (resposta selecionada)
O doctype a maneira de voc dizer para qualquer navegador como ele deve agir ao ler seu cdigo HTML. Informa ao navegador qual a verso de html est sendo usada nas pginas e tambm quais so os tipos de media, HTML, XHTML entre outros. O Doctype tambm diz ao orgos de validao qual a verso de Doctype que voc est usando e checa a sintaxe do cdigo referente ao Doctype escolhido. sempre bom incluir o Doctype porque muitos navegadores requerem o Doctype para uma perfeita visualizao do website. A falta dele na pgina permite que cada navegador interprete o cdigo-fonte sua maneira, porque cada navegador tem um padro prprio de renderizar o HTML sem DOCTYPE. O DOCTYPE tem quatro tipos para cada compilao HTML (HTML 4.0, HTML 4,1, XHTML, etc), e deve ser a primeira coisa que um navegador l em seu cdigo HTML, ou seja, na primeira linha (<!doctype>). Mas no considerado uma TAG HTML e sim uma declarao SGML (Standard Generalized Markup Language) Linguagem de Marcao Geral Padro.
Eles so: Strict, Transitional e Frameset. XHTML STRICT <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> O Strict o melhor uma vez que ao dizer para um browser renderizar com ele, voc est dizendo que seguir rigorosamente os padres. Este exemplo especifica a verso estrita do XHTML 1.0. XHTML uma verso avanada do HTML que inclue XML. Com ele, voc est dizendo para o navegador seguir rigorosamente os padres. No admite qualquer item de formatao dentro dos elementos e nem elementos em desuso segundo as recomendaes do W3C. So indicados para uso com folhas de estilo em cascata, com marcao totalmente independente da apresentao. XHTML Transitional <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> Este o Doctype recomendado para o uso geral do desenvolvimento de pginas em HTML, o HTML 4.0. Com este voc diz ao navegador que seu cdigo est em transio, no necessariamente seguir rigorosamente os padres, por isso permite uma maior flexibilidade e indicada para documentos que ainda utilizem elementos em desuso, regras de apresentao embutidas em tags e tambm para documentos destinados a exibio em navegadores sem suporte para CSS. No admite qualquer tipo de marcao para frames. w3c - World Wide Web Consortium dtd - Document Type Definitions EN - English XHTML FRAMESET <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd> Este Doctype declara um documento HTML 4.01 Frameset para se trabalhar com Frames. uma variante do HTML 4.0 Transicional para documentos que usam frames. Permite tudo da declarao Transitional e mais os elementos especficos para frames. Algumas declaraes de Doctype podem causar mau funcionamento em alguns browsers, principalmente a verso strict (estrita) que como o prprio nome j diz deve ser escrita estritamente as regras.
TABELA DE CARACTERES
Ao usar um editor de texto que permita acentuao para criar uma pgina, corremos o risco dos acentos no serem interpretados corretamente por alguns browsers.
http://www.ime.usp.br/~glauber/html/acentos.htm (outros exemplos)

possvel conseguir acentuao, os caracteres especiais j vistos e ainda outros usando o cdigo ASCII precedido de &#. A tabela a seguir mostra os cdigos e sua interpretao.
Tabela ASCII em HTML

MATERIAL DE APOIO
HTML Introduo http://www.scheidt.com.br/ifpr/design/aula01.pdf HTML - Verses do HTML http://web.fe.up.pt/~ssn/2012/cdi/slides/05-html.pdf http://web.iconectado.com.br/curso-html-css-o-que-e-doctype/ (vdeo / DOCTYPE) HTML - Listas http://www.inf.pucrs.br/~lleite/cursohtml2/parte2.prn.pdf http://web.iconectado.com.br/curso-html-e-css-aula-23-como-criar-listas/ (vdeo) TABELA http://www.scheidt.com.br/ifpr/html/sem05/aula04-tabelas.pdf http://www.scheidt.com.br/ifpr/html/sem10/tabela-config.pdf http://www.scheidt.com.br/ifpr/html/sem10/ (faa download da imagem) Construo de um site usando tabelas http://www.scheidt.com.br/ifpr/html/sem12/aula-livraria.pdf DIV http://www.scheidt.com.br/ifpr/design/sem08/div_p1.pdf http://web.iconectado.com.br/curso-html-e-css-aula-22-como-trabalhar-com-divs/ (VDEO) HTML Imagens http://www.scheidt.com.br/ifpr/html/aula04-imagens.pdf FORMULRIOS http://www.scheidt.com.br/ifpr/html/sem05/forms.pdf HTML - Auxiliar em Web Designer http://www.ifpr.edu.br/pronatec/wp-content/uploads/2012/07/auxiliar-web-design-web1.pdf HTML http://www.facunte.com.br/livros/dw7/livro_delphi_web_capitulo_5.pdf TEMPLATES http://www.layouts-templates.com/free-website-templates.htm CSS http://www.maujor.com/index.php http://www.telecom.uff.br/pet/petws/downloads/tutoriais/css/css2k80912.pdf CSS - TABELAS http://www.scheidt.com.br/ifpr/html/css-p3.pdf
CSS http://www.scheidt.com.br/ifpr/html/sem13/css-p1.pdf Exemplo: HTML / CSS http://www.w3schools.com/css/css_examples.asp HTML, XHTML, CSS http://www.vazzi.com.br/moodle/pluginfile.php/618/mod_resource/content/1/2%20%20HTML,XHTML%20E%20CSS.pdf Como escrever um CSS melhor http://algoritmizando.com/desenvolvimento/como-escrever-um-css-melhor/ Apostilas / vdeo aulas http://web.iconectado.com.br/categoria/apostilas/ http://web.iconectado.com.br/curso-de-html-e-css/ (vdeos) XHTML http://www.tecmedia.com.br/alunos/downloads/xhtml-basico.pdf http://www.w3c.br/pub/Materiais/PublicacoesW3C/guia-xhtml-w3cbr.pdf COMPLEMENTAR HTML5 - Curso W3C Escritrio Brasil http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf HTML 5 - Tags Continuadas x Tags Descontinuadas http://www.devmedia.com.br/html-5-tags-continuadas-x-tags-descontinuadas/23618 Dicas de garantia de qualidade para Webmasters http://www.maujor.com/w3ctuto/qatips.html http://www.maujor.com/w3c/tec_css_acess.html JavaScript http://www.scheidt.com.br/ifpr/html/3bi/javascript_p1.pdf Google Web Designer http://www.google.com/webdesigner/ Segurana na internet http://cartilha.cert.br/livro/cartilha-seguranca-internet.pdf Como Funcionam as Aplicaes Web http://www.devmedia.com.br/como-funcionam-as-aplicacoes-web/25888 Infra-estrutura Web: http://www.futurepages.org/wiki/lib/exe/fetch.php?media=quickstart:teoria_web.pdf

Introducao HTML CSS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introducao HTML CSS

Uploaded by

Copyright:

Available Formats

Anlise e Desenvolvimento de Sistemas

Contedo: Introduo ao Desenvolvimento Web Prof.(a): Veronice de Freitas Semestre: 5

TESTANDO HTML / CSS - W3SCHOOLS.COM

Exemplos cdigo HTML / CSS

UNOPAR VIRTUAL (pgina: 1)

Anlise e Desenvolvimento de Sistemas

VINCULANDO FOLHAS DE ESTILO DOCUMENTOS

Folha de estilo externa

Folha de estilo incorporada ou interna

Anlise e Desenvolvimento de Sistemas

Folha de estilo inline

Folhas de estilo mltiplas

Anlise e Desenvolvimento de Sistemas

UNOPAR VIRTUAL (pgina: 4)

Anlise e Desenvolvimento de Sistemas

Estilos incorporados no documento HTML

Anlise e Desenvolvimento de Sistemas

UNOPAR VIRTUAL (pgina: 6)

Anlise e Desenvolvimento de Sistemas

Estilos incorporados no documento HTML

UNOPAR VIRTUAL (pgina: 7)

Anlise e Desenvolvimento de Sistemas

UNOPAR VIRTUAL (pgina: 8)

Anlise e Desenvolvimento de Sistemas

Pode ser acrescentado no exemplo anterior

UNOPAR VIRTUAL (pgina: 9)

Anlise e Desenvolvimento de Sistemas

Anlise e Desenvolvimento de Sistemas

UNOPAR VIRTUAL (pgina: 11)

Anlise e Desenvolvimento de Sistemas

Informe um nome para cada arquivo: exemplo: about.htm gallery.htm ...

Aps informar os nomes dos arquivos

UNOPAR VIRTUAL (pgina: 12)

Anlise e Desenvolvimento de Sistemas

4.1) Abra o arquivo about.html e localize o texto abaixo:

Welcome to your Web Site

Altere para: About

UNOPAR VIRTUAL (pgina: 13)

Anlise e Desenvolvimento de Sistemas

4.2) faa as alteraes abaixo no arquivo about.htm:

Texto alterado no item anterior.

UNOPAR VIRTUAL (pgina: 14)

Anlise e Desenvolvimento de Sistemas

ATIVIDADE 07: Criando um site usando tabelas: Fonte: http://www.scheidt.com.br/ifpr/html/sem12/aula-livraria.pdf

1) Layout Crie a tabela contendo o layout abaixo

2) Insira as figuras (veja indicao na imagem abaixo)

UNOPAR VIRTUAL (pgina: 15)

Anlise e Desenvolvimento de Sistemas

veja os exemplos abaxo:

3.2) jobs.html (quando clicar no livro A cabea de steve jobs)

UNOPAR VIRTUAL (pgina: 16)

Anlise e Desenvolvimento de Sistemas

Layout tabela de jobs.html

3.3) cadastro.html (contm um formulrio para cadastro de um cliente).

UNOPAR VIRTUAL (pgina: 17)

Anlise e Desenvolvimento de Sistemas

Cdigo 02: color ... A cor do texto (MAUJOR) Cdigo

UNOPAR VIRTUAL (pgina: 18)

Anlise e Desenvolvimento de Sistemas

Cdigo 03: letter-spacing...O espao entre letras (MAUJOR) Cdigo

Anlise e Desenvolvimento de Sistemas

Cdigo 05: text-decoration...Decorao do texto (MAUJOR) Cdigo

UNOPAR VIRTUAL (pgina: 20)

Anlise e Desenvolvimento de Sistemas