Posts

Showing posts from March, 2019

Day4-Exercise7(To demonstrate margin,padding,overflow and background-color)

<!To demonstrate margin,padding,overflow and background-color> <html> <head> <style> ul { list-style-type:none; margin:0; padding:0; overflow:hidden; background-color:#333333; } li {   float:left; } li a { display :block; color:white; text-align:center; padding:16px; text-decoration:none; } li a:hover { background-color:#111111; } </style> </head> <body> <ul> <li><a href="#home">home</a></li> <li><a href="#news">news</a></li> <li><a href="#contact">contact</a></li> <li><a href="#about">about</a></li> </ul> </body> </html>

Day4-Exercise6(To Demonstrate Ordered list from the starting number)

<!To  Demonstrate Ordered list from the starting number> <html> <body> <h2>ordered list</h2> <ol start=50> <li>ethiopia</li> <li>eritrea</li> <li>sudan</li> <ol> <ol type="I" start="50"> <li>ethiopia</li> <li>eritrea</li> <li>sudan</li> </ol> </body> </html>

Day4-Exercise5(To Demonstrate UnOrdered list )

<!To  Demonstrate UnOrdered list > <html> <body> <h2>ordered list</h2> <ul>    <li>south africa</li>  <li>North  <ul>    <li>ethiopia</li>    <li>eritrea </li>  </ul> <li>tanzania</li> </ul> </body> </html>

Day4-Exercise4(To Demonstrate Ordered list dl and dt)

<!To  Demonstrate Ordered list dl and dt> <html> <body> <h2>ordered list</h2> <dl>    <dt>south africa</dt>    <dd>ethiopia</dd>    <dt>eritrea </dt>    <dd>tanzania</dd> </dl> </body> </html>

Day4-Exercise3(To Demonstrate Ordered list Using Roman)

<!To  Demonstrate Ordered list Using  Roman> <html> <body> <h2>ordered list</h2> <ol type="i">    <li>south africa</li>    <li>ethiopia</li>    <li>eritrea </li>    <li>tanzania</li> </ol> </body> </html>

Day4-Exercise2(To Demonstrate Ordered list Using small-alphabets)

<!To Demonstrate Ordered list Using   small-alphabets> <html> <body> <h2>ordered list</h2> <ol type="a">    <li>south africa</li>    <li>ethiopia</li>    <li>eritrea </li>    <li>tanzania</li> </ol> </body> </html>

Day4-Exercise1(To Demonstrate Ordered list Using alphabets)

<!To Demonstrate Ordered list Using   alphabets> <html> <body> <h2>ordered list</h2> <ol type="A">    <li>south africa</li>    <li>ethiopia</li>    <li>eritrea </li>    <li>tanzania</li> </ol> </body> </html>

Day3-Exercise9(To demonstrate ordered List using numbers)

<!To demonstrate ordered List using numbers> <html> <body> <h2>ordered list</h2> <ol type="1">    <li>south africa</li>    <li>ethiopia</li>    <li>eritrea </li>    <li>tanzania</li> </ol> </body> </html>

Day3-Exercise8(To demonstrate Ordered-List)

<!To demonstrate Ordered-List> <html> <body> <h2>ordered list</h2> <ol>    <li>south africa</li>    <li>ethiopia</li>    <li>eritrea </li>    <li>tanzania</li> </ol> </body> </html>

Day3-exercise7(To demonstrate Unordered-list(None))

<!To demonstrate Unordered-list(None)> <html> <body> <h2>unordered list</h2> <ul style="list-style-type:none;">    <li>south africa</li>    <li>ethiopia</li>    <li>eritrea </li>    <li>tanzania</li> <ul> </body> </html>

Day3-Exercise6(To demonstrate Unordered-list(Square)

To demonstrate Unordered-list(Square) <html> <body> <h2>unordered list</h2> <ul style="list-style-type:square;">    <li>south africa</li>    <li>ethiopia</li>    <li>eritrea </li>    <li>tanzania</li> <ul> </body> </html>

Day3-exercise5(To demonstrate Unordered-list(disc))

<!To demonstrate Unordered-list(disc)> <html> <body> <h2>unordered list</h2> <ul style="list-style-type:disc;">    <li>south africa</li>    <li>ethiopia</li>    <li>eritrea </li>    <li>tanzania</li> <ul> </body> </html>

Day3-exercise-4(To Demonstrate Un-ordered List)

<!To Demonstrate Unordered List> <html> <body> <h2>unordered list</h2> <ul>    <li>south africa</li>    <li>ethiopia</li>    <li>eritrea </li>    <li>tanzania</li> <ul> </body> </html>

Day3-Exercise3(Table properties)

<!Table properties> <html> <head> <style> table,th,td  {    border:1px solid black;    border-collapse:collapse;  } th,td { padding :15px; } th { text-align:center; } </style> </head> <bod> <table style="width:50%"> <tr>  <th>First name</th>  <th rowspan="2">last name </th>   </tr> <tr>  <td>siva</td>  <td>raman</td>   </tr> <tr>  <td>perumal</td>  <td>siva</td>  <td>73</td> </tr> </body> </table>

Day3-Exercise2(Table properties)

<!Table properties> <html> <head> <style> table,th,td  {    border:1px solid black;    border-collapse:collapse;  } th,td { padding :15px; } th { text-align:center; } </style> </head> <bod> <table style="width:50%"> <tr>  <th>First name</th>  <th rowspan="2">last name </th> </tr> <tr>  <td>siva</td>  <td>raman</td> </tr> <tr>  <td>perumal</td>  <td>siva</td>  <td>73</td> </tr> </body> </table>

Day3-Exercise1(Table properties)

<!Table properties> <html> <head> <style> table,th,td  {    border:1px solid black;    border-collapse:collapse;  } table { border-spacing:1115px; } th,td { padding :15px; } th { text-align:center; } </style> </head> <bod> <table style="width:50%"> <tr>  <th>First name</th>  <th>last name </th>  <th>Age</th> </tr> <tr>  <td>siva</td>  <td>raman</td>  <td>41</td> </tr> <tr>  <td>perumal</td>  <td>siva</td>  <td>73</td> </tr> </body> </table> a

Day2-Exercise-9(To represent Table-2 Properties)

<!To represent Table-2 Properties> <html> <head> <style> table th,td  {    border:1px solid black;    border-collapse:collapse;  } th,td { padding :15px; } th { text-align:center; } </style> </head> <bod> <table style="width:50%"> <tr>  <th>First name</th>  <th>last name </th>  <th>Age</th> </tr> <tr>  <td>siva</td>  <td>raman</td>  <td>41</td> </tr> <tr>  <td>perumal</td>  <td>siva</td>  <td>73</td> </tr> </body> </table>

Day2-Exercise-8(To represent Table Properties)

<!To represent Table Properties> <html> <head> <style> table,th,td  {    border:1px solid black;    border-collapse:collapse;  } </style> </head> <body> <table style="width:50%"> <tr>  <th>First name</th>  <th>last name </th>  <th>Age</th> </tr> <tr>  <td>siva</td>  <td>raman</td>  <td>41</td> </tr> <tr>  <td>perumal</td>  <td>siva</td>  <td>73</td> </tr> </body> </table>

Day2-Exercise-7(To Represent Tables)

<!To Represent Tables> <html> <head> table </head> <bod> <table style="width:50%"> <tr>  <th>First name</th>  <th>last name </th>  <th>Age</th> </tr> <tr>  <td>siva</td>  <td>raman</td>  <td>41</td> </tr> <tr>  <td>perumal</td>  <td>siva</td>  <td>73</td> </tr> </body> </table>

Day2-exercise-6(To represent style-sheets using class0

<!To represent stylesheets using class> <html> <head> <style> p.error {  color:blue; } </style> </head> <body> <h1>Heading</h1> <p class="error">paragraph</p> <p>paragraph</p> <p>paragraph</p> <p class="error">paragraph</p> </body> </html>

Day2-Exercise-5(To represent style-sheets using id)

<!To represent stylesheets using id> <html> <head> <style> #p01 {  color:blue; } </style> </head> <body> <h1>Heading</h1> <p>paragraph</p> <p>paragraph</p> <p id="p01">paragraph</p> </body> </html>

Day2-Exercise4(To Demonstrate Style-sheets)

<! To Demonstrate Stylesheets> <html> <head> <style> p {  border:1px solid powderblue; padding:30px; } </style> </head> body  <h1>Heading</h1> <p>paragraph</p> <p>paragraph</p> <p>paragraph</p> </body> </html>

Day2-Exercise-3(To Demonstrate style-sheet)

<!To Demonstrate style-sheet> <html> <head> <style> body {background-color:powderblue;} h1  {color:blue;} p {color:red;} </style> </head> <h1>This is a Heading</h1> <p>this is a Paragraph</p> </body> </html>

Day-2-Exercise-2(To Demonstrate various colors and border-sizes)

<!To Demonstrate various colors and border-sizes> <html> <body> <!--This is a comment----> <bdo dir="rtl">this line will written from left to right</bdo> <h1 style="background-color:dodgerblue">DodgerBlue</h> <p style="background-color:tomato">Tomato</p> <p style="background-color:mediumseagreen">mediumseagreen</p> <h1 style="border:2px solid tomato">Tomato</h1> <h1 style="border:2px solid violet">violet</h1> <h1 style="border:2px solid dodgerblue">dodgerblue</h1> <!--Comments are not displayed in the browser--> </body> </html>

Day-2-Exercise-1(To Demonstrate Comments)

<html> <body> <!--This is a comment----> <bdo dir="rtl">this line will written from left to right</bdo> <!--Comments are not displayed in the browser--> </body> </html>

Day1-Exercise-9(To write line will written from left to right)

<!To write  line will written from left to right> <html> <body> <bdo dir="rtl">this line will written from left to right</bdo> </body> </html>

Day1-Exercise-8(To demonstrate Blockquotes and abbreviation and address tag)

<! To demonstrate Blockquotes and abbreviation and address tag > <html> <body style=background-color:powderblue> <p style=color:red ><b>welcome to first paragraph<b></p> <blockquote> this indicates blockquote </blockquote> <p><abbr title="world health organization">who</abbr>was founded in 1948</p> <address> 9/2296,MutalammanNagar<br> deviakapuram<br> 606902,<br> </address> <body> </html>

Day1-Exercise-7(To demostrate subscript,superscript,emphasize,small,mark and del,ins)

<!To demostrate subscript,superscript,emphasize,small,mark and del,ins> <html> <body style=background-color:powderblue> <p style=color:red ><b>welcome to first paragraph<b></p> <p style=color:blue><i>welcome to second paragraph<i></p> <p style=color:green><sub>welcome </sub></p> <p style=font-size:50px><sup>Fontsize 50</sup></p> <p style=font-size:100px>fontsize 100</p> <p style=font-size:120px>fontsize 120</p> <p><sub>subscript</sub><sup>superscript</sup> <p><em>emphasized</em></P> <h2>html<small>small</small>Formatting</h2> <h2>html<mark>marked</mark>Formatting</h2> <p>My favorite color is <del>blue</del> <p>my favorite <ins>color</ins>is red</p> </body> </html>

Day1-Exercise-6(To Demonstrate Various colors and Pixel-Sizes)

<!To Demonstrate Various colors and pixelSizes> <html> <body> <p style=color:red >welcome to first paragraph</p> <p style=color:blue>welcome to second paragraph</p> <p style=color:green>welcome </p> <p style=font-size:50px>Fontsize 50</p> <p style=font-size:100px>Fontsize 100</p> <p style=font-size:120px>Fontsize 120</p> </body> </html>

Day1-Exercise-5(To demonstrate various colors in HTML)

<!To demonstrate various colors in HTML> <html> <body> <p style=color:red >welcome to first paragraph</p> <p style=color:blue>welcome to second paragraph</p> <p style=color:green>welcome to third paragraph</p> <p style=color:tomato>welcome to fourth paragraph</p> </body> </html>

Day1-Exercise-4(To Demonstrate various Heading sizes in HTML)

<! To Demonstrate various Heading sizes in HTML> <html> <body> <h1 style=color:red>heading1</h1> <h2 style=color:violet>heading2</h2> <h3 style=color:blue>heading3</h3> <h4 style=color:green>heading4</h4> <h5 style=color:orange>heading5</h5> <h6 style=color:tomato>heading6</h6> <body> </html>

Day1-Exercise-3 (To demonstrate Tool-Tip)

<!To demonstrate ToolTip> <html> <body> <h2 title="i am header"> Title Header</h2> <p title="tooltip">welcome to HTML</p> </body> </html>

Day1-Exercise- 2 Including title in the Script

<!Including Title in the script> <html> <head> <title>page title</title> </head> <body> Body of the paragraph </body> </html

Day1-Exercise1(Including Header and Paragraph)

<html> <body> <h1> first Heading </h1> <p>paragraph</p> </body> </html>

HTML

<!First Html Program> <html> <body> welcome to HTML Learning </body> </html>