HTML & CSS uma introdução
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
MÉTODO DE TRABALHO Visualização (BROWSER) Edição (NOTEPAD++) Upload (FILEZILLA)
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= http://www.nba.com >nba</a> </body> </html>
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
ELEMENTOS (tags) & ATRIBUTOS Atributos atributos providenciam informação adicional ao elemento a - define uma hiperligação <a href= http://www.nba.com > nba </a> início da tag atributo conteúdo fim da tag
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
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
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
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
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
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 >
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>
ELEMENTOS (tags) & ATRIBUTOS br - representa uma quebra de linha início e fim da tag <br>
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
podes olhar para os documentos em HTML como ÁRVORES
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
CSS cascade style sheet linguagem de estilo que dá ao conteúdo estilo e aparência
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
SELECTOR o selector indica qual o elemento numa página de HTML que será afetado pela regra selector p { color : red; }
DECLARATION BLOCK a declaração indica ao browser como interpretar o elemento selecionado h2 { color : #fa001a; margin: 1em; } declaration block
DECLARATION a declaração indica ao browser como interpretar o elemento selecionado h2 { color : #fa001a; declaration margin: 1em; }
PROPERTY a propriedade refere-se ao aspeto do elemento a formatar h2 { color : #fa001a; background-color: white; } property
VALUE o valor refere-se ao estilo exato a atribuir à propridade h2 { color : #fa001a; margin-top:.5em; } value
ELEMENTOS, ID, & CLASS SELECTORS o seletor é um ELEMENTO (o elemento é referenciado pelo nome) h1 { font-size: 16px; }
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); }
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; }
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>
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>
colocando CSS no site EXTERNAL o CSS está num ficheiro à parte <head> <link rel="stylesheet" href="file.css"> </head>
elementos INLINE elementos inline não iniciam numa nova linha e seguem o fluxo normal do documento span a strong em img br
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