Codigos Html

Criação: Jean Santos.
E-mail Para Contato. jean_santos58@hotmail.com
instagram para Contato. vr2_marins click aqui.

Boa Sorte!

Nesta Site vamos aprender um pouco sobre Html:

Antes de começar, queria passar algo sobre do meu Idolo, que me motiva e pode te motivar tambem. Ayrton Senna.

"Ayrton Senna nos ensinou que 'o sucesso é um conjunto de pequenas vitórias'. Ele acreditava que 'a disciplina é a base do sucesso', lembrando-nos da importância da dedicação. 'Quem não arrisca, não petisca' nos incentiva a enfrentar desafios. Senna valorizava a paixão pelo que fazemos e sempre nos motivou a dar o nosso melhor. Ao encarar obstáculos, lembre-se: a verdadeira vitória está em se superar a cada dia. Ayrton Senna."

Imagem Ayrton Senna

A vida é uma jornada repleta de desafios e oportunidades, e cada dia é uma nova chance para se reinventar e perseguir seus sonhos. Lembre-se de que as dificuldades são apenas degraus para o seu crescimento; cada obstáculo superado é uma vitória que te torna mais forte e resiliente. Não tenha medo de falhar, pois é nas quedas que encontramos as lições mais valiosas. Acredite em si mesmo, mantenha o foco e avance com coragem; o sucesso não é apenas um destino, mas sim o resultado da determinação e da paixão que você coloca em cada passo. Você possui dentro de si a força para transformar seus sonhos em realidade. Vá em frente e brilhe!

Oque SãoTAGS?

Tags em HTML são instruções que definem a estrutura e a apresentação de uma página da web. Elas permitem que o navegador entenda e organize o conteúdo, como texto, imagens e links. Cada tag pode ter atributos que fornecem informações adicionais. Por exemplo, a tag `` é utilizada para criar hyperlinks, enquanto a tag ` ` representa um parágrafo de texto. Aqui está um exemplo:

Este é um parágrafo de texto falando um pouco sobre Tags, e abaixo um link para um site com explicação mais dedicada.

TagsHtml_Click Aqui. Para quem for se aprofundar mais, uma boa indicação.

H1 ate o H6 São Cabecalho.

Não pode ultilar codigo de cabelho so para deixar letra maoior ou em negrito, tem outros codigos para isso.

Não pode usar mais de um H1 em qualquer Site!

Se ultilizar mais de um, ele atrapalha o "SEO" (optimização para motores de busca do google) todo restante pode ser usado o H2 que é subtitulo e dai por diante com os outros H4,H5,H6, eles mudam o tamanho do Titulo Os mais Comuns São o H1, H2 e H3.

Titulos Não da para mudar o lugar deles com a tag "align"

Titulo

Este é como cria para anexa link.

Esse é exemplo de como cria e anexa "link"

(< a href="https://www.esselinkefalso.com"> e em seguida oque escreve < /a>) , é oque sai escrito no link ate voce terminar de escrever e fechar o ">", la no começo voce tem que escrever junto o "< a" e no final tem que estar junto tambem "< /a>"

Se você quiser que ele abra o link e abra em uma pagina nova, se escreve assim. "< a href="linkquevocevaipor">targer="_blank"nomedolink< /a>" Exemplo: google

Aqui criei um link para me trasferir para outro site que eu criei em html aqui no Vscode para funcionar, no lugar de colocar o link voce escreve o titulo.html da pagina que você esta criando.

Para voltar tem que Digite para retornar a pasta anterior.

Assim voce retrocede a pagina que você entrou, o "../" antes do link/ ou sua pagina significa que ele esta voltando para antes de entrar na pasta. Para voltar mais de uma pasta, basta digitar "../../"

Exemplo: "< a href="../pastaquevocetiverentrado">NomeQueVaiFicarNoLink < /a>" "

Pra Entrar em uma Pasta: "< a href="nomedapasta/nomedosite.html"> < /a>

Esse é uma tag para ajudar nos Teste.

Para criar um texto rapido para testar algo (sai escrito em latim), escreva tudo junto "p > lorem"

Exemplo

====> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et quod suscipit reprehenderit a, quaerat sunt aspernatur velit ad, iusto consectetur iure ipsa sequi quia nisi dolores quasi nihil doloremque. Excepturi. <====

Este é uma Ajuda para agilizar a Digitação.

Atalho para faciliar a digitação dos codigos, da para fazer o codigo "3 vezes de uma vez,"" ele cria o codigo 3 vezes para você, e você não precisa ficar digitando

Exemplo
Digite tudo junto "p * 3" pode ser usado em outros codigos Tambem "h1*3" (sempre digitar junto sem as aspas "")

Atalhos.

O codigo "i" deixa a escrita em Italico

A tag "u" cria um underline embaixo da palavra

Exemplo, underline exemplo exemplo exemplo!

Para escrever algo em negrito

Codigo é "b" ou "strong", porem o codigo strong, ele da uma enfase na frase, o navegador entende que a parte que esta escrita com o codigo "strong", é uma parte importante, ai ele da enfase para ela.

Esse Tag "small"

Deixa uma parte do texto bem pequena.
Exemplo (texto criado com lorem/frase destacada em negrito.)

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam inventore sint laboriosam iste enim voluptates molestias tempora reiciendis pariatur quos impedit placeat odit facilis, et quo optio expedita ab! Architecto!

Marcação de Texto.

Para Marcar um texto, ultilize a Tag "mark"
Exemplo: Tenha um Otimo Dia.
Ecrita da Tag é "" porem tudo junto.

Esta Tag Cria umma Risca na Palavra.

Tag "< del >" (Tambem Existe a Tag "Strike", porem esta sendo muito pouco ultilizado.)
Exemplo= Valor de ~~497,90~~, por 19,50 apenas!
Exemplo com oa dois Vou dar De ~~Presente~~ ^Venderoque me pediu.

Numero Elevado a outro Numero.

Escreva Tag "
Exemplo, 2¹⁰
A escrita dele é feita com "Numero Numero ", Porem Escrito Juntos. Oposto dele é o "sub", escrito da mesma forma. Pode ser feito Com letra tambem. Exemplo 2₁₀
Exemplo le_gal
Exemplo com A Tag a cima: Eu que ~~Comprei~~ ^Ganheio Presente.

Tag Para Criar uma Linha

Codigo "hr" cria uma linha.

Exemplo
Escrita "< hr>"

Texto em Movimento

Texto em Movimento

Esse codigo "marquee" faz o texto ficar em movimento, é uma animação.

Exemplo

Você escreve tudo junto novamente, este é só exemplo. "< marquee> "

Assim Define Aonde o Texto vai Ficar.

Brasil

Se escreve assim: " porem com o "<" junto do "p" para funcionar.

Elementos de Citação.

Estamos Aprendendo HTML
Deixe o Ponteiro do Mouse em cima.

Exemplo ( "< abbr title="a palavra sem abreviação"> < /abbr> ) porem o "<" junto com o "abbr"
Tag importante para Abreviação de Texto.
Exemplo você conhece o inicio de um site com: WWW

Endereço/Address.

Jean

Rua Tal Tal Tal n^o50?
Exemplo Para Fazer Endereço: "< address> endereço lugar tal tal tal < /address>"
Abreviação Address: Traduzido para Pt-Br.
Exemplo 2
Esse é o meu endereço do instagram:
Vr2_martins

Tag Sobre Teatro, Filme, Serie, Livro, Obra.
Exemplo:
Filme Titanic: Ator Principal.
5 Curiosidade sobre o Filme: FilmeTitanic
Escrita da Tag "< cite>" porem tudo junto.
Uma citação dita pelo autor do filme, seria feito com a Tag "q"
Exemplo
Leonardo de Caprio disse: Você poderia ter me puxado Rose.
Este é uma Citação Curta.

Bloco que Deixa um destaque na frase ou no Paragrafo.

Exemplo
(Texto criado com p> lorem)

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum, magnam quaerat quibusdam mollitia consequuntur quas culpa nulla, cum placeat alias, excepturi accusamus ea iure? Sed facilis aliquid minima dolore vitae!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum, magnam quaerat quibusdam mollitia consequuntur quas culpa nulla, cum placeat alias, excepturi accusamus ea iure? Sed facilis aliquid minima dolore vitae!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum, magnam quaerat quibusdam mollitia consequuntur quas culpa nulla, cum placeat alias, excepturi accusamus ea iure? Sed facilis aliquid minima dolore vitae!

Se escreve "< blockquote>" < /blockquote>"

Esccolhendo a Direção do Texto.

Exemplo: Jean
Fica escrito ao contrario, mas voce pode colocar "left", que seria a forma correta.
a Tag é escrita assim "< bdo dir="< lft>< rft>" Porem Sem o Espaço.

Tag de Imagem, Importante!
A tag se inicia assim " < img src=""> ""

Nesta formaa, você pega o link da imagem diretamento do link que ela gera quando voce abre a imagem no navegador, dessa forma ela sai no proprio tamanho dela.

Nesse Exemplo é como você muda o tamanho da imagem.
digite a Tag assim "< img src=https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/640px-HTML5_logo_and_wordmark.svg.png"width="300">
O Significado de: Width coloque o ponteiro do mouse em Cima.
Serve Para definir a Largura da Imagem.

O Significado de: height coloque o ponteiro do mouse em Cima.
Serve Para definir a Altura da Imagem.

O Significado de: alt coloque o ponteiro do mouse em Cima.
Serve para ler a imagem e algum deficiente visual ultilizar a ferramenta para ler a imagem e falar para ele. Esse é importante para o Google.

Fazer site com url direto de alguma pagina não é recomendado, pois pode ter direitos altorais, a pagina que a está imagem pode parar de existir algum dia, e a imagem não ira aparecer mais. A melhor opção é ultilizar a suas imagens.

Exemplo:

Feito com Imagem puxada da pasta "img/carro.png"

O Tamanho/Peso da imagem influencia na velocidade do seu Site:
Você pode ultilizar sites que diminui o peso da imagem, escrevendo "Compress jpg/png.. oque sua imagem for."

As Imagens em .Png são mais leves. Estreala feita em .png: (Feita por Mim.)

Este é um Gif, a criação dele é da mesma forma que as Imagens. este gif foi pegado no google.

Assim cria um map para mostrar cada item que esta na imagem, é ultilizado outro site para poder criar o mapa, depois você copia o link la e cola no lugar do Tag img que esta a imagem para substiituir

Aqui estamos fazendo uma imagem com mapa localizado para o item
Basta Passar o ponteiro do Mouse em cima dos itens que estão na imagem (pc, teclado, mouse).
Este é uma imagem abaixo com função de click que redireciona para sua outra pagina.

Click Na Imagem.

Para criar este, basta criar um link no seu site, e dentro adicionar a imagem e so depois disso finaliza a criação do link.

Para adicionar um icone

Este é um Icone Ilustração de icone
A escrita é a mesma de adicionar uma imagem, Você tambem pode alterar o tamanho.

Exemplo: < img src="Img/html-5-icone.png"> Ilustração de icone
Pagina do criador do Icone.

Lorem ipsum dolor sit amet consectetur adipisicing elit. A, perspiciatis. Magnam consequuntur minus et reiciendis. Autem laborum, doloremque temporibus nam exercitationem laudantium beatae eaque nihil quidem et fuga incidunt accusantium!

| linksobrehtml | SobreNós | DocumentoJean | Formulario | Audio | Video |

TEXTO PARA TESTE DE FUNÇÃO "CSS"

Este site não ensinara CSS!
Entre em Contato Caso Tenha interesse: +55 (11)95734-3447