1.HTML Structure
Description: This content provides a simple explanation of the basic structure of an HTML document, including the usage of the tags.
Syllabus Coverage: Basics of HTML, Document Structure, Title Tag Usage, Head and Body Sections
Aim: To help learners understand the fundamental structure of an HTML document and how to properly use the title tag to name a webpage.
1 2 3 4 5 6 7 8 9 10 11 | <html> <head> <title> Sri Lanka </title> </head> <body> </body> </html> |
2.HTML Tags (Paragraph, Line Break, Horizontal Rule)
Description: This content explains the use of basic HTML elements such as paragraphs, line breaks, and horizontal rules. It provides an example where these elements are used to display repetitive text about Sri Lanka in a structured format.
Syllabus Coverage: Basic HTML Elements, Paragraphs, Line Breaks, Horizontal Rules, Text Formatting
Aim: To help learners understand how to structure and format content on a webpage using fundamental HTML elements like paragraphs, line breaks, and horizontal rules.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <head> <title> Sri Lanka </title> </head> <body> <p> HTML tags(paragraph | line break | horizontal rule) <p> <p> My country is Sri Lanka. <p> <br> <p> My country is Sri Lanka. <p> <hr> <p> My country is Sri Lanka. <p> </body> </html> |
3.Attribute and Values
Description: This content introduces the concept of attributes and their values in HTML, demonstrating how they are used to modify the appearance of elements. Examples include changing font color using names, RGB codes, and adjusting font size and type.
Syllabus Coverage: HTML Attributes, Font Tag, Color, Size, Face, RGB Color Codes
Aim: To teach learners how to use attributes and their values to customize the appearance of HTML elements such as text color, font type, and size effectively.
The title reflects the purpose of the provided HTML code by summarizing the focus on attributes and their values in HTML.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <html> <Head> <title>Attribute and Values </title> </Head> <body> introduction Attribute and Values <br> <font color="green"> Color is Green </font> <br> <font face = "Arial" size = "10" color="red">Font name -Arial / Size 30 / Color-red </font> <br> <font color="#0000FF">Color RGB Code</font> </body> </html> |
4 Multiple HTML Tags
Description: This content demonstrates the use of multiple HTML tags to format and style text. It includes examples of headings, center alignment, underlining, and italicizing text to highlight the topic “Wild Animals.”
Syllabus Coverage: HTML Text Formatting, Headings, Center Tag, Underline, Italics, Nested Tags
Aim: To help learners understand how to combine multiple HTML tags to create visually appealing and well-structured content on a webpage.
1 2 3 4 5 6 7 8 9 10 | <html> <head> <title>Multiple HTML tags</title> </head> <body> Wild Animals <h1><center><u><i>Wild Animals</i></u></center> </h1> </body> </html> |
5. HTML Text Formatting
Description: This content provides examples of various HTML text formatting tags, such as bold, italic, underline, emphasis, strike-through, superscript, subscript, and spacing. It demonstrates how these tags can be used to style and format text on a webpage effectively.
Syllabus Coverage: HTML Text Formatting, Bold, Italics, Underline, Emphasis, Strike-Out, Superscript, Subscript, Non-Breaking Space
Aim: To teach learners how to use different HTML text formatting tags to enhance the appearance and readability of text content on a webpage.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <html> <head> <title>HTML Text Formatting </title> </head> <body> <h1><center>HTML Text Formatting Examples</center></h1> Elephants are the largest existing land animals. <br><br> <b>Elephants are the largest existing land animals.(bold)</b> <br><br> <i>Elephants are the largest existing land animals.(Italic)</i> <br><br> <u>Elephants are the largest existing land animals.(Underline)</u> <br><br> <em>Elephants are the largest existing land animals.(emphasis)</em> <br><br> <s>Elephants are the largest existing land animals.(strike out)</s> <br><br> Elephants are the <sup>largest existing land animals.(superscript)</sup> <br><br> <sub>Elephants are the <sub>largest existing land animals.(subscript)</sub> <br><br> <p>Elephants are the largest a existing land animals (SET SPACE BETWEEN WORDS) </p> </body> </html> |
6. Paragraph Alignment
Description: This content demonstrates how to align paragraphs in HTML using the align attribute with values such as left, right, center, and justify. It also includes an example of combining paragraph alignment with text color formatting to highlight specific parts of the text.
Syllabus Coverage: HTML Paragraph Alignment, Left, Right, Center, Justify, Text Formatting, Font Color
Aim: To teach learners how to align paragraphs effectively and combine alignment with other formatting options like text color to create visually appealing and well-structured content on a webpage.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <html> <title>Paragraph Align </title> <body> <h1>Paragraph alignment Left</h1> <p align = 'left'> Elephants are the largest existing land animals. Three living species are currently recognised: the African bush elephant, the African forest elephant, and the Asian elephant. They are an informal grouping within the subfamily Elephantinae of the order Proboscidea; extinct members include the mastodons. Elephantinae also contains several extinct groups, including the mammoths and straight-tusked elephants. </p> <h1>Paragraph alignment Right</h1> <p align = 'right'> Elephants are the largest existing land animals. Three living species are currently recognised: the African bush elephant, the African forest elephant, and the Asian elephant. They are an informal grouping within the subfamily Elephantinae of the order Proboscidea; extinct members include the mastodons. Elephantinae also contains several extinct groups, including the mammoths and straight-tusked elephants. </p> <h1>Paragraph alignment Center</h1> <p align = 'center'> Elephants are the largest existing land animals. Three living species are currently recognised: the African bush elephant, the African forest elephant, and the Asian elephant. They are an informal grouping within the subfamily Elephantinae of the order Proboscidea; extinct members include the mastodons. Elephantinae also contains several extinct groups, including the mammoths and straight-tusked elephants. </p> <h1>Paragraph alignment Justify</h1> <p align = 'justify'> Elephants are the largest existing land animals. Three living species are currently recognised: the African bush elephant, the African forest elephant, and the Asian elephant. They are an informal grouping within the subfamily Elephantinae of the order Proboscidea; extinct members include the mastodons. Elephantinae also contains several extinct groups, including the mammoths and straight-tusked elephants. </p> <h1>Paragraph alignment Justify and Some Text colour RED</h1> <p align = 'justify'> Elephants are the largest existing land animals. <font color="Red"> Three living species are currently recognised: the African bush elephant, the African forest elephant, and the Asian elephant. </font> They are an informal grouping within the subfamily Elephantinae of the order Proboscidea; extinct members include the mastodons. Elephantinae also contains several extinct groups, including the mammoths and straight-tusked elephants. </p> </body> </html> |
7.Insert Image
Description: This content demonstrates how to insert images into an HTML document using the
Syllabus Coverage: HTML Image Tag, Image Attributes (src, alt, width, height, align, border), Responsive Images
Aim: To teach learners how to insert and customize images in HTML, including resizing, aligning, and adding alternative text for accessibility and responsiveness.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <title>Insert Image</title> <body> <h1> Image Insert <h1> <img src="/htmlphoto/elephent.jpg" alt="my elephant image " > <!-- src="url" alt="alternatetext" --> <br> <br> <h1> Image Insert with hight 200px and width 300px<h1> <center><img src="/htmlphoto/elephent.jpg" alt="elephant" width="300" height="200" > </center> <!-- align="center" not working --> <br> <h1> Image Insert with hight 400px and width = screen width <h1> <img src="/htmlphoto/elephent.jpg" alt="elephant" width="100%" height="45%" align="right" border="4"> <br> </body> </html> |
8.HTML Marquee Tag
Description: This content demonstrates the use of the marquee tag in HTML to create scrolling text and images. It includes examples of basic marquee behavior, scrolling images, and controlling the direction of the scroll (left-to-right, right-to-left, top-to-bottom). The examples also highlight how to style the scrolling content using bold text and incorporate images into the marquee.
Syllabus Coverage: HTML Marquee Tag, Scrolling Text, Scrolling Images, Direction Attribute, Basic Styling
Aim: To teach learners how to use the marquee tag to create dynamic scrolling effects for text and images on a webpage, while customizing the direction and appearance of the content.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <title>HTML marquee Tag</title> </head> <body> <marquee>This is basic example of marquee</marquee> <marquee> <img src="/htmlphoto/crocodile.jpg"></marquee> <marquee direction = "right"><b>This text will scroll from left to right</b></marquee> <marquee direction = "down"><b>This text will scroll top left to down</b></marquee> </body> </html> |
9. Link a URL in HTML
Description: This content explains how to create hyperlinks in HTML to connect to other web pages, images, or resources. It demonstrates linking to an image file, opening links in a new tab using the target attribute, and embedding an image as a clickable link to a website. Examples include linking to a local image, an external website, and using an image as a hyperlink.
Syllabus Coverage: HTML Hyperlinks, Anchor Tag, Target Attribute, Image as Link, Local and External URLs
Aim: To teach learners how to create hyperlinks in HTML, including linking to files, websites, and using images as clickable links, while understanding the use of attributes like target for controlling link behavior.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <html> <head> <title>Link a URL in HTML</title> </head> <body> <h1>How to link a URL in HTML</h1> <br> <br> <a href="/htmlphoto/crocodile.jpg" >Show image</a> <br> <a target="_blank" href="/htmlphoto/crocodile.jpg" >Show image</a> <br> <a target="_blank" href="https://www.youtube.com/" >Watch video Now </a> <br> <br> <a target="_blank" href="https://www.youtube.com/" ><img src="/htmlphoto/youtube.png"> </a> </body> </html> |
10.HTML Lists
Description: This content demonstrates the use of different types of lists in HTML, including unordered lists (ul), ordered lists (ol), nested lists, and description/definition lists (dl). It provides examples of customizing list markers (e.g., square, numbers, letters, Roman numerals) and explains how to create hierarchical lists by nesting one list inside another. Additionally, it showcases the use of description lists to define terms and their explanations.
Syllabus Coverage: HTML Lists, Unordered Lists, Ordered Lists, Nested Lists, Description Lists, List Markers, Customization
Aim: To teach learners how to create and customize various types of lists in HTML, enabling them to organize content effectively on a webpage using structured formats like bullet points, numbered lists, and term definitions.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | <html> <head> <title>HTML Lists</title> </head> <body> <h1>Using List (Unordered list-ul) </h1> <b> There are 3 types of elephants in the world.</b> <!-- ul – unordered list --> <!-- li – List item --> <ul type="square"> <li>the African elephant</li> <li> the African forest elephant</li> <li>the Asian elephant.</li> </ul> <hr> <h1>Using List (Ordered list-ol) </h1> <b> There are 3 types of elephants in the world.</b> <ol type="1"> <li>the African elephant</li> <li> the African forest elephant</li> <li>the Asian elephant.</li> </ol> <ol type="a"> <li>the African elephant</li> <li> the African forest elephant</li> <li>the Asian elephant.</li> </ol> <ol type="A"> <li>the African elephant</li> <li> the African forest elephant</li> <li>the Asian elephant.</li> </ol> <ol type="i"> <li>the African elephant</li> <li> the African forest elephant</li> <li>the Asian elephant.</li> </ol> <hr> <h1>Using List (List inside List) </h1> <ol type="I"> <li>the African elephant</li> <li> the African forest elephant</li> <li>the Asian elephant.</li> <ul type="disc"> <li>elephant type 1</li> <li> elephant type 2</li> <li>elephant type 3</li> </ul> </ol> <hr> <h1>Using List (Description/definition list) </h1> <dl> <dt>HTML</dt> <dd>is a markup language</dd> <dd>It is easy to learn and easy to use</dd> <dd>It is platform-independent.</dd> <dt>Java</dt> <dd>is a programming language and platform</dd> <dd>Object Oriented.</dd> </dl> </body> </html> |
11.HTML Table
Description: This content explains the creation and customization of tables in HTML. It demonstrates how to structure a table using rows, headers, and data cells, as well as advanced features like colspan and rowspan for merging cells. Examples include a basic table with headers and data, a table with a cell spanning multiple columns, and a table with a cell spanning multiple rows. Captions are used to provide titles for each table example.
Syllabus Coverage: HTML Tables, Table Structure (Rows, Headers, Data Cells), Colspan, Rowspan, Table Captions
Aim: To teach learners how to create and customize tables in HTML, including merging cells using colspan and rowspan, and organizing data effectively for better presentation on a webpage.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | <html> <head> <title>HTML Table </title> </head> <body> <h1>Simple Tabel(th-Table Head / tr- Table Row / td- Table Data)</h1> <table border="2"> <caption>Tebel fist sample</caption> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>1 Hemas</td> <td>2 0712000503</td> <td>3 Lanka</td> </tr> <tr> <td>4 Arpico</td> <td>5 0712000506</td> <td>6 India</td> </tr> </table> <hr> <h1>Simple Tabel with Colspan</h1> <table border="2"> <caption>Tebel Second sample</caption> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>1 Hemas</td> <td colspan="2">2 0712000503</td> </tr> <tr> <td>4 Arpico</td> <td>5 0712000506</td> <td>6 India</td> </tr> </table> <hr> <h1>Simple Tabel with Rowspan</h1> <table border="2"> <caption>Tebel Third sample</caption> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>1 Hemas</td> <td>2 0712000503</td> <td rowspan="2">3 Lanka</td> </tr> <tr> <td>4 Arpico</td> <td>5 0712000506</td>> </tr> </table> </body> </html> |