Scribd
Upload
7 views53 pages

Chapter 4 - HTML 5 and JSP

The document provides an overview of HTML and JSP, covering fundamental concepts such as HTML tags, attributes, and the structure of web pages, as well as the basics of Java Server Pages (JSP) for dynamic web applications. It highlights the differences between HTML4 and HTML5, including new elements and input types, and explains the JSP life cycle and its basic tags. Additionally, it discusses JSP directives and page context methods for managing attributes within different scopes.

Uploaded by

waif
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views53 pages

Chapter 4 - HTML 5 and JSP

The document provides an overview of HTML and JSP, covering fundamental concepts such as HTML tags, attributes, and the structure of web pages, as well as the basics of Java Server Pages (JSP) for dynamic web applications. It highlights the differences between HTML4 and HTML5, including new elements and input types, and explains the JSP life cycle and its basic tags. Additionally, it discusses JSP directives and page context methods for managing attributes within different scopes.

Uploaded by

waif
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 53

Web Designing

Mettu University
Department of Information Technology
3rd Year
Advanced Programming – Chapter 5
HTML
HTML Introduction
• HTML (Hyper Text Markup Language) is a markup language used to create webpages.
• Several webpages combine to form a website
• HTML uses set of built-in tags, enclosed in angular brackets
• HTML code will have the file extension as .html
• HTML used to write user interface (UI) fro web development programs
• HTML provides it means to create a structured document such as headings,
paragraphs, lists, links, quotes, and other so many items.
• Support images and objects (audio and video) to be embedded and create a
interactive WebPages.
• Scripts languages such as JavaScript, VB script which are allow to load that affect to
create a dynamic user interactive WebPages.
HTML Tags
• HTML tags keywords are surrounding in Opening Tag <html>
and Closing Tag</html>.
• HTML tags is pairs like <body> and </body>. It's
container tags.
• Some HTML tags is not pairs in Opening and Closing like
<br />, <hr />. It's empty tags.
• All tags are write in Lower Alphabetical and empty tags
always write in closing Tag type like <br />.
HTML Head Section
• HTML <head> tag is a Container Tag. All Header element
contains like general information about page, meta-
information, style sheet URL and document type
information.
• HTML <head> tag inside elements does not display in body
part on web browser.
• HTML <head> tag inside Elements is <!doctype>, <base>,
<link>, <meta>, <title>, <style> and <script>.
HTML Body Section
• HTML body section is a main contain section of web page
all contain that will be seen when the user loads the
webpage.
• HTML body section supported all the contains such as
text, hyperlinks, images, Special Character, lists,
tables, frames, forms etc.
• It's most powerful section and important section to
display web page.
HTML BASIC TAGS
HTML Paragraph Tag
• Defines a paragraph into web document. HTML paragraph
define using <p> tag.
Example-Code:

<body>
<p> This is first Paragraphs </p>
<p> This is Second Paragraphs </p>
</body>
HTML Comment Tag
• Defines the Comments <!-- Your Comment --> tag.
• Example-Code:

<body>
<!--Image File-->
<img src="../../jix/w2t.png" width="380" height="70" />
</body>
HTML IMAGE Tag
• To display Images into web document. HTML Images are
define inside the <img> tag.
• Example-Code:
<body>
<img src="../../jix/w2t.png" width="380" height="70" />
</body>
HTML LINK Tag

• Defines the Link in internal or External document. HTML


Link are defined inside the <a> tag.
• Example:
Internal Link:
<a href="#Lession.1">Lession.1</a>
External Link:
<a href="http://www.meu.edu">Mettu University </a>
Mailto Link Code
<a
href="mailto:[email protected]?&subject=Feedback&body=messa
ge">Click Here </a>
Sub Directory Link
<a href="html/firstpage.php">
<a href="../firstpage.php">
<a href="../basic/firstpage.php">
HTML Headings Tags
• Defines the Heading <h1> to <h6> tags.
• Example-Code:

<body>
<h1> Heading Tag </h1>
<h2> Heading Tag </h2>
<h5> Heading Tag </h5>
<h6> Heading Tag </h6>
</body>
HTML ATTRIBUTES
• HTML tags contain have one or more attributes are
support.
• HTML Attributes are added in tag to provide the more
additional information about how the tag should be
appear or behavior.
• HTML Attributes are always specified in the start tag.
• HTML Attributes consist on name/value pairs
like: i.e. name="value" and separated by an equals (=)
sign.
• Attribute values always be enclosed in double/single
quotes.
• Double quotes are the most common use, but single quotes
are also allowed.
HTML ATTRIBUTES (Continued)

<head>
<title> HTML Attributes Example </title>
<style type="text/css"> #second { color:#FF9966; } </style> </head>
<body>
<p style="background-color:red">First Attributes</p>
<p id="second">Second Attributes</p>
<p>Third Attributes</p>
<p><abbr title="Cascading Style Sheet">CSS</abbr></p> </body>
HTML Text Formatting TAGS
HTML Ordered List
• HTML <ol> tag define ordered list(list of Ordered items). HTML <ol> tag
is a Container tag.
• <ol> Tag Attributes
HTML <ol> tag specified Order list display list of item and
its attribute help to change the type of order list.
• <li> Tag Attributes
<li> tag specified list items and its attribute help to change
the type of order list.
Example: <ol type="I" value="1">
<li>Upper Roman numeral</li>
<li>Upper Roman numeral</li>
</ol>
HTML Unordered List
• HTML <ul> tag define Unordered List(list of Unordered items).
HTML <ul> tag is a Container tag.
• It is use to display list of item with Bulleted style.
• <ul> Tag Attributes
HTML <ul> tag specified Unordered list display list of
item and its attribute help to change the different type of
list.
• <li> Tag Attributes
HTML <li> tag specified list items and its attribute
helps to change the unorder of the list.
• Example:
<ul type="disk" >
<li>Disk Bullet</li>
<li>Disk Bullet</li>
</ul>
HTML Definition List
• Definition and Usage
• Definition list is use for create glossary list. Definition list
are stars with <dl> tag and close with </dl> tag.
• <dl> tag have two tag <dt> and <dd> defined inside tag.
• <dl> tag is a empty tag. Its use to define definition list. It
does not have any attributes.
• <dt> tag is a empty tag. Its use to define definition team. It
does not have any attributes.
• <dd> tag is a empty tag. Its use to define definition define. It
does not have any attributes.
<dl>
<dt>URL
<dd>Universal Resource Locator
<dt>W3C
<dd>World Wide Web Consortium
<dt>PNG
<dd>Portable Network Graphics
</dl>
ADVANCED HTML TAGS
HTML Table
• The best way to split a page into different sections is to
use HTML <table> Tag.
• HTML Table section is top of (start with) <table> tag, and
closed it right down at the </table> tag. Everything in
between those two tags is inside the table, as you can see in
following screenshot.
• Look at the following figure. <table> tag inside you need two
more tag first is <tr> tag, which stands for table row. It is
closed with the </tr> tag. And another one is <td> tag, which
stands for table data.
• Every time you add a <tr> tag, when table will gain an extra
row.
• HTML <td> tag stands for table data (also say table column),
and it places one cell in your table row.
• HTML table you also merge two or more column or two or more
row merge using respectively colspan or rowspan attributes.
HTML Table (Continued)
HTML Table (Continued)
HTML form
• HTML Forms is most important future in HTML.
• HTML Forms use to get a users information. its also say
user is interactive with it.
• HTML Forms is a information tools to get information
from the web surfer, such as: name, email address,
address, phone number etc.
HTML Form (Continued)
<input> Tag
HTML Form (Continued)
HTML 5
What is HTML5?
• HTML5 is the new standard for HTML.

• The previous version of HTML was – HTML 4.01, came in


1999.

• HTML5 is designed to deliver almost everything you want


to do online without requiring additional plugins. It
does everything from animation to apps, music to movies,
and can also be used to build complicated applications
that run in your browser.

• HTML5 is also cross-platform (it does not care whether


you are using a tablet or a smartphone, a notebook,
notebook or a Smart TV).
Differences Between HTML4 &
HTML5
1. HTML5 is a work in progress
2. Simplified Syntax
3. The New <canvas> Element for 2D drawings
4. New content-specific elements, like <article>,
<header>, <footer>, <nav>, <section>
5. New <menu> and <figure> Elements
6. New <audio> and <video> Elements
7. New form controls, like calendar, date, time, email,
url, search
8. No More <frame>, <center>, <big>, and <b>, <font>
9. Support for local storage
Browser Support for HTML5
HTML5 is not yet an official standard, and no browsers
have full HTML5 support.

But all major browsers (Safari, Chrome, Firefox, Opera,


Internet Explorer) continue to add new HTML5 features to
their latest versions.
The HTML5 <!DOCTYPE>
In HTML5 there is only one <!doctype> declaration, and it
is very simple:

<!DOCTYPE html>
HTML5 NEW ELEMENTS
HTML5 Input Types
HTML5 has several new input types for forms. These new features
allow better input control and validation.
• color
• Date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week
HTML5 Semantic Elements
• HTML5 offers new semantic elements to clearly define
different parts of a web page:
• <header>
• <nav>
• <section>
• <article>
• <aside>
• <figcaption>
• <figure>
• <footer>
JSP (Java Server Pages)
Bucket list
• Introduction to JSP.
• What is JSP?
• Why JSP?
• JSP Life Cycle
• Basic Tags in JSP
• JSP – Actions
• Directives and its Types
• Page Context and its Methods
• JSTL Tags
Introduction to JSP
• Java Server Pages (JSP) is a server-side programming
technology that enables the creation of dynamic,
platform-independent method for building Web-based
applications.

• JSP have access to the entire family of Java APIs,


including the JDBC API to access enterprise databases.
What is JSP?
• Java Server Pages (JSP) is a technology for
developing web pages that support dynamic content
which helps developers insert java code in HTML
pages by making use of special JSP tags, most of
which start with <% and end with %>.

• Using JSP, you can collect input from users through


web page forms, present records from a database or
another source, and create web pages dynamically.

• JSP tags can be used for a variety of purposes,


such as retrieving information from a database or
registering user preferences, accessing JavaBeans
components, passing control between pages and
sharing information between requests, pages etc.
Why JSP?
• JSP allows embedding Dynamic Elements in HTML Pages

• JSP are always compiled before it's processed by the


server

• Java Server Pages are built on top of the Java Servlets


API, so like Servlets, JSP also has access to all the
powerful Enterprise Java APIs, including JDBC, JNDI,
EJB, JAXP etc.

• JSP pages can be used in combination with servlets that


handle the business logic, the model supported by Java
servlet template engines.
JSP Life Cycle
The phases of JSP life cycle is:

 Translation of JSP Page

 Compilation of JSP Page

 Classloading (class file is loaded by the classloader)

 Instantiation (Object of the Generated Servlet is created).

 Initialization ( jspInit() method is invoked by the


container).

 Reqeust processing ( jspService() method is invoked by the


container).

 Destroy ( jspDestroy() method is invoked by the container).


Life cycle
Basic Tags in JSP
Scriptlet Tag
• Scriptlet Tag allows you to write Java code inside JSP page.
• Syntax: <% java code %>
Expression Tag
• Expression tag used to evaluate the expression placed in it, converts the
result into a string and send the result back to the client through response
object.
• Syntax: <%= expression %>

Declaration Tag
• Declaration tag is a block of Java code for declaring class wide variables,
methods and classes. Whatever placed inside these tags gets initialized
during JSP initialization phase and has class scope.
• Syntax: <%! Declaration %>
JSP - Actions
<jsp:include> Action Tag
• To include the file during the request processing (dynamic)
• Syntax : <jsp:include page="page URL" flush="Boolean Value" />

<jsp: forword> action tag:


• It is used for redirecting the request to the page, mentioned in this action.
• Syntax: <jsp:forward page="URL of the another page, JSP OR Servlet page" />

<jsp:useBean> Action Tag:


• It is used to invoke and use Beans in jsp page. Once Bean class is instantiated, we have to
usejsp:setProperty and jsp:getProperty actions to use the bean’s parameters.

• Syntax: <jsp: useBean id="unique_name_to_identify_bean"


class="package_name.class_name" />
directives
• JSP directives provide directions and instructions to
the container, telling it how to handle certain aspects
of JSP processing.

• A JSP directive affects the overall structure of the


servlet class.
• General form:

<%@ directive attribute="value" %>


Types of directives

Page

Directives

Include taglib
Page Directive
• The page directive is used to provide instructions to
the container that pertain to the current JSP page. You
may code page directives anywhere in your JSP page. By
convention, page directives are coded at the top of the
JSP page.

• Syntax:
<%@ page attribute="value" %>
• Example:
<%@ page import="java.util.Date" %>
Include directive
• The include directive is used to includes a file during
the translation phase.
• This directive tells the container to merge the content
of other external files with the current JSP during the
translation phase.
• We can code include directives anywhere in your JSP
page.

• Syntax:
<%@ include file="relative url" >
• Example:
<jsp:include page=“header.jsp" />
Taglib directive
• The taglib directive declares that your JSP page uses a
set of custom tags, identifies the location of the
library, and provides a means for identifying the custom
tags in your JSP page.

• Syntax:
<%@ taglib uri="uri" prefix="prefixOfTag" >
• Example:

<%@ taglib uri="http://www.abc.com/tags" prefix="mytag" %>


Page context
• The pageContext object can be used to set, get or remove
attribute from one of the following scopes:
 JSP Page – Scope: PAGE_CONTEXT

 HTTP Request – Scope: REQUEST_CONTEXT

 HTTP Session – Scope: SESSION_CONTEXT

 Application Level – Scope: APPLICATION_CONTEXT


Methods of page Context
Object findAttribute (String AttributeName)
• It looks for an attribute in all scope
• Example: pageContext.findAttribute("username”);

Object getAttribute (String AttributeName, int Scope)


• It looks for an attribute in the specified scope
• Example: pageContext.getAttribute("userName", PageContext.SESSION_CONTEXT);

void removeAttribute(String AttributeName, int Scope)


• to remove an attribute from a given scope
• Example: pageContext.removeAttribute(“MyAttr”, PageContext. PAGE_CONTEXT);

void setAttribute(String AttributeName, Object AttributeValue, int Scope)


• It writes an attribute in a given scope
• Example:
• pageContext.setAttribute(“mydata”, “This is my data”, PageContext. APPLICATION_CONTEXT)
JSTL
• The JSP Standard Tag Library (JSTL) represents a set of
tags to simplify the JSP development.

• Advantage of JSTL
– Fast Developement JSTL provides many tags that simplifies
the JSP.
– Code Reusability We can use the JSTL tags in various pages.
– No need to use scriptlet tag It avoids the use of scriptlet
tag.
Types of tags in JSTL

Tag Name Description


core tags The JSTL core tag provide variable support, URL management, flow control
etc. The url for the core tag is http://java.sun.com/jsp/jstl/core . The prefix of
core tag is c.

sql tags The JSTL sql tags provide SQL support. The url for the sql tags
is http://java.sun.com/jsp/jstl/sqland prefix is sql.
xml tags The xml sql tags provide flow control, transformation etc. The url for the xml
tags ishttp://java.sun.com/jsp/jstl/xml and prefix is x.

Formatting tags The JSTL formatting tags are used to format and display text, the date, the
time, and numbers for internationalized Web sites. The url for the functions
tags <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

functions tags The functions tags provide support for string manipulation and string length.
The url for the functions tags is http://java.sun.com/jsp/jstl/functions and
prefix is fn.
JSTL - Core tags
• <c:out >
• <c:set >
• <c:remove >
• <c:catch>
• <c:if>
• <c:choose>
• <c:when>
• <c:otherwise >
• <c:import>
• <c:forEach >
• <c:forTokens>
• <c:param>
• <c:redirect >
• <c:url>
THANK YOU

You might also like