ડો LLOYD: તેથી અમે ખર્ચવામાં about-- મારા ગણિત અધિકાર છે, તો અને હું લાગે છે back-- જોઈ લાગે અમે વાત કરી લગભગ 35 વિડિઓઝ ખર્ચવામાં કદાચ સી વિવિધ પાસાઓ વિશે થોડી વધુ, કદાચ થોડો ઓછો હોય છે. અને અમે આવરી ન હતી સી બધું છે, પરંતુ અમે આ એક મોટી ચંકને આવરી લેવામાં ભાષા, તે વિશાળ બહુમતી, ચોક્કસપણે સામાન્ય ઉપયોગ કરે છે. હવે અમે વાત કરવા જઈ રહ્યાં વિશે અન્ય ભાષા, એચટીએમએલ. અને અમે આવરી રહ્યા છીએ તે માત્ર એક વિડિઓ છે. 

પરંતુ તે ઠીક થઈ રહ્યું છે. તે ખરેખર બની રહ્યું છે કંઈક તમે કરવા માટે વપરાય મળી રહ્યા છીએ. હવે તમે હોય છે કે એક ભાષા ફંડામેન્ટલ્સ ઓફ, તે ખરેખર ખૂબ જ સરળ છે અન્ય શીખવા શરૂ કરવા માટે. તેથી અમે શરૂ કરવા જઈ રહ્યાં છો પાછા થોડી પગલું અને મૂળભૂત પર ચળકાટ આ ભાષાઓ વચ્ચે તફાવત અને જેવું તમે તેને છોડી દો. ખરેખર મહાન ઘણો છે ઇન્ટરનેટ પર સ્રોતો છે કે જે અમે તમને દિગ્દર્શન શરૂ જઈ રહ્યાં છો ઇન્ટરનેટ છે, કારણ કે તરફ માહિતી એક વિશાળ ભંડાર. અને તેથી તે પડશે તમે ન ગમે છે જરૂરી હોઈ બહાર હારી માહિતી ધરાવતી નથી દ્વારા વિડિઓ આવરી લે છે. તમે હજુ પણ વિચાર કરવાનો પ્રયત્ન કરીશું બધું તમને જરૂર છે અને ઉપયોગ જો તમે પહેલાથી જ કર્યું છે જ્ઞાન સી સમજવા દ્વારા બાંધવામાં આ માટે શીખવાની કર્વ બનાવવા માટે ખરેખર અન્ય ભાષાઓમાં ઘણો બોલ. હુ વચન આપુ છુ. 

પરંતુ એક ભાષા વિશે વાત કરો કે દરેક વેબ માટે ખરેખર મૂળભૂત છે HTML છે કે જે પાનું. એચટીએમએલ હાયપર ટેક્સ્ટ માર્કઅપ ભાષા છે. એચટીએમએલ ભાષા છે, પરંતુ તે છે નથી એક પ્રોગ્રામિંગ ભાષા. 

HTML ચલો નથી. તે તર્ક નથી અથવા કાર્યો અથવા કે કંઈપણ. અમે કોઈપણ ન કરી શકો HTML માં સે દીઠ પ્રોગ્રામિંગ. ક્યારેક તમે સાંભળવા મળશે લોકો પોતાને વર્ણન HTML પ્રોગ્રામર્સ, કે જે વર્તમાનમાં યોગ્ય નથી. અમે HTML કાર્યક્રમો લખી શકતા નથી. 

HTML માત્ર લખાણ માર્ક કરવા માટે વપરાય છે. તે એક માર્કઅપ ભાષા કહેવાય છે. અને આ markup-- does-- શું અમે HTML અને આ tags-- ટૅગ્સ ઉપયોગ આ અર્થનિર્ધારણ markup-- એક પાનું માળખું વ્યાખ્યાયિત અને સાદા લખાણ માટેનું કારણ બને છે ટૅગ્સ અર્થઘટન કરી વચ્ચે અસ્તિત્વમાં અલગ અલગ રીતે બ્રાઉઝર્સ દ્વારા. અને કદાચ તે સમજાવવા માટે શ્રેષ્ઠ છે એક ઉદાહરણ આ દ્વારા માર્ગ. 

અહીં એક ખૂબ જ સરળ HTML પાનું નથી એક HTML કાર્યક્રમ, ફરી, એક HTML પાનું. અને અમે તેને એક ખબર HTML પાનાનું અમે કર્યું કારણ કે એચટીએમએલ ટૅગ્સ સાથે બધું સીમિત. તેથી આ એક HTML ટેગ શું લાગે છે. તે કોણ કૌંસ વચ્ચે છે. અને અમે ટોચ પર નોટિસ HTML અને ખૂબ તળિયે, અમે શું કર્યું છે પછી દેખીતી રીતે અન્ય HTML ઘણો, અમે કોણ કૌંસ સ્લેશ HTML છે. જેથી સૉર્ટ સીમા છે HTML શું છે અને શું નથી વચ્ચે. અને અલબત્ત, પરંપરાગત, માત્ર તમે તમારા સી કાર્યક્રમો તમામ લખ્યું હતું કે ડોટ C એક્સટેન્શનની સાથે, તમારા HTML ફાઇલો તમામ ડોટ એચટીએમએલ એક્સટેન્શનની સાથે સમાપ્ત થશે. પરંતુ વધુ અહીં ચાલી રહ્યું છે. અમે હમણાં જ આ એચટીએમએલ ટૅગ્સ નથી. અમે દેખીતી રીતે આ છે વસ્તુ વડા ટેગ કહેવાય છે. વેલ, ઠીક છે, કે શું છે? 

વેલ કદાચ તે શ્રેષ્ઠ છે શરીર માર્ગ દ્વારા અલગ, શરીર વેબ પૃષ્ઠની સામગ્રી છે. તેથી કદાચ વડા ટેગ સામગ્રી વ્યાખ્યાયિત કે, બ્રાઉઝર વિન્ડો યોગ્ય નથી પરંતુ કોઈક મહત્વનું છે અમારા વેબ પૃષ્ઠ યોગ્ય રેન્ડર કરવામાં આવી. ઉદાહરણ તરીકે, અંદર ના વડા ટેગ અમે શીર્ષક ટૅગ્સ છે. 

તેથી શીર્ષક હેલ્લો વિશ્વ છે, કે ખરેખર શું હોવું રહ્યું છે Chrome માં ટેબ માં બતાવે છે અથવા સફારી અથવા Firefox-- માં ગમે બ્રાઉઝર તમે કે prefer-- શું શીર્ષક બતાવવા માટે ચાલી રહ્યું છે. અને ટેબો તે પહેલાં બતાવવા કરશે તમારા સમગ્ર બ્રાઉઝર વિન્ડો ઉપર અને તમે માત્ર એક પાનું હોઈ શકે છે એક સમયે એક બ્રાઉઝર વિન્ડો ખોલવા. જેથી હશે આ ટેબ મારા પાનું શીર્ષક અથવા બ્રાઉઝર વિન્ડો બાર, હેલો વર્લ્ડ. અને પછી સામગ્રી મારા વેબ પાનું હેલો, વિશ્વ હશે. તેથી આપણે શું કેટલાક પર એક નજર કરીએ આ જેમ વસ્તુ જેમ દેખાય છે. આ એક ખૂબ સુંદર સરળ HTML પાનું છે. તેથી હું મારા CS50 IDE અહીં છું અને હું થોડો ઝૂમ કરેલું છે. અને હું માત્ર જાઉં છું હેલો ટપકું HTML ખોલો અને આ એક ખૂબ સુંદર છે કે જે તમને બતાવવા અમે પહેલાં જોયું કે પાનું સામગ્રી. મારા સરળ એચટીએમએલ, વડા ટૅગ્સ, શીર્ષક ટૅગ્સ તેથી શરીર, અને. હું સ્વચ્છ હોઈ ઇન્ડેન્ટેડ કર્યું છે. 

અને હું શું કરી શકો છો પછી શું મારા IDE માત્ર પાનું પૂર્વદર્શન છે. અને ત્યાં અમે જાઓ. મારા પૃષ્ઠની સામગ્રી, વિશ્વ છે હેલો, અને હું કાંઇ ન જોઈ હોય ત્યાં વડા ટૅગ્સ માંથી. તે શરીરને માત્ર સામગ્રી છે. વર્લ્ડ હેલો. અને ફરી શરીર માત્ર જણાવ્યું હતું કે, વિશ્વ, હેલો. અન્ય ભાગ ખૂટે છે. 

તેથી તે ખરેખર છે બધા છે. આ એક ખૂબ જ સરળ બેઝિક HTML પાનું છે. હવે હું મારા HTML ઇન્ડેન્ટેડ કર્યું ખરેખર સરસ અને વ્યવસ્થિત હોઈ પરંતુ હું ખરેખર ન હોય. હું તેને ખૂબ નીચ જોવા માટે કરી શકે. અને આ હજુ પણ કામ કરશે. આ ચોક્કસ જ વેબ પાનું રહેશે. હું માત્ર છુટકારો મેળવેલ કર્યું છે સફેદ જગ્યા બધા. 

તે બહાર વળે તરીકે, સફેદ જગ્યા માહિતી છે. અને તેથી અમે માંથી માહિતી મોકલી રહ્યાં છો ત્યારે પ્રેષક સર્વર પ્રમાણે, રીસીવર ક્લાઈન્ટ માટે, માહિતી પૈસા ખર્ચ પડે છે. અને તેથી સફેદજગ્યાના છૂટકારો મેળવવામાં ખરેખર એક સારો વિચાર છે તમે કોઈકને હોય, તો જે કામ કરે છે વેબ સામગ્રી ઘણો. તમે છો, તો તે એક ખરાબ વિચાર છે આ સામગ્રી શીખવાની છે જે કોઇની અને તમારી પાસે કરવા માંગો છો તે સરસ રીતે આયોજન. આ તેના કરતા પાર્સ ઘણો સરળ છે. પરંતુ તે વિધેયાત્મક સમાન છે. 

જેમ ખાડો અને સામગ્રી ખરેખર HTML માં વાંધો નથી. કે બધા બાબતો ખોલીને ટૅગ્સ અને યોગ્ય ક્રમમાં ટૅગ્સ બંધ. છતાં, અહીં શું થયું જુઓ. માર્કઅપ અમને માર્ગ આપે છે વધારાની માહિતી વાતચીત અમે તેવા પરચૂરણ ખર્ચ કર્યું છે તે વિશે. હેલો, વિશ્વ ભાગ હતો શીર્ષક તરીકે અર્થઘટન. અને હેલો, ભાગ વિશ્વમાં હતી સામગ્રી તરીકે અર્થઘટન અથવા શું હોવું જોઈએ મારા વેબ પેજ પર જોઇ શકાય છે. 

આ વિવિધ 100 છે ટૅગ્સ અને મહાન સાધનો ઘણાં તેમને શોધવા માટે ઓનલાઇન. અમે વિશે વાત કરવા જઈ રહ્યાં આ વિડિઓ માં તેમને થોડા, કેટલાક ખરેખર મૂળભૂત સામગ્રી. પરંતુ અમે ચર્ચા નથી જઈ રહ્યાં છો તે બધા વિશે તે કારણ કે આવું કરવા માટે સંપૂર્ણ હશે. 

જોકે, તમે શું કરી શકો છો અન્ય વસ્તુ, વિકાસકર્તા સાધનો ઉપર ખુલ્લું છે. અને તમે યાદ તો HTTP પર અમારા વિડિઓ, હું ખોલવા માટે કેવી રીતે સમજાવી વિકાસકર્તા સાધનો ઉપર. Chrome માં તે સામાન્ય રીતે F12 કી છે વિકાસકર્તા ટૂલબાર ખોલવા માટે. પછી બદલે નેટવર્ક પસંદ ટેબ, તમે તત્વો ટેબ પસંદ કરી શકો છો. અને તમે વેબ લોડ તો પાનું, તમે ખરેખર પડશે વેબ પાનું બનાવે છે તે HTML જુઓ. અને તેથી તમે HTML વિશે ઘણું જાણી શકો છો તમારા મનપસંદ વેબસાઇટ્સ પર જોઈ દ્વારા અને તેઓ બિલ્ડ કેવી રીતે જોઈ તમને ગમે કે તેમને વિવિધ ટુકડાઓ. તેથી કદાચ આ ઠંડી છે પેટર્ન અથવા કંઈક હોય છે. કેવી રીતે તેઓ HTML સાથે તે કરી શકું? તેમજ તમે માત્ર તમારા વિકાસકર્તા ખોલી શકે છે તે તત્વ પર સાધનો અને હોવર અને HTML તે બનાવે છે બરાબર શું છે તે જોવા. તેથી તે ખરેખર છે HTML જાણવા માટે સારી રીતે, અને હું ખૂબ ભલામણ કરીએ છીએ કે તમે તેને બંને શીખવા માટે શું HTML અને પણ થોડી જાણવા માટે વિકલ્પો કેટલાક વિશે બીટ તમારા માટે ઉપલબ્ધ વિકાસકર્તા સાધનો, જે ચોક્કસપણે હાથમાં આવશે તમે વધુ સઘન વેબ કરી શરૂ પ્રોગ્રામિંગ. 

તેથી આપણે એક પર એક નજર કરીએ સામાન્ય એચટીએમએલ ટૅગ્સ દંપતિ. અને અમે સીધા આના પર જાઓ અને એક નજર પડશે આ ટૅગ્સ પણ રેન્ડર કરશે શું મારા IDE માં અમુક ફાઈલો જોઈ દ્વારા. તેથી અહીં ત્રણ ખૂબ જ મૂળભૂત ટૅગ્સ છે લખાણ દ્રશ્ય દેખાવ tweaking. બી ટેગ્સ, હું ટૅગ્સ, અને યુ ટૅગ્સ છે. અને અનુક્રમે તેઓ શું છે બોલ્ડ તેમને વચ્ચે લખાણ રેન્ડર, ત્રાંસા, અને નીચે લીટી. તેથી આપણે તે જોવા આવશે તે જોવા દો મારા IDE એક વાસ્તવિક વેબ પૃષ્ઠ પર જેમ. 

તેથી અહીં મારા IDE હું હોય BIU ટપકું HTML કહેવાય ફાઇલ. BIU ટપકું HTML માત્ર હોવા બોલ્ડ, ત્રાંસા, નીચે લીટી. હું તેને ખોલવા પડશે. 

અને અમે હું અહીં જોશો આ લખાણ હોય બી ટૅગ્સ બોલ્ડ છે. આ લખાણ હું ટૅગ્સ ઇટાલિક છે. અને આ લખાણ યુ ટૅગ્સ રેખાંકિત છે. શું આના જેવો રહ્યું છે? સાથે સાથે ફરીથી, બધા મારી પાસે અહીં જાઓ કરવા માટે મારું બ્રાઉઝર માટે, મારા ફાઈલ બ્રાઉઝર, ક્લિક કરો પૂર્વદર્શન છે, અને આ શું આવે છે. 

બી વચ્ચે લખાણ ટૅગ્સ ખરેખર હવે બોલ્ડ છે. હું વચ્ચે લખાણ ટૅગ્સ ખરેખર હવે ઇટાલિક છે. અને યુ વચ્ચે લખાણ ટૅગ્સ ખરેખર હવે રેખાંકિત છે. તેથી તે ખૂબ સારી છે. હવે અમે લખાણ બનાવવા માટે કેવી રીતે ખબર થોડી વધુ ફેન્સી જોવા અથવા અમુક વસ્તુઓ ભાર દોરે છે. અહીં સામાન્ય ટૅગ્સ અન્ય દંપતિ છે ફકરો ટૅગ્સ, પી, અને હેડર ટૅગ્સ જે હું HX અહીં પ્રસ્તુત કર્યું છે. 

આ પૃષ્ઠ ટૅગ્સ, આ ફકરો ટૅગ્સ ફકરા માં તમારા લખાણ તૂટી જાય છે. તે માત્ર પૂરતી નથી દાખલ કરો અને જગ્યાઓ છોડી હિટ, કમ્પ્યુટર માત્ર ચાલે છે કારણ કે તમે શું કરવા માટે તેને કહેવું શું કરવું અને તે સફેદ અવગણે સૌથી મોટા ભાગ માટે જગ્યા નથી. તેથી અમે ફક્ત દાખલ હિટ કરી શકો છો અને અમારી કોમ્પ્યુટર અપેક્ષા અમે માંગો છો કે અર્થઘટન નવા ફકરો શરૂ કરવા માટે. અમે ખૂબ જ સ્પષ્ટ રીતે આ કહેવું છે આ paragraph-- એક another-- છે પૃષ્ઠ ટૅગ્સ સમૂહ દરેક બંધાયેલ છે. 

અને અમે પણ આ વિકલ્પો છે એચ ટૅગ્સ, આ હેડર ટૅગ્સ માટે. અમે છ વિવિધ સ્તરો છે હેડરો, એક, બે, ત્રણ, છે કે જે ચાર, પાંચ અને છ, ક્રમશઃ મોટા અને મોટા હેડરો. અને તેઓ નાના વિચાર અને નાના અને નાના અને નાના. તેથી અમે એક બીજા ટોચ સ્તર હેડર હોય સ્તર હેડર, અને તેથી પર, અને તેથી પર. 

કદાચ કેટલાક પર એક નજર કરીએ પૃષ્ઠ ટૅગ્સ અને કેટલાક હેડર ટૅગ્સ વેબ પેજ પર ક્રિયા. તેથી અહીં મારા IDE હું તરીકે ઓળખાતી ફાઈલ છે PH ટપકું એચટીએમએલ, PH હોવા ફકરા અને હેડર ટૅગ્સ. ખોલો. ઘણો અહીં ત્યાં રહ્યું છે હું કેટલાક Lorem મૂક્યો છે કારણ કે માર્કેટિંગ, અહીં કેટલાક માત્ર રેન્ડમ લખાણ. તેથી હું થોડો ઝૂમ પડશે કારણ કે ત્યાં ખૂબ જ રહ્યું. પરંતુ હું ખૂબ જ હોય ​​છે કે નોટિસ , હું એક H1, એક સ્તર એક છે અહીં ટોચ હેડર ટેગ. પછી હું માત્ર છે કે જે એક ફકરો છે, રેન્ડમ લખાણ સાથે મુખ્ય પૃષ્ઠ એક ટોળું ipsum-- માત્ર લખાણ ધોરણ ભરવા મૂળભૂત. તેથી હું કે અંદર બે ફકરા હોય છે સ્તર એક હેડર અને પછી નીચે હું નીચે લીટી 24 પર અહીં એક સ્તર બે મથાળું છે, બીજા સ્તર હેડર, અને અન્ય બે ફકરા. વેલ આ જેમ શું જુએ છે હું મારા પૂર્વદર્શન તે જોવા તો શું? માતાનો જોવા દો. 

તેથી નોંધ્યું છે કે અહીં પ્રથમ સ્તર હેડર ખરેખર ખૂબ થોડી મોટી છે બીજા સ્તર હેડર કરતાં. તેથી અમે H1 ટૅગ્સ ઉપયોગ થાય છે. અને પી ટૅગ્સ માટે પરવાનગી આપે છે કે નોટિસ ફકરા માં વસ્તુઓ બહાર તૂટી જાય છે. અમે તે પૃષ્ઠ ટૅગ્સ છુટકારો મેળવેલ હોત તો અને ખરેખર માત્ર મૂકી પ્રવેશે અથવા રિટર્ન્સ અમે આશા શું વચ્ચે કરશે વિવિધ ફકરા હોય છે, તેઓ તમામ માત્ર મળીને સ્લેમ કરશે અને તે આ સરસ ફકરો ન હોત ઉપર અને નીચે જગ્યા સાથે અલગ. અને તેથી કે શું ફકરો છે ટૅગ્સ અને હેડર ટૅગ્સ સામાન્ય રીતે ડ્રો કરવા માટે ઉપયોગ થાય છે અમારા વેબ પાનાંની ભાગ ધ્યાન તે રીતે. 

આગામી અપ અમે વાપરો કે જે અમુક ટૅગ્સ છે અમારી વેબ પૃષ્ઠ પર યાદી બનાવી છે. તેથી અમે unordered છે યાદીઓ ULs-- જે માત્ર છે આદેશ આપ્યો બુલેટ યાદીઓ, numbered-- છે જે યાદી OLs-- અને અંદર ક્યાં તે એક અમે કરવાની જરૂર છે , LI યાદી વસ્તુઓ દર્શાવવા માટે કેવી રીતે કરે છે. અને તેથી અમે ઓપન ઉલ ટૅગ છે અને અમે તે અંદર વસ્તુઓ મૂકો. અને પછી અમે પૂર્ણ કરી લીધું છે કે, અમે ઉલ ટૅગ બંધ કરી શકો છો. 

અને એ જ રીતે અમે કરી શકો છો એક આદેશ આપ્યો કે ક્રમાંકિત સૂચી અને તે અંદર યાદી વસ્તુઓ મૂકો. તેથી આપણે એક નજર કરીએ યાદીઓ એક દંપતી પર અને તેઓ શું કરશે CS50 IDE પર રેન્ડર. તેથી હું મારા IDE એ અહીં છે ફાઇલ કહેવાય યાદીઓ HTML DOT. માતાનો એક નજર કરીએ. 

અને અહીં નોટિસ હું એક unordered છે તે પાંચ વસ્તુઓ સાથે યાદી. અને પછી હું એક આદેશ આપ્યો યાદી હોય છે, અને હું ટેગ થોડો બદલ્યું, અધિકાર? હું શરૂ છ બરાબર જણાવ્યું હતું કે કર્યું. તે યાદીને હું સાથે બહાર વળે આ શરૂ બિંદુ ત્યાં સેટ કરી શકો છો હું તેને દાખલો હશે મૂળભૂત રીતે want-- દ્વારા માત્ર આ કહેવાતા લક્ષણ ઉમેરી રહ્યા છે મારા OL ટેગ કરવા માટે. અને તેથી આ યાદી આપશે છ ગણતરી શરૂ કરો. કે ક્રમાંકિત સૂચી જેથી તત્વો પ્રયત્ન કરીશું છ, સાત, આઠ, નવ, દસ, પાંચ તત્વો હોય છે કારણ કે યાદીમાં, એક વિરોધ કરે છે, બે, ત્રણ, ચાર, પાંચ, જે હું OL કહ્યું હતું, તો કેસ હશે શરૂઆત લક્ષણ સ્પષ્ટ કર્યા વિના. 

તમે કરી શકો છો જેથી અમે ફક્ત આ પૂર્વાવલોકન પડશે અહીં શું થઈ રહ્યું છે માટે એક અર્થમાં વિચાર. અને ત્યાં અમે જાઓ. મારા યાદી છે. પ્રથમ પાંચ તત્વો છે unordered અથવા બુલેટ યાદીઓ. અને આગામી પાંચ તત્વો એક અલગ આદેશ આપ્યો યાદી છે છ થી શરૂ થાય છે. કે તેથી અમે કેવી રીતે કરી શકો છો HTML ની ​​મદદથી યાદીઓ બિલ્ડ. અન્ય વસ્તુ તમે કદાચ HTML સાથે કરવા માંગો છો એક ટેબલ બનાવી છે પંક્તિઓ અને કૉલમ્સ માહિતી એક માહિતી પ્રસ્તુત કરવા માટે ખાસ કરીને માર્ગ આયોજન. અમે એક હોઈ શકે છે HTML સાથે આવું કરવા માટે ઓપન કૌંસ શરૂઆત ટેબલ વ્યાખ્યા કોષ્ટક. અને પછી તે ટેબલ ની અંદર અમે પંક્તિઓ, ટીઆર ટૅગ્સ સમૂહ હોય શકે છે દરેક પંક્તિ સૂચવે છે. અને પછી ટીડી ટીઆર ટૅગ્સ ટૅગ્સ અંદર જાઓ એક પંક્તિ અંદર એક સ્તંભ સ્પષ્ટ કરવા માટે. 

તે શા માટે ટીડી કહેવામાં આવે છે અને ટીસી નથી? વેલ, ટીડી ટેબલ માહિતી માટે વપરાય છે. સામાન્ય રીતે તમે આપી રહ્યા છીએ ત્યાં તમારી માહિતીને. તે ટીડી નથી અને ટીસી છે તેથી કે શા માટે છે. તે થોડો ગૂંચવણમાં મૂકે છે. 

તેથી જો તમે ટેબલ ટૅગ્સ હોય છે અને તમારા ટેબલ ટૅગ્સ અંદર તમે પંક્તિઓ, TRS એક નંબર હોય છે. અને દરેક પંક્તિ અંદર તમારી પાસે કૉલમ સંખ્યા માટે ટીડીએસ તમે હોય માંગો છો કે કે જે ચોક્કસ પંક્તિ માં. એક ખૂબ જ પર એક નજર કરીએ CS50 IDE પર સરળ ટેબલ. 

તેથી હું અહીં એક ફાઇલ છે ટેબલ ટપકું HTML કહેવાય છે. ખાતે એક નજર હોય છે શું છે કે જેમ દેખાય છે. ઘણો અહીં ત્યાં રહ્યું છે પરંતુ જો તમે નોટિસ હું એક ટેબલ ખુલ્લી છે. હું ટેબલ સાથે વ્યાખ્યા શરૂ કરું છું. અને પછી મારી પ્રથમ પંક્તિ માં હું દેખીતી રીતે છે ચાર સ્તંભો, એક, બે, ત્રણ, ચાર. અને પછી હું પંક્તિ સાથે કરી રહ્યો છું. 

પછી હું બીજા પંક્તિ શરૂ કરો અને બે, ચાર, છ, આઠ નથી. કે પંક્તિ સમાપ્ત કરો. અન્ય પંક્તિ, ત્રણ, છ, નવ, 12. અને પછી એક છેલ્લા પંક્તિ, ચાર, આઠ, 12, અને તે છતાં થોડી, 16 અહીં કાપી નાખ્યો. 

મને લાગે છે કે પંક્તિ સમાપ્ત. હું ટેબલ સમાપ્ત. અને પછી હું મારા HTML સાથે કરી રહ્યો છું. શું આના જેવો નથી? વેલ, તે ખરેખર જોવા માટે ખૂબ નથી. હું સ્પષ્ટ રીતે મારા માહિતી આયોજન કર્યું કંઈક વધુ સંગઠિત રીતે. પરંતુ તે અહીં સુપર સુંદર નથી. અને અમે સાથે વ્યવહાર કરવા માટે જઈ રહ્યાં છો અમે સીએસએસ વિશે વાત ત્યારે છે. અમે આ વિચાર ફોટાઓની પડશે અમે એક table-- બનાવવા માટે શું શું કદાચ થોડી વધુ સારી રીતે તેને ફોર્મેટ? પરંતુ હું હજુ પણ ચાર પંક્તિઓ હોય છે, જેમાં દરેક ચાર સ્તંભો છે, એક છે અને ખરેખર આ પ્રમાણમાં શું ખૂબ જ સરળ ચાર ચાર ગુણાકાર દ્વારા કોષ્ટક. 

અમે વિશે વાત કરીશું માત્ર થોડા વધુ ટૅગ્સ. માતાનો વિશે વાત કરો એક HTML ફોર્મ ખ્યાલ. તેથી તમે આ જોઇ શકે છે વેબ પેજ પ્રવેશ સંદર્ભમાં. સામાન્ય રીતે તમે તમારા વપરાશકર્તા નામ લખો. તમે તમારો પાસવર્ડ લખો અને તમે જવા માટે સારા છો. કે ફોર્મ આ શરૂઆત હોઇ શકે છે. 

પર છોડવામાં આવી રહ્યા છે બીજી DIV. અમે પણ ઇનપુટ્સ હોય છે જે પ્રકારની સ્વરૂપો અંદર ફિટ. આ ઘટકો હોય છે કે તમે ખરેખર માં ટાઇપ કરી રહ્યા અથવા રેડિયો બટનો તમે છો ધબ્બા, અથવા ચેક તમે ધબ્બા રહ્યાં છો કે જે બોક્સ. તેથી આ સ્વરૂપો ની અંદર જાઓ. અને તેઓ મૂળભૂત રીતે સમાવેશ થાય છે ફોર્મની દરેક પંક્તિ તમારા ફોર્મ સારી રીતે ફોર્મેટ હોય તો. પછી આ ખ્યાલ છે ખરેખર નથી કે જે DIV, કોઇ ખાસ શ્રેણી ફિટ હું કર્યું રાશિઓ જેવા ટૅગ્સ અગાઉ કરી દેવામાં આવી. તે માત્ર પ્રકારની demarcates આ કેટલાક મનસ્વી division-- શરૂઆત પાનાંની div--. કોઈ દ્રશ્ય વિરામ હોય છે. કોઈ રેખા છે. તે તરીકે બોલ સુયોજિત નથી આપોઆપ અલગ Chunk. તમે તેને શૈલી હોય તો જે રીતે કે શું કરવું. 

તે માત્ર પ્રકારની હું માંગો છો કહે છે મારા વેબ પેજ પર જગ્યા ભાગ છે, અને હું માત્ર કહી જાઉં છું તે મારા પાનું આ વિભાગ. અમે અંદર સામગ્રી મૂકી શકો છો divs, અને હકીકતમાં, અમે પર વડા જ્યારે બીજા IDE, અમે પડશે હું મૂકી રહ્યો છું કે નહીં તે જોવા મારા એક div ની અંદર રચે છે. 

તેથી હું મારા IDE એ અહીં છે div ફોર્મ ટપકું HTML કહેવાય ફાઇલ. ચાલો તે ખોલવા દો. જેમ હું જણાવ્યું હતું કે નોટિસ, div મનસ્વી પ્રકારની છે. અધિકાર? તે ખરેખર કંઈપણ અર્થ એ નથી. તેથી હું એક મનસ્વી છે મારા પાનું પ્રથમ વિભાગ. અને પછી તેની જગ્યાએ અન્ય div પાછળથી, રેખા આઠ પર શરૂ હું આ સ્વરૂપ છે. અને ફોર્મ અંદર હું હોય ઇનપુટ્સ નંબર, ફોર્મ ક્ષેત્રો. તેથી હું જેનું નામ છે એક ક્ષેત્ર છે A-- ખરેખર કંઈપણ અર્થ એ નથી કે જે અધિકાર now-- કે જે દેખીતી રીતે લખાણ, અન્ય એક લે છે એક રેડિયો કે પાસવર્ડ, અન્ય લે બટન, ચેક બોક્સ છે કે અન્ય, અને છે કે અન્ય એક બટન સબમિટ કરો. વેલ, આ શું કરે છે બધા ખરેખર જેમ દેખાય છે? ઠીક છે, ચાલો એક નજર કરીએ. અમે અમારા પૂર્વદર્શન વિન્ડોમાં તે ખોલવા પડશે. આ મનસ્વી કે નોટિસ પ્રથમ છે division-- અહીં કોઈ દ્રશ્ય અલગ. તે ખરેખર અધિકાર, કંઈ કર્યું નથી? 

અને પછી હું મારા સ્વરૂપ છે. અને હું કોઇ વિશેષ સ્વરૂપણ ન હતી. તેથી ફોર્મ માત્ર એક છે માહિતી મોટા પંક્તિ. હું અલગ મારા ફોર્મ બંધારણ હોત તો, હું તે વાક્ય દ્વારા વાક્ય દ્વારા વાક્ય હોઈ શકે છે. પરંતુ હું કોઇ પણ સ્ટાઇલ ન હતી. ફરીથી, અમે અહીં સીએસએસ વિશે વાત કરી રહ્યા છીએ. અમે HTML વિશે વાત કરી રહ્યાં છો. 

વેલ મારા લખાણ સ્વરૂપમાં હું type-- કરી શકો છો યાદ રાખો કે પ્રકાર લખાણ સ્વરૂપો જેથી હું મારા નામ મૂકી શકો છો. અને મારો પાસવર્ડ હું મારો પાસવર્ડ લખી શકો છો. અને તે ક્ષેત્રમાં કારણ કે , પ્રકાર પાસવર્ડની છે તમે મારો પાસવર્ડ શું છે તે ખબર નથી. તે બધા બિંદુઓ છે. 

હું પણ એક નિશાની કરવા માટે પસંદ કરી શકો છો રેડિયો બટન અથવા ચેક બોક્સ બોલ નિશાની. અથવા હું મારા ફોર્મ સબમિટ કરી શકે છે. અને હું કાંઇ ન કર્યું, જેથી હું મારા ફોર્મ સુપ્રત કરો ત્યારે, માત્ર પાનું રીફ્રેશ. પરંતુ હું કદાચ રૂપરેખાંકિત કરી શકે છે મારા કંઈક બીજું કરવા માટે submit બટન. અને અમે સાથે કરી શકો છો તે જોવા મળશે PHP પર ભવિષ્યના વિડિઓ છે. પરંતુ આ એક ખૂબ જ બનાવે છે સરળ ફોર્મ કે અમે વપરાશકર્તાઓ વાર્તાલાપ હોય ઉપયોગ કરી શકો છો અને અમારી વેબસાઇટ પર માહિતી સબમિટ કરો. 

છેલ્લા ટિપ્પણી અમે પહેલાં કેટલાક અન્ય ટૅગ્સ પર ખસેડો આ પર એક નજર છે ઇનપુટ ટેગ એક વધુ સમય. હું પ્રકાશિત કરી નોંધ લો કે લાલ ટેગ ના અંત. અમે અત્યાર સુધી જોયેલા દરેક અન્ય ટેગ છે શરૂઆત અને અંત છે, એક ઉદઘાટન હતી ટેગ અને બંધ ટેગ. 

પરંતુ એક ઇનપુટ ટેગ નથી. જાય છે કે કોઈ લખાણ છે ઇનપુટ ટૅગ્સ વચ્ચે. આ તમામ માહિતી અમે અભિવ્યક્ત ઇરાદો કરી રહ્યાં છો ના ભાગ તરીકે બંધાયેલ છે કે ઇનપુટ શ્રેય. અમે ઇનપુટ નામ X બરાબર છે નોટિસ. પ્રકાર વાય સમકક્ષ હોય છે. તે ખરેખર બધા માહિતી અમે જરૂર છે. 

આ એક સ્વ બંધ ટેગ કહેવામાં આવે છે. તે એક ઓપનિંગ અને જરૂર નથી બંધ કરો બધી માહિતી, કારણ કે અંદર સમાયેલ છે ટેગ અને તેના લક્ષણો. તેથી ક્યારેક તમે પણ, આ જોશો. તમે હોય, તો તે તેથી માત્ર ધ્યાન રાખો સંપૂર્ણપણે સ્વયં પર્યાપ્ત છે કે ટેગ, તે ખોલે છે અને સાથે પોતે બંધ ડાબી પર ઓપન કોણ કૌંસ અને સ્લેશ કોણ જમણી બાજુ પર કૌંસ. અમે તે અન્ય એક જોશો હમણાં ઇમેજ ટૅગ્સ સાથે તેમજ. 

અમે છબીઓ વિશે વાત તે પહેલાં, અમે હાયપરલિંક્સ વિશે વાત કરવાની જરૂર છે. અમે માંગો છો, તો અમારી વેબ પાનું માટે ઇન્ટરેક્ટિવ અને અમને આસપાસ ખસેડવા માટે, તે કરવાનો પ્રયત્ન સરસ હશે તે એક પર ક્લિક કરો શું ખાસ કરીને વાદળી લિંક કરવામાં આવી છે. આ અમે બિલ્ડ કેવી રીતે ખરેખર છે અમારા વેબ પાનાંની માં એક હાઇપરલિંક. અને રસપ્રદ પૂરતી અન્ય HTML ટૅગ છે એક હાયપરલિંક નથી કે જે, લિંક કહેવામાં આવે છે. અહીં એન્કર માટે વપરાય છે, અને કે અમે એક હાયપરલિંક સૂચવે કેવી રીતે. 

એક href એક્સ અર્થ પર જાઓ બરાબર વેબ પૃષ્ઠ એક્સ અને બધું ટૅગ ઓપન વચ્ચે અને બંધ ટૅગ શું હોવું રહ્યું છે છે કે રેખાંકિત એક લિંક જેવી લાગે છે કે ભૂરા લખાણ અમે સાથે પરિચિત છો. કે નીચે અમે એક છબી ટેગ હોય છે, જે સ્વ પ્રદર્શિત કરવા માટે ટેગ બંધ છે એક્સ પર સ્થિત એક છબી અને તમે બદલવા માટે સક્ષમ હોઈ શકે છે સ્પષ્ટ કરીને કે જે ઇમેજ પહોળાઈ અને ઊંચાઈ અને અન્ય લક્ષણો માં કે DOT DOT ત્યાં DOT. 

અહીં ખૂબ જ તળિયે અમે ખૂબ જ રસપ્રદ છે ટેગ જોવાની નથી એક બંધ ટેગ છે. તે ઉદ્ગારવાચક બિંદુ Doctype HTML છે. તેથી એચટીએમએલ થી આસપાસ રહ્યો છે વેબ પાનાંઓ બનાવવા માટે 1990 ના દાયકાની શરૂઆતમાં, અને પસાર ગઇ છે ત્યારથી અનેક આવૃત્તિઓ. તાજેતરમાં 2014 માં તે પુનરાવર્તન કરાવી હવે વર્તમાન છે, જે HTML5 કહેવાય ડે ફેક્ટો HTML પ્રમાણભૂત ક્રમમાં ગોઠવો. 

સૂચવે છે કે અમારી વેબ પાનાંઓ, HTML5 ઉપયોગ કરીને લખવામાં આવે છે અમે આ બોલ પર શરૂ કેવી રીતે છે. તે અવગણી શકાય છે પરંતુ શું છે કે જે મૂળભૂત રીતે અર્થ તમે ટૅગ્સ કોઇ પણ ઉપયોગ કરી શકે છે HTML5 ટૅગ્સ તે નવી ટૅગ્સ કે જે હોય છે. તેથી અમે હંમેશા બંધ શરૂ અમે HTML5 ઉપયોગ કરી રહ્યાં છો. બધા ટૅગ્સ અમે વિશે વાત કરી અગાઉ HTML5 ટૅગ્સ નથી. પરંતુ આ સૂચવે છે કે કરશે HTML5 ટૅગ્સ હાજર રહેશે. અને તેથી અમે ઉદ્ગારવાચક છે Doctype HTML, જે ખૂબ શરૂઆતમાં છે અમારા HTML ફાઇલ, અને પછી પછી તે બિંદુ અમે ખરેખર અમારા HTML ખુલ્લી છે ટૅગ અને ત્યાંથી આગળ વધો. 

છેલ્લા એક એક ટિપ્પણી ટૅગ છે જે પણ, સહેજ અલગ દેખાય છે. તે કોણ સાથે બંધ થાય છે કૌંસ ઉદ્ગારવાચક ડૅશ આડંબર પરંતુ કોઈ બંધ કૌંસ. ત્યાં તે બે ઘટકો વચ્ચે તમે તમારી ટિપ્પણીઓ લખી છે છે. અને છબીઓ પર એક નજર કરીએ અને ટિપ્પણીઓ અને CS50 IDE માં લિંક્સ. 

તેથી હું એક ફાઇલ કહેવાય છબી લિંક અહીં છે હું ખોલવા જઈ રહ્યો છું, જે કોઈ એચટીએમએલ. અને હું એક દંપતિ મળ્યું છે નોટિસ મારા HTML ટિપ્પણીઓ અહીં ટિપ્પણીઓ. તેથી માત્ર સી અને અન્ય જેવા પ્રોગ્રામિંગ ભાષાઓ, માત્ર એક માર્કઅપ ભાષા બનીને HTML ટિપ્પણીઓ હોય ક્ષમતા હોય છે. અને તેથી હું દેખીતી રીતે કરવા જઇ રહ્યો છું રિક Astley એક ચિત્ર મૂકો ક્યાંક આ div વચ્ચે ટેગ, આ મનસ્વી વિભાગ. દેખીતી રીતે તે ફાઇલ છે રિક ટપકું JPEG, પર સ્થિત છે, જે અમે પર પાછા વડા, તો એક બીજા માટે મારા ફાઈલ વૃક્ષ, અસ્તિત્વમાં છે કે જે ફાઇલ છે વર્તમાન ડિરેક્ટરી. તેથી તે બરાબર છે. હું તે સંદર્ભ કરી શકે છે. 

પછી હું આંતરિક લિંક્સ હોઈ શકે છે. તેથી અહીં 11 લીટી પર નોટિસ મારા href હેલો ટપકું HTML છે. તેથી તે ફક્ત ટપકું HTML હેલો ઉલ્લેખ કરે છે જે વર્તમાન ડિરેક્ટરીમાં હાજર છે. અને હું પણ બાહ્ય હોઈ શકે છે HTTPS માત્ર સ્પષ્ટ કરીને કડીઓ હું વાત કરું છું તે સૂચવવા માટે મારા વર્તમાન ડિરેક્ટરીમાં ફાઈલ વિશે. હું અસ્તિત્વમાં છે કે જે ફાઈલ વિશે વાત કરું છું ક્યાંક હું હોય છે જે ઈન્ટરનેટ પર HTTP પ્રોટોકોલ ઉપયોગ કરીને વિનંતી કરવા. 

તેથી આપણે એક નજર કરીએ શું આ પાનું જેમ દેખાય છે અને રિક એક ચિત્ર માટે તૈયાર વિચાર Astley તમારી સ્ક્રીન પર દર્શાવે છે. તેથી હું આ પૂર્વાવલોકન પડશે. રિક Astley ખાતે છે આ મનસ્વી ખૂબ ટોચ વિભાગ હું ટોચ પર મૂકો. અને પછી નીચે હું નીચે મારી કડીઓ હોય છે, અધિકાર? 

હું હેલો ટપકું HTML પર એક લિંક છે. અને હું કે ક્લિક કરો, તો હું વિચાર આ પાનાં પર ખસેડવામાં અમે માંથી ખૂબ જ પરિચિત છો કે અમારા કાર્યક્રમ ખૂબ જ શરૂઆત. હું ફરીથી ખુલ્લા પાનું પૉપ, તો હું તો પોપ છબી લિંક છે, એક વધુ સમય ખોલવા હું પણ બાહ્ય જઈ શકે છે CS50 વેબસાઇટ પર. અને ત્યાં અમે હું પડશે see-- થોડો ઝૂમ અહીં અમે CS50 વેબસાઇટ સૉર્ટ જોશો અમારા પાનું મધ્યમાં જડિત. તેથી હું આંતરિક બનાવવા માટે સક્ષમ હતી બાહ્ય કડી તેમજ લિંક. 

HTML સાથે છેલ્લા નિયમ કે અમે અહીં વિશે વાત કરવા જઈ રહ્યાં તમારા HTML સારી રચના થવી જોઈએ છે. સી અમે વિશે ઘણું વાત વસ્તુઓ વિવિધ વાક્યરચના. HTML માં વાક્યરચના ખરેખર ટૅગ્સ આસપાસ ફરે છે. તમે ખોલવા દરેક ટેગ બંધ કરવાની જરૂર છે. અને હકીકતમાં, દરેક ટેગ તમે ખોલવા રિવર્સ ક્રમમાં બંધ કરવી જોઈએ. 

તેથી જો તમે એક બોલ્ડ ટેગ ખોલો, એક ઇટાલિક ટેગ, અને પછી એક લીટી ટેગ એ ત્રણેય કરવું લખાણ ચોક્કસ સુયોજનાની, તમે રિવર્સ ક્રમમાં તેમને બંધ કરીશું. તમે બોલ્ડ ખોલી તેથી જો, ઇટાલિક, તમે નીચે લીટી બોલ્ડ, નીચે લીટી, ઇટાલિક બંધ કરવા માંગો છો. ઇનકેપ્સ્યુલેશન આ પ્રકારની શું છે HTML સરસ અને વ્યવસ્થિત રાખે છે. 

સી વિપરીત, જોકે, વાક્યરચના ભૂલો નહીં ખરેખર કદાચ તમારા HTML લૂલો. તમારા HTML નથી સારી હોઇ શકે છે રચના છે પરંતુ હજુ પણ કામ કરશે. અને તેથી આ ભૂલો દ્વારા સ્લાઇડ સૉર્ટ કરી શકો છો. તે ખરેખર જાગ્રત પ્રયત્ન કરવા પર છે. ક્યારેક તેઓ નિષ્ફળ જશે પરંતુ ક્યારેક તમે તેની સાથે દૂર વિચાર કરી શકો છો. 

તે ખરેખર હોઈ શકે છે મુશ્કેલ કાર્ય છે, છતાં, તમે જ્યારે ખોલવામાં આવે ત્યારે ટ્રેક રાખવા માટે ટેગ, તો તમે તેને બંધ જ્યારે, ખાસ કરીને તમારા HTML તરીકે ફાઈલો મોટી અને મોટી મળે છે. તમે થોડી મદદ કરવા માંગો છો પડશે. અને ઓનલાઇન છે માન્યકર્તા સાધનો કે જે તમે તમારા વેબ પર એક નજર હોય છે ઉપયોગ કરી શકો છો પાનું અને તે સારી રીતે રચના HTML તો જુઓ. અને તમે ચોક્કસપણે જોઈએ તે પર એક નજર અને તમે તેમને વાપરવા માટે શરૂ HTML સાથે કેટલાક કામ કરી શરૂ, તમે વિચાર માત્ર જેથી, HTML લખી આયોજન વિશે કેટલીક સારી ટેવો સારી રીતે તમારા HTML અને સારી શૈલી અને તેની ખાતરી કરીને તમે કંઈપણ નથી કરી રહ્યા કે સિન્ટેક્સ ભૂલ બનાવી શકે છે કે તમે એક બીટ કારણ બની શકે છે રોડ નીચે સમસ્યા નથી. 

હું ડો લોયડ છું. આ CS50 છે.