Comandos HTML Básicos

Como nós vimos anteriormente, comandos HTML são basicamente o que controlam a parte visível de um website.

Como você já sabe, o HTML (Hyper text markup language) usa marcas para formatar as páginas na Internet. Um comando HTML  é um objeto identificável dentro de um documento, e pode resultar em uma imagem, uma tabela, ou qualquer outro elemento visível.

Como veremos neste artigo, cada comando HTML pode possuir atributos, que servem para controlar as características do elemento.

Tags importantes de um documento HTML

Como eu falei na página anterior, todos os documentos HTML precisam começar com um tipo de declaração.

Declaração de início e fim de documento

Um documento HTML começa com <html> e termina com </html>. A parte visível do HTML ficará entre as marcações <body> e </body>.

A primeira secção contém geralmente as tags <title> e </title>. A segunda seção contém informações que formatam o texto da página, imagens e links.

Um arquivo html, normalmente estará associado a uma extensão .html ou htm. Por exemplo: pagina.html ou galeria.htm.

Veja o exemplo abaixo:

<!DOCTYPE html>
<html>
<body>

<h1>Primeiro título em HTML</h1>
<p>Meu primeiro parágrafo feito em HTML.</p>

</body>
</html>

Títulos

Títulos são importantes em qualquer documento.

Além de ser mais compreensível para um usuário fazer a leitura do seu site, sistemas de busca utilizam para verificar a relevância do seu conteúdo com a busca dos usuários.

Os títulos em HTML são definidos de <h1> até <h6>.

<h1>Este é o primeiro título</h1>
<h2>Este é o subtítulo 2</h2>
<h3>Este é o subtítulo 3</h3> 
<h4>Este é o subtítulo 4</h4> 
<h5>Este é o subtítulo 5</h5> 
<h6>Este é o subtítulo 6</h6>

Parágrafos

Os parágrafos em HTML são definidos através da marcação <p>.

<p>Este é um parágrafo em HTML.</p>

Links

Links (ou texto âncora) são importantes para ligar conteúdos em documentos HTML. Para criar links em HTML, basta utilizar a tag <a>.

Note que é necessário utilizar o atributo href, que mostra para onde o navegador deve direcionar o usuário caso o link seja clicado.

<a href="https://portaldesenvolvedor.com">Portal Desenvolvedor</a>

Imagens

Imagens são importantes para um conteúdo rico e ilustrado. Nós utilizamos a tag <img> para esta finalidade. A propriedade src são atributos que nós podemos utilizar para configurar qual imagem será utilizada.

<img src="portaldesenvolvedor.jpg" />

Note que a tag encerra com />. Isto foi uma inovação no XHTML, indica que a marcação é uma instrução completa e não precisa ser encerrada. Nós falaremos mais para frente nos próximos artigos.

 

Quer aprender a ser um desenvolvedor completo e com certificado?

Baixe gratuitamente nosso ebook sobre como ser um desenvolvedor full-stack. Descubra quais são os passos necessários para se tornar um desenvolvedor completo.

Clique no botão abaixo para baixar gratuitamente o ebook.

Sim, Eu Quero o eBook Desenvolvimento Full Stack

Deixe um comentário