design dream

Post on 27-Jan-2015

106 Views

Category:

Education

0 Downloads

Preview:

Click to see full reader

DESCRIPTION

These are the slides for Design Dream workshop at UVPCE on 19 august 2010

TRANSCRIPT

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

top related