Dracco Soluções em Tecnologia e Marketing Digital

Home
Aula 1: HTML + CSS + JavaScript

Aula 1: HTML + CSS + JavaScript

Anderson Duarte 22 de outubro de 2023 0 Comentários

A linguagem de um hipertexto é a linguagem usada para escrever uma página da web. Consiste em Tags que marcam o início e o fim de uma estrutura, como um parágrafo de texto, uma imagem ou um link por exemplo. Os arquivos escritos neste idioma são informalmente chamados como páginas.

Aprenda essas marcações:

Títulos das páginas; (title)
Meta tags, especialmente a Meta Description (description);
Cabeçalhos: As tags <h1> a <h6> são usadas para definir cabeçalhos de diferentes tamanhos.
Parágrafos: A tag <p> é usada para definir parágrafos de texto.
Listas: As tags <ul> e <ol> são usadas para definir listas não ordenadas e ordenadas, respectivamente.
Imagens: A tag <img> é usada para inserir imagens em uma página da web. Atributo alt em imagens, realmente fazem diferença;
Links: As tags <a> são usadas para criar links para outras páginas da web ou recursos.

Exemplo:

<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta description="Esse é um site de exemplo">
  <title>Exemplo de HTML</title>
</head>
<body>
  <h1>Meu título</h1>
  <p>Este é um parágrafo de texto.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <img src="imagem.jpg" alt="Imagem">
  <a href="https://www.google.com">Link para o Google</a>
</body>
</html>

CSS – Cascading Style Sheet

As Folhas de estilo em cascata são uma linguagem que define a aparência de uma página web. Ou seja, definem as propriedades visuais do conteúdo de uma página como cores, tipo de letra e espessura, tamanho dos elementos de conteúdo, etc. Muitas vezes, elas são chamadas informalmente de estilos.

Exemplo:

body {
  background-color: #fff;
  font-family: sans-serif;
  font-size: 16px;
}

h1 {
  font-size: 24px;
  color: blue;
}

p {
  margin-bottom: 10px;
}

a {
  color: red;
  text-decoration: none;
}

Esse código irá aplicar os seguintes estilos a uma página da web:

A cor de fundo do corpo da página será branca.
A fonte da página será sans-serif e o tamanho da fonte será 16px.
Os cabeçalhos serão 24px de tamanho e azuis.
Os parágrafos terão um recuo de 10px.
Os links serão vermelhos e sem decoração.

Aqui estão alguns exemplos de estilos CSS que você pode usar para personalizar a aparência de sua página da web:

Cor: Você pode usar a propriedade color para definir a cor do texto ou do plano de fundo.
Tamanho da fonte: Você pode usar a propriedade font-size para definir o tamanho da fonte.
Fonte: Você pode usar a propriedade font-family para definir a fonte do texto.
Espaçamento: Você pode usar as propriedades margin e padding para definir o espaço entre os elementos.
Posição: Você pode usar as propriedades position, top, left, right e bottom para definir a posição dos elementos.
Imagens: Você pode usar a propriedade background-image para definir uma imagem de fundo.
Bordas: Você pode usar as propriedades border, border-width, border-style e border-color para definir as bordas dos elementos.
Sombras: Você pode usar as propriedades box-shadow e text-shadow para adicionar sombras aos elementos.
Efeitos: Você pode usar as propriedades transition e animation para adicionar efeitos aos elementos.

JS – JavaScript

O JavaScript é uma linguagem de programação que permite programar certas funcionalidades no navegador como animações ou validação de dados. Os arquivos escritos nesta linguagem são chamados de scripts.