Códigos HTML - Hypertext Marking Language

por **HuemersonFMG** Seg 26 Set 2022, 15:12

Códigos HTML - Hypertext Marking Language

O acrônimo HTML significa Linguagem de Marcação de Hipertexto ou Hypertext Marking Language. Esse tipo de código gera sites estáticos, mas se usado em conjunto com outras linguagens de programação, também pode criar sites dinâmicos. É composta por elementos imagens, textos, hiperlinks, listas de palavras e tabelas, que os navegadores traduzem em sua tela.

Para criar uma página web completa, você deve fazer uso de documentos HTML organizando os códigos a serem utilizados. Este documento é um arquivo com extensão html e pode ser criado em um editor de textos de sua escolha. Para que um texto ou uma imagem seja lida nesse tipo de código, ele deve sempre ter uma marca de início e uma de fechamento conhecidas como Tags, que são utilizados para informar ao navegador que tipo de estrutura é essa que está sendo construída, podendo ser títulos, parágrafos, imagens, links, entre outros.

Exemplos de algumas Tags:
• <html></html> – Esta tag é o elemento básico da estrutura do HTML. Assim sendo, ela conterá todos os elementos do seu documento. Todo documento HTML deve iniciar e finalizar com essa tag;
• <head></head> – Essa tag delimita o cabeçalho do documento. Não possui nenhum valor visível, porém é capaz de transmitir ao navegador diversas informações muito úteis e essenciais a uma boa apresentação do seu documento HTML;
• <title></title> – Essa tag define o título da sua página, o nome que aparecerá na sua aba, janela ou guia. Por esta razão, a tag >title> é de grande importância para o SEO;
• <meta/> – Essa tag permite inserir metadados ao seu documento, no caso acima, a informação charset=”UTF-8″, que garante a compatibilidade do código com os caracteres de padrão latino americano;
• <body></body> – Finalmente, a tag que representa o corpo do documento. Em síntese, é nessa tag que todos os elementos visíveis do seu site devem ser

Tipos de Imputs:
Tipo Função
• button - Define um botão clicável (usado principalmente com um JavaScript para ativar um script)
• checkbox - Define uma caixa de seleção para seleção de várias opções
• color - Define um seletor de cores em hexadecimal
• date - Define um controle para selecionar data (ano, mês, dia (sem hora))
• datetime-local - Define um controle para selecionar data e hora (ano, mês, dia, hora (sem fuso horário)
• email - Define um campo para entrar com endereço de e-mail
• file - Define um campo para selecionar um arquivo e um botão "Procurar" (para uploads de arquivo)
• hidden - Define um campo oculto
• image - Define uma imagem como o botão de envio
• month - Define um controle para selecionar mês e ano (sem fuso horário)
• number - Define um campo para selecionar um número inteiro
• password - Define um campo para senha
• radio - Define um botão de opção para seleção única
• range - Define um controle de intervalo (como um controle deslizante)
• reset - Define um botão para reinicar o preenchimento do formulário
• search - Define um campo de texto para inserir uma string de pesquisa
• submit - Define um botão para enviar os dados do formulário
• tel - Define um campo para inserir um número de telefone
• text Input padrão. - Define um campo de texto de linha única
• time - Define um controle para inserir um horário (sem fuso horário)
• url - Define um campo para inserir uma URL
• week - Define um controle para selecionar semana e ano (sem fuso horário)

Código para alguns tipos de Inputs:

Código:: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FMGarcia - Tipos de Inputs</title> <style>h2 {color: blue;}</style> </head> <body> <h2>FMGarcia - Tipos de Inputs:</h2> <a href="https://familiagarcia-samp.forumeiros.com/post?p=521&mode=editpost">Pagina - Inputs</a> <hr> <form method='POST' action='recebe-dados.php'> <label for="nome">Nome</label> <input type='text' id='nome' name='nome' required> <label for="email">Email</label> <input type='email' id='email' name='email' required> <br> <label for="fone">Celular com DDD</label> <input type="tel" id="fone" name="fone" required pattern="[0-9]{2} [0-9]{5}-[0-9]{4}" placeholder="11 99999-9999"> <label for="hora-desejada">Hora desejada</label> <input type="time" id="hora-desejada" name="hora-desejada" required> <br> <label for="site">Seu site</label> <input type="url" id="site" name="site" required> <label for="senha">Senha</label> <input type='password' id='senha' name='senha' required> <br> <label for="dtnasc">Data Nasc</label> <input type='date' id='dtnasc' name='dtnasc'> <label for="cor">Cor favorita</label> <input type='color' id='cor' name='cor'> <br> <label for="filhos">Qtde Filhos</label> <input type='number' id='filhos' name='filhos'> <label for="peso">Peso</label> 0<input type="range" id="peso" name="peso" min="0" max="200">200 <br> <p>Carinho:</p> <input type="radio" id="Carinho-m" name="Carinho" value="Masculino"> <label for="Carinho-m">Masculino</label><br> <input type="radio" id="Carinho-f" name="Carinho" value="Feminino"> <label for="Carinho-f">Feminio</label> <br> <label for="estado">Estado</label> <select id="estado" name="estado"> <option value="SP">SP</option> <option value="RJ">RJ</option> <option value="PB">PB</option> </select> <br> <hr> <label for="msg">Mensagem</label><br> <textarea id="msg" name="msg" rows="4" cols="50"></textarea> <br> <input type="reset" value="Reset"> <input type="submit" value="Enviar"> </form> </body> </html>

Códigos HTML - Hypertext Marking Language Imc1215

Local Storage e Session Storage
Permite o armazenamento de strings com chave e valor sendo considerado cookies e é uma forma mais segura de armazenamento porém não tem acesso através de Service Worker. É um recurso nativo no browser e de implementação simples não necessitando de plugins ou librarys externas, com ele podemos armazenar dados apenas em formato de texto, mas claro podemos contornar essa limitação. Vamos primeiro exemplo básico de armazenamento. Para visualizar a informação que foi salva, no Google Chrome para abrir o developer Tools vamos em menu > View > developer > developer tools, tecla de atalho ctrl+shift+i ou simples clique o com botão direito do mouse e selecionamos a opção inspect, com developer tools aberto vamos à aba Application, na sessão storage vemos a opções disponíveis.

Código:: localStorage.setItem("key_da_propriedade","Valor armazenado");

Para remover essa informação do localStorage utilizamos o seguinte código:

Código:: localStorage.removeItem('key_da_propriedade');

Abaixo um exemplo prático de uso:
Pode inserir o código diretamente no VS Code para ver o resultado.

Código:: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>FMGarcia - LocalStorage - Exemplo simples</title> <script> window.addEventListener('load',() => { if(localStorage.getItem('name')){ sayMyName() }else{ whatsYourName() } }); function whatsYourName(){ document.body.innerHTML = ''; // criando um input para cadastrar o nome; const inputName = document.createElement('input'); inputName.type = 'text'; inputName.placeholder = 'Digite seu nome'; inputName.id = 'nome'; document.body.appendChild(inputName); // criando saveButton const saveButton = document.createElement('button'); saveButton.innerHTML = 'Salvar'; document.body.appendChild(saveButton); // adicionando listener para salvar a informação saveButton.addEventListener('click', saveName); } function sayMyName(){ document.body.innerHTML = ''; // criando mensagem const welcomeMessage = document.createElement('h1'); welcomeMessage.innerText = 'Olá' + localStorage.getItem("name"); // criando removeButton const removeButton = document.createElement('button'); removeButton.innerHTML = 'Excluir'; document.body.appendChild(removeButton); // adicionando o listener para remover informação removeButton.addEventListener('click',removeName); } function removeName(){ if(localStorage.getItem('name')){ localStorage.removeItem('name'); whatsYourName() } } function saveName(){ var nome = document.getElementById('nome').value; localStorage.setItem('name', nome) sayMyName(); } </script> </head> <body> </body> </html>

Estrutura básica de uma página [HTML]

Código:: <!DOCTYPE html> <html> <head> <title>Modelo - html || FMGarcia</title> <meta charset="utf-8"> <style> /*AQUI VAI TODO NOSSO CÓDIGO CSS*/ </style> </head> <body> <header> <h2>Minha Página</h2> <nav> <ul> <li>Home</li> <li>Meu menu</li> </ul> </nav> </header> <main> <section> <article> <h3>Titulo do meu artigo</h3> <p>Conteudo do meu artigo</p> <p>Mais conteúdo para o meu artigo</p> <ol> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> </article> <article> <h3>Titulo do meu segundo artigo</h3> <p>Conteudo do meu segundo artigo</p> <p>Mais conteúdo para o meu segundo artigo</p> </article> </section> </main> <aside> <h4>Conteúdos relacionados</h4> <ul> <li>Página oficial da <a href="https://familiagarcia-samp.forumeiros.com/">Familia Garcia SAMP</a></li> <li>item da lista</li> <li>item da lista</li> <SAMP>QUE?</SAMP> </ul> </aside> <footer> <div> <p>Inscreva-se para receber noticias</p> <form method="post"> <input type="text" name="nome" placeholder="Digite seu Nome"> <input type="email" name="email" placeholder="Digite seu Email"> <input type="submit" name="enviar" value="Enviar"> </form> </div> <div> <h3>Minha primeira página html</h3> <span>Todos os direitos reservados</span> </div> </footer> <script> //AQUI VAI NOSSO CÓDIGO DE SCRIPT (JAVASCRIPT) </script> </body> </html>

Dom	Seg	Ter	Qua	Qui	Sex	Sáb
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Dom	Seg	Ter	Qua	Qui	Sex	Sáb
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Códigos HTML - Hypertext Marking Language

Códigos HTML - Hypertext Marking Language

Códigos HTML - Hypertext Marking Language

IMPORTANTES