DAVEN Farnham: આજે, હું જાઉં છું HTML વિશે થોડુંક વાત, હાઇપરટેક્સ્ટ માર્કઅપ લેંગ્વેજ. તમે આ દિવસોમાં દરેક જગ્યાએ એચટીએમએલ જુઓ. હકીકતમાં, તમે આ જોઈ રહ્યાં છો જો એક બ્રાઉઝરમાં વિડિઓ, તમે છો હમણાં HTML જોયા. એચટીએમએલ કોઇ પ્રોગ્રામીંગ ભાષા નથી, તેના બદલે, તે દ્વારા ઉપયોગમાં માર્કઅપ લેંગ્વેજ છે પાના રેન્ડર કરવા માટે વેબ બ્રાઉઝર્સ ઇન્ટરનેટ પર. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

મારું નામ Daven Farnham છે. આ CS50 છે. 

તેથી ઉદાહરણ તરીકે, હું ઉપયોગ કરી શકો છો વર્ગ છબી - ના, ઘણા લક્ષણો છે. મારું નામ Daven Farnham છે. આ સીએસ 650 છે. હું સીએસએસ કહેવા માગો છો. આ સીએસએસ છે.