This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Esta página precisa de um navegador recente (com suporte a SharedArrayBuffer). Por favor, atualize Chrome, Edge, Firefox ou Safari para a versão mais recente.
HTML 超文本标记语言 describes a web page with tags 标签. A tag is a word in angle brackets, like <p>. Most come in pairs — an opening tag <p> and a closing tag </p> wrap some content. A tag plus its content is an element 元素.
The browser draws whatever is between the tags.
A tag you forget to close, or spell wrong, may not show correctly.
Português
HTML significa Linguagem de Marcação de Hipertexto e descreve uma página web usando tags (etiquetas). Uma tag é uma palavra entre colchetes angulares, como <p>. A maioria vem em pares — uma tag de abertura <p> e uma tag de fechamento </p> envolvem algum conteúdo. Uma tag mais seu conteúdo formam um elemento.
<p>Hello, world!</p>
<p>This is my first web page.</p>
O navegador renderiza tudo o que está entre as tags.
Esquecer de fechar uma tag, ou digitá-la errada, pode fazer com que ela não apareça corretamente.
Um elemento = tag de abertura + conteúdo + tag de fechamento
1.2
Títulos e parágrafos
English
Headings 标题 run from <h1> (biggest) down to <h6> (smallest). A paragraph 段落 is <p>. Use exactly one <h1> for the page's main title.
Português
Títulos variam de <h1> (maior) até <h6> (menor). Um parágrafo é <p>. Use exatamente um <h1> para o título principal da página.
<h1>My Blog</h1>
<h2>About me</h2>
<p>I am learning to build web pages.</p>
1.3
Formatação de texto
English
Make text bold 加粗 with <strong> and italic 斜体 with <em>. A line break 换行 is <br> — it has no closing tag.
Common mistakes
Most tags come in pairs — <p>...</p>. Forgetting the closing tag breaks the layout below it.
The tag goes in angle brackets; the text you see goes between the opening and closing tags.
Headings run <h1> (biggest) to <h6> — do not pick a heading just for its size.
Português
Faça texto em negrito com <strong> e itálico com <em>. Quebra de linha é <br> — não possui tag de fechamento.
<p><strong>Warning:</strong> read this carefully.</p>
<p>First line<br>second line</p>
<p>You can <em>emphasise</em> any word.</p>
Erros comuns
A maioria das tags vem em pares — <p>...</p>. Esquecer a tag de fechamento quebra o layout abaixo dela.
A tag vai entre colchetes angulares; o texto visível fica entre as tags de abertura e fechamento.
Títulos vão de <h1> (maior) a <h6> — não escolha um título apenas pelo tamanho.
ul para marcadores, ol para números; cada item é li
2.2
Links
English
A link 链接 is an anchor <a>. Its href attribute 属性 holds the address it points to.
Add target="_blank" to open the link in a new tab.
Português
Um link é um anchor <a>. Seu atributo href contém o endereço para o qual aponta.
<a href="https://example.com">Visit Example</a>
<br>
<a href="page2.html">Go to the next page</a>
Adicione target="_blank" para abrir o link em uma nova aba.
2.3
Imagens
English
An image 图片 is <img> — it has no closing tag. src is the picture's address; alt is text shown if the image cannot load (and read aloud to blind users).
Common mistakes
An image needs src (the file) and alt (a description); a link needs href.
<img> has no separate closing tag.
A broken src path shows nothing — check the file name and folder.
Português
Uma imagem é <img> — não possui tag de fechamento. src é o endereço da imagem; alt é o texto exibido se a imagem não puder carregar (e lido em voz alta para usuários cegos).
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Bitmap_VS_SVG.svg/120px-Bitmap_VS_SVG.svg.png"
alt="bitmap versus vector" width="120">
<p>If the picture is missing, the alt text shows instead.</p>
Erros comuns
Uma imagem precisa de src (o arquivo) e alt (uma descrição); um link precisa de href.
<img> não tem etiqueta de fechamento separada.
Um caminho src quebrado não mostra nada — verifique o nome do arquivo e a pasta.
A real page has a fixed skeleton 骨架. <!DOCTYPE html> says it is HTML5. Everything sits inside <html>. The <head> holds information about the page; the <body> holds what you see.
The <title> shows in the browser tab.
<meta charset="utf-8"> lets the page show any language.
Português
Uma página real tem uma estrutura fixa. <!DOCTYPE html> diz que é HTML5. Tudo fica dentro de <html>. O <head> contém informações sobre a página; o <body> contém o que você vê.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is a complete page.</p>
</body>
</html>
Uma página é uma árvore: head descreve a página, body guarda o que você vê
O <title> aparece na aba do navegador.
<meta charset="utf-8"> permite que a página exiba qualquer idioma.
3.2
Comentários e aninhamento
English
A comment 注释<!-- ... --> is a note the browser ignores. Tags nest 嵌套 inside one another; indent 缩进 each level so the structure stays clear. Close tags in the reverse order you opened them.
Common mistakes
Tags must nest, not overlap: <b><i>text</i></b>, never <b><i>text</b></i>.
A page needs <html>, a <head> (for the title and links) and a <body> (for what you see).
A comment is <!-- ... -->; the browser ignores it.
Português
Um comentário <!-- ... --> é uma nota que o navegador ignora. Tags se aninham umas dentro das outras; idente cada nível para manter a estrutura clara. Feche as tags na ordem inversa à qual as abriu.
<!-- a simple navigation bar -->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
Erros comuns
Etiquetas devem aninhar, não sobrepor: <b><i>text</i></b>, nunca <b><i>text</b></i>.
Uma página precisa de <html>, um <head> (para o título e links) e um <body> (para o que você vê).
Um comentário é <!-- ... -->; o navegador o ignora.
A <div> is a generic block 块级 box that groups content on its own lines. A <span> is a generic inline 行内 box inside a line of text. You use them to group things so you can style or position them.
Semantic 语义 tags describe their role, which helps screen readers and search engines. Prefer them over plain <div> where they fit: <header>, <nav>, <main>, <section>, <article>, <footer>.
Common mistakes
<div> is a block (starts a new line); <span> is inline (stays in the text).
Use semantic tags like <header>, <nav> and <footer> where they fit, not <div> for everything.
Do not use a tag just for its default look — style it with CSS instead.
Português
Um ⟨div⟩ <div> é uma caixa genérica de bloco que agrupa conteúdo em linhas próprias. Um ⟨span⟩ <span> é uma caixa genérica inline dentro de uma linha de texto. Use-os para agrupar coisas a fim de estilizar ou posicioná-las.
Tags semânticas descrevem seu papel, o que ajuda leitores de tela e mecanismos de busca. Prefira-as às plain <div> onde elas se encaixam: <header>, <nav>, <main>, <section>, <article>, <footer>.
CSS 层叠样式表 styles HTML. The simplest way is a <style> block in the <head> (a bigger site uses a separate .css file with <link>). A CSS rule 规则 has a selector 选择器, then { property: value; } pairs called declarations 声明.
Português
CSS estiliza HTML. A maneira mais simples é um bloco <style> no <head> (um site maior usa um arquivo separado .css com <link>). Uma regra CSS tem um seletor, então pares de { property: value; } chamados declarações.
<style>
p { color: blue; font-size: 18px; }
h1 { color: darkred; }
</style>
<h1>Styled heading</h1>
<p>This paragraph is blue.</p>
Link um estilo para que regras CSS estilizem elementos HTML
6.2
Seletores: class & id
English
A class 类 styles many elements: add class="..." in HTML and write .name in CSS. An id 标识符 styles ONE element: id="..." and #name.
The selectors you will meet most, in one place:
Selector
Chooses
p
every <p> element
.note
everything with class="note"
#title
the one element with id="title"
h1, h2
several selectors at once
nav a
every <a> inside a <nav>
.btn:hover
one state of an element (see topic 10)
Common mistakes
A class selector starts with . and an id selector with #.
Link the stylesheet in the <head>, or put rules inside a <style> block.
A class can be reused on many elements; an id should appear once per page.
Português
Uma classe 类 estila muitos elementos: adicione class="..." em HTML e escreva .name em CSS. Um id 标识 estila UM elemento: id="..." e #name.
Set the text colour with color and the background 背景 with background-color. A colour can be a name (red), a hex 十六进制 code (#ff0000), or rgb(255, 0, 0).
Português
Defina a cor do texto com color e o fundo com background-color. Uma cor pode ser um nome (red), um código hexadecimal (#ff0000), ou rgb(255, 0, 0).
<style>
body { background-color: #f0f4ff; }
.card { background-color: white; color: #1e3a8a; padding: 12px; }
</style>
<div class="card">A card with its own colours.</div>
*Cores CSS: nomeadas, hex e rgb()
7.2
Estilizando texto
English
Common text properties: font-size, font-weight (e.g. bold), font-family 字体, text-align 对齐 (left / center / right), and line-height for spacing.
Common mistakes
color sets the text colour; background-color sets the background.
A colour can be a name, a #rrggbb hex code, or rgb(...).
End each declaration inside the braces with a semicolon ; — it separates the property: value pairs (the one after the last declaration is optional). The rule itself ends with the closing brace }.
Português
Propriedades comuns de texto: font-size, font-weight (por exemplo, bold), font-family 字体, text-align alinhamento (left / center / right) e line-height para espaçamento.
<style>
h1 { font-family: Arial, sans-serif; text-align: center; }
p { font-size: 18px; line-height: 1.6; }
</style>
<h1>Centered title</h1>
<p>Readable paragraph text with comfortable line spacing.</p>
Erros comuns
color define a cor do texto; background-color define o fundo.
Uma cor pode ser um nome, um código hex #rrggbb, ou rgb(...).
Termine cada declaração dentro das chaves com um ponto e vírgula ; — ele separa os pares de property: value (aquele após a última declaração é opcional). A regra termina com a chave de fechamento }.
Every element is a box with four layers, from inside out: the content 内容, the padding 内边距 (space inside the border), the border 边框, and the margin 外边距 (space outside the border).
Português
Todo elemento é uma caixa com quatro camadas, de dentro para fora: o conteúdo content, o padding 内边距 (espaço dentro da borda), a border 边框, e o margin 外边距 (espaço fora da borda).
O modelo de caixa: conteúdo, depois padding, depois border, depois margin
8.2
Margin & padding · Margem & preenchimento
English
padding adds space inside the border, pushing the content inwards. margin adds space outside, pushing other boxes away. Give one value for all sides, or four (top right bottom left).
Português
padding padding adiciona espaço dentro da borda, empurrando o conteúdo para dentro. margin margin adiciona espaço fora, afastando outras caixas. Dê um valor para todos os lados, ou quatro (topo direita baixo esquerda).
The display property sets how a box flows. block 块级 takes a whole line; inline 行内 sits within a line of text; none removes the box completely; flex lays the children in a row (next topic).
Common mistakes
Padding is inside the border; margin is the space outside it.
box-sizing: border-box makes the set width include padding and border — often what you want.
display: none hides an element completely; visibility: hidden leaves its space.
Português
A propriedade display display define como uma caixa flui. block block ocupa linha inteira; inline inline fica dentro de uma linha de texto; none none remove a caixa completamente; flex flex alinha os filhos em linha (próximo tópico).
Set a box's width. To centre 居中 a block, give it a width and margin: 0 auto — auto shares the leftover space equally on the left and right.
Português
Defina a width width de uma caixa. Para centrar 居中 um bloco, dê a ele uma largura e margin: auto margin: 0 auto — auto divide o espaço restante igualmente à esquerda e à direita.
Flexbox 弹性布局 lays children out in a row (or a column). Set display: flex on the parent — the container 容器. gap adds space between children; flex: 1 makes them share the width.
Português
Flexbox 弹性布局 alinha filhos em linha (ou coluna). Defina display: flex display: flex no pai — o container 容器. gap gap adiciona espaço entre filhos; flex-grow flex: 1 faz eles compartilharem a largura.
A pseudo-class 伪类 styles an element in one particular state. :hover applies while the mouse is over the element. Add transition 过渡 so the change happens smoothly instead of jumping.
Other useful pseudo-classes: :focus (an input the user clicked into) and :first-child.
Português
Uma pseudo-classe 伪类 estila um elemento em um estado particular. :hover :hover aplica enquanto o mouse está sobre o elemento. Adicione transition transition 过渡 para a mudança acontecer suavemente em vez de pular.
Outras pseudo-classes úteis: :focus (um input no qual o usuário clicou) e :first-child.
:hover estila um elemento enquanto o ponteiro está sobre ele
10.2
Posicionamento
English
Positioning 定位 moves a box away from its normal place. relative nudges the box (and makes it the anchor 锚点 for its children); absolute places a box exactly, measured from the nearest positioned parent; fixed pins it to the screen even when the page scrolls.
top, right, bottom, left say how far to move — they only work on positioned boxes.
Português
Positioning 定位 move uma caixa para longe de seu local normal. relative relative empurra a caixa (e a torna o anchor 锚point para seus filhos); absolute absolute posiciona exatamente uma caixa, medido a partir do pai posicionado mais próximo; fixed fixed a fixa na tela mesmo quando a página rola.
top, bottom, left, right top, right, bottom, left dizem quanto mover — eles só funcionam em caixas posicionadas.
10.3
Media queries & design responsivo
English
A responsive 响应式 page adapts to the screen size. A media query 媒体查询 applies its rules only while a condition about the screen holds, such as max-width.
Design mobile-first 移动优先: write the phone styles first, then add @media (min-width: ...) rules for bigger screens.
Percent widths and max-width let boxes shrink with the screen.
Common mistakes
:hover sticks to its selector with no space: .btn:hover, not .btn :hover.
position: absolute is measured from the nearest positioned parent — give that parent position: relative.
A media query wraps whole rules: @media (max-width: 600px) { .a { ... } }.
Português
Uma página responsiva adapta-se ao tamanho da tela. Uma media query aplica suas regras apenas enquanto uma condição sobre a tela for válida, como max-width.
<style>
.banner { background: #2563eb; color: white; padding: 16px; }
@media (max-width: 600px) {
.banner { background: #16a34a; } /* narrow screens turn green */
}
</style>
<div class="banner">Resize the window: blue when wide, green when narrow.</div>
Design mobile-first 移动优先: escreva os estilos do telefone primeiro, depois adicione regras @media @media (min-width: ...) para telas maiores.
Larguras percentuais e min-width max-width deixam as caixas encolherem com a tela.
Erros comuns
:hover gruda ao seu seletor sem espaço: .btn:hover, não .btn :hover.
position: absolute position: absolute é medido a partir do pai positioned mais próximo — dê aquele pai position: relative position: relative.
Uma media query envolve regras inteiras: @media (condition) { rules }. @media (max-width: 600px) { .a { ... } }.
Pick one and the site follows you — notes, papers, videos and practice all open on it. · Escolha uma e o site te seguirá — notas, provas, vídeos e prática abrirão nela.
Type to search notes, lessons, code, vocabulary and past-paper questions across every subject. · Digite para pesquisar notas, aulas, código, vocabulário e questões de provas anteriores em todas as disciplinas.
