Мазмұны

• Басу үшін
• 2-нің 1-бөлімі: HTML негіздерін үйрену
• 2-нің 2-бөлімі: HTML-ді тереңдетіп оқыту
• Кеңестер
• Ескертулер
• Қажеттіліктер

HTML - бұл аббревиатура Гипермәтінді белгілеу тілі, бұл код немесе тіл ол веб-сайттарды құру үшін қолданылады. Бұрын ешқашан бағдарламаланбаған болсаңыз, бұл күрделі болып көрінуі мүмкін, бірақ оны қарап шығу үшін қарапайым мәтін өңдеуге арналған бағдарлама және интернет-шолғыш қажет. Сіз HTML-ді форумдардан, желідегі профильдерден немесе wikiHow мақалаларынан біле аласыз. HTML - бұл Интернетті пайдаланатын кез-келген адам үшін пайдалы ресурс, және HTML-ді үйрену сіз күткеннен аз уақыт алуы мүмкін.

Басу үшін

2-нің 1-бөлімі: HTML негіздерін үйрену

1. HTML құжатын ашыңыз. Мәтін өңдеуге арналған бағдарламалардың көпшілігі, соның ішінде Блокнот немесе Windows үшін Word және Mac үшін мәтіндік редактор HTML құжаттарын құру үшін қолданыла алады. Құжатты веб-бет ретінде сақтау үшін жаңа құжатты ашып, жоғарғы мәзірден Файл → Басқаша сақтау пәрменін таңдаңыз немесе файл кеңейтімін «.doc», «.rtf» немесе басқа нәрселерден «.html» немесе «.htm» етіп өзгертіңіз. «.
   • Енді сіздің құжатыңыз бай мәтін форматынан (RTF) «кәдімгі мәтін» форматына өзгертіліп жатқандығы және кейбір пішімдеу параметрлері мен кескіндер дұрыс сақталмайтындығы туралы ескертуді көре аласыз. Сіз бұл ескертуді елемеуге болады; HTML құжаттарында бұл параметрлер қолданылмайды.
   • .html және .htm файлдары бірдей. Бұл екеуі де жұмыс істейді.
2. Браузер арқылы құжатыңызды қараңыз. Бос құжатты сақтаңыз, жабыңыз, содан кейін оны қайтадан ашу үшін сақталған жерде екі рет басыңыз. Сіздің құжатыңызды браузер енді бос веб-бет ретінде ашуы керек. Егер бұл жұмыс істемесе, файлдың белгішесін шолғышыңыздың мекенжай жолағына сүйреңіз. Кейінірек, егер сіз HTML мақалаңызды осы мақаладағы қадамдар бойынша өңдейтін болсаңыз, онда сіз кодтың өзгеруі қалай болатынын тексеру үшін шолғышқа қайта ораласыз.
   • Ескерту: сіздің веб-сайтыңыз әлі желіде емес. Парақ басқаларға қол жетімді емес және оны тексеру үшін сізге жұмыс істейтін интернет байланысы қажет емес. Сіз өзіңіздің браузеріңізді HTML құжатын веб-сайт сияқты «оқуға» пайдаланасыз.
3. «Тегтер» деген не екенін түсініп алыңыз. Тегтер соңғы веб-бетте көрінбейді, әдеттегі мәтін сияқты. Тегтер браузерге парақты және мазмұнын парақта қалай көрсету керектігін айтады. Бастапқы тегте нұсқаулар бар. Мысалы, ол браузерге мәтінді қою қаріппен көрсетуі мүмкін. Нұсқаулық қайда қолданылатынын браузерге хабарлау үшін соңғы тег қажет: бұл мысалда басталу мен аяқталу арасындағы барлық мәтін қалың қарамен жазылған. Соңғы тегтер де жақшаның ішіне орналастырылады, бірақ қиғаш сызық бірінші жақшаның артынан шығады.
   • Бастапқы тегтерді жақшаға жазыңыз: бұл басталатын күн>
   • Жақшаға соңғы тегтерді жазыңыз, бірақ бірінші жақшадан кейін көлбеу қойыңыз: /бұл жабылатын тег>)
   • Функционалды тегтерді қалай жазуға болатынын мақаладан кейін оқыңыз. Бұл қадамда тегтерді қай жолмен жазуға болатындығын есте сақтау қажет:> және />.
   • HTML-дің басқа курстарында тегтер «элементтер» деп аталады, ал ашылатын және жабылатын тегтер арасындағы мәтін «элементтер мазмұны» деп те аталады.
4. Бірінші html> тегіңізді жазыңыз. Әр HTML құжаты а-дан басталады HTML>тегімен аяқталады және а / html>тег. Бұл браузерге осы тегтер арасындағы барлық нәрселер HTML тілінде жазылғанын айтады. Құжатқа осы тегтерді қосыңыз:
   • Жазыңыз HTML> құжаттың жоғарғы жағында.
   • Өзіңізге біраз орын беру үшін бірнеше рет кіріңіз немесе оралыңыз, содан кейін жазыңыз / html>
   • Сізді ұмытпаңыз бәрі осы мақалада осы екі тегтің арасында.
5. Құжаттың басын> бөлігін жасаңыз. Html> және / html> тегтерінің арасында сіз а жазасыз бас>бастау тегі және a / бас>-тег. Осы тегтер арасында тағы да біраз орын қалдырыңыз. Осы тегтер арасында жазылғанның бәрі веб-парақтың өзінде көрінбейді. Келесі қадамдарды орындап көріңіз және ақпарат қайда пайда болатынын көре аласыз ба:
   • Head> және / head> тегтерінің арасына жазыңыз: тақырып> және / тақырып>
   • Tag> және / title> тегтерінің арасында сіз жазасыз: HTML-ді қалай үйренуге болады (суреттермен) - wikiHow.
   • Құжатты сақтаңыз және оны шолғышта ашыңыз (немесе құжатты сақтаңыз және бетті шолғышта жаңартыңыз, егер бет әлі ашық болса). Сіз парақтың жоғарғы жағында, адрес жолағының үстінде жазғаныңызды көрдіңіз бе?
6. Негізгі бөлім> бөлім жасаңыз. Осы бастаушы құжаттағы барлық зат негізгі бөлімге орналастырылған және ол веб-бетте көрсетілген. Кейін тег / бас>, бірақ Алдында / html> сіз жазасыз дене> және / дене>. Осы мақалада біз бұдан әрі талқылайтын барлық нәрсені дене белгілері арасында орналастырамыз. Енді сізде келесі құжат болуы керек (оқсыз):
   • HTML>
   • бас>
   • тақырып> HTML-ді үйрену - wikiHow / title>
   • / бас>
   • дене>
   • / дене>
   • / html>
7. Әр түрлі стильдегі мәтін қосыңыз. Енді сіз браузерде көрінетін нәрсе жаза бастадыңыз! Негізгі белгілерге жазған барлық нәрселер браузерде өзгерістерді сақтап, бетті жаңартқаннан кейін шолғышта көрінеді. Жазыңыз емес белгілері бар нәрсе және >өйткені сіздің браузеріңіз қарапайым мәтіннің орнына HTML нұсқауы ретінде түсіндіреді. Мысалы жазыңыз Сәлем Әлем! (Ағылшын тілінен аударғанда «Hello world!», Бұл белгілі бір бағдарламалау тіліндегі кез-келген бағдарламалау курсының алғашқы мысалы ретінде жаһандық стандартты мәтін) немесе басқа нәрсе, және мәтіннің алдында және артында келесі тегтерді қойып, не болатынын көріңіз:
   • em> Hello world! / em> көлбеу мәтінге ұқсайды: Сәлем Әлем!
   • күшті> Сәлем әлем! / күшті> қалың мәтінге ұқсайды: Сәлем Әлем!
   • s> Hello world! / s> сызылған мәтінге ұқсайды: Сәлем Әлем!
   • sup> Hello world! / sup> жоғарғы әріпке ұқсайды:
   • sub> Hello world! / sub> жазбаға ұқсайды: _{Сәлем Әлем!}
   • Комбинацияларды қолданып көріңіз: қалай көреді em> strong> сәлем әлем! / strong> / em> кету?
8. Мәтінді абзацтарға бөліңіз. Егер сіз құжатыңызға әртүрлі мәтін жолдарын салсаңыз, онда барлық жолдар бірінен соң бірі орналастырылғанын көресіз. Жаңа жолдар мен бос жолдарды өзіңіз бағдарламалауыңыз керек:
   • p> Бұл жеке бөлім. / p>
   • Бұл сөйлем бірінші жолда, ал бұл сөйлем келесі жолда.
     Бұл бізде кездесетін бірінші тег, оған соңғы тег қажет емес! Біз мұндай тегті бір деп атаймыз бос тег.
   • Бөлімдердің аттарын түсінікті ету үшін тақырыптар жасаңыз:
     h1> тақырып / h1>: мүмкін үлкен тақырып
     h2> тақырып / h2> (2 деңгей тақырыбы)
     h3> тақырып / h3> (3 деңгей тақырыбы)
     h4> тақырып / h4> (4 деңгей тақырыбы)
     h5> тақырып / h5> (мүмкін ең кіші тақырып)
9. Тізімдерді қалай жасау керектігін біліңіз. Веб-парақта тізімдер құрудың бірнеше әдісі бар. Сізге не ұнайтынын білу үшін келесі әдістерді қолданып көріңіз. Бір жұп тегтер бүкіл тізімнің айналасында орналасқанын ескеріңіз (мысалы, реттелмеген тізімдер үшін ul> және / ul> тегтер) және тізімдегі әрбір элементтің айналасында басқа жұп тегтер орналасқан, мысалы, li> және / li> .
   • Маркерленген тізімдер жасау үшін келесі кодты пайдаланыңыз:
     ul> li> бір элемент / li> li> басқа элемент / li> li> басқа элемент / li> / ul>
   • Немесе нөмірленген тізімдер жасау үшін осы код:
     ol> li> 1-тармақ / li> li> 2-тармақ / li> li> 3-тармақ / li> / ol>
   • Немесе анықтама деп аталатын тізімді құру үшін осы код:
     dl> dt> кофе / dt> dd> - ыстық сусын / dd> dt> сүт / dt> dd> - салқын сусын / dd> / dl>
10. Жаңа сызықтармен, көлденең сызықтармен және суреттермен парағыңызды тартымды етіңіз. Енді парағыңызға басқа заттарды қосуды бастау керек. Келесі тегтерді қолданып көріңіз (кескіннің сілтемесін пайдалану үшін сурет желіде орналастырылуы керек):
    • Жолды енгізу: br> немесе сағ>
    • Суреттерді кірістіру: img src = «бейнеңіздің_уралы_»>
11. Сілтемелерді парақтың басқа жерлеріне салыңыз. Сіз бұл кодты басқа беттерге және веб-сайттарға сілтеме жасау үшін қолдана аласыз, бірақ сізде әлі веб-сайт жоқ болғандықтан, біз сіз сілтеме жасай алатын беттегі нақты орындар болып табылатын «зәкірлерге» назар аударамыз:
    • Алдымен сілтеме жасағыңыз келетін беттің нүктесінде a> тегімен якорь жасаңыз. Зәкірге есте сақталатын нақты атау беріңіз:
      
      a name = «Tips»> Бұл сіз айналаңызға якорьді орналастыратын мәтін. / a>
    • Өзіңіздің якорыңызға немесе басқа веб-сайтқа сілтеме жасау үшін href> тегін пайдаланыңыз:
      
      a href = «осы веб-беттің сілтемесі немесе якорь атауы»> сілтеме түрінде көрсетілген мәтінді немесе суретті жазыңыз. / a>
    • Басқа беттегі якорьге сілтеме жасау үшін url-ден кейін # таңбасын, содан кейін якорьдің атын қосыңыз. Мысалы http://www.wikihow.com/HTML-leren#Кеңестер сізді тікелей осы беттегі «кеңестер» бөліміне апарады.

2-нің 2-бөлімі: HTML-ді тереңдетіп оқыту

1. Атрибуттар туралы біліңіз. Атрибуттар тег ішінде орналастырылады және басталу мен аяқталу арасындағы «элемент мазмұнына» қосымша түзетулер енгізу үшін қолданылады. Олар ешқашан жалғыз болмайды. Олар келесі түрде жазылады: name = «value». аты атрибуттың атын білдіреді (мысалы, «түс») және мәні осы нақты жағдайды сипаттайды (мысалы, «қызыл»).
   • Егер сіз осы мақаланың алдыңғы бөлігін мұқият қарасаңыз, сіз атрибуттарға тап болдыңыз. Img> тегі атрибутты қолданады src, якорь атрибутты қолданады аты және сілтемелер атрибутты пайдаланады href. Олардың барлығы өлшемді екенін білуге ​​болады ___='___’ ұстану.
2. HTML кестелерімен тәжірибе жасау. Кесте немесе график құру үшін сізге бірнеше тегтер қажет:
   • Бүкіл кестенің айналасында кесте тегтерінен бастаңыз (ағылшынша «кесте»):кесте> / кесте>
   • Әр жолдың мазмұнына тегтер қойыңыз: tr>
   • Бірінші жолға баған тақырыптарын орналастырыңыз: th>
   • Ұяшықтарды қатарынан орналастырыңыз: td>
   • Мұның бәрі қалай жиналатынының мысалы:
     
     кесте> tr> th> 1-баған: ай / th> th> 2-баған: ақша үнемделді / th> / tr> tr> td> қаңтар / td> td> 100 евро / td> / tr> / кесте>
3. Бас бөлімінде қолданылатын басқа тегтерді біліңіз. Сіз әр құжаттың басында орналастыратын бас> белгісін үйреніп алдыңыз. Тақырып> тегтен басқа бас бөлімінде басқа тегтер болуы мүмкін:
   • Мета тегтер жасау үшін қолданылады метадеректер веб-парақ туралы. Бұл деректерді іздеу жүйелері веб-парақтарды санаттау үшін пайдаланады. Өз парағыңызды іздеу жүйелеріне көрнекі ету үшін сіз бір немесе бірнеше мета тегтерді орналастыра аласыз (соңғы тегтер қажет емес), әр тег дәл бір атрибут пен мазмұн атрибутын қамтуы керек, мысалы: мета аты = «сипаттама» мазмұны = «осында қойыңыз сипаттама «>; немесе meta name = «keywords» content = «әрдайым үтірмен бөлініп, кілт сөздерінің тізімін жазыңыз»>
   • сілтеме> тегтер басқа файлдарды параққа байланыстыру үшін қолданылады. Әдетте CSS стиль парақтарын HTML беттерімен байланыстыру үшін қолданылады, бұл беттер басқа код түрімен құрастырылған және беттің жалпы стилін анықтау үшін қолданылады.
   • script> тэгтер javascript файлдарын HTML парағымен байланыстыру үшін қолданылады. Javascript егер пайдаланушы парақта бірдеңе жасаса, парақты өзгертуге мүмкіндік береді.
4. Бар беттерден HTML-мен ойнаңыз. Веб-беттердің бастапқы кодын қарау - HTML білімін кеңейтудің тамаша тәсілі. Парақты тінтуірдің оң жағымен басып, «Көзді қарау», «Бет қайнар көзін көрсету» немесе сол сияқты параметрлерді таңдаңыз. Белгілі бір тегтің не істейтінін біліңіз немесе интернеттен жауап іздеңіз.
   • Сіз басқа адамдардың веб-сайттарын өңдей алмайсыз, бірақ HTML кодын өз құжатыңызға көшіре аласыз және онымен әр түрлі түзетулер не істейтінін көре аласыз. Ескерту: көптеген веб-сайттар CSS стиль кестелерін қолданатындықтан, сіз көптеген түстерді немесе басқа стильдерді көре алмауыңыз мүмкін.
5. Неғұрлым терең мақалаларды оқып, HTML туралы біліңіз. Интернетте W3Schools немесе Codecademy сияқты басқа HTML тегтерін игеруге арналған көптеген ресурстар бар. Сондай-ақ, HTML кітаптары көп, бірақ HTML стандарты мезгіл-мезгіл өзгеріп отыратындықтан, сіз соңғы басылымды қолданғаныңызға көз жеткізіңіз. HTML-ді жақсы деңгейде меңгергеннен кейін веб-парағыңыздың дизайны мен стилін бақылау үшін CSS-ке жүгіне аласыз. Осыдан кейін келесі қадам әдетте javascript болады.

Кеңестер

• Интернеттен қарапайым веб-парақты тауып, содан кейін кодпен араласуды бастау пайдалы болуы мүмкін. Біраз мәтінді жылжытуға, қаріпті өзгертуге, суреттерді өзгертуге тырысыңыз!
• Кодты жазу үшін ноутбукті қолдануға болады, осылайша сіз оны бір сәтке есіңізде сақтамасаңыз, сізге түсіп қалатын нәрсе болады. Сіз бұл парақты басып шығарып, анықтама ретінде сақтай аласыз.
• XML және RSS қазіргі уақытта веб-сайттарда көбірек қолданылуда. Код адам көзіне қол жетпейтін болып көрінуі мүмкін, әсіресе бастапқы кодта қаралған кезде, бірақ функционалдылық пайдалы болуы мүмкін.
• HTML ішінде қолданылатын тегтер регистрді ескермейді, бірақ әдепкі бойынша кіші әріптер қолданылады (біз осы мақалада жасағандай). Тегтерге арналған кіші әріптер, сондай-ақ XHTML-мен үйлесімділік үшін өте жақсы ұсынылады.

Ескертулер

• Кейбір тегтер енді қолданылмайды және оларды сол сияқты жасайтын басқа тегтермен алмастырды, бірақ көбінесе көп мүмкіндіктер ұсынады.
• Егер сіз өзіңіздің парағыңыздың HTML стандартына сәйкес келетіндігіне көз жеткізгіңіз келсе, W3 веб-сайтына өтіп, кодты қолданыстағы стандартқа сай тексеріңіз. Көптеген тегтер ескіріп, олардың орнына қазіргі браузерлерде жақсы жұмыс істейтін тегтер келді.

Қажеттіліктер

• Блокнот (Windows) немесе мәтіндік редактор (Mac) сияқты мәтінді өңдеу бағдарламасы.
• қағаз парағы немесе дәптер (қосымша)
• HTML-ді жазу үшін арнайы жасалған бағдарлама, мысалы Windows үшін Notepad ++ немесе Mac үшін TextWrangler (қосымша)