Basics of html and css and web programming part 2

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

http://www.ifour-consultancy.com/



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">






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"






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






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






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






<!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:






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;}






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;}






Comparing HTML Code to CSS Code






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;}






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






W3schools.comGoogle.co.inW3.org

References






Date post:	19-Jun-2015
Category:	Technology
Upload:	ajit-dadresa
View:	217 times
Download:	0 times

Basics of html and css and web programming part 2

Technology