HTML – Authoring Tools
Unit 1
Introduction
● HTML means Hyper Text Markup language which is a standard markup
language for web pages. HTML will have elements, attributes, and other
tags.
● Most of the websites present on internet use HTML. HTML is easy to learn
and powerful.
● Hypertext is the major method by which we are moving around the web by
clicking on Hyperlinks which redirects to another page.
● Markup shows text inside them using HTML tags by marking a test as a
certain type.
● HTML Command elements are building blocks of an HTML page and can
have attributes which provide additional information about the element and
attributes will be present in pairs.
HTML Commands
<html>
<title>Page Title</title>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML Headings
<h1> This is heading1 </h1>
<h2> This is heading2 </h2>
<h3> This is heading3 </h3>
<h4> This is heading4 </h4>
HTML images element
<html>
<title>Page Title</title>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<img src="E:\shobana\Subjects\ITE\tree.webp" alt="Tree" style="width:1120px;height:950px">
</body>
</html>
BACKGROUND IMAGE
<body background="E:\shobana\Subjects\ITE\Sea.jpg">
ADDING AUDIO to YOUR WEBPAGE
<embed src="E:\image\video1.mp4" height = "350" width="500" autostart="True"></embed>
<embed src="E:\image\song.mp3" height="100" width="100" autostart="false"></embed>
<bgsound src="E:\image\ck.mp3" loop="infinite">
Lists in HTML
● There are three types of lists in HTML:-
● Unordered Lists
● Ordered Lists
● Definition Lists
● Unordered Lists
<ul>
<li> Coffee</li>
<li> Tea </li>
<li> Milk </li>
</ul>
● Ordered List
<ol>
<li value="15">List number 1</li>
<li value="10">List number 2</li>
<li value="20">List number 3</li>
</ol>
● Definition list - contains list of items with a description or definition of each
item
<dl>
<dt>Item number 1</dt>
<dd>Definition or Description for 1st Item</dd>
<dt>Item number 2</dt>
<dd>Definition or Description for 2nd Item</dd>
<dt>Item number 3</dt>
<dd>Definition or Description for 3rd Item</dd>
</dl>
Create a table in HTML
<table>
<tr>
<th>Firstname</th>
<th> Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
GIVE NAME to ANY SECTION of YOUR WEB PAGE
<a name="section name">My section</a>
Link in the HTML
<a href="https://www.amazon.com">This link take you to shopping.Happy
Shopping </a>
Link with in the Same Page
<a href="#section name" rel="nofollow" target="_blank" >Link to My section of
this web page</a>
ADDING COMMENTS
<!--Text within these tags are not displayed by the Web Browser-->
Style attribute
<p style="color:red"> I am a paragraph </p>
Format the HTML elements
<b> This text is bold </b>
Highlight some text in the HTML
<h2> html <mark> Marked </mark> formatting </h2>
Delete some text in HTML
<p> My favorite color is <del> Navy blue </del> Red </p>
Superscripted text
<p> This is <sup> superscripted </sup> text </p>
Abbreviation
<p> The <abbr title=”World Health Organization” >WHO </abbr> was founded
in 1948 </p>
Address in the HTML
<address>
Written by Kalam <br>
MIT.com <br>
Pincode : 600084, Chennai <br>
India
</address>
Display a webpage inside a webpage
<iframe src="E:\shobana\Subjects\ITE\test.html" height="300" width="300" >
</iframe><br/>
Setting Font Size
<font size = "6">Font size = "6"</font><br />
Setting Font face
<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
Setting Font Color
<font color = "#FF00FF">This text is in pink</font><br />
<font color = "red">This text is red</font>
Input Text Control-Single line Input Text Control
Input Text Control-Multi-line Input Text Control
Password Input Control
Input Type Radio
Input Type Checkbox
