cswithpathak BY DR. AJAY KUMAR PATHAK, ASSISTANT PROFESSOR : UNIT 1 MJ–12 (Th):- WEB PROGRAMMING (UNIT NAME :- WEB PAGE DESIGNINING HTML)

DR. AJAY KUMAR PATHAK

ASSISTANT PROFESSOR

READ ALL THE NOTES CHAPTER WISE

SUBJECT NAME:- MJ–12 (Th):- WEB PROGRAMMING

FOR B. Sc. IT.

SEM 6 F.Y.U.G.P.

UNIT 1 (UNIT NAME):-

WEB PAGE DESIGNINING HTML

LEARN NOTES FROM HERE

PREPARED BY DR. AJAY KUMAR PATHAK

©Copyrights

UNIT 1 :-

MJ–15 (Th) (UNIT NAME):-

WEB PAGE DESIGNINING HTML

B. Sc. IT. SEMESTER 6 NOTES BASED ON NEP

SUBJECT : MJ–12 (Th): WEB PROGRAMMING

(To be selected by the students from)

UNIT 1 (UNIT NAME):- WEB PAGE DESIGNINING

Objective: The objective of the course is to enable students to

· The objective of this course is to provide students with a comprehensive understanding of network security concepts and techniques. The course aims to develop students' skills in identifying network vulnerabilities, implementing security measures, and ensuring the confidentiality, integrity, and availability of networked systems.

Learning Outcome:- After completion of this course, a student will be able to–

· Understand the principles and concepts of network security.

· Identify potential security threats and vulnerabilities in networked systems.

· Implement security measures to protect network infrastructure.

· Apply encryption and authentication techniques to secure network communication.

· Analyze and respond to security incidents in networked environments

Semester Examination and Distribution of Marks

INTERNAL MARKS :- 25 (NO PRACTICAL IN THE MJ 12 (WEB PROGRAMMING)

End Semester Examination (ESE) : 75 Marks

-: NOTES READ FROM HERE :-

SYLLABUS OF UNIT 1 :- WEB PAGE DESIGNING HTML - LIST - TABLES - IMAGES - FORMS - FRAMES -CASCADING STYLE SHEETS, *XML DOCUMENT TYPE DEFINITION - XML SCHEMAS,*DOCUMENT OBJECT MODEL.

UNIT- 1 :- WEB PAGE DESIGNING using HTML

INTRODUCTION OF WEB PAGE DESIGNING:-

Web design refers to the design of websites. It usually refers to the user experience aspects of website development rather than software development. Web design used to be focused on designing websites for desktop browsers; however, since the mid-2010s, design for mobile and tablet browsers has become ever-increasingly important.

· A web designer works on a website's appearance, layout, and, in some cases, content.

· Appearance relates to the colors, typography(design , formatting) , and images used.

· Layout refers to how information is structured and categorized. A good web design is easy to use, aesthetically pleasing, and suits the user group and brand of the website.

· A well-designed website is simple and communicates clearly to avoid confusing users. It wins and fosters the target audience's trust, removing as many potential points of user frustration as possible.

HTML:- Brief History of HTML :- In the late 1980's , a physicist, Tim Berners-Lee who was a contractor at CERN, proposed a system for CERN researchers. In 1989, he wrote a memo proposing an internet based hypertext system.

Tim Berners-Lee is known as the father of HTML. The first available description of HTML was a document called "HTML Tags" proposed by Tim in late 1991. The latest version of HTML is HTML5, which we will learn later in this tutorial.

What is HTML : HTML is an acronym which stands for Hyper Text Markup Language which is used for creating web pages and web applications. HTML, allows web users to create, structure sections, paragraphs, and links using elements, tags, and attributes. However, it’s worth noting that HTML is not considered a programming language as it can’t create dynamic functionality. HTML elements tell the browser how to display the content.

Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a hypertext. Whenever you click on a link which brings you to a new webpage, you have clicked on a hypertext. HyperText is a way to link two or more web pages (HTML documents) with each other.

Markup language: A markup language is a computer language that is used to apply layout and formatting conventions to a text document. Markup language makes text more interactive and dynamic. It can turn text into images, tables, links, etc.

Web Page: A web page is a document which is commonly written in HTML and translated by a web browser. A web page can be identified by entering an URL (Uniform Resource Locator) . A Web page can be of the static or dynamic type. With the help of HTML only, we can create static web pages.

HTML determines the structure of web pages. This structure alone is not enough to make a web page look good and interactive. So you'll use assisted technologies such as CSS and JavaScript to make your HTML beautiful and add interactivity, respectively.

In this case, I like to break down the three technologies – HTML, CSS, and JavaScript – this way: they are like a human body.

• HTML is the skeleton,

• CSS is the skin, and JavaScript is the circulatory, digestive, and respiratory systems that brings the structure and the skin to life.

A SIMPLE HTML DOCUMENT

<!DOCTYPE html> //( !DOCTYPE TYPE FULL FORM document type definition , It is not case sensitive, When we are using below 5 version of html then ,there is no need to declare the <!DOCTYPE html> in the html programe, But if we are using version 5 or more so there are must be declared only <!DOCTYPE html> this tag is indicating we are using html version 5 or more )

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>My First Heading of the HTML document </h1>

<p>My first paragraph of the HTML .</p>

</body>

</html>

EXPLANATION OF THE TAGS

1. <!DOCTYPE>: It defines the document type or it instruct the browser about the version of HTML. (previously we were using Document type declaration (DTD)) The <!DOCTYPE html> appears at the start or very top of an HTML document. It tells the browser what HTML version was used to produce the page.

2. <html > :This tag informs the browser that it is an HTML document. Text between html tag describes the web document. It is a container for all other elements of HTML except <!DOCTYPE>

3. <head>: It should be the first element inside the <html> element, which contains the metadata(information about the document). It must be closed before the body tag opens.

4. <title>: As its name suggested, it is used to add title of that HTML page which appears at the top of the browser window. It must be placed inside the head tag and should close immediately. (Optional)

5. <body> : Text between body tag describes the body content of the page that is visible to the end user. This tag contains the main content of the HTML document.

6. <h1> : Text between <h1> tag describes the first level heading of the webpage.

7. The <p> element defines a paragraph

APPLICATIONS OF HTML

As mentioned before, HTML is one of the most widely used language over the web. Here few of them:

· Web pages development - HTML is used to create pages which are providing over the web. Almost every page of web is having html tags in it to render its details in browser.

· Internet Navigation - HTML provides tags which are used to navigate from one page to another and is heavily used in internet navigation.

· Responsive UI (user interface) - HTML pages now-a-days works well on all platform, mobile, tabs, desktop or laptops owing to responsive design strategy.

· Offline support HTML pages once loaded can be made available offline on the machine without any need of internet.

· Game development- HTML5 has native support for rich experience and is now useful in gaming development.

HOW TO WRITE A HTML PROGRAM IN HTML EDITORS

Requirements: A text editor (Notepad on Windows, notepad++, or Edit plus, Gedit on Ubuntu and TextEdit on MacOS X.)

A browser (Firefox, Chrome, Chromium, Safari or any other web browser )

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>My First Heading of the HTML document </h1>

<p>My first paragraph of the HTML .</p>

</body>

</html>

Now save file_name with extension .html or .htm e.g (abc.html or abc.htm)

Now with any Brower

Why is HTML not a programming language?

HTML is a markup language that merely communicates the structure of a digital document to the browser, and the browser, in turn, can visually represent that structure. A programming language is something that instructs the machine to perform specific tasks. HTML is just a representation of information in a human-friendly manner.

FEATURES OF HTML

1. HTML allows you to browse the internet with ease : It is a very easy and simple language. It can be easily understood and modified. All you need to do is click on a link to travel on the internet, or enter the URL in the address bar. Hypertext is what makes travel between the internet possible, especially if you haven’t memorized all the URLs on the whole internet. It’s essential to guide users around your website and act as a door to know that different rooms exist and can travel between them. Without hypertext, how can you tell if there are other web pages to visit at all?

2. Platform Independent : HTML runs on a browser, and you can find a browser on almost any device with a simple Operating System. If you had used mobile phones before smartphones were a thing, you would know that even old Nokia phones that ran Symbian OS could open HTML pages.

3. HTML allows you to create web documents : It is very easy to make an effective presentation with HTML because it has a lot of formatting tags. A web document is a web page. All web pages are possible because you can create the content you want the user to see and then wrap them up in snug code that tells the computer how to format the whole thing. That lets your browser know what text the heading is, what text the body is, and what text the metadata is. It’s labeled, so the computer understands what to do with the content that you give it.

4. HTML supports data entry. : You have the standard APIs needed to support any data entry work. All developers need to do is add tags that indicate the required fields, such as text and data formats. You can even support on-screen keyboards and validation, which allows the user to have a smooth and comfortable experience.

5. It is a markup language, so it provides a flexible way to design web pages along with the text.

6. It facilitates programmers to add a link on the web pages (by html anchor tag), so it enhances the interest of browsing of the user.

7. It is platform-independent because it can be displayed on any platform like Windows, Linux, and Macintosh, etc.

8) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which makes it more attractive and interactive.

9. HTML is a case-insensitive language, which means we can use tags either in lower-case or upper-case.

10. HTML allows offline storage. : What if your users are disconnected? You can still make your applications work with the help of application cache mechanisms found in the latest version of HTML. The application cache handles all kinds of offline abilities and has different components, including API methods that need updates. You can set what the browser manages with its offline use and even control the resources used through the manifest file.

10. HTML allows you to use native APIs. : API stands for application programming interface and is a messenger that allows two different applications to talk to each other. HTML comes with geolocation, drag and drop, event handling, and even more features with the help of APIs. These make HTML programming more powerful than ever. You can even use modern web applications with asynchronous natures.

11. HTML lets you store things on the client-side. : The local storage and IndexDB allow you to store files on the client-side in a more straightforward, easier, and more efficient way than ever. These come with their own features, which are pretty powerful. Localstorage comes with string-based hash table storage and support for the getItem, setItem, and removeItem methods. IndexDB comes with even bigger storage which you can expand with the approval of the user as well.

DISADVANTAGES OF HTML

Disadvantages of HTML

(1).. Static Language: - A static web programming language is HTML. It does not support dynamic outcomes.

(2).. Needs others languages:- HTML can be used to generate static websites and webpages, but programming languages like PHP, JAVA, PYTHON, and.NET must be used and implemented in order to develop Limited for Displaying Content

(3) Limited for Displaying Content:- HTML has a limited ability to visually showcase the content. Cascading Style Sheets (CSS) is a new language that was developed to control the display of Web pages in order to get around this restriction. This restriction basically requires Web designers and developers to maintain two separate sets of files: HTML files that contain the content and structure of the website, and CSS files that specify how a page should look.

(4) Restricted Security :- Security is necessary for everyone. HTML does offer some limited security protections, though, which is a considerable drawback. By itself, it is not secure. Additional security must be supplied by third-party services. It is susceptible to spammers and hackers due to insufficient security measures.

(5) Doesn’t support old browses:- The HTML web site support only new version browsers.

(6) HTML alone is insufficient for creating visually appealing websites.

(7) We have to write a lot of code to create a webpage

WHAT IS HTML DOCUMENT:-

An HTML document is a file containing hypertext markup language. HTML code is based on tags, or hidden keywords, which provide instructions for formatting the document. A tag starts with an angle bracket and the 'less than' sign: '<'. The tag ends with an angle bracket and the 'greater than' sign '>'. Tags tell the processing program, often the web browser, what to do with the text. For example, to make the word 'Hello' bold, you would use the opening bold tag <b> and then the closing bold tag </b>,

like this:

<b>Hello</b>

HTML tags can be of two types.

They are

1.Paired Tags or Container tags : - A tag is said to be a paired tag if the text is placed between a tag and its companion tag. In paired tags, the first tag is referred to as Opening Tag and the second tag is referred to as Closing Tag.

Example : <i> This text is in italic </i> , <body> This is my body </body>

Note: Here <i> is called opening tag. and </i> is called closing tag.

2. Unpaired Tags or Empty tag : An unpaired tag does not have a closing tag. Unpaired tags are also known as Singular or Stand-Alone Tags.

Example : <br>, <hr> etc. This tag does not require any closing tag.

HTML Tags

HTML tags are like keywords which define that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and provide their properties. Each HTML tags have different properties.

An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. We can use as many tags you want as per your code requirement.

· All HTML tags must enclosed within < > these brackets.

· Every tag in HTML perform different tasks.

· If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)

HTML Tag Examples

1. <html> … </html> — The root element:- All web pages start with the html element. It’s also called the root element because it’s at the root of the tree of elements that make up a web page. To create the html element, we write an opening <html> tag followed by a closing </html> tag. Everything else in your web page then goes between these 2 tags:

2. <head> … </head> — The document head:- The head element contains information about the web page, as opposed to the web page content itself. There are many elements that you can put inside the head element, such as:

· title

· link, which you can use to add style sheets and favicons to your page

· meta, for specifying things like character sets, page descriptions, and keywords for search engines

· script, for adding JavaScript code to the page

3. <title> … </title> — The page title:- The title element contains the title of the page. The title is displayed in the browser’s title bar (the bar at the top of the browser window), as well as in bookmarks, search engine results, and many other places.

The title should describe the page’s content briefly and accurately. Try to give each page of your site its own unique title.

Here’s an example: <title>Web site of MRS KMPM Vocational College </title>

4. <body> … </body> — The page’s content:- The body element appears after the head element in the page. It should contain all the content of your web page: text, images, and so on. All web pages have 1 single body element, with the exception of frameset pages, which contain frame elements instead.

Example : The general format of the body element: <body> (all page content goes here) </body>

5. <h1> … </h1> — A section heading:- Headings let you break up your page content into readable large in size . They work much like headings and subheadings in a book or a report.

HTML actually supports 6 heading elements: h1, h2, h3, h4, h5, and h6. h1 is for the most important headings, h2 is for less important subheadings, and so on. Typically you won’t need to use more than h1, h2 and h3, unless your page is very long and complex.

Example of an h1 heading element: <h1>The Adventures of My Cat Lucky</h1>

6. <p> … </p> — A paragraph:- The p element lets you create paragraphs of text. Most browsers display paragraphs with a vertical gap between each paragraph, nicely breaking up the text.

While you can create “paragraphs” of text just by using <br> tags to insert blank lines between large text, it’s better to use p elements instead.

Example of a paragraph: <p>My cat Lucky has a lot of adventures. Yesterday she caught a mouse, and this morning she caught two!</p>

7. <a> … </a> — A link:- One of the most important elements in a web page, the a element lets you create links to other content. The content can be either on your own site or on another site.

To create a link, you wrap <a> and </a> tags around the content you want to use for the link, and supply the URL to link to in the <a> tag’s href attribute.

Example : <a href="http://www.example.com/">Visit this great website!</a>

8. <img> — An image:- The img element lets you insert images into your web pages. To insert an image, you first upload the image to your web server, then use an <img> tag to reference the uploaded image filename.

Example: <img src="myphoto.jpg" alt="My Photo">

The alt attribute is required for all img tags. It’s used by browsers that don’t display images to give alternative text to the visitor.

9. <div> … </div> — :- A block-level container for content

The div element is a generic container that you can use to add more structure to your page content. For example, you might group several paragraphs or headings that serve a similar purpose together inside a div element. Typically, div elements are used for things like:

· Page headers and footers

· Columns of content and sidebars

· Highlighted boxes within the text flow

· Areas of the page with a specific purpose, such as ad spots

· Image galleries

Example that uses a div to contain the content for a sidebar in the page:

<h1>Sidebar Heading</h1>

<p>Sidebar text</p>

<p>More sidebar text</p>

</div>

10. <span> … </span> — :- An inline container for content :- The span element is similar to div in that it’s used to add structure to your content. The difference is that div is a block-level element, while span is an inline element:

· Block-level elements, such as div, h1, and p, are elements that are designed to hold relatively large or stand-alone blocks of content, such as paragraphs of text. A block-level element always starts on a new line.

· Inline elements, such as span, a, and img, are designed to hold smaller pieces of content — such as a few words or a sentence — within a larger block of content. Adding an inline element doesn’t cause a new line to be created. Block-level elements can contain inline elements, but inline elements can’t contain block-level elements.

<p>I have chosen only

<span style="color: red;">red</span>,

<span style="color: blue;">blue</span>, and

<span style="color: green;">green</span> colors for my painting.

</p>

DIFFERENCE BETWEEN HTML TAGS AND HTML ELEMENTS

An HTML element is the collection of start tag, its attributes, an end tag and everything in between.

On the other hand an HTML tag either opening or closing is used to mark the start or end of an element. However, in common usage the terms HTML element and HTML tag are interchangeable i.e. a tag is an element is a tag.

<p> class = “abc” > This is a paragraph.</p>

HEADER SECTION IN HTML:-

In HTML, the <header> element is used to define the header section of a webpage or a section within the webpage. It normally contains introductory content, navigational links, or metadata about the surrounding section. The header is frequently found at the top of a page or a specific section.

Example of header section (What contents are to be used in header section)

(1) Common contents of a <header>:,

(2) Logo or website name

(3) Navigation menus or links

(4) Search bars

(5) Heading or title

(6) Introductory text or tagline

<h1>Welcome to My Website</h1>

<nav>

<ul>

<li><a href="about.html">About</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</nav>

</header>

In the above example, the <header> contains a heading and a navigation menu.

WHAT IS HEADINGS:-

HTML headings are used to define the content hierarchy and structure of a webpage. They range from <h1> ( Main Heading (Largest) ) to <h6> ( Smaller Headings), with <h1> being the most important heading and <h6> the least important.

The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest. By default, all heading elements create a block-level box in the layout, starting on a new line and taking up the full width available in their containing block.

EXAMPLE

<h1>1ST Heading </h1>

<h2> 2ND Heading </h2>

<h3>3RD Heading </h3>

<h4>4TH Heading </h4>

<h5>5TH Heading </h5>

<h6>6TH Heading</h6>

WHAT IS A BODY TAG IN HTML?

The <body> tag in HTML is a fundamental element that represents the content section of an HTML document. It is where all the visible contents of a web page, such as text, images, links, tables, lists, and other elements, are placed. The <body> tag follows the <head> tag and is a direct child of the <html> tag in an HTML document structure.

Syntax of body Tag in HTML

Example

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>This is a paragraph in the body of the HTML document.</p>

</body>

</html>

WHAT IS LINK DOCUMENTS USING ANCHOR TAG:-

Anchor tags in HTML code are HTML elements used to create hyperlinks in webpages. They allow you to link to another webpage, a specific section of a page, an email address, a file, or any other URL. They are also known as anchor elements or <a> tags (a STAND FOR ANCHOR TAG).

The "href" ( FULL FORM hypertext reference) attribute is the most important attribute of the HTML a tag and which links to destination page or URL.

EXAMPLE

<!- - <a href=" ajaykrpathak.edu ">Click for Second File</a> THIS FILE SHOULD BE ONLY HTML FILE ajaykrpathak.edu - - >

Go to AJAY KUMAR PATHAK SITE </a>

PROGRAM

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>Click on <a href=" https://www.ajaykrpathak.edu/" target="_blank"> this-link </a>to go on home page of AJAY KUMAR PATHAK WEB SITE.</p>

</body>

</html>

WHAT ARE FORMATTING CHARACTERS:-

Text formatting in HTML refers to the way text is displayed on a web page. It is the process of applying various styles, colors, fonts, sizes, and other visual enhancements to text content within an HTML document. HTML offers a range of tags that can be used to format text, including:

HTML Formatting Elements are:-

<b> - Bold text

<strong> - Important text

<i> - Italic text

<em> - Emphasized text (EXAMPLE:- <p>This text is normal.</p> OUTPUT This text is normal. , <p><em>This text is emphasized.</em></p> OUTPUT This text is emphasized)

<mark> - Marked text (Text that should be marked or highlighted )

<small> - Smaller text

<del> - Deleted text (Defines text that has been deleted from a document. Browsers will usually strike a line through deleted text)

<ins> - Inserted text (Element defines a text that has been inserted into a document. Browsers will usually underline inserted text)

EXAMPLE <p>My favorite color is RED <del>blue</del> <ins>red</ins>.</p>

<sub> - Subscript text

<sup> - Superscript text

EXAMPLE PROGRAM

<!DOCTYPE html>

<html>

<body>

<p>This text is normal.</p>

<p><strong>THIS TEXT IS IMPORTANT!</strong></p>

</body>

</html>

WHAT IS FONT TAG:-

The font tag in HTML plays an important role in creating effective, readable, and attractive web pages, font tag in HTML was used in HTML 4 but it got deprecated (This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time ) in HTML5. Font tag in HTML is used to set the font size, color, and face of the text in an HTML document. The font tag in HTML is used inside the <body> tag.

EXAMPLE :-

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>Example of font tag</h2>

<p>This is normal text without any font styling</p>

<p>

<font color="blue">Text with normal size and default face</font>

</p>

<p>

<font size="5" color="green">Text with Increased size and default face</font>

</p>

<p>

<font color="red" face="cursive">Text with Changed face</font>

</p>

</body>

</html>

HOW TO INSERT IMAGES AND PICTURES OR WHAT IS IMAGES AND PICTURES:-

The HTML <picture> element allows you to display different pictures for different devices or screen sizes. HTML Images provides a visual content for web pages, enhancing user experiences and conveying information. They can be photographs, graphics, icons, or illustrations. To insert an image on HTML document we can use <img> tag. Without a src (full form source ) attribute, an img element has no image to load. The <img> tag embeds (inserts) images in web pages, requiring only attributes without a closing tag.

Syntax :-

Note: - src= Specifies the path to the image file.

alt=Provides alternate text for the image, useful for accessibility and when the image cannot be displayed.

1ST Program:-

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>The picture element</h1>

<p>Resize the browser window to load different images</p>

</picture>

</body>

</html>

EXPLANATION OF 1ST PROGRAM:-

The <picture> tag gives web developers more flexibility in specifying image resources. The most common use of the <picture> element will be for art direction in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport.

The <picture> element contains two tags: one or more <source> tags and one <img> tag. The browser will look for the first <source> element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute). The <img> element is required as the last child of the <picture> element, as a fallback option if none of the source tags matches.

2ND PROGRAM

<!DOCTYPE html>

<html>

<head>

<title>Welcome To PICTURE OR IMAGE FILE</title>

</head>

<body>

<h2> BY DR. AJAY KUMAR PATHAK PICTURE OR IMAGE FILE</h2>

////// FULL FORM OF PORTABLE NETWORK GRAPHICS //////

</body>

</html>

HTML IMG TAG ATTRIBUTES:- Attributes in HTML are special properties that are added inside an HTML tag to provide additional information about an element or to control the element’s behavior and appearance. In simple words, attributes modify or control how an HTML element works or looks on a webpage.

Attributes are always written inside the opening tag of an HTML element.

Attribute	Description
src	Specifies the path to the image file.
alt	Provides alternate text for the image, useful for accessibility and when the image cannot be displayed.
crossorigin	Allows importing images from third-party sites with cross-origin access, typically used with canvas.
height	Specifies the height of the image.
width	Specifies the width of the image.
ismap	Specifies an image as a server-side image map.
loading	Specifies whether the browser should defer image loading or load it immediately.
longdesc	Specifies a URL to a detailed description of the image.
referrerpolicy	Specifies which referrer information to use when fetching the image.
sizes	Specifies image sizes for different page layouts.
srcset	Specifies a list of image files to use in different situations, allowing for responsive images.
usemap	Specifies an image as a client-side image map.

WHAT IS LISTING :-

A list refers to any information displayed in a logical or linear form. It is a series of items written together in a meaningful group or sequence and marked by bullet points, numbers, etc.

There are three types of lists in HTML

1..Unordered list or Bulleted list (ul)

2..Ordered list or Numbered list (ol)

3..Description list or Definition list (dl)

1.. HTML Unordered List or Bulleted List:- In HTML unordered list, the list items have no specific order or sequence. An unordered list is also called a Bulleted list, as the items are marked with bullets. It begins with the <ul> tag and and closes with a </ul> tag. The list items begin with the <li> tag and end with </li> tag.

EXAMPLE:-

<!DOCTYPE html>

<html>

<head>

<title>HTML Unordered List</title>

</head>

<body>

<h2>List of Fruits</h2>

<ul>

<li>Apple</li>

<li>Mango</li>

<li>Banana</li>

<li>Grapes</li>

<li>Orange</li>

</ul>

</body>

</html>

2.. Ordered List or Numbered List (ol): -In HTML, all the list items in an ordered list are marked with numbers by default instead of bullets. An HTML ordered list starts with the <ol> tag and ends with the </ol> tag. The list items start with the <li> tag and end with </li> tag.

<!DOCTYPE html>

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body>

<h2>List of Fruits</h2>

<ol>

<li>Apple</li>

<li>Mango</li>

<li>Banana</li>

<li>Grapes</li>

<li>Orange</li>

</ol>

</body>

</html>

3.. HTML Description List or Definition List:- In an HTML Description list or Definition List, the list items are listed like a dictionary or encyclopedia. Each item in the description list has a description. You can use a description list to display items like a glossary. You will need the following HTML tags to create a description list:

· <dl> (Definition list) tag – Start tag of the definition list

· <dt> (Definition Term) tag – It specifies a term (name)

· <dd> tag (Definition Description) – Specifies the term definition

· </dl> tag (Definition list) – Closing tag of the definition list

<!DOCTYPE html>

<html>

<head>

<title>HTML Description List</title>

</head>

<body>

<dl>

<dt><b>Apple</b></dt>

<dd>A red colored fruit</dd>

<dt><b>Honda</b></dt>

<dd>A brand of a car</dd>

<dt><b>Spinach</b></dt>

<dd>A green leafy vegetable</dd>

</dl>

</body>

</html>

4.. HTML Nested Lists:- An HTML Nested list refers to a list within another list. We can create a nested ordered list, a nested unordered list, or a nested ordered list inside an unordered list.

Examples of HTML lists within lists:

Example of an HTML Nested Ordered List

<!DOCTYPE html>

<html>

<head>

<title>HTML Nested Ordered List</title>

</head>

<body>

<ol>

<li>Banana</li>

<li> Apple

<ol>

<li>Green Apple</li>

<li>Red Apple</li>

</ol>

</li>

<li>Pineapple</li>

<li>Orange</li>

</ol>

</body>

</html>

OUTPUT

WHAT IS TABLES IN HTML:-

A table in HTML consists of table cells inside rows and columns. A table in HTML refers to the arrangement of data in rows and columns. HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row. Using tables, we can display data, such as products and their prices; employees, their date of joining and salaries etc.

HTML Table Syntax-

The basic syntax of an HTML table consists of several tags that define the structure and content of the table. Here are the main tags used in creating an HTML table:

· <table>: This tag defines the beginning and end of the table.

· <tr> (table row): This tag defines a row in the table.

· <th> (table header): This tag defines a header cell in a table, which typically appears as bold and centered.

· <td> (table data): This tag defines a standard cell in a table.

Some HTML Table Tags

Tag	Description
<table>	Defines a table
<th>	Defines a header cell in a table
<tr>	Defines a row in a table
<td>	Defines a cell in a table
<caption>	Defines a table caption
<colgroup>	Specifies a group of one or more columns in a table for formatting
<col>	Specifies column properties for each column within a <colgroup> element
<thead>	Groups the header content in a table
<tbody>	Groups the body content in a table
<tfoot>	Groups the footer content in a table

NOTE :- HTML tables can be styled through CSS. You can apply styles to the table itself, table rows, cells, or specific elements within cells. Use CSS properties like "border", "background-color", "font-family", and "text-align" to control the table's appearance. Apply styles using inline CSS, embedded stylesheets, or external CSS files for consistent formatting.

EXAMPLE :- Basic Data Table of the Financial Report Table

<table>

<caption>Income Statement (2024) BY DR. AJAY KUMAR PATHAK </caption>

<tr>

<th>Category</th>

<th>Revenue (RS)</th>

<th>Expenses (RS)</th>

</tr>

<tr>

<td>Sales</td>

</tr>

<tr>

<td>Operating Income</td>

</tr>

</table>

PROGRAM 2 (HTML CODE WITH CSS CODE)

<!DOCTYPE html>

<html>

<head>

<style>

table {

width: 100%;

border-collapse: collapse;

margin-bottom: 20px;

}

th, td {

border: 1px solid #ddd;

padding: 8px;

text-align: left;

}

th {

background-color: #f2f2f2;

}

</style>

</head>

<body>

<h2>HTML Table</h2>

<p>This table is 3*3 cells including table header.

<table>

<tr>

<th>Header 1</th>

<th>Header 2</th>

<th>Header 3</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

OUTPUT

ADDING BORDER TO AN HTML TABLE:-

By default, HTM tables do not have a border. We can set the border using the CSS border property. Let’s look at an example to add a 1-pixel border to the HTML table.

<!DOCTYPE html>

<html>

<head>

<style>

table,

th,

td {

border: 1px solid black;

}

</style>

</head>

<body>

<tr>

<th>Salary</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>Chris</td>

</tr>

</table>

</body>

</html>

OUTPUT

ADDING PADDING TO A TABLE:- To add more space to the table cells, we can use the CSS padding property.

Here is the syntax to add a 1-pixel border to the table and 20-pixels of padding.

table,

th,

td {

border: 1px solid black;

border-collapse: collapse;

}

th,

td {

padding: 20px;

}

</pre class="html5" style="font-family:monospace">

EXAMPLE:

<!DOCTYPE html>

<html>

<head>

<style>

table,

th,

td {

border: 1px solid black;

border-collapse: collapse;

}

th,

td {

padding: 20px;

}

</style>

</head>

<body>

<tr>

<th>Salary</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>Chris</td>

</tr>

</table>

</body>

</html>

OUTPUT

HTML NESTED TABLES:- Nested HTML tables refer to create tables inside a table. You can create tables inside a table by using the <table> tab inside any <td> tag, it creates another table in the main table's cell.

Example :- In the following example, we are creating nested tables:

<!DOCTYPE html>

<html>

<head>

<title>HTML Nested Tables</title>

</head>

<body>

<tr>

<td> First Column of Outer Table </td>

<td>

<tr>

<td> First row of Inner Table </td>

</tr>

<tr>

<td> Second row of Inner Table </td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<tr>

<td> First row of Inner Table </td>

</tr>

<tr>

<td> Second row of Inner Table </td>

</tr>

</table>

</td>

<td> First Column of Outer Table </td>

</tr>

</table>

</body>

</html>

OUTPUT

COLSPAN AND ROWSPAN:- Colspan;- The colspan attribute merges cells across multiple columns.

For example,

<table>

<tr>

<th>Quantity</th>

</tr>

<tr>

<td>Apple</td>

</tr>

<tr>

<td>Mango</td>

</tr>

<tr>

<td>Orange</td>

</tr>

<tr>

<td colspan="2">Total</td>

</tr>

</table>

OUTPUT

Rowspan:- The rowspan attribute merges cells across multiple rows.

For example,

<table>

<tr>

<th>Subject</th>

<th>Marks</th>

</tr>

<tr>

<td rowspan="3">Mark Smith</td>

<td>English</td>

</tr>

<tr>

<td>Maths</td>

</tr>

<tr>

<td>Science</td>

</tr>

</table>

OUPUT

ATTRIBUTES OF A TABLE IN HTML:-

Table attributes are special properties added inside the <table> tag (or other table tags) to control the table’s layout, size, spacing, border, color, and alignment.

ttributes and tags	Illustrations
Define Table	<table>..</table>
Add caption	<caption>..</caption>
Table row	<tr>..</tr>
Table header	<th>..</th>
Table Data in a cell	<td>..</td>
Cell spacing	<table cellspacing="">...</table>
Cell padding	<table cellpadding="">...</table>
Table border	<table border="">...</table>
Alignment	<table align=center/left/right>...</table>
colspan in table	<table colspan="">...</table>
rowspan in table	<table rowspan="">...</table>
Cell color	<table bgcolor="#$$$$$$">...</table>
No linebreaks	<table nowrap>...</table>

FORMS IN HTML:- An HTML form is a container used to collect user input through various input fields such as text boxes, radio buttons, checkboxes, dropdown lists, and buttons, and send that information to a server for processing.

An HTML Form is a section of a web page that is used to collect information or data from the user. The data entered by the user is then sent to a server for processing.

In simple words, a form allows communication between the user and the website. The user enters data in the form fields, and after clicking the submit button, the data is sent to the server.

HTML forms are widely used in websites for many purposes such as:

· User registration

· Login authentication

· Contact forms

· Feedback forms

· Online surveys

· Online shopping orders

All forms in HTML are created using the <form> tag.

EXAMPLE:-

<!DOCTYPE html>

<head>

content="width=device-width, initial-scale=1.0">

</head>

<body>

<h2>HTML Forms</h2>

<form>

<label for="username">Username:</label><br>

<label for="password">Password:</label><br>

</form>

</body>

TYPES OF FORM INPUT IN HTML OR HTML FORM CONTROLS

(WITH EXAMPLES):-

There are different types of form controls that you can use to collect data using HTML form −

(1) Text Input Controls

(2) Checkboxes Controls

(3) Radio Box Controls

(4) Select Box Controls

(5) File Select boxes

(6) Hidden Controls

(7) Clickable Buttons

(8) Submit and Reset Button

(9)Text Input Controls

(1) Text Input Controls EXPLANATION :- There are three types of text input used on forms −

(A) Single-line text input controls − This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag.

(B) Password input controls − This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTMl <input> tag.

( C) Multi-line text input controls − This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.

ATTRIBUTES of input tag

Following is the list of attributes for <input> tag for creating text field.

Sr.No	Attribute & Description
1	Type : Indicates the type of input control and for text input control it will be set to text.
2	Name :Used to give a name to the control which is sent to the server to be recognized and get the value.
3	Value : This can be used to provide an initial value inside the control.
4	Size : Allows to specify the width of the text-input control in terms of characters.
5	Maxlength :Allows to specify the maximum number of characters a user can enter into the text box.

Example

HERE IS A BASIC EXAMPLE OF A SINGLE-LINE TEXT INPUT USED TO TAKE FIRST NAME AND LAST NAME

<!DOCTYPE html>

<html>

<head>

<title>Text Input Control</title>

</head>

<body>

<form >

First name: <input type = "text" name = "first_name" />

<br>

Last name: <input type = "text" name = "last_name" />

</form>

</body>

</html>

OUTPUT

ATTRIBUTES OF INPUT TAG

Following is the list of attributes for <input> tag for creating text field.

Sr.No	Attribute & Description
1	Type : Indicates the type of input control and for text input control it will be set to text.
2	Name :Used to give a name to the control which is sent to the server to be recognized and get the value.
3	Value :This can be used to provide an initial value inside the control.
4	Size :Allows to specify the width of the text-input control in terms of characters.
5	Maxlength:Allows to specify the maximum number of characters a user can enter into the text box.

(2) PASSWORD INPUT CONTROLS:- This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTML <input>tag but type attribute is set to password.

Example

Here is a basic example of a single-line password input used to take user password −

<!DOCTYPE html>

<html>

<head>

<title>Password Input Control</title>

</head>

<body>

<form >

User ID : <input type = "text" name = "user_id" />

<br>

Password: <input type = "password" name = "password" />

</form>

</body>

</html>

ATTRIBUTES OF THE PASSWORD INPUT CONTROLS:-

Following is the list of attributes for <input> tag for creating password field.

Sr.No	Attribute & Description
1	Type: Indicates the type of input control and for password input control it will be set to password.
2	Name: Used to give a name to the control which is sent to the server to be recognized and get the value.
3	Value: This can be used to provide an initial value inside the control.
4	Size: Allows to specify the width of the text-input control in terms of characters.
5	Maxlength:Allows to specify the maximum number of characters a user can enter into the text box.

(3) MULTIPLE-LINE TEXT INPUT CONTROLS:- This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.

Example

Here is a basic example of a multi-line text input used to take item description −

<!DOCTYPE html>

<html>

<head>

<title>Multiple-Line Input Control</title>

</head>

<body>

<form>

Description : <br />

Enter description here...

</textarea>

</form>

</body>

</html>

ATTRIBUTES OF THE MULTIPLE-LINE TEXT INPUT CONTROLS

Following is the list of attributes for <textarea> tag.

(4) CHECKBOX CONTROL:- Checkboxes are used when more than one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to checkbox..

Example

Here is an example HTML code for a form with two checkboxes −

<!DOCTYPE html>

<html>

<head>

<title>Checkbox Control</title>

</head>

<body>

<form>

<input type = "checkbox" name = "maths" value = "on"> Maths

<input type = "checkbox" name = "physics" value = "on"> Physics

</form>

</body>

</html>

ATTRIBUTES OF THE CHECKBOX CONTROL

Following is the list of attributes for <checkbox> tag.

Sr.No	Attribute & Description
1	Type : Indicates the type of input control and for checkbox input control it will be set to checkbox..
2	Name : Used to give a name to the control which is sent to the server to be recognized and get the value.
3	Value :The value that will be used if the checkbox is selected.
4	Checked : Set to checked if you want to select it by default.

(5) RADIO BUTTON CONTROL:- Radio buttons are used when out of many options, just one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to radio.

Example

Here is example HTML code for a form with two radio buttons −

<!DOCTYPE html>

<html>

<head>

<title>Radio Box Control</title>

</head>

<body>

<form>

<input type = "radio" name = "subject" value = "maths"> Maths

<input type = "radio" name = "subject" value = "physics"> Physics

</form>

</body>

</html>

ATTRIBUTES OF THE RADIO BUTTON CONTROL

Following is the list of attributes for radio button.

Sr.No	Attribute & Description
1	Type :Indicates the type of input control and for checkbox input control it will be set to radio.
2	Name :Used to give a name to the control which is sent to the server to be recognized and get the value.
3	Value :The value that will be used if the radio box is selected.
4	Checked :Set to checked if you want to select it by default.

(6) SELECT BOX CONTROL:- A select box, also called drop down box which provides option to list down various options in the form of drop down list, from where a user can select one or more options.

Here is example HTML code for a form with one drop down box

<!DOCTYPE html>

<html>

<head>

<title>Select Box Control</title>

</head>

<body>

<form>

<option value = "Maths" selected>Maths</option>

<option value = "Physics">Physics</option>

</select>

</form>

</body>

</html>

ATTRIBUTES OF THE SELECT BOX CONTROL

Following is the list of important attributes of <select> tag −

Sr.No	Attribute & Description
1	Name : Used to give a name to the control which is sent to the server to be recognized and get the value.
2	Size :This can be used to present a scrolling list box.
3	Multiple :If set to "multiple" then allows a user to select multiple items from the menu.

(7) FILE UPLOAD BOX:- If you want to allow a user to upload a file to your web site, you will need to use a file upload box, also known as a file select box. This is also created using the <input> element but type attribute is set to file.

Here is example HTML code for a form with one file upload box −

<!DOCTYPE html>

<html>

<head>

<title>File Upload Box</title>

</head>

<body>

<form>

</form>

</body>

</html>

ATTRIBUTES OF THE FILE UPLOAD BOX

Following is the list of important attributes of file upload box –

Sr.No	Attribute & Description
1	Name : Used to give a name to the control which is sent to the server to be recognized and get the value.
2	Accept : Specifies the types of files that the server accepts.

(8) BUTTON CONTROLS

There are various ways in HTML to create clickable buttons. You can also create a clickable button using <input>tag by setting its type attribute to button. The type attribute can take the following values –

HERE IS EXAMPLE HTML CODE FOR A FORM WITH THREE TYPES OF BUTTONS <!DOCTYPE html>

<html>

<head>

<title>File Upload Box</title>

</head>

<body>

<form>

</form>

</body>

</html>

ATTRIBUTES OF THE BUTTON CONTROLS:-

Sr.No	Type & Description
1	Submit : This creates a button that automatically submits a form.
2	Reset :This creates a button that automatically resets form controls to their initial values.
3	Button :This creates a button that is used to trigger a client-side script when the user clicks that button.
4	Image :This creates a clickable button but we can use an image as background of the button.

(9) HIDDEN FORM CONTROLS:- Hidden form controls are used to hide data inside the page which later on can be pushed to the server. This control hides inside the code and does not appear on the actual page. For example, following hidden form is being used to keep current page number. When a user will click next page then the value of hidden control will be sent to the web server and there it will decide which page will be displayed next based on the passed current page.

HERE IS EXAMPLE HTML CODE TO SHOW THE USAGE OF HIDDEN CONTROL

<!DOCTYPE html>

<html>

<head>

<title>File Upload Box</title>

</head>

<body>

<form>

</form>

</body>

</html>

METHOD ATTRIBUTE IN HTML:-

Specifies how the data will be transmitted.

Two types:-

(1) GET Method:- Data is sent through the URL, Used for small data

Example:

Example URL after submission:

example.com/login?name=Ajay

(2) POST Method:- Data is sent securely, Used for large or sensitive data

Example:

COMPLETE HTML FORM EXAMPLE:-

<html>

<body>

<h2>Student Registration Form</h2>

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

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

Password: <input type="password"><br><br>

Gender:

<input type="radio" name="gender"> Male

<input type="radio" name="gender"> Female<br><br>

Hobbies:

<input type="checkbox"> Reading

<input type="checkbox"> Sports

<input type="checkbox"> Music<br><br>

Country:

<option>India</option>

<option>Canada</option>

</select>

Address:<br>

</form>

</body>

</html>

FORM ELEMENTS:-

ELEMENTS	DESCRIPTIONS
<label>	It defines labels for <form> elements.
<input>	It is used to get input data from various types such as text, password, email, etc by changing its type.
<button>	It defines a clickable button to control other elements or execute a functionality.
<select>	It is used to create a drop-down list.
<textarea>	It is used to get input long text content.
<fieldset>	It is used to draw a box around other form elements and group the related data.
<legend>	It defines a caption for fieldset elements
<datalist>	It is used to specify pre-defined list options for input controls.
<output>	It displays the output of performed calculations.
<option>	It is used to define options in a drop-down list.
<optgroup>	It is used to define group-related options in a drop-down list.

FRAMES:-

HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document independently. A collection of frames in the browser window is known as a frameset. The window is divided into frames in a similar way the tables are organized: into rows and columns.

WHAT IS FRAME : (NOTE:- WHEN WE ARE USING FRAMESET IN HTML SO THERE IN NO NEED TO USE FRAMESET IN THE BODY TAG.)

The HTML frames are used to divide your browser window into multiple sections (part) where each section can load a separate (part) HTML document. A collection of frames in the browser window is known as a frameset. The window is divided into frames in a similar way the tables are organized: into rows and columns.

The word frame refers to a border or a line around anything like image, content, text etc

HTML frames allow authors to present documents in multiple views, which may be independent windows or subwindows. Multiple views offer designers a way to keep certain information visible, while other views are scrolled or replaced.

Example, within the same window, one frame might display a static banner, a second a navigation menu, and a third the main document that can be scrolled through or replaced by navigating in the second frame.

ATTRIBUTES OF FRAMESET TAG:-

(1) cols: The cols attribute is used to create vertical frames in web browser. This attribute is basically used to define the no of columns and its size inside the frameset tag.

The size or width of the column is set in the frameset in the following ways:

•Use absolute value in pixel

Example:

•Use percentage value

Example:

(2) rows: The rows attribute is used to create horizontal frames in web browser. This attribute is used to define no of rows and its size inside the frameset tag.

The size of rows or height of each row use the following ways:

•Use absolute value in pixel

Example:

•Use percentage value

Example:

Example program of frame and frame sets

HERE IS A SIMPLE FRAME DOCUMENT:

Note: If you are using the more than one html files in the frameset , so all the html files must be saved in the one (same) folder like these files are html, 1. contents_of_frame2.gif , 2. contents_of_frame3.html, etc.

BEST EXAMPLE OF FRAMESETS AND FRAME

CREATE VERTICAL FRAMES:

MAIN HTML PROGRAM

<!DOCTYPE html>

<html>

<head>

<title>Frame tag</title>

</head>

</frameset>

</html>

1. Frame1.html PROGRAM

<!DOCTYPE html>

<html>

<head>

<style>

div{

background-color: #7fffd4;

height: 500px;

}

</style>

</head>

<body>

<div>

<h2>This is first frame</h2>

</div>

</body>

</html>

2. Frame2.html PROGRAM

<!DOCTYPE html>

<html>

<head>

<style>

div{

background-color: #2f4f4f;

height: 500px;

}

</style>

</head>

<body>

<div>

<h2>This is Second frame</h2>

</div>

</body>

</html>

3. Frame3.html PROGRAM

<!DOCTYPE html>

<html>

<head>

<style>

div{

background-color: #c1ffc1;

height: 500px;

}

</style>

</head>

<body>

<div>

<h2>This is Third frame</h2>

</div>

</body>

</html>

OUTPUT CREATE VERTICAL FRAMES:-

THIS IS 1^ST FRAME

(COLOR WILL ALSO DISPLAY)

THIS IS 2^ND FRAME

(COLOR WILL ALSO DISPLAY)

THIS IS 3^RD FRAME (COLOR WILL ALSO DISPLAY)

EXAMPLE 2:

CREATE HORIZONTAL FRAMES:

MAIN PROGRAM OF HTML

<!DOCTYPE html>

<html>

<head>

<title>Frame tag</title>

</head>

</frameset>

</html>

NOTE: NOW THE ABOVE 1. FRMAE1.HTML, 2, FRAME2.HTML AND 3. FRAME3.HTML CALL HER FOR THE CREATE HORIZONTAL FRAMES)

THIS IS 1^ST FRAME (COLOR WILL ALSO DISPLAY)

THIS IS 2^ND FRAME (COLOR WILL ALSO DISPLAY)

THIS IS 3^RD FRAME(COLOR WILL ALSO DISPLAY)

OTHER TAG-SPECIFIC ATTRIBUTE

Attribute	Value	Description
frameborder	0 1	It specifies whether to display a border around the frame or not, and its default value is 1
longdsec	URL	It specifies a page which contains the long description of the content of the frame.
marginheight	pixels	It specifies the top and bottom margins of the frame.
marginwidth	pixels	It defines the height of the margin between frames.
name	text	It is used to assign the name to the frame.
noresize	noresize	It is used to prevent resizing of the frame by the user it has only two values (1) YES (2). NO. (MEANS IF WE CAN USE NORESIZE TAG THAN THE FRAME CON NOT BE MOVE OR REDUCE THE FRAME OF WINDOWS OR WE CAN ALSO NOT USE THE SCROLLING)
scrolling	yes no auto	It specifies the existence of the scrollbar for overflowing content. (THROUGH THE SCROLLING TAB WE CAN SCROLL OR NOT SCROLL, IT HAS ALSO ONLY TWO VALUES (1) YES (2) NO )
src	URL	It specifies the URL of the document which we want to display in a frame.

V.V.I LINE : WHAT IS NAME or Linking Frames ATTRIBUTE TAG IN HTML

ANS:- HTML <a> name Attribute

Definition and Usage

The <a> name attribute is not supported in HTML5. Use the id attribute instead.

The name attribute specifies the name of an anchor. The name attribute is used to create a bookmark inside a document.

Example

The name attribute specifies the name of an anchor:

<a name="CLICK ON CHAPTER 4 ">Chapter 4</a>

Through the NAME attribute we can link the html file in frame window and the linked files result will displayed in another frame windows

EXAMPLE OF NAME ATTRIBUTE AND HOW TO USE

Frame1.html PROGRAM

<!DOCTYPE html>

<html>

<head><title> I AM USING NAME ATTRIBUTE </TITLE>

</head>

<body>

<h1> I AM USING NAME ATTRIBUTE This is 2ND frame</h1>

<h2><a href = “c:/desktop/frame1.html” target = “ajay” >CLICK ME, AFTER CLICK THE RESULT WILL DISPLAY IN ANOTHER FRAME WINDOW </a></h2>

</body>

</html>

NOW THE MAIN PROGRAM OF HTML

<!DOCTYPE html>

<html>

<head>

<title>Frame tag</title>

</head>

</frameset>

</html>

NOW SAVE BOTH FILE IN THE SAME FOLDER THAN RUN

2ND EXAMPLE OF FRAMESET AND FRAME

<!DOCTYPE HTML >

<HTML>

<HEAD>

<TITLE>A simple frameset document</TITLE>

</HEAD>

<FRAMESET rows="100, 200"> %"> /* ROWS 100 AND 200 % ARE THE SIZE OF THE FRAME WHICH WILL USE IN THE WEB BROWSER */

</FRAMESET>

<P>This frameset document contains:

<UL>

<LI><A href="contents_of_frame1.html">Some neat contents</A>

<LI><A href="contents_of_frame3.html">Some other neat contents</A>

</UL>

</NOFRAMES>

</FRAMESET>

</HTML>

WHAT IS <noframes> tag

The <noframes> HTML element provides content to be presented in browsers that don't support (or have disabled support for) the <frame> element. Although most commonly-used browsers support frames, there are exceptions, including certain special-use browsers including some mobile browsers, as well as text-mode browsers.

<noframes> can be used to present a message explaining that the user's browser doesn't support frames, but ideally should be used to present an alternate form of the site that doesn't use frames but still offers the same or similar functionality.

NOTE: MEANS, IF FRAMESET IS WORKING THAN NOFRAME WILL NOTHING DISPLAY RESULT.

EXAMPLE:

<!DOCTYPE html>

<html>

<head>

<title>Example of HTML Frames using row attribute</title>

</head>

<frame name = "top" src =

"C:/windows/desktop/ajay.png" />

<frame name = "main" src =

" C:/windows/desktop/ajaykumar.png" />

<frame name = "bottom" src =

" C:/windows/desktop/ajaypathak.png" />

<body>The browser you are working does

not support frames.</body>

</noframes>

</frameset>

</html>

WHAT IS COMPLEX FRAMESETS OR NESTED FRAMESET

Any frame within a frameset can contain another frameset. A frame under the frame that is called nested frameset.

For example, shows a layout of two columns, the first with two rows and the second with three rows. This is created by nesting two tags with row specifications within a top-level that specifies the columns.

EXAMPLE NO 1 OF NESTED FRAMESET

QUESTION (1)

<html>

<head>

<title>TAG index</title>

</head>

<frameset cols="200,*"> : Divided into vertical frames

<frame src="example1.html"> : example1.html is displayed in the left frame

<frameset rows="100,*"> : Divided into horizontal frames

<frame src="example2.html"> : example2.html is displayed in the right top frame

<frame src="example3.html"> : example3.html is displayed in the right bottom frame

</frameset> : End of horizontal frames

<body>

<p>Alternate content</p>

</body>

</noframes>

</frameset> : End of vertical frames

</html>

OUTPUT OF NESTED FRAMESET

NESTED FRAMESET

QUESTION EXAMPLE NO 2 OF NESTED FRAMESET

</frameset>

</frameset>

OUTPUT

NESTED FRAMESET	NESTED FRAMESET
	NESTED FRAMESET
NESTED FRAMESET
	NESTED FRAMESET

WHAT IS INLINE FRAMES OR FLOATING FRAMES :-

NOTE:- Netscape navigator, version 4 or older does not support iframes. If the browser doesn't support iframe then it won't be visible.

INLINE FRAME IS ALSO CALLED FLOATING FRAME OR <iframe>, WHICH ARE IDENTIFIED WITH THE<iframe> tag.

An Inline Frame, commonly referred to as an iframe, is an HTML element used to embed another web page or document within the current web page. It allows you to display content from one web page within a designated area of another web page. This is often used for various purposes, such as including external content like maps, videos, advertisements, or widgets within a web page.

Attributes of <iFrame> tag :

1 .name: used to set a name for the iframe.

2. src: Specifies the url of the document to be loaded into the iframe.

3 Width: used to specify the width of the iframe.

4. Height: used to specify the height of the iframe.

5. Frameborder: used to specify the whether to have a border for the iframe or not. This attribute possibly takes two values. i.e, 1 for on and 0 for off.

6. Scrolling: used to specify whether the iframe should have scrolling capability or not. This attribute possibly takes two values i.e, 1 for on and 0 for off.

7. vspace: used to leave gaps on the top and bottom of the iframe. This attribute is similar to cellspacing attribute of a table tag.

8. hspace: used to leave gaps on the sides of the iframe. This attribute is similar to cellpadding attribute of a table tag.

9. marginwidth: used to specify the number of pixels to be left as the left/right margins.

10. marginheight: used to specify the number of pixels to be left as the top/bottom margins.

(SUPPOSE SOME TIME I AM LOOKING A VIDEO CLIP ON THE WEB SITE OR YOUTUBE VIDEO THAT IS DONE BY <IFRAME>)

Property	Value	Explanation
float	left	the iframe floats to the left(the text wraps to the right of the iframe)
	right	the iframe floats to the right(the text wraps to the left of the iframe)
	none	the iframe doesn't float (default)

HERE'S AN EXAMPLE OF HOW TO USE AN iframe in HTML:

1. EXAMPLE(OK)

<html>

<head>

<title>Inline Frame Example</title>

</head>

<body>

<iframeheight="300" width=”300” src=”c:/windows/desktop/resume.pdf</iframe>

</body>

</html>

2. EXAMPLE

<!DOCTYPE html>

<html>

<head>

<title>Inline Frame Example</title>

</head>

<body>

<h1>Embedded Web Page</h1>

<p>Below is an example of an inline frame:</p>

<iframesrc="https://www.example.com" width="500" height="300" frameborder="0"></iframe>

<p>This is some content below the iframe.</p>

</body>

</html>

ADVANTAGES OF<iframe>or Floating frames

floating frames? Floating frames are much easier to code than a regular frameset document, since they work much like an <IMG> tag. They can give easy access to the contents of another web site, without interfering with the flow of text.

DISADVANTAGES OF <iframe>Floating frames:-

of floating frames? As of this writing, floating frames are only supported by Microsoft Internet Explorer, which greatly limits their usefulness. However, you can give alternate text to appear in browsers that don't support floating frames.

CASCADING STYLE SHEETS :-

CSS, is a simply designed language to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page. It describes how a webpage should look: it prescribes colors, fonts, spacing, and much more. CSS lets developers and designers define how it behaves, including how elements are positioned in the browser.

Whilehtml uses tags, css uses rulesets.CSS is easy to learn and understand, but it provides powerful control over the presentation of an HTML document.

Advantages of CSS

1. CSS saves time:- You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want.

2. Pages load faster:- If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times.

3. Easy maintenance :- To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.

4. Superior styles to HTML:- CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.

5. Multiple Device Compatibility:- Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing.

6. Global web standards:- Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers.

DISADVANTAGES OF CSS:-

1. Confusion due to many CSS levels:- Beginners are more vulnerable (weak) to this issue. They might get confused while opting to learn CSS as there are many levels of CSS such as CSS2, CSS3, etc.

2. Cross-Browser Issues:- Different browsers work differently. So, you have to check that changes implemented in the website via CSS codes are reflected properly among all browsers.

3. Security Issues:- Security is important in today’s world driven by technology and data. One of the major disadvantages of CSS is that it has limited security.

4. Extra Work for Developers:- Design services are required to consider and test all CSS codes across different browsers for compatibility. Due to developers testing compatibility for different browsers, their workload increases.

DIFFERENT WAYS TO USE CSS OR THE DIFFERENT STYLES OF CSS OR TYPES OF CSS (CASCADING STYLE SHEET)

There are three different ways of using CSS for a website.

(1) External CSS (2) Internal CSS (3) Inline CSS

(1) External CSS :- External style sheets are saved as a CSS file (.css) and can be used to determine the appearance of an entire website through one file (rather than adding individual instances of CSS code to every HTML element you want to adjust). To use this type of style sheet, your .html files need to include a header section that links to the external style sheet and looks something like this:

An external style sheet is ideal or useful when the same style is applied to many pages. With an external style sheet, we can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

e,g <link> tag

The <link> tag defines the relationship between a html document and an external resource. The <link> tag is mostly used to link style sheets file to html pages.

SYNTAX:

<html>

<head>

</head>

</html>

An external style sheet can be written in any text editor like notepad, edit plus etc. The file should not contain any html tags. Your style sheet should be saved with a .css extension.

Example of a style sheet file is :

<style>

{

color:red;

}

{

margin-left:20px;

color:yellow;

}

body

{

background-color:#000;

}

</style>

Example of External CSS

First we write html page and save it with .html extension.

Example

<html>

<head>

<h1>This is heading</h1>

<p>This is paragraph</p>

</head>

</html>

Again we write a css page and save it with .css extension. In the above code c:\windows\dektop\ajay.css is css file name.

Below is our css code.

Example

<style>

{

color:red;

}

{

margin-left:20px;

color:yellow;

}

body

{

background-color:#000;

}

</style>

RESULT/ OUTPUT

This is heading

This is paragraph

EXPLANATION WITH FIGURE

Internal Style Sheet :- An Internal style sheet should be used when a single document has a unique style (like same color and font for all paragraph). we define internal styles in the head section of an Html page, by using the <style> tag, like below:

Example

<html>

<head>

<style>

{

color:cyan;

}

{

color:red;

margin-left:20px;

}

body

{

background:green;

}

</style>

</head>

<body>

<h1>This is h1 Heading</h1>

<p>This is paragraph</p>

</body>

</html>

RESULT / OUTPUT

This is h1 Heading

This is paragraph

Internal css is useful in case of if we want to all paragraph of our html documents have same size and color that means all have same properties. And if we want all h1 header have same color on our page then this is useful.

Suppose we are use 5 times <h1> tag in our Html page then it is better to declare internal css for all <h1> tag once. If here we use inline css then we need to apply 5 times css on this <h1> tag.

EXAMPLE OF INTERNAL CSS

Example

<html>

<head>

<style>

{

color:red;

}

{

margin-left:20px;

color:yellow;

}

body

{

background-color:#000;

}

</style>

</head>

<body>

<h1>This is internal css</h1>

<p>Internal css is very simple and easy</p>

<p>My css concept is strong</p>

<h1>Css is easy to learn</h1>

<p>Css is simple and easy to learn</p>

</body>

</html>

(3) Inline Styles Sheet :- Inline CSS is used with any elements of Html where it is used on page. Here we use inline css for paragraph, the example shows how to change the color and the left margin of a paragraph:

Example of inline css for <p> tag

Example

<html>

<body>

<p style="color:red; margin-left:20px">This is paragraph.</p>

</body>

</html>

RESULT /OUTPUT

This is paragraph.

Example of inline css for <h1> tag

Example

<html>

<body>

<h1 style="color:green; font-size:20px">This is h1 Heading.</h1>

</body>

</html>

RESULT /OUTPUT

This is h1 Heading.

For using inline css we need style attribute to set all the properties of Html elements(<p>, <body>, <img>).

Advantage of inline css

Less Loading time

CSS A STYLE RULE SET CONSISTS OF A SELECTOR AND DECLARATION BLOCK.

1. Selector:- A selector in CSS is used to target and select specific HTML elements to apply styles to.

(SELECTOR MEANS A BLOCK OF A FUNCTION WHICH WILL CALLED ANYWHERE).

2. Declaration:- A declaration in CSS is a combination of a property and its corresponding value.

Selector -- h1

Declaration -- {color:blue;font size:12px;}

• The selector points to the HTML element you want to style.

• The declaration block contains one or more declarations separated by semicolons.

• Each declaration includes a CSS property name and a value, separated by a colon.

For example :

• CSS

<style>

selector1{

color : red ;

font-size: 50px;

}

selector2{

color:green;

}

</style>

<body>

<selector1> I am a selector </selector> //HERE I HAVE CALLED TO THE SELECTOR1 //

<selector2> I am h1 for selector <selector2>//HERE I HAVE CALLED TO THE SELECTOR2//

</body>

CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

Here is a more specific example: In the following example all p elements will be centre-aligned, with a blue text colour:

CSS

p {

color: blue;

text-align: center;

}

WHAT ARE STYLE SHEET PROPERTIES?

1. CSS Background : Sets the background of an element.

2. CSS Text :- Sets the indentation to the beginning of text

3. CSS Font

4. CSS Border

5. CSS Outline

6. CSS Margin

7. CSS Padding

8. CSS List

9. CSS Table

WHAT IS EVENTS :- The CSS pointer-events property controls the behavior of HTML elements in response to mouse or touch events. It determines how elements interact with CSS hover or active states, JavaScript clicks or tap events, and whether the cursor is visible

Events are things that happen in the system you are programming — the system produces (or "fires") a signal of some kind when an event occurs, and provides a mechanism by which an action can be automatically taken (that is, some code running) when the event occurs. Events are fired inside the browser window, and tend to be attached to a specific item that resides in it. This might be a single element, a set of elements, the HTML document loaded in the current tab, or the entire browser window. There are many different types of events that can occur.

For example:

The user selects, clicks, or hovers the cursor over a certain element.

The user chooses a key on the keyboard.

The user resizes or closes the browser window.

A web page finishes loading.

A form is submitted.

A video is played, paused, or ends.

An error occurs.

EXAMPLE OF POINTER EVENT:-

<!DOCTYPE html>

<html>

<head>

<style>

div.ex1 {

pointer-events: none;

}

div.ex2 {

pointer-events: auto;

}

</style>

</head>

<body>

<h1>The pointer-events Property</h1>

<p>Move over the links below to see if the react on pointer events.</p>

<h2>pointer-events: none:</h2>

<div class="ex1">Go to <a href="https://www.w3schools.com/html">HTML Tutorial</a></div>

<h2>pointer-events: auto (default):</h2>

<div class="ex2">Go to <a href="https://www.w3schools.com/css">CSS Tutorial</a></div>

</body>

</html>

OUTPUT OF EVENT

The pointer-events Property

Move over the links below to see if the react on pointer events.

pointer-events: none:

Go to HTML Tutorial

pointer-events: auto (default):

Go to CSS Tutorial

WHAT IS INNER TEXT PROPERTY : -

It is a part of The DOM (Document Object Model), innerText Property is used to set or return the text content of a specified node and its descendants (children). This property is very similar to the text content property but returns the content of all elements, except for <script> and <style> elements.

Example

<!DOCTYPE html>

<html>

<body>

<h1>The Element Object</h1>

<h2>The innerText Property</h2>

<p>The text content of the button element is:</p>

let text = document.getElementById("myBtn").innerText;

document.getElementById("demo").innerHTML = text;

</script>

</body>

</html>

OUTPUT OF INNER TEXT PROPRIETIES

The Element Object

The innerText Property

Try it

The text content of the button element is:

Try it

WHAT IS DYNAMICALLY CHANGING TEXT ATTRIBUTES IN CSS

Dynamically changing text attributes in CSS usually refers to using CSS properties to alter the appearance of text elements in response to user interactions or other dynamic events, such as hovering over an element, clicking a button, or changing the state of an input field. This can be achieved using CSS pseudo-classes, animations, transitions, and sometimes JavaScript for more complex interactions.

Here are a few common ways to dynamically change text attributes using CSS:

Hover Effects: You can use the :hover pseudo-class to apply styles when the user hovers over an element. FOR EXAMPLE, CHANGING THE COLOR OF A LINK WHEN HOVERED:

a :hover {

color: red;

}

Transitions: CSS transitions can be applied to smoothly animate changes in properties. For instance, you can smoothly change the font size when hovering over a button:

button {

font-size: 16px;

transition: font-size 0.3s ease;

}

button:hover {

font-size: 18px;

}

Animations: CSS animations allow you to create more complex and dynamic effects. For example, you can create a pulsating animation for a piece of text:

@keyframes pulse {

0% { font-size: 16px; }

50% { font-size: 18px; }

100% { font-size: 16px; }

}

.animated-text {

animation: pulse 2s infinite;

}

JavaScript Interaction: In some cases, you might need to use JavaScript to control more complex text attribute changes. For instance, changing the text content of an element when a button is clicked:

/* CSS */

.dynamic-text {

font-size: 20px;

color: blue;

}

<div class="dynamic-text">Initial Text</div>

<button onclick="changeText()">Change Text</button>

function changeText() {

var dynamicText = document.querySelector('.dynamic-text');

dynamicText.textContent = 'New Text';

dynamicText.style.color = 'green';

}

</script>

HOW TO APPLY INLINE PROPERTIES OF CSS IN HTML

PROGRAMS

Syntax:

Example 1: Here is the basic example of using inline CSS.

HTML PROGRAM file

SAVE AS FILE_NAME .HTML

<!DOCTYPE html>

<html>

<body>

<pstyle="color: BLUE;

font-size: 50px;

font-style: italic;

text-align: center;">

AJAY KUMAR PATHAK

MRS. KMPM VOCATIONAL COLLEGE

</p>

</body>

</html>

OUTPUT

AJAY KUMAR PATHAK MRS. KMPM VOCATIONAL COLLEGE

EXAMPLE 2: HERE IS THE DEMONSTRATION OF INLINE CSS.

SAVE AS FILE_NAME.CSS

<!DOCTYPE html>

<html>

<body>

/* COMMENT START FROM HERE THE INLINE CSS PRIORITIES */

<h2 style="color: green;

background: RED">

AJAY KUMAR PATHAK USING INLINE CSS PROPERTIES

</h2>

ENJOY YOURSELF !!.

</p>

</body>

</html>

THE END

WHAT IS IMPORTED STYLE SHEET IN CSS:- The imported style sheet gives you all the advantages of style sheets: by changing a single value in one file the format change is propagated (spread) to all of the HTML documents linked to the style sheet. The style sheet is written just as an embedded style sheet is, but, instead of inserting it in an HTML file, it is saved as a separate file (usually with a .css extension). Each HTML document then imports the CSS file. There are two ways to import a file:

Rules : -

The @import rule allows you to import a style sheet into another style sheet.

The @import rule must be at the top of the document (but after any @charset declaration).

The @import rule also supports media queries (media queries means print option e.g @import "mediaquerry.css" print; , copy option, support to mobile app, lap top etc.,) so you can allow the import to be media-dependent.

There are two ways to import a file:

1. Importing it(We can import additional CSS files inside another CSS declaration. The @import rule is used for this purpose as it links a stylesheet in a document. This is generally used when one stylesheet is dependent upon another. It is specified at the top of the document after @charset declaration inside <head>.Importing means we can add more than one .css files in a single .css file with html file)

Syntax :

@import (c:/pathname/ajay.css);

</style>

@import url (ajay.css);

</style>

2.Syntax :

@import “ajay.css”

</style>

EXAMPLE PROGRAM OF @IMPORT CSS FILE

STEPS

1. Make a folder (all files should be in the same folder, like .html, .css)

2. open note pad

3. Make css file

h2 {color : red ; }

P{color : blue ; }

NOW SAVE FILE ajayimport.css

Now, again make a HTML file

<!DOCTYPE html>

<html>

<head>

<title> I AM USING THE IMPORT COMMAND </title>

@import (http://pathname/ajay.css);

/* (THIS IS A COMMENT LINE) OR <style type=”text/css”>@import url “ajay.css” </style> OR <style type=”text/css”>@import “ajay.css” </style> */

</style>

</head>

<body>

<h2>AJAY KUMAR PATHAK , MRS. KMPM VOCATIOPNAL COLLEGE, HERE I AM CALLING TO CSS H2 TAG WHICH I HAVE BEEN WRITTEN IN .CSS FILE </h2>

<p>AJAY KUMAR PATHAK , MRS. KMPM VOCATIOPNAL COLLEGE, HERE I AM CALLING TO CSS P TAG WHICH I HAVE BEEN WRITTEN IN .CSS FILE </p>

</body>

</html>

Now save the as file_name.html in the same folder

XML DOCUMENT TYPE DEFINITION (DTD):-

DTD :- (In hindi:- jo bhi data transmit hora hai kishi others documents mai through the .DTD (kiyeki . XML, . DTD and. .XSD (XML Schema Definition) only kisibhi data / information ko carry karta hai display nahi karta hai kishi bhi browser mai) ko and wah data ak well formed mai hai ya nahi usko legal checked karta hai because agar .DTD ka data ham transmit kiye kishi others applications mai or wah DTD data others application mai access ho kar waha per errors dene lagega to waha per problems hoga esliye DTD data ko pahele check and verify kar lega ki yah data kishi others documents mai execute ho raha hai ya nahi)

DOCUMENT TYPE DEFINITIONS (DTD) : The XML Document Type Declaration, commonly known as DTD, is a way to describe XML language accurately (An application can use a DTD to verify that XML data is valid and well formed). DTDs check vocabulary (SPELLING) and validity of the structure of XML documents against grammatical rules of appropriate XML language.

An XML DTD can be either specified inside the document, or it can be kept in a separate document and then liked separately.

A document type definition (DTD) provides you with the means to validate XML files against a set of rules. When you create a DTD file, you can specify rules that control the structure of any XML files that reference the DTD file.

A DTD can contain declarations that define elements, attributes, notations, and entities for any XML files that reference the DTD file. It also establishes constraints for how each element, attribute, notation, and entity can be used within any of the XML files that reference the DTD file.

To be considered a valid XML file, the document must be accompanied (go with OR go along with ) by a DTD (or an XML schema), and conform to all of the declarations in the DTD (or XML schema).

Certain XML parsers have the ability to read DTDs and check to see if the XML file it is reading follows all of those rules. While the parser is reading the XML file, it will check each line to be sure that it conforms to the rules that are laid (put, arranged) out in the DTD file. If there is a problem, the parser generates an error and points to where the error occurs in the XML file. This kind of parser is called a validating parser because it validates the content of the XML file against the DTD.

Purpose of DTD :- Its main purpose is to define the structure of an XML document. It contains a list of legal elements and define the structure with the help of them.

Syntax

Basic syntax of a DTD is as follows −

<!DOCTYPE element DTD identifier

[

declaration1

declaration2

........

IN THE ABOVE SYNTAX,

The DTD starts with <!DOCTYPE delimiter.

An element tells the parser to parse the document from the specified root element.

DTD identifier is an identifier for the document type definition, which may be the path to a file on the system or URL to a file on the internet. If the DTD is pointing to external path, it is called External Subset.

The square brackets [ ] enclose an optional list of entity declarations called Internal Subset.

A complete example of well-formed and valid XML document. It follows all the rules of DTD.

Save file :- employee.xml

<?xml version="1.0"?>

<!DOCTYPE employee SYSTEM "employee.dtd"> // EXTERNAL DTD WHICH IS EMPLOYEE.DTD IS THE FILE NAME//

<lastname>PATHAK</lastname>

<email>ajay@example.com</email>

</employee>

In the above example, the DOCTYPE declaration refers to an external DTD file. The content of the file is shown in below paragraph.

File name :- employee.dtd

<!ELEMENT employee (firstname,lastname,email)>

<!ELEMENTfirstname (#PCDATA)>

<!ELEMENTlastname (#PCDATA)>

<!ELEMENT email (#PCDATA)>

OUTPUT

Types of DTD: There are two ways to specify XML DTD.

(1) Internal DTD: Inside the document

(2) External DTD: Specified in a separate document and linked later

(1) Internal DTD:- DTDs can be either internal or external. An internal DTD is defined within the XML document itself, making it self-contained. Let's explore the syntax, an example, and the rules associated with an internal DTD.

<!DOCTYPE rootElement [

Example:- Consider a simple XML document with an internal DTD:

<!DOCTYPE bookstore [

<!ELEMENT bookstore (book+)>

<!ELEMENT book (title, author, price)>

<!ELEMENT title (#PCDATA)>

<!ELEMENT author (#PCDATA)>

<!ELEMENT price (#PCDATA)>

<book>

<title>XML Fundamentals</title>

<author>Rahul Gupta</author>

</book>

</bookstore>

Rules FOR DTD:-

(A) <!ELEMENT elementName contentModel>:

This rule defines an element and its content model. In the example above, <!ELEMENT book (title, author, price)> states that the book element must contain title, author, and price elements in that order.

(B) <!ELEMENT elementName (#PCDATA)>:

This rule indicates that the element contains parsed character data, allowing text content.

(2) External DTD:- An external DTD is defined in a separate file and referenced within the XML document. This approach promotes reusability and separation of concerns.

Syntax:- <!DOCTYPE rootElement SYSTEM "external.dtd">

Example:- Consider an XML document that references an external DTD:

books.xml:

<!DOCTYPE bookstore SYSTEM "bookstore.dtd">

<book>

<title>XML Fundamentals</title>

</book>

</bookstore>

bookstore.dtd (external DTD file):-

<!ELEMENT bookstore (book+)>

<!ELEMENT book (title, author, price)>

<!ELEMENT title (#PCDATA)>

<!ELEMENT author (#PCDATA)>

<!ELEMENT price (#PCDATA)>

Using external DTDs enables multiple XML documents to share the same DTD definition.

Advantages of using DTD:

i. Ensures consistency of XML data

ii. Simple and easy to understand

iii. Widely supported by XML parsers and applications

iv. Easily interchange data between systems

v. Lightweight with limited file sizes and processing requirements.

vi. Allows the definition of entity references for reusable content and markup

Disadvantages of using DTD:

i. DTDs lack built-in documentation mechanisms

ii. Limited support for complex data types and advanced validation rules

iii. DTDs do not provide native support for XML namespaces

iv. More complex content models.

v. Do not offer built-in support for data types.

vi. XML Schema Definition (XSD) replaced DTDs due to its more robust features and capabilities.

XML (Extensible Markup Language) SCHEMAS :-

XML Schema Definition (XSD) language is the current standard schema language for all XML documents and data. On May 2, 2001, the World Wide Web Consortium (W3C) published XSD in its version 1.0 format.

The XML Schema definition language (XSD) enables you to define the structure and data types for XML documents. An XML Schema defines the elements, attributes, and data types that conform to the World Wide Web Consortium (W3C) XML Schema Part 1: Structures Recommendation for the XML Schema Definition Language. The W3C XML Schema Part 2: Datatypes Recommendation is the recommendation for defining data types used in XML schemas. The XML Schema Reference (XSD) is based on the W3C 2001 Recommendation specifications for Datatypes and for Structures.

Syntax

You need to declare a schema in your XML document as follows −

Example:-

The following example shows how to use schema:-

<?xml version = "1.0" encoding = "UTF-8"?>

<xs:schema xmlns:xs = "http://www.w3.org/2001/XMLSchema">

<xs:element name = "contact">

<xs:complexType>

<xs:sequence>

<xs:element name = "name" type = "xs:string" />

<xs:element name = "company" type = "xs:string" />

<xs:element name = "phone" type = "xs:int" />

</xs:sequence>

</xs:complexType>

</xs:element>

</xs:schema>

The basic idea behind XML Schemas is that they describe the legitimate format that an XML document can take.

Definition Types:- We can define XML schema elements in the following ways –

(1) Simple Type:- Simple type element is used only in the context of the text. Some of the predefined simple types are: xs:integer, xs:boolean, xs:string, xs:date.

For example :- <xs:element name = "phone_number" type = "xs:int" />

(2) Complex Type:- A complex type is a container for other element definitions. This allows you to specify which child elements an element can contain and to provide some structure within your XML documents.

For example –

<xs:element name = "Address">

<xs:complexType>

<xs:sequence>

<xs:element name = "name" type = "xs:string" />

<xs:element name = "company" type = "xs:string" />

<xs:element name = "phone" type = "xs:int" />

</xs:sequence>

</xs:complexType>

</xs:element>

In the above example, Address element consists of child elements. This is a container for other <xs:element> definitions, that allows to build a simple hierarchy of elements in the XML document.

(3) Global Types:- With the global type, you can define a single type in your document, which can be used by all other references. For example, suppose you want to generalize the person and company for different addresses of the company. In such case, you can define a general type as follows −

<xs:element name = "AddressType">

<xs:complexType>

<xs:sequence>

<xs:element name = "name" type = "xs:string" />

<xs:element name = "company" type = "xs:string" />

</xs:sequence>

</xs:complexType>

</xs:element>

DOCUMENT OBJECT MODEL:- ((Meaning:- We have seen that XML is a plain text Data Format used to store and send/receive information in a structured way. However, the XML document is not static data. Many times you will need to read, change, or extract information from an XML file. But how do you do it? How do programs work with the XML content? That’s where the XML Document Object Model (DOM) comes in. ) )

DOM (Document Object Model) is a standard programming interface used to represent and manipulate XML documents. When an XML document is processed using DOM, the whole document is loaded into memory and converted into a tree-like structure of objects called nodes.

Each part of the XML document becomes a node in the tree.

This allows programmers to:-

· Read XML data

· Change XML data

· Add new elements

· Delete elements

· Navigate through the XML structure

DOM , Means he Document Object Model (DOM) is a programming interface that represents an XML document as a hierarchical tree of nodes, allowing programs to access, modify, and manipulate the structure, content, and style of the XML document.

Why DOM is Used:- XML documents store structured data. Programs need a way to access and modify this data easily. DOM provides this capability.

Using DOM we can:-

i. Access any element in XML

ii. Modify element values

iii. Add new elements

iv. Delete existing elements

v. Navigate between parent and child nodes

Example situations:-

· Reading student records

· Updating product information

· Managing book libraries

· Processing configuration files

Example of XML Document:- Example XML file representing books:-

<?xml version="1.0"?>

<title>Java Programming</title>

<author>James</author>

</book>

<title>Web Development</title>

<author>David</author>

</book>

</library>

Explanation:-

· <library> → Root element

· <book> → Child element

· id → Attribute

· <title>, <author>, <price> → Sub elements

· Text inside tags → Text nodes

Here we can see:-

· library → parent node

· book → child node

· title/author/price → sub child nodes

HOW DOM PARSER WORKS:- (parse means:- Parsers The word “Parser”comes from Compilers. Parser is a program that analyses the grammatical structure of an input, with respect to a given formal grammar.The parser determines that how a sentence is constructed from the grammar of the language by describing the atomic elements of the input and the relationship among them. )

The DOM parser processes XML in the following steps:

Step 1:- The XML document is loaded.

Step 2:- The DOM parser reads the XML file.

Step 3:- The document is converted into a tree structure.

Step 4:- Each element becomes an object (node).

Step 5:- Programs can now access or modify nodes.

TYPES OF DOM NODES (IMPORTANT):-

1. Document Node:- Represents the entire XML document.

Example:- Document

2. Element Node:- Represents XML tags.

Example:-

</xml>

<book>

</book>

Here book and title are element nodes.

3. Attribute Node:- Attributes provide additional information about elements.

Example:- <book id="101"> , Here id="101" is an attribute node.

4. Text Node:- The actual data inside elements.

Example:- <title>Java Programming</title>

Text node = Java Programming

5. Comment Node:- Represents comments in XML.

Example:-

THE END WEB PAGE DESIGNING HTML

cswithpathak BY DR. AJAY KUMAR PATHAK, ASSISTANT PROFESSOR

Monday, March 16, 2026

UNIT 1 MJ–12 (Th):- WEB PROGRAMMING (UNIT NAME :- WEB PAGE DESIGNINING HTML)

No comments:

Post a Comment

UNIT 5 SOFTWARE TESTING (UNIT NAME) :- TEST AUTOMATION TOOLS AND EMERGING TRENDS

Report Abuse

MENU FOR SEARCH