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> <h1>This is a heading</h1> <p>This is a paragraph.</p> </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> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>

Styling HTML with CSS- External • 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; }

Styling HTML with CSS- External • 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> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>

FYBSC IT Web Programming Unit I HTML 5 & andcss

More Related Content

What's hot

Similar to FYBSC IT Web Programming Unit I HTML 5 & andcss

More from Arti Parab Academics

Recently uploaded

FYBSC IT Web Programming Unit I HTML 5 & andcss