1. Home
  2. Chapters
  3. Computer Science
Class - 11 :: Chapter 1

HTML ਅਤੇ CSS ਨਾਲ ਵੈੱਬ ਡਿਜ਼ਾਇਨ

Start Presentation
ਖਾਲੀ ਥਾਵਾਂ ਭਰੋ

1) vY~bsweIt clear Aqy fresh bxwaux leI ............. ƒ qrjIh id~qI jwxI cwhIdI hY[

au`qr : ifzweIn
ਬਹੁਤ ਛੋਟੇ ਪ੍ਰਸ਼ਨ

1) W3C Sbd dw sMKyp (p@Urw nwm) ilKo[

au`qr : World Wide Web Consortium (vrlf vweIf vY`b kMsortIAm)

2) CSS Sbd dw sMKyp (pUrw nwm) ilKo[

au`qr : kYskYifMg stweIl SIt

3) External CSS PweIl dw AYkstYNSn kI hY?

au`qr : .css

4) iks tYg ivc ieMtrnl CSS ƒ HTML vY~bpyz ivc pirBwSq kIqw igAw hY[

au`qr : <link>

5) WYSIWYG dw pUrw nwm ilKo[

au`qr : What You See Is What You Get
ਛੋਟੇ ਪ੍ਰਸ਼ਨ

1) vY~bsweIt ifvYlpmYNt dy v~K v~K pVwA kI hn?

au`qr : vY~bsweIt ifvYlpmYNt dy v~K-v~K pVwA hyTW idqy ho skdy hn:
1. jwxkwrI iek~TI krnI
2. XojnwbMdI
3. ifzweIn
4. ivkws
5. tYsitMg Aqy ifilvrI
6. r~K-rKwA

2) vY~b ivc HTML dI BUimkw kI huMdI hY?

au`qr : vY~b ivc HTML BwSw dI bhuq mh~qvpUrx BUimkw hY[ ies qoN ibnW vY~b sMBv nhIN hY[ HTML BwSw vY~bsweIts ƒ ifzweIn krn leI mUl BwSw hY[ HTML kof dI vrqoN stYit~k (static) vY~bpyjW ƒ ifzweIn krn leI kIqI jWdI hY[ ies ivc iliKAw kof vY~b bRwaUzr duAwrw smiJAw jWdw hY[ vYb bRwaUzr HTML kof Anuswr vYb pyz ƒ vyKx Xog bxw ky swfI skRIn aupr ifslpyA krdw hY[

3) CSS iks leI vrqI jWdI hY?

au`qr : CSS dw pUrw nW kYskyifMg stweIl SIts (Cascading Style Sheets) hY[ CSS dI vrqoN nwl vY~bsweIts Aqy vY~bpyjW dw ifzwien bhuq hI sDwrn Aqy pRBwvSwlI FMg nwl iqAwr kIqw jw skdw hY[ swDwrx Sbdw ivc AsIN ieh kih skdy hW ik ieh vYb pyzW ƒ ifzweIn krn vwlI BwSw hY jo vY~b pyj dI id~K ƒ ibhqr bnwaux leI vrqI jWdI hY[ ies BwSw ƒ is~Kxw Aqy smJxw Awswn hY[ ies dI vrqoN  HTML BwSw nwl iml ky vY~bsweIts bxwaux leI vrqI jWdI hY[
ਵੱਡੇ ਪ੍ਰਸ਼ਨ

1) cMgy vY~b ifzweIn dy isDWqW dI ivAwiKAw kro[

au`qr : ie~k cMgy vY~bsweIt-ifzweIn leI hyTW ku~J mh~qvpUrn isDWq idqy gey hn:
swdgI (Simplicity) : vYbpyz dw ifzwien swdw hoxw cwhIdw hY Aqy iesdw nYvIgySn Awswn hoxw cwhIdw hY[
ie~kswrqw (Consistency) : vY~bsweIt ivc hryk vY~bpyj dw ifzwien ie~kswr hoxw cwhIdw hY[
tweIpogRwPI Aqy aupXogqw tYkst (Typography & Usage Text ) : vY~bsweIt dw tYkst sw& Aqy pVHnXog hoxw cwhIdw hY[ tYkst ƒ ies qrHW pRbMiDq kIqw jwxw cwhIdw hY ik src ieMjx vY~b pyzW ƒ AwswnI nwl INDEX kr skx[
bhup~KI ifzweIn (Multidivisonal Design) : vY~bsweIt dw ifzwien Aijhw hoxw cwhIdw hY ky auh AwswnI nwl v~K v~K Akwr dIAW skrInz (mobweIl, lYptop, mwnItr Awid) aupr shI FMg nwl idKweI dyvy[
soSl SyAirMg PIcr (Social Sharing Feature) : vY~bsweIt dy hr Bwg ƒ ies qrHw ifzwien kIqw jwxw cwhIdw hY ik vY~bsweIt qy aupl~bD jwxkwrI ƒ soSl mIfIAw aupr AwswnI nwl sWJw kIqw jw sky[

2) HTML dI bxqr ilKo[

au`qr :  HTML fwkUmYNt tYg qoN SurU Aqy nwl Kqm kIqw jWdw hY[ HTML fwkUmYNt dI bxqr ƒ mu~K qOr qy do ih~isAW iv~c vMifAw jWdw hY:
HEAD : ieh Bwg <head> tYg nwl SurU Aqy </head> tYg nwl Kqm kIqw jWdw hY[ ies Bwg iv~c HTML fwkUmYNt dy isrlyK (Title) Aqy Metadata bwry jwxkwrI huMdI hY[
BODY : ieh Bwg <body> tYg nwl SurU Aqy </body> tYg nwl Kqm kIqw jWdw hY[ ies tYg ivc auh swrI jwxkwrI Swiml hY jo vY~bpyz qy pRdriSq kIqI jWdI hY[

3) vY~b ifzweIn leI CSS dI vrqoN ikvyN kIqI jw skdI hY[

au`qr : vYb ifzweIn leI CSS dI vrqoN hyTW ilKy iqMnH qrIikAW rwhIN kIqI jw skdI hY:
  1. INLINE STYLE: jdoN CSS dy kofz ƒ BODY sYkSn dy sMbMDq tYgz ivc vriqAw jWdw hY qW ausƒ ienlweIn stweIl ikhw jWdw hY[ ieh stweIl isrP ausy tYg aupr kMm krygw ijs ivc iesƒ vriqAw igAw hY[ audwhrx leI: <p style="color:red; border:2px solid;">This is an inline css example.</p>
  2. INTERNAL STYLE SHEET: jdoN CSS dy kofz ƒ HEAD sYkSn dy ivc <style> tYg ivc iliKAw jWdw hY qW ausƒ ieMtrnl stweIlSIt ikhw jWdw hY[ ies qrIky nwl iqAwr kIqI geI stweIlSIt pUry vY~bpyj leI vrqI jWdI hY[
  3. EXTERNAL STYLE SHEET: jdoN CSS dy kofz ƒ ie~k v~KrI PweIl bxw ky aus ivc stor kIqw jWdw hY qW ausƒ AYkstrl stweIlSIt ikhw jWdw hY[ ies v~KrI PweIl dI AYkstYNSn .css huMdI hY[ ies stweIlSIt ƒ vYbsweIt dy Al~g Al~g vY~bpyzW nwl ilMk kIqw jWdw hY qW ik aus vYbsweIt dy swry vYb pyjW dI id~K iekswr pRwpq kIqI jw sky[

4) CSS dy kI Pwiedy hn?

au`qr : CSS dy ku~J mu~K Pwiedy (lwB) hyTW idqy gey hn:
  • smyN dI bcq - CSS kof ƒ zrUrq Anuswr bwr bwr vriqAw jw skdw hY[ iek hI stweIl SIt ƒ keI HTML pMinAW leI iesqymwl kIqw jw skdw hY[
  • spIf (qyzI nwl vY~bpyj lof krnw) - CSS dI vrqoN nwl bxwey gey vYb pyz vYb bRwaUzr ivc qyjI nwl Load huMdy hn[ ies nwl vY~bpyz dw Awkwr vI G~tdw hY[
  • Awswn r~K-rKwA - ie~k jgHw qy CSS koifMg ivc kIqIAW geIAW qbdIlIAW Awpxy Awp hI hr jgHw qy lwgU ho jWdIAW hn, ijs nwl vYbsweIt dw r~K-rKwA Awswn ho jWdw hY[
  • vDyry SkqISwlI - vY~bpyjW ƒ CSS dI vrqoN nwl vDyry ibhqr Aqy Awswn qrIky nwl iqAwr kIqw jw skdw hY[ CSS ivc HTML nwloN izAwdw pRwprtIz hn[
  • mltIpl ifvweIs sport - CSS dI vrqoN nwl ifzweIn kIqy vYbpyjW ƒ v~K v~K Awkwr dIAW skRInz aupr shI FMg nwl idKwieAw jw skdw hY[

5) CSS BOX mwfl dI ivAwiKAw kro[

au`qr : Sbd CSS BOX mwfl dI vrqoN vY~bpyjW dy ifzweIn Aqy lyAAwaut dy sMbMD iv~c kIqI jWdI hY[ HTML dw hryk AYlImYNt ie~k qrHW nwl ie~k bwks (BOX) huMdw hY[ vYbbRwaUzr HTML dy hryk AYlImYNt ƒ CSS BOX mwfl Anuswr ie~k Awieqwkwr bwks (RECTANGLE BOX) vjoN pyS krdw hY[ BOX MODEL iv~c keI AYtrIibaUt huMdy hn jo ik hyTW idqy gey hn:
• Margin,
• Border,
• Padding, Aqy
• Actual Content

6) koifMg dy nwl CSS iv~c bwrfr pRwprtI dI ivAwiKAw kro[

au`qr : CSS iv~c bwrfr pRwprtI AYlImYNts dy duAwly bwrfr sYt krn Aqy PwrmYt krn leI vrqI jWdI hY[ AsIN ies pRwprtI dI vrqoN kridAW HTML AYlImYNts leI bwrfr dI STYLE, WIDTH Aqy COLOR inrDwirq kr skdy hW[ audwhrx leI:
h1 {
border: 5px solid red;
}

ieh audwhrx hYifMg lyvl <h1> aupr CSS PwrmyitMg ƒ drSw rhI hY[ ies audwhrx ivc swrIAW bwrfr pRwptIz dI vrqoN kIqI geI hY[ ies iv~c <h1> AYlImYNt dy bwrfr dI cOVweI (WIDTH) 5px r~KI geI hY, bwrfr dw stweIl solid lweIn sYt kIqw igAw hY Aqy bwrfr dw rMg red sYt kIqw igAw hY[