HTML & CSS. uma introdução

Tamanho: px

Começar a partir da página:

Download "HTML & CSS. uma introdução"

Iasmin Rijo Salazar
9 Há anos
Visualizações:

1 HTML & CSS uma introdução

2 HTML hypertext markup language CSS cascading style sheet linguagem de marcação que dá ao conteúdo estrutura e significado linguagem de estilo que dá ao conteúdo estilo e aparência

3 MÉTODO DE TRABALHO Visualização (BROWSER) Edição (NOTEPAD++) Upload (FILEZILLA)

4 ESTRUTURA do DOCUMENTO <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>hello World</title> </head> <body> <h1>isto é um título</h1> <a href= >nba</a> </body> </html>

5 ELEMENTOS (tags) & ATRIBUTOS Elementos elementos são componentes do HTML que definem certos objetos h1... h6 - define um título <h1> isto é um título</h1> início da tag conteúdo fim da tag

6 ELEMENTOS (tags) & ATRIBUTOS Atributos atributos providenciam informação adicional ao elemento a - define uma hiperligação <a href= > nba </a> início da tag atributo conteúdo fim da tag

7 ELEMENTOS (tags) & ATRIBUTOS p - define um parágrafo conteúdo início da tag <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo </p> fim da tag

8 ELEMENTOS (tags) & ATRIBUTOS strong - releva a importância do texto colocando-o em Negrito início da tag <p> não esquecer de <strong> desligar o fogão </strong> </p> conteúdo fim da tag

9 ELEMENTOS (tags) & ATRIBUTOS em - indica ênfase (itálico) início da tag <p> chama o médico <em> rápido </em> </p> conteúdo fim da tag

10 ELEMENTOS (tags) & ATRIBUTOS ul - define uma lista não ordenada conteúdo início da tag <ul> <li> Lorem ipsum dolor sit </li> <li> Lenim ad minim veniam </li> </ul> fim da tag

11 ELEMENTOS (tags) & ATRIBUTOS ol - define uma lista ordenada conteúdo início da tag <ol> <li> Lorem ipsum dolor sit </li> <li> Lenim ad minim veniam </li> </ol> fim da tag

12 ELEMENTOS (tags) & ATRIBUTOS img- cria um espaço para uma imagem início da tag atributos <img src= photo.jpg alt= texto width= 125 height= 450 title= outro texto >

13 ELEMENTOS (tags) & ATRIBUTOS hr - representa uma quebra temática (p.e. uma mudança da cena de uma história) início e fim da tag <hr>

14 ELEMENTOS (tags) & ATRIBUTOS br - representa uma quebra de linha início e fim da tag <br>

15 ELEMENTOS (tags) & ATRIBUTOS table - representa dados em duas dimensões atributo início da tag <table border=1 > <tr> <td> Lorem ipsum </td> <td> Lorem ipsum </td> fim da tag </tr> </table> conteúdo

16 podes olhar para os documentos em HTML como ÁRVORES

17 DOM - DOCUMENT OBJECT MODEL separação dos elementos de uma página numa hierarquia de objetos com propriedades e valores os objetos encontram-se no window object (janela do browser) html head body meta meta... title a p h1 ol li li li li a

18 CSS cascade style sheet linguagem de estilo que dá ao conteúdo estilo e aparência

19 CSS é somente uma maneira de separar estilo font color border alignment conteúdo texto imagens vídeos endereços as regras de CSS dizem ao browser como interpretar elementos especificos numa página HTML

20 SELECTOR o selector indica qual o elemento numa página de HTML que será afetado pela regra selector p { color : red; }

21 DECLARATION BLOCK a declaração indica ao browser como interpretar o elemento selecionado h2 { color : #fa001a; margin: 1em; } declaration block

22 DECLARATION a declaração indica ao browser como interpretar o elemento selecionado h2 { color : #fa001a; declaration margin: 1em; }

23 PROPERTY a propriedade refere-se ao aspeto do elemento a formatar h2 { color : #fa001a; background-color: white; } property

24 VALUE o valor refere-se ao estilo exato a atribuir à propridade h2 { color : #fa001a; margin-top:.5em; } value

25 ELEMENTOS, ID, & CLASS SELECTORS o seletor é um ELEMENTO (o elemento é referenciado pelo nome) h1 { font-size: 16px; }

26 ELEMENTOS, ID, & CLASS SELECTORS o seletor é um ID (o elemento é referenciado pelo seu ID, os ID s só são utilizados uma vez por página) #logo { background-color: rgb(234, 453,12); }

27 ELEMENTOS, ID & CLASS SELECTORS o seletor é uma CLASSE (o elemento é referenciado pela sua CLASS. as classes podem aparecer várias vezes por página).column { width: 160px; }

28 colocando CSS no site INLINE o CSS é associado ao elemento específico <hr style="color:blue;"> <p style="margin:20px">this is a paragraph.</p>

29 colocando CSS no site INTERNAL o CSS encontra-se no início da página <head> <style type="text/css"> hr { color: blue;} p { margin: 20px;} </style> </head>

30 colocando CSS no site EXTERNAL o CSS está num ficheiro à parte <head> <link rel="stylesheet" href="file.css"> </head>

31 elementos INLINE elementos inline não iniciam numa nova linha e seguem o fluxo normal do documento span a strong em img br

32 elementos BLOCK elementos block iniciam numa nova linha e ocupam toda a largura do viewport disponível header footer article section aside div h1...h6 p table form ul, ol, li dl, dt, dd

Documentos relacionados

HTML BÁSICO E TEMPLATE VIEW. Gabrielle Amorim Porto

HTML BÁSICO E TEMPLATE VIEW. Gabrielle Amorim Porto HTML BÁSICO E TEMPLATE VIEW Gabrielle Amorim Porto HTML BÁSICO E TEMPLATE VIEW Hypertext Markup Language Linguagem de marcação de hipertexto; Descreve a estrutura das páginas Web utilizando tags. HTML