HTML
HTML
• HTML stands for Hyper Text Markup Language, it is
a Standard Markup language for web pages.
• HTML is used to create content and structure of any
web page.
• It is the building block of web pages.
• Everything is enclosed within the tags <>.
• To make a html document open NOTEPAD
• To save your HTML document use [Link]
• After saving open your file in Google chrome or edge.
<html>
<head>
<title>FIRST </title>
</head>
<body>
<h1>Hello World </h1>
</body>
</html>
BASIC TAGS USED IN HTML
• <br> it is used to break the line
• <b> it is used to displays the text in bold</b>
• <I> it is used to displays the text in italic type</I>
• <u> is to underline the text </u>
• <sup> is used to displays the text in superscript format</sup>
• <center>is used to display text and image in center</center>
• <font face = “Arial”> it is used to change the font of the tags</font>
• <font color= “Red”> it is used to change the color of the font</font>
• <font size = 6> it is used to change the size of the font</font>
Paragraph Tag
• <p>
• This paragraph
• contains a lot of lines
• in the source code,
• but the browser
• ignores it.
• </p>
• <p>
• This paragraph
• contains a lot of spaces
• in the source code,
• but the browser
• ignores it.
COMMAND FOR TEXT BOX
<html>
<head>TEXT BOX</head>
<body>
<h1>Display Text Input Fields</h1>
First name:
<input type="text" id="fname" name="fname"><br><br>
Last name:
<input type="text" id="lname" name="lname"><br><br>
</body>
</html>
RADIO BUTTONS
<html>
<body>
<h1>Display Radio Buttons</h1>
<p>Please select your favorite Web language:</p>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language"
value="JavaScript">
<label for="javascript">JavaScript</label> <br>
</body>
</html>
CHECKBOXES
<html>
<body>
<h1>Show Checkboxes</h1>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br><br>
</body>
</html>
Question.
Create a checklist of any 10 hobbies of your choice.
☐ Reading
☐ Traveling
☐ Cooking
☐ Gardening
☐ Painting
☐ Playing Guitar
☐ Photography
☐ Cycling
☐ Hiking
☐ Playing Chess
DROP-DOWN
<html>
<body bgcolor="lightblue">
<h1>The select element</h1>
<p>The select element is used to create a drop-down list.</p>
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
<option value="mercedes">Mercedes</option>
<option value="BMW">BMW</option>
</select>
<br><br>
</body>
</html>
Listing Tags
<html>
<head>
<title>Listing Tags Example</title>
</head>
<body>
<h2>Unordered list</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
Listing Tags
<html>
<head>
<title>Listing Tags Example</title>
</head>
<body>
<h2>Ordered list</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type=“1”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
INSERTING IMAGE IN HTML
<!DOCTYPE html>
<html>
<body>
<h2>Image</h2>
<img src=“name of the [Link]" width="500"
height="333">
</body>
</html>
HTML Formatting Elements
Formatting elements were designed to display special types of text:
<strong> - Important text
<html>
<body>
<p>This text is normal.</p>
<p><strong>This text is important!</strong></p>
</body>
</html>
HTML Images Syntax
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web
pages. The <img> tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
src - Specifies the path to the image
<html>
<body>
<img src="img_flower.jpg" width="460" height="345">
</body>
</html>
