HTML5 with CSS3 BccFalna.com 097994-55505 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.
51
Embed
HTML5 with CSS3 - BccFalna.com · 2019. 3. 13. · HTML5 with CSS3. BccFalna.com 097994 - 55505 . Kuldeep Chand In this EBook I have covered HTML5 and CSS3. Both are Latest Technology
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
HTML5 with CSS3
B c c F a l n a . c o m 0 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.
Table of Contents Web Development Fundamentals ............................................................................. 15 Web Browsers ........................................................................................................... 18
High Level Structure of Web Browser .................................................................... 18 The Rendering Engine ........................................................................................... 20
HTML DTD ............................................................................................................. 22 DOM (Document Object Model) ............................................................................ 22 Script and Stylesheet Parsing Order ..................................................................... 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
HTML (Hyper Text Markup Language) ..................................................................... 34 Elements ................................................................................................................ 34 Attributes ................................................................................................................ 35
Content Categories ................................................................................................... 38 Main Content Category .......................................................................................... 38
<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
<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
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
<audio> Element .................................................................................................. 125 <source> Element ................................................................................................ 126 <canvas> Element ............................................................................................... 126 <map> - Image Map Element .............................................................................. 127 <area> Element ................................................................................................... 127
alt Attribute ....................................................................................................... 127 href Attribute ..................................................................................................... 127
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
<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
<button> Element ................................................................................................ 195 <option> Element ................................................................................................. 197
<optgroup> - Option Group Element ................................................................... 201 <datalist> Element ............................................................................................... 204 <textarea> Element ............................................................................................. 206
<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
hidden Attribute .................................................................................................... 215 id Attribute ............................................................................................................ 216 lang Attribute ........................................................................................................ 216 spellcheck Attribute .............................................................................................. 216
true Value ......................................................................................................... 216 false Value ........................................................................................................ 217
Property and Value ........................................................................................... 229 CSS File Creation ................................................................................................... 233
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
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
auto Value ........................................................................................................ 292 100% Percent Value ......................................................................................... 293
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
auto Value ........................................................................................................ 400 fixed Value ........................................................................................................ 401
baseline Value .................................................................................................. 403 middle Value ..................................................................................................... 403 text-bottom Value ............................................................................................. 404 text-top Value ................................................................................................... 404 top and bottom Values ..................................................................................... 404 sub and sup Values .......................................................................................... 405
repeat Value ..................................................................................................... 411 repeat-x Value .................................................................................................. 412 repeat-y Value .................................................................................................. 412 no-repeat Value ................................................................................................ 413
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
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
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%
• 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
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 Browser fdlh Hkh Web Browser ds fuEu Components gksrs gSa %
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
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
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
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%
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
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
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
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
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
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
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)
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%
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
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%
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
<!-- Comments --> 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% <!-- This is a Comment and Web Browser will not Render it. -->
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
<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
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
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.
</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