Html+css web layout

•Download as PPTX, PDF•

2 likes•1,252 views

Vijay Kumar Verma

Creating Web Layout using HTML and CSS

Technology

Webdesignin
g
HTML+CSS

{ }

</>

Layout Creation
By:

Vijay Kumar Verma (VJY)
Roll No-1326910
28-Feb-2014

1

Purpose
Understand HTML+CSS
What is Class & ID
How to work with DIV
Layout From scratch
BY: VJY

2/28/2014

2

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

Now
Understand HTML+CSS
What is Class & ID
How to work with DIV
Layout From scratch
BY: VJY

2/28/2014

4

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

Now
Understand HTML+CSS
What is Class & ID
How to work with DIV
Layout From scratch
BY: VJY

2/28/2014

6

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

DIV Tag

(Cont..)

<body>
<div> <!—Wrapper-->

<div>First Block</div>
<div>Second Block</div>

</div>
</body>
BY: VJY

2/28/2014

8

Now
Understand HTML+CSS
What is Class & ID
How to work with DIV
Layout From scratch
BY: VJY

2/28/2014

9

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

Requirements
|

A text editor (Notepad++)

|

An image editor (Photoshop)

|

Browser (Firefox)

|

Some passion and mind 

BY: VJY

2/28/2014

13

Have Any Question?
Just Ask!
Post Query On

facebook.com/groups/sviet.mca
Email@

vjy.softworx@gmail.com

Similar to Html+css web layout

CSS Designer CertificationVskills

Html predestination - must everyone haveDailyReminder1

Punit summer traning report.pdfAliFaramarz

Learn html and css from scratchMohd Manzoor Ahmed

Fewd week2 slidesWilliam Myers

Dojo and Zend FrameworkKuldeep Singh

Introductory css and j queryFUTURE INSTITUTE MANAGEMENT AND ENGINEERING , SONARPUR

Html5 101Mouafa Ahmed

Css.htmlAnaghabalakrishnan

Cascading Style Sheets - Part 01Hatem Mahmoud

#4 - CSS Selectors, CSS3 and Web typographyiloveigloo

CSS101 - Concept Fundamentals for non UI DevelopersDarren Gideon

FFW Gabrovo PMG - CSSToni Kolev

Introduction to HTML and CSSMario Hernandez

CAD CertificationVskills

Style and SelectorYaowaluck Promdee

RenoirSt - A DSL enabling programmatic cascading style sheet generationGabriel Omar Cotelli

Completing Your Design with WordPressChelsea Otakan

div tag.pdfKongu Engineering College, Perundurai, Erode

wd project.pptxdsffsdf1

Similar to Html+css web layout (20)

CSS Designer Certification

Html predestination - must everyone have

Punit summer traning report.pdf

Learn html and css from scratch

Fewd week2 slides

Dojo and Zend Framework

Introductory css and j query

Html5 101

Css.html

Cascading Style Sheets - Part 01

#4 - CSS Selectors, CSS3 and Web typography

CSS101 - Concept Fundamentals for non UI Developers

FFW Gabrovo PMG - CSS

Introduction to HTML and CSS

CAD Certification

Style and Selector

RenoirSt - A DSL enabling programmatic cascading style sheet generation

Completing Your Design with WordPress

div tag.pdf

wd project.pptx

Recently uploaded

Designing for Hardware Accessibility at ComcastUXDXConf

ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...FIDO Alliance

Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge

FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FIDO Alliance

How we scaled to 80K users by doing nothing!.pdfSrushith Repakula

What's New in Teams Calling, Meetings and Devices April 2024Stephanie Beckett

How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfFIDO Alliance

Google I/O Extended 2024 WarsawGDSC PJATK

Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCzechDreamin

The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfFIDO Alliance

Optimizing NoSQL Performance Through ObservabilityScyllaDB

Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeCzechDreamin

A Business-Centric Approach to Design System StrategyUXDXConf

WSO2CONMay2024OpenSourceConferenceDebrief.pptxJennifer Lim

Strategic AI Integration in Engineering TeamsUXDXConf

Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Julian Hyde

TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...marcuskenyatta275

Syngulon - Selection technology May 2024.pdfSyngulon

10 Differences between Sales Cloud and CPQ, Blanka DoktorováCzechDreamin

Where to Learn More About FDO _ Richard at FIDO Alliance.pdfFIDO Alliance

Recently uploaded (20)

Designing for Hardware Accessibility at Comcast

ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...

Enterprise Knowledge Graphs - Data Summit 2024

FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...

How we scaled to 80K users by doing nothing!.pdf

What's New in Teams Calling, Meetings and Devices April 2024

How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf

Google I/O Extended 2024 Warsaw

Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder

The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf

Optimizing NoSQL Performance Through Observability

Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade

A Business-Centric Approach to Design System Strategy

WSO2CONMay2024OpenSourceConferenceDebrief.pptx

Strategic AI Integration in Engineering Teams

Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)

TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...

Syngulon - Selection technology May 2024.pdf

10 Differences between Sales Cloud and CPQ, Blanka Doktorová

Where to Learn More About FDO _ Richard at FIDO Alliance.pdf

Html+css web layout

1. Webdesignin g HTML+CSS { } </> Layout Creation By: Vijay Kumar Verma (VJY) Roll No-1326910 28-Feb-2014 1

2. Purpose Understand HTML+CSS What is Class & ID How to work with DIV Layout From scratch BY: VJY 2/28/2014 2

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. Now Understand HTML+CSS What is Class & ID How to work with DIV Layout From scratch BY: VJY 2/28/2014 4

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. Now Understand HTML+CSS What is Class & ID How to work with DIV Layout From scratch BY: VJY 2/28/2014 6

8. DIV Tag (Cont..) <body> <div> <!—Wrapper--> <div>First Block</div> <div>Second Block</div> </div> </body> BY: VJY 2/28/2014 8

9. Now Understand HTML+CSS What is Class & ID How to work with DIV Layout From scratch BY: VJY 2/28/2014 9

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. Example BY: VJY 2/28/2014 11

12. How to create? BY: VJY 2/28/2014 12

13. Requirements | A text editor (Notepad++) | An image editor (Photoshop) | Browser (Firefox) | Some passion and mind  BY: VJY 2/28/2014 13

14. Have Any Question? Just Ask! Post Query On facebook.com/groups/sviet.mca Email@ vjy.softworx@gmail.com

15. Thank You!

Html+css web layout

Recommended

Recommended

More Related Content

Similar to Html+css web layout

Similar to Html+css web layout (20)

More from Vijay Kumar Verma

More from Vijay Kumar Verma (10)

Recently uploaded

Recently uploaded (20)

Html+css web layout