Estrutura e Estilização da Web

Podcast Beta

Play an AI-generated podcast conversation about this lesson

Questions and Answers

Qual é a função principal do HTML na criação de páginas da web?

Manipular eventos na página.

Definir a estrutura da página por meio de elementos e hierarquia. (correct)

Estilizar a aparência dos elementos.

Gerenciar o acesso a dados externos.

Qual técnica CSS é utilizada para aplicar estilos diferentes com base em propriedades do dispositivo?

Flexbox

Media Queries (correct)

Grid Layouts

Box Model

No contexto de design responsivo, o que é um 'Fluid Layout'?

Layout que utiliza tamanhos fixos.

Layout que não considera a largura da tela.

Layout que é construído apenas com o uso de Flexbox.

Layout que se ajusta usando larguras baseadas em porcentagens. (correct)

Qual método JavaScript é utilizado para acessar um elemento pelo seu ID no DOM?

document.getElementById() Signup and view all the answers

Qual dos seguintes é um tipo de evento que pode ser manipulado em JavaScript?

Evento de clique Signup and view all the answers

Qual evento é ativado quando o rato passa sobre um elemento?

onmouseover Signup and view all the answers

O que acontece quando o evento onmouseout é ativado?

A classe 'mouseOver' é removida. Signup and view all the answers

Qual propriedade é utilizada para identificar qual objeto disparou um evento?

event.target Signup and view all the answers

Qual é a função do elemento com o id 'operacao' no exemplo fornecido?

Retornar a operação matemática selecionada. Signup and view all the answers

O que ocorre quando o rato sai de cima de um elemento que usa o evento onmouseover?

A cor do fundo é restaurada para white. Signup and view all the answers

Qual dos seguintes eventos não está relacionado com eventos de mouse?

onchange Signup and view all the answers

Qual a finalidade principal do evento onclick em JavaScript?

Executar uma ação quando um elemento é clicado. Signup and view all the answers

Em qual situação a classe 'mouseOver' será adicionada a um elemento?

Quando o evento onmouseover for ativado. Signup and view all the answers

Qual evento ocorre quando um usuário clica com o botão direito do mouse em um elemento?

oncontextmenu Signup and view all the answers

Qual evento é acionado quando a tecla é liberada pelo usuário?

onkeyup Signup and view all the answers

Qual das seguintes descrições se refere ao evento 'onload'?

Ocorre quando um objeto foi carregado Signup and view all the answers

Qual evento é acionado quando o usuário pressiona um botão do mouse sobre um elemento?

onmousedown Signup and view all the answers

O que acontece no evento 'onerror'?

Ocorre quando um recurso falha ao carregar Signup and view all the answers

Qual evento é acionado quando o mouse entra em um elemento?

onmouseenter Signup and view all the answers

Qual evento não está relacionado à manipulação do teclado?

onclick Signup and view all the answers

Qual evento aciona quando o usuário navega para fora de uma página?

onpagehide Signup and view all the answers

O que a função 'calcula()' deve fazer quando associada a um evento onclick?

Executar uma operação matemática Signup and view all the answers

Qual das opções descreve melhor o evento 'onmouseup'?

Ocorre quando um botão do mouse é liberado Signup and view all the answers

Qual é a ação desencadeada pelo evento onclick na função calcula()?

Escrever no console os valores de x e y Signup and view all the answers

O que acontece quando o utilizador clica no botão que chama a função myFunction()?

O parágrafo com id 'demo' é alterado Signup and view all the answers

Qual das opções abaixo representa uma característica importante de eventos em JavaScript?

Eventos podem ser vinculados a qualquer tipo de elemento HTML Signup and view all the answers

Study Notes

Web Structure

HTML (HyperText Markup Language): The standard language for creating web pages.
- Uses elements/tags (e.g., <html>, <head>, <body>, <div>, ).
- Structure of a webpage is defined by the hierarchy of these elements.
- Semantic HTML tags (e.g., <header>, <footer>, <article>, <section>) improve accessibility and SEO.

Styling Techniques

CSS (Cascading Style Sheets): Styles the appearance of HTML elements.
- Selectors: Target elements (e.g., class .classname, ID #idname, type).
- Box Model: Includes content, padding, border, and margin.
- Positioning: Different methods (static, relative, absolute, fixed, sticky).
- Flexbox & Grid Layouts: Modern techniques for layout arrangement.

Responsive Design

Definition: Ensures webpages render well on various devices and screen sizes.
- Media Queries: CSS technique to apply styles based on device properties (e.g., width, orientation).
- Fluid Layout: Uses percentage-based widths instead of fixed sizes.
- Viewport: <meta name="viewport" content="width=device-width, initial-scale=1.0"> for responsive scaling.
- Responsive Images: Use of srcset or CSS techniques (e.g., max-width: 100%).

DOM Manipulation

DOM (Document Object Model): Representation of the page structure as a tree of objects.
- Access and manipulate elements using JavaScript methods (e.g., document.getElementById(), document.querySelector()).
- Common actions include creating, deleting, and updating elements and attributes.
- Use of libraries like jQuery simplifies DOM manipulation.

Event Handling

Events: Actions or occurrences that happen in the browser.
- Types of events: Mouse events (click, hover), keyboard events (keypress, keyup), form events (submit, change).
- Event Listeners: Functions that execute in response to events (e.g., element.addEventListener('click', function)).
- Event propagation: Bubbling (up the DOM) and capturing (down the DOM).
- Prevent default behavior using event.preventDefault() to manage form submissions or links.

Estrutura da Web

HTML (HyperText Markup Language): Linguagem padrão para criar páginas web.
Elementos/Tags (ex.: , , , , ``) são usados para definir a estrutura da página.
A hierarquia dos elementos HTML define a estrutura da página.
Tags HTML semânticas (ex.: , , , ) melhoram a acessibilidade e o SEO.

Técnicas de Estilo

CSS (Cascading Style Sheets): Define o estilo visual dos elementos HTML.
Seletores: Selecionam elementos específicos (ex.: classe .classname, ID #idname, tipo).
Modelo de Caixa: Inclui conteúdo, preenchimento, borda e margem.
Posicionamento: Métodos diferentes (estático, relativo, absoluto, fixo, grudado).
Flexbox & Grid Layouts: Técnicas modernas para organizar o layout.

Design Responsivo

Definição: Garante que as páginas web sejam renderizadas adequadamente em vários dispositivos e tamanhos de tela.
Consultas de Mídia: Técnica CSS para aplicar estilos com base nas propriedades do dispositivo (ex.: largura, orientação).
Layout Fluido: Utiliza larguras baseadas em porcentagem, em vez de tamanhos fixos.
Viewport: `` para dimensionamento responsivo.
Imagens Responsivas: Uso de srcset ou técnicas CSS (ex.: max-width: 100%).

Manipulação do DOM

DOM (Document Object Model): Representação da estrutura da página como uma árvore de objetos.
Acesso e Manipulação de Elementos: Utilize métodos JavaScript (ex.: document.getElementById(), document.querySelector()).
Ações comuns incluem criar, excluir e atualizar elementos e atributos.
Bibliotecas como jQuery simplificam a manipulação do DOM.

Manipulação de Eventos

Eventos: Ações ou ocorrências que acontecem no navegador.
Tipos de eventos: Eventos do mouse (clique, passagem do mouse), eventos do teclado (pressionar tecla, soltar tecla), eventos de formulário (enviar, alterar).
Ouvintes de Eventos: Funções que se executam em resposta a eventos (ex.: element.addEventListener('click', function)).
Propagação de eventos: Borbulhamento (para cima no DOM) e captura (para baixo no DOM).
Impedir o comportamento padrão usando event.preventDefault() para gerenciar envios de formulário ou links.

Eventos Javascript - onmouseover / onmouseout

O evento onmouseover é ativado quando o ponteiro do mouse passa sobre um elemento.
O evento onmouseout é ativado quando o ponteiro do mouse sai de um elemento.
O evento onmouseover pode ser usado para mudar o estilo de um elemento, neste caso, a cor de fundo.
O Javascript pode ser usado dentro do HTML, inline, mas não precisa estar dentro do marcador, pode estar em outro local do código.

Eventos Javascript - onchange

O evento onchange é ativado quando o valor de um elemento é alterado.
O evento onchange pode ser usado para atualizar o conteúdo de outro elemento, como mostrar o resultado de um cálculo.
Neste exemplo, o evento onchange é usado para definir a operação a ser realizada em um cálculo.

Propriedade Javascript event.target

A propriedade event.target retorna o objeto que acionou um evento.
Esta propriedade é útil para manipular eventos em múltiplos objetos com o mesmo código.
O código pode ser usado para recuperar o valor de elementos selecionados dinamicamente.

Glossário de Eventos Javascript

Os eventos do Javascript podem ser divididos em categorias, incluindo mouse, frame / object, e keyboard.
Eventos do Mouse: oncontextmenu, ondblclick, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseover, onmouseout, onmouseup.
Eventos do Frame / Object: onabort , onbeforeunload, onerror, onhashchange, onload, onpageshow, onpagehide, onresize, onscroll, onunload.
Eventos do Teclado: onkeydown, onkeypress, onkeyup.

Eventos Javascript - onclick

O evento onclick é ativado quando um elemento da interface é clicado.
O evento onclick pode ser usado para executar uma função, por exemplo, para realizar um cálculo ou atualizar o conteúdo de um elemento.
O código Javascript pode ser usado como um atributo inline no HTML.
O evento onclick pode ser usado para alterar o conteúdo de um elemento.
O evento onclick pode ser usado para chamar uma função que altera o conteúdo de um elemento.

Mudança de Estilo Inline

O evento onmouseover pode ser usado para alterar o estilo de um elemento, neste caso, a cor de fundo.
O estilo pode ser alterado diretamente dentro do HTML usando atributos CSS.
O evento onmouseover pode ser usado para adicionar um estilo diferente ao elemento, como a classe "mouseOver".

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

Teste seus conhecimentos sobre a estrutura da web, incluindo HTML e CSS. Explore conceitos como elementos semânticos, seletores e design responsivo. Aprenda também sobre técnicas modernas de layout como Flexbox e Grid.