Scribd
Upload
34 views

22PLC15A - Module 1 - 2022-23

Uploaded by

Swetha Manjunatha
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
34 views

22PLC15A - Module 1 - 2022-23

Uploaded by

Swetha Manjunatha
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/ 60

Module-1

Traditional HTML and XHTML


First Look at HTML and XHTML
• HTML is short for Hypertext Markup Language. It is used to
create websites and web applications. Let’s break it down,
so we understand the name better:
• Hypertext: Hypertext refers to the “text wrapped within a
text.” It is very similar to hyperlinks and contains an
underlying text that, when clicked, redirects to a new
webpage.
• Markup language: A markup language is not necessarily a
programming language. Instead, it is used to apply
formatting and layout to a simple text document. This
leads to more interactive and dynamic text content.
First Look at HTML and XHTML
• What is XHTML?
• XHTML stands for Extensible Hypertext Markup Language
• XML is a markup language where all documents must be
marked up correctly (be "well-formed").
• XHTML was developed to make HTML more extensible and
flexible to work with other data formats (such as XML
(XML stands for extensible Markup Language. XML was designed to store and
transport data. XML was designed to be both human- and machine-readable)).
In addition, browsers ignore errors in HTML pages, and try
to display the website even if it has some errors in the
markup. So XHTML comes with a much stricter error
handling.
First Look at HTML and XHTML
• The Most Important Differences from HTML
• <!DOCTYPE> is mandatory
• The xmlns attribute in <html> is mandatory
• <html>, <head>, <title>, and <body> are mandatory
• Elements must always be properly nested
• Elements must always be closed
• Elements must always be in lowercase
• Attribute names must always be in lowercase
• Attribute values must always be quoted
• Attribute minimization is forbidden
First Look at HTML and XHTML
• XHTML - <!DOCTYPE ....> Is Mandatory
• An XHTML document must have an XHTML <!DOCTYPE>
declaration.

• The <html>, <head>, <title>, and <body> elements must


also be present, and the xmlns attribute in <html> must
specify the xml namespace for the document.
First Look at HTML and XHTML
First Look at HTML and XHTML
• XHTML Elements Must be Properly Nested
• In XHTML, elements must always be properly nested within
each other, like this:
First Look at HTML and XHTML
• XHTML Elements Must Always be Closed
• In XHTML, elements must always be closed, like this:
First Look at HTML and XHTML

• XHTML Empty Elements Must Always be Closed


• In XHTML, empty elements must always be closed, like this:
First Look at HTML and XHTML

• XHTML Elements Must be in Lowercase


• In XHTML, element names must always be in lowercase, like this:
First Look at HTML and XHTML

• XHTML Attribute Names Must be in Lowercase


• In XHTML, attribute names must always be in lowercase, like this:
First Look at HTML and XHTML

• XHTML Attribute Values Must be Quoted


• In XHTML, attribute values must always be quoted, like this:
First Look at HTML and XHTML

• XHTML Attribute Minimization is Forbidden


• In XHTML, attribute minimization is forbidden:
First Look at HTML and XHTML
Hello HTML and XHTML World
Our first complete example written in strict HTML 4 is shown here:
Hello HTML
Our first complete example written in strict HTML 4 is shown here:

OUTPUT:
First Look at HTML and XHTML
• HTML5 example
Hello HTML
<!DOCTYPE> declaration in HTML 5
HTML5 example Output:
Hello HTML and XHTML World
• In the case of XHTML, which is a form of HTML that is based upon the
syntax rules of XML,
Hello XHTML World
In the case of XHTML,

Output
Hello HTML and XHTML World
• The preceding examples use some of the most common elements
used in (X)HTML documents, including
• The <!DOCTYPE> statement, which indicates the particular
version of HTML or XHTML being used in the document.
• The <html>, <head>, and <body> tag pairs are used to specify the
general structure of the document. The required inclusion of the
xmlns attribute in the <html> tag is a small difference required by
XHTML.
• The <meta> tag used in the examples indicates the MIME(Media
type) type of the document and the character set in use. Notice
that in the XHTML example, the element has a trailing slash to
indicate that it is an empty element.
Hello HTML and XHTML World
• The <title> and </title> tag pair specifies the title of the
document, which generally appears in the title bar of the Web
browser.
• A comment is specified by <!-- -->, allowing page authors to
provide notes for future reference.
• The <h1> and </h1> header tag pair indicates a headline
specifying some important information.
• The <hr> tag, which has a self-identifying end tag (<hr />) under
XHTML, inserts a horizontal rule, or bar, across the screen.
• The <p> and </p> paragraph tag pair indicates a paragraph of
text.
Hello HTML and XHTML World
• The <em> and </em> tag pair surrounds a small piece of text to
emphasize which a browser typically renders in italics.
Viewing Markup Locally
• How do I view markup in HTML?
• Open your browser and navigate to the page for which you wish
to view the HTML.
• Right-click on the page to open the right-click menu after the
page finishes loading.
• Click the menu item that allows you to view the source. ...
• When the source page opens, you'll see the HTML code for the
full page.
Viewing Markup with a Web Server
• There are many options for employing a Web server.
• You may decide to run your own local development Web
server on your desktop system(XAMPP) or use some
hosted server instead.
• To make your files available via the server, you might use a
process of uploading a file from your system to a remote
server via an FTP (File Transfer Protocol) program, as
shown here:
Viewing Markup with a Web Server
Viewing Markup with a Web Server
• Many Web editors also allow you to synchronize files
between a local directory and your remote server. For
example, a snippet of the synchronization facility provided in
Dreamweaver is shown here:
HTML and XHTML: Version History
HTML and XHTML: Version History
HTML and XHTML: Version History
(X)HTML Document Structure
(X)HTML Document Structure
• The XHTML documents contains three parts, which are discussed
below:
• DOCTYPE: It is used to declare a DTD
• head: The head section is used to declare the title and other
attributes.
• body: The body tag contains the content of web pages. It consists
many tags.
(X)HTML Document Structure
• Creating a XHTML web page, it is necessary to include DTD
(Document Type Definition) declaration. There are three types of DTD
which are discussed below:
• Transitional DTD
• Strict DTD
• Frameset DTD
(X)HTML Document Structure
• Transitional DTD: It is supported by the older browsers which does
not have inbuilt cascading style sheets supports. There are several
attributes enclosing the body tag which are not allowed in strict DTD.

• Syntax
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
(X)HTML Document Structure
• Strict DTD: Strict DTD is used when XHTML page contains only markup
language. Strict DTD is used together with cascading style sheets, because
this attribute does not allow CSS property in body tag.

• Syntax:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
(X)HTML Document Structure
• Frameset DTD: The frameset DTD is used when XHTML page contains
frames.

• Syntax:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en“
lang="en">
Hello HTML and XHTML World
• The preceding examples use some of the most common elements
used in (X)HTML documents, including
• The <!DOCTYPE> statement, which indicates the particular
version of HTML or XHTML being used in the document.
• The <html>, <head>, and <body> tag pairs are used to specify the
general structure of the document. The required inclusion of the
xmlns attribute in the <html> tag is a small difference required by
XHTML.
• The <meta> tag used in the examples indicates the MIME(Media
type) type of the document and the character set in use. Notice
that in the XHTML example, the element has a trailing slash to
indicate that it is an empty element.
Hello HTML and XHTML World
• The <title> and </title> tag pair specifies the title of the
document, which generally appears in the title bar of the Web
browser.
• A comment is specified by <!-- -->, allowing page authors to
provide notes for future reference.
• The <h1> and </h1> header tag pair indicates a headline
specifying some important information.
• The <hr> tag, which has a self-identifying end tag (<hr />) under
XHTML, inserts a horizontal rule, or bar, across the screen.
• The <p> and </p> paragraph tag pair indicates a paragraph of
text.
Other Elements in the head
• <base> A <base> tag specifies an absolute URL address that is used to
provide server and directory information for partially specified URL
addresses, called relative links, used within the document:
• <base href="http://htmlref.com/basexeample" >
• Because of its global nature, a <base> tag is often found right after a
<title> tag
• <link> A <link> tag specifies a special relationship between the
current document and another document. Most commonly, it is used
to specify a style sheet used by the document
• <link rel="stylesheet" media="screen" href="global.css"
type="text/css" >
Other Elements in the head
• <object> An <object> tag allows programs and other binary objects to be
directly embedded in a Web page.
• <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width="0" height="0" id="HiddenFlash" > <param name="movie"
value="flashlib.swf" /></object>

• <script> A <script> tag allows scripting language code to be either directly


embedded within,
<script type="text/javascript">
alert("Hi from JavaScript!");
/* more code below */
</script
Other Elements in the head
• <style> A <style> tag is used to enclose document-wide style
specifications, typically in Cascading Style Sheet (CSS) format, relating
to fonts, colors, positioning, and other aspects of content
presentation:
<style type="text/css" media="screen">
h1 {font-size: xx-large; color: red; font-style: italic;}
/* all h1 elements render as big, red and italic */
</style>
A visual overview of all the items presented in the body is shown here:
A visual overview of all the items presented in the body is shown here:
Hello HTML and XHTML World
• The <em> and </em> tag pair surrounds a small piece of text to
emphasize which a browser typically renders in italics.
Browsers and (X)HTML
Browsers and (X)HTML
The Rules of (X)HTML
• 1. HTML Is Not Case Sensitive,
XHTML Is These markup examples are all equivalent under traditional
HTML:
<B>Go boldly</B>
<B>Go boldly</b>
<b>Go boldly</B>
<b>Go boldly</b>
The Rules of (X)HTML
• Attribute Values May Be Case Sensitive
• Consider <img SRC="test.gif"> and <IMG src="test.gif">. Under
traditional HTML, these are equivalent because the <img> tag and the
src attribute are not case sensitive.
• However, given XHTML, they should always be lowercase. However,
just because attribute names are not case sensitive under traditional
HTML, this doesn’t mean every aspect of attributes is case insensitive.
The Rules of (X)HTML
• (X)HTML Is Sensitive to a Single Whitespace Character
• Any white space between characters displays as a single space. This includes
all tabs, line breaks, and carriage returns.
• (X)HTML Follows a Content Model
• All forms of markup support a content model that specifies that certain
elements are supposed to occur only within other elements. For example,
markup like this
<ul>
<p>What a simple way to break the content model!</p>
</ul>
The Rules of (X)HTML
• Elements Should Have Close Tags Unless Empty
• Under traditional HTML, some elements have optional close tags. For
example, both of the paragraphs here are allowed, although the second one is
better:
• <p>This isn't closed
• <p>This is</p>

• Unused Elements May Minimize


• Sometimes tags may not appear to have any effect in a document. Consider,
for example, the <p> tag, which specifies a paragraph.
The Rules of (X)HTML
• Elements Should Nest
• A simple rule states that tags should nest, not cross; thus
• <b><i>is in error as tags cross</b></i>
• whereas
• <b><i>is not since tags nest</i></b>
The Rules of (X)HTML
• Attributes Should Be Quoted
• Entities Should Be Used for Special Characters
• Browsers Ignore Unknown Attributes and Elements
Major Themes of (X)HTML
• Logical and Physical Markup
• No introduction to (X)HTML would be complete without a discussion of the
logical versus physical markup battle.
• Physical markup refers to using a markup language such as (X)HTML to make
pages look a particular way;
• logical markup refers to using (X)HTML to specify the structure or meaning of
content while using another technology, such as CSS, to designate the look of
the page.
The Future of Markup—Two Paths?
XHTML: Web Page Markup XML Style
• HTML using XML that attempts to change the direction and use of HTML to
the way it ought to be.
• XHTML-conforming browser shouldn’t render a page at all if it doesn’t
conform to the standard, though this is highly unlikely to happen because
browsers resort to a backward-compatibility quirks mode to display such
documents.
The Future of Markup—Two Paths?
XHTML: Web Page Markup XML Style
• Example for adding an XML directive and forcing the MIME type to be XML.
The Future of Markup—Two Paths?
XHTML: Web Page Markup XML Style
The Future of Markup—Two Paths?
HTML5: Back to the Future
The Future of Markup—Two Paths?
HTML5: Back to the Future
All that is different in this example is that the <!DOCTYPE> statement is
much simpler. In fact, the specific idea of using SGML and performing
validation does not apply to HTML5.
However, the syntax checking benefits of validation lives on and is now being
called conformance checking and for all intents and purposes is the same.

You might also like