Breve Resumo
Mesmo se você for iniciante no meio da programação provavelmente já deve ter ouvido falar sobre HTML. O HTML é uma linguagem muito fácil de se aprender e em pouco tempo você já poderá criar um website com facilidade. Com um pouquinho mais de tempo e dedicação, você poderá estilizar suas páginas utilizando o CSS, conseguindo um resultado mais profissional. O HTML e o CSS são utilizados para criar páginas web e atuam de forma complementar.
Quem usa HTML e CSS?
Todos os sites utilizam HTML e CSS de uma forma ou de outra. Você se lembra da época do Orkut quando enviávamos recados e depoimentos? Nessa época gostávamos de deixar eles mais bonitinhos…com fontes, cores, diferentes tamanhos, negrito, itálico, e mais uma infinidade de tags que podiam ser utilizadas… Sim, aquilo era HTML.
A sintaxe do HTML foi criada para ser de fácil entendimento tanto para nós quanto para a máquina, além disso você não precisa de nada mais do que um editor simples. Como vimos, HTML é uma linguagem de marcação.
Essas marcações são chamadas de tags, que são abertas e depois fechadas. É com as tags que dizemos para o navegador o que é um título, parágrafo, botão, formulário, dentre outros. Veja abaixo o nosso Hello World!
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Elemento Digital</title>
</head>
<body>
<p>Hello World</p>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
Sintaxe do CSS
Com o CSS você pode criar folhas de estilo, que são muito úteis e fáceis de serem utilizadas. Por exemplo, vamos criar uma folha de estilo chamada style.css e com os seguintes atributos:
strong {
color: blue;
}
h1 {
font-style: italic;
}
<html>
<head>
<title>Elemento Digital</title>
</head>
<body>
<p>Hello <strong>World</strong></p>
<h1>Seja bem-vindo a Elemento Digital!</h1>
</body>
</html>
Quando abrirmos a página ele vai nos mostrar a frase “Hello World”. A palavra “World” está dentro da tag “strong”, então ela vai se comportar da maneira que estilizamos no arquivo CSS: em negrito e na cor azul. Já a frase “Seja bem-vindo a Elemento Digital!” aparecerá em itálico, conforme colocamos no nosso arquivo CSS. A maioria das páginas da Internet são escritas em HTML e estilizadas usando CSS, daí podemos ver a sua incontornável importância. Você pode começar a aprender a criar suas próprias páginas e, mais para frente, ter a capacidade de desenvolver telas para sites, aplicativos mobile, sistemas web e desktop.
Escritório Londrina
Av. Ayrton Senna da Silva, 300 – Gleba Palhano – CEP: 86050-460
contato@elementodigital.com.br
Escritório Balneário Camboriú
Av. Brasil, 3551 – Centro – CEP: 88330-063
balneario@elementodigital.com.br
Elemento Digital 2023 – Política de privacidade
