{"id":373,"date":"2020-06-30T13:41:08","date_gmt":"2020-06-30T16:41:08","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=373"},"modified":"2022-12-09T08:38:54","modified_gmt":"2022-12-09T11:38:54","slug":"atributos-html","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/atributos-html\/","title":{"rendered":"Atributos HTML"},"content":{"rendered":"

Atributos HTML fornecem informa\u00e7\u00f5es adicionais sobre elementos HTML.<\/p>\n

 <\/p>\n

Atributos HTML
\nTodos os elementos HTML podem ter atributos
\nAtributos fornecem informa\u00e7\u00f5es adicionais sobre elementos
\nOs atributos s\u00e3o sempre especificados na tag inicial
\nOs atributos geralmente v\u00eam em pares nome \/ valor, como: name = “value”
\nO atributo href<\/code>
\nA <a><\/code>tag define um hiperlink. O hrefatributo especifica o URL da p\u00e1gina para a qual o link vai:<\/p>\n

Exemplo:<\/p>\n

<a href=\"https:\/\/www.joemaster.com.br\">Visite o site<\/a><\/pre>\n


<\/center>\n
O atributo src<\/strong><\/p>\n
A <img><\/code>tag \u00e9 usada para incorporar uma imagem em uma p\u00e1gina HTML. O src atributo especifica o caminho para a imagem a ser exibida:<\/p>\n
Exemplo<\/strong><\/p>\n
<img src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/tutorial-de-html-introducao-300x133.png\"><\/pre>\n


<\/center>\n
Atributos de largura e altura<\/strong><\/p>\n
A <img><\/code>tag tamb\u00e9m deve conter os atributos widthe height, que especificam a largura e a altura da imagem (em pixels):<\/p>\n
<img src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/tutorial-de-html-introducao-300x133.png\" width=\"500\" height=\"600\"><\/pre>\n


<\/center>\n
 <\/p>\n
O atributo alt<\/strong><\/p>\n
O alt atributo necess\u00e1rio para a <img><\/code> tag especifica um texto alternativo para uma imagem, se a imagem, por algum motivo, n\u00e3o puder ser exibida. Isso pode ocorrer devido \u00e0 conex\u00e3o lenta ou a um erro no src atributo ou se o usu\u00e1rio usa um leitor de tela.<\/p>\n
Exemplo<\/p>\n
<img src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/tutorial-de-html-introducao-300x133.png\" width=\"500\" height=\"600\"  alt=\"Tutorial HTML\"><\/pre>\n


<\/center>\n
Se a imagem n\u00e3o existir, da esse erro<\/p>\n
<img src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/ismg_5efb3bb883044-300x133.png\" width=\"500\" height=\"600\" alt=\"Tutorial HTML\">\r\n<\/pre>\n


<\/center>\n
O atributo Atributo<\/strong><\/p>\n
O styleatributo \u00e9 usado para adicionar estilos a um elemento, como cor, fonte, tamanho e muito mais.<\/p>\n
Exemplo<\/p>\n
<p style=\"color:red;\">This is a red paragraph.<\/p>\r\n\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
O atributo lang
\nVoc\u00ea sempre deve incluir o lang atributo dentro da <html><\/code> tag, para declarar o idioma da p\u00e1gina da Web. Isso serve para ajudar os mecanismos de busca e navegadores.<\/p>\n
O exemplo a seguir especifica ingl\u00eas como idioma:<\/p>\n
<<\/span>!DOCTYPE\u00a0html<\/span>><\/span><\/span><\/code>
\n<<\/span>html\u00a0lang=\"en\"<\/span><\/span>><\/span><\/span><\/code>
\n<<\/span>body><\/span><\/span><\/code>
\n...<\/code>
\n<<\/span>\/body><\/span><\/span><\/code>
\n<<\/span>\/html><\/span><\/span><\/code><\/p>\n
O t\u00edtulo Atributo<\/strong><\/p>\n
O title atributo define algumas informa\u00e7\u00f5es extras sobre um elemento.<\/p>\n
O valor do atributo title ser\u00e1 exibido como uma dica de ferramenta quando voc\u00ea passa o mouse sobre o elemento:<\/p>\n
Exemplo<\/strong>
\n<p title=\"Eu so paragrafo\">This is a paragraph.<\/p><\/code><\/p>\n
Sempre feche os atributos conforme acima<\/p>\n
Um exemplo ruim seria<\/p>\n
<p title=Eu so paragrafo>This is a paragraph.<\/p><\/code><\/p>\n
Pode-se usar aspas simples ou duplas, sendo essa segunda a melhor e mais comum.<\/p>\n
Resumo do cap\u00edtulo<\/strong><\/p>\n
Todos os elementos HTML podem ter atributos
\nO href atributo de <a><\/code>especifica o URL da p\u00e1gina para a qual o link vai
\nO src atributo de <img><\/code>especifica o caminho para a imagem a ser exibida
\nOs widthe height atributos de <img><\/code>fornecer informa\u00e7\u00f5es de tamanho para imagens
\nO alt atributo de <img><\/code>fornece um texto alternativo para uma imagem
\nO styleatributo \u00e9 usado para adicionar estilos a um elemento, como cor, fonte, tamanho e mais
\nO lang\u00a0 atributo da <html><\/code>tag declara o idioma da p\u00e1gina da Web
\nO title atributo define algumas informa\u00e7\u00f5es extras sobre um elemento<\/p>\n
 <\/p>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n