How to Develop a Sample HTML Page:
Introduction
to HTML:
- HTML: Stands for Hypertext Markup Language.
- Purpose: Used to develop and structure web pages.
Steps to
Create a Sample HTML Page:
1.
Open Notepad:
- Use any simple text editor like Notepad.
2.
Write HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Sample Web
Page</title>
</head>
<body>
<h1>Welcome to My
Sample Web Page</h1>
<p>This is a
paragraph of text on my web page.</p>
</body>
</html>
3. Save the HTML File:
- Go to the File menu and select Save As.
- Enter a name for your file with the .html or .htm extension (e.g.,
SampleWebpage.html).
- Click the "Save" button. This creates a file named
SampleWebpage.html.
4. Open the HTML File in a Browser:
- Locate the saved SampleWebpage.html file.
- Double-click on the file to open it. It will launch in your default
web browser.
We can open html page in different browsers.
ex:
---
<html>
This is sample webpage.
</html>
-----------------------------------------
HTML Tags and Their Usage
Paragraphs
To write
paragraphs in HTML, use the <p> tag.
htmlCopy code<p>This is a paragraph of text.</p><p>This is another paragraph of text.</p>
Bold Text
To make text
bold, use the <b> tag.
htmlCopy code<p>This is a <b>MANGO</b>.</p>
Headings
To create
headings, use the <h1> to <h6> tags.
htmlCopy code<h1>This is a Heading</h1>
Title
To set the
title of the HTML document, use the <title> tag within
the <head>.
htmlCopy code<!DOCTYPE html><html><head> <title>Sample Web Page</title></head><body> <!-- Body content goes here --></body></html>
Line Break
To break the
current line and display the text in a new line, use the <br> tag.
htmlCopy code<p>This is a line.<br>This is a new line.</p>
Textboxes -->
password -->
Radio button -->
Checkboxes -->
button -->
Links
Images
Dropdown
MultiSelect dropdown:
Webtable
Sample HTML Code:
<html>
This is sample webpage.
write paragraphs
--> use some tags
<p> My Para-1
</p>
<p> My Para-2
</p>
write text in bold -->
<b> MANGO </b>
head --> <head> My heading </head>
<h1>
Heading -1 </h1>
<h2> Heading -2
</h2>
title --> <title>
Amazon </title>
break the line -->
<br> - breaks current line and displays text in new
line <br>
Textboxes -->
<br>
password --> <br>
Radio button -->
<br>
Checkboxes --> <br>
button --> <br>
Links: <br>
Images: <br>
Dropdown : <br>
MultiSelect dropdown:: <br>
Webtable : <br>
</html>
******************************************
Develop All web Elements:
1.Textboxes:
first name
Last name
2.Password
Password :
Confirm password :
3. Radio button
Select Gender : Male
female
4.checkboxes :
Select branches :
ECE
EEE
CSE
Msc
5.Buttons
html code:
----------------
<html>
This is sample webpage.
write paragraphs
--> use some tags
<p> My Para-1
</p>
<p> My Para-2
</p>
write text in bold -->
<b> MANGO </b>
head --> <head> My heading </head>
<h1>
Heading -1 </h1>
<h2> Heading -2
</h2>
title --> <title>
Amazon </title>
break the line -->
<br> - breaks current line and displays text in new
line <br>
Develop All
webElements:
Textboxes -->
<br>
First Name <input type =
"text">
Last name: <input type = "text" >
MiddleNAme: <input type= "text">
<br>
password -->
<br>
My Password <input type="password">
Confirm password :<input type ="password">
<br>
Radio button -->
<br>
Sex: Male <input type="radio"> Female <input type="radio">
<br>
Checkboxes --> <br>
Select Brancches:<br>
Electronics <input
type="checkbox">
Electrical <input type="checkbox">
Computers <input type="checkbox">
*************************************************
<br>
button --> <br>
<input type ="button"
value="Signin"> <br>
Submit Button <input type ="button" value="My
Submit">
type Submit btn <input type ="submit" >
<button> My ButtonTag
</button>
<br>
Links: <br>
<a href = "https://www.google.com/"> My
google </a>
<a href="https://www.facebook.com/"> My Facebook
</a>
<a href ="https://www.amazon.in"> Amazon link
</a>
<br>
Images: <br>
<img src="C:\brahma\Practise\qtp practise\web
apps\Images\Penguins.jpg"
width="400"
height="150">
<br>
Dropdown : <br>
-----------------
Cars dropdown:
<select>
<option> Audi
</option>
<option> BMW </option>
<option
selected> Benz </option>
<option> Maruthi </option>
</select>
Bikes Dropdown :
<select>
<option> TVS
</option>
<option> Royal
enfield </option>
<option> Duke
</option>
</select>
<br>
Multi-Select dropdown:: <br>
------------------------<br>
MultiSelectcar
<select multiple>
<option > Audi
</option>
<option
selected> BMW </option>
<option
selected> Benz </option>
<option> Maruthi </option>
</select>
MuliSelect bike ropdown:
<select multiple>
<option> TVS
</option>
<option> Royal
enfield </option>
<option> Duke
</option>
</select>
Webtable : <br>--? Later
</html>
-----------------------
HW create sample html page with different text boxes, Radio button
, checkboxes in employee page ?
ename -textbox emp password- eid -textbox
Select Gender : Male -Radio btn , Female - Radio btn
Select City : Hyderabad
-checkbox , Bangalore- Checkbox , Delhi-checkbox
HW create sample html page with
different text boxes, Radio
button , checkboxes in Customer page ?
cust name -Textbox
Customer password -
password
City - Hyderabad -checkbox , Bangalore- Checkbox , Delhi-checkbox
Customer Gender : Male -Radio btn
Female - Radio btn
Orders: RealMe- checkbox,
Samsung- checkbox , Iphone-checkbox
HW Develop 'bikes' dropdown
with different values Honda, Hero, Yamaha,
suzuki, TVS
7. Links: Links can be used to navigate from
one page to another page. Use the <a> (anchor)
tag to create links.
<a href="URL">Link Text</a>
The href
attribute specifies the URL of the page the link goes to.
// HW create some 'redbus' link and navigate to
Redbus.com
// HW create Some "irctc" link- navigate to https://www.irctc.co.in/nget/
Define Attributes
to Element (name, id ,class..etc):
For each element or html tag, Developer adds different attributes
like name, id, class... etc
Developer will give different attribute names or property names.
<input type="text" name ="firstname"
id="firstId">
Attribute name =
"attribute value"
OR
propertyname
="property value"
Developer develop the web page but not testers.
While developing webpage, developer uses html tags and attributes
to identify html elements
Add Attributes/ properties to html tags:
----------------------------
Html code:
-----------
<html>
This is sample webpage.
write paragraphs --> use some tags
<p> My Para-1
</p>
<p> My Para-2
</p>
write text in bold -->
<b> MANGO </b>
head --> <head> My heading </head>
<h1>
Heading -1 </h1>
<h2> Heading -2
</h2>
title --> <title>
Amazon </title>
break the line -->
<br> - breaks current line and displays text in new
line <br>
Develop All web Elements:
--------------------
1. Textboxes -->
<br>
First Name <input type =
"text" name= "firstname" id="fid"
class="firstclass">
Last name: <input type = "text" name="lname" id="lid">
MiddleName: <input type= "text"
name="mname" id="mid"
class="test">
<br>
password -->
<br>
My Password <input type="password"
name="pwd" id="pwdid">
Confirm password :<input type ="password"
name="confirmpwd" id="cinfirmpwdid">
<br>
Radio button -->
<br>
Sex: Male <input type="radio"
name="male" id="maleid" class="gender"> Female <input type="radio"
name="female" id="femaleid" class="gender">
<br>
Checkboxes --> <br>
Select Brancches:<br>
Electronics <input
type="checkbox" name ="electronics" id ="eid"
class="branches">
Electrical <input type="checkbox"
name="Electrical" id="electricalid"
class="branches">
Computers <input type="checkbox"
name="computer"
id="cid" class="branches">
Webtable : <br>--? Later
</html>
----------------------------------------
HW Add attributes (name,id)
to below html code:
button
--> <br>
<input type ="button"
value="Signin"> <br>
Submit Button <input type ="button" value="My
Submit">
type Submit btn <input type ="submit" >
<button> My ButtonTag
</button>
<br>
Links: <br>
<a href = "https://www.google.com/"> My
google </a>
<a href="https://www.facebook.com/"> My Facebook
</a>
<a href ="https://www.amazon.in"> Amazon link
</a>
<br>
Images: <br>
<img src="C:\brahma\Practise\qtp practise\web
apps\Images\Penguins.jpg"
width="400"
height="150">
<br>
Dropdown : <br>
Cars dropdown:
<select>
<option> Audi
</option>
<option> BMW </option>
<option
selected> Benz </option>
<option> Maruthi </option>
</select>
ans :
HW Add attributes name ,id,class to
below html code:
ex2:
<html>
<h1> Employee
Page: </h1>
Ename: <input
type="text">
Eid : <input type=
"text"> <br>
Gender: <br>
<input
type="radio"> Male
<input
type="radio"> FeMale
<br>
AreaOf Interest:<br>
<input
type="checkbox"> Testing
<input
type="checkbox"> Development
<input
type="checkbox"> DB
</html>
No comments:
Post a Comment