HTML5 with CSS3 - BccFalna.com · HTML5 with CSS3 BccFalna.com 097994 - 55505. Kuldeep Chand . In...

HTML5 with CSS3B c c F a l n a . c o m0 9 7 9 9 4 - 5 5 5 0 5

Kuldeep Chand In this EBook I have covered HTML5 and CSS3. Both are Latest Technology for Developing Website and Web Applications.

HTML5 is used not only for Webpages but also for various kinds of Gadgets and Applications for Mobile, Smart Phones, PCs, Windows7/Windows8, Tablets, etc… So, learning HTML5 is necessary for each and every Developer.

CSS3 is used for styling the Frontend of every Web Based Applications, not only for websites but also for various kinds of othere Deveices too.So, in this eBook you will get Good Details on HTML5 and CSS3 for Good Looking Frontend Development.

1

Any Question or Suggesion, Just Discuss Here…

HTML5 wiTH CSS3 in Hindi

■■■ Kuldeep Chand

BetaLab Computer Center Falna

http://www.bccfalna.com/html5-with-css3-in-hindi-discussion/

2



HTML5 with CSS3 in Hindi Copyright © 2012 by Kuldeep Chand All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. Lead Editors: Kuldeep Chand Distributed to the book trade worldwide by Betalab Computer Center, Behind of Vidhya Jyoti School, Falna Station Dist. Pali (Raj.) Pin 306116 e-mail [email protected], or visit http://www.bccfalna.com. For information on translations, please contact Betalab Computer Center, Behind of Vidhya Jyoti School, Falna Station Dist. Pali (Raj.) Pin 306116 Phone 91-97994-55505 The information in this book is distributed on an “as is” basis, without warranty. Although every precaution has been taken in the preparation of this work, the author shall not have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this book.


3



This book is dedicated to those

who really wants to be

a

ProfeSSionAL deveLoPer


4



index of

ConTenTS


5



Table of Contents Web Development Fundamentals ............................................................................. 15 Web Browsers ........................................................................................................... 18

High Level Structure of Web Browser .................................................................... 18 The Rendering Engine ........................................................................................... 20

Rendering Engine Flow ...................................................................................... 20 Parsing ............................................................................................................... 21

HTML DTD ............................................................................................................. 22 DOM (Document Object Model) ............................................................................ 22 Script and Stylesheet Parsing Order ..................................................................... 23

Scripts ................................................................................................................ 23 Stylesheets ......................................................................................................... 23

Render Tree relation with DOM Tree ..................................................................... 24 Internet Related General Terms ................................................................................ 28

Network .................................................................................................................. 28 LAN – Local Area Network or Intranet ................................................................ 28 MAN – Metropolitan Area Network ..................................................................... 28 WAN – Wide Area Network or Internet ............................................................... 28

WWW – World Wide Web ...................................................................................... 28 Protocol .................................................................................................................. 28 IP Address ............................................................................................................. 29

Dynamic IP Address ........................................................................................... 29 Static IP Address ................................................................................................ 29

Host or Server ........................................................................................................ 30 Hostname or Domain ......................................................................................... 30

Resources .............................................................................................................. 31 URL – Uniform Resource Locator .......................................................................... 31

HTML (Hyper Text Markup Language) ..................................................................... 34 Elements ................................................................................................................ 34 Attributes ................................................................................................................ 35

Content Categories ................................................................................................... 38 Main Content Category .......................................................................................... 38

Metadata Content ............................................................................................... 38 Flow Content ...................................................................................................... 38 Sectioning Content ............................................................................................. 39 Heading Content ................................................................................................ 39 Phrasing Content ................................................................................................ 39 Embedded Content ............................................................................................ 40 Interactive Content ............................................................................................. 40

Form-Associated Content ...................................................................................... 40 listed ................................................................................................................... 40 labelable ............................................................................................................. 41 submittable ......................................................................................................... 41 resettable ............................................................................................................ 41 Transparent Content Model ................................................................................ 41

Architecture of HTML Document ............................................................................... 43 <!DOCTYPE > ....................................................................................................... 43 <html> Element ...................................................................................................... 43  ................................................................................................. 45 Elements Nesting ................................................................................................... 45 <head> Element - Document Header .................................................................... 45

6



<title> - Title of the HTML Document ................................................................. 46 <base> Element ................................................................................................. 46 <style> Element .................................................................................................. 47 <link> Element .................................................................................................... 49 <script> Element ................................................................................................ 51 <noscript> Element ............................................................................................ 52 <meta> Element ................................................................................................. 52

Document Body ..................................................................................................... 58 Internet is for All ........................................................................................................ 60 Hyperlinks ................................................................................................................. 63

<a> - Anchor Element ............................................................................................ 63 Outline Hyperlink to Another Document ............................................................. 64 Inline Hyperlink to Bookmark inside current Document ...................................... 65 Mixed use of Inline and Outline Hyperlink .......................................................... 66 Absolute URL ..................................................................................................... 67 Relative URL ...................................................................................................... 67 Absolute V/s Relative URL ................................................................................. 70 target Attribute .................................................................................................... 71

Grouping Contents .................................................................................................... 74 <p> - Paragraph Element ...................................................................................... 74 <hr> - Horizontal Rule Element .................................................................. 76 <pre> - Preformatted Text Element ....................................................................... 76 <blockquote> - Large Quote Element .................................................................... 77 List Elements ......................................................................................................... 77

<ol> - Ordered List ............................................................................................. 77 <ul> - Un-Ordered List ........................................................................................ 77 <ol> Element Attributes ...................................................................................... 79

<dl> - Definition List ............................................................................................... 80 <dfn> - Definition Element ..................................................................................... 82 <figure> and <figurecaption> - Element ................................................................ 83 <div> - Divition Element ......................................................................................... 84

Texts ......................................................................................................................... 87 Emphasizing the Content ....................................................................................... 87 <em> - Emphasis Element .................................................................................... 87 <strong> - Strong Element ..................................................................................... 88 <s> - Strike Element .............................................................................................. 88 <cite> - Cite Element ............................................................................................. 88 <small> - Small Element ........................................................................................ 89 <q> - Small Quote Element ................................................................................... 89 <abbr> - Abbreviation Element .............................................................................. 89 <code> Element ..................................................................................................... 90 <var> Element ....................................................................................................... 90 <samp> Element .................................................................................................... 91

<kbd> - Keyboard Element ................................................................................. 91 <sub> - Sub-Script Element ................................................................................... 91 <sup> - Super-Script Element ............................................................................... 92 <i> - Italic Element ................................................................................................. 92 <b> - Bold Element ................................................................................................ 93 <mark> - Mark Element ......................................................................................... 93 <bdo> - Bi-Directional Override Element ............................................................... 93

dir Attribute ......................................................................................................... 93 <span> Element ..................................................................................................... 94


7



<br> and <wbr> - Line Break Elements ................................................................. 95 Content Edit Elements .............................................................................................. 99

<ins> - Insert Element ............................................................................................ 99 <del> - Delete Element .......................................................................................... 99

Tabular Data ........................................................................................................... 102 <table> Element ................................................................................................... 102 <caption> Element ............................................................................................... 102 <tr> - Table Row Element .................................................................................... 102 <thead> - Table Header Element ........................................................................ 103 <th> - Table Header Element .............................................................................. 103 <tbody> - Table Body Element ............................................................................ 104 <td> - Table Data Element ................................................................................... 104 <tfoot> - Table Footer Element ............................................................................ 105 Left or Right Column Heading ............................................................................. 108 <colgroup> - Column Group Element .................................................................. 109 <col> - Column Element ...................................................................................... 111

Interactive Elements ................................................................................................ 116 <details> Element ................................................................................................ 116 <summary> Element ............................................................................................ 116

Embedded Contents ............................................................................................... 119 <img> - Image Element ....................................................................................... 119

alt – Alternative Text Attribute .......................................................................... 119 height and width Attributes ............................................................................... 119 src – Source Attribute ....................................................................................... 120

iframe – Inline Frame Element ............................................................................. 120 height and width Attribute ................................................................................. 121 src Attribute ...................................................................................................... 121 srcdoc Attribute ................................................................................................ 121

Object Element .................................................................................................... 122 height and width Attribute ................................................................................. 122 data Attribute .................................................................................................... 122 type Attribute .................................................................................................... 122

<param> - Parameter Element ............................................................................ 122 data Attribute .................................................................................................... 123 name Attribute .................................................................................................. 123 value Attribute .................................................................................................. 123

<video> Element .................................................................................................. 123 autoplay Attribute ............................................................................................. 123 buffered Attribute .............................................................................................. 123 controls Attribute .............................................................................................. 123 height and widhth Attribute ............................................................................... 123 loop Attribute .................................................................................................... 123 muted Attribute ................................................................................................. 124 poster Attribute ................................................................................................. 124 src Attribute ...................................................................................................... 124

<audio> Element .................................................................................................. 125 <source> Element ................................................................................................ 126 <canvas> Element ............................................................................................... 126 <map> - Image Map Element .............................................................................. 127 <area> Element ................................................................................................... 127

alt Attribute ....................................................................................................... 127 href Attribute ..................................................................................................... 127


8



target Attribute .................................................................................................. 127 media Attribute ................................................................................................. 127 shape Attribute ................................................................................................. 127 coords – Coordinate Attribute ........................................................................... 128

Semantics – Page Organizational Elements ........................................................... 131 Outline ................................................................................................................. 131 <body> Element ................................................................................................... 134 <section> Element ............................................................................................... 134 <header> Element ............................................................................................... 137 <h1> . . . <h6> Elements ..................................................................................... 139 <hgroup> Element ............................................................................................... 144 <nav> Element ..................................................................................................... 148 <article> Element ................................................................................................. 149 <footer> Element ................................................................................................. 151 <address> Element .............................................................................................. 151 Article V/s Section ................................................................................................ 152

For Freely Available Contents .......................................................................... 152 For Not Freely Available Contents ................................................................... 153

<aside> Element .................................................................................................. 154 Forms – User Interaction Interface .......................................................................... 157

<form> Element ................................................................................................... 157 accept-charset – Accepted Characterset Attribute ........................................... 157 enctype – Encoding Type Attribute .................................................................. 158 method Attribute ............................................................................................... 158 name Attribute .................................................................................................. 159 novalidate Attribute ........................................................................................... 160 action Attribute ................................................................................................. 160 autocomplete Attribute ..................................................................................... 160 target Attribute .................................................................................................. 161

<fieldset> Element ............................................................................................... 161 name Attribute .................................................................................................. 161 disabled Attribute .............................................................................................. 161

<legend> Element ................................................................................................ 162 <label> Element ................................................................................................... 163

for Attribute ....................................................................................................... 163 form Attribute .................................................................................................... 163

<input> Element ................................................................................................... 164 type Attribute .................................................................................................... 165 accept Attribute ................................................................................................ 185 autocomplete Attribute ..................................................................................... 185 autofocus Attribute ........................................................................................... 186 checked Attribute .............................................................................................. 186 disabled Attribute .............................................................................................. 186 form Attribute .................................................................................................... 186 formaction Attribute .......................................................................................... 186 formenctype Attribute ....................................................................................... 186 formmethod Attribute ........................................................................................ 187 formnovalidate Attribute ................................................................................... 187 formtarget Attribute ........................................................................................... 187 height and width Attribute ................................................................................. 187 list Attribute ....................................................................................................... 187 min and max Attribute ...................................................................................... 189


9



maxlength Attribute .......................................................................................... 189 multiple Attribute ............................................................................................... 190 name Attribute .................................................................................................. 191 pattern Attribute ................................................................................................ 191 placeholder Attribute ........................................................................................ 191 readonly Attribute ............................................................................................. 192 required Attribute .............................................................................................. 192 size Attribute ..................................................................................................... 193 src Attribute ...................................................................................................... 194 step Attribute .................................................................................................... 194 tabindex Attribute ............................................................................................. 194 value Attribute .................................................................................................. 195 width Attribute ................................................................................................... 195

<button> Element ................................................................................................ 195 <option> Element ................................................................................................. 197

selected Attribute .............................................................................................. 198 value Attribute .................................................................................................. 198 label Attribute ................................................................................................... 198

<select> Element ................................................................................................. 198 multiple Attribute ............................................................................................... 198 size Attribute ..................................................................................................... 199 selectedIndex Attribute ..................................................................................... 201

<optgroup> - Option Group Element ................................................................... 201 <datalist> Element ............................................................................................... 204 <textarea> Element ............................................................................................. 206

cols Attribute ..................................................................................................... 206 rows Attribute ................................................................................................... 206 maxlength Attribute .......................................................................................... 207 wrap Attribute ................................................................................................... 207

<progress> Element ............................................................................................ 207 max Attribute .................................................................................................... 208 value Attribute .................................................................................................. 208

<meter> Element ................................................................................................. 209 min Attribute ..................................................................................................... 209 max Attribute .................................................................................................... 209 value Attribute .................................................................................................. 209 low Attribute ...................................................................................................... 209 high Attribute .................................................................................................... 209 optimum Attribute ............................................................................................. 209

Global Attributes ...................................................................................................... 212 accesskey Attribute .............................................................................................. 212 class Attribute ...................................................................................................... 212 contenteditable Attribute ...................................................................................... 213

true Value ......................................................................................................... 213 false Value ........................................................................................................ 213

dir Attribute .......................................................................................................... 214 ltr Value ............................................................................................................ 214 rtl Value ............................................................................................................ 214 auto Value ........................................................................................................ 214

draggable Attribute .............................................................................................. 215 true Value ......................................................................................................... 215 false Value ........................................................................................................ 215


10



hidden Attribute .................................................................................................... 215 id Attribute ............................................................................................................ 216 lang Attribute ........................................................................................................ 216 spellcheck Attribute .............................................................................................. 216

true Value ......................................................................................................... 216 false Value ........................................................................................................ 217

style Attribute ....................................................................................................... 217 tabindex Attribute ................................................................................................. 217 title Attribute ......................................................................................................... 218

CSS – Cascading Style Sheet ................................................................................ 221 Structure ( HTML) ................................................................................................ 221 Style (CSS) .......................................................................................................... 221 Behavior (JavaScript) .......................................................................................... 221

HTML DOM ............................................................................................................. 224 Ancestors ............................................................................................................. 225 Descendents ........................................................................................................ 226 Parent .................................................................................................................. 226 Children ............................................................................................................... 226 Siblings ................................................................................................................ 227 Inheritance ........................................................................................................... 227

CSS – Basics .......................................................................................................... 229 Selector ................................................................................................................ 229 Declaration ........................................................................................................... 229

Property and Value ........................................................................................... 229 CSS File Creation ................................................................................................... 233

Linking CSS File ............................................................................................... 233 CSS Fundamentals ................................................................................................. 237

Keywords ............................................................................................................. 237 Strings .................................................................................................................. 238 Length and Measurement Options ...................................................................... 239

Absolute ........................................................................................................... 239 Relative ............................................................................................................ 242 Percentage ....................................................................................................... 243

Colors – color Property ........................................................................................ 245 Color Keywords ................................................................................................ 245 RGB Values ...................................................................................................... 246 RGB Percentage .............................................................................................. 246 RGBA – RGB with Alpha Channel Values ....................................................... 246 Hexadecimal Values ......................................................................................... 247 Hexadecimal Shorthand Values ....................................................................... 247 Color Selection ................................................................................................. 248

CSS Selectors ......................................................................................................... 254 Universal Selector ................................................................................................ 254 Type Selector ....................................................................................................... 254 Group Selector ..................................................................................................... 255 Child Selector ...................................................................................................... 256 Descendent Selector ........................................................................................... 257 Direct Adjacent Sibling Selector .......................................................................... 259 Class Selector ...................................................................................................... 260 id Selector ............................................................................................................ 262

CSS Attribute Selectors .......................................................................................... 265 Selection on the Presence of Attribute Selector .................................................. 265


11



Selection on the Presence of Attribute Value ...................................................... 265 Selection based on Attribute Values Begins with a String (^=) ............................ 267 Selection based on Attribute Values Ends with a String ($=) .............................. 268 Selection based on Attribute Values Contains a String (*=) ................................ 268

CSS Box Model ....................................................................................................... 270 Box Model Fundamental ...................................................................................... 272 Padding ................................................................................................................ 273 Border .................................................................................................................. 273 Margin .................................................................................................................. 273 Border Property ................................................................................................... 277

Color ................................................................................................................. 278 Style ................................................................................................................. 278 Width ................................................................................................................ 278

Handling Box Border ............................................................................................ 279 Outline Property ................................................................................................... 284 Border Radius Property ....................................................................................... 286 CSS Box – Height and Width ............................................................................... 289

auto Value ........................................................................................................ 292 100% Percent Value ......................................................................................... 293

min-width, max-width, min-height, max-height .................................................... 293 Overflow Property ................................................................................................ 295

auto Value ........................................................................................................ 295 scroll Value ....................................................................................................... 297 hidden Value .................................................................................................... 297 inherit Value ..................................................................................................... 298

overflow-x and overflow-y Properties ................................................................... 298 display Value .................................................................................................... 298 hidden Value .................................................................................................... 298 scroll Value ....................................................................................................... 299 auto Value ........................................................................................................ 299

line-height Property .............................................................................................. 299 Margin – Something Special ................................................................................ 301 Block and Inline - Types of Elements .................................................................. 303

CSS Positioning ...................................................................................................... 306 Box Positioning - position Property ...................................................................... 306

Normal Flow – static Value ............................................................................... 306 Absolute Positioning – absolute Value ............................................................. 310 Offset Properties – top, right, bottom and left ................................................... 315 Relative Positioning – relative Value ................................................................ 318 Fixed Positioning – fixed Value ........................................................................ 336 Controlling Layering – z-index Property ........................................................... 337

Float Positioning – float Property ......................................................................... 342 clear Property ................................................................................................... 355

Table Positioning – display Property ................................................................... 366 display Property ................................................................................................ 367 Table Related display Values ........................................................................... 374

CSS Table ............................................................................................................... 390 Table Background Basics .................................................................................... 392 border Property .................................................................................................... 393 border-collapse Property ..................................................................................... 393 border-spacing Property ...................................................................................... 394 caption-side Property ........................................................................................... 396


12



empty-cells Property ............................................................................................ 397 Row Width Calculation ......................................................................................... 398 table-layout Property ............................................................................................ 400

auto Value ........................................................................................................ 400 fixed Value ........................................................................................................ 401

Table Height Algoritms ........................................................................................ 402 vertical-align property .......................................................................................... 402

baseline Value .................................................................................................. 403 middle Value ..................................................................................................... 403 text-bottom Value ............................................................................................. 404 text-top Value ................................................................................................... 404 top and bottom Values ..................................................................................... 404 sub and sup Values .......................................................................................... 405

CSS Background ..................................................................................................... 410 background-color Property .................................................................................. 410 background-image Property ................................................................................ 410 background-repeat Property ................................................................................ 411

repeat Value ..................................................................................................... 411 repeat-x Value .................................................................................................. 412 repeat-y Value .................................................................................................. 412 no-repeat Value ................................................................................................ 413

background-attachment Property ........................................................................ 413 background-positioin Property ............................................................................. 413

CSS Visibility ........................................................................................................... 418 visible Value ......................................................................................................... 418 hidden Value ........................................................................................................ 418 collapse Value ..................................................................................................... 418 visibility:hidden vs display:none ........................................................................... 418

CSS Fonts ............................................................................................................... 420 Font Controling Properties ................................................................................... 420

font Property ..................................................................................................... 420 font-family Property .......................................................................................... 421 font-size Property ............................................................................................. 423 font-weight Property ......................................................................................... 424 font-style Property ............................................................................................ 425 font-variant Property ......................................................................................... 426 System Fonts ................................................................................................... 428

Text Formatting Properties .................................................................................. 429 color Property ................................................................................................... 429 text-align Property ............................................................................................ 429 vertical-align Property ....................................................................................... 431 text-decoration Property ................................................................................... 432 text-indent Property .......................................................................................... 433 text-shadow Property ....................................................................................... 434 text-transform Property ..................................................................................... 436 letter-spacing Property ..................................................................................... 436 word-spacing Property ..................................................................................... 437 white-space Property ........................................................................................ 438 direction Property ............................................................................................. 439

CSS Lists ................................................................................................................ 441 list-style-type Property ......................................................................................... 441

none Value ....................................................................................................... 441


13



disc Value ......................................................................................................... 441 circle Value ....................................................................................................... 441 square Value .................................................................................................... 441 decimal Value ................................................................................................... 441 decimal-leading-zero Value .............................................................................. 441 lower-alpha Value ............................................................................................. 442 upper-alpha Value ............................................................................................ 442 lower-roman Value ........................................................................................... 442 upper-roman Value ........................................................................................... 442

list-style-image Property ...................................................................................... 442 list-style-position Property .................................................................................... 443 marker-offset Property ......................................................................................... 443 list-style Property ................................................................................................. 444

CSS Miscellaneous ................................................................................................. 446 cursor Property .................................................................................................... 446 Inheritance ........................................................................................................... 447

inherit keyword ................................................................................................. 448 CSS Cascading System ...................................................................................... 448 !important Rule .................................................................................................... 452

CSS Pseudo Elements and Pseudo Class Selectors ............................................. 454 ::first-letter and ::first-line Pseudo Element .......................................................... 454 ::selection Element .............................................................................................. 455 ::before and ::after Pseudo Elements .................................................................. 456

content Property ............................................................................................... 456 Psuedo Classes ................................................................................................... 464

Dynamic Psuedo Classes ................................................................................ 464 Static Pseudo Classes ..................................................................................... 468 :first-of-type Pseudo Class ............................................................................... 471 :last-of-type Pseudo Class ............................................................................... 471 :only-of-type Pseudo Class .............................................................................. 471 :not – Negation Pseudo Class .......................................................................... 471 :target Pseudo Class ........................................................................................ 472 :enabled and :disabled Pseudo Class .............................................................. 474 :checked Pseudo Class .................................................................................... 475 :nth Pseudo Classes ........................................................................................ 476


14



web deveLoPMenT

fundAMenTALS


15 Any Question or Suggesion, Just Discuss Here…


Web Development Fundamentals Web Development = 50% Science +50% Art

ge Web dks nks fgLlksa esa Divide dj ldrs gSaA

• Web Site• Web Application

Website lkekU;r;k Advertisement ds fy, mi;ksxh gksrh gS tcfd Web Application, Data dks Manage djus ds fy, mi;ksxh gSA

;fn ge Web dks vU; rjhds ls Categories djsa] rks ge fQj ls Web dks nks fgLlksa esa ckaV ldrs gSa%

• Front End• Back End

ge ,d Website dks Hkh nks fgLlksa esa ckaV ldrs gSa %

• Static Web Site• Dynamic Web Site

Dynamic Website dks Hkh nks fgLlksa esa ckaV ldrs gSa %

• Client Side Dynamic• Server Side Dynamic

Client Side Dynamic Websites dks Interactive Website Hkh dgrs gSaA lkekU;r;k bl izdkj dh Websites esa Client Side esa JavaScript ;k blds fdlh Framework dk iz;ksx djds Front End dks Interactive cuk;k tkrk gSA tcfd Server Side Dynamic Website esa Webpage ij fn[kkbZ nsus okys Contents User dh t:jr ds vk/kkj ij Server ls cudj Client Web Browser esa Display gksrs gSaA

Client Side ds Web Browser esa User ds lkeus fn[kkbZ nsus okyk Web Page, Front End dgykrk gS] tcfd ml Front End dks Generate djus okyk vFkok mlesa Modification djus okyk Owner Website ds ftl fgLls dks Access djrk gS] mls Back End dgk tk ldrk gSA

Website dk fn[kkbZ nsus okyk fgLlk Hkh rhu Hkkxksa esa ckaVk tk ldrk gS %

• Structure of Web Page• Style of Web Page• Behavior of Web Page

Webpage ds Structure dks r; djus dk dke HTML dk gksrk gSA Webpage ds Appearance dks Define djus dk dke CSS dk gksrk gSA Webpage dks Interactivity o Dynamic cukus dk dke JavaScript dk gksrk gSA

Website ds Back End dks nks fgLlksa esa ckaVk tk ldrk gS%


16



• Server Side Scripting Language • Server Side Database Server Side dh Scripting Language ds :i esa lkekU;r;k ASP, PHP, JSP vkfn dk iz;ksx fd;k tkrk gS] tcfd Website ls lacaf/kr Data dks ftl Software esa Store fd;k tkrk gS] mls Database Software dgk tkrk gS] tks fd lkekU;r;k SQL ;k MySql gksrk gSA Client Side ls vkus okys Data dks fdl izdkj ls Process djuk gS] bl ckr dk fu.kZ; Server Side Scripting Language ysrk gS vkSj Data dks Process djus ds ckn mls tgka Store fd;k tkrk gS] og DBMS Software gksrk gSA buds vykok Web Browser lkekU;r;k Client Software gksrk gS tcfd Web Server, Server Software gksrk gSA Client fdlh Resource dh Request djrk gS vkSj Web Server ml Request dks iwjk djds Client dks mldk okafNr Resource miyC/k djokrk gSA


17



web browSerS


18 Any Question or Suggesion, Just Discuss Here…


Web Browsers Web Browsers dh Functionality dks le>s fcuk ge Web Development dks Bhd ls ugha le> ldrsA blfy, ge lcls igys Web Browsers o mudh Fundamental Functionality dks Bhd ls le>saxsA orZeku le; esa ikap Web Browsers eq[; gSa tks lcls T;knk mi;ksx esa fy, tkrs gSa%

• Internet Explorer• Mozilla FireFox• Apple Safari• Google Chrome• Opera

Web Browser dk eq[; dke HTML Files dks HTML o CSS Specifications ds vk/kkj ij Display djuk gksrk gSA HTML Files dks lkekU;r;k Web Pages dgk tkrk gS rFkk Web Pages dks Web Browser esa Display gksus dh izfØ;k dks Web Page dk Render gksuk dgrs gSaA

dksbZ Web Page fdlh Web Browser esa fdl rjg ls Render gksuk pkfg,] rkfd og Web Page fofHkUu Devices tSls fd Mobile Phones, Desktop Computers, Laptops, Notebooks, iPad, Tablet vkfn esa ,d leku fn[kkbZ ns] bl ckr dks r; djus ds fy, W3C (World Wide Web Consortium) uke dh ,d Organization Web ds fy, fofHkUu izdkj ds Specifications rS;kj djrh gS vkSj fofHkUu Web Browsers cukus okyh Companies, W3C }kjk r; fd, x, bu Standards ds vk/kkj ij vius Web Browsers cukrh gSA

W3C Organization okLro esa cgqr lkjh cMh dEifu;ksa tSls fd MicroSoft, Google, Apple, Dell, AT&T vkfn dk ,d lewg gS] tks vkil esa feydj ;s r; djrs gSa fd Web fdl rjg ls Develop gks] rkfd bu lHkh Companies ds Software o Hardware vkil esa ,d nwljs ds lkFk T;knk ls T;knk Compatible jgsa vkSj Web Developers dks fofHkUu izdkj dh Devices o Softwares ds fy, vyx&vyx rjg ds Codes u fy[kus iMsaA

lHkh Web Browsers dk User Interface yxHkx ,d leku gh gksrk gS ftlesa %

1 URL Insert djus ds fy, ,d Address Bar gksrk gSA 2 vxys o fiNys ist ij tkus ds fy, ,d Back o Forward Button gksrk gSA 3 fdlh ist dks Bookmark djus ds fy, Bookmark Option gksrk gSA 4 ,d Refresh o Stop Button gksrk gS] tks Web Page dks Web Browser esa fQj ls

Load gksus ds fy, Refresh o Web Page dks Web Browser esa Load gksus ls jksdus ds fy, Stop djrk gSA

5 Home Button] tks fd Web Site ds Home Page ij igqapus ds fy, gksrk gSA

High Level Structure of Web Browserfdlh Hkh Web Browser ds fuEu Components gksrs gSa %

1 User Interface


19



Web Browser dk og fgLlk tgka ij Page fn[kkbZ nsrk gS] ds vykok Home Button, Back Button, Forward Button, Address Bar, Bookmarking Option vkfn User Interface ds vUrxZr vkrs gSaA

2 Browser Engine ;s fgLlk Rendering Engine o User Interface Layer ds chp gksrk gS vkSj nksuksa ds chp vkil esa Communication LFkkfir djokrk gSA

3 Rendering Engine User }kjk Request fd, x, Web Page dks Web Browser esa Render djus ds fy, ;s fgLlk ftEesnkj gksrk gSA blh fgLls dks irk gksrk gS fd fofHkUu HTML Markup Elements o CSS Rules dk D;k eryc gSA fdlh <h1> Heading ;k <p> Paragraph dks fdl rjg ls Web Browser ds Document Area esa Render djuk gS vkSj fofHkUu Elements ij fdlh CSS Style dks fdl rjg ls Apply djuk gSA

4 Networking ;s fgLlk Network Calls tSls fd HTTP Request ls lacaf/kr gksrk gSA ;s Platform Independent Interface gksrk gSA

5 User Interface Backend HTML Page ij fn[kkbZ nsus okys fofHkUu User Interface Elements tSls fd Text Box, List Box, Window vkfn dks Web Browser dk ;s fgLlk Handle djrk gSA fofHkUu Form Level Elements dks Handle djus ds fy, ;s fgLlk Operating System ds User Interface Methods dks mi;ksx esa ysrk gSA

6 JavaScript Interpreter Web Browser dk ;s fgLlk JavaScript Codes dks Parse o Execute djus dk dke djrk gSA

7 Data Storage ;s fgLlk Web Page ds fofHkUu t:jh Data tSls fd Cookies, Browser History vkfn dks Device dh Storage tSls fd Hard Disk ;k Memory Card esa Store djrk gSA HTML5 Specification esa Local Database ds Concept dks Specify fd;k x;k gS] ftlesa Web Browser ds lkFk Local Device (Computer/Mobile vkfn) ij Database Storage gksuk pkfg,] rkfd HTML5 dk iz;ksx Local Applications Create djus ds fy, Hkh fd;k tk ldsA


20



Google Chrome ,d ,slk Web Browser gS] ftlesa gj Tab ds fy, ,d vyx Rendering Engine gksrk gS tcfd vU; Web Browsers esa lHkh Tabs ds fy, dsoy ,d gh Rendering Engine gksrk gSA

The Rendering Engine Rendering Engine dk eq[; dke gS Web Page dks Render djuk ;kuh Web Page dks Browser Screen (Document Windows) esa Display djukA ewy :i ls Rendering Engine HTML, XML o Images dks Render dj ldrk gSA tcfd vU; izdkj ds Content dks Display djus ds fy, Browser Extension ;k Plugins dk iz;ksx djuk iMrk gSA mnkgj.k ds fy, PDF Document dks Display djus ds fy, gesa lkekU;r;k PDF Viewer Plug-in (Adobe Reader) dk iz;ksx djuk iMrk gSA FireFox vius Web Browser esa Gecko Rendering Engine dk iz;ksx djrk gS tks fd FireFox dk Home Made Rendering Engine gS tcfd Chrome o Safari nksuksa Webkit Rendering Engine dk iz;ksx djrs gSaA Webkit ,d Open Source Rendering Engine gS tks Linux Platform ds fy, Develop fd;k x;k FkkA ckn esa Apple us Mac OS o Windows dks Support djus ds fy, bls Modify fd;kA QyLo:i Chrome o Safari Windows o Mac OS ds fy, cu ldsA

Rendering Engine Flow Rendering Engine Requested Document dk Content Networking Layer ls izkIr djrk gSA lkekU;r;k ;s 8KB Memory Chunk ds :i esa Rendering Engine dks izkIr gksrk gSA Network Layer ls Document Content izkIr djus ds ckn Rendering Engine fuEu Flow esa dke djrk gS %

1 Rendering Engine HTML Document dh Parsing djuk “kq: djrk gS vkSj fofHkUu HTML Elements dks DOM Nodes ds :i esa Convert djrk gS] ftls Content Tree dgrs gSaA lkFk gh ;s Style Data (Inline Style, External Stylesheet) dks Parse djrk gS vkSj Structural Information (HTML Elements) rFkk Styling Information (Stylesheet) nksuksa dks vkil esa Combine djds ,d ubZ Tree Create djrk gS] ftls “Render Tree” dgrs gSaA

2 lHkh Style Attributes ds lkFk Render Tree esa gj Node dk ,d Rectangle curk

gS] ftlesa Color, Dimensions vkfn dh Information gksrh gSA lHkh Rectangles mlh Øe esa gksrs gaS] ftl Øe esa mUgsa HTML Document esa Specify fd;k x;k gSA

3 Render Tree cuus ds ckn ;s Layout Process ij tkrk gS ;kuh Rendering Engine

Tree ds gj Node ds Exact Coordinates Specify djds ;s r; djrk gS fd gj Node, Web Browser dh Screen (Document Window) esa Exactly dgka ij fn[kkbZ nsxkA


21



4 vUr esa User Interface Backend Layer }kjk Render Tree ds gj Node dh

Traversing gksrh gS vkSj gj Node mldh Exact Location ij Web Browser dh Screen esa Paint gksrk gSA

Rendering Engine iwjs Document ds Web Browser esa Download gksus dk bUrtkj ugha djrk gS, cfYd tSls&tSls Document dk Content Rendering Engine esa Download gksrk tkrk gS] Rendering Engine mls Web Browser esa Render djrk jgrk gSA

lkekU;r;k lHkh Web Browsers blh Øe dks Follow djrs gSaA ysfdu Webkit dh Working Strategy FkksMh vyx gSA Gecko “Frame Tree” uke ds ,d Visually Formatted Elements dh Tree dks Call djrk gS] ftlesa gj Element ,d Frame gksrk gSA tcfd Webkit “Frame Tree” ds LFkku ij “Render Tree” “kCn dk iz;ksx djrk gS ftlds lHkh Elements dks “Render Objects” dgk tkrk gSA Elements dks Place djus dh izfØ;k dks Webkit esa “Layout” dgk tkrk gS tcfd Gecko esa bls “Reflow” dgrs gSaA DOM Nodes o Visual Information dks Connect djus dh izfØ;k dks Webkit esa “Attachment” “kCn }kjk Denote fd;k tkrk gSA Webkit o Gecko nksuksa esa ,d eq[; vUrj ;gh gS fd Gecko esa HTML o DOM Tree ds chp ,d Extra Layer gksrh gS] ftls “Content Sink” dgk tkrk gS] tks fd DOM Elements Create djus dk dke djrk gSA

Parsing Document dh Parsing ,d ,slh izfØ;k gS] ftldk eryc “Document dks ,d ,sls Structure esa Organize djuk gS] ftldk dksbZ Meaning gks vkSj ftls Code }kjk le>k o Access fd;k tk ldsA” Parsing ds Result ds :i esa lkekU;r;k Nodes dh ,d Tree izkIr gksrh gS] tks Document ds Structure dks Represent djrh gSA bls Parse Tree ;k Syntax Tree dgrs gSaA


22



HTML DTD HTML DTD ,d izdkj dk Format gksrk gS] tks HTML ds lHkh Allowed Elements dh Definitions, Attributes o Hierarchy dks Hold djrk gS vkSj bl ckr dks Specify djrk gS fd dkSuls HTML Elements fdl izdkj ls Organize gksus pkfg,A

DOM (Document Object Model) Parse Tree ;k Render Tree, DOM Elements o Attribute Nodes dh ,d Tree gksrh gSA Tree ds gj Node dks Object dgk tkrk gSA DOM dk gj Mode fdlh HTML Document ds fofHkUu HTML o Attribute Node rFkk muds Interfaces ds lewg dks Represent djrk gSA gj Object okLro esa Properties o Methods dk ,d Collection gksrk gSA Properties fdlh Object dh Appearance o States ls lacaf/kr tkudkfj;ksa dks Hold djrk gS tcfd Methods mu tkudkfj;ksa dks Access djus dk dke djrs gSaA Render Tree esa gj HTML Element o Attribute ,d Object dh rjg gksrk gS] ftlds fofHkUu Attributes tSls fd Styles vkfn mu HTML Elements dh Properties ds :i esa gksrs gSa vkSj bu Properties dks JavaScript tSlh fdlh Programming Language }kjk fofHkUu Interface Methods ds Through Access fd;k tkrk gSA DOM esa Render Tree ds gj Element ds chp One to One dh Relationship gksrh gSA tSls% <html> <body> <p> Hello World </p> <div> <img src="example.png"/></div> </body> </html> tc ;s HTML Document Parse gksxk] rc cuus okyk Render Tree fuEukuqlkj ,d DOM Tree ds :i esa Represent gksxk %

HTML dh rjg gh DOM Hkh W3C Organization }kjk Specified gSA ;s Document dks Manipulate djus ds fy, cuk;k x;k ,d Generic Specification gS] tks r; djrk gS fd fdlh HTML Document ds fofHkUu Elements o Attributes rd fdl rjg ls igqapk tk, vkSj fdl rjg ls mUgsa Access fd;k tk,A


23



DOM Tree fdlh Document dk In-Memory Representation gksrk gSA

Script and Stylesheet Parsing Order

Scripts tc HTML Document dh Parsing gksrh gS vkSj Parser <script> Element ij igqaprk gS] rks Document dh Parsing rc rd ds fy, :d tkrh gS] tc rd fd Script iwjh rjg ls Web Browser esa u vk tk,A ;fn Script External gks] rks Parsing rc gksuk “kq: gksrk gS] tc og Script iwjh rjg ls Web Browser esa Download gks tkrh gSA HTML5 esa ge fdlh Script dks Asynchronous Mark djds Web Browser dks ;s crk ldrs gSa fd Document Normal rjhds ls fcuk :ds gq, Download gks rFkk Script ,d vyx Thread esa Download gks] rkfd Script ds Load gksus rd] Document dh Parsing u :ds ;kuh Render Engine Script ds Load gksus dk Wait u djsA Webkit o Gecko, nksuksa gh Engines dks bl lqfo/kk ds fy, Optimize fd;k x;k gSA tc ,d Thread Script dks Execute dj jgk gksrk gS] mlh le; nwljk Thread Document dh Parsing dj jgk gksrk gS vkSj Document ds fy, t:jh lHkh Resources dks Network ls izkIr dj jgk gksrk gSA bl rjg ls HTML5 Supported Web Browsers esa Parallel Form esa Document dh Rendering gksrh gSA /;ku j[kus okyh ckr ;s gS fd ;s izfØ;k dsoy External Scripts, Style Sheets o Images ij Apply gksrh gSA Internal Styles, Scripts o Images Normal rjhds ls gh Parse gksrs gSa rFkk Document ds vk/kkj ij cuus okyh DOM Tree esa Hkh fdlh rjg dk dksbZ ifjorZu ugha gksrkA

Stylesheets Stylesheets lkekU;r;k DOM Tree dks fdlh izdkj ls Modify ugha djrs blfy, Stylesheet dk Script ls igys Load gksuk t:jh ugha gksrk] ysfdu ;fn dksbZ Script DOM Tree ds fdlh Style dks Access djrk gS] rks ml fLFkfr esa Stylesheet dk Script ls igys Load gksuk t:jh gksrk gSA bl Issue dks Webkit o Gecko Engines nksuksa vius rjhds ls Handle djrs gSaA ;fn fdlh Script dks fdlh Style Sheet ds Content dh t:jr gks] rks FireFox Script dks rc rd ds fy, Block dj nsrk gS] tc rd fd Stylesheet iwjh rjg ls Load o Parse ugha gks tkrk tcfd Webkit dsoy mlh fLFkfr esa fdlh Script dks Block djrk gS] ;fn Script fdlh Unloaded Style Sheet dh Properties dks Modify djus dh dksf”k”k djrk gSA tc DOM Tree Construct gks jgk gksrk gS] rc Browser ,d nwljh Tree Create djrk gS] ftls Render Tree dgrs gSaA ;s Tree Visual Elements ds ml Øe esa gksrh gS] ftl Øe esa Visual Elements Web Browser esa Display gksus okys gksrs gSaA ;s Document dk Visual Representation gksrk gSA bl Tree dk ewy mn~ns”; Web Browser esa Contents dks lgh Øe esa Paint djuk gksrk gSA


24



FireFox Render Tree ds Elements dks “Frames” dgrs gS tcfd Webkit esa bls Renderer ;k Render Object dgk tkrk gSA Renderer ;k Render Object ;s tkurk gS fd mls o mlds Childers dks Web Browser esa fdl izdkj ls Layout o Paint gksuk gSA

Render Tree relation with DOM Tree gj Render Object, DOM Element ls lacaf/kr gksrk gS] ysfdu budk Relation One to One dk ugha gksrkA Non-Visual DOM Elements ¼tSls Head Element ;k ftu Elements dh Display Property dks None fd;k x;k gSA½ Render Tree esa Insert ugha gksrs] gkykafd Hidden Visibility okys Elements Render Tree esa Appear gksrs gSaA dqN ,sls DOM Elements Hkh gksrs gSa tks dbZ Visual Objects ls lacaf/kr gksrs gSaA tSls “select” Element ds rhu Render Object gksrs gSaA ,d Display Area ds fy,] nwljk Drop Down List Box ds fy, o rhljk Click fd, tkus okys Dropdown Button ds fy,A blh rjg ls fdlh Multi Line Text Box esa tc Text ,d gh Line esa iwjh rjg ls ugha lek ldrk vkSj nwljh Link esa tkrk gS] rc gj Line ds fy, ,d u;k Render Object Create gksrk gSA dqN Render Objects ,d DOM Mode ls lacaf/kr gksrs gSa ysfdu Tree esa leku Location ij ughaA tSls Floats o Absolutely Positioned Elements Document ds Normal Flow ls ckgj pys tkrs gSa blfy, ;s ,d Render Objects dh Tree esa leku Place ij ugha cfYd fdlh Different Place ij Place gksrs gSaA ;kuh ;fn ljy “kCnksa esa dgsa] rks fdlh HTML Document dk gj Element o Attribute, Web Browser dh Memory esa ,d Object ds :i esa Modal gks tkrk gS] rkfd Web Browser, W3C Organization }kjk Specified Specification ds vuqlkj ml Modal dks Display dj ldsA Document ds bl Memory Representation dks ljy “kCnksa esa ge DOM Tree dg ldrs gSa] tks fd fdlh Hkh Web Page ds lkjs Structure dks Represent djrk gSA tks Web Page gesa Web Browser esa fn[kkbZ nsrk gS] og Web Page, DOM Tree ds :i esa Device dh Memory esa Stored jgrk gS vkSj rc rd Stored jgrk gS] tc rd fd og Web Page, Web Browser esa Loaded jgrk gSA pwafd DOM Tree, Client Side Web Browser dh Memory esa Stored jgrk gS vkSj mlh DOM Tree ds vuqlkj Web Page, Web Browser esa Render gksrk gS] blfy, ;fn ge DOM Tree esa fdlh rjg dk dksbZ ifjorZu djrs gSa] rks og ifjorZu Instantly Web Browser esa Reflect gksrk gSA JavaScript ,d Client Side Programming Language gS vkSj bl Language dk iz;ksx djds ge DOM Tree dks Access o Modify dj ldrs gSa vkSj ge tSls gh DOM Tree esa dksbZ Modification djrs gSa] mldk Effect rqjUr Web Browser esa Reflect gks tkrk gSA lkjka”k ds :i esa ,d Web Page esa fuEu Øe esa fofHkUu Processes Perform gksrh gSa vkSj Web Page fn[kkbZ nsrk gS%


25



1 tc fdlh HTML Document dks Web Browser esa Load fd;k tkrk gS] rc ,d HTTP Call }kjk og HTML Page Browser dh Memory esa Load gksuk “kq: gksrk gSA

2 tSls&tSls HTML Document Browser esa Load gksuk “kq: gksrk gS] Web Browser dk

,d HTML Parser “Content Tree” ;k DOM Create djuk “kq: djrk gS] ftldk gj Node, HTML Page ds ,d Element dks Represent djrk gSA

3 tc dksbZ Script, Style, Image ;k Font vkfn vU; izdkj ds Resources Web

Browser esa Load gksrs gSa] rc fofHkUu Web Browsers fofHkUu izdkj ds Rules dks Follow djrs gq,] fofHkUu fLFkfr;ksa ds vk/kkj ij fdlh Resource dh Loading dks dqN le; ds fy, Block djrs gSa vFkok HTML Parser dks fdlh Resource ds vkus rd Wait djus ds fy, Instruct djrs gSaA

4 ,d ckj iwjk HTML Document Web Browser esa Load gks tkus ds ckn Content

Tree ij Web Browser ds Default Style Sheet dh Styles Apply gksrh gSaA dbZ ckj HTML Document ds vUnj Hkh dqN Styles dks Apply fd;k x;k gksrk gS vFkok HTML Document esa External Style Sheets Specified gksrh gSaA bu Styles dks Handle djus ds fy, ,d ubZ Tree curh gS] ftls “Rendering Tree” dgrs gSaA

bl Rendering Tree esa dsoy os gh Elements gksrs gSa] ftUgsa Web Browser esa Display djuk gksrk gSA tks Elements, Web Browser dh Screen esa Display ugha gksus gSa] tSls fd Head, Script, Styles, vkfn Elements vFkok ftu Elements dh Display Property dks None fd;k x;k gS] os Elements bl Render Tree esa “kkfey ugha gksrsA Render Tree ds lHkh Nodes, Style Information dks Represent djrs gSaA

5 T;knkrj Render gks ldus okys Elements CSS Box Model ds Rules dks Follow

djrs gSa vkSj mudh dqN Width, Height, Border, Padding, Spacing, Margin o Position Values gksrh gSaA bu Objects ds fy, ,d Rectangular Box Create gksrk gS] ftUgsa Frame dgrs gSaA gj Object ds fy, Frame gks] ,slk t:jh ugha gSaA tSls SVG Image dh dksbZ Frame ugha gksrh] cfYd bls ,d iframe ds vUnj Place fd;k tkrk gS vkSj bl iframe dk ,d Rectangular Box ;kuh Frame gksrk gSA ,d Frame esa bl ckr dh lkjh Information gksrh gS fd fdlh Element Object dks Web Browser esa fdl izdkj ls Render gksuk gSA

6 pwafd ,d gh HTML Document fofHkUu izdkj dh Devices tSls fd Laptop, PC,

iPhone vkfn ij Display gks ldrk gS] ftudh Screen Side, Color Depth o Resolution vyx&vyx gks ldrs gSa] blfy, ;s t:jh gksrk gS fd Web Browser, HTML Page dks Render djus ls igys Device ds vk/kkj ij bl ckr dk fu.kZ; ys fd Screen ij dkSulk Object dgka fn[kkbZ nsxkA blfy, lHkh Objects dh Rendering Information izkIr djus ds ckn Web Browser fofHkUu Elements dh Screen ij Positioning dh Calculation djrk gS fd dkSulk Element fdl txg ij fn[kkbZ nsxkA

7 vUr esa tc Web Browser dks ;s irk py tkrk gS fd dkSulk Object Exactly fdl

Location ij Draw djuk gS] og Rendering Tree ds lHkh Objects dks Screen ij Draw dj nsrk gS] ftls Painting djuk dgk tkrk gSA


26



lkekU;r;k ;s izfØ;k yxHkx lHkh Web Browsers esa FkksMs cgqr Changes ds lkFk ,d leku gh gksrh gS] tks fd ,d Static HTML Document dks Render djus dh izfØ;k gSA ysfdu HTML Documents Dynamic Hkh gks ldrs gSa vkSj os Dynamic rc gks tkrs gSa] tc DOM Tree ds lkFk fdlh izdkj dh izfØ;k dh tkrh gS vkSj DOM Tree ds lkFk fdlh Hkh izdkj dh izfØ;k djus ds fy, JavaScript ,d vPNh Programming Language gS] ftls orZeku le; esa lHkh Web Browsers Support djrs gSa D;ksafd lHkh Web Browsers esa JavaScript Interpreter gksrk gSA HTML Document Pages fuEu fLFkfr;ksa esa ls fdlh Hkh fLFkfr esa Dynamic gks ldrs gSa %

1 ;fn DOM Tree esa dksbZ Element Add ;k Delete fd;k tk,A 2 ;fn fdlh Element Object ds Style Attribute dks Modify fd;k tk,A

bu nksuksa fLFkfr;ksa esa HTML Document dh Rendering dh mijksDr lkjh izfØ;k fQj ls nksgjkbZ tkrh gSA dqN fLFkfr;ksa esa iwjs DOM Tree dh Rendering djus dh t:jr ugha iMrh gS] tSls fdlh Object dk dsoy Color Change djus ij dsoy Repainting dh t:jr iMrh gSA ysfdu fdlh Object dh Location Change djus ij iwjh Rendering Process fQj ls Repeat gksrh gSA fdlh Hkh Web Browser esa Images dh rqyuk esa Style Sheet o Scripts igys Load gksrh gSaA Stylesheet dk iz;ksx Rendering Tree Create djus ds fy, gksrk gS] ysfdu bldk dksbZ Hkh izHkko Content Tree ij ugha iMrkA blfy, HTML Parsing o JavaScript Execution ml le; Continue gks jgk gks ldrk gS] ftl le; CSS Download gks jgk gksrk gSA fdlh Script dks tc ml le; Style Information dh t:jr gksrh gS] ftl le; og Stylesheet Download gks jgh gksrh gS o Rendering Tree cu jgh gksrh gSA bl izdkj dh fLFkfr esa Web Browser gesa Error ns ldrk gSA blfy, bl izdkj dh fLFkfr esa Stylesheet dks Script dh rqyuk esa igys Load djuk pkfg,A


27



inTerneT reLATed

GenerAL TerMS


28



Internet Related General Terms Network tc fofHkUu izdkj ds cgqr lkjs Electronic Devices (tSls fd Computers, NetBooks, Laptops, Mobile Phones, iPads, Tablet PCs vkfn) vkil esa fdlh ek/;e (tSls fd Telephone Lines, Wireless Techniques, Satellites vkfn) ds }kjk ,d nwljs ls Connected gksrs gSa vkSj ,d nwljs ds Data o Information dks vkil esa Share djrs gq, ,d nwljs ds lkFk Communication djrs gSa] rks bl izdkj ls vkil esa tqMs gq, Devices ds Group dks Network dgk tkrk gSA Networks ewy :i ls rhu izdkj ds gksrs gSa%

LAN – Local Area Network or Intranet tc dqN Electronic Devices vkil esa ,d NksVs ls dejs ;k Building ds vUnj Information Sharing o Communication djus ds fy, ,d nwljs ls Connected gksrs gSa] rks bl izdkj ds NksVs ls Network dks LAN ;k Intranet dgk tkrk gSA

MAN – Metropolitan Area Network tc dqN LANs nks ;k nks ls T;knk “kgjksa esa fLFkr gksrs gSa vkSj vkil esa Information Sharing o Communication djus ds fy, ,d nwljs ls Connected gksrs gSa] rks bl izdkj ds e/;e vkdkj ds Network dks MAN dgk tkrk gSA

WAN – Wide Area Network or Internet tc cgqr lkjs LANs o MANs fofHkUu ns”kksa esa fLFkr gksrs gSa vkSj vkil esa Information Sharing o Communication djus ds fy, ,d nwljs ds lkFk Connected gksrs gSa] rks bl izdkj ds cMs Network dks WAN ;k Internet dgk tkrk gSA

WWW – World Wide Web World Wide Web ,d ,slk rjhdk gS] ftlesa nqfu;ka Hkj ds yk[kksa Computers o vU; izdkj dh Electronic Devices tSls fd Mobile Phones vkfn vkil esa Connected gksrs gSa vkSj vkil esa fofHkUu izdkj dh Information dks Share djrs gSa] tks fd Web Pages ;k HTML Pages ds :i esa Web ij fLFkr gksrs gSaA

Protocol nks ;k nks ls T;knk Electronic Devices ds chp vkil esa Communication djokus ds fy, dqN NksVs&NksVs Standard Software cuk, x, gSaA bu Software dks Protocol dgk tkrk gSA fofHkUu izdkj dh t:jrksa dks iwjk djus ds fy, fofHkUu izdkj ds Protocols Develop fd, x, gSaA mnkgj.k ds fy, ;fn Internet ls fdlh File dks ,d Computer ls nwljs Computer ij Transfer djuk gks] rks ;s dke FTP (File Transfer Protocol) djrk gS] ;fn E-Main Send djuk gks rks SMTP (Simple Mail Transfer Protocol) o E-Mail dks izkIr djuk gks] rks POP (Post Office Protocol) Use fd;k tkrk gSA tcfd ;fn gesa World Wide Web ij miyC/k


29



fdlh Resource dks Access djuk gks] rks bl t:jr dks HTTP (Hyper Text Transfer Protocol) iwjk djrk gSA blh rjg ls fofHkUu izdkj ds vU; Internet ;k Network Related dkeksa dks iwjk djus ds fy, fofHkUu izdkj ds Protocols dks Develop fd;k x;k gSA bu Protocols ds lewg dks ,d fo”ks’k uke ls Identify fd;k tkrk gS] ftls TCP/IP ;kuh Internet Control Protocol / Internet Protocol dgk tkrk gSA

IP Address tc Hkh dksbZ Device Internet ls Connect gksrk gS] rks Internet }kjk ,d fo”ks’k rjhds dk iz;ksx djds Connect gksus okys gj Device dks ,d Unique Number iznku dj fn;k tkrk gSA Internet }kjk gj Device dks fn, tkus okys bl Unique Number dks ml Device dk IP Address dgk tkrk gSA ;s ,d 32-Bit Number gksrk gS] ftlesa pkj 8-Bit Numbers gksrs gSa vkSj pkjksa Numbers 0 ls 255 dh Range ds chp gks ldrs gSaA bu pkjksa Numbers dks ,d Dot dk iz;ksx djds ,d nwljs ls vyx fd;k tkrk gSA mnkgj.k ds fy, 170.17.8.192 fdlh le; fdlh Computer dk ,d IP Address gks ldrk gSA bl IP Number ds nks fgLls gksrs gSa% igyk fgLlk ml Network dks Identify djrk gS ftl esa Host Exist gS vkSj nwljk fgLlk fdlh Particular Host dks Identify djrk gSA IP Address nks izdkj ds gksrs gSa%

Dynamic IP Address gekjs Network }kjk gekjs fdlh Device dks Provide fd;k x;k ;s IP Address Number rHkh rd gekjs Device dks Refer djrk gS] tc rd ge Net ls Connected jgrs gSaA tSls gh ge Net ls Disconnect gksrs gSa] gesa Allot fd;k x;k IP Number fdlh vU; Device dks Provide fd;k tk ldrk gSA ;fn ge fQj ls Net ls Connect gksrs gSa] rks fQj ls gesa ogh IP Number izkIr ugha gksxk] cfYd Internet }kjk gesa ,d u;k Number ns fn;k tk,xkA bl fLFkfr esa gekjk Device rks ,d gh gksrk gS] ysfdu vyx&vyx le; ij Net ls Connect gksus ds dkj.k dbZ IP Numbers }kjk Identify gks ldrk gSA bl izdkj ds IP Address dks Dynamic IP Address dgk tkrk gSA

Static IP Address ;fn ge pkgsa rks ge gekjs Host ;kuh Server ds fy, ,d Static IP Address izkIr dj ldrs gSa] ysfdu Static IP Address dkQh egaxk gksrk gSA ;s ,d ,slk IP Address gksrk gS] tks Unique gksrk gS vkSj dHkh Hkh cnyrk ugha gS pkgsa Net ls Connected jgsa vFkok Disconnected jgsaA


30



Host or Server Network ij fLFkr ,d fof”k’V izdkj dk Computer Host ;k Server dgykrk gSA pwafd Host lkekU;r;k Server dk dke djrk gS] blfy, Host gesa”kk ckdh ds vU; Computers dh rqyuk esa vf/kd Powerful gksrk gSA TCP/IP Network ds gj Host dk ,d Unique IP Address gksrk gS] ftlls ml Host dh Network ij ,d Unique igpku gksrh gSA dksbZ Hkh Powerful Configuration okyk Computer Host ;k Server gks] ,slk ugha gksrk cfYd ftl Computer ij ,d Special Type dk Software ftls Web Server, Mail Server vFkok File Server dgrs gSa] Installed gksrk gS] mlh Computer dks Host vFkok Server dgk tk ldrk gSA orZeku le; esa ewy :i ls IIS o Apache uke ds nks Web Servers lcls T;knk mi;ksx esa fy, tkrs gSaA IIS Web Server Windows Operating System ds fy, Microsoft Company }kjk cuk;k x;k Web Server gS] blfy, bl ij Microsoft Technology dh Programming Languages tSls fd ASP ;k ASP.NET esa cuk, x, Web Applications T;knk vklkuh o lqfo/kkiq.kZ rjhds ls Run gksrs gSa] tcfd Apache Linux ds fy, Develop fd;k x;k Web Server gS] tks Server Side Scripting Language ds :i esa PHP dks T;knk csgrj rjhds ls Access djrk gSA

Hostname or Domain fdlh Hkh TCP/IP Network ds fdlh Powerful Computer dks Host cuk;k tkrk gS] tks mlds Clients dks Services Provide djrk gSA gj Host dk ,d Unique IP Address gksrk gS] ftlls ml Host dks vU; Clients Identify djrs gSaA ysfdu tc ge Internet ls tqMrs gSa] rc yk[kksa TCP/IP Networks vkil esa Connected gksrs gSa] blfy, fofHkUu izdkj ds Hosts dks Identify djus ds fy, IP Address dks ;kn j[kuk t:jh gksrk gS] rkfd ,d Client Required Host ls fdlh Service ds fy, Request dj ldsA pwafd IP Address okLro esa ,d 32-Bit Number gksrk gS vkSj fofHkUu Hosts ds IP Numbers dks ;kn j[kuk ,d dfBu dke gS] blfy, fofHkUu Hosts dks Internet dh ,d fo”ks’k Service }kjk ,d Logical Symbolic uke ns fn;k tkrk gS vkSj gesa fdlh Host dks mlds IP Number ds LFkku ij mlds uke ls ;kn j[kuk gksrk gS] tks fd rqyukRed :i ls ljy gksrk gSA fdlh Host ds IP Address ds lkFk ,d uke Associate djus dk dke DNS (Domain Name Service) o Sun Microsystems Company dk NIS (Network Information Services) djrk gSA tc ge Net ls fdlh Web Site ds fdlh Web Page dks izkIr djuk pkgrs gSa] rc gesa ml Web Site dk Web Address fy[kuk gksrk gSA blh Web Address esa gekjs ml Host dk uke gksrk gS] ftlls ge Connect gksuk pkgrs gSaA Internet dh ftl DNS o NIS Service dk iz;ksx djds fdlh Host dks ,d uke Provide fd;k tkrk gS] ogh Service gekjs Web Address esa ls Host ds uke dks Hkh izkIr djus ds ckn Host ds uke ds vk/kkj ij ml uke ls lEcaf/kr IP Address ;k IP Number dks izkIr djrk gS vkSj gesa ml Host ij igqapk nsrk gS] ftl ij gekjh Required Site miyC/k gksrh gSA bl uke dks gh Hostname ;k Domain Name dgk tkrk gSA tSls www.bccfalna.com ,d Domain Name gS] ftldk dksbZ u dksbZ Unique IP Address Hkh gksxkA ysfdu ;fn ge bl Web Site ij igqapuk pkgrs gSa] rks gesa dsoy bl uke dks ;kn j[kuk gksrk gSA “ks’k dke DNS Automatically djrk gSA


http://www.bccfalna.com/

31



Resources Internet ij fofHkUu izdkj dh ,slh Files gksrh gSa ftUgsa Web Browser Support djrk gSA ;s Files dksbZ HTML, XML ;k vU; izdkj dk Document gks ldrk gS] dksbZ Text File gks ldrh gS] dksbZ Document File gks ldrh gS vFkok dksbZ Media File tSls fd Image, Sound vFkok Video dh File gks ldrh gSA bu fofHkUu izdkj dh Files dks lkekU;r;k ,d “kCn esa “Resources” dgk tkrk gSA

URL – Uniform Resource Locator pwafd Internet ij dbZ izdkj dh Files Available gSa ftUgsa Web Browser }kjk Access o Use fd;k tk ldrk gSA bu fofHkUu izdkj ds Resources dk ,d Unique Address gksrk gS] ftldk iz;ksx djds bu Resources dks Web Browser esa izkIr o Access fd;k tk ldrk gSA Resources ds bu Unique Address dks gh URL ;k Uniform Resource Locator dgk tkrk gSA ;kuh http://www.bccfalna.com/home.html home.html uke ds Resource ;k Document File dk ,d Unique Address gSA bl Address dks Web Browser ds Address Bar esa Specify djds ge Directly bl Web Page ij igqap ldrs gSaA ;s Web Address gh URL ;k Uniform Resource Locator gS D;ksafd ge tc Hkh dHkh bl Address dks mi;ksx esa ysaxs] ge gesa”kk home.html Document ij gh igqapsaxsA fdlh Hkh URL ds gesa”kk rhu Hkkx gksrs gSa % Protocol Server Name Resource with Path gekjs mijksDr mnkgj.k URL esa http:// Protocol gS] www.bccfalna.com Web Server gS vkSj home.html Resource gSA ;kuh Protocol http:// Server Name www.bccfalna.com Resource with Path /home.html tc ge bl iwjs URL dks Web Browser ds Address Bar esa fy[krs gSa] rc Web Browser bl Address ls rhu ckrsa le>rk gSA igyk ;s fd ge ftl Resource dks Web Server ls izkIr djuk pkgrs gSa] og ,d HTML Document gS D;ksafd HTML Document dks gh Hypertext Document Hkh dgk tkrk gS vkSj Hypertext Document dks izkIr djus ds fy, Web Browser dks HTTP Protocol Use djuk iMrk gSA nwljh Information Web Browser dks ;s feyrh gS fd ge gekjk Resource ftl Web Server ls izkIr djuk pkgrs gSa] ml Web Server dk uke www.bccfalna.com gSA vc bl ,d uke ds Hkh rhu fgLls gSa%

• tgka igyk fgLlk www Web Browser dks ;s crk jgk gS fd gekjk Document ftl Host Computer ij j[kk gS] og ,d ,slk Computer gS] tks Internet ;kuh World


http://www.bccfalna.com/home.html



32



Wide Web dk ,d fgLlk gS D;ksafd og World Wide Web ;kuh Internet ls Connected gS tcfd

• nwljk fgLlk ml Computer dk uke gS] ftl ij gekjk Document Placed gS tks fd

bccfalna gS vkSj

• rhljk fgLlk ;s crk jgk gS fd ;s ,d Commercial Web Document gS vkSj bl Web Site esa Directly ;k Indirectly dqN u dqN cspus dh dksf”k”k dh tk jgh gSA

URL ls rhljh Information Web Browser dks ;s feyrh gS fd ge bl Web Site ls ftl Document dks izkIr djuk pkgrs gSa] ml Resource dk uke home.html gS vkSj ;s Document Web Server ds Root Folder esa gS D;ksafd “/” Character fdlh Hkh Computer System ds Root ;k Home dks Represent djrk gSA ekuyks fd gekjk okafNr Document ,d sunlight.jpg uke dh Image File gS vkSj ;s Image File gekjs Web Server www.bccfalna.com ij fdlh images uke ds ,d Folder esa gS Stored gSA vc bl Image File dks izkIr djus ds fy, gesa tks URL Use djuk iMsxk og fuEukuqlkj gksxk% http://www.bccfalna.com/images/sunlight.jpg pwafd gekjk Document ,d Image File gS vkSj Image File ,d Linkable Document gS] blfy, bls http:// Protocol }kjk Access fd;k tk ldrk gSA lkFk gh gekjh Image File www.bccfalna.com uke ds Web Server ij gS vkSj bl Web Server ds Root ij images uke dk ,d Folder gS] blfy, geus bl Domain Name ds ckn ml Folder ds uke dks Specify fd;k gS vkSj vUr esa viuh sunlight.jpg uke dh Resource File dks Refer fd;k gSA




33



HTML HyPer TexT MArkuP LAnGuAGe


34



HTML (Hyper Text Markup Language) 1990 ls igys rd fdlh Hkh rjg dh Information dks Internet ls Access djuk dkQh Technical dke gksrk FkkA Internet ls Information dks Access djus dk ;s rjhdk dkQh Tricky gksrk Fkk tks fd ,d vke vkneh ds cl dh ckr ugha gksrh FkhA blfy, ,d ,sls rjhds dh t:jr gqbZ] ftlls Internet ds ek/;e ls Information dks Access djuk ljy gks ldsA ;s dke Tim Berners-Lee uke ds ,d Physicist us fd;kA Tim us ,d ,lk rjhdk fodflr fd;k ftlls “Hypertext” Links ds :i esa Internet ls Text Information dks vklkuh ls Cross-Reference fd;k tk ldrk FkkA ;s fopkj okLro esa Tim dk ugha Fkk] ysfdu mUgksaus ,d ,slh Markup Language dk fodkl fd;k] ftlls bl fopkj dks Implement fd;k tkuk lEHko gks ldkA Hypertext dk eryc ,sls Text ls gksrk gS] ftls Electronic Form esa Store fd;k x;k gks vkSj ftls Links ds ek/;e ls Cross-Reference fd;k tk ldrk gksA ;kuh ftl Information dks Electronic Form esa Convert djds Links }kjk Cross-Reference fd;k tk ldrk gS] ,sls Text dks “Hypertext” dgk tkrk gSA HTML (Hypertext Markup Language) Web Pages dh ewy Hkk’kk gSA Internet ij vkt ftruh Hkh Web Sites gSa] os lHkh Web Sites HTML Pages dk Collection ek= gS] ftuesa HTML Elements dk iz;ksx fd;k tkrk gSA HTML ds bu Elements dks gh Markup Hkh dgrs gSa] D;ksafd ;s Elements Web Page ds fofHkUu izdkj ds Contents dks fofHkUu rjhdksa ls Web Browser esa Render gksus ds fy, Mark djrs gSa vkSj Web Browser dks bl ckr dk Indication djrs gSa] fd Web Browser esa fdl Content dks fdl txg ij vkSj fdl rjg ls Render djuk gSA ;s ,d Markup Language gS tks fd iwjh rjg ls Content ;k Text ds Organization ls lacaf/kr gSA mnkgj.k ds fy, fdlh Newspaper esa ge tks Content ns[krs gSa] mlesa dqN Text cMs gksrs gSa tks Heading dh rjg fn[kkbZ nsrs gSa tcfd dqN NksVs gksrs gSa tks Sub-Heading ;k Paragraph dh rjg fn[kkbZ nsrs gSa rks dqN Texts List ds :i esa gksrs gSaA

Elements HTML, fdlh Document ds Texts dh fofHkUu izdkj dh Marking djrk gS vkSj ;s r; djrk gS fd dkSulk Text Heading ds :i esa fn[kkbZ nsxk] dkSulk Text Sub-Heading ds :i esa fn[kkbZ nsxkA dkSulk Text List ds :i esa gksuk pkfg, vkSj dkSulk Text Paragraph ds :i esa gksuk pkfg,A Document ds Contents dh Marking djus ds fy, HTML Specification esa ftl rjhds dks mi;ksx esa fy;k tkrk gS] mls Element dgrs gSaA bls ge fuEu fp=kuqlkj le> ldrs gSa%


35



fofHkUu izdkj ds HTML Elements dks ,d Angle Brackets ds Pair ds :i esa Specify fd;k tkrk gSA gj HTML Element ds nks Hkkx gksrs gSa] ftUgsa Tag dgk tkrk gSA igyk Tag Opening Tag gksrk gS vkSj ;s Opening Tag fdlh Feature dks On djrk gS] tcfd nwljk Tag Closing Tag gksrk gS vkSj ;s Tag ml On fd, x, Feature dks Off djrk gSA mnkgj.k ds fy, ;fn gesa gekjs Web Page esa “Hello WWW” “kCn dks eq[; Heading ds :i es fn[kkuk gks] rks gesa bl Text dks Web Browser esa Render djus ds fy, HTML Source Page esa <h1> Element dks fuEukuqlkj Use djuk gksxk% <h1>Hello WWW</h1> tc Web Browser bl Line dks Interpret djrk gS] rc mls <h1> Tag dk Pair dk igyk Opening Tag izkIr gksrk gSA ;g Tag Web Browser dks bl ckr dk Signal nsrk gS] fd bl Tag ls vkxs] tks Hkh Text gS] mls Web Browser esa Heading ds :i esa Render djuk gSA Web Browser bl igys Tag ls vkxs fy[ks x, Texts dks rc rd Heading ds :i esa Render djrk jgrk gS] tc rd fd mls Tag Pair dk Closing Tag </h1> izkIr ugha gks tkrkA HTML Element ds <h1> Pair o ml Pair ds chp fy[ks x, Contents ds iwjs lewg dks HTML dk Element dgk tkrk gSA ;kuh ;fn ge fiNys Syntax dks ns[ksa] rks ;s ,d HTML Element dk mnkgj.k gSA ,d HTML Element esa lkekU;r;k ,d Opening Tag ,d Closing Tag o nksuksa Elements ds chp esa fy[kk x;k dqN Content gksrk gS ysfdu dbZ HTML Elements ,sls Hkh gksrs gSaA HTML Specification esa fofHkUu izdkj ds Elements Define fd, x, gSa vkSj bu Elements dks le> dj mu Elements ds vuqlkj Document dks Display ;k Render djus dk dke Web Browser djrk gSA ;kuh Web Browser fdlh Document ds HTML Codes dks Web Server ls izkIr djrk gS vkSj mudh Parsing djds Contents dks Web Browser esa Render dj nsrk gSA mnkgj.k ds fy, fdlh HTML Document esa ;fn dksbZ Content Heading ds :i esa fn[kkbZ nsuk pkfg,] rks ge ml Content dks Heading Element ds chp Specify djrs gSaA tc Web Browser ml Document dks Read djrk gS] rks tgka ij Hkh mls HTML Elements izkIr gksrs gSa] ogka ds Content dks og Element dh Specification ds vuqlkj Modify dj nsrk gSA blh izfØ;k dks ljy “kCnksa esa Document dh Parsing gksuk dgrs gSaA HTML okLro esa dksbZ Programming Language ugha gS] cfYd ;s ,d Markup Language gS] tks ewy :i ls Web Browser esa fn[kkbZ nsus okys Web Page ds Contents dh Organization djus dk dke djrk gSA Web Browser esa ge ftl Page dks ns[krs gSa] og Page okLro esa HTML Elements ds vk/kkj ij gh Render ;k Display gksrk gSA ;fn ge HTML Elements dh File dks Source Program ekusa] rks Web Browser ml Source Program dks Interpret djus okys Interpreter dh rjg dke djrk gSA

Attributes fofHkUu Elements lkekU; dke djus ds vykok dqN Special izdkj ds dke Hkh dj ldrs gSaA bu Special izdkj ds dkeksa dks djus ds fy, bu Elements ds Opening Tag esa dqN Properties dks Specify fd;k tkrk gSA bu Properties dks Attributes dgrs gSaA ;s


36



Attributes, Element ds fofHkUu Optional ;k Compulsory Features dks Represent djrs gSa] ftls ge fuEu fp=kuqlkj le> ldrs gSa %

Element ds gj Attribute ds nks Hkkx gksrs gSaA igys Hkkx dks Name ls o nwljs Hkkx dks Value ls Represent fd;k tkrk gSA Element ds fdlh Attribute dh Name Property og Property gksrh gS] ftls ge Set djuk pkgrs gSa vkSj Value og eku gksrk gS] ftlls ge fdlh Name Property dks Set djrs gSaA mnkgj.k ds fy, <h1> ,d Element gS] ftls iwjs Document Page ij Uniquely Identify djus ds fy, ge mls ,d ID ns ldrs gSaA bl fLFkfr esa “id” ,d Name Property gS tcfd mlesa Specified uke ,d Value gSA <h1 id=”MainSite”> </h1> Elements and Attributes ds Name dks gesa”kk Small Case Letters esa Specify djuk pkfg, rFkk Attributes esa Set fd, tkus okys eku dks gesa”kk Double Quotes ds chp fy[kuk pkfg,] D;ksafd Double Quotes ds chp ge fuEukuqlkj Single Quotes dks Use dj ldrs gSa% <h1 title=”Main Site’s Heading”> </h1> ysfdu Single Quotes ds chp ge Double Quotes dks Use ugha dj ldrsA <h1 title=’Main Site’s Heading’> </h1> gkykafd ge Single Quotes ds chp Double Quotes dks Use dj ldrs gSaA ysfdu HTML Document esa Strings, Text ;k Name Values dks Double Quotes esa gh Specify djuk pkfg,] rkfd Server Side Scripting Language esa Single Quotes dks String ds fy, vklkuh ls mi;ksx esa fy;k tk ldsA (Optional)


37



HTML5 ConTenT

CATeGorieS


38



Content Categories HTML5 esa “Document dk Contents fdl izdkj dk gS”] bl ckr dks /;ku esa j[krs gq, Content dks vPNh rjg ls Manage djus ds fy, dbZ Rules cuk, x, gSaA ;s Rules dbZ Groups ds :i esa Define fd, x, gSa] ftUgsa Content Models dgk tkrk gS vkSj gj Group esa fdlh ,d izdkj ds Content dks Handle djus ls lacaf/kr dbZ Elements Define fd, x, gSaA bl Content Model esa gj HTML Element Zero, One ;k Many Content Model ls lacaf/kr gks ldrk gSA ewy :i ls HTML5 esa Content dks rhu eq[; Content Categories esa Divide fd;k x;k gS%

Main Content Category bl Category esa cgqr lkjs Elements }kjk Share fd, tkus okys Common Rules dks Describe fd;k x;k gS] tks fuEukuqlkj gSa%

Metadata Content bl Category ls lacaf/kr Elements Document ds Presentation o Behavior dks Modify djus o vU; Documents ls Links Setup djus dk dke djrs gSaA bl Category ds eq[; Elements fuEukuqlkj gSa% <base> , <command> , <link> , <meta> , <noscript> , <script> , <style> and <title>

Flow Content bl Category esa mu Elements dks j[kk x;k gS tks ewy :i ls Text vFkok Embedded Content dks Hold djus dk dke djrs gSaA ;s Elements fuEukuqlkj gSa% Text <a> <abbr> <address> <article> <aside> <audio> <bdo> <blockquote> <br> <button> <canvas> <cite> <code> <datalist> <del> <details> <dfnrr> <div> <dl> <em> <fieldset> <figure> <footer> <form> <h1> <h2> <h3> <h5> <h6> <header> <hgroup> <hr> <i> <iframe> <input> <ins> <kbd> <keygen> <label> <map> <mark> <menu> <meter> <nav> <noscript> <object> <ol> <output> <pre> <progress> <q> <ruby> <samp> <script> <section> <small> <span> <strong> <sub> <sup> <svg> <table> <time> <ul> <var> r<video> <wbr> <b> <command> <h4> <img> <math> <p> <select> <textarea> <embed> dqN vU; Elements Hkh bl Category ls lacaf/kr gSa] ysfdu os dqN fo”ks’k fLFkfr;ksa esa gh mi;ksx esa fy, tkrs gSa] tks fuEukuqlkj gSa% <area> ;s <map> Element dk Descendent Element gksrk gSA <link> ;s rHkh Use djrs gSa tc itemprop Attribute Present gksA <meta> ;s Hkh rHkh Use djrs gSa tc itemprop Attribute Present gksA <style> bls rc Use djrs gSa] tc scoped Attribute Present gksA


39



Sectioning Content bl Group ls Associated Elements, Current Document dh Outline Create djus ds fy, mi;ksxh gksrs gSa] tks fd <header>, <footer> o vU; Heading Elements (h1, h2, h3, h4, h5, h5, hgroup) dk Scope Define djrs gSaA bl Category ls lacaf/kr Elements fuEukuqlkj gSa%

<article>, <aside>, <nav>, <section>

Heading Content bl Group ds Elements fdlh Section esa fy[ks x, Content dk Title Define djrs gSaA Section dks nks rjhdksa ls Mark fd;k tk ldrk gSA igyk rjhdk Manual gksrk gS] ftlesa fofHkUu Sectioning Elements dks Use fd;k tkrk gSA bu Elements dks Use djds fy[kk x;k Content, Sectioning Content dgykrk gS] tcfd nwljs rjhds esa ml le; Automatically Invisible Section cu tkrs gSa] tc ge fdlh Heading Element (h1, h2, h3, h4, h5, h6, hgroup) dk iz;ksx djrs gSaA bl Category ls lacaf/kr Elements fuEukuqlkj gSa%

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup> gkykafd Sectioning Content dqN Headings dks Hold djrk gS] ysfdu <header> Element dks bl Group esa “kkfey ugha fd;k x;k gSA

Phrasing Content bl Group ds vUnj os Elements vkrs gSa] tks Text vFkok vU; Mark-ups dks Hold djus dk dke djrs gSaA Phrasing Content lkekU;r;k Paragraphs Create djrs gSaA bl Category ls lacaf/kr Elements fuEukuqlkj gSa% <abbr> <audio> <b> <bdo> <br> <button> <canvas> <cite> <code> <command> <datalist> <dfn> <em> <embed> <i> <iframe> <img> <input> <kbd> <keygen> <label> <mark> <math> <meter> <noscript> <object> <output> <progress> <q> <ruby> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <svg> <textarea> <time> <var> <video> <wbr> Plain Text dqN fo”ks’k ifjfLFkfr;ksa esa ge dqN vkSj Elements dks bl Category ds Elements ds :i esa Use dj ldrs gSa] tks fd fuEukuqlkj gSa%

<a>, <area>, <del>, <ins>, <link>, <map>, <meta>


40



Embedded Content bl Category esa os Elements gksrs gSa] tks fdlh vU; Resource vFkok Content dks fdlh vU; Mark-up Language vFkok Namespace ls Import djrs gSaA bl Category ls Related Elements fuEukuqlkj gSa% <audio> , <canvas> , <embed> , <iframe> , <img> , <math> , <object> , <svg> , <video>

Interactive Content bl Category esa os Elements gksrs gSa tks User Interaction ds fy, Design fd, x, gSaA ;s Elements fuEukuqlkj gSa% <a> , <button> , <details> , <embed> , <iframe> , <keygen> , <label> , <select> , <textarea> dqN vU; Elements dqN fo”ks’k ifjfLFkfr;ksa esa bl Category esa Participate djrs gSa] tks fuEukuqlkj gSa%

<audio> ;fn controls Attribute Present gksA <img> ;fn usemap Attribute Present gksA <input> ;fn type Attribute Hidden u gksA <menu> ;fn type Attribute Toolbar State esa gksA <object> ;fn usemap Attribute Present gksA <video> ;fn controls Attribute Present gksA

Form-Associated Content bl Category esa os Elements vkrs gSa tks fdlh Form Element ds vUnj Nested gksrs gSaA lkekU;r;k bl Category ds Elements ds lkFk form Attribute esa id Specified gksrk gS vFkok ;s Form ds vUnj gksrs gSaA ;s Elements fuEukuqlkj gSa% <button>, <fieldset> , <input> , <keygen> , <label> , <meter> , <object> , <output> , <progress> , <select> , <textarea> bl Category ds Elements dh dqN Sub-Category Hkh gS] tks fuEukuqlkj gS%

listed bl Category ds Element fuEukuqlkj gSa% <button> , <fieldset> , <input> , <keygen> , <object> , <output> , <select> , <textarea>


https://developer.mozilla.org/en/HTML/Element/audio#attr-controls




41



labelable tks Elements <label> Element ds lkFk Associated gks ldrs gSa] bl Category esa vkrs gSaA bl Category ds Element fuEukuqlkj gSa% <button> , <input> , <keygen> , <meter> , <output> , <progress> , <select> , <textarea>

submittable tks Elements, Form Submitting ds le; Form Data Set Create djus ds fy, Use gksrs gSa] bl Category esa vkrs gSaA bl Category ds Element fuEukuqlkj gSa% <button> , <input> , <keygen> , <object> , <select> , <textarea>

resettable tks Elements, Form Resetting ds le; Affected gksrs gSa] bl Category esa vkrs gSaA bl Category ds Element fuEukuqlkj gSa% <input> , <keygen> , <output> ,<select> , <textarea>

Transparent Content Model <del> o <ins> Elements Transparent Elements gSaA ;s os Elements gksrs gSa] ftUgsa HTML Document ls Remove dj nsus ij Hkh Final Output Rendered Content ij dksbZ izHkko ugha iMrk gSA


42



ArCHiTeCTure of

HTML doCuMenT


43



Architecture of HTML Document <!DOCTYPE > fdlh Hkh HTML5 Document dk ;s lcls igyk HTML Element gksrk gSA ;s Element Web Browser dks crkrk gS fd Current Document ,d HTML5 Supported Document gS vkSj blesa HTML5 Specification ds Standards ;kuh Elements dk iz;ksx fd;k x;k gSA ;fn ge ;s Line u Hkh fy[ksa] rks Hkh Web Browser gekjs Document dks HTML5 Document dh rjg gh Process djrk gS] D;ksafd Web Browser gekjs Document dks DOCTYPE ds vk/kkj ij ugha cfYd Web Browser ds Internal Architecture ds vk/kkj ij Parse djrk gS vkSj Web Browser esa ;fn HTML5 Element dks Handle djus ds fy, Functionality dks Specify fd;k x;k gS] rks Web Browser ml Functionality dks Document ij t:j Apply djsxk] Hkys gh geus DOCTYPE Specify fd;k gks ;k ughaA ysfdu tc ge fcuk DOCTYPE okys Document dh Validating djrs gSa] rc gesa Errors izkIr gksrh gSA blfy, gj HTML5 Document esa fuEu Line fy[kdj ;s t:j Specify djuk pkfg,] fd gekjk Current HTML Web Page ,d HTML5 Elements Supported Document gS%

<!DOCTYPE html> HTML5 DOCTYPE Case Sensitive ugha gS] blfy, ge bls fuEukuqlkj Hkh fy[k ldrs gSa%

<!doctype html>

<html> Element gekjk iwjk Document ,d HTML Document gS] blfy, gekjs iwjs Document ds lkjs Elements dks gesa <html> Element ds Opening o Closing Tags ds chp gh fy[kuk gksrk gSA ;s Element fdlh Hkh Web Page dk Root Element gksrk gSA lHkh vU; Elements bl Element ds Descendants gksrs gSaA blfy, fdlh Hkh HTML Document dks Represent djus ds fy, gesa lcls igys html Element dks Use djuk gksrk gSA bl Element ds eq[;r% nks Hkkx gksrs gSa vFkok nwljs “kCnksa esa dgsa rks bl Root html Element ds nks vkSj dsoy nks Child Elements gksrs gSa% The <head> Element ;s Element gesa”kk HTML Page ds Top ij gksrk gSA bl Element esa og Information gksrh gS] tks Argument ds :i esa Browser dks Pass gksrh gSA bl Element ds chp tks Hkh dqN gksrk gS] og vU; HTML Elements dh rqyuk esa lcls igys Web Browser esa Load gksrk gSA lkekU;r;k bl Element esa Web Page dk Title gksrk gS] tks Browser ds Title Bar ij fn[kkbZ nsrk gSA blds vykok bl Element esa Page dk Description o Page ds Keywords dks Define djus okys Elements dks Hkh lfEefyr fd;k tkrk gSA bu Elements dk iz;ksx Search Engines gekjs Web Page dks [kkstus ds fy, djrs gSaA bl Element ds vUnj fuEu Elements dk iz;ksx fd;k tk ldrk gS%


44



<title> , <base> , <link> , <style> , <meta> , <script> , <noscript> , <command>

The <body> Element ;s Element lkekU;r;k HTML Page dh Body dks Define djrk gSA HTML Page dh Body gh og LFkku gksrk gS] tgka ij Web Page esa fn[kkbZ nsus okys Contents dks fofHkUu izdkj ds Elements dk iz;ksx djrs gq, fy[kk tkrk gSA tks Content <body> Element ds chp ugha gksrk] og Content gesa Web Browser ds Document Area esa fn[kkbZ ugha nsrkA ,d lkekU; ls mnkgj.k }kjk ge HTML Page ds fofHkUu Basic Parts o Elements dks fuEukuqlkj Represent dj ldrs gSa% HTML FILE <!DOCTYPE html> <html> <head> <title>HTML5 First Web Page</title> </head> <body> This is the Body Section of the Web Page. </body> </html> bl Example Code dks Notepad++ esa Type djsa vkSj File dks .htm ;k .html Extension ds lkFk Save djsaA File ds Output dks ns[kus ds fy, Notepad ++ ds Run Menu esa tk,A Computer esa Installed lHkh Web Browsers dh List bl Menu esa fn[kkbZ nsrh gSA fdlh Hkh Web Browser Option dks Click djsaA Run gksus okyk Web Browser fuEukuqlkj fn[kkbZ nsxk %

Head Section esa Specify fd;k x;k Title Web Browser ds Title dh rjg fn[kkbZ ns jgk gS tcfd Body Section esa fy[kk x;k Content Web Browser ds Content dh rjg fn[kkbZ ns jgk gSA


https://developer.mozilla.org/en/HTML/Element/base

45



 tc HTML File dkQh cMh gksus yxrh gS] rc Comments dk iz;ksx fd;k tkrk gSA ;s Comments, HTML Codes fy[kus okys Coders viuh lqfo/kk ds fy, fy[krs gSa] rkfd os HTML Document ds fofHkUu Sections dks vklkuh ls igpku ldsaA dbZ ckj bu Comments dk iz;ksx Document ds dqN fgLls dks Parse gksus ls jksdus ds fy, Hkh fd;k tkrk gSA ml fLFkfr esa HTML Codes Web Page ij jgrs rks gSa] ysfdu Web Browser mUgsa Render ugha djrkA bldk iz;ksx fuEukuqlkj fd;k tkrk gS% 

Elements Nesting ge gekjh t:jr ds vuqlkj tc ,d Element ds vUnj nwljs Element dks Use djrs gSa] rks bl izfØ;k dks Elements dh Nesting djuk dgrs gSaA mnkgj.k ds fy, head o body Elements, html Element ds vUnj Nested gksrs gSaA blh rjg ls title Element gesa”kk head Element ds vUnj Nested gksrk gSA tc ge Nesting djrs gSa] rc gesa bl ckr dk /;ku j[kuk t:jh gksrk gS] fd tks Element lcls igys Start gksrk gS] og Element lcls ckn esa Close gksrk gS vkSj tks Element lcls ckn esa Start gksrk gS] og Element lcls igys Close gksrk gSA tSls % <html> <head> <title>This is Title</title> </head> </html> ;s ,d Valid Nesting gSA ysfdu fuEu Nesting Invalid gS% <html> <head> <title>This is Title</title>

</html> </head> D;ksafd bl Nesting esa html Element, head Element ls igys Open gqvk gS] vkSj head Element, html Element ls igys Close gks jgk gSA tcfd head Element, html Element ls ckn esa Close gksuk pkfg,A

<head> Element - Document Header Document Header fdlh Hkh HTML Web Page dk igyk eq[; fgLlk gksrk gSA bl fgLls esa ge vius Web Page Document dh Basic Information dks Specify djrs gSaA bl fgLls esa fy[ks tkus okys Elements dk Web Browser esa fn[kkbZ nsus okys Contents dh Formatting ls dksbZ lEca/k ugha gksrk gSA cfYd bl fgLls esa ge vius Web Page ds ckjs esa ,slh tkudkfj;ksa dks Specify djrs gSa] ftudk laca/k ;k rks ckdh ds Documnt ls gksrk gS ;k fQj Search Engines lsA

46



<head> Element esa ge Directly fdlh izdkj dk dksbZ Content ugha fy[krs cfYd iwjs Document ls lacaf/kr fofHkUu izdkj dh t:jh ckrksa ls lacaf/kr Elements dks ge bl Element esa Specify djrs gSaA bl Element esa ge ftu vU; Elements dks mi;ksx esa ys ldrs gSa] mUgs Metadata Content Category ds Elements dgrs gSaA Metadata Content Category ls lacaf/kr Elements iwjs Document ds Presentation ;k Behavior dks Modify djus dk dke djrs gSaA bl fgLls esa dke esa fy, tkus okys fofHkUu Elements fuEukuqlkj gSa%

<title> - Title of the HTML Document HTML Element ds rqjUr ckn esa gesa <head> Element dks Specify djuk gksrk gSA vius Page dks Title nsus ds fy, gesa <title> Element dk iz;ksx djuk gksrk gSA ;s dke ge fuEukuqlkj dj ldrs gSa%

<title>Betalab Computer Center</title> lkekU;r;k T;knkrj Search Engines title Element ds Content dks gh igys Search djrs gSaA ;fn ge pkgrs gSa] fd fofHkUu izdkj ds Search Engines gekjs Web Page dks Search djus esa l{ke jgsa] rks gesa gekjs Web Page esa title Element dks t:j Include djuk pkfg,A pwafd gekjs Page dk Title Client dh Browser History esa Hkh Bookmark dh rjg Store gksrk gS] blfy, Hkh Title Tag dks t:j Specify djuk pkfg,] rkfd User gekjs Page dks vklkuh ls fQj ls ns[k lds vkSj fQj gekjh Site ij fcuk fdlh ijs”kkuh ds vk ldsA

<base> Element bl Element esa Value ds :i esa gesa gekjh Web Site dk Base URL Specify djuk gksrk gSA bl Attribute esa ge tks URL Specify djrs gSa] iwjs HTML Document ds lHkh Relative URLs blh Base URL ds vk/kkj ij viuk Absolute Web Address Create djrs gSa ;k fofHkUu Web Resources dks Identify djrs gSaA mnkgj.k ds fy, HTML File <!DOCTYPE html> <html> <head> <base href="localhost/bccfalna/" /> </head> <body> <img href="images/sunset.jpg" /> </body> </html> bl Web Page esa geus <base> Element esa “localhost/bccfalna/” URL Specify fd;k gSA fQj geus <body> Element esa ,d <img> Element Create fd;k gS vkSj bl Element ds href Element esa geus “images/sunset.jpg” eku Specify fd;k gSA


47



tc ;s Web Page Web Browser esa Render gksxk] rc Web Browser, Web Page ij Specified lHkh URLs ds fy, Base Address ds :i esa “localhost/bccfalna/” dks mi;ksx esa ysxk Document ij Specified lHkh Relative URLs ls igys bl Base Address dks Add djds Resource ds Absolute Address dks izkIr djsxkA ;kuh tc Web Browser <body> Element dks Render djsxk] rc mls “images/sunset.jpg” feysxkA bls Base URl “localhost/bccfalna/” ds lkFk Add djus ij mls “localhost/ bccfalna/images/sunset.jpg” Absolute Web Address izkIr gksxk tks fd sunset.jpg Image dk URL gSA iwjk URL feyrs gh] Web Browser bl Image dks Window esa Display dj nsxkA <base> Element esa href Attribute ds lkFk gh ge target Attribute dks Hkh Specify dj ldrs gSa] tks Open gksus okys gj Link ds Open gksus ds rjhds dks Control djsxkA

<style> Element bl Element esa ge Current Document dh Styling ls lacaf/kr CSS Rules dks Enclose djrs gSaA tSls HTML File <!DOCTYPE html> <html> <head> <style> /* Style Rules */ </style> </head> <body> </body> </html> bl Element ds lkFk ge fuEu Attributes dks mi;ksx esa ys ldrs gSa%

type Attribute bl Attribute esa gesa ;s crkuk gksrk gS fd ge fdl izdkj ds Content dks Specify dj jgs gSaA ,d Stylesheet ds lanHkZ esa lkekU;r;k bl Attribute esa “text/css” eku Specify djuk pkfg,A ;fn ge dksbZ eku Specify ugha djrs gSa] rc Hkh ;s bl Attribute dk Default eku gksrk gSA

title Attribute bl Attribute esa gesa Alternative Stylesheet dks Specify djuk gksrk gS] tks ml fLFkfr esa Current Document ij Apply gks tkrk gS] tc User Manually fdlh nwljh Stylesheet dks Current Document ij Apply djuk pkgrk gSA ;s Alternate CSS File User View Menu ds Page Style Sub-Menu ls Select djds Apply dj ldrk gSA


48



disabled Attribute bl Attribute dks Specify djus ij Current CSS File ds Rules Current Document ij Apply ugha gksrsA

scoped Attribute ;fn ge bl Attribute dks Specify djrs gSa] rks Specify dh xbZ Styles dsoy Current Element ds Parent Element ij gh Apply gksrh gS] tcfd bls Specify u djus dh fLFkfr esa fy[kk x;k CSS Rule iwjs Document ij Apply gksrk gSA HTML File <!DOCTYPE html> <html> <head> <style type="text/css"> body { color: red; } </style> </head> <body> </body> </html> pwafd mijksDr HTML Code esa Style Element ds chp fy[kk x;k lkjk Content ,d Text Content gS lkFk gh ;s Content CSS Rules dks Represent dj jgk gS] blfy, <style> Element ds type Attribute esa geus “text/css” eku Specify fd;k gSA lkFk gh mijksDr <style> Element dk CSS Code Current Document ds lkjs Content ds Color dks Red djus dk dke djsxkA ge <style> Element dks dsoy Head Section esa gh ugha cfYd Body Section esa Hkh mi;ksx esa ys ldrs gSaA ,slk ge rc djrs gSa] tc gesa Document ds fdlh fo”ks’k fgLls ij gh fdlh Style dks Apply djuk gksrk gSA tc ge HTML Document ds fdlh ,d fo”ks’k fgLls ij gh fdlh CSS Rule dks Apply djuk pkgrs gSa] rc ge fuEukuqlkj scoped Attribute dk iz;ksx djds fdlh CSS Rule dks Document ds fdlh veqd fgLls ij Apply dj ldrs gSaA HTML File <body> <article> <h1>Scoped stylesheet</h1> <div>The scoped attribute allows for you to include style elements mid-document.Inside rules only apply to the parent element.


49



</div> <p>This text should be black.</p> <section> <style scoped> p { color: red; } </style> <p>This should be red</p> </section> </article> </body> mijksDr HTML Code esa ge ns[k ldrs gSa fd ,d fo”ks’k Section ds Content dks gh gesa Red Color esa Render djuk gS] blfy, geus <style> Element dks scoped Attribute ds lkFk Specify fd;k gS vkSj ftl Section esa geus bl Style Element dks Use fd;k gS] dsoy mlh fgLls ds Content Red Color esa fn[kkbZ nsaxs] “ks’k Content Black Color esa gh fn[kkbZ nsaxsA

<link> Element lkekU;r;k gesa dsoy Testing Purpose ds fy, gh <style> Element dk iz;ksx djuk pkfg, o Inline Styling dks Use djuk pkfg,A Professional Development ds le; fdlh Document ls lacaf/kr lHkh Styling Rules dks ,d External CSS File esa Specify djuk pkfg, vkSj ml Stylesheet File dks Current HTML Document esa <link> Element dk iz;ksx djds Link djuk pkfg,A bl Element dk iz;ksx djds ge fdlh External Document dks Current Document ds lkFk Link dj ldrs gSaA lkekU;r;k fdlh External Stylesheet File dks Current HTML Document ds lkFk Link djus ds fy, gesa bl Element dks Use djuk gksrk gSA bl Element ds lkFk ge gekjh t:jr ds vuqlkj fuEu Attributes dks mi;ksx esa ys ldrs gSa%

href Attribute bl Attribute esa gesa ml Resource File dk URL Specify djuk gksrk gS] ftls ge Current HTML Document ds lkFk Link djuk pkgrs gSaA lkekU;r;k fdlh External CSS File dk URL gesa ;gha Specify djuk gksrk gSA

hreflang Attribute bl Attribute esa gesa Current HTML Document ds lkFk Link fd, tk jgs Resource dh Language dks Specify djuk gksrk gSA ;fn ge ftl External Resource File dks Current Document ds lkFk Link dj jgs gSa] mlesa fy[kk x;k Content Hindi Hkk’kk esa gks] rks gesa bl Attribute esa “hi” eku Specify djuk gksrk gSA bl Element dks rHkh mi;ksx esa fy;k tkuk gksrk gS tc ge href Attribute dks Set dj jgs gksrs gSaA fcuk href Attribute dks Specify fd, gq, bl Attribute dks Specify djus dk dksbZ eryc ugha gksrkA


How to Get Complete PDF EBook आप Online Order करके Online या Offline Payment करते हुए इस Complete EBook को तुरन् त

Download कर सकते हैं।

Order करने और पुस् तक को Online/Offline Payment करते हुए खरीदने की पूरी प्रक्रिया की क्रिस् तृत नानकारी प्रा‍ त

करने के क्रिए आप BccFalna.com के क्रनम् न Menu Options को Check Visit कर सकते हैं।

How to Make Order How to Order?

How to Buy Online How to Pay Online using PayUMoney

How to Pay Online using Instamojo

How to Pay Online using CCAvenue

How to Buy Offline How to Pay Offline

Bank A/c Details

नक्र‍ क हरारे Old Buyers के Reviews भी देख सकते हैं ताक्रक आप इस ‍ात का क्रनर्णय िे सकें क्रक हरारे Buyers हरारे

PDF EBooks से क्रकतने Satisfied हैं और यक्रद आप एक से अक्रिक EBooks खरीदते हैं , तो Extra Discount की

Details भी Menubar से प्रा‍ त कर सकते हैं।

https://www.bccfalna.com/

https://www.bccfalna.com/how-to-pay/

https://www.bccfalna.com/payumoney/

https://www.bccfalna.com/how-to-pay-online-instamojo/

https://www.bccfalna.com/how-to-pay-using-ccavenue/

https://www.bccfalna.com/how-to-deposit-payment/

https://www.bccfalna.com/payment-options/

https://www.bccfalna.com/customer-reviews/

https://www.bccfalna.com/special-offer/

HTML5 with CSS3 - BccFalna.com · HTML5 with CSS3 BccFalna.com 097994 - 55505. Kuldeep Chand . In...

Documents

Transcript of HTML5 with CSS3 - BccFalna.com · HTML5 with CSS3 BccFalna.com 097994 - 55505. Kuldeep Chand . In...