{"id":1945,"date":"2012-08-21T15:42:13","date_gmt":"2012-08-21T18:42:13","guid":{"rendered":"http:\/\/blog.turbosite.com.br\/?p=1945"},"modified":"2012-08-21T15:42:13","modified_gmt":"2012-08-21T18:42:13","slug":"html-parte-5","status":"publish","type":"post","link":"https:\/\/www.turbosite.com.br\/blog\/html-parte-5\/","title":{"rendered":"HTML – PARTE 5"},"content":{"rendered":"

Mais tags HTML<\/p>\n

E a\u00ed? Voc\u00ea construiu algumas p\u00e1ginas como sugerimos na li\u00e7\u00e3o anterior? N\u00e3o? Sim? Bem, a seguir um exemplo:<\/p>\n

\t\n\t<html>\n \n\t  <head>\n\t  <title>Meu website<\/title>\n\t  <\/head>\n \n\t  <body>\n\t  <h1>Um cabe\u00e7alho<\/h1>\n \n\t  <p>texto, texto texto, texto<\/p>\n\t  <h2>Subt\u00edtulo<\/h2>\n\t  <p>texto, texto texto, texto<\/p>\n\t  <\/body>\n \n\t  \n\t<\/html>\n\t<\/code><\/pre>\n
E agora?<\/p>\n
Agora vamos aprender mais sete tags.<\/p>\n
Voc\u00ea j\u00e1 sabe que pode obter negrito com a tag <b\/>, agora saiba que pode obter it\u00e1lico – letras inclinadas – com a tag <i\/>. J\u00e1 percebeu n\u00e3o \u00e9?, “i” vem de “italic”.<\/p>\n
Exemplo 1:<\/p>\n
\t\n\t<i>Este texto deve ser it\u00e1lico.<\/i>\n\t<\/code>\n\t<\/pre>\n
Ser\u00e1 renderizado no navegador assim:<\/p>\n
Este texto deve ser it\u00e1lico.<\/em><\/p>\n
De modo similar voc\u00ea pode fazer seu texto com letra menores usando a tag <small\/<:<\/p>\n
Exemplo 2:<\/p>\n
\t\n \n\t<small>Este texto deve ser com letras em tamanho small.<\/small>\n\t<\/code>\n\t<\/pre>\n
Ser\u00e1 renderizado no navegador assim:<\/p>\n
Este texto deve ser com letras em tamanho small.<\/small><\/p>\n
Posso usar v\u00e1rias tags simultaneamente?<\/p>\n
Sim voc\u00ea pode usar quantas tags queira desde de que as aninhe convenientemente. Veja como fazer isto no exemplo abaixo:<\/p>\n
Exemplo 3:<\/p>\n
Para escrever um texto em negrito e it\u00e1lico fa\u00e7a como mostrado a seguir:<\/p>\n
\t\n\t<b><i>Texto em negrito e it\u00e1lico.<\/i><\/b>\n \n\t<\/code>\n\t<\/pre>\n
E n\u00e3o assim:<\/p>\n
\t\n\t<b><i>Texto em negrito e it\u00e1lico.<\/b><\/i>\n\t<\/code>\n \n\t<\/pre>\n
Observe que no primeiro exemplo a primeira tag de abertura <b> corresponde a \u00faltima tag de fechamento <\/b>, e o aninhamento est\u00e1 certo. Isto evita confus\u00e3o para quem escreve o c\u00f3digo e para o navegador que l\u00ea o c\u00f3digo.<\/p>\n
Mais tags!<\/p>\n
Como foi dito na Li\u00e7\u00e3o 4 existem tags que s\u00e3o abertas e fechadas em \u00fanica tag. Estas tags s\u00e3o comandos isolados, ou seja, n\u00e3o cont\u00e9m nenhum texto dentro delas para poder funcionar. Um exemplo \u00e9 a tag 
 que serve para criar uma quebra de linha:<\/p>\n
Exemplo 4:<\/p>\n
\t\n\tUm texto<br \/> e mais texto em nova linha<\/code>\n\t<\/pre>\n
Ser\u00e1 renderizado no navegador assim:<\/p>\n
Um texto
\ne mais texto em nova linha<\/p>\n
Notar que a tag \u00e9 escrita como se fosse uma mistura de tag de abertura e de fechamento com uma barra “\/” no final: <br \/>. A princ\u00edpio podemos escrever tamb\u00e9m <br><\/br> (sem conte\u00fado), mas para que complicar?<\/p>\n
Outra tag de comando \u00e9 <hr \/> que serve para definir uma linha horizontal (“hr” vem “horizontal rule” – r\u00e9gua horizontal ):<\/p>\n
Exemplo 5:<\/p>\n
\t\n\t<hr \/>\n\t<\/code>\n\t<\/pre>\n
Ser\u00e1 renderizado no navegador assim:<\/p>\n
\n
Exemplo 6:<\/p>\n
\t\n\t<ul>\n\t  <li>Um item de lista<\/li>\n\t  <li>Outro item de lista<\/li>\n \n\t<\/ul>\n\t<\/code>\n\t<\/pre>\n
Ser\u00e1 renderizado no navegador assim:<\/p>\n
    \n
  • Um item de lista<\/li>\n
  • Outro item de lista<\/li>\n<\/ul>\n
    Exemplo 7:<\/p>\n
    \t\n\t<ol>\n\t  <li>Primeiro item da lista<\/li>\n\t  <li>Segundo item da lista<\/li>\n \n\t<\/ol>\n\t<\/code>\n\t<\/pre>\n
    Ser\u00e1 renderizado no navegador assim:<\/p>\n
    1. Primeiro item da lista
    \n2. Segundo item da lista<\/p>\n
    Uau! Isto \u00e9 tudo?<\/p>\n
    Sim, por enquanto isto \u00e9 tudo. Aconselhamos, novamente, a fazer seus pr\u00f3prios experimentos, construindo algumas p\u00e1ginas usando as sete tags ensinadas.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Mais tags HTML
    \nE a\u00ed? Voc\u00ea construiu algumas p\u00e1ginas como sugerimos? N\u00e3o? Sim?<\/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-1945","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\/1945","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=1945"}],"version-history":[{"count":0,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/1945\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media?parent=1945"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/categories?post=1945"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/tags?post=1945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}