Scribd
Upload
15 views

CourseLecture1,2 Introduction

Uploaded by

jay.abaleta
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
15 views

CourseLecture1,2 Introduction

Uploaded by

jay.abaleta
Copyright
© © All Rights Reserved
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