Web pages and HTML: Class 10 Computer Science

Key points

A web page is a document that can be viewed in a web browser. A website is a collection of related web pages under one domain name. The first page of a website is called the home page. Pages are joined to each other by hyperlinks.

A web server is a computer that stores websites and sends pages when asked. A web browser is the client program, for example Chrome or Firefox, that requests a page by its URL and displays it. The browser reads the HTML code and shows it as a formatted page.

HTML stands for HyperText Markup Language. It is a markup language, not a programming language. It uses tags to describe the structure of a page, such as headings, paragraphs and images. An HTML file is saved with the extension .html or .htm and can be written in a simple text editor like Notepad.

Tags and elements:

• A tag is a keyword inside angle brackets, such as <p>.
• Most tags come in pairs: an opening tag <p> and a closing tag </p>, with the content in between. The whole thing is an element.
• Empty tags have no closing tag, for example <br> (line break), <hr> (horizontal line) and <img>.
• An attribute gives extra information inside the opening tag, written as name="value", for example <img src="photo.jpg">.

The basic structure of an HTML document is:

• <!DOCTYPE html> tells the browser that this is an HTML5 page.
• <html> ... </html> wraps the whole page.
• <head> ... </head> holds information about the page, such as <title>, which appears on the browser tab.
• <body> ... </body> holds everything that is shown on the page.

A minimal page looks like this: <!DOCTYPE html><html><head><title>My Page</title></head><body><h1>Welcome</h1><p>This is my first page.</p></body></html>

Headings and text:

• <h1> to <h6> give six levels of headings. h1 is the largest and h6 the smallest.
• <p> makes a paragraph.
• <br> breaks a line without starting a new paragraph.
• <hr> draws a horizontal rule across the page.

Text formatting tags:

• <b> or <strong>: bold text.
• <i> or <em>: italic text.
• <u>: underlined text.
• <sub> and <sup>: subscript and superscript, as in H₂O and x².
• <mark>: highlighted text.

Lists:

• Unordered list <ul> shows bullet points.
• Ordered list <ol> shows numbers or letters.
• Each item is written inside <li> ... </li>.
• Example: <ul><li>Tea</li><li>Milk</li></ul>

Links and images:

• A hyperlink uses the anchor tag: <a href="https://www.example.com">Visit</a>. The href attribute holds the destination and the text between the tags is clickable.
• An image uses <img src="cat.jpg" alt="A cat" width="200">. The src attribute gives the file, and alt gives text shown if the image fails to load and read aloud for blind users.

Tables are used to show data in rows and columns:

• <table> starts and ends the table.
• <tr> is a table row.
• <th> is a heading cell, shown bold and centred.
• <td> is a data cell.
• The border attribute or CSS can add lines.
• colspan and rowspan join cells across columns or rows.

Forms collect information from visitors. A <form> contains controls such as <input type="text"> for a text box, <input type="password"> for hidden characters, radio buttons and check boxes, a <select> drop down list, a <textarea> for long text and a submit button. CSS (Cascading Style Sheets) controls the colours, fonts and layout of a page, so structure and style are kept separate. Good design uses clear headings, readable fonts, enough contrast, a consistent layout and easy navigation.

Study tip: Practise by typing small pages in Notepad and opening them in a browser. In the exam, write the tags neatly in lowercase, indent nested tags and always close them. Remember the full structure: doctype, html, head with title, then body. For code questions, a short and correct example earns more than a long explanation.

Definitions and flashcards

Say the meaning first, then open the card to check.

Short questions with model answers

These are the kind of questions asked for 2, 3 and 5 marks. Try each one before opening the answer.

Common mistakes

• Forgetting to close a tag, for example writing <p> without </p>, which can break the layout.
• Writing the attribute outside the angle brackets, such as <a> href="...".
• Using h1 to h6 only to make text big. Heading tags describe structure, so use CSS for size.
• Leaving out the alt attribute in img, or mixing up src (image file) and href (link target).
• Saving the file as .txt instead of .html, so the browser shows code rather than a page.

Practise this chapter

Practice questions and timed test Printable worksheet