0% acharam este documento útil (0 voto)

24 visualizações12 páginas

HTML

O documento fornece um guia abrangente sobre HTML, CSS e JavaScript, abordando suas definições, funções e comandos principais. HTML é a linguagem de marcação para estruturar páginas web, CSS estiliza a apresentação visual e JavaScript adiciona interatividade. Cada linguagem é descrita com exemplos práticos de uso e comandos essenciais.

Enviado por

lanzhanweiying1717

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

24 visualizações12 páginas

HTML

Enviado por

lanzhanweiying1717

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 12

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;
}