Professional Documents
Culture Documents
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
http://www.w3schools.com/css/css_examples.asp http://www.w3schools.com/css/tryit.asp?filename=trycss_background-color_body
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
<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 <!-- (abre comentrio) --> (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.
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>
UNOPAR VIRTUAL (pgina: 5)
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>
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>
<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>
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
Ser utilizado a mesma estrutura da pgina ndex para criar a pgina about.htm. Obs: para isso ser removido algumas tags div.
<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"
<div class="block"> <h1> <img src="images/ico_arrow.gif" title="ico_arrow" /> About</h1> height="16" width="16" alt="ico_arrow"
<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> <!-- CONTENT END --> 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.
Obs: as figuras esto na pasta da atividade 06. Disponvel em: http://www.scheidt.c om.br/ifpr/html/sem1 2/
3) Agora faa 3 telas: (ndex.html, jobs.html, cadastro.html) 3.1) index.html (contm 6 livros lanamentos)
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
Resultado
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>
UNOPAR VIRTUAL (pgina: 19)
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>
Resultado
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
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 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>
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>
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
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)
<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
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)
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>
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
Resultado
Fonte: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_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>
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
<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)
padding-left: 11em;
body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d }
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 }
<title>Minha primeira pgina CSS</title> <link rel= "stylesheet" type= "text/css" href= "CSS/geral.css" /> </head> <body> <!-- Menu de navegacao do site --> <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> <!-- Conteudo --> <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. <!-- Date e assine sua pgina, isto educado! --> <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
UNOPAR VIRTUAL (pgina: 44)
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 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.
UNOPAR VIRTUAL (pgina: 45)
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.
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