A página inicial do site é, por uma convenção, chamada de index.html. Por padrão, diversos sites espalhados pela internet estarão utilizando essa nomenclatura para sua página principal.
Um site é formado, de basicamente, por três tags principais:
Essas três tags HTML iniciais definem o básico do corpo de uma página HTML, dividindo a parte das configurações da página e a parte que o usuário vê (o corpo da página).
A página é desenvolvida como se fosse um quebra cabeças, cada pedaço tem um lugar a ser encaixado. E se todos os pedaços forem encaixadas da forma correta, o quebra cabeças estará completo e perfeito.
As tags HTML podem ser abertas e fechadas, delimitando seu conteúdo entre a abertura e o fechamento. Sendo assim, ao escrever, por exemplo, um parágrafo, o texto estará posicionado no meio dos delimitadores. Uma tag que possui abertura e fechamento é geralmente escrita da seguinte forma: < tag > conteúdo < /tag >
Exemplos de TagsA maioria das tags são abertas < tag > e fechadas < /tag >, mantendo seu conteúdo entre essa abertura e fechamento. Entretando, há tags que não possuem esse tipo de fechamento. Tags como < img > e < input > já funcionam como abertura e fechamento de si próprias.
Exemplos de Tags sem fechamentoTags HTML podem possuir atributos, que modificam o seu comportamento, determinam regras e delimitadores, podendo ser aplicadas em diversas situações. Um exemplo seria definir um campo de entrada de informações para que ele aceitasse apenas números.
Um atributo pode aceitar um valor, por exemplo, para definir que o tipo é numérico, precisamos passar esse valor ao atributo. Exemplo: < tag atributo="valor"> conteúdo < /tag >.
Existem desde atributos genéricos, que são utilizados em praticamente todas as tags (como id e class), até atributos específicos de determinadas tags (como type).
Exemplos de Tags com AtributosO HTML possui uma gama enorme de tags para estilizar o conteúdo na tela, podendo até mesmo criar diversas combinações para deixar tudo ao estilo do fregues. Entre elas, existem:
Efeito de rabisco com < del >< /del >: Palavra rabiscada
Efeito de itálico com < i >< /i >: Palavra em itálico
Efeito de marcação com < mark >< /mark >: Palavra marcada
Listas são formadas com uma tag mãe, definindo o tipo da lista, e os seus filhos, que seriam os itens dessa lista. As listas podem ser ordenadas < ol >< /ol > ou não ordenadas < ul >< /ul >. Haverão itens dentro dessas listas, determinadas pela tag < li >< /li >.
Um link pode levar o usuário para uma outra página, ou outro site, e é definido pela tag < a >< /a >. Para que funcione corretamente, o atributo `href` precisa estar inserido com o link de destino. Exemplo: < a href="link" >Clique aqui< /a >
Por padrão, o site abre na mesma aba, ou seja, muda a página atual, consequentemente saíndo do seu site. É possível mudar esse comportamento, por exemplo, ao clicar no link, abrir uma nova aba, preservando a aba original. Para isso, existe o atributo target que pode receber o valor _blank.
Resumindo, ao clicar no link, uma nova aba será aberta direcionando até a página definida pelo href. Exemplo: < a href="link" target="_blank" >Clique aqui< /a >
Além de navegar para outras páginas e sites, é possível utilizar a tag < a >< /a > para navegar entre diferentes pedaços de conteúdo dentro da própria página, cria-se uma seção de links de navegação.
Para a definição das seções, é utilizado o símbolo # seguido do id da tag. A tag alvo precisa ter um id, pois esse mesmo id será utilizado para identificação na ancoragem.