Бет үлгісінің коды. Кең жақтауымен. HTML5 ішіндегі қосымша тегтер
«HTML бетін қалай құру керек» сабағы өте қарапайым веб-беттің макетіне арналған. Сіз HTML файлын дұрыс сақтауды, HTML бетін браузерде дұрыс көрсету үшін қажетті кодтауды орнатуды және веб-бетте мәтіндерді, тізімдерді және кескіндерді орналастыруды үйренесіз.
Осы сабақты оқығаннан кейін сіз 1-суреттегідей бірінші веб-парақшаңызды жасауды үйренесіз.
1-сурет
1. HTML құжатының құрылымы
HTML файлдарының кеңейтімі бар .htmнемесе .html.
Тегтер әдетте жұпталады: бастау және аяқтау тегтері. Бастапқы -<>, финал, Мысалы
Және
Жұпталған тег те деп аталады контейнер .
Кейбір тегтерде қажетті тегтер жұбы жоқ, бұл тег деп аталады бойдақ
. Мұндай тег, мысалы, жабылатын бұрыштық жақшаның алдына оң жақ қиғаш сызық жазу арқылы жабылады
html құжатының құрылымы келесідей көрінеді (2-сурет).
2-сурет
2-суреттегі листингке түсініктемелер
Бірінші жолда DOCTYPE конструкциясы веб-бет орналасу стандарттарының бірін білдіреді.
Тегтер арасында
Және
тақырып бөлігін қамтиды. Ол дизайнды қамтиды
3-сурет
Жазба әріптер браузерде дұрыс көрсетілу үшін кириллица кодтауын білдіреді. Егер кодтау көрсетілмесе, қаріптер кейде келесідей көрсетілуі мүмкін (4-сурет)
4-сурет
Кодтауды енгізгеннен кейін сол бет (5-сурет)
5-сурет
Ескерту: кодтау орнына charset = "терезелер-1251"кодтауды пайдалануға болады таңбалар жинағы = utf -8" , бұл көптілді сайттарды жасауға мүмкіндік береді, өйткені әлемде бар барлық кейіпкерлер онда бар. Бұл жағдайда, в Блокнот++ орналасу және сақтау алдында қажетhtml-жоғарғы мәзірден файлды таңдаңыз Кодтаулар - кодтау UTF -8 жоқ БОМ (UTF-8 БОМсыз)
Бұл ақпарат бірінші құжатты жасау үшін жеткілікті.
1-тәжірибе
1. Қалта жасаңыз, оған ат беріңіз меніңүй. Барлық қалталар мен файлдардың атаулары латынның кіші әріптерімен жасалуы керек, Орысша атауларды қолдануға болмайды. Есімдерді қысқа және мағыналы етіп қойыңыз.
Блокнотқа веб-бет кодын жазамыз. Windows жүйесімен бірге келетін Блокнотты емес, неғұрлым «кеңейтілген», мысалы, Notepad++ нұсқасын қолданған дұрыс. Тарату Блокнот++қалтада орналасқан CD/дистр.
2. Блокнот++ бағдарламасын ашыңыз. Мұны элементтегі мәзірде орындау үшін ANSI кодтауы орнатылғанын тексеріңіз Кодтаулар, позицияны орнату ANSI-ге кодтау.
3. 2-суреттегі тізімдегі кодты Notepad++ ішіне теріңіз.
2-суреттегі тізімдегі код болашақта біз үшін үлгі ретінде қызмет етеді, сондықтан HTML құжатының құрылымын әр уақытта теруге тура келмейді. DOCTYPE конструкциясын осы жерден көшіріп алыңыз (оны жаттау немесе жаттау қажет емес).
4. Файлды басқаша сақтаңыз template.htmlқалтада менің үйім, далада болған кезде Файл түріорнату Барлық түрлері(6-сурет), әйтпесе сіздің веб-бетіңіз браузерде ашылмайды.
6-сурет
5. Сақтағаннан кейін іске қосыңыз шаблон. htmlекі рет басу. Нәтижесінде сіздің файлыңыз келесідей болады (7-сурет).
7-сурет
Жоғарыдағы суреттегідей нәтиже алмасаңыз, бұл кодта қате болуы мүмкін дегенді білдіреді. Бір қате таңба жеткілікті және веб-бет дұрыс көрсетілмейді. Кодты 2-суреттегі тізіммен қайта тексеріңіз.
6. Қалта ішінде менің үйімқалта жасаңыз қоғамдық_ html. Бұл атау әдетте нақты хостингте орналастырылған кезде сайт сақталатын қалта болып табылады (бұл қалтаны www деп те атауға болады).
7. Файлды сақтаңыз шаблон. htmlқалтада қоғамдық_ htmlжаңа атаумен негізгі. html.
8. Қалтадан CD/ html_css_1файлды ашыңыз text_main.txt Notepad++ бағдарламасында, сонымен қатар атаумен сақталған файлды ашыңыз негізгі. html
9. Файлдан барлық мәтінді көшіріңіз text_main.txtжәне оны файлға қойыңыз негізгі. html«Веб-бет мазмұны» деген сөздің орнына. Тегте
10. Өзгерістерді сақтаңыз және файлды алдын ала қараңыз негізгі. htmlбраузерде. Сіз форматталмаған мәтінді көресіз. Браузер бастапқы мәтіндегі жол үзілімдерін де жасамайды (8-сурет).
8-сурет
2. Пішімдеужелі-белгіленген беттерHTML
Бұл HTML бетін қалай жасау туралы оқулық веб-бетті белгілеу үшін пайдаланылатын негізгі тегтерді қамтиды.
Тегтер веб-беттің мәтінін пішімдеуге арналған. Тегтер тізімін қалтада толығырақ қарауға болады CD/АнықтамалықHTMLкаталогта html401_ru.chm(жоғарғы мәзір элементінде элементтері).
Кейбір тегтерді қарастырайық.
Элементтер h 1, h 2, h 3, h 4, h 5, h 6
Құжаттың негізгі бөлігін құрылымдау элементтің ішінде орындалады < дене> h1, h2, h3, h4, h5, h6 элементтерімен көрсетілген тақырыптарды пайдалану.
Тақырып элементтері жұптастырылған, сондықтан оларда саңылау болуы керек < h1> және жабу h1> тегтер.
HTML-де алты тақырып деңгейі бар: h1 (ең жоғарғы), h2, h3, h4, h5 және h6 (төменгі). Тақырып элементтерінің функционалдығы мәтіндік редакторлардағы кәдімгі тақырып стильдеріне ұқсас.
Осы алты тегтің әсерлері төмендегі суреттерде көрсетілген. Бір суретте көзі(9-сурет), екінші жағынан - браузердегі көрініс (10-сурет).
9-сурет
10-сурет
Мәтінді абзацтарға бөлу
Тег < б> абзацтың басын орнатады және абзацтың жоғарғы жағына бос орын қояды - осы абзацты алдыңғысынан бөлу үшін шегініс.
Сызықты үзу
Тег
абзацтың қалған мәтінін келесі жолға ауыстыруға мүмкіндік береді. Бұл жұпталмаған тег және абзац тегіне қарағанда жолдар арасындағы қашықтықты арттырмайды.
Жаттығу 2
1. Тегтерді пайдаланып «Сәулет жобаларының каталогы» тақырыбын пішімдеңіз
Және
.2. Тегтерді пайдаланып «Болашақ үйіңізге арналған жобалар» тақырыбын пішімдеңіз
Және
.3. «Үй жобалары» және «Үй аумақтары» тақырыптарын тегтерді пайдаланып пішімдеңіз
Және
.4. Негізгі мәтінді тег арқылы абзацтарға бөліңіз
Алғашқы екі абзацтың ішінде тегті пайдаланыңыз
сызықты бұзу. Нәтижесінде сіздің кодыңыз келесідей болуы керек (11-сурет).
5. Нәтижені шолғышта қараңыз.
11-сурет
Маркерленген және нөмірленген тізімдер
HTML құралдарын пайдалана отырып, кез келген тізімдерді жасауға болады: нөмірленген (сандық және алфавиттік) және маркерленген әртүрлі түрлерімаркерлер.
Тег < ул>…ул> маркерленген тізімді жасайды.
Тег < ол>…ол> нөмірленген тізімді жасайды.
Тізімдегідей бір элемент
- , және ішінде
- 13-суретте көрсетілген кодты жаңа файлға енгізіңіз.
- Файлды қалтаға сақтаңыз менің үйіматымен список_ vlozh. html. Нәтиже суретте. 13
- абсолютті;
- туыс.
- қалтаға_2 енгізіңіз,
- содан кейін_1 қалтасын енгізіңіз,
- содан кейін суретті тіркеңіз.
- қалтадан шығу_1,
- қалтадан шығу_2,
- суретті тіркеңіз.
- қалтадан шығу_1,
- қалтадан шығу_2,
- қалтаға_3 өтіңіз,
- қалтаға өтіңіз_4,
- pic.jpg суретін тіркеңіз
- қалтадан шығу_1,
- қалтадан шығу_2,
- қалтадан шығу_3,
- қалтаға_4 енгізіңіз,
- pic.jpg суретін тіркеңіз.
- template.html
- main.html
- spisok_vlozh.html
- қалтаның ішіндеменің үйімпапка болуы керекқоғамдық_ htmlболашақ сайттың файлдарымен
- салыстырмалы адрестеу бойынша жеті мысал және бақылау ретінде екі мысал практикалық тапсырма 14
- кілт сөздер мен бет сипаттамасы;
- басқа файлдарға сілтемелер (*.css және *.js).
- тегтің көмегімен қалыптасады <
ли>
.
Жаттығу 3
1. «Үй жобалары» тақырыбы бойынша нөмірленген тізім жасаңыз.
2. «Үй аумақтары» айдары астында маркерленген тізім жасаңыз. Сіздің кодыңыз келесідей болады (12-сурет).
12-сурет
3. Бетті шолғышта қараңыз.
Тізімдерді әр түрлі маркерлер арқылы бір-бірінің ішіне салуға болады.
Кірістірілген тізімнің мысалы суретте көрсетілген. 13
Жаттығу 4
Сурет 13. Кірістірілген тізімнің мысалы
Қаріп стильдері
Тег … - қалың қаріппен мәтінді көрсетуге мүмкіндік береді.
Тег … - мәтінді курсивпен көрсетуге мүмкіндік береді.
Тег … - асты сызылған мәтінді көрсетеді.
Мысалы:
Бұл жағдайда мәтін көрсетіледі қалың курсив , бірақ асты сызылмаған.
Және бұл жағдайда мәтін жазылады асты жуан сызылған курсив .
Жазба және үстіңгі әріптер
Тег < суб> Және суб> мәтінді қалыпты мәтіннен жарты жолдан төмен түсіруге мүмкіндік береді.
Тег < суп> Және суп> мәтінді қалыпты мәтіннен жарты жолға көтеруге мүмкіндік береді. Бұл тегтердің арасында орналасқан мәтін кәдімгі мәтінге қарағанда кішірек қаріппен көрсетіледі.
Жаттығу 5
1. Бірінші абзацта myhouse.ru атауын қалың қаріппен пішімдеңіз (14-сурет).
14-сурет
2. Екінші абзацта асты сызылған курсивпен «Жобалардың 95%-дан астамы» тіркесін пішімдеңіз (15-сурет).
15-сурет
3. Шаршы метрлер қолданылатын үстіңгі жазуларды пішімдеу (16-сурет).
16-сурет
4. Файлды сақтаңыз. Браузер арқылы қарау. Веб-бет келесідей болуы керек (17-сурет).
17-сурет
3. Суреттерді кірістіру
HTML бетін қалай жасау керек деген мақаламызда веб-бетке кескіндерді қалай орналастыру керектігін қарастырамыз.
Тег кескіндерді енгізу үшін қолданылады .
Бұл тег үшін қажетті төлсипат болып табылады src(ағылшынша SouRCe – дереккөзінен). Ол жолды анықтайды графикалық файл, оның суреті веб-бетте көрсетілуі керек.
Кескінді кірістіру үшін пәрменді пайдаланыңыз 
Мысалы: "
image1.jpg"
alt="Сурет" />
!}
Alt атрибуты веб-бетті өшірілген кескіндер режимінде қараған кезде жетіспейтін кескіннің орнына alt атрибутында жазылған жазу болуы үшін қажет. Сондай-ақ әрқашан балама мәтіндерді пайдалану ұсынылады, өйткені іздеу жүйелері суреттерді іздеу кезінде оларды кілт сөздер ретінде талдайды.
Графикалық файлдар пішімде болуы мүмкін jpg, gif, png және әрқашан түсті үлгідеRGB.
Жаттығу 6
1. Үй аумақтарының тізімінен кейін веб-бетке коттедж жобаларының суреттерін кірістіріңіз жоба_1.jpgЖәне жоба_2.jpgқалтадан CD/html_css_1 . Ол үшін алдымен осы екі суретті main.html файлы орналасқан қалтаға көшіріңіз. Кескінді кірістіру коды келесідей болады (18-сурет).
18-сурет
2. Нәтижені шолғышта қараңыз (19-сурет).
19-сурет
Негізінен тегтерді қолдану принципіHTMLанық болуы керек. Олар бірдей принцип бойынша қолданылады: егер тег контейнер болса, онда ашылатын және жабылатын тег бар. Егер тег жалғыз болса, онда жабу тегі жоқ; бұл жағдайда оң жақ қиғаш сызық жабылатын бұрыштық жақшаның алдында жазылады, мысалы< б/>. Тег контейнерлік немесе жалғыз болсын, сіз әрқашан спецификациядан қарай аласызhtml401_ru.chm «элементтер» бөлімінде.
4. Сайт ішінде адрестеу
«HTML бетін қалай жасау керек» атты бірінші сабағымызда HTML тіліндегі адрестеу ұғымдарын қарастырамыз.
Сайттың әртүрлі қалталарында орналасуы мүмкін html файлында кескіндерді орналастыру қажет болғанда адрестеу опцияларын қарастырайық.
Адрестің екі түрі бар:
Абсолютті адрестеу (компьютер дискінің атауларын пайдалану) қолданылмайды(20-сурет)
20-сурет
Қолданылған салыстырмалы адрестеу - құжат ішінде немесе бір сервердегі құжаттар жиынтығында адрестеу. Сайттағы файлға сілтеме жасау үшін браузерге қалаған файлға жету үшін қандай жолдан өту керектігін айту керек.
|
1-мысал Сурет HTML құжатымен бір қалтада орналасқан (21-сурет). Яғни, сурет пен HTML файлы бір деңгейде файлдық жүйежәне HTML құжаты суретті бірден тіркей алады. Бұл жағдайда веб-бетке сурет кірістіру келесідей болады.
21-сурет Практикалық тапсырма7 1-мысалды орындаңыз (қалта, doc.html файлын жасаңыз, кез келген суретті алыңыз). Кескін |
|
2-мысал Кескін сурет. jpgқалтада орналасқан қалта_1 . HTML құжаты_1 қалтасынан тыс орналасқан. Анау. Сайттың файлдық жүйесінде HTML құжаты кескіннен бір деңгей жоғары орналасқан (22-сурет). Қалтаға_1 енгізіп, суретті тіркеңіз
22-сурет Практикалық тапсырма8 2-мысалды орындаңыз (қалтаны, doc.html файлын жасаңыз, кез келген суретті алыңыз). Кескін doc.html веб-бетіне кірістірілуі керек. |
|
3-мысал Кескін сурет. jpgқалтада орналасқан қалта_1 , ол өз кезегінде қалтада жатыр қалта_2 . HTML құжаты осы қалталардан тыс орналасқан (23-сурет). Осылайша, HTML құжаты кескіннен екі деңгейге жоғары. Қажетті:
23-сурет Практикалық тапсырма9 3-мысалды орындаңыз (қалталарды, doc.html файлын жасаңыз, кез келген суретті алыңыз). Кескін doc.html веб-бетіне кірістірілуі керек. |
|
4-мысал қалта_1 . Кескін_1 қалтасының сыртында орналасқан. Анау. HTML құжаты кескіннен бір деңгей төмен орналасқан (24-сурет). Сізге_1 қалтасынан шығып, суретті тіркеу керек. Қалтаны қалдыру құрылыспен көрсетіледі ../ (екі нүкте және оңға қиғаш сызық).
24-сурет Практикалық тапсырма10 4-мысалды орындаңыз (қалтаны, doc.html файлын жасаңыз, кез келген суретті алыңыз). Кескін doc.html веб-бетіне кірістірілуі керек. |
|
5-мысал HTML құжаты қалтада орналасқан қалта_1 , ол өз кезегінде қалтада орналасқан қалта_2 . Кескін осы қалталардан тыс. Осылайша, HTML құжаты кескіннен екі деңгей төмен орналасқан (25-сурет). Қажетті: Екі рет шығу керек болғандықтан, дизайн ../ екі рет қайталанады.
25-сурет 1-тәжірибе1 5-мысалды орындаңыз (қалталарды, doc.html файлын жасаңыз, кез келген суретті алыңыз). Кескін doc.html веб-бетіне кірістірілуі керек. |
|
6-мысал (26-сурет) Қажетті:
26-сурет 1-тәжірибе2 6-мысалды орындаңыз (қалталарды, doc.html файлын жасаңыз, кез келген суретті алыңыз). Кескін doc.html веб-бетіне кірістіру керек. |
|
Мысал 7 (27-сурет) Қажетті: Үш рет шығу керек болғандықтан, дизайн ../ үш рет қайталанады.
27-сурет 1-тәжірибе3 7-мысалды орындаңыз (қалталарды, doc.html файлын жасаңыз, кез келген суретті алыңыз). Кескін doc.html веб-бетіне кірістіру керек. Осылайша, қанша рет шығу керек болса да, біз конструкцияны ../ сонша рет қоямыз, ал кірсек, жол бойында кездескен папкалардың атын тізімдейміз. |
/
>
/
>
/
>
1-тәжірибе4
1. Html құжатын құрыңыз және оған суреттің жолы келесідей болатындай етіп сурет салыңыз.
"
../../../../../../folder_1/folder_2/folder_3/image.jpg" /
>
2. html құжатына суретті кірістіру мысалында оның құрамында және болатындай етіп жасаңыз Шығу қалталардан және Кіру қалталарға. Мысал жоғарыдағы барлық мысалдардан өзгеше болуы керек.
Осы тақырыпты аяқтау нәтижесінде сізде келесі файлдар жасалған болуы керек:
Көптеген тілдер ойлап табылды, бірақ HTML ерекше және ең танымал тілдердің бірі болып табылады. Бағдарламалаудағы басқа да көптеген негізгі оқиғалар онымен байланысты. Әзірлеушінің санасында белгілеу тілі – HyperText Markup Language (HTML) болған кезде көп нәрсе мүмкін болады.
Негізінде, HTML-де күрделі ештеңе жоқ және бірнеше минуттан кейін бағдарламалаудан және Интернеттен алыс кез келген адам Блокнотта HTML бетін жасай алады. Көңіл аударуға тұрарлық мысал, барлығына шынымен қолжетімді қарапайымдылық.
Жалпы сипаттама
HTML файлы сайттың бір беті болып табылады, бірақ бұл туралы дау айтуға болады, бірақ бір файлдың бір бетті құрайтыны басынан бастап анық.
HTML файлы DOCTYPE тақырыбынан басталады, ол файл түрі HTML екенін көрсетеді. Барлық бет элементтері (тегтер) бұрыштық жақшада көрсетілген. Әрбір жұп («<» и «>") бір HTML тегін қамтиды. Әдетте HTML тегтері жұп болып келеді, яғни әрбір «тег» үшін «/тег» болады. Екеуі де бұрыштық жақшаға салынған. Жалғыз тегтер бар, олардың ең танымалы «br/» - келесі жолға өту.
Файлдағы ең үлкен тег HTML-дің өзі болып табылады, онда тек екі тег бар: HEAD және BODY. Біріншісінде әртүрлі сипаттамалар жасалады, бетте қажет басқа файлдарға сілтемелер көрсетіледі, олар болуы мүмкін PHP сценарийлеріжәне JavaScript. Екіншісі парақтың мазмұнын жазады. Сондай-ақ тегтер мен сценарийлер түрінде.
Қарапайым HTML беті
Мұндай бетті жасаудың мысалы мақалада төменде келтірілген. Оны мұқият қарастырайық.
БАС бөлімі
Негізгі мақсаты - Жалпы сипаттамабеттер мен жалпы сценарийлер, дегенмен соңғысы салыстырмалы ұғым. Мұнда әдетте екі нәрсеге ғана маңызды мән беріледі:
Бет мазмұнын көрсету үшін бұл бөлімнің мазмұны жанама ғана маңызды, өйткені ол мынаны көрсетеді: басқа файлдардың бір жерінде басқа тілдердегі тегтер мен сценарийлерге арналған CSS ережелері бар.
HTML бетінде кіруші тінтуірді бет ашық қойындыға жылжытқанда көрсетілетін бет бар. Бұл маңызды нүкте, өйткені ол бетті айтарлықтай көрнекі етеді, айтуға оңай, оқылатын мәтінмен қол қойылады.
META тегтері жалпы интернет-бағдарламалауда маңызды, бірақ Блокнот бағдарламасында HTML бетін жасау қажет болғанда, мысалды қажетсіз құрылымдармен араластыру ұсынылмайды.
HTML білімі орнатылғаннан кейін сценарий жазуға жақындау керек болса, онда каскадты мәнерлер кестелері дереу шешілуі керек. CSS файлдарында, атап айтқанда, дизайн ережелері бар HTML тегтері.
ДЕНЕ бөлімі
Шындығында, мысал HTML беті - BODY бөлімі. Мұнда барлық ақпарат, сайт бетіндегі барлық мазмұн қамтылған. Барлық ақпарат тегтер мен сценарийлер түрінде ұсынылады, мысалы, JavaScript кодын немесе PHP бағдарламаларының бөліктерін кірістіру.
Браузердегі HTML веб-бетінің мысалы мен мәтіндік редактордағы, атап айтқанда Блокноттағы бірдей мысал бірдей нәрсе емес екенін түсіну маңызды. Бірінші жағдайда бізде барлық сценарийлер орындалатын дайын HTML мәтіні бар. Мысалы, РНР өз бөлігін өңдеп, кодының орнына қажетті тегтерді дұрыс жерлерде қалыптастырды. JavaScript де өз миссиясын орындады, бірақ ол бөлек талқылануы керек.
HTML - бұл сценарийлер емес, тегтер. Сайып келгенде, браузер тек беттің мазмұнын ғана көрсетеді, тек оның тегтері. Онда PHP коды жоқ.
JavaScript ерекше позицияда, оның алаңдаушылығы бетке тек жүктелу (шамадан тыс жүктелу) сәтінде ғана емес, сонымен қатар бет келушінің браузерінде болған және оны оқып жатқан сәттерде қызмет ету болып табылады.
Қарапайым мысал (тек BODY бөлімі) төменде көрсетілген.
Ал келушінің браузерінде ол келесідей көрінеді:
Код браузер көрсететін элементтердің қандай болуы керектігін көрсетпеді. Барлық көрінетін сәндеу CSS ережелерінде. Бұл жағдайда, байланыстырылған Mcss/scPhpWordRW.css файлында (HTML бетінің ең бірінші мысалын қараңыз).
HTML-ден айырмашылығы, CSS тақырыбы қарапайым, өте қолжетімді ережелер бар және HTML бетін жасау мысалы блокноттан басқа ештеңені қажет етпейтін кезде олардың саны аз. Бірден меңгеру үшін барлығы өте қолжетімді:
Бұл scLogo_vDoc тегінің қаншалықты қарапайым сипатталғанын көрсетеді және бұл сипаттама оның қалыпты күйінде тег vDoc-logo.png кескінін көрсететіндей және тінтуір оның үстінде болғанда, vDoc-logo-h.png көрсетіледі.
HTML сипаттамаларының құрылымы
Тіл ешқандай құрылымды білдірмейді және мұнда синтаксис ұғымы өте салыстырмалы. Айнымалылар жоқ, бірақ көптеген мүмкіндіктер бар. Гипермәтіннің іргелі негізі - міндетті түрде аты бар элементтің (тегтің) болуы.
Жұптастырылған тег жағдайында атау аттың өзінен (tegName) және бұрыштық жақшалардан тұрады («<» + tagName +«>"), Егер туралы айтып отырмызтегтің басталуы туралы және "«егер оның соңы жазылса.
Төлсипаттарды сипаттайтын мысал HTML беті мәтінде төменде орналасқан.
Тегтің атрибуттары болуы мүмкін, бұл жағдайда олар «>» жабылатын бұрыштық жақшаның алдында тег атынан кейін бос орынмен орналастырылады. Төлсипаттар, егер тегте олар болса, тек тегтің басында жазылады. Тегтің мазмұны тегтің басы мен соңы арасындағы нәрсе болып саналады.
HTML блокты және кірістірілген элементтерді сипаттауға мүмкіндік береді. Біріншісі браузер терезесінде белгілі бір аумақты алады, абсолютті, яғни HTML бетінің дисплей аймағында қажетті орынға орналасуы мүмкін және белгілі бір өлшемге ие болады.
Кірістірілген элементтер әдетте бір ағында көрсетіледі, яғни бет файлында көрсетілгендей олар экранда көрсетіледі. Жалпы ағынның дисплейіне бет жүктелген кезде әсер етуі мүмкін. Блок элементтерінің орналасуына, көрінуіне және басқа қасиеттеріне кез келген уақытта JavaScript коды арқылы әсер етуге болады.
Қарапайым элементтерден басқа, HTML кестелер мен пішіндердің сипаттамасын ұсынады. Бұл элементтер «күнделікті веб-сайт құруда» үлкен сұранысқа ие.
Кесте сипаттамасы: тегтер TABLE, TR, TD
TABLE тегін пайдалана отырып, кесте құруға, TR жолдарының белгілі бір санын және әрбір жолда белгілі бір TD ұяшықтарын көрсетуге болады. Әдеттегі кестелік ұйымнан айырмашылығы, HTML белгілеудің ерекшеліктеріне байланысты кестелік ұйым осы декларациямен шектеледі, сондықтан әзірлеуші барлық жолдардағы бағандар саны бірдей төртбұрышты кестеге ие болғысы келсе, онда ол мұны өзі қадағалаңыз.
HTML-дің негізгі ұстанымы - көрсетілгеннің барлығын орындау, бірақ түсінбейтін нәрсені жасау. Кейбір жағдайларда кестенің әр жолындағы бағандар саны соншалықты маңызды емес, бірақ ұяшықтарды тігінен немесе көлденеңінен біріктіру қажет болса, бәрін өте мұқият санауға тура келеді.
Қарапайым кестені сипаттайтын мысал HTML парағы мақалада анық көрсетілген.
Мұнда үш жолдан үш бағаннан тұратын кесте көрсетілген және бірінші жолда TD тегінің орнына TH тегі қолданылған - баған тақырыбы. Бұл екі тегтің ерекше айырмашылығы жоқ, бірақ кестенің бірінші жолын ажырату үшін біріншісін қолдануға әбден болады, ал CSS-те TH-ге өзіңіздің стиліңізді тіркей аласыз, бұл оны басқа ТД-дан ерекшелендіреді.
Пішін сипаттамасы: FORM, INPUT тегтері
Пішіндер HTML тегтерінің ең танымал бөлігі болып табылады. Пішіндерді пайдалану арқылы ақпаратты тасымалдауға болады. Шын мәнінде, беттің өзі ақпараттың шығысы, бірақ пішін оның кірісі болып табылады.
Қарапайым пішінді сипаттайтын HTML парағының мысалы:
Пішіндерді пайдаланудың тағы да көптеген нұсқалары бар, бірақ бұл негізгі мүмкіндіктер. Пайдаланушы енгізген деректерді талдау үшін енгізу өрістерін көрсетуге, оларға дизайнды және өңдеушілерді тағайындауға болады. Жасырын өрістерді көрсетуге және беттен фондық ақпаратты жіберуге болады. Ақпаратты жіберуге арналған түймелерді белгілеуге болады, оларды басу ақпаратты жіберу процесін бастайды.
HTML пайдалану
Гипермәтін тілін білу - бұл Интернет-бағдарламалау саласындағы кез келген мамандықтағы жұмыс, бірақ сізге PHP немесе JavaScript тілінде бағдарламалар жазу қажет болса, онда HTML + CSS-ті жақсы білу керек.
РНР тілі алдыңғы мысалда көрсетілген. PHP серверде жұмыс істейді, сондықтан бұл пішіні бар бет толтырылған өрістермен серверден браузерге ұшып кетті. Атап айтқанда, INPUT тегінде (onblur оқиға өңдеушісі) айтылған TestOnBlur функциясы барлық параметрлерді мәтіндік өрістер ретінде қабылдады.
JavaScript браузерде жұмыс істейді және серверге деректерді кері жіберу батырмасы дұрыс жұмыс істеуі үшін, яғни конструкциясы: onclick=jQuery("#to").val("карт") болуы керек. jQuery дегеннің не екенін ғана емес, сонымен қатар #to, val, cart дегенді де түсіну. Дәлірек айтқанда, сіз негізгі HTML тегтерін білуіңіз керек және жалпы ережелероларға CSS мәнерлерін қолдану.
Бұл Интернет-бағдарламалау саласындағы кез келген мамандық бойынша біліктілікті тез көтеру үшін жеткілікті.
Сәлем, құрметті блог оқырмандары. Осы мақаламен біз негіздерді үйренуді бастаймыз HTML тілі.
Интернеттің негізгі тілі екенін сіз бұрыннан білетін шығарсыз гипермәтінді белгілеу тілі HTML (Hypertext Markup Language). Бұл мақалада біз HTML тілінің негізгі түсініктерін үйренеміз және қарапайым WEB беттерін жасауды үйренеміз.
Ең бастысынан бастайық, оның қалай жұмыс істейтінін қарастырайық World Wide Web- Ғаламтор. Веб-беттерді жасау үшін HTML тілінде жазылған файлдарды жасап, оларды веб-серверге орналастырасыз. Осыдан кейін Интернетке кіру мүмкіндігі бар құрылғыда орнатылған кез келген шолғыш, ол компьютер, телефон немесе планшет болсын, веб-беттеріңізді таба алады.
Веб-сервер- бұл арнайы құрылғысы бар қарапайым компьютер бағдарламалық қамтамасыз етуИнтернетке кіру мүмкіндігімен. Ол веб-беттерге, суреттерге, аудио және бейне файлдарға арналған браузерлердің сұрауларын үздіксіз тыңдайды. Осы ресурстардың біріне сұранысты алғаннан кейін сервер оны іздейді және оны браузерге жібереді.
Браузер- Бұл арнайы бағдарлама, мысалы, веб-сайттарды шолуға арналған Internet Explorer. Браузерді пайдаланып, сілтемелерді басу арқылы веб-сайттарды қарайсыз. Кез келген осындай басу браузерді веб-серверге HTML-бетке сұрау салуға, жауап алуға және бетті өз терезесінде көрсетуге әкеледі. Бет көрсетілгенде HTML тілі жұмыс істей бастайды, ол браузерге веб-беттің құрылымы мен мазмұны туралы бәрін айтып береді. Пәрмендерді пайдалану - тегтер, HTML браузерге мәтіннің абзацтары қай жерде басталатынын, мәтіннің қай бөлігі тақырып екенін және кестелерді, тіпті суреттерді қайда кірістіру керектігін айтады. Ал тегтер, мысалы, бұрыштық жақшадағы сөздер
,
