Мазмұны

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

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

Қадамдар

4-тен 1-бөлім: Құжат құру

1. 

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

2. 

   
   
   Файлды веб-бет ретінде сақтаңыз. Жоғарғы жақтағы мәзірден Файл → Басқаша сақтау пәрменін таңдаңыз. Файл пішімін «Веб-бет», «.html» немесе «.htm» етіп өзгертіңіз. Файлды оңай таба алатын жерде сақтаңыз.
   • Осы үш нұсқа арасында ешқандай айырмашылық жоқ.

3. 

   Файлды шолғышта ашыңыз. Файлды екі рет нұқыңыз, сонда ол сіздің браузеріңізде бос веб-парақ ретінде автоматты түрде ашылады. Сонымен қатар, сіз Firefox немесе Internet Explorer сияқты шолғышты аша аласыз, содан кейін құжатты таңдау үшін Файл → Файлды ашыңыз.
   • Бұл веб-сайт онлайн емес. Оны тек компьютерде көруге болады.

4. 

   
   
   Веб-парақты жаңартыңыз және енгізілген өзгерістерді көріңіз. Бос құжатқа келесіні енгізіңіз: Сәлеметсіз бе. Құжатты сақтаңыз. Браузердегі бос веб-парақты жаңартыңыз, парақтың жоғарғы жағында қарамен жазылған «Сәлем» сөзін көріңіз. Осы оқулық кезінде сіз өзіңіздің жаңа HTML-ді тексергіңіз келген кезде .htm құжатын сақтаңыз, содан кейін HTML қалай құрастырылғанын көру үшін браузер терезесін жаңартыңыз.
   • Егер сіз ««және»'' Сіздің шолғышыңызда пайда болады, файл HTML-де дұрыс жинақталмаған. Басқа мәтіндік редакторды немесе басқа браузерді қолданып көріңіз.

5. 

   
   
   Тегтерді біліңіз. HTML командалары «тегтерде» жазылады, олар браузерге веб-парағыңызды қалай құрастыру және қалай көрсету керектігін айтады. Олар әрқашан бір тырнақшаның ішінде жазылады , және оларды жоғарыдағы мысалда қолданғаныңыздай веб-бетте көрсетілмейді:
   • бұл «бастапқы карта» немесе «ашылу картасы». Осы тегтен кейін жазылған кез-келген нәрсе «қалың» (веб-бетте қалың) деп анықталады.
   • - бұл «аяқталу тегі» немесе «жабылу тегі», оны таңба / белгі бойынша ажыратуға болады. Бұл жуан мәтіннің соңын білдіреді. Көптеген тегтер (барлығы емес) жұмыс істеуі үшін соңғы тегті қажет етеді, сондықтан оны міндетті түрде қосыңыз.

6. 

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

7. 

   Бас (бас) және дене тегтерін қосыңыз. HTML құжаттары екі бөлікке бөлінеді. «Жоғарғы» бөлім парақтың тақырыбы сияқты арнайы ақпаратқа арналған. «Дене» бөлімі парақтың негізгі мазмұнын қамтиды. Осы екі бөлімді де құжатыңызға қосыңыз және соңғы тегтерді қосуды ұмытпаңыз. Жаңадан қосылған мәтін жуан:

8. 

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

4-тен 2-бөлім: Мәтінді пішімдеу

1. 

   Денеңізге мәтін қосыңыз. Бұл бөлім үшін біз тек дене тегтерімен жұмыс істейтін боламыз. Басқа мәтін сіздің құжатыңызда қалады, бірақ біз оны оқулықта қайталамай, орынды үнемдейміз. Карточкалар арасына қалағаныңды жаз және , және ол сіздің парағыңыздағы алғашқы мазмұн ретінде пайда болады. Мысалға:
   • HTML парағын жазу үшін wikiHow нұсқауларын орындадым.

2. 

   Мәтінге тақырыптар қосыңыз. Өз бетіңізді браузерге олардың арасындағы мәтінді үлкенірек қаріп өлшемінде көрсетуге нұсқайтын тақырыптық тегтермен ұйымдастырыңыз. Бұл тегтерді іздеу жүйелері мен басқа құралдар веб-сайтыңыздың не туралы екенін және оны қалай ұйымдастыратынын анықтау үшін пайдаланады.
   - бұл ең үлкен тақырып, және сіз кішірек тақырыптар жасай аласыз
   . Оларды өз парағыңызда пайдаланып көріңіз:
   • Менің парақшама қош келдіңіз.

   • HTML парағын жазу үшін wikiHow нұсқауларын орындадым.

   • Менің бүгінгі мақсатым:

   • Орындалған мақсаттар:

   • Тақырыптарды қалай қолдануға болатынын біліңіз.

   • Аяқталмаған мақсаттар:

   • Мәтінді форматтау тегтері туралы көбірек біліңіз.

3. 

   Мәтінді форматтау тегтері туралы көбірек біліңіз. Сіз «күшті» тегті бұрыннан көрдіңіз, бірақ мәтінді форматтаудың көптеген басқа жолдары бар. Бірдей мәтін жолына осы тегтерді немесе бірден бірнеше тегтермен көріңіз. Артқы жағына аяқтайтын тегтерді қосуды ұмытпаңыз!
   • Шолғышта қарамен көрсетілген маңызды мәтін.
   • Браузерде курсивпен көрсетілген ерекше мәтін.
   • Әдеттегіден сәл кішірек мәтіндік хабар жіберіңіз. Бұл мәтін тақырыпта қолданылса, оның өлшемі автоматты түрде өзгереді.
   • Мәтін енді маңызды емес, сызықша түрінде көрсетіледі.
   • Мәтін басқа құжаттарға қарағанда кешірек енгізіліп, асты сызылған.

4. 

   Өз парағыңыздағы мәтінді ұйымдастырыңыз. Сіз «енгізу» пернесін басу мәтіннің басқа жолда пайда болуы үшін жеткіліксіз екенін байқаған боларсыз. Бұл тегтер абзацтар мен үзінділер жасауға немесе мәтінді басқа жолдармен реттеуге көмектеседі:

   • «Абзац» деген қысқаша бұл тег осы мәтін арасындағы абзацтағы барлық мәтінді сақтап, оны жоғарыдағы және астындағы мәтіннен бөліп алады.

   • 
     Бұл тег жол үзілістерін жасайды. Оған соңғы тегті қоспаңыз, өйткені ол басқа мазмұнға кедергі келтірмейді. Бұл тегті абзацтарда емес, өлеңдерде немесе мекен-жай жолдарында қолданыңыз.

   • Егер сізге мәтінді өте дәл көрсету қажет болса, бұл тег оның ішіндегі мәтінді белгіленген ен шрифтіне қояды (әр әріптің ені бірдей) және интервал құруға мүмкіндік береді. Белгілердің орнына тұрақты редакциялауға арналған бос орындар мен жолдар.

   • Бұл тег дереккөзден алынған мәтін түрін анықтайды.

     Кейін дереккөзді сипаттауға болады сілтеме картасы.

5. 

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

6. 

   Оларды біріктіріңіз. Бұл тегтерді есте сақтаудың ең жақсы тәсілі - оларды веб-сайтта пайдалану. Мұнда сіз осы уақытқа дейін үйренген қадамдардағы карталарды қолданудың мысалы келтірілген. Олардың браузерде қалай пайда болатынын болжауға тырысыңыз, содан кейін оларды құжатыңызға көшіріп, біліп алыңыз.
   • Менің веб-сайтыма қош келдіңіз.

   • Сізге бұл парақ ұнайды деп үміттенемін!

     Мен оны тек сіз үшін жасадым.

   • 1 бөлім: HTML-ді қалай аштым

   • Мен HTML-ді бұрыннан біліп алдым бір екісағат, сондықтан мен қазір маманмын.
   жарнама

4-тен 3-бөлім: Сілтемелер мен кескіндерді қосу

1. 

   Атрибуттар туралы біліңіз. Тегтерде атрибуттар деп аталатын қосымша ақпарат болуы мүмкін. Бұл атрибуттар тегтер ішінде формада қосымша сөздермен ұсынылған меншік атауы = «нақты мән«. Мысалы, кез-келген HTML тегінде атрибут болуы мүмкін:

   • Кіріспе абзац осында.

     Параграфтың атауын веб-парақта апарған кезде пайда болатын «Кіріспе» деп атаңыз.

2. 

   Басқа веб-сайттарға сілтемелер. Карталарды пайдалану кез-келген басқа веб-параққа сілтеме жасау үшін. Href атрибутына сілтеме жасау үшін веб-парақтың URL мекенжайын енгізіңіз. Сіз оқып отырған веб-параққа сілтеме жасайтын мысал:
   • Сіздің веб-сайтыңызға кірушілер сілтемеге өту үшін осы мәтінді нұқуы мүмкін.

3. 

   Тегке id төлсипатын қосыңыз. Кез-келген HTML тегі қолдана алатын тағы бір атрибут - бұл «id» элементі. Кез-келген картаға жазыңыз id = «vidu» немесе бос орын жоқ кез келген атауды қолданыңыз. Бұл көрінетін әсер бермейді, бірақ біз оны келесі кезеңде қолданамыз.
   • Мысалы, құжатыңызға мынаны қосыңыз:

     Бұл абзац id атрибутының қалай жұмыс істейтінін сипаттауға мысал ретінде қолданылады.

4. 

   Белгілі бір идентификаторы бар элементке сілтеме. Енді біз еренсілтемені қолдана аламыз, , сол беттегі басқа орынға сілтеме жасау үшін. URL орнына біз # таңбасын, содан кейін сілтеме жасағымыз келетін id мәнін қолданамыз. Мысалға, Бұл мәтін «vidu» идентификаторымен мәтінге сілтеме жасайды.
   • Барлық HTML мәндері регистрді ескереді. «#VIDU» және «#vidu» екеуі бірдей орынға сілтеме жасайды.
   • Егер сіздің парағыңыз бүкіл парақты бірден көрсетуге жеткілікті қысқа болса, браузердегі сілтемені басқанда ештеңе болып жатқанын байқамай қалуыңыз мүмкін. Терезенің өлшемін айналдыру жолағы пайда болғанша өзгертіңіз де, қайталап көріңіз.

5. 

   Фотосуреттер қосыңыз. Карта бұл бос тег, яғни соңғы тег қажет емес дегенді білдіреді. Браузерге кескінді көрсету үшін қажет барлық ақпарат атрибуттар көмегімен қосылады. Мұнда wikiHow логотипін көрсетуге мысал келтірілген, оның артында әрбір атрибут сипаттамасы берілген:
   • 
   • Қасиеттері src = «» фотосуреттің қай жерде екенін шолушыға айтады. (Басқа біреудің сайтындағы фотосуретті орналастыру орынсыз деп саналатынын ескеріңіз - және парақ белсенді болмай қалған кезде фотосурет жоғалады).
   • Қасиеттері style = «» Ол көптеген нәрселерді жасай алады, бірақ ең бастысы кескіннің ені мен биіктігін пиксельмен белгілеу үшін қолданылады. (Оның орнына ені = «» және height = «» жеке атрибуттарын қолдануға болады, бірақ егер сіз CSS-ті қолдансаңыз, бұл өлшемді өзгерту проблемаларына әкелуі мүмкін.)
   • Қасиеттері alt = «» - бұл сурет жүктелмесе пайдаланушы көретін кескіннің қысқаша сипаттамасы. Бұл көзі көрмейтін веб-сайтқа келушілерге арналған экрандық оқырмандар үшін қолданылатындықтан, бұл талап болып саналады.
   жарнама

4-тен 4-бөлім: Сіздің веб-сайтыңызды қосу және алу туралы көбірек біліңіз

1. 

   HTML-ді растаңыз. HTML растауы сіздің кодыңыздағы қателіктерді тексереді. Егер сіздің сайтыңыз дұрыс көрсетілмесе, тексеру сізге ақаулықты тудыратын қатені табуға көмектеседі. Сондай-ақ, кодтың дисплейде жақсы көрінетіндігін анықтау арқылы HTML туралы көбірек білуге ​​болады, бірақ HTML стандартындағы жаңа жаңартуларға байланысты ол енді ұсынылмайды. Жарамсыз HTML-ді пайдалану сіздің сайтыңызды пайдасыз етпейді, бірақ әртүрлі браузерлерде қиындықтар туғызуы немесе тұрақсыз болуы мүмкін.
   • W3C ұсынатын ақысыз онлайн-растау қызметін пайдаланып көріңіз немесе басқа HTML 5 тексеру құралын Интернетте іздеңіз.

2. 

   Қосымша тегтер мен атрибуттарды біліңіз. HTML тегтері мен атрибуттарының көптеген нұсқалары бар және оларды білуге ​​болатын көптеген орындар бар:
   • Қосымша оқулықтар мен тегтердің толық тізімдерін алу үшін w3schools және HTML Dog қолданбаларын пайдаланып көріңіз.
   • Сыртқы көрінісіне ұнайтын веб-парақты табыңыз, содан кейін HTML-кодты өзіңіз көру үшін браузеріңіздің «Бет көзін қарау» функциясын қолданыңыз. Оны құжатыңызға көшіріңіз және оның қалай жұмыс істейтінін зерттеңіз.
   • Басқа мақалаларды оқып, HTML-де кесте құруды, мета тегтерді қолданып, іздеу жүйелерінде табылу мүмкіндігіңізді арттырыңыз немесе бөлімді қолданыңыз. CSS арқылы стильге көмектесу үшін параққа аумақ орнатыңыз) және аралықты (мәтін элементінің стилін көрсету үшін қолданылады).

3. 

   Веб-сайтыңызды онлайн режимінде алыңыз. Веб-сайтыңызды орналастыру үшін қызметті таңдаңыз, содан кейін жеке веб-доменге қанша HTML парағын жүктей аласыз. Ол үшін сізге FTP жүктеу бағдарламалық жасақтамасын пайдалану қажет болады, бірақ көптеген веб-жалға беру қызметтері де осы қызметті ұсынады.
   • Сіздің сайтыңыздағы парақтарға немесе суреттерге сілтеме жасау кезінде сайттың толық мекен-жайын пайдалануыңыз керек. Мысалы, егер сіздің домендік атыңыз www.chuyengiahtmlsieudang.com болса, онда мәтін осы тегтерде «www.chuyengiahtmlsieudang.com/nhatky/thuhai.html» сілтемесі болады

4. 

   CSS көмегімен стильдер қосыңыз. Егер сіздің HTML парағыңыз бірсарынды болып көрінсе, түстер, түрлі қаріптер қосу және элементтердің қайда орналастырылатындығын бақылау үшін CSS негіздерін үйреніп көріңіз. CSS-тің «стилі кестесін» HTML парағымен байланыстыру сізге жылдам мәтінді өзгертулер енгізуге мүмкіндік береді, барлық мәтін стилін берілген тег ішінде автоматты түрде реттейді. Сіз мұнда негізгі форматтау деңгейімен біраз ойнай аласыз немесе HTML Dog's CSS оқулығындағы егжей-тегжейлі оқулықтарға сүңгуге болады.

5. 

   Веб-сайтыңызға JavaScript қосыңыз. JavaScript - HTML парақтарыңызға көптеген функционалдылықтар енгізу үшін қолданылатын бағдарламалау тілі. JavaScript командалары басталу және аяқталу тегтерінің арасына енгізіледі , және интерактивті батырмаларды қосу, математикалық есептерді есептеу және т.б. W3c мысалдарынан көбірек біліңіз. жарнама

Кеңес

• Бұл оқулықта қолданылған типтің декларациясы (құжат түрі декларациясы қолданылған) «бос HTML 4.0.1 өтпелі» (HTML 4.0.1 қатаң емес), оңай формат. жаңадан қолдануға арналған. Пайдалану () браузерге оны қатаң HTML 5 форматында жинаудың баламасы, ол ұсынылған (аз қолданылатын болса да) стандартты стиль болып табылады.

Ескерту

• HTML-нің мақсаты - мазмұнды ғаламдық форматта ұстау. Ол сіздің веб-сайтыңыздың фондық түсі және элементтердің дәл орналасуы сияқты презентациясын бақылай алмайды. Мұны жасауға мүмкіндік беретін тегтер әлі де бар, бақыланатын және жүйелі веб-сайт жасау үшін CSS қолданған жөн.

Сізге не керек

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