XI comm @ZISJC

Dedicated to sharing study material with Zealians

Text formatting

<!DOCTYPE html>

<html>

<head>

<title>Example of HTML5 text formatting tags</title>

</head>

<body>

<b>This text is bold</b><br><br>

<i>This text is italic</i><br><br>

<mark>This text is marked</mark><br><br>

This is <sub>subscript</sub> and <sup>superscript </sup><br><br>

<ins>This text is inserted to the document</ins><br><br>

<del>This text is deleted from the document</del><br><br>

</body>

</html>

Heading levels

<!DOCTYPE html>

<html>

<head>

<title>Heading levels</title>

</head>

<body bgcolor=skyblue>

<H1>Heading level 1 Text is largest in size</H1>

<H2>Heading level 2 </H2>

<H3>Heading level 3</H3>

<H4>Heading level 4</H4>

<H5>Heading level 5</H5>

<H6>Heading level 6 Text is smallest in size</H6>

</body>

</html>

Creating a table

<!DOCTYPE html>

<html>

<head>

<title>Table with 4 rows and 3 columns </title>

</head>

<body>

<table border="2">

<tr>

<th>Sr. No.</th>

<th>Input Device</th>

<th>Output Device</th>

</tr>

<tr>

<td>1</td>

<td>Keyboard</td>

<td>Monitor</td>

</tr>

<tr>

<td>2</td>

<td>Mouse</td>

<td>Printer</td>

</tr>

<tr>

<td>3</td>

<td>Joystick</td>

<td>Plotter</td>

</tr>

</table>

</body>

</html>

16 Dec 2022

Info about IT Act 2000

https://www.tutorialspoint.com/online_html_editor.php

Code for 03 Nov 22

<!DOCTYPE html>

<html>

<head>

<style>

table {

font-family: arial, sans-serif;

border-collapse: collapse;

width: 100%;

}

td, th {

border: 1px solid #dddddd;

text-align: left;

padding: 8px;

}

tr:nth-child(even) {

background-color: #dddddd;

}

</style>

</head>

<body>

<h2>HTML Table</h2>

<table>

<tr>

<th>Company</th>

<th>Contact</th>

<th>Country</th>

</tr>

<tr>

<td>Alfreds Futterkiste</td>

<td>Maria Anders</td>

<td>Germany</td>

</tr>

<tr>

<td>Centro comercial Moctezuma</td>

<td>Francisco Chang</td>

<td>Mexico</td>

</tr>

<tr>

<td>Ernst Handel</td>

<td>Roland Mendel</td>

<td>Austria</td>

</tr>

<tr>

<td>Island Trading</td>

<td>Helen Bennett</td>

<td>UK</td>

</tr>

<tr>

<td>Laughing Bacchus Winecellars</td>

<td>Yoshi Tannamuri</td>

<td>Canada</td>

</tr>

<tr>

<td>Magazzini Alimentari Riuniti</td>

<td>Giovanni Rovelli</td>

<td>Italy</td>

</tr>

</table>

</body>

</html>

Practice on Website Colors
Example 1: Using color name

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

</body>
</html>

Example 2:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>

</body>
</html>

Example 3:

<!DOCTYPE html>
<html>
<body>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Example 4: Apply border color

<!DOCTYPE html>

<html>

<body>

<h1 style="border: 2px solid Tomato;">Hello World</h1>

<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

<h1 style="border: 2px solid Violet;">Hello World</h1>

</body>

</html>

Example 5: Using RGB values

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>

<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>

<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>

<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>

<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>

<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>

</body>

</html>

Example 6: Gray shades using RGB values

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>

<h1 style="background-color:rgb(100, 100, 100);">rgb(100, 100, 100)</h1>

<h1 style="background-color:rgb(140, 140, 140);">rgb(140, 140, 140)</h1>

<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>

<h1 style="background-color:rgb(200, 200, 200);">rgb(200, 200, 200)</h1>

<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>

</body>

</html>

Example 7: Using HEXADECIMAL Code ( HEX Code)

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:#ff0000;">#ff0000</h1>

<h1 style="background-color:#0000ff;">#0000ff</h1>

<h1 style="background-color:#3cb371;">#3cb371</h1>

<h1 style="background-color:#ee82ee;">#ee82ee</h1>

<h1 style="background-color:#ffa500;">#ffa500</h1>

<h1 style="background-color:#6a5acd;">#6a5acd</h1>

</body>

</html>

Example 8: Gray shades using HEXADECIMAL Code ( HEX Code)

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:#404040;">#404040</h1>
<h1 style="background-color:#686868;">#686868</h1>
<h1 style="background-color:#a0a0a0;">#a0a0a0</h1>
<h1 style="background-color:#bebebe;">#bebebe</h1>
<h1 style="background-color:#dcdcdc;">#dcdcdc</h1>
<h1 style="background-color:#f8f8f8;">#f8f8f8</h1>

</body>
</html>

14 sept 2022

Example of Input Type Text in HTML FORM

<!DOCTYPE html>

<html>

<body>

<h2>Text field</h2>

<p>The <strong>input type="text"</strong> defines a one-line text input field:</p>

<form action="/action_page.php">

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname"><br>

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname"><br><br>

<input type="submit" value="Submit">

</form>

<p>Note that the form itself is not visible.</p>

<p>Also note that the default width of a text field is 20 characters.</p>

</body>

</html>

Example of Input Type Password in HTML FORM

<!DOCTYPE html>
<html>
<body>

<h2>Password field</h2>

<p>The <strong>input type="password"</strong> defines a password field:</p>

<form action="/action_page.php">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd"><br><br>
<input type="submit" value="Submit">
</form>

<p>The characters in a password field are masked (shown as asterisks or circles).</p>

</body>
</html>