HTML ਅਤੇ CSS ਨਾਲ ਵੈੱਬ ਡਿਜ਼ਾਇਨ
vY`bsweIt klIn Aqy PrYS bxwaux leI ............ nUM qrjIh id`qI jWdI hY[
iej ie`k Koj qoN is`iKAw igAw hY ik Awm XUzr ............ pYtrn iv`c vY`b pyjW (kMipaUtr skrInz) nUM skYn krdy hn[
HTML dI vrqoN tYkst, Images Aqy hor vYb pyjW qy ivvsiQq krn leI kIqI jWdI hY
............ dI vrqoN nwl vY`bsweIts Aqy vY`b pyjW dw ifzweIn bhuq hI swDwrn Aqy pRBwvSwlI FMg nwl iqAwr kIqw jw skdw hY[
............ HTML AYlImYNt cuxn Aqy inrDwrq krn iv`c shwieqw krdw hY[
vY~bsweIt clear Aqy fresh bxwaux leI ............. ƒ qrjIh id~qI jwxI cwhIdI hY[
ifzweIn
pRSn : vY~bsweIt ifvYlpmYNt dy v~K v~K pVwA kI hn?
auqr : 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
pRSn : vY~b ivc HTML dI BUimkw kI huMdI hY?
auqr : 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[
pRSn : CSS iks leI vrqI jWdI hY?
auqr : 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[
pRSn : cMgy vY~b ifzweIn dy isDWqW dI ivAwiKAw kro[
auqr : 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[
pRSn : vY~b ifzweIn leI CSS dI vrqoN ikvyN kIqI jw skdI hY[
auqr :
vYb ifzweIn leI CSS dI vrqoN hyTW ilKy iqMnH qrIikAW rwhIN kIqI jw skdI hY:
- 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>
- 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[
- 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[
pRSn : CSS dy kI Pwiedy hn?
auqr :
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[
pRSn : CSS BOX mwfl dI ivAwiKAw kro[
auqr : 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
pRSn : koifMg dy nwl CSS iv~c bwrfr pRwprtI dI ivAwiKAw kro[
auqr : 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[
pRSn : HTML dI bxqr ilKo[
auqr : 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[
W3C Sbd dw sMKyp (p@Urw nwm) ilKo[
World Wide Web Consortium (vrlf vweIf vY`b kMsortIAm)
CSS Sbd dw sMKyp (pUrw nwm) ilKo[
kYskYifMg stweIl SIt
WYSIWYG dw pUrw nwm ilKo[
What You See Is What You Get
External CSS PweIl dw AYkstYNSn kI hY?
.css
iks tYg ivc ieMtrnl CSS ƒ HTML vY~bpyz ivc pirBwSq kIqw igAw hY[
<link>