Presentation on html, css

Representing By: Aamir Sohail
Class: RIA
Semester: 6th
Html and cssHtml and css
Department Of Computer ScienceDepartment Of Computer Science
Govt Post Graduate College Dargai MalakandGovt Post Graduate College Dargai Malakand

Page  2
HTMLHTML
Hypertext Markup Language
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

Page  3
Markup LanguageMarkup Language
Markup languages are designed for the
processing, definition and presentation of text.
The language specifies code for formatting, both the layout
and style, within a text file.
The code used to specify the formatting are called tags.
HTML is an example of a widely known and used markup language.

Page  4
HTMLHTML
HTML documents are described by HTML tags
Each HTML tag describes different document content

Page  5
A small HTML document:A small HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Page  6
Example Explained
 The DOCTYPE declaration defines the document type to be
HTML
 The text between <html> and </html> describes an HTML
document
 The text between <head> and </head> provides information
about the document
 The text between <title> and </title> provides a title for the
document
 The text between <body> and </body> describes the visible
page content
 The text between <h1> and </h1> describes a heading
 The text between <p> and </p> describes a paragraph

Page  7
HTML Tags
HTML tags are keywords (tag names) surrounded by angle
brackets:
<tag name>content</tag name>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is
the end tag
The end tag is written like the start tag, but with
a slash before the tag name

Page  8
HTML Page Structure

Page  9
HTML Versions
Since the early days of the web, there have been many
versions of HTML:

Page  10
Example:
Open Notepad
Write the below code
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Page  12
Save the HTML PageSave the HTML Page
Save the file on your computer.
Name the file "index.html" or any other name ending with html
or htm.
You can use either .htm or .html as file extension. There is no
difference, it is up to you.

Page  13
View HTML Page in Your BrowserView HTML Page in Your Browser
Open the saved HTML file in your favorite browser.
To open a file in a browser, double click on the file, or right-
click, and choose open with.
The result will look much like this:

Page  16
CSS
Cascading Style Sheets
CSS is a simple design language intended to simplify the
process of making web pages presentable.
CSS handles the look of a web page.

Page  17
CSSCSS
Using CSS, you can control the color of the text,
the style of fonts,
the spacing between paragraphs,
how columns are sized and laid out,
what background images or colors are used,
layout designs,
variations in display for different devices and screen sizes as
well as a variety of other effects.

Page  18
CSS is easy to learn and understand but it provides
powerful control over the presentation of an HTML
document.
Most commonly, CSS is combined with the markup
languages HTML or XHTML.

Page  19
Types of Cascading Style SheetTypes of Cascading Style Sheet
There are three ways of inserting a style sheet:
i. Inline style
ii. Internal style sheet
iii.External style sheet

Page  20
Inline Styles/Inline CSSInline Styles/Inline CSS
An inline style may be used to apply a unique style for a single
element.
To use inline styles, add the style attribute to the relevant
element. The style attribute can contain any CSS property.
The example below shows how to change the color and the left
margin of a <h1> element:
<h1 style="color:blue;margin-left:30px;">This is
a heading.</h1>

Page  21
Internal Style SheetInternal Style Sheet
An internal style sheet may be used if one single page has a
unique style.
Internal styles are defined within the <style> element, inside
the <head> section of an HTML page:
Example of Internal Style sheet is on the next slide

Page  22
<head>
<style>
body {
    background-color: linen;
}
h1 {
    color: maroon;
    margin-left: 40px;
}
</style>
</head>

Page  23
External Style SheetExternal Style Sheet
With an external style sheet, you can change the look of an
entire website by changing just one file!
Each page must include a reference to the external style
sheet file inside the <link> element. The <link> element goes
inside the <head> section:
<head>
<link rel=“stylesheet” type=“text/css href=“style.css />
</head>

Presentation on html, css

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Presentation on html, css

Similar to Presentation on html, css (20)

More from Aamir Sohail

More from Aamir Sohail (7)

Recently uploaded

Recently uploaded (20)

Presentation on html, css