BPLCK105A - Module 1 - Final

BPLCK105A – Introduction to Web
(Integrated)
Ms. Sonia Das

Asst Professor – CSE,
TJIT, Bangalore
BPLCK205A –Introduction to Web Module 1

1
Suggested Resources:
• Books (Title of the Book/Name of the author/Name of the
publisher/Edition and Year)
• TextBook-1: HTML & CSS: The Complete Reference

Thomas A. Powell, , Fifth Edition, Tata McGraw Hill,
• TextBook-2: WEB PROGRAMMING with HTML5, CSS and

JavaScript, John Dean, Jones & Bartlett Learning, First
Edition
BPLCK205A –Introduction to Web

2
Module 1
Traditional HTML and XHTML

3
Module 2: HTML 5
Module 3: CSS
Module 4: Tables and CSS, Links and Images
Module 5: Introduction to JavaScript : Functions, DOM, Forms

and Event Handlers

4
https://sites.google.com/u/7/d/1AJk83uItvY3xossu1xTimo7PN31nJ9pl/preview

5
Introduction
• Markup languages are ubiquitous in everyday

computing.
• In the case of Web documents, markup in the form

of traditional Hypertext Markup Language (HTML) and
its Extensible Markup Language (XML)-focused
variant, XHTML, is a little more obvious.
• Markup languages are used to inform Web browsers

about page structure and, presentation.

6
First Look at HTML and XHTML
• HTML is short for Hypertext Markup Language. It is

used to create websites and web applications.
• 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.

7
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.

8
HTML XHTML
(Hypertext Markup Language) (Extensible Hypertext Markup
Language)
HTML is the older of the two XHTML is an updated version
and is still widely used that is stricter and XML-based
HTML uses tags to define the XHTML requires tags to be
structure and content of a web properly nested and closed
page
HTML has several versions, XHTML has two versions,
including HTML4 and the more XHTML1.0 and XHTML1.1.
recent HTML5

9
Difference between HTML and XHTML
HTML XHTML
(Hypertext Markup (Extensible Hypertext
Language) Markup Language)
Syntax allows for more flexibility in all tags must be closed and
how tags are used nested correctly
Case not case-sensitive. This case-sensitive, meaning that
sensitivity means that in HTML, tags all elements and attributes
can be written in must be written in lowercase
uppercase, lowercase, or
mixed case
Document more flexibility in how the XHTML requires a stricter
Type DTD is implemented adherence to the Document
Definition Type Definition (DTD)
(DTD)
XML No strict rules is stricter and follows stricter
compliance rules than HTML
10
The Most Important Differences from HTML

• <!DOCTYPE> is mandatory
• The xml ns 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

11
• XHTML - <!DOCTYPE ....> Is Mandatory

• An XHTML document must have an XHTML <!
DOCTYPE> declaration.
• The <html>, <head>, <title>, and <body>
elements must also be present,
• The xml ns attribute in <html> must specify the
xml namespace for the document.

12

13
• XHTML Elements Must be Properly

Nested
• In XHTML, elements must always be
properly nested within each other, like this:

14
• XHTML Elements Must Always be Closed

• In XHTML, elements must always be
closed, like this:

15
• XHTML Empty Elements Must Always be
Closed
• In XHTML, empty elements must always
be closed, like this:

16
• XHTML Elements Must be in Lowercase
• In XHTML, element names must always
be in lowercase, like this:

17
• XHTML Attribute Names Must be in

Lowercase
• In XHTML, attribute names must always
be in lowercase, like this:

18
• XHTML Attribute Values Must be Quoted

• In XHTML, attribute values must always
be quoted, like this:

19
• XHTML Attribute Minimization is

Forbidden.

20

21
Hello HTML and XHTML World
HTML Code

22
https://www.htmlref.com/ch1/html4helloworld.html
Output:

23
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello HTML5 World</title>
</head>
<body>
<h1>Welcome to the Future World of HTML5</h1>
<hr>
HTML5 really isn't so hard!
Soon you will &hearts; using HTML.
You can put lots of text here if you want.
We could go on and on with fake text for you
to read, but let's get back to the book.
</body>
</html>

24
https://www.htmlref.com/ch1/html5helloworld.html
Output:

25
The most common elements used in (X)HTML documents, including:

 <!DOCTYPE>: Indicates the particular version of HTML
or XHTML being used in the document. The first example uses the strict 4.01
specification, the second uses a reduced form for HTML5 the meaning of
which will be explained a bit later on, and the final example uses the XHTML
1.0 strict specification.
 <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 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.
Note: A MIME (Multipurpose Internet Mail Extensions) type (now properly
called "media type", but also sometimes "content type") is a string sent
along with a file indicating the type of the file (describing the content
format, for example, a sound file might be labeled audio/ogg , or an image
file image/png )
Dr. Asha S Manek 26
 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 and paragraph tag pair indicates a paragraph of text.
 A special character is inserted using a named entity (&hearts;), which in this
case inserts a heart dingbat character into the text.
 The and tag pair surrounds a small piece of text to emphasize
which a browser typically renders in italics.

27

28
HTML and XHTML: Version History

29

30

31
HTML and XHTML DTDs:
The Specifications Up Close
 All (X)HTML documents should follow a formal structure defined by the
World Wide Web Consortium (W3C; www.w3.org), which is the primary
organization that defines Web standards.
 Traditionally, the W3C defined HTML as an application of the Standard
Generalized Markup Language (SGML).
 SGML is a technology used to define markup languages by specifying the
allowed document structure in the form of a document type definition
(DTD).
 A DTD indicates the syntax that can be used for the various elements of a
language such as HTML.

32
 The first line is a comment indicating what is below it.

 The second line defines the P element, indicating that it has a start tag (), as
shown by the dash, and an optional close tag (), as indicated by the O.
 The type of content that is allowed to be placed within a P element is defined by the
entity %inline, which acts here as a shorthand for various other
elements and content.
 This idea of only allowing some types of elements within other elements is called the
content model.
 If you further explore the specification to see what that
%inline entity maps out to, you will see that it contains numerous other elements, such
as EM, STRONG, and so on, as well as regular typed text.

33
 The final line defines the attributes for a tag as indicated by the entity
%attrs which then expands to a number of entities like %core, %i18n, and
%core events which finally expand into a variety of attributes like id, class,
style, title, lang, dir, onclick, ondblclick, and many more.

34
 The relationship between the various markup technologies is shown here:

35
 The common
HTML Doctype
Declarations

36
(X)HTML Document Structure
• The DTDs define the
allowed syntax for
documents written in that
version of (X)HTML.
• In this graphical
representation, the <!
DOCTYPE> indicator,
which, as previously
mentioned, shows the
particular version of HTML
being used, in this case 4.01
Transitional.
• Within a root html element,
the basic structure of a
document reveals two
elements: the head and the
body.
37
• The head element contains
information and tags describing
the document, such
as its title, while the body
element houses the document
itself, with associated markup
required to specify its structure.

38
• The structure of a non-framed (X)HTML document breaks out like so:

39
Origins and Evolution of HTML
• Reasons to use XHTML, rather than HTML:
1. HTML has lax syntax rules, leading to sloppy and sometime ambiguous documents
– XHTML syntax is much more strict, leading to clean and clear documents in a standard form
2. HTML processors do not even enforce the few syntax rule that do exist in HTML
3. The syntactic correctness of XHTML documents can be validated
Basic Syntax
• Elements are defined by tags (markers)
– Tag format:
• Opening tag: <name>
• Closing tag: </name>
– The opening tag and its closing tag together specify a container for the content they enclose

40
The Rules of (X)HTML
1. HTML Is Not Case Sensitive
Go boldly
Go boldly
Go boldly
Go boldly

41
2. 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.
42
3. (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.
4. (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.
<ul>
What a simple way to break the content
model!
</ul>
43
5. 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:
• This isn't closed
• This is
6. Unused Elements May Minimize

• Sometimes tags may not appear to have any effect
in a document. Consider, for example, the tag,
which specifies a paragraph.
44
7. Elements Should Nest

A simple rule states that tags should nest, not
cross; thus
is in error as tags cross
whereas
is not since tags nest

45
8. Attributes Should Be Quoted

9. Entities Should Be Used for
Special Characters
10. Browsers Ignore Unknown
Attributes and Elements

46
Major Themes of (X)HTML
Logical and Physical Markup

• 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.

47
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.
48
Two Paths?

• Example for adding an XML directive and forcing the MIME
type to be XML.

49
Two Paths?

50
Two Paths?

51
Two Paths?
HTML5: Back to the Future

52
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.

53
54

BPLCK105A - Module 1 - Final

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

BPLCK105A - Module 1 - Final

Uploaded by

Copyright:

Available Formats

BPLCK105A – Introduction to Web

Ms. Sonia Das

BPLCK205A –Introduction to Web Module 1

• TextBook-1: HTML & CSS: The Complete Reference

• TextBook-2: WEB PROGRAMMING with HTML5, CSS and

BPLCK205A –Introduction to Web

BPLCK205A –Introduction to Web

Module 4: Tables and CSS, Links and Images

Module 5: Introduction to JavaScript : Functions, DOM, Forms

BPLCK205A –Introduction to Web

BPLCK205A –Introduction to Web

• Markup languages are ubiquitous in everyday

• In the case of Web documents, markup in the form

• Markup languages are used to inform Web browsers

BPLCK205A –Introduction to Web

• HTML is short for Hypertext Markup Language. It is

BPLCK205A –Introduction to Web

BPLCK205A –Introduction to Web

BPLCK205A –Introduction to Web

The Most Important Differences from HTML

BPLCK205A –Introduction to Web

• XHTML - <!DOCTYPE ....> Is Mandatory

BPLCK205A –Introduction to Web

BPLCK205A –Introduction to Web

• XHTML Elements Must be Properly

BPLCK205A –Introduction to Web

• XHTML Elements Must Always be Closed

BPLCK205A –Introduction to Web

BPLCK205A –Introduction to Web

BPLCK205A –Introduction to Web

• XHTML Attribute Names Must be in

BPLCK205A –Introduction to Web

• XHTML Attribute Values Must be Quoted

BPLCK205A –Introduction to Web

• XHTML Attribute Minimization is

BPLCK205A –Introduction to Web

BPLCK205A –Introduction to Web

BPLCK205A –Introduction to Web

BPLCK205A –Introduction to Web

BPLCK205A –Introduction to Web

BPLCK205A –Introduction to Web

The most common elements used in (X)HTML documents, including:

BPLCK205A –Introduction to Web

BPLCK205A –Introduction to Web

BPLCK205A –Introduction to Web

BPLCK205A –Introduction to Web

BPLCK205A –Introduction to Web

BPLCK205A –Introduction to Web

 The first line is a comment indicating what is below it.

BPLCK205A –Introduction to Web

BPLCK205A –Introduction to Web

BPLCK205A –Introduction to Web

BPLCK205A –Introduction to Web

BPLCK205A –Introduction to Web

BPLCK205A –Introduction to Web

BPLCK205A –Introduction to Web

1. HTML Is Not Case Sensitive

BPLCK205A –Introduction to Web

2. Attribute Values May Be Case Sensitive

3. (X)HTML Is Sensitive to a Single

5. Elements Should Have Close Tags Unless

6. Unused Elements May Minimize

7. Elements Should Nest