top of page

Lesson Notes

Web Designing Using Multimedia

Grade

11

Term

3

This lesson teaches you the basics of how to build a simple website. It focuses on HTML, the language used to structure the content of all webpages.

Short Notes

  • HTML (HyperText Markup Language): The standard language for creating web pages. It is NOT a programming language; it's a markup language that tells a web browser how to display content.

  • HTML Tags: The core of HTML. They are keywords surrounded by angle brackets (<>). Most tags come in pairs: an opening tag (<p>) and a closing tag (</p>).

Basic HTML Document Structure:

<html>

<head>

<title>This is the page title</title>

</head>

<body>

This is where all the visible content goes.

</body>

</html>


  • Essential HTML Tags:

    • <h1> to <h6>: Headings (h1 is the biggest).

    • <p>: Paragraph.

    • <br>: Line break (an "empty" tag with no closing tag).

    • <b>: Bold text.

    • <i>: Italic text.

    • <img>: Image tag. Key attributes are src="filename.jpg" (source) and alt="description" (alternative text).

    • <a>: Anchor tag, used for hyperlinks. The key attribute is href="http://www.example.com" (hypertext reference).

    • <ul> (Unordered List) and <ol> (Ordered List): Used with <li> (List Item) tags inside them.

    • <table>: Creates a table, used with <tr> (table row) and <td> (table data/cell) tags.

  • Static vs. Dynamic Websites:

    • Static: The content is fixed and doesn't change unless the code is edited. Good for simple informational sites.

    • Dynamic: The content can change automatically based on user interaction or a database. Examples: Facebook, online news sites.

  • Web Authoring Tools: Software like KompoZer that provides a graphical interface (WYSIWYG - "What You See Is What You Get") to build websites without writing all the code by hand.

  • CMS (Content Management System): A platform like Joomla or WordPress that makes it easy to create and manage dynamic websites.

Important Points for the Exam

  • You should be able to write a simple HTML document from memory, including the <html>, <head>, <title>, and <body> tags.

  • Memorize the purpose of the essential tags: <h1>, <p>, <img>, <a>, <ul>, <li>, <table>.

  • Know the key attributes for images (src) and links (href).

  • Understand the fundamental difference between a static website and a dynamic website.

Tips & Tricks for Studying

  • Practice on Paper: You don't need a computer to practice HTML. Write the code for a simple webpage in your notebook. This forces you to remember the tag names and the correct structure.

  • Create a Cheat Sheet: Make a one-page summary of the most common HTML tags and their attributes. Review it regularly.

  • Deconstruct a Real Website: Use the "View Page Source" option in your web browser on a simple website to see its HTML code. Try to identify the tags you've learned.

වියාචනය (Disclaimer)

Idasara Academy ඉගෙනුම් සම්පත් නිර්මාණය කර ඇත්තේ සිසුන්ට මගපෙන්වීම, පුහුණුව සහ අධ්‍යයන උපායමාර්ග ලබාදී සහයෝගය දැක්වීමටය.

කෙසේ වෙතත්, සියලුම විභාග සහ නිල අවශ්‍යතා සඳහා, සිසුන් අනිවාර්යයෙන්ම ශ්‍රී ලංකා අධ්‍යාපන අමාත්‍යාංශයේ, අධ්‍යාපන ප්‍රකාශන දෙපාර්තමේන්තුව විසින් ප්‍රකාශයට පත් කරන ලද නිල පෙළපොත් සහ සම්පත් පරිශීලනය කළ යුතුය.

ජාතික විභාග සඳහා අන්තර්ගතයේ නිල බලය ලත් මූලාශ්‍රය වනුයේ රජය විසින් නිකුත් කරනු ලබන මෙම ප්‍රකාශනයි.

bottom of page