Scribd
Upload
2 views

HTML TAGS

The document provides a comprehensive overview of various HTML tags, including their definitions, usage, and examples. It covers tags such as <a> for hyperlinks, <b> for bold text, <div> for divisions, and <form> for user input, among others. Each tag is described with its purpose, attributes, and browser display characteristics.

Uploaded by

sakinabohra0909
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

HTML TAGS

The document provides a comprehensive overview of various HTML tags, including their definitions, usage, and examples. It covers tags such as <a> for hyperlinks, <b> for bold text, <div> for divisions, and <form> for user input, among others. Each tag is described with its purpose, attributes, and browser display characteristics.

Uploaded by

sakinabohra0909
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

HTML TAGS

1. Comment :
Tag: <!--
Definition:

 The comment tag is used to insert comments in the source code. Comments are not displayed
in the browsers.

 You can use comments to explain your code, which can help you when you edit the source
code at a later date. This is especially useful if you have a lot of code.

 The two forward slashes at the end of comment line (//) is the JavaScript comment symbol.
This prevents JavaScript from executing the --> tag.

Code example:

Browser View:

2. Anchor :
Tag: <a>
Definition:

 The <a> tag defines a hyperlink, which is used to link from one page to another.

 The most important attribute of the <a> element is the href attribute, which indicates the link's
destination.

 By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue

A visited link is underlined and purple

An active link is underlined and red

 If the <a> tag has no href attribute, it is only a placeholder for a hyperlink.
 A linked page is normally displayed in the current browser window, unless you specify another
target.
Code example:
Browser view:

3. Bold :
Tag: <b>
Definition:

 The <b> tag specifies bold text without any extra importance.
 According to the HTML5 specification, the <b> tag should be used as a LAST resort when no
other tag is more appropriate. The specification states that headings should be denoted with
the <h1> to <h6> tags, emphasized text should be denoted with the <em> tag, important text
should be denoted with the <strong> tag, and marked/highlighted text should be denoted with
the <mark> tag

Code example:

Browser view:

4. Big :
Tag: <big>
Definition:
 The <big> tag was used in HTML 4 to define bigger text.
 The <big> element was used to cause the selected text to appear one size larger than the
surrounding text. This purely presentational tag was removed from HTML5 and should not be
used.
Code Example:

5. Body :
Tag: <body>
Definition:

 The <body> tag defines the document's body.

 The <body> element contains all the contents of an HTML document, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.

 Note: There can only be one <body> element in an HTML document.

Code Example:

Browser view:

6. Break line :
Tag: <br>
Definition:

 The <br> tag inserts a single line break.

 The <br> tag is useful for writing addresses or poems.

 The <br> tag is an empty tag which means that it has no end tag.

Code Example:
Browser view:

7. Center :
Tag: <center>
Definition:
 The <center> tag in HTML was used to horizontally center content on a webpage. However, it
is deprecated in HTML5 and should no longer be used.

Code Example:
8. Definition Description :
Tag: <dd>
Definition:

 The <dd> tag is used to describe a term/name in a description list.

 The <dd> tag is used in conjunction with <dl> (defines a description list) and <dt> (defines
terms/names).

 Inside a <dd> tag you can put paragraphs, line breaks, images, links, lists, etc.

Code Example:

Browser view:

9. Definition list :
Tag: <dl>
Definition:

 The <dl> tag defines a description list.

 The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each
term/name).

10. Definition term :


Tag: <dt>
Definition:
 The <dt> tag defines a term/name in a description list.

 The <dt> tag is used in conjunction with <dl> (defines a description list) and <dd> (describes
each term/name).

11. Div :
Tag: <div>
Definition:

 The <div> tag defines a division or a section in an HTML document.

 The <div> tag is used as a container for HTML elements - which is then styled with CSS or
manipulated with JavaScript.

 The <div> tag is easily styled by using the class or id attribute.

 Any sort of content can be put inside the <div> tag!

 Note: By default, browsers always place a line break before and after the <div> element.

Code Example:

Browser view:

12. Emphasis :
Tag: <em>
Definition:

 The <em> tag is used to define emphasized text. The content inside is typically displayed
in italic.

 A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.
Code Example:

Browser view:

13. Embed Object:


Tag: <embed>
Definition:

 The <embed> tag defines a container for an external resource, such as a web page, a picture, a
media player, or a plug-in application.

Code Example:

Browser view:

Or
14. Font:
Tag: <font>
Definition:
 The <font> tag was used in HTML 4 to specify the font face, font size, and color of text.

Code Example:

15. Form:
Tag: <form>
Definition:

 The <form> tag is used to create an HTML form for user input.

 The <form> element can contain one or more of the following form elements:

 <input>
 <textarea>
 <button>
 <select>
 <option>
 <label>
 <output>

Code Example:
Browser view:

16. Frame:
Tag: <frame>
Definition:

 The <frame> tag was used in HTML 4 to define one particular window (frame) within a
<frameset>.
 HTML <frame> tag is used to divide web browser windows into multiple sections, each
capable of loading content independently. This is achieved using a collection of frames within
a frameset tag.

Code Example:

17. Heading:
Tag: <h1>
Definition:

 The <h1> to <h6> tags are used to define HTML headings.

 <h1> defines the most important heading. <h6> defines the least important heading.

 Note: Only use one <h1> per page - this should represent the main heading/subject for the
whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on

Code Example:
Browser view:

18. Head:
Tag: <head>
Definition:

 The <head> element is a container for metadata (data about data) and is placed between the
<html> tag and the <body> tag.

 Metadata is data about the HTML document. Metadata is not displayed.

 Metadata typically define the document title, character set, styles, scripts, and other meta
information.

 The following elements can go inside the <head> element:

 <title> (required in every HTML document)


 <style>
 <base>
 <link>
 <meta>
 <script>
 <noscript>

Code Example:
Browser view:

19. Horizontal rule:


Tag: <hr>
Definition:

 The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).

 The <hr> element is most often displayed as a horizontal rule that is used to separate content
(or define a change) in an HTML page.

Code Example:

Browser view:
20. HTML:
Tag: <html>
Definition:

 The <html> tag represents the root of an HTML document.

 The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).

 Note: You should always include the lang attribute inside the <html> tag, to declare the
language of the Web page. This is meant to assist search engines and browsers.

Code Example:

Browser view:

21. Italic:
Tag: <i>
Definition:

 The <i> tag defines a part of text in an alternate voice or mood. The content inside is typically
displayed in italic.

 The <i> tag is often used to indicate a technical term, a phrase from another language, a
thought, a ship name, etc.

 Use the <i> element only when there is not a more appropriate semantic element, such as:

 <em> (emphasized text)


 <strong> (important text)
 <mark> (marked/highlighted text)
 <cite> (the title of a work)
 <dfn> (a definition term)

Code Example:
Browser view:

22. Image:
Tag: <img>
Definition:

 The <img> tag is used to embed an image in an HTML page.

 Images are not technically inserted into a web page; images are linked to web pages.
The <img> tag creates a holding space for the referenced image.

 The <img> tag has two required attributes:

src - Specifies the path to the image

alt - Specifies alternate text for image, if the image for some reason cannot be displayed

 Note: Also, always specify the width and height of an image. If width and height are not
specified, the page might flicker while the image loads.

Code Example:

Browser view:
23. IFrame:
Tag: <iframe>
Definition:

An iframe, or Inline Frame, is an HTML element represented by the <iframe> tag. It functions as a
‘window’ on your webpage through which visitors can view and interact with another webpage
from a different source.
Iframes are used for various purposes like:
 Embedding Multimedia: Easily integrate videos, audio from platforms like YouTube, etc.
 Including Maps: Embed maps from services like Google Maps directly into your site.
 Loading Forms and Widgets: Incorporate forms from other source without writing code.

Syntax:
<iframe src="URL" title="description"></iframe>
 The src attribute specifies the URL of the document you want to embed.
 Iframes can include videos, maps, or entire web pages from other sources.

Code Example:

24. Input:
Tag: <input>
Definition:

 The <input> tag specifies an input field where the user can enter data.

 The <input> element is the most important form element.

 The <input> element can be displayed in several ways, depending on the type attribute.

 Tip: Always use the <label> tag to define labels for <input type="text">, <input
type="checkbox">, <input type="radio">, <input type="file">, and <input type="password">.
 The different input types are as follows:

 <input type="button">
 <input type="checkbox">
 <input type="date">
 <input type="email">
 <input type="file">
 <input type="hidden">
 <input type="image">
 <input type="number">
 <input type="password">
 <input type="search">
 <input type="submit">
 <input type="text"> (default value)
 <input type="time">
 <input type="url">

Code Example:

25. List Item:


Tag: <li>
Definition:

 The <li> tag defines a list item.

 The <li> tag is used inside ordered lists, unordered lists , and in menu lists.

 In <ul> and <menu>, the list items will usually be displayed with bullet points.

 In <ol>, the list items will usually be displayed with numbers or letters.

Code Example:
Browser view:

26. Link Item:


Tag: <link>
Definition:

 The <link> tag defines relationship between the current document and an external resource.

 The <link> tag is most used to link to external style sheets or to add a favicon to your website.

 The <link> element is an empty element, it contains attributes only.

Code Example:

Browser view:
27. Menu:
Tag: <menu>
Definition:

 The <menu> tag defines an unordered list of content.

 Use the <menu> tag together with the <li> tag to create menu items.

 Note: <menu> tag is an alternative to <ul> tag and browsers will treat these two lists equally.

Code Example:

Browser view:

28. Meta:
Tag: <meta>
Definition:

 The <meta> tag defines metadata about an HTML document. Metadata is data about data.

 <meta> tags always go inside the <head> element, and are typically used to specify character
set, page description, keywords, author of the document, and viewport settings.

 Metadata will not be displayed on the page, but is machine parsable.

 Metadata is used by browsers (how to display content or reload page), search engines
(keywords), and other web services.

 There is a method to let web designers take control over the viewport (the user's visible area
of a web page), through the <meta> tag
Code Example:

Browser view:

29. Ordered list:


Tag: <ol>
Definition:

 The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.

 The <li> tag is used to define each list item.

Code Example:

Browser view:
30. Option listbox:
Tag: <option>
Definition:

 The <option> tag defines an option in a select list.

 <option> elements go inside a <select>, <optgroup>, or <datalist> element.

 Note: The <option> tag can be used without any attributes, but you usually need
the value attribute, which indicates what is sent to the server on form submission.

 Tip: If you have a long list of options, you can group related options within the <optgroup> tag.

Code Example:

Browser view:

31. Paragraph :
Tag: <p>
Definition:

 The <p> tag defines a paragraph.

 Browsers automatically add a single blank line before and after each <p> element.

Code Example:
Browser view:

32. Small:
Tag: <small>
Definition:
 The <small> tag defines smaller text (like copyright and other side-comments).

Code Example:

Browser view:

33. Strike:
Tag: <strike>
Definition:
 The <strike> tag defines a strike or line through Text.
 This tag creates a cut line in the text.
 This tag is depreciated from HTML 5

Code Example:
34. Strong:
Tag: <strong>
Definition:

 The <strong> tag is used to define text with strong importance. The content inside is typically
displayed in bold.

 Tip: Use the <b> tag to specify bold text without any extra importance!

Code Example:

Browser view:

35. Span:
Tag: <span>
Definition:

 The <span> tag is an inline container used to mark up a part of a text, or a part of a document.

 The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id
attribute.
 The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is
an inline element.

Code Example:

Browser view:

36. Table:
Tag: <table>
Definition:

 The <table> tag defines an HTML table.

 An HTML table consists of one <table> element and one or more <tr>, <th>,
and <td> elements.

 The <tr> element defines a table row, the <th> element defines a table header, and the <td>
element defines a table cell.

Code Example:
Browser view:

37. Table data:


Tag: <td>
Definition:

 The <td> tag defines a standard data cell in an HTML table.

 An HTML table has two kinds of cells:

Header cells - contains header information (created with the <th> element)

Data cells - contains data (created with the <td> element)

 The text in <td> elements are regular and left-aligned by default.

 The text in <th> elements are bold and centered by default.

38. Table header:


Tag: <th>
Definition:
 The <th> tag defines a header cell in an HTML table.

39. Table row:


Tag: <tr>
Definition:

 The <tr> tag defines a row in an HTML table.

 A <tr> element contains one or more <th> or <td> elements.

40. Title:
Tag: <title>
Definition:

 The <title> tag defines the title of the document. The title must be text-only, and it is shown in
the browser's title bar or in the page's tab.
 The <title> tag is required in HTML documents!

 The contents of a page title is very important for search engine optimization (SEO)! The page
title is used by search engine algorithms to decide the order when listing pages in search
results.

Code Example:

Browser view:

41. Teletype:
Tag: <tt>
Definition:
 The <tt> tag in HTML stands for teletype text.
 It was used in HTML 4 to define text in a monospaced, teletype-style font.
 However, the tag has been deprecated in HTML5 because it only served a presentational
purpose without adding any semantic meaning to the content.

Code Example:

42. Underline :
Tag: <u>
Definition:
 The <u> tag represents some text that is unarticulated and styled differently from normal text,
such as misspelled words or proper names in Chinese text.
 The content inside is typically displayed with an underline

Code Example:

Browser view:

43. Unordered list:


Tag: <ul>
Definition:

 The <ul> tag defines an unordered (bulleted) list.

 Use the <ul> tag together with the <li> tag to create unordered lists.

Code Example:

Browser view:
Struts Basic
What is Struts?
Struts is a web application framework used for building Java-based web applications. It follows the
MVC (Model-View-Controller) design pattern, which helps in separating business logic, user
interface, and control logic to make applications more organized, maintainable, and scalable.

Struts2 – A Complete Rewrite of Struts 1

Struts2 is not just an upgraded version of Struts 1, but a completely new framework built from
scratch. Initially, another framework called WebWork was developed using Struts as a base. Later,
WebWork and Struts merged to form Struts2, making web development more flexible and
powerful for developers.

Struts2 is a powerful and enterprise-ready framework for building Java web applications. It
provides better flexibility, scalability, and ease of development compared to Struts1, making it a
preferred choice for modern web application development.

Framework Features of Struts2:


1.POJO Forms and POJO Actions

 Struts2 removes the need for Action Forms (which were necessary in Struts 1).
 Now, any Plain Old Java Object (POJO) can receive form inputs and act as an Action class.
 This makes development simpler and more flexible.

2.Better Tag Support

 Struts2 has improved form tags, reducing the need to write long code.
 This makes development faster and cleaner.

3.AJAX Support

 AJAX is widely used in modern web applications to update parts of a webpage without
reloading the entire page.
 Struts2 has built-in AJAX tags, making it easy to use AJAX without writing complex JavaScript
code

4.Easy Integration with Other Frameworks

 Struts2 seamlessly integrates with popular frameworks like: Spring , Tiles, and SiteMesh
 This helps in reducing code duplication and improving efficiency.

5.Template Support
 Struts2 supports templates for generating views, reducing the need to rewrite UI code
repeatedly.

6.Plugin Support

 Struts2 allows developers to add extra functionality using plugins.


 Many plugins are available for security, logging, validation, and more.

7.Integrated Profiling and Debugging

 Struts2 has built-in profiling and debugging tools to help developers analyze and improve their
applications.
 This makes troubleshooting and performance optimization easier.

8.Easy to Modify Tags

 Struts2 allows customization of tag markups using Freemarker templates.


 Developers do not need JSP or Java knowledge; only basic HTML, XML, and CSS are required to
modify tags.

9.Less Configuration Required

 In Struts1, developers had to manually configure many things in struts-config.xml.


 Struts2 reduces configuration efforts by using default values.
 Developers only need to configure settings if they want to change the default behavior.

10.Multiple View Technologies

 Struts2 supports various view technologies besides JSP, including: Freemarker,Velocity, XSLT
 This provides flexibility in choosing how to display web page

11.REST Support

 Struts2 provides support for RESTful web services, making it easier to build API-driven
applications.
 Example: You can create GET, POST, PUT, DELETE endpoints for your web services using Struts2
actions.

12.Improved File Upload Handling

 Struts2 has built-in support for file uploads with proper validation.
 You can set file size limits, allowed file types, and storage locations easily.

13. Enhanced Exception Handling

 Struts2 provides better exception management with built-in exception interceptors.


 You can define custom exception handlers in XML or Java code.
 Example: If an action fails, it can be redirected to a custom error page automatically.
Architecture of Struts 2.0:
Struts 2 is based on the Model-View-Controller (MVC) design pattern, which ensures separation of
concerns.

What is MVC?

 The MVC architecture ensures clean separation between Model (Data), View (UI), and
Controller (Logic), making web development more organized and efficient.
 MVC (Model-View-Controller) is a software design pattern used for developing web
applications. It consists of three main components:

Model – Manages the application's data and business logic.

View – Handles the user interface (UI) and displays data.

Controller – Processes user requests, updates the model, and determines the view to
display.

How MVC Works in Struts 2.0?

1.User Sends a Request: A user submits a request (e.g., logging in).

2.Controller Handles the Request: The request is sent to the Struts 2 FilterDispatcher, which
determines the appropriate Action class to handle it.

3.Model Processes Data: The Action class interacts with the Model (business logic and
database) to process the request.

4.View is Generated : The processed data is sent to the View (JSP, Freemarker, etc.), and the
final response is presented to the user.

Struts 2 Components :

1. Model (Handles Data and Business Logic)

 The Model represents the data and business logic of the application.
 It interacts with the database and performs necessary computations.
2. View (Handles User Interface)

 The View is responsible for displaying data to the user in a structured format.
 It uses technologies like JSP, Freemarker, or Velocity to render the UI.
 The View does not handle business logic, ensuring separation of concerns.

3. Controller (Manages User Requests)

 The Controller is responsible for handling user input and processing requests.
 In Struts 2, the FilterDispatcher acts as the main controller.
 The Controller: Receives the request, Calls the appropriate Action class ,Fetches data from the
Model , Passes the data to the View for display

Tools Required for Struts 2.0:


Step 1 - Install Java Development Kit (JDK)

What is JDK?

JDK (Java Development Kit) is a software package that includes everything needed to
develop Java applications.

Since Struts 2.0 is built using Java, we need JDK to write and run Java programs.

Why do we need JDK in Struts 2.0?

It allows us to write and compile Java code for Struts applications.

It provides built-in libraries and functions that help us develop web applications.

Which version of JDK is needed?

JDK 1.5 or later is required for Struts 2.0.

A newer version like JDK 8 or 11 is also fine.

Installation Steps:

Download the latest JDK from Oracle's Java SE Downloads.

Follow the installation instructions.

Set up PATH and JAVA_HOME environment variable

Step 2 - Install Apache Tomcat

What is Tomcat?

Tomcat is a web server that helps run Java-based web applications, including Struts 2.0.
It processes HTTP requests and runs JSP and Servlet-based applications.

Why do we need Tomcat for Struts 2.0?

Struts 2.0 applications are web-based, so they need a web server to handle requests and
responses.

Tomcat acts as a container where our Struts 2.0 application runs.

Which version of Tomcat is needed?

Apache Tomcat 5.x or later is recommended.

Tomcat 9 or 10 can also be used.

Installation Steps:

Download the latest Tomcat from Apache Tomcat.

Set the CATALINA_HOME environment variable

Verify Tomcat is running by visiting http://localhost:8080/.

Step 3 - Install Eclipse IDE

What is Eclipse?

An IDE (Integrated Development Environment) is a software tool that makes coding easier by
providing features like syntax highlighting, debugging, and auto-suggestions.

Eclipse is an integrated development environment (IDE) used for Java development. Free and
widely used for Java development. Provides easy integration with Struts 2.0

Installation Steps:

Download Eclipse from Eclipse Downloads.

Start Eclipse:

Windows: Run eclipse.exe.

Step 4 - Install Struts 2 Libraries

What is Struts 2?

Struts 2 is a framework for building Java web applications using the Model-View-Controller (MVC)
pattern.

Installation Steps:

Download the latest Struts 2 package from Apache Struts.


Set the CLASSPATH variable

Step 5 - Install Database & JDBC Connector

Why do we need a database?

Web applications often store user data, login credentials, and other information.

A database helps store and retrieve this data efficiently.

Common Databases for Struts 2.0

MySQL (Most Used): Fast, reliable, and open-source.

Oracle Database: More powerful but used in enterprise applications.

PostgreSQL: Another powerful open-source database.

What is JDBC?

JDBC (Java Database Connectivity) is required to connect Struts 2.0 applications with the
database.

We need a JDBC Driver for the chosen database (e.g., MySQL Connector for MySQL)

Step 6 - Install Web Browser (For Testing)

Why do we need a web browser?

we need a browser to test and view the application.

Best Browsers for Testing

Google Chrome (Recommended) – Fast and supports developer tools.

Mozilla Firefox – Good for debugging.

Microsoft Edge – Useful for Windows users.

You might also like