Мазмұны:
- 1 -қадам: Блокнотты пайдалану
- 2 -қадам: HTML құжатының негізгі ағашын қосу
- 3 -қадам:.html беті ретінде сақтау
- 4 -қадам: Веб -бетке тақырып қосу
- 5 -қадам: Веб -бетке мазмұн қосу
- Менің веб -парақшама қош келдіңіз
- 6 -қадам: Өзгерістерді осы уақытқа дейін қарау
- 7 -қадам: Абзацты қосу
- Менің веб -парақшама қош келдіңіз
- 8 -қадам: оған түс беріңіз
- Менің веб -парақшама қош келдіңіз
- 9 -қадам: сурет қосу
- Менің веб -парақшама қош келдіңіз
- 10 -қадам: Соңғы өнімді қарау
Бейне: Жалаңаш сүйектердің веб -беті: 10 қадам
2024 Автор: John Day | [email protected]. Соңғы өзгертілген: 2024-01-30 10:26
Бүгін біз нөлден бастап қарапайым, жалаңаш сүйектердің веб -бетін құрамыз. Біз HTML элементтері, веб -бетті сәндеу (түстер, қаріптер, туралау және т.б.), ақырында веб -бетке суретті қалай енгізу керектігі туралы сөйлесетін боламыз!
Нұсқаудың соңында сізде веб -бетті нөлден бастап жасаудың негізгі дағдылары болады және кодтау қиын емес екенін білесіз!
1 -қадам: Блокнотты пайдалану
Біз бірінші веб -бетті жасау үшін терезеде Блокнотты қолданамыз. Кез келген мәтіндік редактор жасай алатынына қарамастан, блокнот Windows машиналарында алдын ала орнатылған, сондықтан бұл тамаша бастама.
Блокнотты ашу үшін экранның төменгі сол жақ бұрышындағы іздеу жолағына өтіп, «Блокнот» теріңіз. Содан кейін іздеу нәтижелерінде пайда болатын «Блокнот» қосымшасын таңдаңыз. Жаңа терезе ашылуы керек.
2 -қадам: HTML құжатының негізгі ағашын қосу
Веб -браузер (Chrome, Firefox, Edge, Internet Explorer, Safari …) сіздің веб -бетті өңдеп, көрсетуі үшін барлық веб -беттер стандартты қаңқа құрылымына сәйкес келуі керек.
Бұл html құжат ағашы деп аталады. Блокнотта скриншотта көрсетілгендей html «элементтерін» немесе «тегтерін» теріңіз. Сондай -ақ, көшіріп, қойыңыз:
3 -қадам:.html беті ретінде сақтау
Енді бізде блокнотта html -дің негізгі құрылымы бар, біз оны жоғалтпау үшін және нұсқаулық бойынша жүріп келе жатқан өзгерістерімізді көру үшін сақтайық.
- 'Файл'> 'Басқаша сақтау…' таңдаңыз (Скриншот 1)
- Файл түрін «Барлық файлдар» етіп өзгертіңіз (Скриншот 2)
- Файлға өзіңіз қалаған атау беріңіз. Құжатты компьютерде қайда сақтайтындығыңызды ұмытпаңыз, сонда оны кейінірек ашасыз. ЕСКЕРТПЕ: Бұл файлды сақтаудың ең маңызды бөлігі - файл атауының соңына «.html» қосу. Бұл сіздің компьютеріңізге оны веб -бет ретінде тануға мүмкіндік береді. Егер сіз файлға «my_webpage» атауын бергіңіз келсе, оның соңына.html қосқаныңызға көз жеткізіңіз, мысалы. «my_webpage.html»
4 -қадам: Веб -бетке тақырып қосу
Сонымен, бізде веб -браузерлер біздің веб -бетті түсіндіруге және көрсетуге қажет негізгі html құрылымы бар, бірақ бізде ешқандай мазмұн жоқ. Мұны өзгертейік!
Біріншіден, біздің веб -бетке Тақырып беру керек. Барлық веб -беттердің көпшілігінің атауы бар. Бұл веб -шолғыштағы қойындыда көрсетіледі (скриншотты қараңыз). Мен веб -парақшама «Тейлордың сайты» деген тақырып беремін. Ол үшін бізге 'title' элементін қосу керек.
Тейлор веб -сайты
Осы кезде сіз әр тегтің «ашылатын» және «жабылатын» тегтері бар екенін байқайсыз. Сияқты
және.
Бұл тақырыптың қай жерден басталатынын және қай жерде аяқталатынын анықтау. Барлық дерлік html тегтері осыған сәйкес келеді, бірақ кейбір ерекшеліктер бар.
5 -қадам: Веб -бетке мазмұн қосу
Біздің веб -беттің атауы бар, бірақ бізде әлі де нақты мазмұн жоқ. Біраз талант қосайық!
Біз веб -бетке 'title' элементін пайдаланып тақырып қостық. Веб -бетке тақырып элементі болып табылатын 'h1' элементін қолдана отырып, назар аударатын үлкен тақырып берейік.
Тейлор веб -сайты
Менің веб -парақшама қош келдіңіз
6 -қадам: Өзгерістерді осы уақытқа дейін қарау
Бізде тақырып бар, бізде мазмұн бар, біздің веб -бетті осы уақытқа дейін қалай келе жатқанын тексерейік.
- Файлды блокнотқа сақтаңыз
- Файлды сақтаған жерге өтіңіз және оны екі рет нұқыңыз. Ол әдепкі веб -шолғышта автоматты түрде ашылуы керек. Жақсы көріну!
7 -қадам: Абзацты қосу
Бізде тақырып, айдар бар, енді бірнеше мәтіні бар абзац қосайық. Абзацтың элемент атауы 'p'. Сіз оны төменде көре аласыз:
Тейлор веб -сайты
Менің веб -парақшама қош келдіңіз
Бүгін біз өте қарапайым веб -бетті жасауды үйренеміз!
Ескерту: Өзгертулерді блокнотты сақтау және файлды ашу арқылы кез келген уақытта көруге болады.
8 -қадам: оған түс беріңіз
Бізде веб -парақ бар, бірақ бұл өте қарапайым. Параграф белгісіне түс берейік!
Біз төменде егжей -тегжейлі көрсетілгендей 'p' тегіне 'style' атрибутын қосу арқылы түрлі элементтерді бояй аламыз:
Тейлор веб -сайты
Менің веб -парақшама қош келдіңіз
Бүгін біз өте қарапайым веб -бетті жасауды үйренеміз!
9 -қадам: сурет қосу
Суреті жоқ сайт дегеніміз не? Біздің сайтқа сурет қосайық!
Бірінші қадам - сізге ұнайтын суретті табу. Мен алтын кескінді іздеу үшін Google суреттерін қолдандым. Кескінді жоғары тартыңыз және url.jpg,.png,.gif,-j.webp
Сіз өзіңіздің суретіңізді таңдағаннан кейін оны html бетіне 'img' тегінің көмегімен қосуымыз керек. Менің суретім:
Оны 'src' төлсипаты бар 'img' тегінің көмегімен өз бетіңізге қосыңыз:
Тейлор веб -сайты
Менің веб -парақшама қош келдіңіз
Бүгін біз өте қарапайым веб -бетті жасауды үйренеміз!
10 -қадам: Соңғы өнімді қарау
Блокнот файлын сақтап, соңғы өнімді ашыңыз. Сіз өзіңіздің веб -парағыңызды көруіңіз керек!
Ұсынылған:
Сыйымдылықты енгізу мен жарықдиодты қолданатын ойын бағдарламалық жасақтамасы бар жалаңаш Arduino: 4 қадам
Сыйымдылықты енгізу мен жарықдиодты қолданатын ойын бағдарламалық жасақтамасы бар Жалаңаш Ардуиноны тексеріңіз: " Итеру " Жалаңаш Arduino тақтасы бар интерактивті ойын, сыртқы бөлшектер мен сымдар қажет емес (сыйымдылықты «сенсорлық» кірісті қолданады). Жоғарыда көрсетілген, бұл екі түрлі тақтада жұмыс істейтінін көрсетеді. Басу-Оның екі мақсаты бар. /V жылдам көрсету үшін
Жалаңаш минимум - Breadboard -дағы Arduino: 5 қадам
Жалаңаш минимум - Breadboard -дағы Arduino: Arduino ATMega328p чипін пайдаланады. Біз мұны SMD форматында (ATMega328p-AU) немесе тесіктерді дәнекерлеуге арналған DIP форматында (ATMega328p-PU) ала аламыз. Бірақ чип өздігінен жұмыс істей алмайды. Оған тағы бірнеше компоненттер қажет және олардың барлығы жалаңаш деп аталады
Жалаңаш металл диодтары бар Raspberry Pi басу түймесі: 8 қадам
Жалаңаш жарық диодтары бар Raspberry Pi басу түймесі: Бұл менің таңқурай pi 3 жалаң металды бағдарламалау бойынша екінші оқулық! Менің бірінші нұсқамды мына жерден қараңыз. Өткенде мен сізге бір светодиодты жыпылықтаған таңқурай pi 3 үшін операциялық жүйенің кескінін қалай жасау керектігін көрсеткен едім, бұл оқулықта мен сізге
Жалаңаш минималды Raspberry Pi торрент машинасының оқулығы: 4 қадам (суреттермен)
Жалаңаш минималды Raspberry Pi торрент машинасының оқулығы: Хай адамдар. Торрентинг - бұл әрқашан өмірді құтқарушы және Raspberry Pi басы қосылмаған жағдайда сізге керемет болады деп үміттенемін. Оқу құралының көмегімен мен барлығына басы жоқ жүретін Pi көмегімен торрент машинасын құруға көмектесемін, ал сен біздің Андроны қолдана аласың
Жалаңаш металл таңқурай Pi 3: жыпылықтайтын жарық диоды: 8 қадам
Жалаңаш металл таңқурай Pi 3: жыпылықтайтын жарық диоды: BARE METAL pi 3 жыпылықтайтын жарық диодты оқулыққа қош келдіңіз! Бұл оқулықта біз Raspberry PI 3, нан тақтасы мен резистор, светодиод және бос SD картасы. BARE METAL дегеніміз не? БАРЕ