1

HTML - Básico

#HTML
Renan Vale
Renan Vale

Introdução ao HTML


Títulos e Parágrafos

<h1> mais importante (fica em destaque na página)
<h2>
<h3>
<h4>
<h5>
<h6> menos importante (fica em menos destaque na página)

<p>...</p> = parágrafo


Semântica

<body>...</body> = <!--todo conteúdo visto pelo usuário fica aqui dentro-->

<section>...</section> = <!--seção genérica da página-->

<header>...</header> = <!--cabeçalho da página (podem ter mais de um header na página)-->

<article>...</article> = <!--Conteúdo relevante em formato de blog ou artigo (normalmente de menções externas)-->

<aside>..</aside> = <!--para links na barra lateral da página, usado muito em blogs-->

<footer>...</footer> = <!--rodapé, normalmente com informações de contato-->



Links

<a>...</a>

Pode-se usar atributos na tag a:
<a href="https://web.digitalinnovation.one">DIO</a> <!--link para onde deseja inr ao clicar-->

<a href="https://web.digitalinnovation.one" target="_blank">DIO</a> <!--o target_blank indica que quando for clicado o link abre uma nova aba no browser-->


Imagem

<img>

Assim como na tag a a tag img podemos ter alguns atributos básicos:
<img src="pasta/nomeArquivo.jpg"> <!--precisamos da pasta onde o arquivo está e o nome doarquivo que vamos puxar para o html-->

<img src="pasta/nomeArquivo.jpg" alt="descreve a imagem"> <!--descreve o que tem na imagem quando ela não pe carregada-->


Listas

Lista Ordenada
<ol>...</ol> <!--Ja são criadas em ordem-->

Exemplo:
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Lista não Ordenada
<ul>...</ul> <!--não tem ordem nos iténs-->

Exemplo:
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>         

As li inseridas dentro as listas servem para adcionarmos informações a nossa lista.

Exemplo de como o browser mostra as listas


Lista Ordenada

  1. Itém 1
  2. Itém 2
  3. Itém 3


Lista não Ordenada

  • Itém 1
  • Itém 2
  • Itém 3


Comentários

<!-- --> = o comentário em html se faz dessa forma, com o contéudo no centro dos caracteres. Todo comentário não pode ser vizualizado pelo browser, apenas no cód fonte.
6
25

Comentários (7)

0
A

Ana Pinheiro

01/07/2021 11:27

Muito legal! Ficou bem simples e bem explicado

1
Lorrayne Coelho

Lorrayne Coelho

29/06/2021 19:06

Muito bom!

1
Fernando Brigida

Fernando Brigida

29/06/2021 19:08

Super legal!

1
Thiago Oliveira

Thiago Oliveira

29/06/2021 19:13

Só não me fala que é linguagem de programação se não peço para te dar ban, hahaha brincadeiras a parte ficou top irmao

1
Carolina Lima

Carolina Lima

29/06/2021 19:16

Adorei!

1
Tatiana Terra

Tatiana Terra

29/06/2021 19:17

Top Renan :)

1
Fernanda Hirose

Fernanda Hirose

29/06/2021 20:18

Ficou bem organizado, obrigada por compartilhar! <3

None