SlideShare uma empresa Scribd logo
1 de 10
Estrutura Básica e Tags 
Básicas no HTML 
Por: Tiago Luiz
Bem-Vindo ao mundo do HTML 
 Hoje, entraremos em um mundo incrível e repleto de novidades. Esperamos 
que esteja pronto para cada surpresa grandiosa que encontraremos juntos 
nesse mundo da Web. Um mundo que tem se expandido e tido grande êxito.
O que é o HTML? 
 HTML é uma das linguagens que utilizamos para desenvolver websites. O 
significado da palavra HTML vem do inglês e significa Hypertext Markup 
Language ou em português Linguagem de Marcação de Hipertexto. 
 O HTML é a linguagem base da internet. Foi criada para ser de fácil 
entendimento por seres humanos e também por máquinas, como por exemplo 
o Google ou outros sistemas que percorrem a internet capturando informação. 
 Tim Berners-Lee criou a linguagem HTML para a comunicação e disseminação 
de pesquisas entre ele e seu grupo de colegas. A linguagem HTML ficou 
bastante conhecida quando começou a ser utilizada para formar a rede 
pública daquela época, o que se tornaria mais tarde o que chamamos hoje de 
internet.
Estrutura básica do HTML 
 Todo HTML começa do mesmo jeito. Abaixo temos um padrão que sempre 
deve existir em um documento HTML. Caso ache melhor, copie a estrutura 
abaixo em algum lugar para poder usar sempre que for criar um novo 
documento em HTML.
Entendendo a estrutura do HTML 
 A primeira linha se chamada DOCTYPE. O Doctype avisa aos navegadores, robôs de busca, 
outras coisas que tipo de documento é aquele que eles estão prestes a carregar. Existem 
outros códigos que podemos carregar, como o XML. Por isso o Doctype avisa ao navegador 
para que ele saiba como se comportar ao ler o código. 
 Depois começamos com a Tag HTML. Ou seja, tudo o que estiver entre as tags <html></html> 
é escrito em HTML. Ao lado da palavra HTML tem um atributo (falaremos sobre atributos mais 
pra frente) chamado lang, onde indicamos qual o idioma do texto que escreveremos. 
 Logo após a tag html temos a tag <head>. Na tag head nós indicamos o título do documento e 
indicamos a tabela de caracteres que o browser deve usar para renderizar seu texto(Veremos 
isso depois também). 
 A tag <title> é muito importante. É com ela que você indica o título do documento. O Google 
e outros sistemas de busca utilizam essa tag para indicar em suas buscas o título da página. 
Isso é muito importante para que você apareça bem nas buscas. 
 Logo depois da tag de fechamento </head> começamos a tag <body>, como o nome mesmo 
fala o corpo do site. Dentro deste elemento é que vamos escrever todo o código HTML do 
site.
Tags no HTML 
 O HTML é uma linguagem baseada em marcação. Nós marcamos os elementos 
para mostrar quais informações a página exibe, seus significados etc. Por 
exemplo, um título importante. Aquele título do artigo, da manchete do site, 
nós marcamos com uma tag/elemento chamado H1. Veja um exemplo:
Entendendo mais um pouco o que são 
tags 
 Perceba que o texto está entre duas marcações. Essas marcações são chamadas de TAGS. As 
tags são abertas e depois fechadas. No exemplo da página anterior abrimos a tag com <h1> e 
fechamos com</h1>. O que está dentro é o conteúdo mostrado para o usuário. 
 Os parágrafos são marcados com a tag “p” de parágrafo e os cabeçalhos 
são marcados com uma tag formada por uma letra “h” de heading e uma 
numeração de 0 à 6(Ex. h1, h2, h3...) . Existem muitas outras tags, mas 
inicialmente conheceremos essas duas. Veja na próxima imagem:
Tags são mais do que aparentam ser 
 Tags são mais do que apenas uma das partes principais de estruturação de um site, elas também 
facilitam nossa vida de outro modo. Utilizando as tags, podemos dizer para os navegadores o 
significado de cada área de nosso site, pois como sabemos um site é dividido em várias partes. 
Temos a área de cabeçalho, navegação, conteúdo, rodapé etc. Usando tags, estamos dizendo 
também o que seria cada elemento do site para os sistemas de busca, como o Google e outros. 
Um motor de busca nesse caso para exibir os resultados de busca com melhor desempenho, 
precisa saber o que é cada área do seu site. Ele sabe disso através das tags. 
 Um bom exemplo é entendermos que ao pesquisarmos algo em um motor de busca como o 
Google, esse motor terá uma facilidade muito maior para procurar o que você quer se os sites 
forem construídos de maneira coerente, utilizando as tags não só para estruturar o site 
fisicamente, mas também para dar um melhor significado a eles(os sites). 
 Futuramente falaremos mais sobre significados de tags e grau hierarquia de algumas tags como a 
heading que vai de 0 à 6. A tag heading não é numerada assim simplesmente para gerar uma 
alteração de tamanho de uma para a outra, tudo isso tem um significado e chamamos esse 
significado de web semântica.
Tiago Luiz 
Professor e Consultor de Softwares 
Atualmente professor de Informática e Consultor de Softwares, Certificado pela Adobe 
como Expert em Adobe Muse CC. Dou aula de informática, Ministro Cursos de Informática 
Online Gratuitamente através do site Digital Cursos e nas horas vagas faço alguns serviços 
freelas para estar sempre atualizado ao mercado. 
Site: http://dgcursos.com/

Mais conteúdo relacionado

Mais procurados

html, css e java script - renato araujo
html, css e java script - renato araujohtml, css e java script - renato araujo
html, css e java script - renato araujoorenatoaraujo
 
Curso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScriptCurso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScriptPablo Sanches
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)Kaoru Hatake
 
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação webCentro Paula Souza
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScriptBruno Catão
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScriptCarlos Eduardo Kadu
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento WebSérgio Souza Costa
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao cssLéo Dias
 
Programação Web - CSS
Programação Web - CSSProgramação Web - CSS
Programação Web - CSSMauro Pereira
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento webRodrigo Rodrigues
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Jose Augusto Cintra
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a InternetLeonardo Soares
 

Mais procurados (20)

html, css e java script - renato araujo
html, css e java script - renato araujohtml, css e java script - renato araujo
html, css e java script - renato araujo
 
Introdução CSS
Introdução CSSIntrodução CSS
Introdução CSS
 
HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
 
Curso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScriptCurso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScript
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
 
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação web
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScript
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
 
Criação de Sites web Tutorial
Criação de Sites web TutorialCriação de Sites web Tutorial
Criação de Sites web Tutorial
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao css
 
Aula 07 Css - Parte 1
Aula 07   Css - Parte 1Aula 07   Css - Parte 1
Aula 07 Css - Parte 1
 
Programação Web - CSS
Programação Web - CSSProgramação Web - CSS
Programação Web - CSS
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
 

Semelhante a Estrutura HTML (20)

Html manual
Html manualHtml manual
Html manual
 
Html manual
Html manualHtml manual
Html manual
 
Html 01
Html 01Html 01
Html 01
 
Linguagem de-programacao-html 2
Linguagem de-programacao-html 2Linguagem de-programacao-html 2
Linguagem de-programacao-html 2
 
ebook-material-didatico-sistemas-para-internet.pdf
ebook-material-didatico-sistemas-para-internet.pdfebook-material-didatico-sistemas-para-internet.pdf
ebook-material-didatico-sistemas-para-internet.pdf
 
Tele cine mozer
Tele cine mozerTele cine mozer
Tele cine mozer
 
Html
HtmlHtml
Html
 
5098 html
5098 html5098 html
5098 html
 
5098 html
5098 html5098 html
5098 html
 
Aula1 - Curso Web-Design - ETECA Camargo Aranha
Aula1 - Curso Web-Design - ETECA Camargo AranhaAula1 - Curso Web-Design - ETECA Camargo Aranha
Aula1 - Curso Web-Design - ETECA Camargo Aranha
 
T2Ti-ERP-3-Introducao-as-Tecnologias-Web.pdf
T2Ti-ERP-3-Introducao-as-Tecnologias-Web.pdfT2Ti-ERP-3-Introducao-as-Tecnologias-Web.pdf
T2Ti-ERP-3-Introducao-as-Tecnologias-Web.pdf
 
Apresentando o HTML
Apresentando o HTMLApresentando o HTML
Apresentando o HTML
 
Xhtml 2011 - atualizado
Xhtml   2011 - atualizadoXhtml   2011 - atualizado
Xhtml 2011 - atualizado
 
Html E Websemantica Trabalho
Html E Websemantica TrabalhoHtml E Websemantica Trabalho
Html E Websemantica Trabalho
 
AULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxAULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptx
 
Html5 primeiros passos
Html5 primeiros passosHtml5 primeiros passos
Html5 primeiros passos
 
426 curso html
426 curso html426 curso html
426 curso html
 
Front-end 001
Front-end 001Front-end 001
Front-end 001
 
WebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTMLWebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTML
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 

Estrutura HTML

  • 1. Estrutura Básica e Tags Básicas no HTML Por: Tiago Luiz
  • 2. Bem-Vindo ao mundo do HTML  Hoje, entraremos em um mundo incrível e repleto de novidades. Esperamos que esteja pronto para cada surpresa grandiosa que encontraremos juntos nesse mundo da Web. Um mundo que tem se expandido e tido grande êxito.
  • 3. O que é o HTML?  HTML é uma das linguagens que utilizamos para desenvolver websites. O significado da palavra HTML vem do inglês e significa Hypertext Markup Language ou em português Linguagem de Marcação de Hipertexto.  O HTML é a linguagem base da internet. Foi criada para ser de fácil entendimento por seres humanos e também por máquinas, como por exemplo o Google ou outros sistemas que percorrem a internet capturando informação.  Tim Berners-Lee criou a linguagem HTML para a comunicação e disseminação de pesquisas entre ele e seu grupo de colegas. A linguagem HTML ficou bastante conhecida quando começou a ser utilizada para formar a rede pública daquela época, o que se tornaria mais tarde o que chamamos hoje de internet.
  • 4. Estrutura básica do HTML  Todo HTML começa do mesmo jeito. Abaixo temos um padrão que sempre deve existir em um documento HTML. Caso ache melhor, copie a estrutura abaixo em algum lugar para poder usar sempre que for criar um novo documento em HTML.
  • 5. Entendendo a estrutura do HTML  A primeira linha se chamada DOCTYPE. O Doctype avisa aos navegadores, robôs de busca, outras coisas que tipo de documento é aquele que eles estão prestes a carregar. Existem outros códigos que podemos carregar, como o XML. Por isso o Doctype avisa ao navegador para que ele saiba como se comportar ao ler o código.  Depois começamos com a Tag HTML. Ou seja, tudo o que estiver entre as tags <html></html> é escrito em HTML. Ao lado da palavra HTML tem um atributo (falaremos sobre atributos mais pra frente) chamado lang, onde indicamos qual o idioma do texto que escreveremos.  Logo após a tag html temos a tag <head>. Na tag head nós indicamos o título do documento e indicamos a tabela de caracteres que o browser deve usar para renderizar seu texto(Veremos isso depois também).  A tag <title> é muito importante. É com ela que você indica o título do documento. O Google e outros sistemas de busca utilizam essa tag para indicar em suas buscas o título da página. Isso é muito importante para que você apareça bem nas buscas.  Logo depois da tag de fechamento </head> começamos a tag <body>, como o nome mesmo fala o corpo do site. Dentro deste elemento é que vamos escrever todo o código HTML do site.
  • 6. Tags no HTML  O HTML é uma linguagem baseada em marcação. Nós marcamos os elementos para mostrar quais informações a página exibe, seus significados etc. Por exemplo, um título importante. Aquele título do artigo, da manchete do site, nós marcamos com uma tag/elemento chamado H1. Veja um exemplo:
  • 7. Entendendo mais um pouco o que são tags  Perceba que o texto está entre duas marcações. Essas marcações são chamadas de TAGS. As tags são abertas e depois fechadas. No exemplo da página anterior abrimos a tag com <h1> e fechamos com</h1>. O que está dentro é o conteúdo mostrado para o usuário.  Os parágrafos são marcados com a tag “p” de parágrafo e os cabeçalhos são marcados com uma tag formada por uma letra “h” de heading e uma numeração de 0 à 6(Ex. h1, h2, h3...) . Existem muitas outras tags, mas inicialmente conheceremos essas duas. Veja na próxima imagem:
  • 8.
  • 9. Tags são mais do que aparentam ser  Tags são mais do que apenas uma das partes principais de estruturação de um site, elas também facilitam nossa vida de outro modo. Utilizando as tags, podemos dizer para os navegadores o significado de cada área de nosso site, pois como sabemos um site é dividido em várias partes. Temos a área de cabeçalho, navegação, conteúdo, rodapé etc. Usando tags, estamos dizendo também o que seria cada elemento do site para os sistemas de busca, como o Google e outros. Um motor de busca nesse caso para exibir os resultados de busca com melhor desempenho, precisa saber o que é cada área do seu site. Ele sabe disso através das tags.  Um bom exemplo é entendermos que ao pesquisarmos algo em um motor de busca como o Google, esse motor terá uma facilidade muito maior para procurar o que você quer se os sites forem construídos de maneira coerente, utilizando as tags não só para estruturar o site fisicamente, mas também para dar um melhor significado a eles(os sites).  Futuramente falaremos mais sobre significados de tags e grau hierarquia de algumas tags como a heading que vai de 0 à 6. A tag heading não é numerada assim simplesmente para gerar uma alteração de tamanho de uma para a outra, tudo isso tem um significado e chamamos esse significado de web semântica.
  • 10. Tiago Luiz Professor e Consultor de Softwares Atualmente professor de Informática e Consultor de Softwares, Certificado pela Adobe como Expert em Adobe Muse CC. Dou aula de informática, Ministro Cursos de Informática Online Gratuitamente através do site Digital Cursos e nas horas vagas faço alguns serviços freelas para estar sempre atualizado ao mercado. Site: http://dgcursos.com/