{"id":428,"date":"2020-07-01T13:40:34","date_gmt":"2020-07-01T16:40:34","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=428"},"modified":"2022-12-09T08:38:53","modified_gmt":"2022-12-09T11:38:53","slug":"html-o-elemento-principal","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/html-o-elemento-principal\/","title":{"rendered":"HTML – O elemento principal"},"content":{"rendered":"

A HTML <head><\/code>elemento \u00e9 um recipiente para os seguintes elementos: <title><\/code>, <style>,<\/code> <meta><\/code>, <link><\/code>, <script><\/code>, e <base><\/code>.<\/p>\n

 <\/p>\n

O elemento HTML <head><\/code>
\nO <head><\/code>elemento \u00e9 um cont\u00eainer para metadados (dados sobre dados) e \u00e9 colocado entre a <html><\/code>marca e a <body><\/code>marca.<\/p>\n

Metadados HTML s\u00e3o dados sobre o documento HTML. Os metadados n\u00e3o s\u00e3o exibidos.<\/p>\n

Os metadados geralmente definem o t\u00edtulo do documento, o conjunto de caracteres, os estilos, os scripts e outras metainforma\u00e7\u00f5es.<\/p>\n

 <\/p>\n

O elemento HTML <title><\/code><\/strong><\/p>\n

<\/code><\/strong>
\nO <title><\/code>elemento define o t\u00edtulo do documento. O t\u00edtulo deve ser somente texto e \u00e9 mostrado na barra de t\u00edtulo do navegador ou na guia da p\u00e1gina.<\/p>\n

A tag <title><\/code> \u00e9 necess\u00e1ria nos documentos HTML!<\/p>\n

O conte\u00fado do t\u00edtulo da p\u00e1gina \u00e9 muito importante para a otimiza\u00e7\u00e3o de mecanismos de busca (SEO)! O t\u00edtulo da p\u00e1gina \u00e9 usado pelos algoritmos do mecanismo de pesquisa para decidir a ordem ao listar p\u00e1ginas nos resultados da pesquisa.<\/p>\n

O <title><\/code>elemento:<\/p>\n

define um t\u00edtulo na barra de ferramentas do navegador
\nfornece um t\u00edtulo para a p\u00e1gina quando ela \u00e9 adicionada aos favoritos
\nexibe um t\u00edtulo para a p\u00e1gina nos resultados do mecanismo de pesquisa
\nPortanto, tente tornar o t\u00edtulo o mais preciso e significativo poss\u00edvel!<\/p>\n

Um documento HTML simples:<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <title>A Meaningful Page Title<\/title>\r\n<\/head>\r\n<body>\r\n\r\nThe content of the document......\r\n\r\n<\/body>\r\n<\/html><\/pre>\n


<\/center>\n
O elemento HTML <style><\/code>
\nO <style><\/code>elemento \u00e9 usado para definir informa\u00e7\u00f5es de estilo para uma \u00fanica p\u00e1gina HTML:<\/p>\n
 <\/p>\n
Exemplo<\/strong>
\n<style><\/code>
\nbody {background-color: powderblue;}<\/code>
\nh1 {color: red;}<\/code>
\np {color: blue;}<\/code>
\n<\/style><\/code><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <title>Page Title<\/title>\r\n  <style>\r\n    body {background-color: powderblue;}\r\n    h1 {color: red;}\r\n    p {color: blue;}\r\n  <\/style>\r\n<\/head>  \r\n<body>\r\n\r\n<h1>This is a Heading<\/h1>\r\n<p>This is a paragraph.<\/p>\r\n  \r\n<\/body>\r\n<\/htm<\/pre>\n


<\/center>\n
 <\/p>\n
 <\/p>\n
O elemento HTML <link><\/code><\/p>\n
<\/code>
\nO <link><\/code>elemento define o relacionamento entre o documento atual e um recurso externo.<\/p>\n
A <link><\/code> tag \u00e9 mais frequentemente usada para vincular a folhas de estilo externas:<\/p>\n
Exemplo<\/strong>
\n<link rel=\"stylesheet\" href=\"mystyle.css\"><\/code><\/p>\n
 <\/p>\n
O elemento HTML <meta><\/strong><\/p>\n
O <meta><\/code>elemento geralmente \u00e9 usado para especificar o conjunto de caracteres, descri\u00e7\u00e3o da p\u00e1gina, palavras-chave, autor do documento e configura\u00e7\u00f5es da janela de visualiza\u00e7\u00e3o.<\/p>\n
Os metadados n\u00e3o ser\u00e3o exibidos na p\u00e1gina, mas s\u00e3o usados \u200b\u200bpelos navegadores (como exibir conte\u00fado ou recarregar p\u00e1gina), pelos mecanismos de pesquisa (palavras-chave) e outros servi\u00e7os da Web.<\/p>\n
Exemplos<\/strong>
\nDefina o conjunto de caracteres usado:<\/p>\n
<meta charset=\"UTF-8\">\u00a0<\/code><\/p>\n
 <\/p>\n
Defina palavras-chave para mecanismos de pesquisa:<\/p>\n
<meta name=\"keywords\" content=\"HTML, CSS, JavaScript\"><\/code><\/p>\n
Defina uma descri\u00e7\u00e3o da sua p\u00e1gina da web:<\/p>\n
<meta name=\"description\" content=\"Free Web tutorials\"><\/code><\/p>\n
Defina o autor de uma p\u00e1gina:<\/p>\n
<meta name=\"author\" content=\"John Doe\"><\/code><\/p>\n
Atualize o documento a cada 30 segundos:<\/p>\n
<meta http-equiv=\"refresh\" content=\"30\"><\/code><\/p>\n
Configurando a janela de visualiza\u00e7\u00e3o para tornar seu site com boa apar\u00eancia em todos os dispositivos:<\/p>\n
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/code><\/p>\n
Exemplo completo<\/p>\n
<<\/span>meta\u00a0charset=\"UTF-8\"<\/span><\/span>><\/span><\/span><\/code>
\n<<\/span>meta\u00a0name=\"description\"<\/span>\u00a0content=\"Free Web tutorials\"<\/span><\/span>><\/span><\/span><\/code>
\n<<\/span>meta\u00a0name=\"keywords\"<\/span>\u00a0content=\"HTML, CSS, JavaScript\"<\/span><\/span>><\/span><\/span><\/code>
\n<<\/span>meta\u00a0name=\"author\"<\/span>\u00a0content=\"John Doe\"<\/span><\/span>><\/span><\/span><\/code><\/p>\n
 <\/p>\n
 <\/p>\n
Configurando a janela de exibi\u00e7\u00e3o<\/strong><\/p>\n
A janela de visualiza\u00e7\u00e3o \u00e9 a \u00e1rea vis\u00edvel do usu\u00e1rio de uma p\u00e1gina da web. Varia de acordo com o dispositivo – ser\u00e1 menor em um telefone celular do que na tela do computador.<\/p>\n
Voc\u00ea deve incluir o seguinte <meta><\/code>elemento em todas as suas p\u00e1ginas da web:<\/p>\n
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/code>
\nIsso fornece ao navegador instru\u00e7\u00f5es sobre como controlar as dimens\u00f5es e a escala da p\u00e1gina.<\/p>\n
A width=device-width<\/code> pe\u00e7a define a largura da p\u00e1gina para seguir a largura da tela do dispositivo (que varia de acordo com o dispositivo).<\/p>\n
A initial-scale=1.0 <\/code>pe\u00e7a define o n\u00edvel de zoom inicial quando a p\u00e1gina \u00e9 carregada pela primeira vez pelo navegador.<\/p>\n
Aqui est\u00e1 um exemplo de uma p\u00e1gina da web sem a meta tag da viewport e a mesma p\u00e1gina da web com a meta tag da viewport:<\/p>\n
Dica: se voc\u00ea estiver navegando nesta p\u00e1gina com um telefone ou tablet, poder\u00e1 clicar nos dois links abaixo para ver a diferen\u00e7a.<\/span><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<body>\r\n\r\n<p><b>xxxxx x x x x x x x x x x<\/b><\/p>\r\n\r\n<img src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/tutorial-de-html-introducao-300x133.png\" alt=\"Chania\" width=\"460\" height=\"345\">\r\n\r\n<p>\r\nxxx x x x xx x x x x x x \r\nxx\r\nxx\r\nx\r\nx\r\nxxxxxxx x x x xx x x x x x x \r\nxx\r\nxx\r\nx\r\nx\r\nxxxxxxx x x x xx x x x x x x \r\nxx\r\nxx\r\nx\r\nx\r\nxxxxxxx x x x xx x x x x x x \r\nxx\r\nxx\r\nx\r\nx\r\nxxxxxxx x x x xx x x x x x x \r\nxx\r\nxx\r\nx\r\nx\r\nxxxxxxx x x x xx x x x x x x \r\nxx\r\nxx\r\nx\r\nx\r\nxxxxxxx x x x xx x x x x x x \r\nxx\r\nxx\r\nx\r\nx\r\nxxxx\r\n<\/p>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n


<\/center>\n
 <\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n<style>\r\nimg {\r\n    max-width: 100%;\r\n    height: auto;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<p><b>xxxxx\u00a0x\u00a0x\u00a0x\u00a0x\u00a0x\u00a0x\u00a0x\u00a0x\u00a0x\u00a0xxxxxx\u00a0x\u00a0x\u00a0x\u00a0x\u00a0x\u00a0x\u00a0x\u00a0x\u00a0x\u00a0xxxxxx\u00a0x\u00a0x\u00a0x\u00a0x\u00a0x\u00a0x\u00a0x\u00a0x\u00a0x\u00a0x<\/b><\/p>\r\n\r\n<img src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/tutorial-de-html-introducao-300x133.png\" alt=\"Chania\" width=\"460\" height=\"345\">\r\n\r\n<p>\r\nxxx x x x xx x x x x x x \r\nxx\r\nxx\r\nx\r\nx\r\nxxxxxxx x x x xx x x x x x x \r\nxx\r\nxx\r\nx\r\nx\r\nxxxxxxx x x x xx x x x x x x \r\nxx\r\nxx\r\nx\r\nx\r\nxxxxxxx x x x xx x x x x x x \r\nxx\r\nxx\r\nx\r\nx\r\nxxxxxxx x x x xx x x x x x x \r\nxx\r\nxx\r\nx\r\nx\r\nxxxxxxx x x x xx x x x x x x \r\nxx\r\nxx\r\nx\r\nx\r\nxxxx\r\n<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
O elemento HTML <script><\/strong><\/p>\n
O <script><\/code>elemento \u00e9 usado para definir JavaScripts do lado do cliente.<\/p>\n
O seguinte JavaScript grava “Ol\u00e1 JavaScript!” em um elemento HTML com id = “demo”:<\/p>\n
Exemplo<\/strong>
\n<script><\/code>
\nfunction myFunction() {<\/code>
\ndocument.getElementById(\"demo\").innerHTML = \"Hello JavaScript!\";<\/code>
\n}<\/code>
\n<\/script><\/code><\/p>\n
 <\/p>\n
O elemento HTML <base><\/strong><\/p>\n
O <base><\/code>elemento especifica o URL base e \/ ou o destino para todos os URLs relativos em uma p\u00e1gina.<\/p>\n
A <base><\/code>tag deve ter um href ou um atributo de destino presente ou ambos.<\/p>\n
S\u00f3 pode haver um \u00fanico <base><\/code> elemento em um documento!<\/p>\n
<head><\/code>
\n<base href=\"https:\/\/www.coloqueseudominio.com.br\/\" target=\"_blank\"><\/code>
\n<\/head><\/code><\/p>\n
<body><\/code>
\n<img src=\"images\/stickman.gif\" width=\"24\" height=\"39\" alt=\"Stickman\"><\/code>
\n<a href=\"tags\/tag_base.asp\">HTML base Tag<\/a><\/code>
\n<\/body><\/code><\/p>\n
 <\/p>\n
Resumo do cap\u00edtulo<\/strong><\/p>\n
O <head><\/code>elemento \u00e9 um cont\u00eainer para metadados (dados sobre dados)
\nO <head><\/code>elemento \u00e9 colocado entre a <html><\/code>tag e a <body><\/code>tag
\nO\u00a0<title><\/code>elemento \u00e9 obrigat\u00f3rio e define o t\u00edtulo do documento
\nO <style><\/code>elemento \u00e9 usado para definir informa\u00e7\u00f5es de estilo para um \u00fanico documento
\nA <link><\/code> tag \u00e9 mais frequentemente usada para vincular a folhas de estilo externas
\nO <meta><\/code>elemento geralmente \u00e9 usado para especificar o conjunto de caracteres, descri\u00e7\u00e3o da p\u00e1gina, palavras-chave, autor do documento e configura\u00e7\u00f5es da janela de visualiza\u00e7\u00e3o
\nO <script><\/code>elemento \u00e9 usado para definir JavaScripts do lado do cliente
\nO <base><\/code>elemento especifica o URL base e \/ ou o destino para todos os URLs relativos em uma p\u00e1gina<\/p>\n
 <\/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