HTML тегтері DIV және SPAN туралы - тармақ және блок тегтері арасындағы айырмашылық.

31 Тамыз 2014

Web-парақшаның бетіндегі <body>,</body> жұптасқан тег-елементтерінің арасындағы HTML тегтері негізінде екі топқа бөлінеді: 

1. тармақ тегтері.

   Бұл тегтер мәтіннің болмаса тармақтың бөліктерін рәсімдеу үшін қолданылады.

2. блок тегтері.

   Ал бұл тегтер ("div", "p", "h1"-"h6") web-парақшааларының ішкі құрылымын құрастыру үшін қолданылады.

Солардың ішіндегі web-парақшаларын жасауда ең көп қолданылатыны тармақ тегтерінің ішіндегі SPAN тегі және блок тегтерінің ішіндегі DIV тегі.Екеуі де жұптасқан тегтер қатарына жатады.|

Бұл жерде негізгі айта кететін басты мәселе олардың сайт рәсімдеуде әсіресе DIV тің орны айрықша, себебі соның арқасында парақша жасау-беттеу (верстка) жеңілдеп, бұрынғы қолданыста болған кестелік беттеумен қатар блоктық беттеу пайда болды.

Шындап келгенде, DIV пен SPAN тегтері парақ беттерінде тұрғанда  CSS (стильдік кестелер)сіз күні қараң, яғни ешқандай өзгеріс жасай алмайды.

Сондықтан ол тегтерді әрқашан CSS пен рәсімделген қандай да бір элементердің контейнері ретінде қолдану қарастырылған.

Тармақ тегтері мен блок тегтерінің тағы бір айырмашылығы.

Егер парақша бетінде бірнеше DIV элементерін жазсақ, олар бірінің астына бірі орналасады.Яғни, блок тегтері бір қатардағы барлық бос кеңістікті бір өзі жаулап алады.

Ал SPAN тегтері керісінше, тармақ тегтері болғандықтан өз ішіндегі элементері әбден бір қатарды толтырып бітпей келесі қатарға көшпейді және олардың бөліктерін өзгеше рәсімдеу мүмкін емес.

Сондықтан оларға атрибут ретінде CSS ті қолданып, ол ерекшеліктерін өзгертуге болады.

Енді осы айтылғандарды растау үшін Notepad ке мына төмендегідей HTML кодын жазып,файл ретінде сақтап жібереміз.


Енді осы сипатталған "testdivspan1.html" кодының жұмысын Денвер, яғни өзіміздің үйдегі хостингіміз арқылы көрейік.Ол үшін:

1. Денвердің ярлыгы "Start Denwer"ді  түртіп жіберіңіз.

2. Ұнатқан браузеріңізді ашып, адрес теретін жолына  localhost/testphp/testdivspan1.html  деп жазамыз.Бұл жерде "testphp" менің "testdivspan1.html" файлын сақтаған папкамның аты.Ол сізде басқаша аталуы мүмкін, онда сол папка атын жазыңыз да ENTER ді басыңыз 

Ол html файлды Денвер арқылы емес, жай түртіп жіберіп те нәтижесін көруге болады.Бірақ, сіз егер PHP скрипт тілін үйренгіңіз келсе, онда Денверде жұмыс істеу сізге дағдыға айналуы керек.Сондықтан, тест файлдарды осы локальдық серверде шақырғанымыз дұрыс деп санаймын.Егер Денверді пайдаланғыңыз келмесе, онда ол файлды папкасында екі рет түртіп жіберіп қарай беріңіз.

Өзіңіз көріп отырғандай олар бірінің астына бірі орналаса салды.


Енді бұл тегтерге CSS ті қолданып, бір қатарға орналастырайық. Ол үшін:

1. жоғарыдағы "testdivspan1.html"  кодына мына төменгі суретте көрсетілген өзгерістерді енгізелік.

2. оны басқа атпен, яғни "testdivspan2.html"  деп сақтап жіберелік.

3. <head></head> аралығына link элементі арқылы "testdivsp.css"  каскадты стильдік кестелер файлын ол жүктелетін қылып жазып жібереміз.


Ал "testdivsp.css" файлын Notepad редакторына төмендегідей қылып жазып жіберіңіз.


Бұл жердегі түстер коды мына суреттегідей.Түсінуге оңай болсын деп әр <div></div>ке әр түрлі түсті таңдадым.


Ал бұл стильдік кестелер файлында жазылған кодтың толық сипаттамасын CSS ке арналған мақаламда айтып өтемін.

Қысқаша айтқанда, бұл стильдік кесте арқылы

1. DIV тегінің class="page" атрибуты DIV терді бір ені 500px болатын аумақта ұстап тұру үшін сипатталған.

2. class="left" атрибуты бірінші <div>контейнерін сол жаққа,

3. ал екінші class="right" атрибуты <div> контейнерін оң жаққа орналастыр,

4. class="center" ол сол табиғи орнында қалады  деген сипаттамалар.

( HTML дің блог тегтерін кейде контейнер деп те атайды)

Ал "width" <div> контейнерінің ені , ол пикселмен өлшенеді.

Енді осы жоғарыдағы "testdivspan2.html" кодының жұмысының нәтижесін көру үшін оны Денверде шақырамыз.

Сонымен нәтиже былай болып шықты:


Яғни, біз ешқашан өздігімен бір қатарда тұрмайтын <div>блок тегтерін оларға атрибуттар ( class="float:left" сықылды) енгізу арқылы бір қатарға орналастырдық.Яғни, CSS каскадты стильдік кестелер арқылы кез келген HTML тегін өз қалауымызша басқаруға болады. 

Енді SPAN тармақ тегін қарастырайық.Бұл тегті бір тармақ жолдағы сөздердің бөліктеріне қандай да бір өзгеше әр беру үшін пайдаланады.

Мысалы, мына сөйлемдегі SPAN, CSS терді қызыл түске бояп көрейік.

"SPANнің CSSсіз мәні жоқ". Оларды бөліп жазу үшін тағы да CSS ті қолданамыз.

 Сонымен, тағы да Notepad ке мына төмендегі HTML кодын көшіріп жазыңыз мен көрсеткен атаулармен testphp папкасына сақтап қойыңыз.


Енді CSS файл "testsp.css" ті де сол папкаға сақтап жіберіңіз.


Енді Денверде тағы да testsp.html кодының нәтижесін көру үшін адрес жолына  localhost/testphp/testsp.html  деп оны шақырамыз.Нәтиже төмендегідей ойлағанымыздай болып шықты.

 

Осымен DIV пен таныстығымыз аяқталған жоқ, ол сайт жасауда өте кең қолданылады.

Солардың ішіндегі ең бастысы - оның блоктық беттеудегі алатын үлкен орны.

Егер мақала көңіліңізден шықса, онда онымен төмендегі түйме арқылы достарыңызбен бөлісіңіз

Пікірлер