Introdução a HTML


Indice

Ferramentas Utilizadas

Voltar

Para desenvolver em HTML, precisa-se de uma interface de desenvolvimento, uma IDE, e para isso usamos o VS Code, uma interface famosa e simples para desenvolvimento, tendo inclusive o recurso para completar um codigo, por exemplo, ao digitar "li" e apertar enter, o VS Code faz a abertura e fechamento de tags

Estrutura Básica

Voltar

A estrutura básica de HTML é composta por 2 elementos principais:

Essas duas tags acima estão dentro da tag principal do HTML, que possui o mesmo nome, HTML, essa tag é onde todos os itens do seu site tem que estar.

Sobre as Tags

Voltar

Algumas tags, como a tag i e a tag strong possuem abertura e fechamento, sendo a abertura: <p> e o fechamento sendo </p>.

Porém temos tags que nao possuem fechamento, como as tags input e img

Atributos das tags

Voltar

Algumas tags precisam receber parametros, por exemplo, a tag de imagem (Img) precisa de dois atributos:

E temos alguns parametros que não são essenciais, porém podem ajudar seu site, como para a tag a (link), você pode utilizar o parametro target, onde você diz a "direção" do link, se ele será aberto na mesma guia ou em outra.

Textos

Voltar

Já vimos várias tags que são usadas para auxiliar nosso texto, mas como escrevemos o texto?

Bom, podemos usar tags de titulo, como h1, a tag de titulo, e essa tag tem 6 niveis, ou seja, vai de h1 até h6, são 6 niveis de titulo.

Já diria Neymar "quando dá, dá, quando não dá, não dá"

Acima, nós vemos uma citação, cuja tag é "blockquote". além disso, temos tags como sub e a sup

Listas Ordenadas e Não Ordenadas

Voltar

Em alguns textos, usamos listas nao ordenadas, são listas em tópicos

Também podemos usar listas ordenadas, tópico 1, 2, 3 e assim por diante

  1. Assim, por exemplo
  2. Para abrir listas assim, usamos o mesmo estilo das listas não ordenadas
  3. Porém, em vez de "ul", usamos "ol" (ordered list)

Voltar

E para criar links em HTML, usamos a tag "a", uma tag que vem com o parametro "href", onde você coloca o endereço do site ou página que você quer que seu cliente entre.

Aqui, por exemplo, temos meu linkedin, no parametro "href" coloquei o link da minha pagina, e o texto que aparece para ser clicado está entre a abertura e o fechamento da tag "a".