Meu Primeiro SiteMeu Primeiro Siteem um site utilizamos apenas 1 H1 e podendo utilizar outras tag de titulo diversas vezes
Aqui estou usando uma tag p para adicionar uma paragrafo novo
Podemos utilizar a tag b para deixar palavras em negrito
Outra forma de deixar uma palavra em negrito, é utilizando a tag strong, porém a diferença entre
elas é que a tag strong é utilizada para da ênfase a palavra.
Fazendo com que o navegador entenda que aquela
parte é algo importante para se dar destaque.
Aqui eu vou testar a quebra de paragrafo na mesma linha de codigo utilizando a tag p no meio
Fugit repudiandae quam molestias nesciunt maiores ipsum necessitatibus consequatur, eum dignissimos vero veritatis dolorem enim culpa quisquam et numquam iusto nihil fugiat.Vou adicionar uma linha divisória utilizando a tag hr
Aqui vou testar a quebra de linha utilizando a tag br
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Labore inventore rem, nostrum id esse totam enim
magni accusamus expedita fugit non quia nobis natus laborum asperiores possimus. Amet, odit minima?
Podemos utilizar mais de uma vez seguida a tag br para pular linha, exemplo:
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Modi possimus animi tempore iusto
cupiditate, deleniti autem quidem aperiam eum aliquid magni assumenda eius officiis amet sapiente hic ullam
minus saepe.
Usamos a tag i para deixar o texto em italico, como usei no titulo.
Usamos a tag u para deixar algo em underline ou sublinhado.
Usamos a tag small para deixar uma parte do menor. Um exemplo que podemos dar utilizando essa tag:
Usamos a tag del para riscar um texto, exemplo:
De R$100 por R$50
Usamos a tag sup para deixar um texto em exponencial: 10123abc
Usamos a tag sub para deixar um texto em logaritmico: 10123abc
Para utilizar links nós usamos a tag "a".
Clique aqui para ir para o
Google
Dessa forma somos encaminhados direto para o site, para conseguirmos abrir o site em uma nova aba, nós
adicionamos o atributo "target="_blank"" depois do link do site.
Clique aqui para ir para o Google
Aqui nós utilizamos um link referenciando um documento do nosso próprio projeto
Sobre
nós
Nós podemos referenciar pastas do nosso projeto também da seguinte forma: [nome_da_pasta/nome_do_arquivo]
Kaue
Podemos adicionar imagens utilizando a tag img, nela podemos acrescentar arquivos jpg, png, gif.
Podemos mudar
o tamanho da imagem utilizando o atributo width.
Podemos fazer interações com as imagens, utilizando image map (passando o mouse por cima do mario e do luigi)
Para criarmos uma tabela, utilizamos a tag table.
Essa tag tem um padrão para tabalhar com ela, da mesma forma
que fazemos uma tabela no papel com linhas e colunas, no HTML nós fazemos da mesma forma.
Colocamos a tag tr
para
indicarmos que aquilo é uma linha. Na primeira linha colocamos os titulos das colunas. (Para colocarmos os
conteúdos nas colunas, criamos outras linhas em baixoda primeira tag tr)
Para indicarmos essa coluna usamos a
tag th (só utilizamos a tag th na primeira linha)
Podemos editar a aparência da tabela com atributos da tag table como por exemplo o atributo width que muda o
tamanho da tabela.
Podemos adicionar bordas na tabela com o atributo border
| Nome | Idade | Peso |
|---|---|---|
| Kauê | 18 | 60kg |
| Alguem | 18 | 55kg |
Para criarmos uma lista não ordenada nós usamos a tag ul(unordered list)
Dentro dessas tag nós usamos tags
filhas li(list item)
Para listas ordenadas nós utilizamos a tag ol(ordened list)
Dentro dessas tag nós usamos tags filhas li(list
item).
Nesse tipo de lista, ela vai ficar uma lista numerada com as ordens
Os iframes é uma maneira de mostrar um página web, dentro de uma página html. Ex: Um sonho dentro de um
sonho.
Utilizando a tag iframe, nele podemos adicionar um documento(imagem, site, video, gif, arquivo...) com
a tag src, definir um tamanho com width e height e um titulo com title.
Aqui utilizei a ferramenta de encorporar (na opção de compartilhar vídeo) no vídeo do youtube fazendo assim que eu consiga pegar o iframe diretamente.
Também são conhecidos como dados de entrada, como por exemplo em áreas de login. Geralmente essa área está ligada com a aparte do backend (com o DB)
FormulárioPodemos utilizar áudios em nossas páginas, são bem comuns e simples de se usarem
Página de áudioOs vídeos funcionam basicamente da mesma forma que os áudios
Página de VídeoAs div's e o html semântico são um ponto fundamental para o progresso do programação web.
As div's, como o
próprio nome diz servem para criar divisórias em uma página, dividindo-as em blocos:
(o mais comum é uma página
ter um bloco 1.topo/2.menu de pesquisa/3.conteúdo/ 4.conteúdo).
Para fazer isso, usamos a tag "div" e dentro
dela colocamos o conteúdo que queremos, a tag div é uma tag neutra.
Ele nasceu pra ter um significado, tanto pro navegador quanto pros programadores, de conseguirmos entender o contexto do site.
Por exemplo, quando temos uma "div" para determinarmos que ela é o topo, utilizamos uma tag semantica no lugar da "div" nesse exemplo do topo usamos a tag "header".
Caso queira ver outros elementos semanticos: Clique aqui