Жаңадан бастаушыларға арналған жеке веб -сайт құру: 5 қадам

2024 Автор: John Day | [email protected]. Соңғы өзгертілген: 2024-01-30 10:24

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

Жабдықтар

• Macintosh немесе Windows компьютері (Linux дистрибутивтерін де қолдануға болады, бірақ мен оларды өткізіп жіберемін, себебі бұл жаңадан бастаушыға арналған кіріспе).
• Сіз мәтіндік редакторды таңдайсыз (Windows жүйесінде Блокнот, Mac жүйесінде TextEdit) немесе IDE таңдауыңыз. Өз тәжірибемде мен Visual Studio кодын өзім үшін жақсы жұмыс істейтінін таптым, сондықтан мен оны мына жерден тексеруді ұсынамын: https://code.visualstudio.com/ ол барлық ОЖ платформаларында жұмыс істейтінін айтпаған жөн.

1 -қадам: тегтер мен тарих

Мәтіндік редактор немесе IDE таңдау туралы шешім қабылдағаннан кейін, негіздерден бастайық.

Сенесіз бе, сенбеңіз, HTML немесе HyperText белгілеу тілі шамамен 30 жыл болды және жыл өткен сайын тілді жақсартуда. Енді сіз браузер экранға не қою керектігін қалай түсіндіреді деп сұрауыңыз мүмкін. Бұл бірнеше бөлікте орындалады:

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

Мұнда HTML негізгі тегтері бар:

• тақырып - браузерге беттің тақырыбы қандай екенін айту үшін қолданылады. Бұл веб -беттің қойындысына қараған кезде де байқалады.
• h1, h2, h3, h4 - олар әр түрлі тақырып өлшемдері үшін қолданылады, h1 ең үлкен және h4 ең кіші. Бұл туралы келесі бөлімде толығырақ тоқталамын.
• p - абзац, мәтіннің абзацтарын жазу үшін қолданылады. Қағаздағы параграфтар сияқты.
• br - үзіліс, ол мәтінге сәйкес үзіліс енгізеді.
• a - басылатын сілтеме сияқты басқа беттерге сілтеме жасау үшін қолданылады.
• img - суретті веб -бетке байланыстыру үшін қолданылады.
• ul, ol, li - реттелмеген тізімдер, реттелген тізімдер және тізім элементтері.
• - соңғы пайдаланушы көрмейтін кодқа кірістірілген түсініктеме беру үшін қолданылады.

Міне, кейбір CSS тегтері (визуалды):

• түс - белгілі бір элементке немесе веб -беттегі жиынға белгілі бір түс беру үшін қолданылады.
• font-size-беттегі қаріп өлшемін өзгерту үшін қолданылады.
• background-color-белгілі бір элементтің немесе бүкіл беттің өң түсін өзгерту үшін қолданылады.

Мен сізге кішкене парақшаны тіркедім, егер сіз өзіңізді жоғалтып алғандай сезінсеңіз, бірақ уайымдамаңыз, сіз тез арада оны жеңіп шығасыз! Сонымен қатар, www.w3schools.com - сіздің кез келген бағдарламалау сұрақтарыңыз үшін керемет ресурс. Олар, әрине, уақытты үнемдеді.

Негізінде браузердің файлды оқуы оңай. Ол сызық бойынша жүреді және функцияны функция бойынша өңдейді. Таңбалар сияқты тегті жариялау үшін қолданылады

сияқты тегті жабу үшін қолданылады

. Бұл өте маңызды, әйтпесе браузер тоқтай алмайды. Арасында

және

тегтер, онда сіз қалағаныңызды енгізесіз!

2 -қадам: редакторды орнату

Енді біз HTML веб -сайттың негізгі элементтері туралы біраз сөйлескен соң, еніп, өзіміз үшін сынап көрейік. Келесі қадам үшін мен веб -сайтты бағдарламалау үшін Visual Studio кодын қолданамын, бірақ егер сізге Notepad немесе TextEdit -ті пайдалану ыңғайлы болса, кодтың орналасуы бірдей болады.

Блокнот ішінде:

• Блокнот көмегімен бағдарлама бос файлмен іске қосылады, бұл оны іске қосуды жеңілдетеді. Бұл бізге VS кодын қолданумен салыстырғанда бірнеше қадамға секіруге мүмкіндік береді. Файлды дұрыс форматта сақтаудан бастайық.
• Файл> Сақтау түймешігін басыңыз
• Файлдың атауын енгізіңіз, содан кейін.html және Түр ретінде сақтау астында барлық файлдарды таңдаңыз. Сақтау түймесін басыңыз.

VS кодының ішінде:

• IDE -дің барлық мүмкіндіктерін пайдаланудың ең жақсы жолы - файлды құрудан бастау және IDE -ге оның қандай файл түрі екенін айту. Мұны келесі түрде жасауға болады:
• Файл> Жаңа файл түймешігін басыңыз
• Бос файл ашылады
• Содан кейін сіз файлды бос болса да сақтаудан бастағыңыз келеді, себебі бұл IDE -ге соңғы өнім қандай файл болатынын түсінуге мүмкіндік береді. Сақтау кезінде.html кеңейтімін файл атауының соңына енгізуді ұмытпаңыз. Сақтау түймесін басыңыз.

3 -қадам: сызбалар

Filename.html файлын сәтті сақтағаннан кейін, біздің веб -беттің негізін құрудан бастайық. HTML бетін құруды бастамас бұрын файлдың қандай негізгі бөліктерін жариялау керектігін жоғарыдан есте сақтаңыз. Кеңес: сайттың негізін бастаған кезде! DOCTYPE HTML тегі шолушыға оқылатын файлдың html файлы екенін айтады. Егер сізде бір файлда әр түрлі код түрлері болса және аудармашылар арасында ауысқыңыз келсе, бұл пайдалы болуы мүмкін. Бұл нұсқаулықтың ауқымы үшін біз бұл туралы көп айтпаймыз, бірақ егер сіз осы нұсқаулықтан кейін HTML -дің дамуы туралы көбірек білгіңіз келсе, оны жіберіңіз. Мен ең жақсы тәжірибе үшін! DOCTYPE HTML тегін файлдың жоғарғы жағына енгіземін. Ашуды және жабуды ұмытпаңыз.

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

Құжаттарды реттеу аяқталғаннан кейін, біз жарыстарға шығып, көңіл көтере аламыз!

4 -қадам: код; Код; Код;

Біз жаңадан құрылған файлға тақырып енгізуден бастай аламыз. Қалағаныңызды енгізіңіз. Есіңізде болсын, бұл браузер қойындысында пайда болады. Біздің сайтымызға айдар тағудан бастайық. Мұны қалай жасайтынымызды бұрынғыдан еске түсіріңіз. Мен h1/2/3/4 естідім бе? Бұл дұрыс!

Жалғастырмас бұрын, браузерде өзгерістердің қалай көрінетінін нақты уақытта көру үшін браузер терезесінде файлды ашу пайдалы деп ойлаймын. Сіз мұны файлды сақтау үшін Файл> Сақтау түймешігін басу арқылы жасай аласыз, HTML файлы сақталған қалтаға өтіңіз, мен үшін бұл жұмыс үстелі және файлды ашу үшін өзіңіз таңдаған шолғышты қолданыңыз және сіз оған қарайтын боларсыз?, сіздің веб -бетіңіз бар! Ескерту: Мен жеке компьютерде Safari -ді таңдаған браузер ретінде қолданамын, алайда веб -әзірлемеде Firefox тестілеудің алтын стандартты браузері болып табылады, себебі ол барлық дерлік веб -сценарийлермен жұмыс істейді.

Көріп отырғаныңыздай, тақырып қойындыда көрсетіледі, сонымен қатар біздің h1 тақырыбын көреді. Мен IDE -дің жанында файлдың шолғыш терезесі ашылғанын қалаймын, егер сіз IDE -ге өзгеріс енгізсеңіз және сақтасаңыз, өзгерістер шолғышта бірден болады.

HTML көмегімен жасай алатын әр түрлі нәрселермен тегтер қосып, ойнап көріңіз. Төменде көріп тұрғандай, мен Instructables.com сайтына бірнеше параграфтар, үзілістер, сыртқы гиперсілтемені, суретті қостым (оны сыртқы көзден немесе. HTML файлы сақталатын каталогта байланыстыруға болады), реттелмеген тізім, реттелген тізім және соңғы түсініктеме мысалы.

Егер сіз түс пен орналасу параметрлерін қосқыңыз келсе, файлдың басына стиль тегін енгізуге болады. Бұл HTML -ден CSS -ке ауысатын нүкте, бірақ көрнекі болу үшін мен бірнеше жолдарды енгіземін, осылайша сіз оның қалай жұмыс істейтінін көре аласыз. Негізінде CSS қалай жұмыс істейді, бұл HTML элементтеріне кодты енгізу үшін жақшалар арқылы функцияларды басқаруға мүмкіндік береді {}.

5 -қадам: Қорытынды ойлар

Және сізде бар; Сіз бірінші веб -бетті сәтті құрдыңыз! Бұл жаңадан бастаушыларға арналған нұсқаулық болғандықтан, мен сіздің HTML -мен алғашқы тәжірибеңізді қызықты өткізгім келеді. Менің тәжірибемнен үйренудің ең жақсы тәсілі - бұл суға түсу және қолмен жұмыс жасау, кодыңызбен не істей алатындығыңызды, сонымен қатар кодты қалай бұзуға болатынын білу. Бұл тұтастықты қалыптастырады және кодтың қалай және неге осылай жұмыс істейтінін жақсы түсінуге көмектеседі. Есіңізде болсын, www. W3Schools.com - бұл сұрақтарға арналған тамаша ресурс және олар сіздің кодты сынау үшін браузерде виртуалды құм жәшігін ұсынады. Сіз бірдеңе білдіңіз деп үміттенеміз және бақытты кодтау!