Atributos<\/p>\n
Voc\u00ea pode adicionar atributos \u00e0s tags.<\/p>\n
O que \u00e9 atributo?<\/p>\n
Como voc\u00ea deve estar lembrado, uma tag \u00e9 um comando para o navegador (por exemplo,
\n\u00e9 um comando para mudar de linha). Em algumas tags voc\u00ea pode ser mais espec\u00edfico, acresentando na tag, informa\u00e7\u00f5es adicionais de comando. Isto \u00e9 feito atrav\u00e9s dos atributos.<\/p>\n
Exemplo 1:<\/p>\n
\n\t<h2 style=\"background-color:#ff0000;\">Eu adoro HTML<\/h2>\n\t<\/code><\/pre>\nAtributos s\u00e3o escritos dentro da tag, seguidos por um sinal de igual e depois entre aspas s\u00e3o declaradas as informa\u00e7\u00f5es do atributo. As informa\u00e7\u00f5es quando mais de uma, devem ser separadas por ponto e v\u00edrgula, tudo conforme mostrado no exemplo acima. Adiante voltaremos a este assunto.<\/p>\n
Como \u00e9 isto?<\/p>\n
Existem v\u00e1rios atributos. O primeiro que voc\u00ea aprender\u00e1 \u00e9 o atributo style. Com o atributo style voc\u00ea pode adicionar estiliza\u00e7\u00e3o e layout ao seu website. Por exemplo, uma cor de fundo:<\/p>\n
Exemplo 2:<\/p>\n
\n\t<html>\n\n\t <head>\n\t <\/head>\n\n\t <body style=\"background-color:#ff0000;\">\n\t <\/body>\n\n\t<\/html>\n\t<\/code><\/pre>\nO c\u00f3digo acima renderiza uma p\u00e1gina com cor de fundo vermelha – v\u00e1 em frente! experimente voc\u00ea mesmo, construa uma p\u00e1gina vermelha. A seguir explicaremos como funcionam as cores.<\/p>\n
Notar que algumas tags e atributos usam nomes do idioma ingl\u00eas dos E.U.A. \u00c9 muito importante que voc\u00ea use os nomes exatamente como mostrados neste tutorial – se voc\u00ea mudar uma letra que seja, o navegador n\u00e3o ir\u00e1 entender seu c\u00f3digo. \u00c9 importante tamb\u00e9m que voc\u00ea n\u00e3o se esque\u00e7a de fechar as aspas nas informa\u00e7\u00f5es do atributo.<\/p>\n
Como a p\u00e1gina ficou vermelha?<\/p>\n
No exemplo acima n\u00f3s usamos o c\u00f3digo “#ff0000” para fazer a p\u00e1gina na cor vermelha. Eate \u00e9 o c\u00f3digo para a cor vermelha no sistema chamado de n\u00fameros hexadecimal (HEX). Cada cor \u00e9 representada por um n\u00famero hexadecimal. A seguir alguns exemplos:<\/p>\n
Branco: #ffffff
\nPreto: #000000 (zeros)
\nVermelho: #ff0000
\nAzul: #0000ff
\nVerde: #00ff00
\nAmarelo: #ffff00<\/p>\n
Um c\u00f3digo hexadecimal para cores \u00e9 formado por um sinal # seguido de seis d\u00edgitos e\/ou letras. Existe mais de 1000 c\u00f3digos HEX e n\u00e3o \u00e9 f\u00e1cil decorar o c\u00f3digo para todas as cores. Para facilitar as coisas n\u00f3s desenvolvemos uma carta com as 216 cores mais usadas na web: Carta das 216 cores seguras para a Web.<\/p>\n
Para algumas cores, voc\u00ea pode usar o nome das cores em ingl\u00eas (white, black, red, blue, green e yellow – branco, preto, vermelho, azul, verde, amarelo).<\/p>\n
Exemplo 3:<\/p>\n
\n\t<body style=\"background-color: red;\">\n\t<\/code><\/pre>\nChega de cores. Voltemos aos atributos.<\/p>\n
Quais tags podem usar atributos?<\/p>\n
Atributos podem ser aplicados \u00e0 maioria das tags.<\/p>\n
Voc\u00ea normalmente usar\u00e1 atributos com mais freq\u00fc\u00eancia em algumas tags, tais como a tag body e raramente usar\u00e1 em outras, como por exemplo, a tag br que \u00e9 um comando para pular de linha e n\u00e3o precisa de nenhuma informa\u00e7\u00e3o adicional.<\/p>\n
Assim como existem muitas tags, tamb\u00e9m existem muitos atributos. Alguns atributos s\u00e3o empregados em tags espec\u00edficas enquanto outros servem para v\u00e1rias tags. E vice-versa: algumas tags podem conter somente um tipo de atributo, enquanto outras podem conter v\u00e1rios tipos.<\/p>\n
Isto pode parecer um pouco confuso, mas \u00e0 medida que voc\u00ea for praticando vai constatar que tudo \u00e9 f\u00e1cil e l\u00f3gico, bem como vai verificar as in\u00fameras possibilidades que os atributos oferecem.<\/p>\n
Este tutorial apresentou a voc\u00ea, os atributos.<\/p>\n
Ent\u00e3o, quais s\u00e3o as partes que constituem uma tag?<\/p>\n
A constitui\u00e7\u00e3o b\u00e1sica de uma tag \u00e9 denominada elemento (por exemplo p em <p>) Assim, uma tag \u00e9 constituida de um elemento (por exemplo <p>), ou por um elemento e um ou mais atributos (por exemplo <p style=”background-color:#ff0000;”>). Simples! <\/p>\n","protected":false},"excerpt":{"rendered":"
Atributos
\nVoc\u00ea pode adicionar atributos \u00e0s tags.
\nO que \u00e9 atributo?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[119,140,331,583,622,660],"class_list":["post-1953","post","type-post","status-publish","format-standard","hentry","category-tutoriais","tag-como-fazer-sites","tag-construcao-de-sites","tag-html","tag-site","tag-tutorial","tag-website"],"_links":{"self":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/1953","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/comments?post=1953"}],"version-history":[{"count":0,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/1953\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media?parent=1953"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/categories?post=1953"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/tags?post=1953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}