8/5

## ADVANCED TOPICS:-

## Web page creation

- Website is a collection of web page

- Web page is collection of information

- Information is collection of data

- Data is a raw material

## Types of websites

1) Static website only for information purpose

2) Dynamic website where user can interact

## Website creating language

1) HTML

H-Hyper reference of next page

T-Text collection of words, symbols and characters

M-Markup it is a library stores the definition of all tags

L-Language mediator

## HTML syntax is called "tag"

## Types of tag

1) Open tag <>

2) Close tag <> </>

ex. <p>

## HTML structure

<html>

<head>

It is a optional section

</head>

<body>

Using called tag

</body>

</html>

## Demo Example:-

<html>

Welcome

</font><br>

<b>Welcome</b><br>

<i>Welcome</i><br>

<u>Welcome</u><br>

1 <sup>st</sup><br>

H <sub>2</sub>o <br>

html listing

<br>

<li>Nagpur</li>

<li>Delhi</li>

<li>Mumbai</li>

</ol><br>

<ul>

<li>Nagpur</li>

<li>Delhi</li>

<li>Mumbai</li>

</ul><br>

<address>Mahal, Nagpur </address><br>

<p>This is a paragraph tag.</p><br>

<center>This is the center.</center>

</body>

</html>

10/5

## Navigation

- For moving from one page to another page

## Types of navigation:-

1) Page to page navigation

2) Page to URL navigation

3) Page to document navigation

4) Page to API navigation

Navigation is written using <a> </a> called as anchor tag.

NOTE:- Embed is communication between 3rd party website to webpage

ex. Youtube, Fb, Twitter

## POINT TO REMEMBER:-

How to embed any video.

- Search video on youtube

- Share that video where you'll find the option as embed(click on that)

- You'll get one tag named as <iframe> copy the whole tag

- Next paste that tag into your respective code/prgm

- This video will show on your page that you've created.

##TASK:-

Create your biodata using navigation

- Intro

- Qualification

- Experience

- Contact (whatsapp link)

- Social media (fb, youtube, linkedin post embed)

<html>

<body>

<font size=5><h1 align="center">Biodata</h1></font>

<ul >

<b><li>Introduction</li></b><br>

Name: Amit Kelkar <br>

Address: Flatno. 203, Benegiri Niwas, Beside Shivaji Park, Shanti Nagar, Chandrapur-440032<br>

Email: amit.kelkar@gmail.com<br><br>

<b><li>Qualification</li></b><br>

Course: B.E.(Information Technology)<br>

Institute: KITS<br>

Year of passing: 2020<br>

CGPA/Percentage: 65% <br><br>

<b><li>Experience</li></b><br>

Company Name: Axiom Techguru Pvt. Ltd.<br>

Years of Experience:- 2<br><br>

<b><li>Contact</li></b><br>

Phone: 9876543210<br>

<a href="https://wa.me/918806638960"> Click here to contact on Whatsapp </a><br><br>

<b><li>Social Media</li></b><br>

<b>Facebook<br><br></b>

<b>Youtube<br><br></b>

</font>

</ul>

</body>

</html>

11/5

## HTML Image:-

There are 2 types

1) Background which we use in body tag as an attribute

2) Foreground <img>

NOTE:- HTML does not provide page arrangement, for arrangement we use CSS.

##HTML iFraming

- iFrame provide interface framing concept

- iFrame provide multiple view concept

##FORM TAG:-

<html>

<body>

data movement in html<br>

<marquee direction="up" height="200" width="200" bgcolor="yellow"
behavior="alternate" scrollamount="5" scrolldelay="5">

<font color="red" size=7 > Welcome </font>

</marquee><br><br>

html form designing<br>

<form>

enter your name:<input type="textbox"><br><br>

enter your password: <input type="password"><br><br>

select your gender: <br>

male <input type="radio"> female <input type="radio"><br><br>

select your subject: <br>MCA <input type="checkbox"><br><br>

select your city: <br>

<option>Nagpur</option>

<option>Raipur</option>

<option>Mumbai</option>

<option>Delhi</option>

</select><br>

<br>

Write your message: <br>

<textarea>Write your message here</textarea><br><br>

<button>click</button>

</form>

</body>

</html>

EXPLANATION:-

- <marquee> is used to move the text on the page

- In <marquee> scrollamount and scrolldelay value should be same

## IFRAME TAG:-

<html>

<body>

<a href="be.html" target="f1">BE</a>&nbsp;  

</body>

</html>

EXPLANATION:-

- &nbsp is used for space

- name="f1" is name of that iframe

##TASK:-

Create biodata using iframe, form

- aboutus.html

- qualification.html

- experience.html

- contact.html(form- name, email, mobile, msg)

- social.html

- aboutus.html

<html>

<h2> About Us <br>

<p> Welcome to our page </p></h2>

<p> Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain Coffea species. </p>

<p> There are many benefits and uses of coffee. </p>

<p> Coffee has a unique taste, that is why many people likes coffee. </p>

</body>

</html>

- qualification.html

<html>

<b><h2>Qualification</h2></b><br>

Course: <select>

<option> Civil Engineering</option>

<option>Information Technology</option>

<option>Mechanical Engineering</option>

<option>Electrical Engineering</option>

<option>Electronics and Telecommunication</option>

<option>Computer Science</option>

<option>Chemical Engineering</option>

</select><br><br>

Institute: <input type="textbox"><br><br>

Year of passing: <select>

</select><br><br>

CGPA/Percentage: <input type="number"><br><br>

</body>

</html>

- experience.html

<html>

<b><h2> Work Experience</h2></b><br>

Company Name: <input type="textbox"><br><br>

Years of Experience: <select>

</select><br>

<br>

</body>

</html>

- contact.html(form- name, email, mobile, msg)

<html>

<body>

<b><h2> Contact </h2></b><br>

Name: <input type="textbox"><br><br>

Email: <input type="email"><br><br>

Mobile: <input type="tel"><br><br>

Message: <a href="https://wa.me/918806638960"> Click here to Whatsapp </a><br><br>

</form>

</body>

</html>

- social.html

<html>
	<body align="center">

	<b><h2>Social Media</h2></b><br>
	<b>Facebook<br><br></b>
	<iframe src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2FManpowerserconsulting%2Fvideos%2F255544782562455%2F&show_text=false&width=560" width="560" height="314" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe><br><br>

	<b>Youtube<br><br></b>
	<iframe width="560" height="315" src="https://www.youtube.com/embed/w1V3gZv0ebY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


	</body>
	</html>

- iframe2.html

<html>

<body>

<a href="aboutus.html" target="f2"> About Us </a>   

<a href="qualification.html" target="f2"> Qualification </a>   

<a href="experience.html" target="f2"> Experience </a>   

<a href="contact.html" target="f2"> Contact </a>   

<a href="social.html" target="f2"> Social Media </a><br><br>

</body>

</html>

12/5

## TASK:-

Create a ecommerce page

- Product page me

image hogaa

image ke niche whatsapp me ki link hogi

- About page me

ecommerce ke baare me paragraph hogaa

ecommerce ke feature

Order list me hogaa

- Social

YouTube video embed karna hai uske nich video ka title

Facebook icon image honaa chaiyia us per click kare to aapka Facebook profile open ho jaaye

Linkedin icon honaa chaiyia us per click kare to aapka linkdin page open ho jaaye

YouTube video lagaana hai or uske niche jo video hai uska title

Facebook ka image icon ko hyperlink karna hai

- product3.html

<html>

<h2> List of Products </h2>

Headphones<br>