Anúncio

HTML - Aula 01 - Estrutura básica e tags básicas no html

Full-Stack Developer & Software Engineer em Spot Educação
8 de Dec de 2014
Anúncio

Mais conteúdo relacionado

Apresentações para você(20)

Anúncio

Último(20)

HTML - Aula 01 - Estrutura básica e tags básicas no 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. 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.
  9. 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/
Anúncio