Html+css web layout

665 views
568 views

Published on

Creating Web Layout using HTML and CSS

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
665
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Html+css web layout

  1. 1. Webdesignin g HTML+CSS { } </> Layout Creation By: Vijay Kumar Verma (VJY) Roll No-1326910 28-Feb-2014 1
  2. 2. Purpose Understand HTML+CSS What is Class & ID How to work with DIV Layout From scratch BY: VJY 2/28/2014 2
  3. 3. What is HTML & CSS | A Markup Language to Create Website. | CSS is used to describing the look and formatting of webpages. | Pure HTML is just responsible to create simple webpages | XHTML have strict rules for their syntax. | DHTML= HTML+CSS+DOM+JS | The DOM defines a standard for accessing documents. BY: VJY 2/28/2014 3
  4. 4. Now Understand HTML+CSS What is Class & ID How to work with DIV Layout From scratch BY: VJY 2/28/2014 4
  5. 5. CSS Class & ID Selector Declaration .myid { color: #fff; font-face:Arial; } Property Value | Id selector: style for a single, unique element. | (#) dot is used for Id | Class selector: style for a group of elements. | (.) dot is used for class BY: VJY 2/28/2014 5
  6. 6. Now Understand HTML+CSS What is Class & ID How to work with DIV Layout From scratch BY: VJY 2/28/2014 6
  7. 7. DIV Tag | Defining a section of your document. | Group elements | Block Level Tag. | It create layers. | Faster Loading | Smaller file size BY: VJY 2/28/2014 7
  8. 8. DIV Tag (Cont..) <body> <div> <!—Wrapper--> <div>First Block</div> <div>Second Block</div> </div> </body> BY: VJY 2/28/2014 8
  9. 9. Now Understand HTML+CSS What is Class & ID How to work with DIV Layout From scratch BY: VJY 2/28/2014 9
  10. 10. Web Layout | Web layouts ensure that art is properly oriented to match the design scheme and specification of form and fill equipment. | Types: Fixed b. Liquid c. Elastic a. BY: VJY 2/28/2014 10
  11. 11. Example BY: VJY 2/28/2014 11
  12. 12. How to create? BY: VJY 2/28/2014 12
  13. 13. Requirements | A text editor (Notepad++) | An image editor (Photoshop) | Browser (Firefox) | Some passion and mind  BY: VJY 2/28/2014 13
  14. 14. Have Any Question? Just Ask! Post Query On facebook.com/groups/sviet.mca Email@ vjy.softworx@gmail.com
  15. 15. Thank You!

×