Creating a simple HTML for taking Notes
*** BODY OF AN HTML ***
<!DOCTYPE html>
<html>
<body>
</body>
</html>
*** COLOR ***
<h1 style="color: red">Title</h1>
*** FONT SIZE CHANGE ***
<center>
<h2>
<p style="font-family:bahnschrift">
<u><a href="F:\1.Home\PHY"> Details</a></u>
</h2>
</p>
</center>
*** ALIGN TO CENTRE ***
<p style="text-align:center">Center this text!</p>
or
<center> <\center>
*** FONT CHANGE WITH HEADING 2 ***
<center></u><h2><p style="font-family:bahnschrift">Name </h2></u></p></center><br>
*** *** UNDERLINE WITH COLOR ***
<u style="color: red">Question ? </u><br>
*** ADD AN IMAGE or webpage ***
<img src="Image_Name.jpg" alt="Image_Name">
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
<embed type="image/jpg" src="pic_trulli.jpg" width="300" height="200">
.......................................................................................
<iframe src="URL" height="200" width="300"></iframe>
<embed type="text/html" src="snippet.html" width="500" height="200">
<!DOCTYPE html>
<html>
<body>
<h1>The iframe element + CSS</h1>
<p>An iframe with default borders:</p>
<iframe src="/default.asp" width="100%" height="300">
</iframe>
<p>An iframe with a thin black border:</p>
<iframe src="/default.asp" width="100%" height="300" style="border:1px solid black;">
</iframe>
<p>An iframe with no borders:</p>
<iframe src="/default.asp" width="100%" height="300" style="border:none;">
</iframe>
</body>
</html>
.......................................................................................
*** NEXTLINE ***
<br>
.......................................................................................
*** UNDERLINE ***
<hr>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>PDF Example with iframe</h1>
<iframe src=" " width="100%" height="500px">
</iframe>
</body>
</html>
*** TO CREATE A TABULAR COLUMN IN HTML. ***
<style>
table {
font-family: bahnschrift;
border-collapse: collapse;
width: 50%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Samsung</td>
<td>Employee 1</td>
<td>Germany</td>
</tr>
<tr>
<td>Intel</td>
<td>Employee 1</td>
<td>Sweden</td>
</tr>
</table>
*** TO CREATE A BOX IN HTML ***
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: white;
width: 200px;
border: 1px solid black;
padding: 50px;
margin: 10px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element.
It consists of: borders, padding, margins, and the actual content.</p>
<div>This text is the content of the box. We have added a 50px padding,
20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
*** CREATING A BULLET LIST ***
<!DOCTYPE html>
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
....................................................
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
....................................................
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
Easy list
<ul> </ul>
....................................................
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
margin: 35px;
}
</style>
</head>
<body>
<h1>The margin Property</h1>
<p>A paragraph with no specified margins.</p>
<p class="ex1">This paragraph has a margin of 35 pixels on all four sides. <br>
A paragraph with no specified margins.</p>
</body>
</html>
....................................................
ADDING A LINK IN HTML
<a href=" "> </a><br><br>
...............................................................
FONT COLOR CHANGE
<p style="color:red">This is a paragraph.</p>
<p style="color:blue">This is another paragraph.</p>
...............................................................
FONT STYLE
<p style="font-family:bahnschrift"> </p>
CREATING A SIMPLE HTML
<!DOCTYPE html>
<html>
<body>
<head>
<style>
table {
font-family: bahnschrift;
border-collapse: collapse;
width: 70%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
table {
font-family: bahnschrift;
border-collapse: collapse;
width: 50%;
}
</style>
</head>
<h3><u>Reading X</u></h3>
<h2><u><center>Test Html </center></u></h2><br>
Contents...<br><br>
<img src="Desktop\yogi_ramsurathkumar.jpg "><br><br> // Image
<a href="http://www.byrbmhsr.in/Dr.NNCE/30329_424714456577_2481651_n.jpg">Yogi Ramsurathkumar </a><br><br> // Html link
<A HREF="http://www.example.com/myfile.pdf#page=4">
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Apple</td>
<td>Employee 1</td>
<td>Germany</td>
</tr>
<tr>
<td>Intel</td>
<td>Employee 1</td>
<td>Sweden</td>
</tr>
</table>
<hr><br>
<b><h3>Questions </h3></b>
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<hr><br>
<b><h3>References </h3></b>
<hr><br><br>
</body>
</html>
.............................................................................................................................
Greek Alphabets for HtmlChar Name Code (Deci) Description
Α Α 913 Alpha
Β Β 914 Beta
Γ Γ 915 Gamma
Δ Δ 916 Delta
Ε Ε 917 Epsilon
Ζ Ζ 918 Zeta
Η Η 919 Eta
Θ Θ 920 Theta
Ι Ι 921 Iota
Κ Κ 922 Kappa
Λ Λ 923 Lambda
Μ Μ 924 Mu
Ν Ν 925 Nu
Ξ Ξ 926 Xi
Ο Ο 927 Omicron
Π Π 928 Pi
Ρ Ρ 929 Rho
Σ Σ 931 Sigma
Τ Τ 932 Tau
Υ Υ 933 Upsilon
Φ Φ 934 Phi
Χ Χ 935 Chi
Ψ Ψ 936 Psi
Ω Ω 937 Omega
α α 945 alpha
β β 946 beta
γ γ 947 gamma
δ δ 948 delta
ε ε 949 epsilon
ζ ζ 950 zeta
η η 951 eta
θ θ 952 theta
ι ι 953 iota
κ κ 954 kappa
λ λ 955 lambda
μ μ 956 mu
ν ν 957 nu
ξ ξ 958 xi
ο ο 959 omicron
π π 960 pi
ρ ρ 961 rho
ς ς 962 sigmaf
σ σ 963 sigma
τ τ 964 tau
υ υ 965 upsilon
φ φ 966 phi
χ χ 967 chi
ψ ψ 968 psi
ω ω 969 omega
ϑ ϑ 977 Theta symbol
ϒ ϒ 978 Upsilon symbol
ϖ ϖ 982 Pi symbol
