Мазмұны

• Қадамдар
• 1 -ші әдіс: HTML бетін жазу
• Кеңестер
• Ескертулер
• Саған не қажет

HTML (гипермәтінді белгілеу тілі) - веб -беттерді құруға арналған негізгі бағдарламалау тілі. Қарапайым және ыңғайлы бағдарламалау тілі ретінде құрылған. Интернеттегі беттердің көпшілігі осы тілдің бір формасы (ColdFusion, XML, XSLT) көмегімен жасалды. Бұл мақаланы оқығаннан кейін сіз Интернеттегі басқа ресурстарды қолдана отырып, жаттығуды жалғастыра аласыз. Осы тақырыпқа байланысты басқа мақалаларды Интернеттен іздеуге тырысыңыз.

Қадамдар

1 -ші әдіс: HTML бетін жазу

1. 1 Мұнда берілген қадамдардың бірімен танысуды бастамас бұрын, «Сізге не қажет» бөлімін қараңыз.
2. 2 Бұл мәселені түсінуге кіріспес бұрын не білуіңіз керек:
3. 3 Негіздері. Сіз тег туралы естідіңіз бе? Тег бұрыштық жақшалармен қоршалған, ішінде сөз бар. Соңы тегі сол формада жазылады, бірақ бірінші бұрыштық жақшадан кейін қиғаш сызық қосылады. Атрибут - бұл тегке қосымша мәліметтерді қосу үшін қолданылатын қосымша сөз.
4. 4 Құжаттың басталуы. Кез келген мәтіндік редакторға төмендегілерді қойыңыз:
   html> head> title> wikiHow / title> / head> body> Hello World / body> / html> big> / big>
   Тег сол тегпен жабылуы керек, бірақ бірінші бұрыштық жақшадан кейін қиғаш сызықпен. Тегтер сияқты ерекшеліктер бар META немесе DOCTYPE.
5. 5 DOCTYPE
   • Әдетте, көптеген веб -беттер орнатылады DOCTYPE ». Бұл кодтауды анықтауға көмектеседі, сонымен қатар оны веб -браузерлер қалай қабылдайды. Көптеген беттер онсыз жұмыс істейді, «бірақ егер сіз сәйкестендіргіңіз келсе, бұл қажет (Олар интернеттегі кодтау түрлерін және олардың қолданылуын реттейді)... HTML 4.01 үшін DOCTYPE төменде ұсынылған :! DOCTYPE html PUBLIC «- // W3C // DTD HTML 4.01 // EN» «http://www.w3.org/TR/html4/strict.dtd»> Бұл бір ең көп таралған DOCTYPE интернеттің барлық беттерінде қолданылады.Біріншіден, ол 'html' суретін сипаттайтын беттің түрін көрсетеді, содан кейін ол кодтаудың түрін көрсетеді, нәтижесінде DOCTYPE орналасуы, нәтижесінде браузерге арналған бетті сипаттайды.
   • HTML -дің әр түрлі түрлері бар (бірнеше жылдар бойы өңделген әр түрлі нұсқалар), мысалы, жаңа тегтерді немесе арнайы тегтерді қолдану. Кейбір тегтер ескірген (оның орнына басқа пайдалы тегтер қолданылады).
   • b> және мен> - бұл қазіргі уақытта тегтерге жүктелген, себебі олар мәтінді түрлендіру үшін пайдаланылады, бірақ ерекшеліктер емес, нәтижесінде олардың орнына басқа тегтер келеді. Тег күшті> үшін ауыстыру болып табылады b>, және em>, ауыстыру мен>.
   • Алдыңғы тегтердің пішімделуден асатын тегтермен алмастырылуы маңызды. Егер мәтін аударылған болса, онда форматтау ғана емес, оның мағынасы да өзгеріссіз қалады. Бұл мағыналық жағынан дұрыс.
   • XHTML 2.0 нұсқасында b> және мен> HTML нұсқасы 3+ сияқты қолданылмайды.
6. 6 HTML «инкапсуляция ережесі».
   • Қазіргі уақытта қолданылатын маңызды тегтерді қарастырайық. Бетті құру кезінде қарапайым құрылым қолданылады. Егер тег ашылған болса, нәтижесінде оны жабу керек... Бұл бүкіл құрылымға қатысты. Міне, XHTML орналасу құрылымының жарамды мысалы:
   • ! DOCTYPE html PUBLIC «- // W3C // DTD XHTML 1.0 қатаң // EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
   • html xmlns = «http://www.w3.org/1999/xhtml»>
   • бас>
   • мета http-equiv = «Content-Type» мазмұны = «text / html; charset = utf-8» />
   • тақырып> Сәлем әлемі! / атауы>
   • / бас>
   • дене>
   • h1> Сәлем Әлем! / h1>
   • / дене>
   • / html>
   • Хабарды шығаратын код үлгісі Сәлем Әлем... Бұл тест деп аталады Сәлем Әлем.
7. 7 Тақырып
   • Веб -беттің атауы - бұл тег арасындағы мазмұн бас>... Бұл мазмұнды пайдаланушы қарай алмайды (тек беттің атауында көрсетілген тақырып). Тегтер арасындағы ақпарат бас>, басқа тегтерді қоса алады, мысалы:
     
     
     • META тегі іздеу жүйелері мен басқа утилиталарға пайдалы ақпарат үшін қолданылады.
     • Құжаттар арасында сілтеме жасайтын LINK тегі, мысалы, Стильдер (CSS) үшін.
     • SCRIPT тегі, бұл қашықтан қатынау мүмкіндігі бар кез келген веб -кодтауды қамтиды (басқа құжаттан).
     • STYLE тегі, ол негізінен бетке қолдануға болатын стиль.
     • TITLE тегі - бұл веб -шолғышта беттің тақырыбы ретінде пайда болатын тақырып.
   • Осы веб -сайттан алынған тақырып тақырыбында олардың кейбірінің демонстрациясын көрейік (қысқартылды):
     • бас>
     • тақырып> ... / тақырып>
     • мета атауы = «сипаттамасы» мазмұны = «...» />
     • сілтеме rel = «styleeset» type = «text / css» href = «...» />
     • мета http-equiv = «content-type» content = «text / html; charset = UTF-8» />
     • style type = «text / css» media = «all»> ... / style>
     • сценарий түрі = «text / javascript» src = «...»> / script>
     • / бас>
       
       Егер сіз байқамасаңыз, нақты тегтер бөлініп, нақты ақпарат жойылады. Мысал өте қысқа, онда табуға болатын барлық дерлік тегтер көрсетілген бас>HTML түсініктемесінен басқа (біз бұл туралы қарапайым тегтерде айтатын боламыз).
8. 8 Барлық жерде қарапайым тегтер
   • Келіңіздер және басқа тегтерді көрейік. Таңбалауда абай болыңыз және «инкапсуляция» ережесін есте сақтаңыз.
     
     
     • күшті> Маңызды мәтінге баса назар аударады.
     • кішкентай> Мәтінді кішірейтеді. Қаріп өлшемі 1 -ден 7 -ге дейінгі стандартты бірлікпен өлшенеді, 3 - әдепкі мәтін өлшемі. ...
     • pre> бай мәтін блогын анықтайды. Дұрыс болғандықтан, мұндай мәтін бір өлшемдегі қаріппен және сөздер арасындағы барлық бос орынмен теріледі.
     • em> Мәтінді сөйлем ретінде көрсетеді.
     • del> Мәтінді алып тастайды.
     • ins> Құжатқа енгізілген мәтінді анықтайды.
     • h1> Көптеген тақырыптық тегтердің бірі. Мұндай тегтер санның айырмашылығымен 'h' әрпінен басталады. Бірдей нөмірмен тегті жабуды ұмытпаңыз.
     • p> Абзацты анықтайды.
     • ! --- ... ---> Басқа тегтерден айырмашылығы, түсініктеме тегтің ішінде болуы керек. Бұл ақпарат кодты қараған кезде ғана көрінеді.
     • blockquote> цитатаны көрсетеді, цитата> тегімен қолдануға болады.
     • Жоғарыда келтірілген бірнеше мысалдар бар тегтердің толық тізімі емес. Басқалар туралы білу үшін келіңіз.
9. 9 Нақты құрылымды құру
   • Беттер мәліметтерді параграфтарға бөлу үшін деректерді тегтердің қарапайым жиынтығында сақтауға арналған. Компьютер деректерді таниды; ол контекст немесе тұжырымдамалық байланыс туралы білмейді. Біз компьютерге ыңғайлы HTML беттерін жасауымыз керек. Бұған div тегінің көмегімен қол жеткізіледі. Бұл көптеген беттерді құруға көмектеседі. Оны CSS көмегімен сәндеуге болады және орналасу үшін үлкен код кестелерін құрудан оңай.
     • div> Бұл тег ерекше, себебі оны стильдеуге болады және пайдаланушы да, компьютер де түсінетін ақпараттың бөлек блоктарын қолданады.
   • Div тегін қолданатын қарапайым HTML орналасуын қарастырайық.
     • ! DOCTYPE html PUBLIC «- // W3C // DTD XHTML 1.0 қатаң // EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
     • html xmlns = «http://www.w3.org/1999/xhtml»>
     • бас>
     • мета http-equiv = «Content-Type» мазмұны = «text / html; charset = utf-8» />
     • тақырып> Сәлем әлемі! / атауы>
     • / бас>
     • дене>
     • h1> Сәлем Әлем! / h1>
     • div id = «contentOne»>
     • p> Бұл div # contentOne ішіндегі мәтін. / p>
     • div>
     • p> div # contentOne / p> ішкі бөліміндегі параграф
     • / div>
     • / div>
     • / дене>
     • / html>
   • Div> тегтерін қолдану CSS және Javascript -пен жұмыс кезінде стильдерді табуға және өзгертуге көмектеседі. HTML жақсы және жауап беретін пайдаланушы тәжірибесін жасау үшін CSS стильдерімен және Javascriptпен жұмыс істеу үшін әр түрлі кодтауды қолданады.

Кеңестер

• Бұл мақаланы оқығаннан кейін тоқтамаңыз және сіз білуге ​​болатын барлық нәрсені білдім деп ойламаңыз. Әрқашан үйренуге болатын нәрсе бар, әсіресе бұл технологияда.
• Кодты үйреніңіз, түсініңіз және жазыңыз.
• Кейбір тегтер тек> пайдаланатынын ескеріңіз. Пара мен бр - кейбір мысалдар. > Ашылған басқа тегтерді әрі қарай жабу қажет. Мысалы, «div> / div>».
• Адамдар жаңа ашылуларды күтеді, сондықтан оны қайта ойлап табыңыз, дизайн жасаңыз немесе код жасаңыз.
• Сіз көп нәрсені білген соң, серверлік бағдарламалауды үйреніп көріңіз.
• CSS және JavaScript -пен жұмыс жасауды үйреніңіз.

Ескертулер

• Есіңізде болсын, HTML - бұл мазмұнды өңдеу. Бұл HTML тек мазмұнды танылған форматта сақтау үшін қолданылатынын білдіреді. Басқа өзгерістер CSS сияқты басқа технологияларды қолдану арқылы жасалуы керек. Бұл сонымен қатар «Семантикалық тұрғыдан дұрысбасқалар мойындамаса да. Басқа бағдарламалау тілдері веб -беттерді құруға көмектеседі (CSS, Javascript және XML). HTML - мазмұн құрушы.

Саған не қажет

• ANSI кодтауды қолдайтын мәтіндік редактор
• Internet Explorer немесе Mozilla Firefox сияқты веб -шолғыш
• (Қосымша) Adobe Dreamweaver, Aptana Studio немесе Microsoft Expression Web сияқты wysiwyg немесе wykiwyg HTML редакторы