FYBSC IT Web Programming Unit I HTML 5 & andcss

• HTML5 is the fifth revision and newest version of the HTML standard.
• It offers new features that provide not only rich media support, but also
enhance support for creating web applications that can interact with the
user, his/her local data, and servers, more easily and effectively than
was possible previously.
• Some HTML5 features remain unsupported by some browsers.
However, Gecko, and by extension, Firefox, has very good support for
HTML5, and work continues toward supporting more of its features.
Introduction

• Accessibility
• Video and Audio Support
• Doctype
• Cleaner Code
• Smarter Storage
• Better Interactions
• Game Development
• Legacy/Cross Browser Support
• Mobile, Mobile, Mobile
• It’s the Future, Get With It!
Why HTML5?
Detailed Features of HTML 5

• HTML style attribute.
• HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
• Formatting elements were designed to display special types of text:
• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Small text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
Formatting text by using tags

• There are three types of lists:
• Unordered Lists
• Ordered List
• Definition List
• Parents have the right to appeal the placement of their child in a special
education class.
• Parents have the right to extra assistance from the school, including counseling,
tutorial, and remedial programs.
• Example <ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Using lists and backgrounds

Unordered HTML List
• An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.
• The list items will be marked with bullets (small black circles) by
default
• he CSS list-style-type property is used to define the style of the list
item marker
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked

Ordered HTML List
• An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.
• The list items will be marked with numbers by default:
• Ordered HTML List - The Type Attribute
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

HTML Description Lists
• HTML also supports description lists.
• A description list is a list of terms, with a description of each term.
• The <dl> tag defines the description list, the <dt> tag defines the term
(name), and the <dd> tag describes each term:
• <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

HTML <body> background Attribute
• Specify a background image for an HTML document
• <body background="bgimage.jpg">
• Specify a background color for an HTML document:
• <html>
<body bgcolor="#E6E6FA">
<h1>Hello world!</h1>
<p>FYBSC IT</p>
</body>
</html>

• Links are found in nearly all web pages. Links allow users to click their
way from page to page.
• HTML Links - Hyperlinks
• You can click on a link and jump to another document.
• When you move the mouse over a link, the mouse arrow will turn into
a little hand.
• Note: A link does not have to be text. It can be an image or any other
HTML element.
• Syntax: <a href="url">link text</a>
• Example: <a href="http://www.google.com/html/">Gmail</a>
Creating hyperlinks and anchors

Style sheets
• Setting the style of an HTML element, can be done with the style attribute.
• The HTML style attribute has the following syntax:
• <tagname style="property:value;">
• HTML Background Color
• The background-color property defines the background color for an HTML
element.
• This example sets the background color for a page to powderblue:
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

Styling HTML with CSS
• CSS stands for Cascading Style Sheets.
• CSS describes how HTML elements are to be displayed on screen,
paper, or in other media.
• CSS saves a lot of work. It can control the layout of multiple web pages
all at once.
• CSS can be added to HTML elements in 3 ways:
• Inline - by using the style attribute in HTML elements
• Internal - by using a <style> element in the <head> section
• External - by using an external CSS file
• The most common way to add CSS, is to keep the styles in separate
CSS files.

Styling HTML with CSS-Inline
• An inline CSS is used to apply a unique style to a single HTML
element.
• An inline CSS uses the style attribute of an HTML element.
• This example sets the text color of the <h1> element to blue:
• Example:
<h1 style="color:blue;">This is a Blue Heading</h1>

Styling HTML with CSS- Internal
• An internal CSS is used to define a style for a single HTML page.
• An internal CSS is defined in the <head> section of an HTML page,
within a <style> element:
• Example: <html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
</body>
</html>

Styling HTML with CSS- External
• An external style sheet is used to define the style for many HTML pages.
• With an external style sheet, you can change the look of an entire web site, by changing
one file!
• To use an external style sheet, add a link to it in the <head> section of the HTML page:
• Example: <html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
</body> </html>

• An external style sheet can be written in any text editor. The file must not contain any
HTML code, and must be saved with a .css extension.
• Here is how the “mystyles.css" looks:
• Example:
• body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

• An external style sheet can be written in any text editor. The file must not contain any
HTML code, and must be saved with a .css extension.
• Here is how the “Externalstyles.html" looks:
• Example:
<html>
<head>
<title>External CSS</title>
<link rel="stylesheet" type="text/css" href="myFirstCSS.css">
</head>
<body>
</body>
</html>

FYBSC IT Web Programming Unit I HTML 5 & andcss

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a FYBSC IT Web Programming Unit I HTML 5 & andcss

Semelhante a FYBSC IT Web Programming Unit I HTML 5 & andcss (20)

Mais de Arti Parab Academics

Mais de Arti Parab Academics (20)

Último

Último (20)

FYBSC IT Web Programming Unit I HTML 5 & andcss