Tags HTML Comuns e Suas Propriedades, Vocabulário em Inglês para Front-End
Estrutura Básica de um Documento HTML
Um documento HTML segue uma estruutra padrão que define a base da página web. Veja um exemplo revisado:
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>Título do Site</title>
</head>
<body>
<!-- Elementos visíveis aqui --> ...
Publicado em 6-21 05:50
Implementando Efeito de Abas com HTML, CSS e JavaScript
Utilizando o conhecimento combinado das tecnologias web fundamentais, vamos criar um efeito de abas populares em portais de notícias:
Conteúdo textual:
Imóveis:
275mil para apartamento de 3 quartos perto do metrô
200mil para apartamento de 3 quartos no anel viário
Primeiro edifício sem entrada em Pequim
Promoção de 5000 Yuans em ...
Publicado em 6-19 22:25
Efeitos de Animação com Corações e Textos em Eventos do Mouse
Ao interagir com websties, é possível adicionar elementos visuais dinâmicos, como corações ou textos decorativos, que surgem durante o clique ou movimento do mouse. Este artigo apresenta exemplos práticos de como implementar esses efeitos usando JavaScript e CSS, mantendo a performence com requestAnimationFrame.
Animação de Corações ao Clicar o ...
Publicado em 6-17 19:38
Introdução ao HTML e CSS: Conceitos Essenciais para Desenvolvimento Web
A sintaxe básica do HTML segue o padrão: <nome-da-tag atributo1="valor1" atributo2="valor2">conteúdo</nome-da-tag>. Arquivos CSS externos permitem reutilização de estilos; basta alterar o arquivo CSS para que todas as páginas vinculadas sejam atualizadas.
Ao criar uma nova página, comece com a estrutura HTML míni ...
Publicado em 6-16 04:41
Desativando o menu de contexto no navegador: Três técnicas para proteger imagens no frontend com práticas recomendadas
Quando um usuário clica com o botão direito em uma página web, o navegador dispara o evento contextmenu. Para impedir o menu padrão do sistema, podemos interceptar esse evento usando event.preventDefault(). Isso deve ser feito durante a fase de captura ou alvo do fluxo de eventos DOM para garantir eficácia.
Técnica 1: Interceptação com JavaScri ...
Publicado em 6-13 18:51
Controle de Texto e Inserção de Imagens em Desenvolvimento Web Front-end
Manipulação e Formatação de Texto
Este módulo explora o controle e a formatação de elementos textuais em páginas web, focando na criação de estruturas semânticas e na apresentação de conteúdo. Veremos como definir títulos, parágrafos e listas, além de entender o papel das tabelas e formulários na interação com o usuário.
Exemplo de Estrutuar HT ...
Publicado em 6-13 00:20
Guia de Conceitos Fundamentais de Front-end: CSS, JavaScript e Ferramentas Modernas
Box Model do CSS
Os modelos de caixa principais são o modelo padrão (W3C) e o modelo de caixa peculiar (IE). O modelo padrão define a largura total de um elemento como a soma da largura do conteúdo, borda, padding e margem. O modelo de caixa peculiar considera a largura do conteúdo como incluindo a borda e o padding, resultando em uma largura t ...
Publicado em 6-12 17:52
Explorando Seletores CSS: Guia Completo
A sintaxe fundamental do CSS segue o padrão:
seletor { propriedade1: valor1; propriedade2: valor2; }
Vamos detalhar os diversos tipos de seletores disponíveis:
Seletores de Contexto: Permitem selecionar elementos com base em seus elementos ancestrais ou irmãos.
Seletores de ID e Classe: Utilizam os atributos id e class para identificar elem ...
Publicado em 6-11 21:19
Dominando os Seletores CSS: Guia Prático de Sintaxe e Uso
Os seletores CSS são padrões fundamentais utilizados para selecionar e estilizar elementos dentro do DOM (Document Object Model) de uma página web. Eles permitem aplicar regras de estilo de forma precisa, direcionando elementos de forma individual, em grupo ou baseados em sua hierarquia estrutural.
Seletor de ID
O seletor de ID identifica um el ...
Publicado em 6-7 21:03
Atributos Fundamentais de CSS
Propriedades CSS
Estilos Básicos de Texto
O navegador Windows padrão usa a fonte Microsoft YaHei
/*
1.Tamanho da fonte: font-size
2.Espessura da fonte: font-weight
3.Estilo da fonte: font-style
4.Família da fonte: font-family
5.Propriedade combinada: font
line-height: altura da linha
*/
Tamanho da Fonte
/*
Propriedade: font-size
Valores: n ...
Publicado em 6-7 05:21