basics of html and css and web programming part 2
DESCRIPTION
Basics of HTML/CSS for web programming Part 2. http://www.ifour-consultancy.comTRANSCRIPT
iFour Consultancy
Basics of HTML and CSS and Web Programming Part 2
HTML is a markup language for describing web documents (web pages).HTML stands for Hyper Text Markup LanguageA markup language is a set of markup tagsHTML documents are described by HTML tagsEach HTML tag describes different document contentHypertext markup language is processed by the browser (or some html parser) and
content is displayed.The language consists of tags opening and closing instructions, like font settings,
anchors, applets, and forms. The material (data) thus presented is said to be “marked up” using the defined tags.This course won’t cover much html per se.
HTML
http://www.ifour-consultancy.com
ASP.NET Software company India
Version YearHTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2012
HTML Versions and DOCTYPE
HTML5<!DOCTYPE html>
HTML 4.01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN“"http://www.w3.org/TR/html4/loose.dtd">XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.ifour-consultancy.com
ASP.NET Software company India
Attribute Descriptionalt Specifies an alternative text for an image
disabled Specifies that an input element should be disabled
href Specifies the URL (web address) for a link
id Specifies a unique id for an element
src Specifies the URL (web address) for an image
style Specifies an inline CSS style for an element
title Specifies extra information about an element (displayed as a tool tip)
value Specifies the value (text content) for an input element.
HTML Attributes• HTML elements can have attributes• Attributes provide additional information about an element• Attributes are always specified in the start tag• Attributes come in name/value pairs like: name="value"
http://www.ifour-consultancy.com
ASP.NET Software company India
Cascading Style Sheets (CSS)
What is style?Style is a list of formatting instructions.
A Cascading Style Sheet is a file with a list of formatting instructions. CSS style sheets are the modern way to control the appearance and layout of your
web pages.4.0 and up Navigator and IE fully support CSS.Are used to control how elements are presented in the Web pageUse a different syntax that HTML/XHTMLWork with the common visual browsers (Internet Explorer, FireFox, Opera)Used properly, can great simplify visual design, site management and content
maintenance
http://www.ifour-consultancy.com
ASP.NET Software company India
CSS styling can be added to HTML elements the following 3 ways:Inline - using the style attribute in HTML elementsInternal - using the <style> element in the <head> sectionExternal - using external CSS files
Inline StylesInline styling is useful for applying a unique style to a single HTML element:Inline styling uses the style attribute.This line styling changes the text color and the left margin of single paragraph:Example<p style="color:green;margin-left:20px;">This is a paragraph.</p>
CSS Type
http://www.ifour-consultancy.com
ASP.NET Software company India
External CSS Example
External style sheet are ideal when the style is applied to many pages.With external style sheets, you can change the look of an entire site by changing one file.
External styles are defined in the <head> section of an HTML page, in the <link> element
http://www.ifour-consultancy.com
ASP.NET Software company India
<!DOCTYPE html><html><head><style> body {background-color:lightgrey} h1 {color:blue} p {color:green}</style></head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body></html>
Internal CSS Example
An internal style sheet can be used to define a common style for all HTML elements on a page.
Internal styles are defined in the <head> section of an HTML page, in the <style> element:
http://www.ifour-consultancy.com
ASP.NET Software company India
CSS Selector
CSS selectors allow you to select and manipulate HTML element(s).CSS selectors are used to "find" (or select) HTML elements based on their id, classes,
types, attributes, values of attributes and much more.The element SelectorThe element selector selects elements based on the element name.You can select all <p> elements on a page like this: (all <p> elements will be center-
aligned, with a red text color) p { text-align: center; color: red;}
http://www.ifour-consultancy.com
ASP.NET Software company India
The id SelectorThe id selector uses the id attribute of an HTML tag to find the specific element.An id should be unique within a page, so you should use the id selector when you want to
find a single, unique element.To find an element with a specific id, write a hash character, followed by the id of the
element.The style rule below will be applied to the HTML element with id="para1":
#para1 { text-align: center; color: red;}
http://www.ifour-consultancy.com
ASP.NET Software company India
Comparing HTML Code to CSS Code
http://www.ifour-consultancy.com
ASP.NET Software company India
The class SelectorThe class selector finds elements with the specific class.The class selector uses the HTML class attribute.To find elements with a specific class, write a period character, followed by the name of
the class:In the example below, all HTML elements with class="center" will be center-aligned:
.center { text-align: center; color: red;}
http://www.ifour-consultancy.com
ASP.NET Software company India
HTML is a language to create Web documents. It is superceded by XHTML, but will continue to work in browsers for a few years. HTML tags provide structure for text or other information in a document.
There are 216 Web-safe colours. While you can use 16million colours, if a user’s monitor cannot display that colour, their computer will ‘dither’ to the nearest colour. To anticipate this, use the Web-safe palette or adaptive dither.
There are four ways to encode style information in HTML documents:· The HTML Styles method if you don’t use CSS. · Top-of-the-page styles · The linked CSS document· Inline styles
Summery
http://www.ifour-consultancy.com
ASP.NET Software company India
W3schools.comGoogle.co.inW3.org
References
http://www.ifour-consultancy.com
ASP.NET Software company India