Embed Size (px)
DESCRIPTION
These are the slides for Design Dream workshop at UVPCE on 19 august 2010
Citation preview
HTML and CSSBasics For BeginnersBy- Rajesh Vishnani
IT Consultant
Something Interesting
The first person ever to dream of programming a Computer was a WOMAN called
ADA LOVELACE
Ada Lovelace- First Programmer Ever
Our List of To- Do
Basic tags in HTML and Basic Web Structure
Creating advance Web Template Structure
Writing simple powerful CSS Design a simple Web Page with
good Looks
BASICS OF HTML
What is HTML?
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is a markup language
A markup language is a set of markup tags
HTML uses markup tags to describe web pages
HTML Tags HTML markup tags are usually called
HTML tags HTML tags are keywords surrounded
by angle brackets “<>“ like <html> HTML tags normally are pairs like
<b> and </b> The first tag in a pair is the start tag,
the second tag is the end tag Start and end tags are called opening
tags and closing tags
HTML Headings <h1> defines the largest heading.
<h6> defines the smallest heading.
HTML Paragraphs
Paragraphs are defined with the <p> tag.
HTML Text Formatting
HTML Text Formatting TagsTag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
HTML Hyperlinks (Links)
Links are specified in HTML using the <a> tag.
The <a> tag can be used in two ways:–To create a link to another document,
by using the href attribute–To create a bookmark inside a
document, by using the name attribute
HTML Images
HTML Styles
HTML Lists The most common HTML lists are
ordered and unordered lists:
<html><body><h4>An Unordered List:</h4><ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>
<h4>An Ordered List:</h4><ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol></body></html>
HTML Tables
Tables are defined with the <table> tag.
A table is divided into rows (with the <tr> tag),
each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell.
A <td> tag can contain text, links, images, lists, forms, other tables, etc.
<html><body><table border="1"><tr><th>Header 1</th><th>Header 2</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table> </body></html>
HTML Form TagsTag Description
<form> Defines an HTML form for user input
<input /> Defines an input control
<textarea> Defines a multi-line text input control
<label> Defines a label for an input element
<fieldset> Defines a border around elements in a form
<legend> Defines a caption for a fieldset element
<select> Defines a select list (drop-down list)
<optgroup> Defines a group of related options in a select list
<option> Defines an option in a select list
<button> Defines a push button
CSS
In HTML 4.0 all formatting can be removed from the HTML document, and stored in a style sheet.Because HTML 4.0 separates the layout from the document structure, we have what we always needed: Total control of layout, without messing up the document content
How to Use Styles
When a browser reads a style sheet, it will format the document according to it.
There are three ways of inserting a style sheet:
1. External style sheet2. Internal style sheet3. Inline styles
External Stylesheets
An external style sheet is ideal when the style is applied to many pages.
With an external style sheet, you can change the look of an entire Web site by changing one file.
Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the <head> section:
<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
Internal Stylesheets
An internal style sheet can be used if one single document has a unique style.
Internal styles are defined in the <head> section of an HTML page, by using the <style> tag
<head><style type="text/css">body {background-color:yellow}p {color:blue}</style></head>
Inline Stylesheets An inline style can be used if a unique
style is to be applied to one single occurrence of an element.
To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the text color and the left margin of a paragraph:
<p style="color:blue;margin-left:20px">This is a paragraph.</p>
CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:
CSS Id and Class
The id Selector The id selector is used to specify a
style for a single, unique element. The id selector uses the id
attribute of the HTML element, and is defined with a "#".
CSS Id and Class
The style rule below will be applied to the element with id="para1":
Example #para1
{text-align:center;color:red;}
The class Selector
The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.
This allows you to set a particular style for any HTML elements with the same class.
The class Selector
The class selector uses the HTML class attribute, and is defined with a "."
In the example below, all HTML elements with class="center" will be center-aligned:
.center {text-align:center;} You can also specify that only specific HTML
elements should be affected by a class. In the example below, all p elements with
class="center" will be center-aligned: p.center {text-align:center;}
CSS Background
CSS background properties are used to define the background effects of an element.
CSS properties used for background effects:1. background-color2. background-image3. background-repeat4. background-attachment5. background-position
Back Ground Examples
body {background-color:#b0c4de;} body {background-image:
url('paper.gif');} body
{background-image:url('gradient2.png');background-repeat:repeat-x;}
CSS TextProperty Description
color Sets the color of a text
line-height Sets the distance between lines
letter-spacing Increase or decrease the space between characters
text-align Aligns the text in an element
text-decoration Adds decoration to text
text-indent Indents the first line of text in an element
text-transform Controls the letters in an element
vertical-align Sets the vertical alignment of an element
word-spacing Increase or decrease the space between words
CSS Font
Property Description
font Sets all the font properties in one declaration
font-family Specifies the font family for text
font-size Specifies the font size of text
font-style Specifies the font style for text
font-variant Specifies whether or not a text should be displayed in a small-caps font
font-weight Specifies the weight of a font
CSS Float This property is used to decide if the element
can also accommodate other element beside it There are two values for float property
1. Left: allows other elements on right of it2. Right: allows other elements on right of it
Usually elements float left .thumbnail
{float:left;width:110px;height:90px;margin:5px;}
Finally
Put all these elements together and create your home page. Make it attractive.
You don’t need flash, photoshop etc to do that
All you need is imagination
Thanks
Speaker:
Mr. Rajesh S VishnaniIT Consultant
