પ્રારંભિક માટે વ્યાખ્યાયિત એચટીએમએલ માર્ગદર્શિકા

છેલ્લે 15 મે 2018 પર અપડેટ થયું

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

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

અને જો તમે સામગ્રી લેઆઉટનો અનુભવ કરી રહ્યાં છો, તો તે યોગ્ય લાગતું નથી, HTML જ્ઞાન તમને ટ્રેક પર પાછું લઈ શકે છે.

અહીં બ્લોગર્સ અને નૉન-ટેકની ઑનલાઇન વ્યવસાય માલિકો માટેના HTML માર્ગદર્શિકાનાં અમારા સંસ્કરણ છે.

એચટીએમએલ એ આજના ઇન્ટરનેટનો આધાર છે. લાખો વેબસાઇટ્સ મળીને ઇન્ટરનેટની રચના કરી. જ્યાં એચટીએમએલ આ બધી વેબસાઇટ્સનું બિલ્ડિંગ બ્લોક છે.

પ્રારંભિક ક્યૂ અને એ

1- એચટીએમએલ શું છે?

એચટીએમએલ ના સંક્ષેપ છે Hયાપર Tએક્સ Markup Language. વેબ બ્રાઉઝર્સ માટે ટેગિંગ સામગ્રી માટે તે પ્રમાણભૂત ભાષા છે.

એચટીએમએલ "તત્વો" દ્વારા રજૂ થાય છે. તત્વોને "ટૅગ્સ" તરીકે પણ ઓળખવામાં આવે છે.

2- એચટીએમએલ શા માટે જરૂરી છે?

જ્યારે વેબ બ્રાઉઝર તેના સપોર્ટેડ ભાષામાં લખાયેલ હોય ત્યારે જ વેબસાઇટ રજૂ કરી શકે છે. એચટીએમએલ એ સૌથી સામાન્ય માર્કઅપ લેંગ્વેજ છે અને તેની પાસે વેબ બ્રાઉઝર્સ માટે સૌથી વધુ સ્વીકૃતિ છે.

તેથી તમારે HTML ની ​​જરૂર છે.

3- શું HTML કેસ સંવેદનશીલ છે?

એચટીએમએલ કેસ સંવેદનશીલ નથી. પરંતુ યોગ્ય પ્રયોગો સાથે એચટીએમએલ લખવાનો શ્રેષ્ઠ અભ્યાસ છે.

તમારી પ્રથમ એચટીએમએલ ફાઇલ બનાવવાની રીત

તમે તમારા કમ્પ્યુટર પર નોટપેડનો ઉપયોગ કરીને મૂળભૂત HTML ફાઇલ બનાવી શકો છો. પરંતુ કોડ્સની ઘણી લાઇન લખવા માટે તે દુઃખદાયક હશે.

તમારે કોડ એડિટરની જરૂર છે. સારો કોડ એડિટર મોટા કોડ લખવા અને ગોઠવવાનું સરળ બનાવશે.

હું ઉપયોગ અને ભલામણ કરીએ છીએ નોટપેડ ++ (મફત અને ખુલ્લું સ્રોત) વેબ ભાષાઓ લખવા માટે. એવા અન્ય સંપાદકો છે જેનો તમે ઉપયોગ કરી શકો છો સબલાઈમ ટેક્સ્ટ, એટમ વગેરે

તમારે જે કરવાની જરૂર છે તે અહીં છે:

  1. કોડ સંપાદક ઇન્સ્ટોલ કરો
  2. તેને ખોલો
  3. નવી ફાઇલ બનાવો
  4. તેને .html ફાઇલ તરીકે સાચવો

તમે જવા માટે તૈયાર છો!


ટોચના જાઓ

1- હેલો વર્લ્ડ!

નીચેના કોડને તમારી નવી HTML ફાઇલમાં કૉપિ અને પેસ્ટ કરો અને તેને સાચવો. હવે તેને તમારા વેબ બ્રાઉઝર પર ચલાવો.

કોડ:

<DOCTYPE html> <html> <head> <title> મારું પ્રથમ વેબ પૃષ્ઠ </ title> </ head> <body> <p> હેલો વર્લ્ડ! </ P> </ body> </ html>

આઉટપુટ:

અભિનંદન! તમે તમારી પ્રથમ એચટીએમએલ ફાઇલ બનાવી છે. તમારે આ બિંદુએ સમજવાની જરૂર નથી. અમે તેને ટૂંક સમયમાં આવરીશું.

HTML માળખું સમજવું

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

તો ચાલો તેને "હેલો વર્લ્ડ!" કોડથી સમજવાનો પ્રયાસ કરીએ. દરેક HTML ફાઇલ માટે નીચેના ઘટકો ફરજિયાત ભાગ છે.

  • <! ડોક્ટાઇ એચટીએમએલ> = તે બ્રાઉઝરની ઘોષણા છે કે આ એક HTML ફાઇલ છે. તમારે તેને <html> ટૅગ પહેલાં સ્પષ્ટ કરવું આવશ્યક છે.
  • <html> </ html> = આ એક HTML ફાઇલનું રુટ ઘટક છે. તમે જે પણ લખો છો તે <html> અને </ html> ની વચ્ચે જાય છે.
  • <મુખ્ય> </ હેડ> = આ બ્રાઉઝર માટે મેટા માહિતી ભાગ છે. આ ટેગની અંદરના કોડ્સમાં કોઈ દ્રશ્ય આઉટપુટ નથી.
  • <body> </ body> = આ તે ભાગ છે જે વેબ બ્રાઉઝર રેન્ડર કરે છે. તમે વેબસાઇટ પર બરાબર શું જુઓ છો તે <body> અને </ body> વચ્ચેના કોડ્સનું રેન્ડરિંગ છે.


ટોચના જાઓ

2- એચટીએમએલ ટૅગ્સ

એચટીએમએલ સેંકડો વિવિધ ટૅગ્સનો સહયોગ છે. તમારે શીખવાની જરૂર છે કે તેઓ કેવી રીતે કાર્ય કરે છે. તમારે ખાતરી કરવી પડશે કે તેઓએ યોગ્ય રીતે તેનો ઉપયોગ કર્યો છે.

એચટીએમએલ ટૅગ્સમાં સામાન્ય રીતે એક ખુલ્લું અને બંધ થતું ટૅગ હોય છે. ખુલ્લા ટૅગમાં કીવર્ડ (<) કરતાં વધુ અને (>) સાઇન કરતાં વધુ ઘેરાયેલો છે. ક્લોઝિંગ ટેગમાં બધું જ સમાન છે પરંતુ (<) સાઇન કરતાં ઓછા પછી એક વધારાનું આગળ સ્લેશ (/).

(2a) મુખ્ય ટૅગ્સ

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

<શીર્ષક> </ શીર્ષક>

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

કોડ:

<શીર્ષક> મારો પ્રથમ વેબ પૃષ્ઠ </ શીર્ષક>
શીર્ષક ટેગ તમારા બ્રાઉઝરના શીર્ષ પર દેખાય છે.

<લિંક>

લિંક ટેગ તમારા HTML પૃષ્ઠને બાહ્ય સ્રોતો સાથે લિંક કરે છે. તેનો મુખ્ય ઉપયોગ એચટીએમએલ પૃષ્ઠને CSS સ્ટાઈલશીટ્સ સાથે જોડવાનો છે. તે એક સ્વતઃબંધ ટૅગ છે અને તેને અંત </ link> કરવાની જરૂર નથી. અહીં રિલે ફાઇલ સાથે સંબંધ ધરાવે છે અને સ્રોત એ સ્રોતનો અર્થ છે.

કોડ:

<link rel = "સ્ટાઈલશીટ" પ્રકાર = "ટેક્સ્ટ / CSS" સ્રોત = "શૈલી.css">

<મેટા>

મેટા એક સ્વતઃ બંધ થતું ટૅગ છે જે HTML ફાઇલની મેટા માહિતી પ્રદાન કરે છે. સર્ચ એન્જિન અને અન્ય વેબ સેવાઓ આ માહિતીનો ઉપયોગ કરે છે. જો તમે શોધ પૃષ્ઠો માટે તમારા પૃષ્ઠને ઑપ્ટિમાઇઝ કરવા માંગતા હોવ તો મેટા ટેગ્સ એક આવશ્યક છે.

કોડ:

<મેટા નામ = "વર્ણન" સામગ્રી = "આ ટૂંકા વર્ણન છે કે શોધ એંજીન્સ બતાવે છે"

<script> </ script>

સ્ક્રિપ્ટ ટૅગ સર્વર-બાજુ સ્ક્રિપ્ટને શામેલ કરવા અથવા બાહ્ય સ્ક્રિપ્ટ ફાઇલની લિંક બનાવવા માટે વપરાય છે. તેના પ્રારંભિક ટૅગમાં બે લક્ષણો હોઈ શકે છે. એક પ્રકાર છે અને બીજો સ્રોત (સ્રોત) છે.

કોડ:

<સ્ક્રિપ્ટ પ્રકાર = "ટેક્સ્ટ / જાવાસ્ક્રિપ્ટ" સ્રોત = "સ્ક્રિપ્ટ્સ.જેએસ"> </ script>

<noscript> </ noscript>

વેબ બ્રાઉઝરમાં સ્ક્રિપ્ટ્સ અક્ષમ હોય ત્યારે નોસ્ક્રિપ્ટ ટૅગ કાર્ય કરે છે. તે એવા પૃષ્ઠોને સુસંગત બનાવે છે જે તેમના વેબ બ્રાઉઝર્સમાં સ્ક્રિપ્ટ્સને મંજૂરી આપતા નથી.

કોડ:

<noscript> <p> અરે! સ્ક્રિપ્ટો અક્ષમ છે. </ P> </ noscript>

(2b) શારીરિક ટૅગ્સ

બધા શરીર ટૅગ્સ <body> અને </ body> વચ્ચે જાય છે. તેઓ દ્રશ્ય આઉટપુટ છે. આ તે સ્થાન છે જ્યાં મોટાભાગનું કાર્ય કરવામાં આવે છે. તમારે આ ટેગ્સનો ઉપયોગ તમારી મુખ્ય પૃષ્ઠ સામગ્રીને માળખું કરવા માટે કરવો પડશે.

<h1> </ h1> <h6> </ h6> પર

આ મથાળું ટૅગ્સ છે. સૌથી મહત્વપૂર્ણ મથાળું <h1> સાથે ટૅગ કરેલા છે અને <h6> સાથે ઓછામાં ઓછું મહત્વપૂર્ણ છે. તમારે તેનો ઉપયોગ યોગ્ય પદાનુક્રમમાં કરવો જોઈએ.

કોડ:

<h1> આ એક H1 મથાળું છે </ h1> <h2> આ એક H2 મથાળું છે </ h2> <h3> આ એક H3 મથાળું છે </ h3> <h4> આ એક H4 મથાળા </ h4> <h5 છે > આ એક H5 મથાળું છે </ h5> <h6> આ એક H6 મથાળું છે </ h6>

આઉટપુટ:

ફોર્મેટિંગ ટૅગ્સ

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

કોડ:

<p> તમે તમારા ટેક્સ્ટને ઘણાં રીતે હાઇલાઇટ કરી શકો છો. </ p> <p> તમે <strong> બોલ્ડ </ strong>, <u> નીચે રેખા </ u>, <em> ઇટાલિક </ em>, <mark કરી શકો છો > ચિહ્ન </ ચિહ્ન>, <ઉપ> સબસ્ક્રિપ્ટ </ sub>, <sup> સુપરસ્ક્રિપ્ટ </ sup> અને વધુ! </ p>

આઉટપુટ:

<! - ->

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

ઉદાહરણ:

<! - <p> તમે આ રીતે આજુબાજુના કોઈ પણ કોડને ટિપ્પણી કરી શકો છો </ p> ->

(2c) અન્ય મહત્વપૂર્ણ HTML ટૅગ્સ

<a> </a>

એન્કર એક અમૂલ્ય ટેગ છે જેનો ઉપયોગ લગભગ દરેક જગ્યાએ થાય છે. તમે ઓછામાં ઓછા એક એન્કર લિંક વિના ઑનલાઇન કોઈપણ વેબ પેજ જોશો નહીં.

માળખું સમાન છે. તેની પાસે <a> અને એક બંધ ભાગ </a> છે. તમે જે ટેક્સ્ટ એન્કર કરવા માંગો છો તે <a> અને </a> ની વચ્ચે જાય છે.

કેટલાક લક્ષણો છે જે વપરાશકર્તા તેના પર ક્લિક કર્યા પછી ક્યાં અને કેવી રીતે જાય છે તે વ્યાખ્યાયિત કરે છે.

  • અરેફ = "" = તે ગંતવ્ય લિંક વ્યાખ્યાયિત કરે છે. લિંક ડબલ અવતરણચિહ્નો વચ્ચે જાય છે.
  • લક્ષ્ય = "" = તે નિર્ધારિત કરે છે કે URL નવા બ્રાઉઝર ટૅબમાં અથવા સમાન ટૅબમાં ખુલશે કે નહીં. ટાર્ગેટ = "_ ખાલી" એ નવા ટેબ માટે છે અને લક્ષ્ય = "_ સ્વ" સમાન ટેબમાં ખોલવા માટે છે.
  • rel = "" = તે વર્તમાન પૃષ્ઠના સંબંધને લિંક કરેલા પૃષ્ઠ સાથે વ્યાખ્યાયિત કરે છે. જો તમે લિંક કરેલા પૃષ્ઠ પર વિશ્વાસ કરતા નથી, તો તમે rel = "nofollow" વ્યાખ્યાયિત કરી શકો છો.

કોડ:

<p> Google પર જવા માટે <a target="_blank" href="https://www.google.com/"> અહીં ક્લિક કરો </a>. તે એક નવા ટૅબમાં ખુલશે. </ P> <p> <a target="_self" href="https://www.google.com/"> અહીં ક્લિક કરો </a>. તે તમને Google પર પણ લઈ જશે પરંતુ ચાલુ ટૅબમાં ખુલશે. </ P>

આઉટપુટ:

<img />

ઇમેજ ટૅગ એ એક મહત્વપૂર્ણ ટૅગ છે જેની વગર તમે ઘણી છબી-આધારિત વેબસાઇટ્સની કલ્પના કરી શકતા નથી.

<img /> એ એક સ્વતઃ બંધ થતું ટૅગ છે. તેને પરંપરાગત બંધ કરવાની જરૂર નથી </ img>. તમે તેને યોગ્ય રીતે ઉપયોગ કરી શકો તે પહેલાં તમારે જાણવાની જરૂર છે તે કેટલાક લક્ષણો છે.

  • સ્રોત = "" = આ છબીના સ્રોત લિંકને વ્યાખ્યાયિત કરવા માટે છે. ડબલ અવતરણચિહ્નો વચ્ચે લિંક મૂકો.
  • alt = "" = તે વૈકલ્પિક લખાણ માટે વપરાય છે. જ્યારે તમારી છબી લોડ થઈ રહી નથી, ત્યારે આ ટેક્સ્ટ વપરાશકર્તાઓને ગુમ થયેલ છબી વિશે એક ખ્યાલ આપશે.
  • પહોળાઈ = "" = તે પિક્સેલ્સમાં છબીની પહોળાઈને વ્યાખ્યાયિત કરે છે.
  • ઊંચાઈ = "" = તે પિક્સેલ્સમાં છબીની ઊંચાઈને વ્યાખ્યાયિત કરે છે.

ઉદાહરણ:

<p> આ ઓગસ્ટ 2014 માં Googleplex છે. </ p> <p> આ છબીની પહોળાઈ 500 પિક્સેલ્સ અને 375 પિક્સેલ્સની ઊંચાઇ છે. </ p> <img src = "https: //upload.wikimedia. ઑર્ગ / વિકિપીડિયા / કૉમન્સ / 0 / 0e / Googleplex-Patio-Aug-2014.JPG "alt =" ઓગસ્ટ 2014 માં Google નું મથક "પહોળાઈ =" 500 "ઊંચાઇ =" 375 "/>

આઉટપુટ:

ટીપ્સ: એક ક્લિક કરી શકાય તેવી છબી શામેલ કરવા માંગો છો? <a> ટૅગ સાથે છબી કોડને વળો. જુઓ કે તે કેવી રીતે જાય છે.

<ol> </ ol> અથવા <ul> </ ul>

સૂચિ ટૅગ વસ્તુઓની સૂચિ બનાવવા માટે છે. <ol> ક્રમાંકિત સૂચિ (ક્રમાંકિત સૂચિ) અને <ul> માટે અસ્થાયી સૂચિ (બુલેટ પોઇન્ટ) માટે વપરાય છે.

<Ol> અથવા <ul> ની અંદર સૂચિ આઇટમ્સ <li> </ li> સાથે ટૅગ કરેલા છે. li યાદી માટે વપરાય છે. તમે <parent> <parent> <ol> અથવા <ul> ટૅગની જેમ ઇચ્છો તેટલા બધા <li> હોઈ શકે છે.

કોડ:

<p> આ એક આદેશિત સૂચિ છે: </ p> <ol> <li> આઇટમ 1 </ li> <li> આઇટમ 2 </ li> <li> આઇટમ 3 </ li> </ ol> <p> આ એક અસાધારણ સૂચિ છે: </ p> <ul> <li> આઇટમ 1 </ li> <li> આઇટમ 2 </ li> <li> આઇટમ 3 </ li> </ ul>

આઉટપુટ:

<ટેબલ> </ ટેબલ>

ટેબલ ટેગ ડેટા ટેબલ બનાવવા માટે છે. ત્યાં કેટલાક આંતરિક સ્તર ટૅગ્સ છે જે કોષ્ટક મથાળાઓ, પંક્તિઓ અને કૉલમ્સ વ્યાખ્યાયિત કરે છે.

<table> </ table> બાહ્ય પિતૃ કોડ છે. આ ટૅગમાં, <tr> કોષ્ટક પંક્તિ માટે છે, <td> ટેબલ કૉલમ માટે છે અને <th> ટેબલ હેડર માટે વપરાય છે.

કોડ:

<table> <tr> <th> નામ </ th> <th> ઉંમર </ th> <th> વ્યવસાય </ th> </ tr> <tr> <td> જો <td> 27 </ td> < ટીડી> વ્યવસાયી </ td> </ tr> <tr> <td> કેરોલ </ td> <td> 26 </ td> <td> નર્સ </ td> </ tr> <tr> <td> સિમોન < / td> <td> 39 </ td> <td> પ્રોફેસર </ td> </ tr> </ table>

આઉટપુટ:

નોંધ: પ્રથમ <tr> ની અંદર મૂલ્યો શીર્ષકો છે. તેથી, અમે <th> નો ઉપયોગ કર્યો જે ટેક્સ્ટ પર બોલ્ડ ટેક્સ્ટ પ્રભાવને લાગુ કરે છે.

ટેબલ ગ્રુપિંગ

તમે ટેબલ જૂથ તત્વોનો ઉપયોગ કરીને ટેબલની કાર્યક્ષમતાને વિસ્તૃત કરી શકો છો. ત્યાં ઘણા સમય હશે જ્યારે તમારે મોટી કોષ્ટકો બનાવવાની જરૂર છે જે બહુવિધ પૃષ્ઠોમાં વિભાજિત થાય છે.

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

કોષ્ટક જૂથ જૂથ ટૅગ્સ છે:

  • <thead> </ thead> = ટેબલની શીર્ષકોને આવરિત કરવા માટે. તે કોષ્ટકના દરેક વિભાજિત પૃષ્ઠ પર છાપે છે.
  • <tbody> </ tbody> = ટેબલના મુખ્ય ડેટાને રેપ કરવા માટે. તમને જેટલી જરૂર છે તેટલી બધી <tbody> તમારી પાસે હોઈ શકે છે. એ <tbody> ટૅગનો અર્થ ડેટાનો એક અલગ જૂથ છે.
  • <tfoot> </ tfoot> = કોષ્ટકની ફૂટર માહિતીને આવરિત કરવા માટે. તે કોષ્ટકના દરેક વિભાજિત પૃષ્ઠ પર છાપે છે.

કૃપા કરીને નોંધો કે જૂથ બનાવવું ફરજિયાત નથી. તમે મોટી કોષ્ટકો વધુ વાંચનીય બનાવવા માટે તેનો ઉપયોગ કરી શકો છો. જ્યારે કેટલાક ખાસ વિકાસકર્તાઓએ આ ટૅગ્સનો ઉપયોગ CSS સિલેક્ટર્સ તરીકે કર્યો છે.

અહીં આપણે કેવી રીતે અમારા નમૂનારૂપ કોષ્ટકને <thead>, <tbody> અને <tfoot> માં જૂથ કરી શકીએ છીએ તે છે:

કોડ:

<table> <thead> <tr> <th> નામ </ th> <th> ઉંમર </ th> <th> વ્યવસાય </ th> </ tr> </ thead> <tbody> <tr> <td> જ્હોન </ td> <td> 27 </ td> <td> વ્યવસાયી </ td> </ tr> <tr> <td> કેરોલ </ td> <td> 26 </ td> <td> નર્સ </ td> </ tr> <tr> <td> સિમોન </ td> <td> 39 </ td> <td> પ્રોફેસર </ td> </ tr> </ tbody> <tfoot> <tr> <td> કુલ વ્યક્તિઓ: </ td> <td> 3 </ td> </ tr> </ tfoot> </ table>

આઉટપુટ:

<ફોર્મ> </ ફોર્મ>

વેબ પૃષ્ઠો માટે ઇન્ટરેક્ટિવ સ્વરૂપો બનાવવા માટે ફોર્મ તત્વનો ઉપયોગ કરવામાં આવે છે. એચટીએમએલ ફોર્મમાં સતત સળંગ ઘટકો છે. ઉદાહરણ તરીકે: <લેબલ>, <ઇનપુટ>, <textarea> વગેરે.

ફોર્મમાં ઍક્શન એટ્રિબ્યુટ ખૂબ જ મહત્વપૂર્ણ છે. તે માહિતીની પ્રક્રિયા માટે કોઈ સર્વર-બાજુ અથવા તૃતીય-પક્ષ પૃષ્ઠને નિર્દેશ કરે છે. પ્રક્રિયા માટે, તમારે પહેલા કોઈ પદ્ધતિ વ્યાખ્યાયિત કરવાની જરૂર છે.

તમે ક્યાં તો બે પદ્ધતિઓનો ઉપયોગ કરી શકો છો અથવા મેળવી શકો છો. URL ફોર્મેટમાં બધી માહિતી મોકલો જ્યાં પોસ્ટ મેસેજ બોડીમાં માહિતી મોકલે છે.

ફોર્મ્સ માટે ઘણા પ્રકારનાં ઇનપુટ છે. ખૂબ મૂળભૂત ઇનપુટ પ્રકાર ટેક્સ્ટ છે. તે <ઇનપુટ પ્રકાર = "ટેક્સ્ટ"> તરીકે લખાયેલ છે. પ્રકારો રેડિયો, ચેકબૉક્સ, ઇમેઇલ અને બીજું પણ હોઈ શકે છે. સબમિટ બટન બનાવવા માટે તળિયે સબમિટ પ્રકાર ઇનપુટ હોવું જોઈએ.

<લેબલ> ટેગનો ઉપયોગ લેબલ્સ બનાવવા અને ઇનપુટ્સ સાથે જોડવા માટે થાય છે. ઇનપુટ સાથે લેબલ્સને જોડવાનો નિયમ તે છે કે જેનું મૂલ્ય = "" લેબલના લક્ષણ અને id = "" ઇનપુટનું લક્ષણ છે.

કોડ:

<form action = "#"> <for label = "firstname"> પ્રથમ નામ: </ label> <input type = "text" id = "firstname"> <br> <= "lastname" માટે લેબલ> છેલ્લું નામ: </ label> <input type = "text" id = "lastname"> <br> <લેબલ = "બાયો"> ટૂંકા બાયો: </ label> <textarea id = "bio" પંક્તિઓ = "10" cols = " 30 "પ્લેસહોલ્ડર =" અહીં તમારું બાયો દાખલ કરો ... "> </ textarea> <br> <લેબલ> લિંગ: </ label> <br> <=" પુરુષ "માટે લેબલ> પુરૂષ </ label> <input type = "રેડિયો" નામ = "લિંગ" id = "પુરુષ"> <br> <= લેબલ માટે "સ્ત્રી"> સ્ત્રી </ લેબલ> <ઇનપુટ પ્રકાર = "રેડિયો" નામ = "લિંગ" id = "female"> <br > <ઇનપુટ પ્રકાર = "સબમિટ કરો" મૂલ્ય = "સબમિટ કરો"> <ફોર્મ>

આઉટપુટ:

નોંધ: મેં અલ્પ મૂલ્ય પર ક્રિયાની તરફેણ કરી છે કારણ કે તે માહિતી પર પ્રક્રિયા કરવા માટે કોઈપણ સર્વરથી કનેક્ટ થયેલું નથી.


ટોચના જાઓ

3- એચટીએમએલ લક્ષણો

એચટીએમએલ ટૅગ્સ માટે લક્ષણો એક પ્રકારનાં સંશોધકો છે. તેઓ HTML ટૅગ્સમાં નવી ગોઠવણી ઉમેરે છે.

એટ્રિબ્યુટ એટ્યુબ્યુટનામ = "" જેવું લાગે છે અને પ્રારંભિક HTML ટૅગમાં બેસે છે. એટ્રીબ્યુટનું મૂલ્ય ડબલ અવતરણચિહ્નો વચ્ચે જાય છે.

id = "" અને class = ""

આઈડી અને ક્લાસ HTML ટેગ્સની ઓળખકર્તા છે. આઇડેન્ટિફાયર્સનો ઉપયોગ કરીને વિવિધ નામોને અલગ અલગ નામ આપવામાં આવે છે. તમે બહુવિધ ઘટકો માટે એક વર્ગ ઓળખકર્તાનો ઉપયોગ કરી શકો છો. પરંતુ તમે બહુવિધ ઘટકો માટે એક id ઓળખકર્તાનો ઉપયોગ કરી શકતા નથી.

કોડ:

<h1 ક્લાસ = "મથાળું"> આ મુખ્ય શીર્ષક </ h1> છે

href = ""

href હાયપરટેક્સ્ટ સંદર્ભ માટે વપરાય છે. તેઓ વપરાશકર્તાઓને લિંક્સ સંદર્ભે નિર્દેશ કરે છે. એન્કર ટૅગ <a> વપરાશકર્તાઓને ગંતવ્ય URL પર મોકલવા માટે href નો ઉપયોગ કરે છે.

કોડ:

<a href="https://www.google.com/"> Google </a>

સ્રોત = ""

સ્રોત સ્રોત માટે વપરાય છે. તે HTML ફાઇલમાં તમે ઉપયોગ કરી રહ્યા છો તે મીડિયા અથવા સંસાધનનાં સ્રોતને વ્યાખ્યાયિત કરે છે. સ્રોત ક્યાં તો સ્થાનિક અથવા તૃતીય પક્ષ URL હોઈ શકે છે.

કોડ:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />

alt = ""

alt વૈકલ્પિક માટે વપરાય છે. તે એક બેકઅપ ટેક્સ્ટ છે જે HTML ઘટક લોડ કરી શકતા નથી ત્યારે ઉપયોગમાં આવે છે.

કોડ:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt = "Google નું મુખ્ય મથક" />

શૈલી = ""

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

કોડ:

<h2 શૈલી = "રંગ: લાલ"> આ બીજું શીર્ષક </ h2> છે


ટોચના જાઓ

4- કોડ પ્રદર્શન: બ્લોક વિ ઇનલાઇન

કેટલાક ઘટકો હંમેશાં નવી લાઇન પર પ્રારંભ થાય છે અને સંપૂર્ણ ઉપલબ્ધ પહોળાઈ લે છે. આ "બ્લોક" ઘટકો છે.

ઉદા: <div>, <p>, <h1> - <h6>, ફોર્મ વગેરે.

કેટલાક તત્વો ફક્ત આવશ્યક જગ્યા લે છે અને નવી લાઇન પર પ્રારંભ થતા નથી. આ "ઇનલાઇન" તત્વો છે.

ઉદા: <a>, <span>, <br>, <strong>, <img> વગેરે

જ્યારે તમે CSS શૈલીઓનો ઉપયોગ કરશો ત્યારે તમારે બ્લોક તત્વોને ઇનલાઇનથી ભિન્ન કરવાની જરૂર રહેશે. આ HTML માર્ગદર્શિકામાં, તે ખૂબ જરૂરી નથી.

કોડ:

<DOCTYPE html> <html> <head> <title> મારું પ્રથમ વેબ પૃષ્ઠ </ title> </ head> <body> <h2> આ એક H2 મથાળું છે. તેમાં બ્લોક પ્રદર્શન છે. </ H2> <h2> આ <u> બીજું </ u> H2 મથાળું છે. અહીં નીચે લીટીમાં ઇનલાઇન પ્રદર્શન છે. </ H2> </ body> </ html>

આઉટપુટ:


ટોચના જાઓ

5- HTML માં ડબલ ક્વોટ vs એક ક્વોટ

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

એચટીએમએલમાં, સિંગલ ક્વોટ અને ડબલ ક્વોટ સમાન છે. તેઓ આઉટપુટમાં કોઈ તફાવત નથી કરતા.

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


ટોચના જાઓ

6- અર્થપૂર્ણ એચટીએમએલ વિરુદ્ધ નૉન-સિમેન્ટીક HTML

અર્થપૂર્ણ HTML એ HTML નું નવીનતમ સંસ્કરણ છે, જેને HTML5 પણ કહેવાય છે. તે નૉન-સિમેન્ટીક HTML અને એક્સએચટીએમએલનું વિકસિત સંસ્કરણ છે.

HTML5 શા માટે વધુ સારું છે? અગાઉના સંસ્કરણોમાં, HTML તત્વો ID / વર્ગ નામો દ્વારા ઓળખવામાં આવ્યાં હતાં. ઉદાહરણ તરીકે: <div id = "article"> </ div> એક લેખ માનવામાં આવતો હતો.

HTML5 માં, <લેખ> </ article> ટૅગ કોઈપણ ID / વર્ગ ઓળખકર્તાની જરૂર વિના પોતાને એક લેખ તરીકે રજૂ કરે છે.

HTML5 ની ખાતર, હવે શોધ એંજીન્સ અને અન્ય વેબ એપ્લિકેશનો વેબ પૃષ્ઠને વધુ સારી રીતે સમજી શકે છે. અર્થપૂર્ણ વેબસાઇટ્સ એસઇઓ માટે વધુ સારી રીતે સાબિત થઈ છે.

અહીં કેટલાક લોકપ્રિય HTML5 ટૅગ્સની સૂચિ છે:

  • <મુખ્ય> </ મુખ્ય> = આ તે મુખ્ય સામગ્રીને રેપ કરવા માટે છે જે તમે તમારા દર્શકોને બતાવવા માંગો છો.
  • <હેડર> </ હેડર> = આ શીર્ષક અથવા લેખક મેટા જેવા સામગ્રીના હેડર ભાગને ચિહ્નિત કરવા માટે છે.
  • <લેખ> </ લેખ> = તે તમારા દર્શકોને વપરાશકર્તા-વ્યાખ્યાયિત અથવા સ્વતંત્ર સામગ્રીને સ્પષ્ટ કરે છે.
  • <વિભાગ> </ વિભાગ> = તે હેડર, ફૂટર અથવા સાઇડબાર જેવા કોઈ પણ કોડને જૂથબદ્ધ કરી શકે છે. તમે કહી શકો છો, તે એક div નું અર્થપૂર્ણ સ્વરૂપ છે.
  • <ફૂટર> </ ફૂટર> = આ તે છે જ્યાં તમારા ફૂટરની સામગ્રી, ડિસક્લેમર અથવા કૉપિરાઇટ ટેક્સ્ટ સંબંધિત છે.
  • <ઑડિઓ> </ ઑડિઓ> = તે તમને કોઈ પ્લગઇન સમસ્યા વિના ઑડિઓ ફાઇલો શામેલ કરવામાં સક્ષમ કરે છે.
  • <વિડિઓ> </ વિડિઓ> = જેવું <ઑડિઓ>, તમે પ્લગઇન ટૅબ્સ વિના આ ટેગનો ઉપયોગ કરીને વિડિઓ શામેલ કરી શકો છો.

એક સરળ HTML5 માળખું આના જેવું દેખાશે:

<! DOCTYPE html> <html> <head> <meta charset = "utf-xNUMX" /> <title> મારું પ્રથમ વેબ પૃષ્ઠ </ title> </ head> <body> <header> <nav> <ul> < li> મેનુ 8 </ li> <li> મેનૂ 1 </ li> </ ul> </ nav> </ header> <મુખ્ય> <લેખ> <હેડર> <h2> આ લેખનું શીર્ષક </ h2> <p> જોન ડો દ્વારા પોસ્ટ કરાયેલ </ p> </ header> <p> લેખની સામગ્રી અહીં જાય છે </ p> </ article> </ main> <footer> <p> કૉપિરાઇટ 2 જોન ડો </ પી> </ ફૂટર> </ body> </ html>


ટોચના જાઓ

7- એચટીએમએલ માન્યતા

મોટાભાગના વેબ વ્યાવસાયિકો તેને સમાપ્ત કર્યા પછી તેમના કોડને માન્ય કરે છે. કોડ ઠીક કરતી વખતે કોડ માન્ય કરવું શા માટે જરૂરી છે?

તમારા કોડ્સને માન્ય કરવા માટેના બે સંભવિત કારણો છે:

  1. તે તમને તમારા કોડને ક્રોસ બ્રાઉઝર અને ક્રોસ-પ્લેટફોર્મ સુસંગત બનાવવામાં સહાય કરશે. કોડ તમારા વર્તમાન બ્રાઉઝરમાં કોઈપણ ભૂલ બતાવી શકશે નહીં, પરંતુ તે બીજા એકમાં હોઈ શકે છે. કોડ માન્યતા તેને ઠીક કરશે.
  2. જો તમારી પાસે ભૂલો હોય તો શોધ એંજીન્સ અને અન્ય વેબ પ્રોગ્રામ્સ તમારા પૃષ્ઠને ક્રોલ કરવાનું રોકી શકે છે. તમે માન્યતા દ્વારા પુષ્ટિ કરી શકો છો કે તમારી પાસે કોઈ મોટી ભૂલ નથી.

W3C માન્યકર્તા કોડ માન્યતા માટે સૌથી લોકપ્રિય સેવા છે. કોડ્સ માન્ય કરવા માટે તેમની પાસે ઘણી પદ્ધતિઓ છે. તમે ક્યાં તો ફાઇલ અપલોડ કરી શકો છો અથવા કોડને તેમના માન્યતા એંજિનમાં સીધા ઇનપુટ કરી શકો છો.


ટોચના જાઓ

8- અન્ય સહાયક સંસાધનો

એચટીએમએલ એક શીખવાની વિષય છે. HTML ની ​​વધુ અપડેટ કરેલી આવૃત્તિઓ વહેલા આવી શકે છે. તેથી તમારે અપડેટ રહેવું પડશે અને પ્રેક્ટિસ કરવું પડશે. પ્રેક્ટિસ એસીએસ એચટીએમએલ છે.

અહીં તમારા માટે કેટલાક સહાયક સંસાધનો છે: