Tags básicas
- <h>
- A tag <h(1-6)> é utilizada para definir um título na sua página. Ela possui uma hierarquia de 1 a 6. Exemplo:
- <p>
- A tag <p> é utilizada para definir um parágrafo na sua página. Exemplo:
- <b>
- A tag <b> é utilizada para colocar um texto em negrito. Exemplo: Termo em negrito
- <i>
- A tag <i> é utilizada para colocar um texto em itálico. Exemplo: Termo em itálico.
- <sup>
- A tag <sup> é utilizada para colocar um texto para cima. Sendo muito utilizada na matemática. Exemplo: 102
- <sub>
- A tag <sub> é utilizada para colocar um texto para baixo. Exemplo: H2O.
- <u>
- A tag <u> é utilizada para colocar um texto em sublinhado. Exemplo: Termo com a tag <u>
- <big>
- A tag <big> é utilizada para deixar um texto grande. Exemplo: Termo com a tag <big>
- <small>
- A tag <small> é utilizada para deixar um texto pequeno. Exemplo: Termo com a tag <small>
- <strong>
- A tag <strong> é utilizada para deixar um texto em destaque, semelhante ao negrito da tag <b>, mas a tag <strong> possui semântica. Exemplo: Termo com a tag <strong>
- <em>
- A tag <em> é utilizada para deixar um texto em ênfase, semelhante ao itálico da tag <i>, mas a tag <em> possui semântica. Exemplo: Termo com a tag <em>
- <q>
- A tag <q> é utilizada para indicar uma citação simples. Exemplo:
O motivo da guerra é a paz.
- Sun Tzu. - <blockquote>
- A tag <blockquote> é usada para fazer uma citação completa. Exemplo:
- <ins>
- A tag <ins> é utilizada para indicar que um texto foi inserido, ela é semelhante a tag <u>, mas a tag <ins> possui semântica. Exemplo: Termo com a tag <ins>
- <del>
- A tag <del> é utilizada para indicar que um texto foi deletado, mas deve ser lido. Exemplo:
Termo com a tag <del> - <abbr>
- A tag <abbr> é geralmente utilizada em abreviações, ela diz o significado ao passar o mouse por cima. Exemplo: HTML
- <mark>
- A tag <mark> adiciona uma marcação ao texto, semelhante ao uso de um marca-texto. Exemplo: Termo com a tag ><mark>
Exemplo de uso da tag <h>
Exemplo de uso da tag <p>
Por vezes, nem sempre o confronto direto será a solução mais inteligente a ser tomada. É preciso encontrar outras formas de lidar com um problema sem que isso seja a força bruta. Use sua mente, explore possibilidades e aprenda a sair por cima de forma digna e criativa.
Comentários
Você pode inserir comentários nos seus códigos, eles são invisíveis e não apareceram no navegador. Geralmente são utilizados para fazer anotações sobre o próprio código, para assim serem lidos por si ou por outro desenvolvedor. Para colocá-los, você usa a tag <!---->
Style e color
Você também pode inserir estilos no seu código, usando CSS.
Tag style
Existem alguns atributos que você pode colocar na tag style, alguns deles são: color, background-color, font-family, font-size, text-allign.
Como usar CSS no seu código?
Existem 3 formas de adicionar CSS, elas são: inline, interna e externa.
Inline
Você usa CSS no próprio código que você quer estilizar. Existem muitas desvantagens nessa forma, sendo recomendada a ser usada quando é estritamente necessária, é preferível utilizar a forma interna e externa. Exemplo:
CSS inline
Interno
Você coloca o código CSS no head do seu código HTML. Essa forma é recomendada quando o código CSS se aplica a apenas uma página, não sendo recomendada quando passa a ser duas ou mais, pois dificulta mudanças no código CSS do site.
Externo
Você adiciona o código CSS por meio de um código no head do seu código HTML. O código utilizado é <link rel="stylesheet" href="nomedoarquivo.css">. Essa forma é recomendada quando o site é composto por mais de uma página, favorecendo futuras mudanças no código do site e uma melhor organização.
Links
Links externos
Você pode adicionar links externos ao seu código HTML por meio da tag <a>. Exemplo com um link externo: Google
Links internos
Você pode adicionar links internos ao seu código HTML por meio da mesma tag, mas linkando a um arquivo do seu mesmo servidor. Exemplo com um link interno: Curso de HTML
Colocando imagens
Você pode adicionar imagens ao seu site por meio da tag <img>
Imagens externas
Você pode adicionar imagens externas ao seu site por meio da tag img linkando para uma imagem externa. Exemplo de uso:
Imagens internas
Você pode adicionar imagens do seu próprio computador para o site. Exemplo:
Imagens clicáveis
Também é possível fazer uma imagem clicável.
Colocando vídeos
Você pode colocar vídeos no seu site por meio da tag <video>
Vídeos internos
É possível colocar vídeos internos no site. Exemplo:
Vídeos externos
Também é possível adicionar vídeos externos, principalmente por meio da incorporação. Exemplo:
Listas
É possível adicionar listas ao seu site, existem 3 tipos de lista: ordenada, não ordenada, definição.
Listas não ordenadas
Listas não ordenadas, assim como o nome diz, elas não possuem uma ordem. Para colocá-las utilize a tag <ul>. Exemplo de lista não ordenada:
- 5 ovos
- 2 xícaras de açúcar
- 2 xícaras de farinha de trigo
- 1 xícara de leite quente
- 1 colher de fermento em pó
Receita de bolo - Ingredientes
Atributos
Existem alguns atributos que podem ser atribuidos às listas não ordenadas, eles são: type="disc, square, circle".
Listas ordenadas
Como o nome diz, são listas que possuem uma ordem. Para colocá-las utilize a tag <ol>. Exemplo de lsita ordenada:
- Bata na batedeira as claras em neve, adicione as gemas uma a uma e continue batendo, junte o açúcar e bata mais um pouco.
- Junte a farinha peneirada e o leite bem quente e mexa bem, sem bater, por último coloque o fermento.
- Leve para assar em forma redonda sem buraco no meio, untada e enfarinhada em forno pré-aquecido em temperatura média por no máximo 30 minutos ou quando tiver dourado e bem sequinho.
- Cresce bastante e fica bem fofinho.
Receita de bolo - Preparo
Atributos
Existem alguns atributos que podem ser atribuidos às listas ordenadas, eles são: type="A, a, I, i, 1".
Listas de definição
Listas de definição são listas que servem para listar, organizar e definir termos. Para colocá-las use a tag <dl>
- HTML
- HyperText Markup Language, usado para o conteúdo de um site.
- CSS
- Cascading Style Sheets, usado para o estilo de um site.
- JavaScript
- Usado para a interatividade de um site.
Tables
É uma forma de formatar informações para os usuários, parecido com o que acontece no Excel. Para colocá-los use a tag <table>. Exemplo:
Time 1 | Time 2 | Time 3 | Time 4 | Time 5 |
---|---|---|---|---|
30 | 40 | 50 | 70 | 70 |
20 | 30 | 40 | 50 | 60 |
40 | 50 | 60 | 70 | 80 |
Atributos
Um atributo pode ser usado para uma coluna ocupar mais espaço, ele é denominado como: colspan=""
Divs e Spans
Inlines e blocks
Antes de falar sobre Divs e Spans, é importante entender o conceito de um elemento inline e um elemento block. O HTML tem duas formas principais de mostrar um elemento no navegador, elas são inline e blocks.
Block
Um elemento block, assim como o nome diz, ocupa um bloco na página, pegando todo o espaço da tela em que ele está inserido, elementos blocks não podem ficar um ao lado do outro. Exemplo de elemento block:
Block1
Block2
Como você pode observar, eles não conseguem ocupar a mesma linha, pois eles ocupam um bloco na tela.
Inline
Um elemento inline não ocupa todo o espaço da página em que ele está inserido, podendo ficar um ao lado do outro. Exemplo de elemento inline:
Inline1 Inline2Como você pode observar, eles conseguem ocupar a mesma linha, desde que haja espaço.
Agora que você entendeu o conceito de inline e blocks, podemos entender Spans e Divs
Spans
Spans são elementos inline, eles são usados como contêiner para outros códigos HTML. Para colocá-los use a tag <span>. Exemplo:
Span1 Span2Divs
Divs são elementos block, eles também são usados como contêiner para outros códigos HTML. Para colocá-los use a tag <div>. Exemplo:
Input e Forms
Input
Tags input permitem que você coloque espaços no site onde usuários podem colocar informações. Para colocá-los use a tag <input>. Exemplo:
Atributos
Existem alguns atributos que você pode adicionar, alguns deles são: type="date, file, range, radio, checkbox, submit, password."
Form
A tag <form> é usada para armazenar todos as tags <input>
Metatags
Metatags são colocadas no head do seu código
- <meta name="description" content="Escreva aqui">
- Essa tag coloca uma descrição no seu site.
- <meta name="author" content="Escreva aqui">
- Essa tag define o autor do site