Aprenda HTML – Conhecendo ferramentas e organizando sua página HTML < Parte 2 >

Aprenda HTML – Conhecendo ferramentas e organizando sua página HTML < Parte 2 >

Dando continuidade ao nosso aprendizado em HTML (leia aqui a primeira parte) onde conhecemos melhor o que é esta linguagem de marcação da web, aprendemos a importância das tags, conhecemos algumas delas e criamos nosso primeiro arquivo.

Uma página web é feita para exibir conteúdos, quer sejam textos, imagens ou vídeos. Se queremos que alguém entenda bem este conteúdo, o mesmo deve estar devidamente organizado, assim como qualquer texto de um livro, jornal, revista, entre outros.

Um documento em HTML também possui títulos, parágrafos, imagens e outras marcações. Aprenderemos como organizar e definir esses elementos em nossas páginas.

Além de organizar nosso documento, veremos a importância desses elementos para os algoritmos de busca do google e como utilizá-lo para que nosso conteúdo seja localizado.

Nosso primeiro documento foi criado usando o bloco de notas. Obviamente há outras ferramentas mais interessantes e eficientes para criarmos nossos códigos HTML e conheceremos algumas delas neste post.

Continue lendo este post para prender mais sobre…

  • Ferramentas para criação de páginas HTML
  • Estrutura básica de um documento HTML
  • Inserir títulos
  • Inserir parágrafos
  • Inserir textos pré-formatados
  • Inserir linhas horinzontais
  • Comentar o seu código HTML
  • Inserir imagens

Preparado para criar mais páginas HTML com novos recursos? Depois de ler este post você já conseguirá criar páginas com títulos, parágrafos e imagens, além de conhecer ferramentas úteis que irão auxiliar e muito em seu aprendizado

Prontos para aprender mais sobre HTML? Então vamos lá!

Ferramentas

Ferramentas para HTML

Notepad++

notepad++Já conhecido de muitos, costumo dizer que o Notepad++ é um bloco de notas evoluído, ou, um bloco de notas voltado para programação.

A ferramenta permite digitar código de várias linguagens, não apenas o HTML, como também C, C++, Java, C#, XML, PHP, Javascript, ASCII art, doxygen, ASP, VB/VBS, SQL, Objective-C, CSS, Pascal, Perl, Python, Lua, TeX, TCL, Assembly, Ruby, Lisp, Scheme, Properties, Diff, Smalltalk, Postscript, VHDL, Ada, Caml, AutoIt, KiXtart, Matlab, Verilog, Haskell e InnoSetup.

Além de todas essas linguagens o usuário ainda poderá definir uma própria linguagem usando o recurso de "User Language Define System".

O Notepad++ possui diversos recursos para auxiliar no desenvolvimento de códigos como: auto-completar, sistema de busca e substituição, trabalhar com vários arquivos ao mesmo tempo separados por abas. 

Para a criação de códigos HTML ele auxiliará ao fechar tags automaticamente quando inserida a tag de abertura, possibilita encolher blocos de código, enumera as linhas, além de outras infinidades de recursos que podem ser inseridos através de plugins.

Você pode fazer o download no site oficial da ferramenta e realizar a instalação padrão do Windows (Avançar, Avançar, Concluir).

Download “Download Notepad++” v6.9.html – Baixado 147 vezes –

Kompozer

O Kompozaer é ideial para quem está começando a criar suas primeiras páginas em HTML. Semelhante ao poderoso Dreamweaver ($$$Poderoso$$$, entendeu?), o programa trabalha com o conceito WYSIWYG (What you see is what you get – O que você vê é o que você obtêm), ou seja, o programador consegue visualizar aquilo que está programando, agilizando no entendimento e motivando quem está iniciando, afinal a primeira coisa que uma pessoa que está aprendendo um código quer é ver o como está ficando.

Para os que já conhecem um pouco mais de HTML, temos também a aba Source, onde será exibido somente o código e na aba HTML Tags o editor demarca as tags no preview da página.

Para completar a ferramenta ainda traz um editor de CSS e permite que o usuário já envie suas páginas diretamente para um servidor web através de um uploader de FTP.

Download “Download - Kompozer” kompozer-0.8b3.pt-BR.win32.exe – Baixado 142 vezes –

Aptana

O Aptana é uma excelente opção não só para quem quer programar em HTML mas para quem trabalha com Programação Web de uma forma geral. Ele vem com um conjunto de bibliotecas com suporte para: AJAX, PHP, HTML, CSS, Javascript, Ruby on Rails, Adobe Air, iPhone entre outras.

O programa permite ainda visualizar códigos em CSS, arrastar e soltar scripts, alertas de sintaxes incorretas no código e assim como o Kompozer, o Aptana suporta FTP permitindo a sincronização e upload de arquivos com o servidor de maneira eficiente e rápida.

Download “Download - Aptana Studio” Aptana_Studio_3_Setup_3.6.1.exe – Baixado 163 vezes –

Destaquei estas 3 boas ferramentas leves e gratuitas para começarmos no nosso mundo de criação de páginas web. Porém, se pesquisar um pouco você encontrará uma infinidade de outras ferramentas como o HTMLEdit (bem semelhante ao Notepad++ e muito leve) e o Sublime, esta última é sem dúvida uma das melhores ferramentas para criação de códigos web.

Agora, se você não quer perder tempo baixando nenhum programa para aprender HTML, mas também não quer usar o bloco de notas, existem algumas ferramentas on-line que nos permitem criar códigos e vê-los interpretados na tela em tempo real. Para citar alguns temos o Real-time HTML, Online HTML Editor e o HTML Editor.

Estrutura básica de um documento HTML

A principal linguagem de marcação da web passou, desde seu nascimento por diversas versões. Conforme a web foi crescendo e a internet sendo cada vez mais acessada e por diferentes dispositivos, o HTML precisou adquirir novos recursos para atender a demanda e hoje encontra-se na sua quinta versão, o HTML5.

A estrutura básica de uma página para web também mudou com todas essas versões e hoje se resume a esta estrutura:

<br />
	&lt;!DOCTYPE HTML&gt;<br />
	&lt;html lang=&quot;pt-br&quot;&gt;<br />
	&lt;head&gt;<br />
	&lt;title&gt;&lt;/title&gt;<br />
	&lt;/head&gt;<br />
	&lt;body&gt;
</p>

<p>
	&lt;/body&gt;<br />
	&lt;/html&gt;<br />
	

Entendendo cada uma delas:

<!DOCTYPE HTML> – Esta linha não é uma tag, mas sim uma instrução para o navegador. Na verdade esta linha esta dizendo exatamente o seguinte para o seu navegador:

"Navegador. O que você vai interpretar logo abaixo é HTML versão 5. Entendeu? Não é a 3, nem a 4 e nem DHTML, mas sim a versão 5. Tenho dito".

Pronto. Seu navegador já sabe o que vem abaixo para ele interpretar ou "traduzir" para você. Pesquise a estrutura básica de outras versões de HTML, e irá perceber que basicamente esta primeira linha que muda de uma versão para outra.

<html lang="pt-br"> </html> Esta tag informa simplesmente que seu código HTML começou. Já sabemos que escrever um código HTML nada mais é do que aninhar várias tags uma da outra certo? Então, podemos dizer que esta é a mãe de todas as demais tags do nosso código. Dentro dela usei também o atributo lang. Ele serve para especificar para toda a Web que o conteúdo da sua página esta em português. Será essa uma das informações que os buscadores da web usam para filtrar os sites em língua portuguesa? Será? Será?

Correto!!

Obs: O atributo lang não é exclusivo da tag <html> e pode ser usado para informar a linguagem de qualquer outro bloco de texto que você queira.

<head></head> – Esta tag tem a função de passar algumas informações que devem ser carregadas ou entendidas na página. Seu conteúdo não será exibido na página. Ele seria, digamos, a parte inteligente do código e não uma simples marcação de conteúdo. Sua principal função é informar os metadados, que informam por exemplo qual a cadeia de caracteres deverá ser usada. Falaremos futuramento sobre o uso das meta tags.

<title></title> – Se você sabe um pouquinho de inglês já matou esta né? Entre estas tags será inserido o título da nossa página Web. Ela é uma das tags informativas que devem vir dentro da tag HEAD. O conteúdo desta tag é utilizado pelos buscadores e é o que aparece na aba do seu navegador, como na imagem abaixo.

Título na aba do navegador
Título na aba do navegador

<body></body> – Como o nome sugere, esta tag é o corpo do seu código. Diferente da tag HEAD, todo o conteúdo que deve ser exibido dentro da sua página, deve estar dentro destas tags. Todos os títulos, parágrafos, imagens, links, vídeos, em fim, todo o nosso conteúdo estará dentro desta tag.

Inserindo Títulos (Cabeçalhos/Headings)

Os títulos que falaremos agora nada tem a ver com o título já citado acima (tag <title>). O título da tag <title> serve para o título da página e não será exibido no conteúdo da página, já os títulos que podemos criar usando as tags <h1> até <h6> são os títulos do conteúdo da página, e obviamente, os mesmos serão exibidos na tela.

 O HTML possui 6 níveis de cabeçalhos, onde quanto menor o número que acompanha o "h" maior a sua importância no corpo do texto e o seu destaque.

Para entendermos melhor, faça um teste. Abra a sua ferramenta preferida das citadas acima, ou alguma que você já use para criar seus códigos em HTML ou ainda, para sermos mais práticos acesse uma ferramenta online para ver em tempo real e insira o seguinte código:

<br />
	&lt;!DOCTYPE HTML&gt;<br />
	&lt;html lang=&quot;pt-br&quot;&gt;<br />
	&lt;head&gt;<br />
	&lt;title&gt;Aprendendo HTML&lt;/title&gt;<br />
	&lt;/head&gt;<br />
	&lt;body&gt;<br />
	&lt;h1&gt;T&Iacute;TULO 1&lt;/h1&gt;<br />
	&lt;h2&gt;T&Iacute;TULO 2&lt;/h2&gt;<br />
	&lt;h3&gt;T&Iacute;TULO 3&lt;/h3&gt;<br />
	&lt;h4&gt;T&Iacute;TULO 4&lt;/h4&gt;<br />
	&lt;h5&gt;T&Iacute;TULO 5&lt;/h5&gt;<br />
	&lt;h6&gt;T&Iacute;TULO 6&lt;/h6&gt;<br />
	&lt;/body&gt;<br />
	&lt;/html&gt;<br />
	

Viu?

Perceba que o próprio navegador formata os cabeçalhos de forma destacada. O h1 tem mais destaque que o h2 e assim consecutivamente. Além disso as tags de cabeçalho ou título já recebem margens e automaticamente uma quebra de linha.

Importante! Não use estas tags para deixar o seu texto maior ou mais forte. Elas existem para determinar títulos e subtítulos. Tamanho da fonte, cor, negrito, itálico, entre outros é formatação e isto deixaremos na mão do CSS.

Caso não tenhamos definido a formatação, quer seja por CSS ou no próprio HTML, o navegador aplica a sua própria.

Veja o exemplo acima no Google Chrome e no Firefox e note que eles apresentam formatações um pouco diferentes.

Quer saber qual é a importância de fato destas tags?

  • Elas marcam pontos de destaque no seu conteúdo
  • Elas organizam o seu conteúdo para uma melhor leitura
  • Os mecanismos de busca utilizam as heandings tags para ranquear as pesquisas exibidas

Quanto melhor usar estas tags melhor é o seu conteúdo e maiores as chances de que o seu conteúdo seja encontrado na internet.

Inserindo Parágrafos

Os parágrafos são determinados pelas tags <p></p>. Simples né?! Basta colocar qualquer texto entre eles e o seu navegador saberá que se trata de um parágrafo.

– Ok! Porém, se eu não usar o texto aparece do mesmo jeito certo? 

Correto, mas vamos ver como fica isso? Vamos testar o seguinte código.

<br />
	&lt;!DOCTYPE HTML&gt;<br />
	&lt;html lang=&quot;pt-br&quot;&gt;<br />
	&lt;head&gt;<br />
	&lt;title&gt;Aprendendo HTML&lt;/title&gt;<br />
	&lt;/head&gt;<br />
	&lt;body&gt;<br />
	Este &eacute; o nosso 1&ordm; par&aacute;grafo.<br />
	Este &eacute; o meu 2&ordm; par&aacute;grafo.
</p>

<p>
	Pressionei o ENTER 2 vezes para deixar uma linha em branco e criar o meu 3&ordm; par&aacute;grafo.<br />
	&lt;/body&gt;<br />
	&lt;/html&gt;<br />
	

Viu que legal o que aconteceu? Foi mais ou menos isso?

Este é o nosso 1º parágrafo. Este é o meu 2º parágrafo. Pressionei o ENTER 2 vezes para deixar uma linha em branco e criar o meu 3º parágrafo.

O texto ficou todo em uma linha só, por mais que tenha sido pressionado a tecla ENTER para pular linhas e separar os parágrafos.

Vamos tentar agora o mesmo código utilizando a nossa tag para parágrafos?

<br />
	&lt;!DOCTYPE HTML&gt;<br />
	&lt;html lang=&quot;pt-br&quot;&gt;<br />
	&lt;head&gt;<br />
	&lt;title&gt;Aprendendo HTML&lt;/title&gt;<br />
	&lt;/head&gt;<br />
	&lt;body&gt;<br />
	&lt;p&gt;Este &eacute; o nosso 1&ordm; par&aacute;grafo.&lt;/p&gt;<br />
	&lt;p&gt;Este &eacute; o meu 2&ordm; par&aacute;grafo.&lt;/p&gt;<br />
	&lt;p&gt;&lt;/p&gt;<br />
	&lt;p&gt;Pressionei o ENTER 2 vezes para deixar uma linha em branco e criar o meu 3&ordm; par&aacute;grafo.&lt;/p&gt;<br />
	&lt;/body&gt;<br />
	&lt;/html&gt;<br />
	

Veja a diferença agora.

Este é o nosso 1º parágrafo.
Este é o meu 2º parágrafo.

Pressionei o ENTER 2 vezes para deixar uma linha em branco e criar o meu 3º parágrafo.

Repare que abrimos e fechamos uma das tags sem colocar nenhum conteúdo entre elas, ou seja, criamos um parágrafo vazio, mesmo assim o navegador entendeu que existia um parágrafo e deu o espaço de uma linha como nos demais.

Não entenda que a função desta etiqueta é pular linhas. Não, não e não. Ok?! Sua função é determinar parágrafos, os mesmos parágrafos que usamos na escrita.

Quando houver necessidade de pular uma linha sem necessariamente criar um parágrafo utilizamos a quebra de linha, que nada mais é que utilizar a tag </ br>.

A diferença entre <p> e </ br > é que no parágrafo podemos utilizar formatação e a mesma permite receber atributos (falaremos sobre atributos futuramente). Já a quebra de linha serve só e somente para quebrar linhas. Não existe conteúdos entre quebras de linhas e nem atributos.

Portanto, use a <p> para criar parágrafos. Ok?

Textos Pré-formatados

Um texto pré-formatado pode ser entendido como "deixa o texto do jeito que tá!". Todo texto que for inserido entre as tags <pre> e </pre> respeitará a maneira como foi inserido. Ele respeitará as quebras de linha e espaços.

Vamos usar o mesmo exemplo usado nos parágrafos, mas desta vez vamos usar o texto pré-formatado.

<br />
	&lt;!DOCTYPE HTML&gt;<br />
	&lt;html lang=&quot;pt-br&quot;&gt;<br />
	&lt;head&gt;<br />
	&lt;title&gt;Aprendendo HTML&lt;/title&gt;<br />
	&lt;/head&gt;<br />
	&lt;body&gt;<br />
	&lt;pre&gt;<br />
	Este &eacute; o nosso 1&ordm; par&aacute;grafo.<br />
	Este &eacute; o meu 2&ordm; par&aacute;grafo.
</p>

<p>
	Pressionei o ENTER 2 vezes para deixar uma linha em branco e criar o meu 3&ordm; par&aacute;grafo.<br />
	&lt;/pre&gt;<br />
	&lt;/body&gt;<br />
	&lt;/html&gt;<br />
	

Se você copiou e colou o código vai ver que o nosso texto além de ter quebra de linhas ficou mais afastado da margem esquerda. Isto ocorreu por que para deixar o código identado dentro das tags utilizamos a tabulação. Só que o texto pré-formatado não quer saber de identação, se você colocou espaços ou usou a tabulação antes do texto ele será exibido exatamente desta forma.

A questão da quebra de linha deve ter ficado bem claro, mas talvez a do espaço não. Vamos a mais um exemplo então?

<br />
	&lt;!DOCTYPE HTML&gt;<br />
	&lt;html lang=&quot;pt-br&quot;&gt;<br />
	&lt;head&gt;<br />
	&lt;title&gt;Aprendendo HTML&lt;/title&gt;<br />
	&lt;/head&gt;<br />
	&lt;body&gt;<br />
	&lt;p&gt;Este um par&aacute;grafo com muitos espa&ccedil;os.&lt;/p&gt;<br />
	&lt;pre&gt;Este &eacute; outro par&aacute;grafo com muitos espa&ccedil;os, mas, pr&eacute;-formatado&lt;/pre&gt;<br />
	&lt;/body&gt;<br />
	&lt;/html&gt;<br />
	

Testa lá e me conta o resultado.

O HTML mantém sempre um espaço por palavra, se for necessário (talvez por estética) inserir mais espaços eles serão ignorados sem pena. Quando isto é necessário, utilize o texto pré-formatado.

Linhas Horizontais

Este é um recurso mais estético do que outra coisa. Para criar uma linha em HTML usamos a tag ímpar <hr>. Tag ímpar pois a mesma não tem fechamento.

Vamos ver um exemplo.

<br />
	&lt;!DOCTYPE HTML&gt;<br />
	&lt;html lang=&quot;pt-br&quot;&gt;<br />
	&lt;head&gt;<br />
	&lt;title&gt;Aprendendo HTML&lt;/title&gt;<br />
	&lt;/head&gt;<br />
	&lt;body&gt;<br />
	&lt;p&gt;Abaixo deste par&aacute;grafo ser&aacute; inserido uma linha horizontal.&lt;/p&gt;<br />
	&lt;hr&gt;<br />
	&lt;p&gt;Acima deste par&aacute;grafo h&aacute; uma linha horizontal.&lt;/p&gt;<br />
	&lt;/body&gt;<br />
	&lt;/html&gt;<br />
	

Resultado:

Linhas Horizontais

Podemos utilizar alguns atributos para configurar melhor a nossa linha.

<br />
	&lt;!DOCTYPE HTML&gt;<br />
	&lt;html lang=&quot;pt-br&quot;&gt;<br />
	&lt;head&gt;<br />
	&lt;title&gt;Aprendendo HTML&lt;/title&gt;<br />
	&lt;/head&gt;<br />
	&lt;body&gt;<br />
	&lt;p&gt;Abaixo deste par&aacute;grafo foi inserido uma linha horizontal com tamanho(altura)10 e 500 de largura&lt;/p&gt;<br />
	&lt;hr size=&quot;10&quot; width=&quot;500&quot;&gt;<br />
	&lt;p&gt;Abaixo deste par&aacute;grafo foi inserido uma linha horizontal com tamanho(altura) 10 e 500 de largura e alinhamento a esquerda&lt;/p&gt;<br />
	&lt;hr size=&quot;10&quot; width=&quot;500&quot; align=&quot;left&quot;&gt;<br />
	&lt;p&gt;Abaixo deste par&aacute;grafo foi inserido uma linha horizontal com tamanho(altura) 10 e 500 de largura e alinhamento a esquerda e sem sombra&lt;/p&gt;<br />
	&lt;hr size=&quot;10&quot; width=&quot;500&quot; align=&quot;left&quot; noshade&gt;<br />
	&lt;/body&gt;<br />
	&lt;/html&gt;<br />
	

Resultado:

Linhas Horizontais - HTML

Inserindo comentários

Comentar códigos é um dos primeiros recursos que um programador deve aprender em qualquer linguagem.

Comentários são textos que são ignorados por compiladores e interpretadores. Através dos comentários o criador do código pode explicar o que esta sendo feito e o motivo.

Qualquer bom código deve conter comentários, quer seja para quem esta criando, como para outros profissionais que venham alterar o código futuramente.

Para criar comentários em HTML inicie o comentário com <<!–> e feche com –>.
Nosso exemplo:

<br />
	&lt;!DOCTYPE HTML&gt;<br />
	&lt;html lang=&quot;pt-br&quot;&gt;<br />
	&lt;head&gt;<br />
	&lt;title&gt;Aprendendo HTML&lt;/title&gt;<br />
	&lt;/head&gt;<br />
	&lt;body&gt;<br />
	&lt;!--Este &eacute; um coment&aacute;rio para dizer que abaixo est&aacute; o t&iacute;tulo da p&aacute;gina --&gt;<br />
	&lt;h1&gt;HTML&lt;/h1&gt;<br />
	&lt;!--Aqui temos um par&aacute;grafo--&gt;<br />
	&lt;p&gt;HTML &eacute; a linguagem de marca&ccedil;&atilde;o da WEB&lt;/p&gt;<br />
	&lt;/body&gt;<br />
	&lt;/html&gt;<br />
	

Resultado:

Comentários em HTML
Os comentários não foram exibidos na tela. Contudo, a mensagem para quem trabalha com o código foi deixada lá.

Inserindo Imagens

Uma boa página HTML deverá, quase sempre, conter imagens.

Uma imagem vale mais que mil palavras. Isto nunca foi tão verdadeiro quanto na internet.

Para inserir uma imagem na sua página HTML, temos que primeiro ter esta imagem já hospedada em algum lugar na web. Feito isto precisaremos do endereço onde está imagem está armazenada.

Agora que temos o endereço de nossa imagem em mãos usaremos a seguinte tag:

<img src="endereco_da_imagem" />

SRC é a abreviação da palavra "source" que significa fonte. Neste atributo devemos inserir a fonte da imagem, ou seja, de onde ela vem. Melhor dizendo, o seu endereço de localização.

É Praticando que se aprende. Então vamos lá.

Apenas um pequeno conselho antes. Procure digitar um pouco os códigos e não apenas copiar e colar. Beleza?!

<br />
	&lt;!DOCTYPE HTML&gt;<br />
	&lt;html lang=&quot;pt-br&quot;&gt;<br />
	&lt;head&gt;<br />
	&lt;title&gt;Aprendendo HTML&lt;/title&gt;<br />
	&lt;/head&gt;<br />
	&lt;body&gt;<br />
	&lt;!--Este &eacute; um coment&aacute;rio para dizer que abaixo est&aacute; o t&iacute;tulo da p&aacute;gina --&gt;<br />
	&lt;h1&gt;Inserindo Imagens&lt;/h1&gt;<br />
	&lt;!--O c&oacute;digo abaixo insere uma imagem na p&aacute;gina--&gt;<br />
	&lt;img src=&quot;http://i0.wp.com/alexanderlima.com/wp-content/uploads/2015/04/leis-de-sucesso-napoleon-hill.png&quot;<br />
	&lt;/body&gt;<br />
	&lt;/html&gt;<br />
	

Resultado:

Inserindo Imagens

Podemos utilizar alguns atributos dentro dentro da tg img.

alt – Um atributo considerado obrigatório pois nele será colocado um texto alternativo para o caso da imagem não carregar.

Width e Height – Largura e altura respectivamente. Estes atributos definem uma largura e altura específicos para a imagem. Caso não sejam informados a imagem será exibida no seu tamanho original.

Align – Define o alinhamento da imagem em relação ao texto. Os valores possíveis são:

  • Bottom – Realiza o alinhamento pela parte inferior da imagem.
  • Top – Realiza o alinhamento pela parte superior da imagem.
  • Left – Alinha a imagem a esquerda do texto.
  • Right – Alinha a imagem a direita do texto.

Hspace e Vspace – Determina um espaço vertical e/ou horizontal respectivamente entre a imagem e o texto em volta. Útil quando o texto fica colado demais na imagem.

Vamos repetir o nosso exemplo utilizando alguns destes atributos? Então, mãos ao teclado.

<br />
	&lt;!DOCTYPE HTML&gt;<br />
	&lt;html lang=&quot;pt-br&quot;&gt;<br />
	&lt;head&gt;<br />
	&lt;title&gt;Aprendendo HTML&lt;/title&gt;<br />
	&lt;/head&gt;<br />
	&lt;body&gt;<br />
	&lt;!--Este &eacute; um coment&aacute;rio para dizer que abaixo est&aacute; o t&iacute;tulo da p&aacute;gina --&gt;<br />
	&lt;h1&gt;Inserindo Imagens&lt;/h1&gt;<br />
	&lt;!--O c&oacute;digo abaixo insere uma imagem na p&aacute;gina--&gt;<br />
	&lt;img alt=&quot;Texto Alternativo&quot; width=&quot;200&quot; height=&quot;200&quot; align=&quot;left&quot; hspace=&quot;20&quot; vspace=&quot;10&quot; src=&quot;http://i0.wp.com/alexanderlima.com/wp-content/uploads/2015/04/leis-de-sucesso-napoleon-hill.png&quot; /&gt;<br />
	&lt;p&gt;Um texto qualquer perto da imagem.&lt;/p&gt;<br />
	&lt;/body&gt;<br />
	&lt;/html&gt;<br />
	

Resultado:

Inserindo Imagens com atributos

Conclusão

Aprendemos muitos conceitos novos. Conhecemos algumas boas ferramentas para não somente criar nosso código em HTML mas criar uma página Web completa.

Já sabemos a estrutura básica de um arquivo HTML e dentro dele a importância da tag title não só pelo motivo de ser exibida na aba do navegador mas também por ser utilizada pelos buscadores.

Depois deste post você já consegue criar uma página HTML com títulos, parágrafos, linhas horizontais e imagens.

Utilize as ferramentas citadas (principalmente as que são online) para visualizar os códigos e praticar. Altere os códigos, faça experiências e procure digitar os códigos, não somente copiar. Ok?

O principal: TENHA DÚVIDAS e fique a vontade para perguntar nos comentários.