HTML + CSS

HTML + CSS Uma introdução Dep. Eng. Informá/ca -‐ FCTUC Universidade de Verão Julho de 2010 Pedro Gaspar TwiGer: @pedrogaspar Web: hGp://pedrogaspar.com/

O QUE SÃO? HTML CSS Conteúdo Apresentação

HTML CSS Conteúdo Propriedades visuais das estruturas deﬁnidas Estrutura em HTML Título Título Notícia 1 Menu Menu Notícia 2 Notícia 1 Notícia 3 Notícia 2 3

COMO FUNCIONA? Pedidos e Respostas

COMO FUNCIONA? Pedidos e Respostas ml .ht in dex T/ GE

HTML - SINTAXE <p>...</p> <img src=”...” />

HTML - TAGS COMUNS Parágrafo <p>...</p> Cabeçalhos <h1>...</h1>, <h2>...</h2>, etc. Lista <ul> <li>...</li> </ul> Imagem <img src=”...“ /> Link <a href=”...“>...</a> Bloco <div>...</div>

HTML - PARÁGRAFO <p> Texto... Fim. </p>

HTML - PARÁGRAFO <p> Texto... Fim. </p> <br />

HTML - TEXTO <p> <i>Itálico</i> <br /> <small>Pequeno</small> <br /> <b>Negrito</b> <br /> <i><b>Composto</b></i> </p>

HTML - TEXTO <pre> <i>Itálico</i> <small>Pequeno</small> <b>Negrito</b> <i><b>Composto</b></i> Um dois três. </pre>

HTML - CABEÇALHOS <h1>O meu Livro</h1> <h2>Capítulo 1</h2> <p>...</p> <h2>Capítulo 2</h2> <h3>Capítulo 2.1</h3> <p>...</p> <h3>Capítulo 2.2</h3> <p>...</p> ...

HTML - LISTAS <h3>A Fazer</h3> <ul> <li>Limpar a casa</li> <li>Lavar o carro</li> <li>Estudar</li> <li>Ir de Férias!</li> <li>etc...</li> </ul>

HTML - LISTAS <h3>A Fazer</h3> <ol> <li>Limpar a casa</li> <li>Lavar o carro</li> <li>Estudar</li> <li>Ir de Férias!</li> <li>etc...</li> </ol>

HTML - IMAGENS <img src=”pessoa.png“ /> O atributo src indica o caminho para a imagem a mostrar. Pode mesmo ser um URL.

HTML - LINKS <a href=”hSp://google.pt“> Link para o Google </a> O atributo href indica o URL para onde o link aponta. Pode ser um caminho local.

HTML - BLOCOS <div> <p>Texto...</p> </div> O div pode conter qualquer elemento dentro de sí. Principalmente usado através do CSS.

HTML - TABELAS <table border=”1”> <th>Número</th> <th>Nome</th> <tr> <td>1</td> <td>Luís</td> </tr> th - Table Header <tr> <td>2</td> tr - Table Row <td>Armando</td> </tr> td - Table Data </table>

HTML - FORMS <form> ... </form> <input type=”text” /> <input type=”password” /> <input type=”radio” /> <input type=”checkbox” /> <input type=”submit” /> <textarea> </textarea> <label>Nome:</label>

HTML - ESTRUTURA Início do documento <html> Elemento head <head> ... Elemento body </head> <body> ... Tag externa que contém </body> todo o HTML </html>

HTML - ESTRUTURA Início do documento <html> Elemento head <head> ... Elemento body </head> Contém tags que dão <body> valor semântico à ... página e que fazem </body> referência a ﬁcheiros </html> com código CSS

HTML - ESTRUTURA Início do documento <html> Elemento head <head> ... Elemento body </head> <body> ... Tags de HTML normais </body> </html>

CSS - UTILIZAÇÃO Código num ﬁcheiro externo Código no próprio ﬁcheiro HTML Código no atributo style de cada tag

CSS - UTILIZAÇÃO Na tag head ﬁcheiro HTML <head> <link rel=”stylesheet” type=”text/css” href=”style.css”/> </head>

CSS - SINTAXE h1 { color: gray; font-‐size: 12px; } Selector

CSS - SINTAXE h1 { color: gray; font-‐size: 12px; } Propriedade

CSS - SINTAXE h1 { color: gray; font-‐size: 12px; } Valor

CSS - SINTAXE h1 { color: gray; font-‐size: 12px; } p { font-‐family: Arial; }

CSS - SELECTORS <div>...</div> HTML <div>...</div> <p>...</p> CSS div { ... }

CSS - SELECTORS <div class=”content”>...</div> HTML <div>...</div> <p class=”content”>...</p> CSS .content { ... }

CSS - SELECTORS <div class=”content”>...</div> HTML <div>...</div> <p class=”content”>...</p> CSS div.content { ... }

CSS - SELECTORS <div id=”content”>...</div> HTML <div>...</div> <p class=”content”>...</p> CSS #content { ... }

EXEMPLO

EX. - BACKGROUND body { background-‐color: #005e1a; background-‐image: url(‘bg.jpg’); CSS background-‐repeat: repeat-‐x; font-‐family: Arial; }

EX. - CONTAINER <div id=”site-‐ftle”> <h1>Um Blog</h1> </div> HTML <div id=”container”> ... </div>

EX. - CONTAINER #site-‐/tle { text-‐align: center; } #site-‐/tle h1 { CSS color: white; font-‐family: Arial; }

EX. - CONTAINER #container { width: 700px; background-‐color: white; CSS margin: auto; margin-‐boSom: 20px; }

EX. - MENU <div id=”menu”> <ul> <li><a href=”sobre.html”>Sobre</a></li> HTML <li><a href=”fotos.html”>Fotos</a></li> <li><a href=”hSp://google.com”>Google</a></li> </ul> </div> ... <div class=”clear”></div>

EX. - MENU #menu { width: 150px; ﬂoat: lek; background-‐color: #DDD; border-‐boSom: 1px solid gray; CSS border-‐right: 1px solid gray; padding: 1px; } #menu li { list-‐style: circle; } .clear { clear: both; }

EX. - MENU a, a:visited, a:link { text-‐decorafon: none; color: #333; } CSS a:hover { color: #777; font-‐weight: bold; }

EX. - POSTS <div class=”post”> HTML <p>Texto...</p> ... </div>

EX. - POSTS <div class=”post”> HTML <p>Texto...</p> ... </div> .post { margin: 20px 0px 5px 24px; ﬂoat: right; .post p { CSS background-‐color: #EEE; margin: 0px; color: #555; } width: 480px; padding: 10px; }

Photo by Al_HikesAZ

EXPERIMENTEM hGp://nei.dei.uc.pt/workshop-‐html-‐css/ hSp://w3schools.com/ hSp://colourlovers.com/ hSp://www.famfamfam.com/lab/icons/ Google: “background gradient”

http://blog.pedrogaspar.com	87
http://serestudanteonline.blogspot.pt	14
http://serestudanteonline.blogspot.com	2
http://webcache.googleusercontent.com	1
http://feeds.feedburner.com	1

HTML + CSS

by Pedro Gaspar on Jul 21, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 105

Statistics

HTML + CSS — Presentation Transcript