Complete HTML Practical Paper
HTML Structure
001: <html>
002: <head>
003: <title> Sri Lanka </title>
004: </head>
005: <body>
006:
007: </body>
008: </html>
HTML Tags (Paragraph, Line Break, Horizontal Rule)
001: <html>
002: <head>
003: <title> Sri Lanka </title>
004: </head>
005: <body>
006: <p> HTML tags(paragraph | line break | horizontal rule) <p>
007: <p> My country is Sri Lanka. <p>
008: <br>
009: <p> My country is Sri Lanka. <p>
010: <hr>
011: <p> My country is Sri Lanka. <p>
012: </body>
013: </html>
Attribute and Values XHTML
001: <html>
002: <Head>
003: <title>Attribute and Values </title>
004: </Head>
005: <body>
006: introduction Attribute and Values
007: <br>
008: <font color="green"> Color is Green </font>
009: <br>
010: <font face = "Arial" size = "10" color="red">Font name -Arial / Size 30 /
Color-red </font>
011: <br>
012: <font color="#0000FF">Color RGB Code</font>
013: </body>
014: </html>
Multiple HTML Tags
001: <html>
002: <head>
003: <title>Multiple HTML tags</title>
004: </head>
005: <body>
006: Wild Animals
007: <h1><center><u><i>Wild Animals</i></u></center> </h1>
008: </body>
009: </html>
HTML Text Formatting
001: <html>
002: <head>
003: <title>HTML Text Formatting </title>
004: </head>
005: <body>
006: <h1><center>HTML Text Formatting Examples</center></h1>
007: Elephants are the largest existing land animals.
008: <br><br>
009: <b>Elephants are the largest existing land animals.(bold)</b>
010: <br><br>
011: <i>Elephants are the largest existing land animals.(Italic)</i>
012: <br><br>
013: <u>Elephants are the largest existing land animals.(Underline)</u>
014: <br><br>
015: <em>Elephants are the largest existing land animals.(emphasis)</em>
016: <br><br>
017: <s>Elephants are the largest existing land animals.(strike out)</s>
018: <br><br>
019: Elephants are the <sup>largest existing land animals.(superscript)</sup>
020: <br><br>
021: <sub>Elephants are the <sub>largest existing land animals.(subscript)</sub>
022: <br><br>
023: <p>Elephants are the largest a existing land animals (SET SPACE BETWEEN
WORDS) </p>
024: </body>
025: </html>
Paragraph Alignment
001: <html>
002: <title>Paragraph Align </title>
003: <body>
004: <h1>Paragraph alignment Left</h1>
005: <p align = 'left'> Elephants are the largest existing land animals...</p>
006: <h1>Paragraph alignment Right</h1>
007: <p align = 'right'> Elephants are the largest existing land animals...</p>
008: <h1>Paragraph alignment Center</h1>
009: <p align = 'center'> Elephants are the largest existing land animals...</p>
010: <h1>Paragraph alignment Justify</h1>
011: <p align = 'justify'> Elephants are the largest existing land animals...</p>
012: <h1>Paragraph alignment Justify and Some Text colour RED</h1>
013: <p align = 'justify'> Elephants are the largest existing land animals.
014: <font color="Red"> Three living species are currently recognised: the African
bush elephant,
015: the African forest elephant, and the Asian elephant. </font> ...</p>
016: </body>
017: </html>
Insert Image XHTML
001: <html>
002: <title>Insert Image</title>
003: <body>
004: <h1> Image Insert <h1>
005: <img src="/htmlphoto/elephent.jpg" alt="my elephant image " >
006: <br> <br>
007: <h1> Image Insert with hight 200px and width 300px<h1>
008: <center><img src="/htmlphoto/elephent.jpg" alt="elephant" width="300"
height="200" > </center>
009: <br>
010: <h1> Image Insert with hight 400px and width = screen width <h1>
011: <img src="/htmlphoto/elephent.jpg" alt="elephant" width="100%" height="45%"
align="right" border="4">
012: <br>
013: </body>
014: </html>
Link a URL in HTML
001: <html>
002: <head>
003: <title>Link a URL in HTML</title>
004: </head>
005: <body>
006: <h1>How to link a URL in HTML</h1>
007: <a href="/htmlphoto/crocodile.jpg" >Show image</a>
008: <br>
009: <a target="_blank" href="/htmlphoto/crocodile.jpg" >Show image</a>
010: <br>
011: <a target="_blank" href="https://www.youtube.com/" >Watch video Now </a>
012: <br><br>
013: <a target="_blank" href="https://www.youtube.com/" ><img
src="/htmlphoto/youtube.png"> </a>
014: </body>
015: </html>
HTML Lists
001: <html>
002: <head>
003: <title>HTML Lists</title>
004: </head>
005: <body>
006: <h1>Using List (Unordered list-ul) </h1>
007: <ul type="square">
008: <li>the African elephant</li>
009: <li> the African forest elephant</li>
010: <li>the Asian elephant.</li>
011: </ul>
012: <hr>
013: <h1>Using List (Ordered list-ol) </h1>
014: <ol type="1">
015: <li>the African elephant</li>
016: <li> the African forest elephant</li>
017: <li>the Asian elephant.</li>
018: </ol>
019: <ol type="a">
020: <li>the African elephant</li>
021: <li> the African forest elephant</li>
022: <li>the Asian elephant.</li>
023: </ol>
024: <ol type="A">
025: <li>the African elephant</li>
026: <li> the African forest elephant</li>
027: <li>the Asian elephant.</li>
028: </ol>
029: <ol type="i">
030: <li>the African elephant</li>
031: <li> the African forest elephant</li>
032: <li>the Asian elephant.</li>
033: </ol>
034: <hr>
035: <h1>Using List (List inside List) </h1>
036: <ol type="I">
037: <li>the African elephant</li>
038: <li> the African forest elephant</li>
039: <li>the Asian elephant.</li>
040: <ul type="disc">
041: <li>elephant type 1</li>
042: <li> elephant type 2</li>
043: <li>elephant type 3</li>
044: </ul>
045: </ol>
046: <hr>
047: <h1>Using List (Description/definition list) </h1>
048: <dl>
049: <dt>HTML</dt>
050: <dd>is a markup language</dd>
051: <dd>It is easy to learn and easy to use</dd>
052: <dd>It is platform-independent.</dd>
053: <dt>Java</dt>
054: <dd>is a programming language and platform</dd>
055: <dd>Object Oriented.</dd>
056: </dl>
057: </body>
058: </html>
HTML Table
001: <html>
002: <head>
003: <title>HTML Table </title>
004: </head>
005: <body>
006: <h1>Simple Tabel(th-Table Head / tr- Table Row / td- Table Data)</h1>
007: <table border="2">
008: <caption>Tebel fist sample</caption>
009: <tr>
010: <th>Company</th>
011: <th>Contact</th>
012: <th>Country</th>
013: </tr>
014: <tr>
015: <td>1 Hemas</td>
016: <td>2 0712000503</td>
017: <td>3 Lanka</td>
018: </tr>
019: <tr>
020: <td>4 Arpico</td>
021: <td>5 0712000506</td>
022: <td>6 India</td>
023: </tr>
024: </table>
025: <hr>
026: <h1>Simple Tabel with Colspan</h1>
027: <table border="2">
028: <caption>Tebel Second sample</caption>
029: <tr>
030: <th>Company</th>
031: <th>Contact</th>
032: <th>Country</th>
033: </tr>
034: <tr>
035: <td>1 Hemas</td>
036: <td colspan="2">2 0712000503</td>
037: </tr>
038: <tr>
039: <td>4 Arpico</td>
040: <td>5 0712000506</td>
041: <td>6 India</td>
042: </tr>
043: </table>
044: <hr>
045: <h1>Simple Tabel with Rowspan</h1>
046: <table border="2">
047: <caption>Tebel Third sample</caption>
048: <tr>
049: <th>Company</th>
050: <th>Contact</th>
051: <th>Country</th>
052: </tr>
053: <tr>
054: <td>1 Hemas</td>
055: <td>2 0712000503</td>
056: <td rowspan="2">3 Lanka</td>
057: </tr>
058: <tr>
059: <td>4 Arpico</td>
060: <td>5 0712000506</td>>
061: </tr>
062: </table>
063: </body>
064: </html>
