တစ်ခုက HTML စာမျက်နှာတခုရဲ့ဥပမာများနှင့်၏အခြေခံစည်းမျဉ်းစည်းကမ်းများ

ဘာသာစကားမြားစှာကိုတီထွင်, ဒါပေမယ့် HTML ကို၏ဘာသာစကားကိုအများဆုံးအထူးနှင့် vosstrebovan တစ်ခုဖြစ်သည်။ က programming ကိုအခြားသော့ချက်အစပျိုးအများကြီးကပါဝင်ပတ်သက်ကတည်းက။ HyperText Markup Language (HTML ကို) - အများကြီးသည့်အခါ markup ဘာသာစကား၏ developer ပစ္စုပ္ပန်အသိပညာ၏စိတ်ထဲတွင်အတွက်ရရှိနိုင်၏။

တကယ်တော့, HTML မှာ, ခက်ခဲဘာမှမရှိဘူးဖြစ်ပြီး, ပရိုဂရမ်ကနေမိနစ်အနည်းငယ်အားလုံးကိုအရှိဆုံးဝေးလံနှင့်အင်တာနက်လူများမှတ်စုစာအုပ်ထဲမှာ HTML ကို-စာမျက်နှာများတည်ထောင်ဖြည့်ဆည်းပါလိမ့်မယ်။ လူတိုင်းလက်လှမ်းအမှန်ပင်မှတ်သားဖွယ်ဥပမာ, ရိုးရှင်း။ ,

ယေဘုယျဖော်ပြချက်

HTML ဖိုင် - တစ်ဦးတည်းစာမျက်နှာ site ကို, ဒီစကားစစ်ထိုးပွဲဖြစ်တယ်, ဒါပေမဲ့စာမျက်နှာတစ်ခုဖိုင်ကရှင်းပါတယ်တစ်ဦးက start အဘို့, အဘယ်သို့သောအပေမယ့်။

HTML ကို - က HTML ဖိုင်ဖိုင်အမျိုးအစားတစ်ခုကိုသတ်မှတ်ပါတယ်တဲ့ DOCTYPE မ header ကိုအတူကစတင်ခဲ့သည်။ အားလုံးစာမျက်နှာဒြပ်စင် (tags များ) ထောင့်ကွင်းခတ်အတွင်းညွှန်ပြနေကြသည်။ တစ်ခုချင်းစီကို pair တစုံ ( "<" နဲ့ ">") တဦးတည်း tag ကို HTML ကိုပါဝင်သည်။ အများအားဖြင့် HTML တဂ်တိုင်း« tag ကို»အဘို့, အဲဒီဖြစ်ပါသည်, တွဲ« / tag ကို»ရှိနေကြသည်။ နှစ်ဦးစလုံးထောင့်ကွင်းခတ်အတွက်ပူးတွဲနေကြသည်။ အဲဒီမှာအရာ၏လူကြိုက်အများဆုံးတစ်ခုတည်း tag ကိုဖြစ်ပါသည်« br / » - လာမယ့်မျဉ်းကြောင်းမှပြောင်းလဲ။

ဖိုင်ထဲမှာအကြီးမားဆုံး tag ကို - ကနှစ်ခုသာ tag ကိုပါဝင်သောကိုယ့်ကိုယ်ကို HTML ကို: ဦးခေါင်းနဲ့ခန္ဓာကိုယ်။ ပထမဦးဆုံးအမှု၌, ကွဲပြားခြားနားသောသတ်မှတ်ချက်ကိုအခြားဆိုင်တဲ့စာမျက်နှာဖိုင်များလင့်များ၏ညွှန်ပြနေကြသည်ပစ္စုပ္ပန် PHP နဲ့ JavaScript ကို script များဖြစ်နိုင်သည်။ ဒုတိယစာမျက်နှာတိကျမ်းစာ၌လာသည်အကြောင်းအရာပါ။ ဒါ့အပြင် tags များနှင့် script များ၏ပုံစံ။

ရိုးရှင်းက HTML စာမျက်နှာ

ထိုကဲ့သို့သောစာမျက်နှာအတွက်ဥပမာအားအောက်တွင်ဖော်ပြထားသောဆောင်းပါးထဲမှာညွှန်ပြနေသည်။ ကဂရုတစိုက်စဉ်းစားပါ။

HEAD အပိုင်း

အဓိကရည်ရွယ်ချက် HEAD tag ကို - စာမျက်နှာ၏အထွေထွေဖော်ပြချက်များနှင့်အထွေထွေ Scripts, အဆုံးစွန်သောပေမယ့် - ကိုယ့်ဆွေမျိုးအယူအဆ။ အများအားဖြင့်သာအရာနှစ်ခုမှစဉ်းစားဆင်ခြင်စရာအရေးပါမှုရှိအလေးထား:

• သော့ချက်စာလုံးတွေနဲ့စာမျက်နှာ၏ဖော်ပြချက်;
• အခြားဖိုင်များ (* .css နဲ့ * .JS) အားလင့်များ။

အချို့သောအခြားဖိုင်တွေ tags များနှင့်အခြား script များဘာသာစကားများ CSS ကိုစည်းမျဉ်းစည်းကမ်းတွေရှိသည်ဘယ်မှာကညွှန်ပြနေသောကြောင့်ဤအပိုင်းကို၏စာမကျြနှာအကြောင်းအရာများ၏ content ဖော်ပြရန်သာသွယ်ဝိုက်အရေးပါမှုရှိပါတယ်။

HTML ကို-စာမျက်နှာတစ်ခုကဧည့်သည်စာမျက်နှာဖွင့်လှစ်ခဲ့တာဖြစ်ပါတယ်ရှိရာ tab ကိုကျော်သင့်ရဲ့ mouse ကိုဆောင်တတ်၏တဲ့အခါမှာပြသသောခေါင်းစဉ် (TITLE), ရှိပါတယ်။ ဤသည်ကစာမျက်နှာအများကြီးပိုတင်သွင်းလိုက်သောစေသည်ဖြစ်သောကြောင့်, အရေးကြီးသည်ဟုပြောဖို့ပိုပြီးလွယ်ကူ, ဖတ်လို့ရအောင်စာသားကိုလက်မှတ်ရေးထိုးခဲ့သည်။

META-tags များယေဘုယျအားဖြင့်ကို web programming ကိုအတွက်အရေးကြီးလှသည်, ဒါပေမယ့်သူကမှတ်စုစာအုပ်ထဲမှာ HTML ကို-စာမျက်နှာများ၏ဖန်ဆင်းခြင်း, မလိုလားအပ်သောစုပြုံပြွတ်သိပ်မလိုအပ်တဲ့အဆောက်အဦများ၏ဥပမာတစ်ခုလိုအပ်ပါသည်အခါ။

အဆိုပါ LINK နှင့် SCRIPT လင့်များတွင်အထူးအာရုံစိုက်သင့်ပါတယ်။ အဆိုပါ JavaScript ကို-code ကိုဖိုင်၏တည်နေရာ - ပထမတစ် CSS ကိုကိုနှိပ်ပြီးဖိုင်, ဒုတိယရှိသေး၏နေရာကိုရည်ညွှန်းသည်။ ထိုသို့သောလင့်များသတ်မှတ်နိုင်ပါသည်။

သငျသညျ script များတစ်ခုက HTML အသိပညာအဖြစ်ကုသထားရမည်ကိုသုံးလျှင်ပိုမိုအားကောင်းဖြစ်လာပါလိမ့်မယ်, သင်တန်းဒေသတွေစတိုင်စာရွက်များပေါ်တွင်ချက်ချင်းအာရုံစိုက်သင့်ပါတယ်။ အဆိုပါ CSS ကိုဖိုင်များ, အထူးသဖြင့်, HTML တဂ်၏မှတ်ပုံတင်များ၏စည်းမျဉ်းစည်းကမ်းတွေရှိပါတယ်။

အပိုင်း BODY

တကယ်တော့နမူနာစာမျက်နှာက HTML - ဤခန္ဓာကိုယ်အပိုင်းဖြစ်ပါတယ်။ ဒါဟာအချက်အလက်တွေအားလုံးကိုပါဝင်သောဒီမှာအကြောင်းအရာစာမျက်နှာအားလုံးပါပဲ။ အားလုံးသတင်းအချက်အလက်ထိုကဲ့သို့သော JavaScript ကို-code ကိုပါသို့မဟုတ် PHP ကို-အစီအစဉ်၏အပိုင်းပိုင်းထည့်အဖြစ် tags များနှင့် script များ၏ပုံစံအတွက်ပေးအပ်သည်။

ထိုသို့သော notepad အဖြစ်စာသားအယ်ဒီတာအတွက် browser နဲ့အတူတူပါပဲဥပမာထဲမှာ HTML ကိုဝဘ်စာမျက်နှာ၏ဥပမာ, ဒီတူညီတဲ့အရာမဟုတျကွောငျးနားလည်သဘောပေါက်ရန်အရေးကြီးပါသည်။ ပထမဦးဆုံးအမှု၌ငါတို့ရှိသမျှသည် script များကွပ်မျက်ခံရသောအဆင်သင့်က HTML-စာသားကိုဖြစ်ကြသည်။ ဥပမာအားဖြင့်, PHP ကိုယင်း၏အစိတ်အပိုင်းတစ်ခုနှင့်ပြည့်စုံပြီနှင့်လက်ျာဟာ tags များနေရာအတွက်ကုဒ်အစားဖွဲ့စည်းခဲ့သည်။ ကသေးသီးခြားစကားပြောဆိုမှုဖြစ်လောက်သော်လည်း JavaScript ကိုလည်း၎င်း၏မစ်ရှင်မပြည့်စုံ။

HTML ကို - ကမှတ်သားအစား script များ။ နောက်ဆုံးတွင်မှသာအဆိုပါ browser မှာပြသစာမျက်နှာ၏အကြောင်းအရာ, ဒါပေမယ့်သူ့ရဲ့ tag ကို။ အဘယ်သူမျှမက PHP-code ကိုမရှိ။

စာမကျြနှာဟာဧည့်သည်ရဲ့ browser မှာအခါ Boot တက်အချိန် (Overload) မှာပေမယ့်အချိန်လေးကိုမသာ, စာမကျြနှာအစေခံခြင်းငှါ၎င်း, လေ့လာမှုများပြုလုပ် - JavaScript ကိုအထူးအနေအထား, သူ့ပြုစုစောင့်ရှောက်မှု၌တည်ရှိ၏။

တစ်ဦးကရိုးရှင်းတဲ့ဥပမာ ကုဒ်က HTML စာမျက်နှာ၏ (သာခန္ဓာကိုယ်အပိုင်း) ကိုအောက်မှာပြထားပါသည်။

အောက်မှာပြထားတဲ့အတိုင်းတစ်ဦးကဧည့်သည်ရဲ့ browser ကိုပြုလုပ်ကြည့်ပါတယ်။

browser ကိုဆောင်ခဲ့သောဒြပ်စင်များကဲ့သို့ကြည့်ရှုသင့်ပါတယ် code ကိုသတ်မှတ်ထားတဲ့မခံခဲ့ရပါဘူး။ အားလုံးဒီဇိုင်း CSS ကိုစည်းမျဉ်းစည်းကမ်းတွေထဲမှာမြင်နိုင်သည်။ ဤကိစ္စတွင်ခုနှစ်, ကိုးကားခဲ့ Mcss / scPhpWordRW.css ဖိုင် (။ စာမျက်နှာက HTML ၏အလွန်ပထမဦးဆုံးဥပမာကိုကြည့်ပါ) ။

HTML ကိုမတူဘဲ, CSS ကိုဆောင်ပုဒ်ရိုးရှင်းတဲ့ဖြစ်ပါသည်, အလွန်လက်လှမ်းစည်းမျဉ်းစည်းကမ်းတွေလည်းမရှိနဲ့ HTML-စာမျက်နှာများ၏ဖန်ဆင်းခြင်း၏စံနမူနာ notepad ထက်အခြားဘာမှမလိုအပ်ပါဘူးတဲ့အခါသူတို့ရဲ့နံပါတ်, သေးငယ်သည်။ အရာအားလုံးကိုချက်ချင်းဖွံ့ဖြိုးတိုးတက်မှုအတွက်အလွန်သုံးစွဲနိုင်သည်:

ဤသည်ကဖော်ပြထား tag ကို scLogo_vDoc သည်မည်မျှလွယ်ကူသောပြသထားတယ်, ဤဖော်ပြချက်ဟာ tag ကိုတစ်ပုံမှန်ပြည်နယ်ထဲမှာရုပ်ပုံ vDoc-logo.png ပြသထားပြီး, mouse ကိုကကျော်သောအခါဖြစ်ပါသည် - vDoc-လိုဂို-h.png ပြသ။

က HTML ဖော်ပြချက်၏ဖွဲ့စည်းပုံ

ဘာသာစကားဒီမှာအယူအဆ၏ဖွဲ့စည်းပုံနှင့် syntax မဆိုအလွန်ဆွေမျိုးပင်ဖြစ်သည်ထွက်တင်ဆောင်လာသောပါဝင်ပါဘူး။ အဘယ်သူမျှမ variable တွေကိုရှိပါတယ်, ဒါပေမယ့်အခွင့်အလမ်းများကိုများများရှိပါတယ်။ Hypertext ၏အခြေခံအခြေခံနာမည်တစ်ခုရှိသည်ဖို့သေချာကြောင်း Element တစ်ခုရဲ့ (tag ကို) လည်းမရှိသောကွောငျ့ဖွစျသညျ။

အမှု၏နာမတော်သည် tag ကို pair တစုံ, ကျနော်တို့ tag ကို၏အစအဦးအကြောင်းပြောနေတာပါက, သင့်လျော်သောနာမည်များ (tagName) နှင့်ထောင့်ကွင်းခတ် (« <» + tagName + «> ») ၏ရေးစပ်နှင့်« »မှတျတမျးတငျထားပါလျှင် ယင်း၏အဆုံး။

အောက်ကစာသားထဲမှာတည်ရှိပါတယ် attribute တွေဖော်ပြ HTML စာမျက်နှာ၏သာဓက။

အဆိုပါ tag ကို ">" ဒါဆိုသူတို့ပိတ်ပွဲ angle bracket ရှေ့တော်၌ထို tag ကိုနာမတျောကိုအပြီးအာကာသမှတဆင့်ထားကြသည်, attribute တွေရှိနိုင်ပါသည်။ သူတို့က tag ကိုသာအစအဦးမှာမှတျတမျးတငျထားရှိပါက, attributes ။ အဆိုပါ tag ကိုများ၏ content တွေကို start tag က၏အဆုံးအကြားတည်ရှိသည်သောအရာဖြစ်ပါသည်။

စုစုပေါင်းက HTML အကြောင်းအရာဖော်ပြချက်

HTML ကိုသင်ပိတ်ပင်တားဆီးမှုများနှင့် inline element တွေကိုဖော်ပြဖို့ခွင့်ပြုပါတယ်။ ပထမဦးစွာပြုလုပ် display ကို HTML ကို-စာမျက်နှာများ၏လယ်ပြင်မှာလက်ျာဘက်အရပ်၌ရှိ, browser ကိုပြတင်းပေါက်တစ်အချို့ဧရိယာလုံးဝ positioned နိုင်ပါတယ်သိမ်းပိုက်ခြင်း, တိကျတဲ့အရွယ်အစားရှိသည်။

inline element တွေကိုယေဘုယျအားဖြင့်စာမကျြနှာဖိုင်ထဲမှာဖော်ပြထားသဖြင့်, screen ပေါ်မှာပြသခဲ့ပါသည်အဖြစ်အကြောင်း, ဖြစ်ပါသည်, တဦးတည်းချည်ပေါ်လာပါသည်။ စာမကျြနှာဝန်ဖြစ်ပေါ်သည့်အခါစုစုပေါင်းစီးဆင်းမှု၏ display ကိုသြဇာလွှမ်းမိုးနိုင်ပါတယ်။ နေရာချထား, မြင်ကွင်း, နှင့်ပိတ်ပင်တားဆီးမှုဒြပ်စင်၏အခြားဂုဏ်သတ္တိများတွင် JavaScript ကို-code ကိုမှတဆင့်သည့်အချိန်တွင်မဆိုသြဇာလွှမ်းမိုးမှုနိုင်ပါသည်။

ရိုးရှင်းသောဒြပ်စင်အပြင်, HTML ကိုကျောက်ပြားနှင့်ပုံစံများကိုဖော်ပြရန်ပေးထားပါတယ်။ ဤရွေ့ကားဒြပ်စင်ထဲမှာဝယ်လိုအားအတွက်အလွန်ရှိပါတယ် "နေ့စဉ် site ကိုအဆောက်အဦး။ "

စားပွဲ၏ဖော်ပြချက်: tags များ TABLE, TR, TD

TABLE tag ကိုစားပွဲတစ်ခုဖန်တီးရန်အသုံးပြုနိုင်ပါတယ်အခါ, TD ဆဲလ်အရေအတွက်တစ်တန်းတစ်တန်း၏နံပါတ်နှင့် TR သတ်မှတ်။ ကြောင့်ဒီကြေညာချက်ကန့်သတ်ထားသဘောသဘာဝက HTML-markup tabular အဖွဲ့အစည်း, အဖှဲ့အစညျး၏ပုံမှန်စားပွဲမတူဘဲ, ဆော့ဖ်ဝဲရေးသားသူတူညီတဲ့အပေါငျးတို့သအတန်းအတွက်ကော်လံ၏ရသောအရေအတွက်ကတစ်စတုဂံစားပွဲပေါ်မှာရှိသည်ဖို့လိုလားလျှင်, သူကကိုယ့်ကိုကိုယ်အဘို့အကြောင်းလိုက်နာရမည်ဖြစ်သောကြောင့်။

တစ်ခုဖြစ်သည်ဘာပဲလုပ်ပေးပေမယ့်နားမလည်ကြောင်းဘာမျှ: နိယာမက HTML ၏အနေအထား။ အချို့ကိစ္စများတွင်ပါကစားပွဲအသီးအသီးတန်းအတွက်ကော်လံအရေအတွက်ဤမျှအရေးကြီးသောသည်မဟုတ်, သငျသညျအလျားလိုက်သို့မဟုတ်ဒေါင်လိုက်တစ်ပေါင်းစည်းမှုဆဲလ်တွေလုပ်ဆောင်ချင်လျှင်, အလွန်ဂရုတစိုက်အားလုံးရေတွက်ရန်လိုအပ်ပေသည်။

အသေးစိတ်ဆောင်းပါးထဲမှာပြမယ့်ရိုးရှင်းတဲ့ table ၏ဖော်ပြချက်နှင့်အတူသာဓကက HTML စာမျက်နှာ။

ကော်လံခေါင်းစဉ် - ဤတွင် TH အစား TD tag ကို၏အသုံးပြုခဲ့သည်ကိုပထမဦးဆုံးအတန်း tag နဲ့သုံးကော်လံကသုံးတန်း၏အရွယ်အစားဖေါ်ပြခြင်းစားပွဲတစ်ခုဖြစ်ပါတယ်။ အထူးသဖြင့်အဲဒီနှစျခု tags များရှိသည်မဟုတ်ကြဘူး, ဒါပေမယ့်သူကစားပွဲ၏ပထမဦးဆုံးအတန်းခွဲခြားရန်ပထမဦးဆုံးသုံးစွဲဖို့ဖြစ်နိုင်သမျှဖြစ်ပြီး, TH ဖို့ CSS ကိုအတွက်သင်သည်အခြား TD ကနေခွဲခြားထားတဲ့သင့်ရဲ့ကိုယ်ပိုင်စတိုင်, ပူးတွဲနိုင်ပါတယ်ခွဲခြားပါသေးသည်။

ဖော်ပြချက်ပုံစံ: ပုံစံ tag ကို, ထည့်သွင်းမှု

Form ကို - ဒီက HTML-tags များ၏အများဆုံးတောင်းဆိုအစိတ်အပိုင်းတစ်ခုဖြစ်ပါတယ်။ ပုံစံများအသုံးပြုခြင်းသတင်းအချက်အလက်ထုတ်လွှင့်ပေးနိုင်သည်။ တကယ်တော့စာမကျြနှာ - ဒီ display ကိုသတင်းအချက်အလက်, ဒါပေမယ့်ပုံစံ - input ကို။

ရိုးရှင်းတဲ့ပုံစံ၏ဖော်ပြချက်နှင့်အတူသာဓကက HTML စာမျက်နှာ:

ပိုပြီးပုံစံများ၏ကိုအသုံးပြုသည်, ဒါပေမယ့်အောက်ပါအတိုင်းအဖြစ်အဓိကအင်္ဂါရပ်များဖြစ်ကြသည်။ သင်အသုံးပြုသူ input ကို၏ခွဲခြမ်းစိတ်ဖြာများအတွက်ကိုင်တွယ်ဒီဇိုင်းနှင့်ဖြစ်ရပ်မှသူတို့ကို assign ဖို့လိုတယ်, အ input ကိုလယ်ပြင်ကိုသတ်မှတ်နိုင်ပါတယ်။ သင်တစ်ဦးက hidden လယ်ပြင်ကိုသတ်မှတ်နှင့်စာမျက်နှာနောက်ခံကနေသတင်းအချက်အလက်ထုတ်လွှင့်ပေးနိုင်သည်။ သငျသညျသောဒေတာ transfer ဖြစ်စဉ်ကိုစတင်နှိပ်, သတင်းအချက်အလက်ဂီယာ button ကိုသတ်မှတ်နိုင်ပါတယ်။

HTML ကိုအသုံးပြုခြင်း

hypertext ကိုဘာသာစကားသိထားရန် - အင်တာနက်ပရိုဂရမ်းမင်း၏လယ်ပြင်တွင်မည်သည့်အလုပ်ကိုအထူးပြုများအတွက်မရှိမဖြစ်အခွအေနေ, သင်မူကား PHP ကိုသို့မဟုတ် JavaScript ကိုအတွက် program တစ်ခုရေးဖို့ချင်လျှင်, HTML ကို + CSS ကိုဿုံလိုအပ်ပါတယ်ငါသိ၏။

PHP ကိုဘာသာစကားယခင်ဥပမာထဲမှာဖော်ထုတ်ခဲ့တာဖြစ်ပါတယ်။ ဤပုံစံနှင့်အတူတစ်စာမျက်နှာဖြည့်လယ်ကွင်းနှင့်အတူ browser ကိုဆာဗာကနေပျံသန်းသောကွောငျ့ PHP ကို, ဆာဗာများပေါ်တွင်အလုပ်လုပ်။ အထူးသဖြင့်, ထို tag ကိုထည့်သွင်းမှု (onblur ဖြစ်ရပ် handler ကို) တွင်ဖော်ပြထားသော TestOnBlur လုပ်ဆောင်ချက်များကို, စာသားလယ်ကွင်း၏ပုံစံအတွက်အပေါငျးတို့သ parameters များကိုလက်ခံရရှိခဲ့သည်။

အဆိုပါ browser ကို JavaScript ကိုပြေးများနှင့်စနစ်တကျဒေတာအလုပ်လုပ်ခဲ့မှဖြစ်ပါသည်, ပြန်ဆာဗာ button ကိုစလှေတျဒီဇိုငျး :. Onclick = jQuery ( 'မှ #') Val ( 'လှည်း') ကဘာ jQuery အကြောင်းကိုသာသိရန်လိုအပ် ဒါပေမယ့်အဘယျသို့ #to, Val, လှည်း။ ပိုများသောတိကျစွာကအခြေခံ HTML ကို Tag တွေနဲ့သူတို့ကိုရန် CSS ကိုစတိုင်များလျှောက်ထားအထွေထွေစည်းမျဉ်းစည်းကမ်းတွေကိုသိရန်လိုအပ်ပေသည်။

ဤသည်လျင်မြန်စွာအင်တာနက်က programming ကို၏ဧရိယာ၌မဆိုအထူးပြုများ၏အရည်အချင်းများမြှင့်ဖို့လုံလောက်ပါတယ်။