Basics of html and css and web programming part 2

iFour Consultancy Basics of HTML and CSS and Web Programming Part 2

HTML
 HTML is a markup language for describing web documents (web pages).
 HTML stands for Hyper Text Markup Language
 A markup language is a set of markup tags
 HTML documents are described by HTML tags
 Each HTML tag describes different 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 won’t cover much html per se.
http://www.ifour-consultancy.com 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/loose.
dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/x
html1-transitional.dtd">

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.

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

CSS Type
CSS styling can be added to HTML elements the following 3 ways:
 Inline - using the style attribute in HTML elements
 Internal - using the <style> element in the <head> section
 External - using external CSS files
Inline Styles
 Inline 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>

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

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

Comparing HTML Code to CSS Code

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

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

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

Basics of html and css and web programming part 2

Recomendados

Recomendados

Mais conteúdo relacionado

Último

Último (20)

Destaque

Destaque (20)

Basics of html and css and web programming part 2

Notas do Editor