Introduction to HTML Exercises for OL ICT Students
Hello and welcome to the HTML Practicals for Sri Lanka OL ICT! In this course, we will be delving into the exciting world of web development through hands-on HTML exercises. HTML, or HyperText Markup Language, is the foundation of the web. It’s the language used to structure and present content on websites.Throughout this practical course, you’ll learn the fundamentals of HTML and gain the skills needed to create your own web pages. Whether you’re interested in pursuing a career in web development or simply want to understand the mechanics behind the websites you visit every day, this course will provide you with a solid foundation.Course Objectives:- Hands-On Learning: This course is designed to be practical. You won’t just be reading about HTML concepts – you’ll be actively coding and creating web pages.
- No Prior Experience Required: You don’t need any prior programming or coding experience to excel in this course. We’ll start with the basics and gradually build up your skills.
- Interactive Exercises: Each lesson will include interactive exercises that challenge you to apply what you’ve learned. These exercises will help reinforce your understanding of HTML.
- Real-World Applications: You’ll discover how HTML is used in the real world to build websites, design layouts, and structure content.
- Creativity and Expression: HTML allows you to bring your ideas to life on the web. You’ll have the freedom to create web pages that reflect your unique interests and style.
- Support and Resources: If you encounter challenges or have questions, don’t worry. We’re here to help. You’ll have access to resources and support to ensure your success in this course.
- The essential structure of HTML documents.
- How to create headings, paragraphs, lists, and links.
- Adding images and multimedia to your web pages.
- Structuring content with tables and forms.
- Creating basic layouts with HTML and CSS.
1 2 3 4 5 6 7 8 9 10 11 | <html> <head> <title> Sri Lanka </title> </head> <body> </body> </html> |
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> My country is Sri Lanka. <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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <html> <Head> <title>Font Tag Example (Attribute and Values) </title> </Head> <body> Wild Animals <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> |
1 2 3 4 5 6 7 8 9 10 | <html> <head> <title>Multiple HTML tags</title> </head> <body> Wild Animals <center><u><i>Wild Animals</i></u></center> </body> </html> |
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> |
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> |
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> |
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> |
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> |
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> |
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> |