Web Designing Theory: 2025

Sunday, November 2, 2025

how to use the video tag in html

video tag

The HTML 5 <video> tag use to embedded video on an HTML document. Browsers dont support the same video format so you provide multiple video formats for correct rendering. A path to the video file is nested inside <source> tag, or src attribute. You can also include an alternate text in the <video>tag, that will be displayed in case if the browser doesn't support the video format.

how to use the video tag in html

Example

 
<!DOCTYPE html>

<html>

<head>

 <title>Title of the document</title>

 <style>

 video {

width: 300px;

height: 200px;

border: 1px solid #666;

}

</style>

</head>

<body>

<video controls muted >  

<source src="movie.mp4" type="video/mp4">

  <source src="movie.ogg" type="video/ogg">

</video>

 <P>Your browser does not a support in the video tag.</p>

 </body>

 </html >

how to use the video tag in html

Explain Program

Step 1 ]

<!Doctype html>
<!doctype html> always be the first line of any HTML document.

Step 2 ]

<html> and </html>
html is the root element.

Step 3 ]

<body> and </body>
body is main content area.
All visible content inside to the <body> tag

Step 4]

<head>

 <title>Title of the document</title>

 <style>

 video {

width: 300px;

height: 200px;

border: 1px solid #666;

}

</style>

</head>

<head>contains metadata and setting web page

inside the head section

<title> :- title of the web page which appears in the browser tab.

CSS mean :-

<video> element 300 pixels wide

<200> pixel tall

1-pixel gray border around (#666 shade of gray)

Step 5]

<body> section

section contains the content that appears on the web page

<body>

<video controls muted >  

<source src="movie.mp4" type="video/mp4">

  <source src="movie.ogg" type="video/ogg">

</video>

 <P>Your browser does not a support in the video tag.</p>

 </body>

<video controls muted >  

<source src="movie.mp4" type="video/mp4">

  <source src="movie.ogg" type="video/ogg">

</video>

<video> tag :- use embed video files directly into web page

<video> tag is HTML5 element used to embed video file (like .mp4,webm,ogg)

into a webpage without need plugin

Attribute :-

controls :- adds play,pause volume, and other controls the video player.

muted :- starts the video with sound turned off.

<source> tag define video file sources

browser support .mp4

how to use the video tag in html
output

Related Post :-

C program to print alphabet b star

C program to Print A star pattern Asterisks pattern

Saturday, November 1, 2025

how to create Top navigation menu

The <nav> tag is new element in the html5 nav tag use to define the of the navigation link either within the current document or other documents. Example- nav tag is the navigation blocks are menu tables of contents, and indexes. One HTML document may contain several <nav> tags, for example, one for site navigation and one for intra-page-navigation

.Note that not all links in the HTML document can be placed inside the <nav> element. it can only include major navigation blocks. For example, the <nav > tag is not placed in the <footer> tag for defining links in the footer of the website.

how to Create Top navigation menu

Syntax:

The <nav > tag comes pairs. written between the opening

(<nav> ) and closing (</nav>) tags.

how to create top navigation menu

program

<!DOCTYPE html>

 <html>

<head>

<title>Title of the document</title>

</head>

<body>

<header>

<h1> how to create Top navigation menu  </h1>

</header>

<nav>

<a href="Html.html">HTML</a> 

| <a href="CSS.html">CSS</a> |

 <a href="javascript.html" > javascript </a> |

 <a href="/php.html"> PHP</a>

</nav>

<h2>Welcome to web designing theoryPublication</h2>

</body>

</html>

how to create top navigation menu

Explain program

Step 1 ]

<!Doctype html>
<!doctype html> always be the first line of any HTML document.

Step 2 ]

<html> and </html>
html is the root element.

Step 3 ]

<body> and </body>
body is main content area.
All visible content inside to the <body> tag

Step 4]

<header>

<h1>Programming Courses</h1>

</header>

<header> element represents top section

header section includes

website name

logo

heading or slogan

<h1>Programming Courses</h1>

Display a large heading the top of the page

Step 5]

<nav> tag use navigation section of your website

links use menus or catagories

Step 6]

<nav>

<a href="Html.html">HTML</a> 

| <a href="CSS.html">CSS</a> |

 <a href="javascript.html">JavaScript</a> |

 <a href="/php.html">PHP</a>

</nav>

<a> tag create hyperlinks

href = html.html means link will open the file

vertical bar use

Step 7]

<h2>Welcome to web designing theoryPublication</h2>

<h2> is subheading = smaller than <h1>
context or welcome message to visitors
display bold

Step 8]

</html>

end HTML Document

how to create top navigation menu

output

learn HTML link tag

html table cellpadding attribute

how to create checkbox in html

Friday, October 31, 2025

How to Create a Horizontal Frameset in html

horizontal Rows of frames can be created by using rows attribute rather than the cols attribute shown in HTML.horizontal frameset tag divide a webpage into top to bottom section row using <frameset> tag with rows attribute

each section use <frame> tag

How to Create a Horizontal Frameset in html

Example :-

<!DOCTYPE html>

<html>

<frameset rows="20%,  20%, 20%, 20%">

<frame src="https://webdesigningtheory.blogspot.com/">

<frame src="https://webdesigningtheory.blogspot.com/">

<frame src="https://webdesigningtheory.blogspot.com/">

</frameset>

</html>

How to Create a Horizontal Frameset in html

Explain program

Step 1 ]

<!Doctype html>
<!doctype html> always be the first line of any HTML document.

Step 2 ]

<html> and </html>
html is the root element.

Step 3 ]

<body> and </body>
body is main content area.
All visible content inside to the <body> tag

Step 4]

Instead using <body> tag use a frameset to divide the browser window

divide into multiple section a frames tag use

<frameset> tag use element tell browser how to split the page vertically or horizontally

Syntax :-

<frameset cols ="value1,value2, value3,....."> = vertically divide

<frameset rows= " value1,value2,value3,....."> = horizontally

Step 5]

frameset rows attribute divide the window horizontally into four rows

each row 20% height of the browser

Step 6]

each <frame> tag defines one section frame with the frameset tag

src attribute use browser which web page to load inside frame tag

each four frame src the same website :- web designing theory blog

use <frameset> tag use external webpage inside each four frames

Step 7]

</frameset>

close the <frameset > section

Step 8]

</html>

Close the html tag

How to Create a Horizontal Frameset in html
output

how to use image tag in html

html heading tags explain structure

how to use pre tag html with example

Tuesday, October 28, 2025

HTML Frameset Code Example with Mixed Rows and Columns

How to Create a Multi-Column and Multi-Row Layout with HTML Frames

mixing Column and rows of frames can be both appear on the same webpage. by nesting one of frameset inside of another. mixing columns is first create to frameset and nest a child frameset with the paren element.

How to Create a Multi-Column and Multi-Row Layout with HTML Frames

Example :-

<!DOCTYPE html>

<html>

<frameset cols="20%, 30%, 35%">

<frameset rows="20%, 30%,20%">

<frame src="https://webdesigningtheory.blogspot.com/">
<frame src="https://webdesigningtheory.blogspot.com/">
   
<frame src="https://webdesigningtheory.blogspot.com/">

</frameset>

<frame src= "https://webdesigningtheory.blogspot.com/">

<frame src="https://webdesigningtheory.blogspot.com/">

</frameset>

</html>

How to Create a Multi-Column and Multi-Row Layout with HTML Frames

Explain program

Step 1 ]

<!Doctype html>
<!doctype html> always be the first line of any HTML document.

Step 2 ]

<html> and </html>
html is the root element.

Step 3 ]

<body> and </body>
body is main content area.
All visible content inside to the <body> tag

Step 4]

frameset divides the browser window

Three columns

First column :- 20% width

Second column :- 30% width

Third Column :- 35% width

Step 5]

Nested Frameset divides left column horizont three row

Top row :- 20% height

Middle row :- 30% height

Bottom row :- 20% height

Step 6]

<frame> tag load separate web page.

use all frame load the same webpage.

How to Create a Multi-Column and Multi-Row Layout with HTML Frames

Monday, October 27, 2025

How to Create Nested Frames in HTML

html frames are used divide a web page into multiple sections ,and each section display a webpage or document.

frames nested crate layout

header at the top

left-side navigation menu

right-side content area

Nested Frames

How to Create Nested Frames in HTML (Step-by-Step Guide)

<!Doctype html>

<html>

<frameset rows="20%, 80%">

<frame src="https://webdesigningtheory.blogspot.com">

<frameset cols="50%,50%">

<frame src="https://webdesigningtheory.blogspot.com">

<frame src="https://webdesigningtheory.blogspot.com">

</frameset>

</html>

How to Create Nested Frames in HTML (Step-by-Step Guide)

Explain program

Step 1 ]

<!Doctype html>
<!doctype html> always be the first line of any HTML document.

Step 2 ]

<html> and </html>
html is the root element.

Step 3 ]

<body> and </body>
body is main content area.
All visible content inside to the <body> tag

Step 4]

<frameset> tag divided browser window into columns and rows

rows="20%,80%" divides the window horizontally

top = 20% :- frame header

bottom = 80% :- frame divided two frames

Step 5]

<frame src="https://webdesigningtheory.blogspot.com" 

src :- src attribute  defines webpage.  

        webpage  displayed inside the frame.

Step 6]

<frameset cols="50%,50%">

cols ="50%,50%" divides this area into two equal part

Left half :- 50%

Rigth half :- 50%

Step 7]

</frameset>

closing tag

How to Create Nested Frames in HTML

Output :-

Friday, October 24, 2025

html time datetime attribute

<time>: The (Date) Time element

The <time> HTML element represents the specific period of time. It may include the datetime attribute to the translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders.

html time datetime attribute

Date type Example

 <html>

 <body>

 <h2>Date type</h2>

 <form>

 Enter any Date Format: DD.MM.YYYY: <br><br>

 <input type="text" name="numbers"

  pattern="(0[1-9]1[0-9]|2[0-9]|3[01]).(0[1-9]|1[012]).[0-9]{4}"

  title="Enter valid date"> <br><br>

  <input type="submit">

 </form>

 </body>

 </html>

html time datetime attribute

Explain Program

Step 1 ]

<!Doctype html><!doctype html> always be the first line of any HTML document.

Step 2 ]

<html> and </html>
html is the root element.

Step 3 ]

<body> and </body>
body is main content area.
All visible content inside to the <body> tag

Step 4]

<input type="text" name="numbers"

  pattern="(0[1-9]1[0-9]|2[0-9]|3[01]).(0[1-9]|1[012]).[0-9]{4}"

  title="Enter valid date"> <br><br>

 input type = "text"  :-  regular text input box

  name="number"   :- name of the field  use submitting the form to server

 pattern = "(0[1-9]1[0-9]|2[0-9]|3[01]).(0[1-9]|1[012]).[0-9]{4}"

 (0[1-9]1[0-9]|2[0-9]|3[01])    :-  day 01 to 31

                         dot  ( meaning  day and month)

  (0[1-9]|1[012])                   :-  month o1 to 12 

                      dot (meaning  month and year)

   [0-9]{4}                           :-   4 -digit year (eg 2025)

ad

Sunday, November 2, 2025

how to use the video tag in html

video tag

how to use the video tag in html

Example

how to use the video tag in html

Explain Program

<!Doctype html><!doctype html> always be the first line of any HTML document.

Step 2 ]

<html> and </html> html is the root element.

Step 3 ]

<body> and </body>body is main content area.All visible content inside to the <body> tag

Step 4]

<head>contains metadata and setting web page

Step 5]

<body> section

section contains the content that appears on the web page

<video> tag :- use embed video files directly into web page

how to use the video tag in html output

Saturday, November 1, 2025

how to create Top navigation menu

how to Create Top navigation menu

how to create top navigation menu

program

how to create top navigation menu

Explain program

Step 1 ]

<!Doctype html><!doctype html> always be the first line of any HTML document.

Step 2 ]

<html> and </html> html is the root element.

Step 3 ]

<body> and </body>body is main content area.All visible content inside to the <body> tag

Step 4]

Step 5]

Step 6]

<a> tag create hyperlinks

Step 7]

<h2> is subheading = smaller than <h1> context or welcome message to visitors display bold

end HTML Document

how to create top navigation menu

output

Related Post :-

Friday, October 31, 2025

How to Create a Horizontal Frameset in html

horizontal Rows of frames can be created by using rows attribute rather than the cols attribute shown in HTML.horizontal frameset tag divide a webpage into top to bottom section row using <frameset> tag with rows attribute

each section use <frame> tag

How to Create a Horizontal Frameset in html

Example :-

How to Create a Horizontal Frameset in html

Explain program

Step 1 ]

<!Doctype html><!doctype html> always be the first line of any HTML document.

Step 2 ]

<html> and </html> html is the root element.

Step 3 ]

<body> and </body>body is main content area.All visible content inside to the <body> tag

Step 4]

Step 5]

Step 6]

Step 7]

Step 8]

Close the html tag

How to Create a Horizontal Frameset in html output

Related Post :-

Tuesday, October 28, 2025

How to Create a Multi-Column and Multi-Row Layout with HTML Frames

How to Create a Multi-Column and Multi-Row Layout with HTML Frames

Example :-

How to Create a Multi-Column and Multi-Row Layout with HTML Frames

Explain program

Step 1 ]

<!Doctype html><!doctype html> always be the first line of any HTML document.

Step 2 ]

<html> and </html> html is the root element.

Step 3 ]

<body> and </body>body is main content area.All visible content inside to the <body> tag

Step 4]

Step 5]

Step 6]

<!Doctype html>
<!doctype html> always be the first line of any HTML document.

<html> and </html>
html is the root element.

<body> and </body>
body is main content area.
All visible content inside to the <body> tag

how to use the video tag in html
output

<!Doctype html>
<!doctype html> always be the first line of any HTML document.

<html> and </html>
html is the root element.

<body> and </body>
body is main content area.
All visible content inside to the <body> tag

<h2> is subheading = smaller than <h1>
context or welcome message to visitors
display bold

<!Doctype html>
<!doctype html> always be the first line of any HTML document.

<html> and </html>
html is the root element.

<body> and </body>
body is main content area.
All visible content inside to the <body> tag

How to Create a Horizontal Frameset in html
output

<!Doctype html>
<!doctype html> always be the first line of any HTML document.

<html> and </html>
html is the root element.

<body> and </body>
body is main content area.
All visible content inside to the <body> tag

<!Doctype html>

<html>

<frameset rows="20%, 80%">

<frame src="https://webdesigningtheory.blogspot.com">

<frameset cols="50%,50%">

<frame src="https://webdesigningtheory.blogspot.com">

<frame src="https://webdesigningtheory.blogspot.com">

</frameset>

</html>

<!Doctype html>
<!doctype html> always be the first line of any HTML document.

<html> and </html>
html is the root element.

<body> and </body>
body is main content area.
All visible content inside to the <body> tag