HTML
Manual para estudar, aqui você encontrará tudo que é relacionado sobre comandos básicos.
HTML (HyperText Markup Language) é a linguagem padrão para criação de páginas web. Ela
define a estrutura básica de uma página web e é composta por uma série de elementos (tags)
que são interpretados pelos navegadores para exibir conteúdo na internet.
O que é e para que serve:
HTML é uma linguagem de marcação utilizada para criar documentos que são visualizados em
navegadores web. Ela é essencial para a criação de páginas web, pois permite a estruturação do
conteúdo, como textos, imagens, vídeos e links, de forma que os navegadores consigam
interpretar e exibir corretamente para os usuários.
Funções e comandos:
Estruturação do conteúdo: As tags do HTML são utilizadas para estruturar o conteúdo da página,
como definir parágrafos `<p>`, títulos `<h1>`, listas `<ul>`, entre outros. Isso permite que o
navegador interprete e exiba o conteúdo de forma organizada.
Inserção de mídia: O HTML permite a inclusão de imagens `<img>`, vídeos `<video>`, áudio
`<audio>`, e outros tipos de mídia, permitindo assim a criação de páginas mais dinâmicas e
interativas.
Links e âncoras: Com o HTML, é possível criar links `<a>` para conectar diferentes páginas web,
permitindo a navegação entre elas. Também é possível criar âncoras `<a>` para facilitar a
navegação dentro da mesma página.
Formulários: O HTML permite a criação de formulários `<form>` para coletar informações dos
usuários, como nome, e-mail, senha, entre outros. Esses formulários podem conter campos de
texto, caixas de seleção, botões de rádio, entre outros elementos.
Tabelas e formulários: O HTML permite a criação de tabelas `<table>` para organizar dados de
forma tabular e formulários `<form>` para coletar dados dos usuários.
Semântica: O HTML possui elementos semânticos, como `<header>`, `<footer>`, `<nav>`,
`<article>`, `<section>`, que ajudam a descrever melhor a estrutura e o conteúdo da página,
facilitando a indexação por mecanismos de busca e tornando o código mais acessível e
compreensível.
Integração com outras tecnologias: O HTML é frequentemente utilizado em conjunto com
outras tecnologias, como CSS para estilização e JavaScript para interatividade, permitindo criar
páginas web mais ricas e funcionais.
1. **`<!DOCTYPE html>`**: Define o tipo de documento HTML.
2. **`<html>`**: Tag raiz que engloba todo o conteúdo HTML.
3. **`<head>`**: Define informações sobre o documento, como título, metadados, e links para
estilos.
4. **`<title>`**: Define o título da página, exibido na aba do navegador.
5. **`<meta>`**: Define metadados, como codificação de caracteres e descrição da página.
6. **`<link>`**: Define a relação entre o documento atual e recursos externos, como folhas de
estilo CSS.
7. **`<body>`**: Contém todo o conteúdo visível da página.
8. **`<h1>`, `<h2>`, ..., `<h6>`**: Define títulos de diferentes níveis de importância.
9. **`<p>`**: Define um parágrafo de texto.
10. **`<br>`**: Insere uma quebra de linha.
11. **`<hr>`**: Insere uma linha horizontal.
12. **`<a>`**: Define um link.
13. **`<img>`**: Insere uma imagem.
14. **`<ul>`**: Define uma lista não ordenada.
15. **`<ol>`**: Define uma lista ordenada.
16. **`<li>`**: Define um item de lista.
17. **`<table>`**: Define uma tabela.
18. **`<tr>`**: Define uma linha em uma tabela.
19. **`<th>`**: Define um cabeçalho de tabela.
20. **`<td>`**: Define uma célula de dados em uma tabela.
21. **`<form>`**: Define um formulário.
22. **`<input>`**: Define um campo de entrada em um formulário.
23. **`<textarea>`**: Define uma área de texto em um formulário.
24. **`<button>`**: Define um botão.
25. **`<label>`**: Define um rótulo para um elemento de formulário.
26. **`<select>`**: Define uma lista suspensa (dropdown) em um formulário.
27. **`<option>`**: Define uma opção em uma lista suspensa.
Estes são alguns dos principais comandos em HTML utilizados para criar a estrutura básica de
uma página web. Cada tag tem uma função específica e permite a criação de conteúdo
diversificado e interativo.
CSS
CSS (Cascading Style Sheets) é uma linguagem de estilo utilizada para controlar a apresentação
visual de páginas web. Enquanto o HTML define a estrutura e o conteúdo de uma página, o CSS
é responsável por determinar como esse conteúdo será apresentado, incluindo aspectos como
cores, fontes, espaçamento, layout e animações.
Para que serve o CSS:
Estilização: CSS é usado para estilizar elementos HTML, como textos, imagens, listas, tabelas e
formulários, permitindo que eles sejam apresentados de forma visualmente atraente e
consistente em diferentes dispositivos e navegadores.
Layout: CSS controla o layout da página, determinando a posição e o tamanho dos elementos,
bem como a disposição deles na tela. Isso inclui o uso de técnicas como posicionamento,
flutuação e grade (grid) para criar layouts responsivos e flexíveis.
Personalização: CSS permite a personalização do estilo de uma página web de acordo com as
preferências do usuário, como alterar cores, tamanhos de fonte e estilos de texto.
Compatibilidade: CSS ajuda a garantir a compatibilidade entre diferentes navegadores,
permitindo que os desenvolvedores criem estilos que sejam interpretados de forma
consistente em plataformas variadas.
Acessibilidade: CSS pode ser usado para melhorar a acessibilidade de uma página web,
tornando o conteúdo mais legível e fácil de navegar para usuários com necessidades especiais,
como deficiências visuais.
Agora, vamos aos principais comandos e atribuições em CSS:
1. Seletores: São utilizados para selecionar elementos HTML aos quais o estilo será aplicado.
Exemplos incluem:
- `elemento` (por exemplo, `p` para parágrafos)
- `.classe` (por exemplo, `.destaque` para elementos com a classe "destaque")
- `#id` (por exemplo, `#cabecalho` para o elemento com o ID "cabecalho")
2. Propriedades: São os atributos que descrevem como os elementos selecionados devem ser
estilizados. Alguns exemplos de propriedades incluem:
- `color`: Define a cor do texto.
- `font-size`: Define o tamanho da fonte.
- `margin`: Define as margens externas de um elemento.
- `padding`: Define o preenchimento interno de um elemento.
- `background-color`: Define a cor de fundo de um elemento.
- `border`: Define as bordas de um elemento.
- `display`: Define como um elemento é exibido (por exemplo, `block`, `inline`, `flex`).
3. Valores: São os valores atribuídos às propriedades para especificar como os estilos devem
ser aplicados. Por exemplo:
- `color: red;` (define a cor do texto como vermelho)
- `font-size: 16px;` (define o tamanho da fonte como 16 pixels)
- `margin: 10px;` (define uma margem de 10 pixels em todas as direções)
- `padding: 20px 10px;` (define um preenchimento de 20 pixels na direção vertical e 10 pixels
na direção horizontal)
4. Estilização de texto: CSS permite controlar diversos aspectos do texto, como cor, tamanho,
estilo da fonte, espaçamento entre letras e linhas, entre outros.
5. Estilização de layout: CSS é utilizado para controlar o posicionamento e o layout dos
elementos na página, utilizando técnicas como posicionamento absoluto, relativo, flutuação e
grade (grid).
6. Estilização de fundo: CSS permite definir cores de fundo, imagens de fundo, gradientes e
outras propriedades relacionadas ao fundo de um elemento.
7. Estilização de bordas: CSS permite definir o estilo, largura, cor e formato das bordas de um
elemento.
Comandos em CSS, chamados de propriedades, que são usados para estilizar elementos HTML:
1. Coloração e Texto:
- `color`: Define a cor do texto.
- `font-family`: Define a família de fontes.
- `font-size`: Define o tamanho da fonte.
- `font-weight`: Define a espessura da fonte (por exemplo, normal, negrito).
- `text-align`: Define o alinhamento do texto (esquerda, direita, centralizado, justificado).
- `text-decoration`: Define decorações de texto, como sublinhado, sobrelinhado ou linha
através do texto.
- `line-height`: Define a altura da linha do texto.
2. Espaçamento e Layout
- `margin`: Define as margens externas de um elemento.
- `padding`: Define o preenchimento interno de um elemento.
- `width`: Define a largura de um elemento.
- `height`: Define a altura de um elemento.
- `display`: Define como um elemento é exibido (por exemplo, `block`, `inline`, `flex`).
- `position`: Define o método de posicionamento de um elemento (por exemplo, `static`,
`relative`, `absolute`, `fixed`).
3. Fundo:
- `background-color`: Define a cor de fundo de um elemento.
- `background-image`: Define uma imagem de fundo para um elemento.
- `background-repeat`: Define como a imagem de fundo deve se repetir (por exemplo,
`repeat`, `no-repeat`).
- `background-size`: Define o tamanho da imagem de fundo (por exemplo, `cover`, `contain`).
4. Borda:
- `border`: Define as propriedades da borda de um elemento, incluindo largura, estilo e cor.
- `border-radius`: Define o raio da borda de um elemento, criando bordas arredondadas.
- `border-color`: Define a cor da borda de um elemento.
- `border-width`: Define a largura da borda de um elemento.
5. Lista:
- `list-style-type`: Define o estilo do marcador em uma lista (por exemplo, `disc`, `circle`,
`square`).
- `list-style-image`: Define uma imagem como marcador em uma lista.
- `list-style-position`: Define a posição do marcador em uma lista (por exemplo, `inside`,
`outside`).
JAVA SCRIPT
JavaScript é uma linguagem de programação de alto nível, leve e interpretada. Ela é utilizada
principalmente para tornar as páginas web interativas e dinâmicas, adicionando
funcionalidades como animações, validação de formulários, manipulação de elementos HTML,
requisições assíncronas (AJAX) e muito mais.
Como utilizar:
Para utilizar JavaScript em uma página web, você pode inserir o código diretamente no arquivo
HTML, entre as tags `<script>` e `</script>`, ou pode criar um arquivo separado com extensão
`.js` e referenciá-lo no seu documento HTML usando a tag `<script src="caminho-para-o-
arquivo.js"></script>`. Dessa forma, o navegador executará o código JavaScript quando a
página for carregada.
Principais funções:
1. **Manipulação do DOM (Document Object Model):** JavaScript permite acessar e
modificar elementos HTML, como alterar o conteúdo de um parágrafo, mudar o estilo de um
elemento, adicionar ou remover elementos do DOM, entre outros.
Exemplo:
```javascript
document.getElementById("meuParagrafo").innerHTML = "Novo conteúdo!";
```
2. Eventos: JavaScript permite responder a eventos do usuário, como cliques em botões,
movimentos do mouse, pressionamentos de teclas, entre outros. Isso possibilita a criação de
páginas interativas e responsivas.
Exemplo:
```javascript
document.getElementById("meuBotao").addEventListener("click", function() {
alert("Botão clicado!");
});
```
3. Requisições assíncronas (AJAX): JavaScript permite fazer requisições a servidores web sem
recarregar a página, possibilitando a criação de aplicações web mais dinâmicas e rápidas.
Exemplo com `fetch`:
```javascript
fetch("https://api.exemplo.com/dados")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
```
4. Controle de fluxo: JavaScript possui estruturas de controle de fluxo, como condicionais (if,
else) e loops (for, while), que permitem controlar o fluxo de execução do código.
Exemplo de condicional:
```javascript
var idade = 20;
if (idade >= 18) {
console.log("Maior de idade");
} else {
console.log("Menor de idade");
```
5. Funções: JavaScript permite a definição de funções, que são blocos de código reutilizáveis.
Isso facilita a organização e a modularização do código.
Exemplo de função:
```javascript
function somar(a, b) {
return a + b;
}
console.log(somar(2, 3)); // Saída: 5
```
____________________________________####___________________________________
1. Declaração de variáveis:
Para armazenar valores, você pode usar as palavras-chave `var`, `let` ou `const`.
```javascript
var nome = "João";
let idade = 30;
const PI = 3.14;
```
2. Comentários:
Você pode adicionar comentários para explicar o seu código. Eles são ignorados pelo
interpretador.
```javascript
// Este é um comentário de linha
/* Este é um
comentário de
várias linhas */
```
3. Console:
O objeto `console` é útil para exibir mensagens no console do navegador.
```javascript
console.log("Olá, mundo!");
```
4. Alertas:
Você pode exibir alertas para os usuários com a função `alert`.
```javascript
alert("Esta é uma mensagem de alerta!");
```
5. Prompt:
Para solicitar entrada do usuário, você pode usar a função `prompt`.
```javascript
let nomeUsuario = prompt("Qual é o seu nome?");
```
6. Operadores aritméticos:
JavaScript suporta operadores para realizar operações aritméticas.
```javascript
let soma = 2 + 3;
let subtracao = 5 - 2;
let multiplicacao = 3 * 4;
let divisao = 10 / 2;
let restoDivisao = 10 % 3;
```
7. Strings:
Você pode manipular strings em JavaScript.
```javascript
let mensagem = "Olá, " + nome;
let comprimento = mensagem.length;
```
8. Condicionais:
Você pode usar estruturas condicionais para executar código com base em condições.
```javascript
if (idade >= 18) {
console.log("Você é maior de idade.");
} else {
console.log("Você é menor de idade.");
```
9. Loops:
JavaScript oferece loops para repetir a execução de código.
- `for`:
```javascript
for (let i = 0; i < 5; i++) {
console.log(i);
```
- `while`:
```javascript
let contador = 0;
while (contador < 5) {
console.log(contador);
contador++;
```
10. Funções:
Você pode definir funções para reutilizar blocos de código.
```javascript
function saudacao(nome) {
console.log("Olá, " + nome + "!");
saudacao("Maria");
```
