Web programming: building a site, HTML tags and lists

In this lesson you will learn

Explain what a website, a web page and a template are, and the stages of building a site
Recognise paired and single tags and attributes, and write the structure of an HTML document
Tell how text will look in a browser from a code fragment, including wrongly nested tags
Find the kind of list and the numbers and look of its items from the ul, ol, dl tags and the type and start attributes

Every page you open in a browser is really a plain text file: besides the text it contains special marks in angle brackets — tags. The browser reads the file and, looking at the tags, decides where a heading or a list is and which word is bold. The language of these tags is HTML.

Every entrance exam paper has 2 HTML tasks: one on tags and lists (this lesson) and one on tables (the lesson “HTML tables, colour schemes, images and links”). You get a code fragment and are asked what the browser will show, how a list item will be numbered or how many words will be bold.

A website and the stages of building it

Definition

Web page and website

A web page is a document written in HTML and shown by a browser (file extension .html or .htm). A website is a set of web pages with a common subject, design and address, linked to each other by hyperlinks; the home page is usually called index.html.

Definition

Web programming

Creating websites and web applications: marking up pages (HTML), styling them (CSS) and programming their behaviour (JavaScript and server-side languages).

HTML (HyperText Markup Language) describes the content and structure of a page, and CSS (Cascading Style Sheets) describes how it looks — colours, fonts, layout. HTML is not a programming language but a markup language: it has no variables, conditions or loops. A website template is a ready-made design and structure (header, menu, content, footer) that you fill with your own text and pictures. Site builders and systems like WordPress offer thousands of templates.

1
Planning
The site’s goal, audience, sections and the list of pages (the site map).
2
Design
Look, colours, fonts, the page layout; you may also pick a ready-made template.
3
Building (coding)
Writing the pages in HTML and CSS and placing the text and pictures.
4
Testing
Checking in different browsers and screens, testing the links, fixing errors.
5
Publishing
Choosing hosting and a domain name, uploading the files to a server.
6
Maintenance
Updating the content, keeping it secure, adding new sections.

The order of the stages

Give the correct order of the stages of building a site: 1. testing; 2. design; 3. publishing; 4. planning; 5. building.
A) 4, 2, 5, 1, 3 B) 2, 4, 5, 3, 1 C) 4, 5, 2, 1, 3 D) 4, 2, 5, 3, 1 E) 2, 5, 4, 1, 3

Show solution

First we plan why the site is needed (4), then think about its look (2), build the pages (5), test them (1) and only then publish on the internet (3).
Correct answer: A) 4, 2, 5, 1, 3. In option D an untested site is published.

An HTML document: tags and attributes

Definition

Tag

An HTML command in angle brackets: . A paired tag has an opening part () and a closing part (, with a slash) and acts on the text between them. A single tag has no closing part:   (line break), <hr> (horizontal line), <img> (image).

Definition

Attribute

An extra property of a tag, written inside the opening tag as name="value": <ol type="A" start="3">. A tag may have several attributes, in any order.

HTML· Edit the code and run it again

<html>
<head>
  <title>My first page</title>
</head>
<body>
  <h1>Baku</h1>
  <p>Baku is the capital of Azerbaijan.<br>It lies on the Caspian Sea.</p>
  <hr>
  <p>Many     spaces     become     one.</p>
  <P>Tags can be written in CAPITALS too.</P>
</body>
</html>

Preview

The skeleton of an HTML document: <html> wraps the whole document, <head> the service part (<title> is the name on the browser tab), and <body> the part shown on the screen. Change the code and the preview updates.

Tags are not case-sensitive:  and  are the same.
The browser shows consecutive spaces and line breaks as one space: use   for a new line and  for a new paragraph.
<h1>–<h6> are headings: <h1> is the largest, and all are shown in bold.
Tags are closed in the reverse order of opening: … is correct.

Formatting text

Tag	Result in the browser
`<b>…</b>`	bold
`<strong>…</strong>`	bold (important text)
`<i>…</i>`	italic
`<em>…</em>`	italic (emphasis)
`<u>…</u>`	underlined
`<tt>…</tt>`	monospace (typewriter) font: every letter has the same width; not bold
`<sub>…</sub>` · `<sup>…</sup>`	subscript (H₂O) · superscript (x²)
`<font color="red" size="5">`	text colour, size (1–7, default 3) and, with `face`, the font

HTML· Edit the code and run it again

<p><b>b: bold</b> | <strong>strong: bold</strong></p>
<p><i>i: italic</i> | <em>em: italic</em></p>
<p><u>u: underlined</u> | <tt>tt: monospace</tt></p>
<p>H<sub>2</sub>O and x<sup>2</sup></p>
<p><font color="red" size="5">font: red, size 5</font></p>
<p><b><i>bold and italic</i></b></p>
<p><b>IN<i>FO</b>RM</i> (wrongly nested)</p>

Preview

See the result of every tag and try your own words. Look closely at the wrong nesting in the last line.

DİM tasks often ask you to count bold words. The rule: text shown in bold is the text inside , , the headings <h1>–<h6>, and in tables the <th> cells. , ,  and <tt> do not make text bold. If a word is inside several tags, the effects add up: C++ is both bold and italic.

Example 1. How many words will be bold?

According to the HTML code fragment, how many of the words will be shown in bold on the web page?
<ul>
<li>Python</li>
<li><tt>Java</tt></li>
<li>C++</li>
<li>Kotlin</li>
<li>Swift</li>
<li>Go and Rust</li>
</ul>
A) 2 B) 3 C) 4 D) 5 E) 1

Show solution

Python — , bold. Java — <tt>, monospace, not bold. C++ — inside , bold (and italic). Kotlin — , italic. Swift — , underlined. Go — , bold; “and Rust” is outside the tag.
Bold words: Python, C++, Go — 3.
Correct answer: B) 3.

Even when tags are nested wrongly, the browser still shows the page. The rule is simple: each formatting tag acts on the text from its own opening tag to its own closing tag, no matter where the other tags close.

Example 2. Wrongly nested tags

How will the code fragment INFORM be shown on the web page?
A) the whole word is bold and italic
B) “IN” is bold, “FO” is bold and italic, “RM” is italic
C) “INFO” is bold, “RM” is plain
D) “IN” is bold, “FO” is only italic, “RM” is plain
E) the whole word is italic

Show solution

 opens before “IN” and  closes it after “FO”: the bold zone is INFO.  opens before “FO” and  closes it at the end: the italic zone is FORM.
The overlap FO is both bold and italic.
Correct answer: B.

Lists

List	Tags	How it looks	Attributes
Bulleted (unordered)	`<ul>`, `<li>`	a marker before each item: ● disc, ○ circle, ■ square	`type`
Numbered (ordered)	`<ol>`, `<li>`	1, 2, 3 · A, B, C · a, b, c · I, II, III · i, ii, iii	`type`, `start`
Definition	`<dl>`, `<dt>`, `<dd>`	a term (`<dt>`) and its description (`<dd>`, indented); no markers	—

HTML· Edit the code and run it again

<ul type="square">
  <li>Python</li>
  <li>Java
    <ul>
      <li>Kotlin</li>
    </ul>
  </li>
</ul>
<ol type="A" start="3">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>
<ol type="i">
  <li>planning</li>
  <li>design</li>
</ol>
<dl>
  <dt>HTML</dt>
  <dd>marks up the content of a page</dd>
  <dt>CSS</dt>
  <dd>sets how the page looks</dd>
</dl>

Preview

Three kinds of lists. Change type and start: for example, write type="I" or start="5" and look at the result.

start is always a number, even when the numbering uses letters: <ol type="A" start="3"> starts at C, <ol type="I" start="4"> at IV. In a nested <ul> the inner list gets the ○ marker automatically. The <dt> term is not bold — it is plain text, and <dd> is indented.

Example 3. The last item of the numbered list

According to the HTML code fragment, which statement about the last item of the numbered list is true?
<ul>
<li>monitor</li>
<li>printer</li>
</ul>
<ol type="A" start="2">
<li>scanner</li>
<li>projector</li>
<li>plotter</li>
</ol>
A) it is numbered “D” and written in bold
B) it is numbered “C” and written in bold
C) it is numbered “3” and written in italics
D) it is numbered “D” and underlined
E) it has a bullet and is written in italics

Show solution

1) The numbered list is the <ol>; <ul> gives bullets, so E is wrong.
2) type="A", start="2": the numbers are B, C, D. The last item (“plotter”) is D.
3) It is inside  — bold.
Correct answer: A.

Example 4. A true statement about a list

<ol type="I" start="4">
<li>physics</li>
<li>chemistry</li>
<li>biology</li>
</ol>
Which statement is true?
A) it is a bulleted list and its last item is underlined
B) it is a numbered list and “chemistry” is bold with the number V
C) it is a numbered list and the first item has the number I
D) it is a definition list
E) it is a numbered list and the last item has the number VII

Show solution

<ol> is a numbered list (A and D are wrong). type="I" means Roman numerals and start="4" starts at IV: physics IV, chemistry V, biology VI (C and E are wrong). “chemistry” is inside  — bold.
Correct answer: B.

Interactive

Loading simulation…

Drop each tag name into the right group.

Write the tag or attribute

1.A numbered list is created with the tag.
2.Each list item is written in the tag.
3.In a definition list the term is written in the tag.
4.The number the numbering starts from is set by the attribute.

Key points

Stages of building a site: planning, design, building, testing, publishing, maintenance; a template is a ready-made design and structure.
HTML describes content and structure, CSS the look; HTML is a markup language, not a programming language.
Paired tags open and close; single tags ( , <hr>, <img>) do not close; attributes go into the opening tag as name="value".
Bold: , , <h1>–<h6>, <th>; italic: , ;  underlines, <tt> is monospace.
With wrong nesting, each tag acts from its own opening tag to its own closing tag.
<ul> — bulleted, <ol> — numbered (type: 1, A, a, I, i; start is a number), <dl> — definition list (<dt>, <dd>).

Check yourself

12 questions. Every correct answer earns XP.

1 / 12

Which tag creates a numbered list?