HTML and CSS Basics for Web Programming

Basics iFour
of HTML
and CSS and Web
Consultancy
Programming Part 2
HTML
HTML is amarkuplanguage fordescribingweb documents (web pages).
HTML stands forHyperTextMarkupLanguage
A markup language is a set ofmarkup tags
HTML documents are described byHTML tags
Each HTML tagdescribesdifferent document content
Hypertext 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 wont cover much html per se.
http://www.ifour-consul
ASP.NET Software company

India
HTML Versions and DOCTYPE

Version
Year
HTML
1991
HTML+
1993
HTML 2.0
1995
HTML 3.2
1997
HTML 4.01
1999
XHTML
2000
HTML5
2012
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"http://www.w3.org/TR/html4/lo
ose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/D
TD/xhtml1-transitional.dtd">

India
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"
Attribute Description
alt
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.

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 page
Use a different syntax that HTML/XHTML
Work with the common visual browsers (Internet Explorer, FireFox, Opera)
Used properly, can great simplify visual design, site management and
content maintenance

India
CSS Type
CSS styling can be added to HTML elements the following 3 ways:
Inline - using the styleattributein HTML elements
Internal - using the <style>elementin the <head> section
External - using external CSSfiles
Inline Styles
Inline stylingis useful for applying a unique style to a single HTML element:
Inline styling uses thestyle attribute.
This line styling changes the text color and the left margin of single
paragraph:
Example
<pstyle="color:green;margin-left:20px;">This is a paragraph.</p>

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

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

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

India
The id Selector
The 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;
}

India
Comparing HTML Code to CSS Code

India
The class Selector

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

India
Summery
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 users
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 dont use CSS.
Top-of-the-page styles
The linked CSS document
Inline styles

India
References
W3schools.com
Google.co.in
W3.org

India

HTML and CSS Basics for Web Programming

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML and CSS Basics for Web Programming

Uploaded by

Copyright:

Available Formats

Basics iFour

parser) and content is displayed.

ASP.NET Software company

HTML Versions and DOCTYPE

ASP.NET Software company

HTML elements can have attributes

Specifies an alternative text for an image

Specifies that an input element should be disabled

Specifies the URL (web address) for a link

Specifies a unique id for an element

Specifies the URL (web address) for an image

Specifies an inline CSS style for an element

Specifies extra information about an element (displayed as a tool tip)

Specifies the value (text content) for an input element.

ASP.NET Software company

Cascading Style Sheets (CSS)

A Cascading Style Sheet is a file with a list of formatting instructions.

layout of your web pages.

ASP.NET Software company

ASP.NET Software company

External CSS Example

External style sheet are ideal when

ASP.NET Software company

Internal CSS Example

An internal style sheet can be used to define a

ASP.NET Software company

ASP.NET Software company

you want to find a single, unique element.

ASP.NET Software company

Comparing HTML Code to CSS Code

ASP.NET Software company

The class Selector

by the name of the class:

ASP.NET Software company

ASP.NET Software company

ASP.NET Software company

You might also like