HTML
short note
Try and Learn
HTML – Hyper Text Markup Language
- How to save HTML file.
filename.html
- How to Write a comment
<!
- - your comment - - >
Print Hello world
<html>
<head>
<title>My
first web page</title>
</head>
<body>
<h1>Hello
world</h1>
<!- - h1 is a font size - ->
</body>
</html>
Basic tags
<html>
<head>
<title>
My First Web Page
</title>
</head>
<body bgcolor="#0099FF"
text="black">
<HR></HR>
<h4 align="center">MY
FIRST WEB PAGE</h4>
<HR></HR>
<br>
<h2>My 1<sup>st</sup>
para </h2>
<p>The <b>HTML</b>
comment tag is used to insert comments inside the document's
<i>code</i>.These comments are not rendered by browsers,and
therefore aren't visible dor the <u>end user</u>.The main purpose
of this <small>feature</small> is to let the authors
add</p><p>explanations,reminders and other <big>
RESOURCES</big> to help themselves and others in the process of editing
the document.<mark>It's also commonly used to exclude some parts of the document
from the rendering process during testing.</mark></p>
<hr>
<h2>My 2<sup>nd</sup>
para </h2>
<p><b>Water
</b>(Chemical formuar:H<sub>2</sub>O) is a transparent fluid
which forms <i>the world's streams .lakes, oceans and rain, and is the
major constituent of the fluids of organisms.</i></p>
<hr>
<pre>
SAMPLE #2:HALF BLOCK STYLE</pre>
<pre>
178
Green Street
Waterbury,CT
06708
(203)
555-5555
</pre>
<pre>
August 6th,1999<br>
Pat Cummings
Human Resources Director
Any Bank
1140 Main Street
Chicago,IL 60605<br>
Dear Mr. Cummings:
<center>
Having
majored
in
mathematics at Rice
University,where
I also worked as a research
Assisstant,I
am confident that I would make
a
successful addition
to
your Economics
Research
</center>
</pre>
</body>
</html>
List in HTML
Unordered
List
|
Orded
List
|
Definition/Description
List
|
<ul>
<li>…..</li>
<li>…..</li>
</ul>
Style
<ul
type=” ”>
“Disc”
“Circle”
“Square”
“None”
|
<ol>
<li>…..</li>
<li>…..</li>
</ol>
Style
<ol
type=” ”>
“1”
“A”
“a”
“i”
|
<dl>
<dt>Coffee</dt>
<dt>-black
hot drink</dt>
<dt>Milk</dt>
<dt>-white
cold drink</dt>
</dl>
Coffee
- black
hot drink
Milk
-white cold drink
|
Nested List
<ul>
<li>coffee</li>
<li>Tea
<ul>
<li>black tea</li>
<li>green tea</li>
</ul>
</li>
<li>milk </li>
</ul>
Example
Code
<html>
<head>
</head>
<body>
<h2>MILKMAID Chocolate Biscuit Pudding</h2>
<!-- unordered list of all the ingredients needed to make the dish -->
<ul>
<li>MILKMAID 390g</li>
<li>Butter</li>
<li>Cocoa powder</li>
<li>Coffee powder</li>
<li>Milk</li>
<li>Biscuits</li>
</ul>
<!-- ordered list, detailing the steps you need to take to prepare that dish -->
<ol>
<li>Warm the milk, add the coffee powder and stir. Dip the biscuits, one at a time in this liquid and arrange at the bottom of a shallow glass serving dish or in individual glasses</li>
<li>Combine MILKMAID, butter and cocoa powder together to make chocolate butter paste.</li>
<li>Spread the chocolate butter paste over the biscuit layer and repeat, covering the layer with more biscuits in a similar manner till all the biscuits are used up. Spread this paste over the top biscuit layer. Decorate with cashew and chill in the refrigerator</li>
</ol>
</body>
</html>
Output
MILKMAID Chocolate Biscuit Pudding
- MILKMAID 390g
- Butter
- Cocoa powder
- Coffee powder
- Milk
- Biscuits
- Warm the milk, add the coffee powder and stir. Dip the biscuits, one at a time in this liquid and arrange at the bottom of a shallow glass serving dish or in individual glasses
- Combine MILKMAID, butter and cocoa powder together to make chocolate butter paste.
- Spread the chocolate butter paste over the biscuit layer and repeat, covering the layer with more biscuits in a similar manner till all the biscuits are used up. Spread this paste over the top biscuit layer. Decorate with cashew and chill in the refrigerator
Table
The General Table Syntax
<table>
<tr>
<td>1st sell</td>
<td>1st sell</td>
</tr>
</table>
Table Header
<table>
<tr>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<td>1st sell</td>
<td>2st sell</td>
</tr>
</table>
Cell
spacing and padding
Cellspacing
Define the empty space between cells
Cellpadding
Define the empty space around the cell
content.
<table border= “2” cellpadding= “15”
cellspacing= “15”>
</table>
Table width & height
<table border=”2” bordercolor=”red”
width=”600” height=”500”>
</table>
Align
Align = “left”
Align = “center”
Align = “right”
Valign
Valign = “top”
Valign = “middle”
Valign = “bottom”
<table>
<tr>
<td align= ”center” valign= ”top”>1st
sell</td>
………..
……….
</tr>
</table>
Table bgcolor
<td bgcolor= “red”></td>
Rowspan (Merge rows)
<html>
<head>
<title>rowspan1</title>
</head>
<body>
<table border="2">
<tr>
<!--<td
rowspan="3">1: This is cell spans three rows</td>-->
<td>1</td>
<td
rowspan="3">2: This is cell spans three rows</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
</body>
</html>
Colspan
<html>
<head>
<title>colspan2</title>
</head>
<body>
<table border="1"
cellpadding="5">
<tr>
<td
colspan="2" align="center">a </td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td
align="center">Table cell 1</td>
<td
align="center">Table cell 2</td>
<td
align="center">Table cell 3</td>
</tr>
</table>
<ahref="www.google.lk">google</a>
</body>
</html>
Table into table
<tr>
<td>contact</td>
<td>
<table
bgcolor= “yellow”>
<tr><td>hello</td></tr>
</table></td>
</tr>
Image
Image tag
<img src = “image1.jpg”>
Image in image folder
<img src = “image\image1.jpg”>
Size, Alt & Title Attributes
<img src= “image1.jpg” width= “200”
height = “150” alt= “photo of you” title= “you”>
Alignment & Spacing
<img src= “image1.jpg” align=
“right”>
<center><imgsrc= “image.jpg”
></center>
<img src= “image1.jpg” vspace= ”25” hspace= “ 50” >
Border & BI
Border size
<img src= “image_name.jpg” border= “2”>
Background image
<body background=
“image_name.jpg”>
<img src= “image_name.jpg” vspace= “25”hspace= “50” >
Links
<a href= “url”> text to be
display</a>
- Hypertext reference can be intenal, local or global
Internal
:- Links to anchors on the current page
<a
href= “myfirst.html”>text to be display</a>
Local
:- Links to other pages within domain
<a
href= “image_name.jpg”>My image</a>
Global
<a
href= “http://www.sab.ac.lk/”>SUSL</a>
- Open new page in a new browser window
Target = “_blank”
- Load new page into a frame that is superior to where the links lies
Target = “_parent”
Any ID, but same
<p ID= “Top”>Html Link and
anchors</p>
<a href= “#top”> go to the
top</a>
<a name= “Top”>Html Link</a>
<a href= “#top”><imgsrc=
“image_name.jpg”></a>
Email link
<a href=
“mailto:malith93@gmail.com?subject=hello again”>send mail</a>
The title attribute
<a href= “phoo.html” title = “A short
about winne the pooh””>Pooh</a>
Link, Alink, Vlink
<body link= “blue” vlink= “yellow” alink= “green” bgcolor=
“black”>
Marquee
<marquee direction =
“right”><font face= “Sand”> Computing & Information Systems
</font></marquee>
<marquee behavior =
“alternate”><font face= “Sand”>Sabaragamuwa Universityof Sri
Lanka</font></marquee>
<marquee direction =
“left”><font face= “Sand”>I’m Hansani Ruwan
Kumari</font></marquee>
Form
<form>
First
name:<input type="text" name="first" size=100
maxlength="20"><br>
Last
Name:<input type="text" value="last name"
name="last" size=30><br>
Password:<input
type="password" name="real name" size=10><br>
Gender:<input
type="radio" size=5 value="M">Male <input
type="radio" size=5 value="F">Female<br>
<input
type="checkbox" name"orange"
value="orange">Orange
<input
type="checkbox" name"apple"
value="apple">apple
<input
type="checkbox" name"orange" value="orange">A
<input
type="checkbox" name"orange"
value="orange">B<br><br>
university
<select
name="university">
<option
value="23">Sabaragamuwa</option>
<option
value="24">Colombo</option>
<option
value="45">Moratuwa</option>
<option
value="56">Kelaniya</option>
</select>
<br>
<select
name="university" size="8">
<option
value="23">Sabaragamuwa</option>
<option
value="24">Colombo</option>
<option
value="45">Moratuwa</option>
<option
value="56">Kelagrniya</option>
<option
value="23">Sabaragamuwa</option>
<option
value="24">Colombo</option>
<option
value="45">Morgvtyatuwa</option>
<option
value="56">Kelaniya</option>
<option
value="23">Sabaghrragamuwa</option>
<option
value="24">Cologmbo</option>
<option
value="45">Moratuwa</option>
<option
value="56">Kelaniya</option>
</select><br><br>
file to upload: <input type="file" name="upfile"><br>
name:<input
type="text"><br>
Email:<input
type="email"><p>
<input
type="submit" value="send it"><br>
<input
type="reset">
</form>
Sample code using basic html tags
<html>
<head>
<title>❤ Favourite Story</title>
</head>
<body bgcolor="FAE8AC">
<header>
<h1>
Harry Potter
</h1>
</header>
<div>
<table>
<tr>
<td colspan="2" bgcolor="black">
<img src="https://shopwhopper.com/wp-content/uploads/2017/11/New-style-Harry-Potter-Poster-Custom-Canvas-Poster-Art-Home-Decoration-Cloth-Fabric-Wall-Poster-Print-37.jpg_640x640-37.jpg" width="720" height="400">
<img src="https://www.nowplayingnashville.com/wp-content/uploads/sites/www.nowplayingnashville.com/images/2017/05/hp-goblet-of-fire.jpg" width="720" height="400">
</td>
</tr>
<tr>
<td colspan=2>
<br>
<p align="center"><font size="10" color="red">❤ </font> <font size="10" color=""><b> Harry Potter Series 🙂</b></font></p>
<br>
</td>
</tr>
<tr>
<td>
<a href="https://www.nypl.org/sites/default/files/hp-posters.jpg"><img src="https://www.nypl.org/sites/default/files/hp-posters.jpg" width="700" height="450"></a>
</td>
<td align="center">
<font size="5">The Harry Potter books are very successful upon their being published. The Harry Potter books describe us as muggles, non magical people who live our lives not knowing the existence of wizards. The books allow us to envision a magical world that we are unable to see. Wizards are usually tolerant and good toward muggles. The book thins the line between real life and fantasy. People love an unlikely hero who isn’t supposed to succeed and one who is an underdog in life. The book thins the line between real life and fantasy. People love an unlikely hero who isn’t supposed to succeed and one who is an underdog in life. Harry Potter with a scar on his forehead, usually broken glasses, his small skinny frame and lateness about learning the wizard world, is that underdog hero that everyone covets to see. He succeeds in his endeavors because he is enthusiastic, he has a significant amount of courage, and the best friends anyone person could hope to have. He is one of the most courageous characters you will ever read about in a fantasy novel.</font>
</td>
</tr>
<tr>
<td align="left">
<font size="5">Harry Potter is a British-American film series based on the eponymous novels by author J. K. Rowling. The series is distributed by Warner Bros. and consists of eight fantasy films, beginning with Harry Potter and the Philosopher's Stone (2001) and culminating with Harry Potter and the Deathly Hallows – Part 2 (2011).[2][3] A spin-off prequel series will consist of five films started with Fantastic Beasts and Where to Find Them (2016), marking the beginning of the Wizarding World shared media franchise.Harry Potter and the Deathly Hallows, the seventh and final novel in the series, was adapted into two feature-length parts.[7] Part 1 was released in November 2010, and Part 2 was released in July 2011. Philosopher's Stone and Deathly Hallows – Part 2 are among the 50 highest-grossing films of all time, with the latter ranking as the thirteenth highest-grossing film, having grossed over $1 billion. Without inflation adjustment, it is the third highest-grossing film series with $7.7 billion in worldwide receipts.</font>
</td>
<td>
<a href="ttps://www.telegraph.co.uk/content/dam/films/2016/12/15/HP-order-poster_trans_NvBQzQNjv4Bqy81pHNlW26k7kWS-Prb1ChEK8Fa40f5gNfKPTlIw53c.jpg?imwidth=450"><img src="https://www.telegraph.co.uk/content/dam/films/2016/12/15/HP-order-poster_trans_NvBQzQNjv4Bqy81pHNlW26k7kWS-Prb1ChEK8Fa40f5gNfKPTlIw53c.jpg?imwidth=450" width="600" height="450"></a>
</td>
</tr>
</table>
</div>
<br><br>
<div>
<iframe width="420" height="315"
src="https://www.youtube.com/watch?v=VyHV0BRtdxo">
</iframe>
<ul>
<li>
<font size="5">In late 1997, film producer David Heyman's London offices received a copy of the first book in what would become Rowling's series of seven Harry Potter novels. The book, Harry Potter and the Philosopher's Stone, was relegated to a low-priority bookshelf, where it was discovered by a secretary who read it and gave it to Heyman with a positive review. Consequently, Heyman, who had originally disliked "the rubbish title", read the book himself. Highly impressed by Rowling's work, he began the process that led to one of the most successful cinematic franchises of all time.[10]</font></li>
<li><font size="5">
Heyman's enthusiasm led to Rowling's 1999 sale of the film rights for the first four Harry Potter books to Warner Bros. for a reported £1 million (US$2,000,000).[11] A demand Rowling made was that the principal cast be kept strictly British, allowing nevertheless for the inclusion of many Irish actors, such as Richard Harris as Dumbledore, and for casting of French and Eastern European actors in Harry Potter and the Goblet of Fire where characters from the book are specified as such.[12] Rowling was hesitant to sell the rights because she "didn't want to give them control over the rest of the story" by selling the rights to the characters, which would have enabled Warner Bros. to make non-author-written sequels.[13]</font></li>
<li><font size="5">
Although Steven Spielberg initially negotiated to direct the first film, he declined the offer.[14] Spielberg contended that, in his opinion, there was every expectation of profit in making the film. He claims that making money would have been like "shooting ducks in a barrel. It's just a slam dunk. It's just like withdrawing a billion dollars and putting it into your personal bank accounts. There's no challenge".[15] In the "Rubbish Bin" section of her website, Rowling maintains that she had no role in choosing directors for the films, writing "Anyone who thinks I could (or would) have 'veto-ed' him [Spielberg] needs their Quick-Quotes Quill serviced."[16]</font></li>
<li><font size="5">
After Spielberg left, conversations began with other directors, including Chris Columbus, Jonathan Demme, Terry Gilliam, Mike Newell, Alan Parker, Wolfgang Petersen, Rob Reiner, Tim Robbins, Brad Silberling, and Peter Weir.[17] Petersen and Reiner both pulled out of the running in March 2000.[18] It was then narrowed down to Columbus, Gilliam, Parker, and Silberling.[19] Rowling's first choice was Terry Gilliam.[20] However, on 28 March 2000 Columbus was appointed as director of the film, with Warner Bros. citing his work on other family films such as Home Alone and Mrs. Doubtfire as influences for their decision.[21]</font></li>
</ul>
</div>
<div>
<br><br><hr>
<h2>References</h2>
<ul>
<li><font size="5"><a href="https://www.harrypottertheplay.com/">https://www.harrypottertheplay.com/</a></font></li>
<li><font size="5"><a href="https://www.wizardingworld.com/collections/harry-potter-at-home">https://www.wizardingworld.com/collections/harry-potter-at-home</a></font></li>
<li><font size="5"><a href="https://en.wikipedia.org/wiki/Harry_Potter">https://en.wikipedia.org/wiki/Harry_Potter</a></font></li>
</ul>
</div>
<br><br>
<footer>
<pre align="center">HARRY POTTER PUBLISHING AND THEATRICAL RIGHTS © J.K. ROWLING
HARRY POTTER CHARACTERS, NAMES AND RELATED TRADEMARKS ARE TRADEMARKS OF AND © WARNER BROS.
ENT. ALL RIGHTS RESERVED. BY USING THIS SITE, YOU AGREE TO OUR PRIVACY POLICY
WEBSITE DESIGNED, BUILT AND MANAGED BY AKA</pre>
<br><br>
</footer>
</body>
</html>
