benicio.matheus@gmail.com

Total Post: 64

HMTL
0
0
8 min read

O que é e como escrever a sintaxe básica do HTML 5

Escrever um código pode ser uma tarefa simples ou complicada, dependendo do resultado que espera-se obter com ele. No entanto, seja para escrever um código HTML simples ou um código um pouco mais complexo é necessário ter conhecimento do código base ou sintaxe básica do HTML.

A sintaxe básica do html, como o nome já sugere, é o conjunto de comandos fundamentais para que os navegadores (browsers), possam identificar e interpretar o código corretamente.

Agora, vamos ver na prática como é a estrutura básica do html e logo a seguir, uma explicação detalhada de cada comando.

A sintaxe ou estrutura básica do HTML5

<!DOCTYPE html>

<head>

<title>título</title>

</head>

<body>

</body>

</html>

Agora cada linha de forma mais detalhada:

<!DOCTYPE html>

DOCTYPE não é uma tag, mas sim, uma declaração que informa ao navegador qual tipo de documento esperar. A declaração DOCTYPE é utilizada na primeira linha do código HTML.

Observação: Apesar de ser bastante comum a escrita da declaração DOCTYPE, o navegador não faz diferenciação sobre a forma como ela é escrita, seja com letras maiusculas ou minúsculas, logo, podemos utilizar de varias maneiras:

Dica: A <!DOCTYPE>declaração NÃO diferencia maiúsculas de minúsculas.

Exemplos

<!DOCTYPE html>

<!DocType html>

<!Doctype html>

<!doctype html>

A tag HTML é utilizada para abrir de forma oficial o documento. A tag HTML é uma tag de abertura e fechamento, isso quer dizer que ao ser aberta, precisa ser fechada.

Junto com a tag HTML podemos utilizar o atributo indicativo de idioma, que informa ao navegador o idioma em que o documento foi escrito ou o idioma predominante. Para isso, após abrir a tag HTML, inserimos o atributo lang acompanhado do sinal de igual e entre aspas, a sigla indicativa de idioma.

<head>:

A tag head, assim como a tag HTML, também é uma tag de abertura e fechamento, ou seja, ao ser aberta, necessita ser fechada.

A tag head abriga os metadados e outros scripts que executam ações dentro da página e deve ficar localizada entre a tag HTML e a tag body.

A tag de metadados charset UTF 8, serve para indicar aos navegadores o conjunto de caracteres utilizados no documento. Existem uma variedade de charset e a escolha pelo UTF-8 se deve ao fato de ser o conjunto que identifica caracteres em português brasileiro, como acentos e cedilha, por exemplo. Se você estiver escrevendo um documento html em outro idioma, fique de olho no conjunto de caracteres que mais se adequa.

Viewport é um metadado de responsabilidade para o documento HTML, afinal você não vai querer publicar um site que não seja responsivo, não é verdade? Por isso, viewport pode sim, ser considerado como integrante da sintaxe básica de HTML.

Isso fornece ao navegador instruções sobre como controlar as dimensões e o dimensionamento da página.

A parte width=device-width define a largura da página para seguir a largura da tela do dispositivo (que varia dependendo do dispositivo).

A parte initial-scale=1.0define o nível de zoom inicial quando a página é carregada pela primeira vez pelo navegador.

<title>Título da página </title>

A tag title permite que um título somente de texto seja inserido no documento html e é exibido na barra de títulos do navegador, juntamente com o favicon<title>título</title>

O conteúdo do título de uma página é muito importante para a otimização de mecanismo de busca (SEO)! O título da página é usado pelos algoritmos do mecanismo de pesquisa para decidir a ordem ao listar as páginas nos resultados da pesquisa.

O <title>elemento:

define um título na barra de ferramentas do navegador
fornece um título para a página quando ela é adicionada aos favoritos
exibe um título para a página nos resultados do mecanismo de pesquisa

Aqui estão algumas dicas para criar bons títulos:

Escolha um título mais longo e descritivo (evite títulos de uma ou duas palavras)
Os mecanismos de pesquisa exibirão cerca de 50 a 60 caracteres do título, portanto, tente não ter títulos mais longos do que isso
Não use apenas uma lista de palavras como título (isso pode reduzir a posição da página nos resultados da pesquisa)

Portanto, tente tornar o título o mais preciso e significativo possível!

Observação: você NÃO pode ter mais de um <title>elemento em um documento HTML.

</head>

Aqui temos o fechamento da tag head. É importante observar se as tags que precisam ser fechadas, estão dessa forma, pois não fechar tags que exigem fechamento impacta diretamente na funcionalidade do documento.

<body>

A tag body abriga todo o conteúdo que é exibido ao usuário na tela como cabeçalhos, parágrafos, imagens, hiperlinks, tabelas, listas, etc.

Observação: Só pode haver um <body> elemento em um documento HTML.

</body>

Aqui temos a tag de fechamento body. Ela indica que a parte de conteúdo da página chegou ao final.

</html>

Aqui temos a tag de fechamento HTML. Ela indica que o documento chegou ao final.

E aí? Conseguiu entender como é a estrura básica de um documento html?

Se tiver qualquer dúvida, sugestão, críticas, não deixe de enviar para a gente, ok?

Post de CSS3

Esse é um post de css3 para marcação

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquam sed velit vel sodales. Etiam ac enim lacus. Donec ut sapien ullamcorper, fermentum sem in, scelerisque felis. Vivamus hendrerit blandit lacus sed vestibulum. Duis dapibus rhoncus elementum. Donec sit amet imperdiet elit, eu consectetur est. In faucibus lectus quis ex iaculis, a ullamcorper magna rutrum. Suspendisse dui odio, porta et nulla eu, dictum pharetra diam. Suspendisse ornare velit eget viverra auctor. Nullam ullamcorper commodo purus vitae sollicitudin. Aliquam et mollis elit, nec blandit metus.

Morbi tempus mi nec facilisis fringilla. Nam laoreet tempus mi sit amet tristique. Integer ac enim magna. Ut congue mauris condimentum dictum elementum. In porta sagittis turpis vel finibus. Integer ante elit, eleifend in rhoncus quis, accumsan at ipsum. Phasellus lorem dui, bibendum vitae eros eget, lacinia rhoncus justo. In at vestibulum ante. Suspendisse potenti. Nam vehicula dictum purus non rhoncus. Nam semper nibh id sapien molestie, vel tristique nunc viverra. Curabitur aliquam vel nibh ac dapibus. Aenean in odio et dui dignissim porttitor. Integer ut odio quam. Pellentesque vulputate, ligula non maximus tristique, libero mauris vehicula nunc, sed mollis orci massa id nulla. Mauris sodales, urna id egestas venenatis, enim dui ultricies nulla, non faucibus mi ante eget purus.

Proin at vehicula massa. Aenean condimentum ex quis diam porta, vel commodo mi aliquam. Nulla ac cursus ante. Nunc vestibulum, nibh non tincidunt elementum, diam ipsum ultrices arcu, nec imperdiet nisl sapien in turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis lacus et tortor elementum, at mollis elit rhoncus. Curabitur ut arcu est. Donec sit amet ante egestas, efficitur arcu quis, feugiat augue.

Front End Full Stack HMTL
0
0
4 min read

Como criar e para o que serve um comentário em HTML

O comentário em um código HTML é um recurso que ajuda tanto o desenvolvedor que escreveu o código, quanto quem possa a vir trabalhar com esse mesmo código mais tarde.

O comentário em HTML não aparece no resultado do navegador e não tem qualquer interferência no código. Trata-se de um recurso que permite ao desenvolvedor realizar anotações que considere importantes sem a necessidade de criar um documento de texto para esse fim, além de contribuir para a organização do código.

Como criar comentário em HTML

Para inserir um comentário em HTML, basta usar a tag <!– –>

Exemplo:

<!DOCTYPE html>

<head>

<metacharset=”UTF-8″>
<metahttp-equiv=”X-UA-Compatible”content=”IE=edge”> <metaname=”viewport”content=”width=device-width, initial-scale=1.0″> <linkrel=”shortcut icon”href=”favicon.ico”type=”image/x-icon”> <title>Comentário em html</title>

</head>

<body>

<h1>Parágrafos e quebras de linha</h1>

<!–A tag hr é utilizada para criar uma linha horizontal–>

<hr>

<!–&lt e &gt retornam < e > respectivamente–>

<p>Você pode escrever um parágrafo de qualquer jeito, basta colocar tudo no meio do par de tags <p> e </p></p>

<!–A tag br é utilizada para quebrar linhas–>

<p>Se precisar quebrar a linha em <br>algum lugar, use a tag <br></p></body></html Observe que o comentário é escrito dentro da tag <!– comentário –>.

Mais curiosidades:

Além de explicar o que determinadas partes do código fazem, a tag de comentário também pode ser utilizada para outros fins, como desabilitar partes de um código para fins de testes. Também podemos utilizar a tag de comentário para que scripts não suportados sejam ignorados pelo navegador. Para isso, utilizamos barra dupla (//) antes do fechamento da tag.

Exemplo:

<!– <script>

var str = ‘Terminal Root’;

if(str.match(/Root/)){

document.write(‘Encontrou’);

}else{

document.write(‘Palavra Não Encontrada’);

}

</script> //–>

Observações:

– É muito importante lembrar de abrir e fechar a tag de comentário corretamente. Caso você esqueça de algum elemento que a compõe, o navegador não interpretará a linha como um comentário e isso pode causar danos no resultado do código.

– Nunca esqueça de fechar a tag de comentário, caso contrário, o código inteiro pode se transformar em um gigantesco comentário e não reproduzirá resultados no navegador. Alguns editores de código, como o VS Code, já fecham as tags de forma automática, evitando esquecimentos e falhas que podem inutilizar o funcionamento do código.

E aí? Gostou da dica?

Já utiliza esse recurso em seus códigos HTML

Front-End
0
0
3 min read

All the Tourist Stuff You Should Probably Do in Copenhagen

Authoritatively administrate long-term high-impact e-business via parallel web services. Synergistically synergize equity invested infrastructures whereas integrated infrastructures. Globally whiteboard customer directed resources after multimedia based metrics. Assertively strategize standardized strategic theme areas vis-a-vis impactful catalysts for change. Details