Carregar apresentação
A apresentação está carregando. Por favor, espere
1
HTML e CSS – Básico, módulo 1
Davi da Rocha ”Phius”, 24, desenvolvedor web
2
HTML e CSS – Básico, módulo 1
Módulo 1 = HTML
3
HTML – O que é O que diabos é e para que cargas d'agua funciona?
HTML é um documento hipertexto
4
HTML – O que é O que diabos é e para que cargas d'agua funciona?
HTML é um documento hipertexto Hiperlinks ou links
5
HTML – O que é O que diabos é e para que cargas d'agua funciona?
HTML é um documento hipertexto Hiperlinks ou links Um site é uma coleção de páginas hipertexto
6
HTML – O que é O que diabos é e para que cargas d'agua funciona?
HTML é um documento hipertexto Hiperlinks ou links Um site é uma coleção de páginas hipertexto É feito de um arquivo de texto marcado com etiquetas (tags) HTML
7
HTML – O que é <html> <p>Parágrafo 1</p>
<p>Faltou uma idéia melhor...</p> </html>
8
HTML – Ferramentas Editor de texto Navegador web
9
HTML – Ferramentas Editor de texto Navegador web
Bloco de notas, gedit, TextMate, Komodo Edit, Dreamweaver, vim etc Navegador web
10
HTML – Ferramentas Editor de texto Navegador web
Bloco de notas, gedit, TextMate, Komodo Edit, Dreamweaver, vim etc Navegador web Google Chrome, Mozilla Firefox, Safari etc mas não o Internet Explorer
11
HTML – Sintaxe Uma tag (são exemplos, não são tags reais)
<tag></tag>
12
HTML – Sintaxe Uma tag (são exemplos, não são tags reais)
<tag></tag> Tag com parâmetro e valor <tag parametro=”valor”></tag>
13
HTML – Sintaxe Uma tag (são exemplos, não são tags reais)
<tag></tag> Tag com parâmetro e valor <tag parametro=”valor”></tag>
14
HTML – Sintaxe Uma tag Tag com parâmetro e valor
<tag parametro=”valor”></tag> Tag envolvendo algum conteúdo <tag>O conteúdo está aqui</tag>
15
HTML – Sintaxe Uma tag Tag com parâmetro e valor
<tag parametro=”valor”></tag> Tag envolvendo algum conteúdo <tag>O conteúdo está aqui</tag> Tag sem fechamento <br />
16
Estrutura base O esqueleto
17
HTML – Tags básicas Tag de cabeçalho – h1 – h5
<h1>Curso de HTML da Ung</h1>
18
HTML – Tags básicas Tag de texto (parágrafo) – p
<p>Texto lalala</p>
19
HTML – Tags básicas Listas não-ordenadas <ul> </ul>
<li>Motor</li> <li>Pneus</li> <li>Carroceria</li> <li>Portas</li> </ul>
20
HTML – Tags básicas Listas ordenadas <ol> </ol>
<li>Valentino Rossi</li> <li>Jorge Lorenzo</li> <li>Casey Stoner</li> <li>Marco Simoncelli</li> </ol>
21
HTML – Tags básicas Formatação de texto básica
Negrito – <strong>Texto aqui</strong> Itálico – <em>Texto aqui</em> Riscado – <del>Texto aqui</del> Código – <code>Texto aqui</code>
22
HTML – Tags básicas Formatação de valor semântico
Bloco de citação (fora do p) – <blockquote>Texto aqui</blockquote> Citação em linha (dentro do p) - <cite>Texto aqui</cite> Endereço - <address>Endereço</address>
23
HTML – Tags básicas Divisão - <div>Conteúdo</div>
24
HTML – Tags básicas Tabelas (obs. A tabela da foto está com borda para melhor visualização) <table> <tr> <th>Campeonato</th> <th>Vencedor</th> </tr> <td>MotoGP 2010</td> <td>Jorge Lorenzo</td> </table>
25
HTML – Tags básicas Mesclar células na tabela (parâmetro colspan)
<table> <tr> <td colspan=”2”>Curso HTML + CSS</td> </tr> <td>22/01/11</td> <td>Módulo 1</td> <td>29/01/11</td> <td>Módulo 2</td> <td>05/02/11</td> <td>Módulo 3</td> </table>
26
HTML – Tags básicas Mesclar linhas na tabela (parâmetro rowspan)
<table> <tr> <td rowspan=”3”>Curso HTML + CSS</td> <td>22/01/11</td> <td>Módulo 1</td> </tr> <td>29/01/11</td> <td>Módulo 2</td> <td>05/02/11</td> <td>Módulo 3</td> </table>
27
HTML – Links Criando links – a tag ”a”
<a href=”arquivo.html”>Link</a> <a href=”
28
HTML - Exercício Criem uma página falando um pouco sobre este curso, com a seguinte estrutura: Título – Curso de férias da UNG Sub-título - ”Como fiquei sabendo” Texto - Diga como ficou sabendo deste curso Sub-título – Pontos positivos Lista não-ordenada dos pontos positivos da iniciativa da UNG com estes cursos Sub-título – Pontos negativos Lista não-ordenada dos pontos negativos
29
HTML – é... mais exercício Faça uma página com um título ”Curso de férias da UNG” e uma lista não-ordenada contendo 3 links: Como fiquei sabendo Pontos positivos Pontos negativos Cada link deve levar para uma página com o mesmo título, um sub-título igual ao seu link, um texto sobre o assunto da página e um link para voltar ao menu.
30
CSS CSS – O que é e para que serve?
31
CSS CSS – O que é e para que serve?
Folha de estilos em cascata – É um documento de texto com a formatação visual de um HTML
32
CSS CSS – O que é e para que serve?
Folha de estilos em cascata – É um documento de texto com a formatação visual de um HTML HTML é conteúdo, CSS é formatação visual
33
CSS CSS – O que é e para que serve?
Folha de estilos em cascata – É um documento de texto com a formatação visual de um HTML HTML é conteúdo, CSS é formatação visual Facilita o trabalho
34
CSS CSS – O que é e para que serve?
Folha de estilos em cascata – É um documento de texto com a formatação visual de um HTML HTML é conteúdo, CSS é formatação visual Facilita o trabalho
35
Por hoje é só! Estude Não se esqueça de estudar.
Mande dúvidas por , sem dó! Acesse o MeuTutu.com.br! :D Davi da Rocha ”Phius” ( e msn) Hoje a noite esta apresentação e mais material estarão em
Apresentações semelhantes
