Scribd
Upload
19 views

CourseLecture1,2 Introduction

Uploaded by

jay.abaleta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
19 views

CourseLecture1,2 Introduction

Uploaded by

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

Course Learning

Review XHTML standards and CSS


for Web Page Design
What is XHTML?
• XHTML stands for EXtensible HyperText Markup
Language.
• It is a cross between HTML and XML language.
• It is the next step in the evolution of the internet.
• XHTML is almost identical to HTML but it is stricter
than HTML.
• It is supported by all major browsers.
Difference between HTML and XHTML
• <!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
Example of XHTML documents
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.
Example of XHTML documents
XHTML Elements Must be Properly Nested
Correct:
<b><i>Some text</i></b>
Wrong:
<b><i>Some text</b></i>

XHTML Elements Must Always be Closed


Correct:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Wrong:
<p>This is a paragraph
<p>This is another paragraph
Example of XHTML documents
XHTML Empty Elements Must Always be Closed

Correct:
A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />

Wrong:
A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">
Example of XHTML documents
XHTML Elements Must be in Lowercase

Correct:
<body>
<p>This is a paragraph</p>
</body>

Wrong:
<BODY>
<P>This is a paragraph</P>
</BODY>
Example of XHTML documents
XHTML Attribute Names Must be in Lowercase

Correct:
<a href="https://www. xhtmlweb.com/html/">Visit our page</a>

Wrong:
<a HREF="https://www.xhtmlweb.com/html/">Visit our Page</a>

XHTML Attribute Values Must be Quoted

Correct:
<a href="https://www.w3schools.com/html/"> Visit our Page </a>
Wrong:
<a href=https://www.w3schools.com/html/> Visit our Page </a>
Example of XHTML documents
XHTML Attribute Minimization is Forbidden

Correct:
<input type="checkbox" name="vehicle" value="car" checked="checked" />
<input type="text" name="lastname" disabled="disabled" />

Wrong:
<input type="checkbox" name="vehicle" value="car" checked />
<input type="text" name="lastname" disabled />
What is CSS?
• CSS stands for Cascading Style Sheets.
• It is a style sheet language which is used to describe the look
and formatting of a document written in markup language.
• It is generally used with HTML to change the style of web
pages and user interfaces.
• CSS is used along with HTML and JavaScript in most websites
to create user interfaces for web applications and user
interfaces for many mobile applications.
CSS Syntax
A CSS rule set contains a selector and a declaration block.
CSS Syntax
Selector: Selector indicates the HTML element you want to style.
It could be any tag like <h1>, <title> etc.
Declaration Block: The declaration block can contain one or more
declarations separated by a semicolon. For the above example,
there are two declarations:
1.color: yellow;
2.font-size: 11 px;
Each declaration contains a property name and value, separated
by a colon.
Property: A Property is a type of attribute of HTML element. It
could be color, border etc.
Value: Values are assigned to CSS properties. In the above
example, value "yellow" is assigned to color property.
CSS Example:
INLINE CSS
An inline CSS is used to apply a unique style to a single HTML
element.
<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

OUTPUT:
CSS Example:
Internal CSS
An internal CSS is used to define a style for a single HTML page.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Example:
External CSS
An external style sheet is used to define the style for many HTML
pages.
To use an external style sheet, add a link to it in the <head>
section of each html page.
Thank
You

You might also like