Step 71. HTML/CSS Basics — A Web Page’s Skeleton and Clothes

Level 1 — Programming and the Computer’s Interior | Difficulty ★★☆☆☆ | Estimated time: 3 hours

Prerequisites: you can create and save a file with a text editor; a web browser (Chrome/Edge, etc.) is installed; beginner-level Python programming experience is enough.

What you need: a text editor (Notepad or VSCode) and one web browser. Neither installation nor an internet connection is required.
Caution: today’s practice is 100% safe. Every file you make stays inside your computer, and edits in the browser happen only inside your screen.

Until now we’ve lived in the black window called the terminal. Starting today, the stage is the browser. The web pages you see every day are in fact all "text files." Trace even a flashy shopping mall to its roots and it’s one document made of letters, which the browser renders beautifully. The language that document is written in is HTML, and the language that decorates it is CSS. The reason a security learner studies this is simple — without knowing the structure of the target, neither attack nor defense is possible.

1. Learning Objectives

By the end of this chapter, you will be able to:

Starting from an empty file, build by hand a web page with a title, paragraphs, links, images, lists, and input fields
Explain the structure of form and input tags (action, method, name) and build a login form
Apply styles to only the elements you want with CSS selectors (tag, class, id)
View the DOM in the developer tools’ (F12) Elements tab and modify it directly
Explain in principle "why web hacking starts with understanding HTML"

2. Background Knowledge — Today’s Tools and Concepts

Today’s Tools at a Glance

Category	Details
Language/environment	HTML (document structure markup language) + CSS (style rule language). The runtime environment is a web browser
Today’s tools	A text editor, the browser developer tools’ (F12) Elements tab
Today’s tags	`html/head/body`, `h1`, `p`, `a`, `img`, `ul/li`, `form`, `input`, `button`, `div`
Concepts needed	Tags and attributes, the DOM (Document Object Model), CSS selectors, the path form data takes to the server
Today’s deliverables	`page.html` — an introduction page, `login.html` — a login form page

2-1. Tags — Putting Name Tags on Boxes

HTML’s basic unit is the tag. Writing <p>hello</p> marks "from here to here is a paragraph." The whole structure is content sitting between an opening tag <p> and a closing tag </p>. Closing tags carry a slash (/). A box you open must be closed — that is HTML’s first rule.

Tags can carry attributes (additional information). In <a href="https://example.com">link</a>, href="..." is an attribute — extra information like "where to connect to," written inside the tag.

2-2. form and input — Today’s Protagonists

From a web security perspective, the most important tag is the form (the input envelope). Login, search, posting — every scene where a user sends data to a server has a form.

<form action="address" method="get">
  <input type="text" name="nickname">
  <button type="submit">Send</button>
</form>

action: to which address do we send this envelope
method: by what means do we send it (get or post)
name: the name tag attached to this field’s data — without it, the data never reaches the server

input‘s type matters too. text is a normal input field, password is a field where typed characters are masked as dots, and submit is the send button. Today you build the sense that every input field on screen is "a hole through which data departs for the server wearing a name tag."

2-3. The DOM — The Family Tree the Browser Draws

When a browser reads an HTML file, it converts it into a tree structure called the DOM (Document Object Model) and stores it internally. <html> is the root, <head> and <body> branch off below it, and titles, paragraphs, and lists hang beneath them.

Why the DOM matters: when the browser paints the screen, it doesn’t look at the original file directly — it paints from this DOM. So changing the DOM changes the screen. Both the ability to swap text with developer tools and the ability of an XSS (malicious script injection) attack to manipulate the screen come entirely from this DOM.

2-4. CSS — Dressing Elements with Selectors

CSS’s syntax fits in one line: h1 { color: blue; } — "for all h1 tags, make the text color blue." The part like h1 that picks "whom to dress" is called a selector.

There are three ways to pick: the tag name (h1), a nickname called class (.highlight — shareable by many elements), and a unique name called id (#title — only one per page). This selector syntax isn’t used only for decoration; later, when you scrape web data, it’s reused as-is as "the address that picks out the elements you want."

3. Follow Along

3-1. Your First Page — The Miracle of Five Lines

Open your editor, type the content below exactly, and save it as page.html.

<!DOCTYPE html>
<html>
<head><title>My First Page</title></head>
<body><h1>Hello, Web!</h1></body>
</html>

Input: double-click page.html in the file explorer (it opens in the browser).

Screen example: a big "Hello, Web!" appears in the browser window, and the tab name at the top of the window changes to "My First Page."

How to read it: <!DOCTYPE html> is a declaration saying "this is a modern HTML document," <title> sets the tab name, and <h1> makes the largest heading. Just five lines, yet all of a web page’s basic elements (declaration, root, head, body, heading) are in there.

Why: a ritual of confirming with your hands that a web page is ultimately a text file. Remember the fact that it opened with only a browser — no server, no internet.

3-2. Adding Tags — Filling in the Contents

Fill the <body> like this:

<body>
  <h1>My Introduction Page</h1>
  <p>Hello. I'm a student learning security.</p>
  <ul>
    <li>I know Python</li>
    <li>I'm learning the web</li>
  </ul>
  <a href="https://example.com">Reference site</a><br>
  <input type="text" placeholder="Enter your name">
</body>

Input: save → F5 (refresh) in the browser.

Screen example: below the heading, a paragraph, two bullet items, a blue link, and an input field appear in order.

How to read it: <ul> is the bullet-list container, <li> is one item inside it. <br> is an exception with no closing tag — it makes a line break. placeholder is the faint guide text shown inside an input field.

Why: the step of learning the sense that every element on screen corresponds one-to-one with a tag. Later, when you analyze "what does this input field send to the server?", this sense is used as-is.

3-3. Applying Style — From Inline to a CSS Block

First, let’s dye just the heading red. Change the <h1> like this:

<h1 style="color: red;">My Introduction Page</h1>

Save and refresh, and the heading is red. Written directly inside the tag, this is called an inline style. Simple, but unmanageable as the page grows. So we use a CSS block that gathers styles in one place. Add the following inside <head>, and delete the style you just added.

<style>
  h1 { color: blue; }
  body { background-color: #f4f4f4; font-family: sans-serif; }
  .highlight { border-left: 4px solid blue; padding-left: 8px; }
</style>

And attach the nickname to just one paragraph: <p class="highlight">Hello. ...</p>

Screen example: the heading is blue, the background light gray, and only the nicknamed paragraph gets a blue vertical bar on the left.

How to read it: the dot (.) in .highlight means "find by the nickname class." The rule applied only to the element wearing the nickname. #name is the selector that finds by id.

Why: separating content (HTML) from decoration (CSS) is the web’s basic design. And this selector syntax will meet you again later as the language for specifying "what to fetch" in data collection (crawling).

3-4. Developer Tools — The Browser’s Operating Table

Now open today’s most important tool.

Input: press F12 on the page (Fn+F12 on laptops). Or right-click on an empty part of the page → "Inspect."

Screen example: a panel opens beside or below the screen, and the HTML you just wrote appears as a tree structure in the Elements tab.

How to read it: this tree is the DOM. You can collapse and expand with the triangle next to <h1>, and double-clicking a text part lets you edit it directly. Try changing "My Introduction Page" to "Hacked Page." The screen changes instantly.

Why: keep in mind — this edit changes only the copy inside my browser. Refresh and it returns to normal; other people’s screens don’t change. You can now understand in principle why the joke "edit your bank balance with developer tools and you’re rich" is a joke. Conversely, XSS is scary because it remotely changes the DOM inside someone else’s browser.

3-5. Building a Login Form — Where Does Input Go?

Today’s core exercise. Make a new file, login.html.

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Login Practice</title></head>
<body>
  <h1>Login</h1>
  <form action="login_check" method="get">
    <input type="text" name="userid" placeholder="ID"><br>
    <input type="password" name="userpw" placeholder="Password"><br>
    <button type="submit">Log in</button>
  </form>
</body>
</html>

Input: open it in the browser, type admin in the ID field and 1234 in the password field, and click the login button.

Screen example: a page-not-found error appears, but look at the address bar. The address has changed like this:

file:///.../login_check?userid=admin&userpw=1234

How to read it: the characters typed into the input fields departed wearing the name tags called name, attached behind the address. This form — name=value pairs chained with & after a ? — is GET-method data transfer. The error appeared because there’s no server to receive it (action’s address), but the transfer itself happened. The password field’s characters were masked as dots, yet they rode the address in plain text — "hidden from view" and "safe" are different things.

Why: this one scene is a miniature of web security. ① Input values go to the server wearing name tags ② if method is get, they’re exposed in the address ③ the server distinguishes data by those name tags. Nearly all web attacks are techniques for manipulating this envelope’s contents or destination.

3-6. Predict — What If You Don’t Close a Tag?

An experiment. In page.html, deliberately delete the </p> closing tag and save — what happens to the screen? Will the page not open at all, or will it open strangely? Write down your prediction and check it yourself.

Confirm yourself: delete the closing tag, save, refresh — surprisingly, the page opens. But the structure goes askew, with later content treated as part of the paragraph. That’s because the browser thinks "the author must have forgotten" and closes it arbitrarily. Check in F12’s Elements tab — the DOM the browser built contains a </p> you never wrote.

Why: this "generosity" of browsers is a double-edged sword. It opens slightly broken pages, but when an attacker deliberately plants distorted HTML, the browser "kindly" interprets it, and unexpected behavior can emerge. The habit of writing HTML rigorously is itself a security habit.

4. Missions & Exercises

Mission — Complete My Intro Page + Signup Form

Develop page.html to meet all the requirements below.

Put different phrases in <title> and <h1>, compare where each appears on screen, and write it in your notes
Include two paragraphs, a bullet list (3+ items), and one link
Change the heading color and background color in the CSS block, and make one class applied to only a specific paragraph
Add a "Sign Up" form at the bottom of the page — three input fields (name text, email text, intro text) and a submit button, with method get
Click the submit button, confirm that all three name tags ride into the address bar, and copy that entire address into your notes
Change one paragraph’s text in developer tools, refresh, confirm it disappears, and write "why does it disappear" in one sentence

Exercises

Q1. An input field with only <input type="text" placeholder="ID"> and no name sends no data to the server even when the form is submitted. Why?

Q2. State two differences between class and id (the symbol used to select them, the per-page count limit).

Q3. Even if you change the text of someone else’s homepage in developer tools, the site owner’s screen doesn’t change. What property of the DOM explains this?

Q4. In 3-5, the password field’s characters appeared masked as dots, yet after submission they rode the address bar in plain text. Why do the two differ? State the relationship between "what is visible" and "what is transmitted" in one sentence.

5. Model Answers & Completion Criteria

Mission Model Answer

An example skeleton for the mission (replace the phrases with your own):

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>A Security Learner's Page</title>
  <style>
    h1 { color: darkgreen; }
    body { background-color: #f0f8ff; }
    .highlight { color: crimson; font-weight: bold; }
  </style>
</head>
<body>
  <h1>Hello, Aspiring Security Pro</h1>
  <p class="highlight">Only this paragraph wears the red nickname.</p>
  <p>This paragraph is ordinary.</p>
  <ul>
    <li>Python</li>
    <li>HTML/CSS</li>
    <li>Curiosity</li>
  </ul>
  <a href="https://example.com">Reference site</a>

  <h2>Sign Up</h2>
  <form action="join" method="get">
    <input type="text" name="name" placeholder="Name"><br>
    <input type="text" name="email" placeholder="Email"><br>
    <input type="text" name="intro" placeholder="One-line intro"><br>
    <button type="submit">Send</button>
  </form>
</body>
</html>

Address bar example after submission (screen example):

file:///.../join?name=hong&email=hong%40example.com&intro=hello

Notice that the email’s @ changed to %40. The rule for swapping characters that can’t ride in an address (URL encoding) has been applied.

How to verify: ① Are the tab name and the on-screen heading different from each other? ② After submission, does the address contain ?name=...&email=...&intro=...? ③ Does the developer-tools edit disappear on refresh? If all three are "yes," it’s complete.

Exercise Solutions

Q1 solution. Because name is the data’s name tag. The server receives data as "name tag=value" pairs, and a nameless input field’s value has no name tag, so it never gets loaded into the envelope. placeholder is merely on-screen guide text and is unrelated to transmission.

Q2 solution. class is found with a dot (.) in selectors, and many elements on one page can share the same class. id is found with a hash (#), and only one of a given id may exist per page. It’s the difference between a nickname (class) and a national ID number (id).

Q3 solution. Because the DOM is a copy each browser builds inside itself. A developer-tools edit changes only the copy in my browser; the server’s original file and the DOMs in other people’s browsers stay the same. On refresh, the DOM is rebuilt from the server’s original and the edit disappears.

Q4 solution. Because type="password"’s dot masking is a device that hides the data from people looking at the screen only — it doesn’t hide the data itself. The input value is transmitted in plain text wearing its name tag. One sentence: "being invisible on screen and being protected in transit are completely different problems."

Completion Criteria Checklist

[ ] I can build a web page from scratch, starting with an empty file
[ ] I know the uses of common tags (h1, p, a, img, ul/li, form, input, button, div)
[ ] I can explain the roles of form’s action, method, and name
[ ] I can explain the differences among CSS selectors (tag, class, id)
[ ] I can view and modify the DOM in the developer tools’ Elements tab
[ ] I confirmed input values riding the address wearing name tags
[ ] Mission: I completed the intro page + signup form

6. Common Pitfalls & Fixes

Wall 1. I forgot to close a tag

Symptom: contrary to intent, all the content after it grows like a heading, or the list continues.
Cause: a missing closing tag (</h1>, etc.) let the scope bleed to what follows.
Fix: find each opening tag and check its pair one by one. In F12’s Elements tab, traces of where the browser arbitrarily closed tags show where it broke.

Wall 2. An image shows as a broken box

Symptom: only a torn-picture icon appears where the <img> is.
Cause: the filename in src differs from the actual filename (including capitalization), or the file is in a different folder.
Fix: put the image in the same folder as the html file, and check that the filename is written exactly, extension included. In developer tools, hovering over the img tag shows the path the browser tried to find.

Wall 3. I fixed it in developer tools, but it vanishes on refresh

Symptom: I clearly edited it, but pressing F5 returns it to normal.
Cause: developer-tools edits change only the copy (DOM) inside the browser. The original file is untouched.
Fix: not an error — normal behavior. To change it permanently, edit the original in the editor and save. Understanding this difference is one of today’s cores.

Wall 4. I wrote CSS, but nothing applies

Symptom: neither color nor font changes.
Cause: the <style> block went inside <body>, or a semicolon/brace is wrong, or the selector name doesn’t match the actual one.
Fix: check that <style> is inside <head> and rules have the form selector { property: value; }. Omitting the class selector’s dot (.) or the id selector’s hash (#) is the most common mistake.

Wall 5. I submitted the form, but my data isn’t in the address

Symptom: after submission, there’s no ? in the address.
Cause: one of two things — the input field has no name attribute, or method="post" put the data in the body instead of the address.
Fix: first check whether <input> has name="...". With method left as get, attaching a name makes the name tag appear in the address.

7. Summary

Today’s Concepts

Concept	One-line description
Tag	A name tag marking document structure — what you open, you close
Attribute	Additional information written inside a tag (`href="..."`, `name="..."`)
form	The envelope sending input data to the server (action=destination, method=means)
name	The name tag of an input field’s data — without it, nothing is transmitted
DOM	The tree structure the browser builds from HTML — the screen is painted from it
Selector	CSS syntax for picking "whom to dress" (tag / .class / #id)

Today’s Tags

Tag	What it does
`<h1>`~`<h6>`	Headings (bigger number, smaller heading)
`<p>`	Paragraph
`<a href="address">`	Link
`<img src="file">`	Image
`<ul>` / `<li>`	Bullet-list container / item
`<form action method>`	Input envelope
`<input type name>`	Input field (text / password / submit, etc.)
`<style>`	CSS block inside head

The Instinct That Matters More Than Commands

Today’s core senses are three. First, a web page is a text file — so anyone can open it up (F12) and imitate it. Second, the screen is a picture of the DOM — editing the copy doesn’t change the original, and conversely, knowing the original’s structure lets you predict the screen. Third, an input field is a hole to the server — typed characters depart wearing name tags, and with the get method they’re exposed in the address. The security connection: XSS is a technique for inserting someone else’s code into this DOM, and every input-validation problem starts at this "hole." Only someone who knows the structure knows both how to break it and how to guard it.

Once every box is checked, Step 71 is complete. Click the checkbox in the sidebar to save your progress.