Кодтаудағы алғашқы қадамдар. Немесе HTML үйренуді қайдан бастау керек

Оқулықтың алғашқы беттері:

Манекендерге арналған Html оқулығы. Құралдар.

Тапсырыс бірінші кезекте, сондықтан жұмысты бастамас бұрын біз болашақ бет үшін компьютерде бөлек қалта жасаймыз.

D:\алғашқы қадамдар\

Мен өз компьютерімде D дискісінде осындай қалтаны жасап, оны Бірінші қадамдар деп атадым. Әрине, қалтаны кез келген жерде жасап, оны қалағаныңызша атай аласыз. Енді блокнот - блокнотты ашыңыз (бастау - бағдарламалар - керек-жарақтар - блокнот немесе бастау - бағдарламалар - стандартты - блокнот) және сол жерге келесі мәтінді көшіріңіз:

Сәлем, бұл менің бірінші парақшам.

Қош келдіңіз! :)

()

Бұл құжатқа *.html атын беру арқылы сақтайық

D:\алғашқы қадамдар\index.html

Көптеген оқырмандар мына фразадан сүрінді: « Ал енді осы құжатқа *.html атын беріп сақтайық", олар сақтай алғандары туралы хаттарды *.txt мәтіндік құжаты ретінде ғана жазады, бірақ *.html ретінде емес. Болашақта бұл ақымақ түсінбеушілік болмас үшін мен бұл жазбаны жазып отырмын.

8-қадам.

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

Алдымен курсив пен жартылай әріптерді қарастырайық нобай:

Қалың мәтін
Көлбеу мәтін (курсив)

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

Енді мосиринді шрифт туралы бірнеше жол. Бұл қандай шрифт? Бұл жазу машинкасының шрифті сияқты бекітілген ені бірдей таңбалары бар шрифт. Ал оның белгісі:

монокеңістік шрифті

Біздің мысалда мен оны енгізбеймін (оны өзіңіз жасаңыз).

Сондай-ақ, тегке салынған мәтін бір кеңістікті қаріппен көрсетіледі.

мәтін (көп бос орындар) мәтіндік мәтін (көп бос орындар) мәтіндік мәтін (көп бос орындар) мәтін

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

 мәтін

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

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

 сызылған 

сызылған 
Тег үлкен әріппен көрсетіледі және негізгі мәтінге қатысты шағын шрифтпен:

 Кішкентай
қалыпты мәтін 

Үлкен 
Sup және Sub тегтері жоғарғы және төменгі таңбаны анықтайды.  Sup - жоғарғы, Sub - төменгі.  Олар қай жерде пайдалы болуы мүмкін?  Мысалы, қандай да бір формуланы жазғанда - H 2 O (біз мектептен шығаратынның бәрі :).
Жоғарғы сызба суп
жазылу суб 

/ Html оқу құралы.  13-қадам.



Манекендерге арналған Html оқулығы.  Қарапайымдылар.
13-қадам.
Шұжық әуесқойымен қызықты және тәрбиелік сабақ аяқталды, біз келесі сабаққа көшеміз, онда біз сілтемелер туралы сөйлесеміз.
Біздің парақшамыз бірнеше құжаттан тұруы мүмкін.  Олардың бірі негізгі (index.html) - ол бірінші ашылады және Интернетте сіздің сайтыңызда болуы керек.  Қалған құжаттарға өзіңізге ұнайтын атаулар беруге болады (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html).  Олардың барлығы бір каталогта (қалтада) болуы мүмкін немесе олар әртүрлі болуы мүмкін.
Біз бұл құжаттарды байланыстыру үшін сілтемелерді пайдаланамыз.  Сонымен, негізгі беттен сілтемелер арқылы фотосуреттері бар бетке өте аламыз, осы беттен біз қайта ораламыз басты бет, немесе, айталық, өлеңдеріміз жазылған бетке т.б.
Бастау үшін, жасайық жаңа құжат(біздің мысалда prf.html) негізгі index.html құжатымыз орналасқан сол каталогта (қалтада).  Құжаттың мазмұнын өзіңіз ойлап табыңыз, бұл үшін сізде жеткілікті білім бар.
Фотосуреттеріңіз бар құжат prf.html болсын.  Сонда біз «фотосуреттерімді көру» деген тіркесті prf.html сілтемесін сана-сезімсіз жасай аламыз:
менің фотоларымды қараңыз
(1) - менің суреттерім 
(2) - менің суреттерім 
(3) - менің суреттерім
(1) жағдайда құжат біз prf.html сілтеме жасайтын құжатпен бір каталогта (қалтада) болса, (2) жағдайда құжат /photos ішкі каталогында болса, (3) жағдайда біз сілтеме жасаймыз. http сайты ://www.homepage.ru, бізге қажетті құжат қайда орналасқан.
Алғашқы екі мысал (1) және (2) шақырылады салыстырмалы жолдар.  (3) – абсолютті, яғни.  сайт атауын қоса алғанда, толық көрсетілген (біздің жағдайда – http://www.homepage.ru/).  Біз басқа адамдардың беттеріне сілтеме жасағанда абсолютті жолды қолданамыз, сайтымыздағы құжаттарға сілтеме жасағанда салыстырмалы жолды қолданамыз.
Біздің құжаттағы барлық сілтемелер үшін түстерді белгілей аламыз: сілтеме - жай сілтеменің түсі, alink - түс белсенді сілтеме(басылған), vlink - бұрыннан барған сілтеменің түсі.

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







 






 text="#336699" bgcolor="#000000" сілтеме="#339999" alink="#339999" vlink="#339999">

 

Сәлем, бұл менің бірінші парақшам.



Қош келдіңіз! :)


Мен жақында виртуалды өмірмен таныса бастадым, бірақ бұрыннан келе жатқан дәстүр бойынша мен де жаңа виртуалды достарым мен таныстарым үшін жеке басты бетімді жасағым келді, сонда олар
менің фотоларымды қараңыз

, мен туралы оқы, менің қонақтар кітабыма бір-екі жол жаз.


Немесе жай ғана кездейсоқ келуші кенеттен менімен танысқысы келетін шығар, мен оны білгім келедібасқа виртуалды дос?  :) 

 Фото мені көрсетеді.  Суреттің сапасы, өкінішке орай, өте жақсы емес, сондықтан анық емес және менің бетімнің ерекшеліктерін көру қиын.  Бірақ тұтастай алғанда, менің жақсы екенімді байқауға болады :)

Сіз де солай ойласаңыз, бір кезде кездесейік, сөйлесейік, кафеде шәй ішейік? :) Кім біледі, мүмкін біз шын өмірдос болайық :)




 ()


Көріп отырғаныңыздай, күрделі ештеңе жоқ.
Естеріңізде болса, біз құжаттағы мәтіннің әртүрлі блоктары үшін әртүрлі түстерді орната аламыз ( ).  Мәтіндік сілтемелер үшін басқа түсті орнатуға болады - бұл тег арқылы жасалады және оның түс атрибуты:

 менің фотоларымды қараңыз
Назар аударыңыз, - тегтің ішінде жазылады, егер сіз басқаша жазсаңыз, онда сіз құжаттағы басқа сілтемелердің түсінен басқа түске сілтемені орната алмайсыз.
Енді келесі қадамға өтіп, танысуымызды сілтемелермен жалғастырайық.

Манекендерге арналған HTML оқулығы.  Авторы - Алленова Наталья
 
 Автордан:

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



 
Қарапайымдылар.
4 - "Өзіңіз бояңыз. Мәтіннің түсін өзгертіңіз." 
5 - "Беттің өң түсін өзгерту жолы. Түстер этикасы туралы аздап". 
6 – «Параграфтар және DIV. Мәтінді туралауды үйрену». 
7 - «Тақырыптар дегеніміз не және әріптердің өлшемін қалай орнатуға болады». 
8 – «Көлбеу, қою мәтін, асты сызылған және т.б.». 
9 - "Стандартты қаріптер. Қаріпті қалай тағайындауға болады." 
10 - «Жол дегеніміз не? Суреттерді қалай кірістіруге болады». 
11 - "Суретпен не істеуге болады. Сурет құжаттың фоны ретінде және т.б.". 
12 - «Шұжықтарды жақсы көретін және сурет айналасындағы мәтін ағынының мәжбүрлі үзілуі туралы». 
13 - «Сілтеме және онымен қалай күресуге болады». 
14 - "Электрондық поштаға сілтеме. Мәтіндік сілтеме". 
15 - «Сурет сілтеме бола ала ма?». 
16 - "Қайда бару керек, неге сілтеме жасау керек. Сілтемені басқан кезде жаңа терезе." 
17 - "Карталар. Суреттің сілтеме бөлігін қалай жасауға болады." 
18 - «Карточкалар. Суреттің бір бөлігі ретінде 2 сілтеме жасаңыз». 
19 - «Карточкалар. Суреттің бір бөлігін сілтеме 3 қалай жасауға болады». 
20 - "Бетбелгі. Құжат ішінде сілтемені қалай жасауға болады."
Кестелер.
21 – «Кестелер құруды үйрену». 
22 – «Кестелер құруды үйрену» жалғасын тапты. 
23 - «Кестелер, тік туралау (valign)». 
24 - «Кестелер, ұяшықтарды созуды үйрену (қатар аралығы, колспан)». 
24-2 - "Қосымша тарау. Үй тапсырмасына жауаптар". 
25 - "Кестелер, ұяшықтар аралығы және ұяшық толтыру дегеніміз не. Кеңістікпен не істеу керек." 
26 - «Кірістірілген кестелер және кейбір нюанстар». 
27 - «Кестелер шеңбері туралы және соңында кестелер туралы күңкілдеу». 
28 - «Кестелермен қарапайым сайт құру».
Қосымша.
29 - «Ерекше кейіпкерлер немесе бас ауруы». 
30 - "Сызықтар туралы. Қарапайым және пайдалы." 
31 - «Құжаттың шегіністерін (шеттерін), үстіңгі жиегін, сол жақ шеттерін, жиектерінің енін, биіктігін қалай жоюға болады». 
32 - "Тізімдер туралы. Реттелмеген тізімдер". 
33 - "Тәртіптік тізімдер. Ескерту: спецификация және консорциум дегеніміз не". 
34 - «Арнайы тегтер, іске қосылған мәтін жолы».
Жақтаулар.
35 - "Кіріспе. Олар (кадрлар) не үшін қажет". 
36 - «Жақтауларды құруды үйрену». 
37 – «Жақтауларды құруды үйрену» жалғасын тапты. 
38 – «Жақтауларды құруды үйрену» жалғасын тапты. 
39 - «Айналдыру жолағын алып тастаңыз, кадрлардан құтылыңыз, жақтау өрістерінің енін реттеңіз». 
40 - "Сілтемені басқан кезде құжат басқа жақтауда, толық терезеде ашылады." 
41 - "Фреймдер туралы соңғы тарау. IFrame дегеніміз не".
/ Html оқу құралы.  8-қадам.



Манекендерге арналған Html оқулығы.  Қарапайымдылар.
 8-қадам. 
Енді біз қаріп өлшемін орнатуды үйрендік, енді қаріп стилін қалай анықтау керектігі туралы сөйлесетін кез келді.  Бұл тарауда біз мәтінді курсивпен жазуды, астын сызуды, сызуды, қоюды, мәтінді монокеңістікке орнатуды, үстіңгі таңбаны және сызуды қалай қою керектігін үйренеміз - бұл тегтердің барлығы әдетте бірге қарастырылады және біз дәстүрден ауытқымаймыз.
Алдымен курсив және қою қаріппен жазылған мәтінді қарастырайық:

 Қалың мәтін


 Көлбеу мәтін (курсив)
Көріп отырғаныңыздай, бәрі қарапайым.  Сіз оларды тестілеу үшін мәтінде өзіңіз қалаған жеріңізге сала аласыз және мысалда мен виртуалды досымды тағы да қинаймын:
 


 


 


 

 












Сәлем, бұл менің бірінші парақшам.



Қош келдіңіз! :)


Мен жақында виртуалды өмірмен таныса бастадым, бірақ бұрыннан келе жатқан дәстүр бойынша мен де жаңа виртуалды достарым мен таныстарыма фотоларымды көре алатын, мен туралы оқи алатын, бір-екі жолды тастай алатындай жеке басты бетімді жасағым келді. менің қонақтар кітабымда.  Немесе жай ғана кездейсоқ келуші кенеттен менімен танысқысы келетін шығар, мен оны білгім келедібасқа виртуалды дос?  :)


 


 

 ()


Енді мосиринді шрифт туралы бірнеше жол.  Бұл қандай шрифт?  Бұл жазу машинкасының шрифті сияқты бекітілген ені бірдей таңбалары бар шрифт.  Ал оның белгісі:

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

 мәтін

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

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

 сызылған 

сызылған 
Тег үлкен әріппен көрсетіледі және негізгі мәтінге қатысты шағын шрифтпен:

 Кішкентай
қалыпты мәтін 

Үлкен 
Sup және Sub тегтері жоғарғы және төменгі таңбаны анықтайды.  Sup - жоғарғы, Sub - төменгі.  Олар қай жерде пайдалы болуы мүмкін?  Мысалы, қандай да бір формуланы жазғанда - H 2 O (біз мектептен шығаратынның бәрі :).
Жоғарғы сызба суп
жазылу суб 
Бұл, шын мәнінде, бәрі.  Біз келесі қадамға өте аламыз.

Автордан:бәрі бір кезде басталады.  Сонымен, сіз веб-сайт құру ғылымын меңгеруді шештіңіз.  -ден бастау керек html тілі.  Онда алғашқы қадамдарды сенімді түрде жасау өте маңызды, әйтпесе сіз сүрініп, оқуды жалғастыра алмайсыз.  Бүгін мен сізге тілді қалай оңай және мүмкіндігінше тиімді үйренуге болатынын айтамын.
 
Әр адам үшін әрқашан бірінші рет болады.  Кішкентай бала бір күні өзінің алғашқы қадамдарын жасауы керек болғандықтан, сіз, веб-сайт құруды шешкен адам, бұл әлемге алғаш рет сүңгуіңіз керек.  Дайындауды мүмкіндігінше жағымды ету үшін мен ең қарапайым және түсінікті жолды ұстануды ұсынамын.
 
Мен қалай бастадым және осыдан нені түсіну керек
 
Мен сізге html тілін қалай үйренгенім туралы айтуды өте пайдалы және қажет деп санаймын.  Біріншіден, html тілін үйрену ғарыш кемесін құрастыру деп ойламауыңыз үшін бірден көңіліңізді көтергім келеді.  Жоқ, бәрі әлдеқайда оңай.  Оның үстіне бұл тілді меңгеру үшін ешқандай негізгі білім қажет емес.  Сіз тақырыпта мүлдем нөл бола аласыз, тіпті айқын нәрселерді түсінбейсіз.
 
Сонымен, үйренудің бірінші қадамы - бұл оңай екенін түсіну.  Html шынымен керемет қарапайым.  Негізінде, сізге тек бірнеше нәрсені анықтау керек:
 
Сайт жасау процесі қалай жүреді және ол жерде html не үшін қажет?
 
Құжаттың құрылымы қандай, ол қандай бөліктерге бөлінеді
 
Тегтер мен атрибуттар дегеніміз не, олар дегеніміз не және оларды қалай пайдалану керек
 
Қалғанының бәрі сіздің біліміңізді жылтыратып жатыр.  Бұл 14 күн компьютерде отырып, теорияны зерттеп, содан кейін ғана бір нәрсені түсініп, тәжірибе жасай бастайтын технология емес.  Бірінші тәжірибені, шын мәнінде, оқудың бірінші сағатында бастауға болады.
 
Сонда мен бұл тілді қалай үйрендім?  Мен Яндекс пен Google қызметтерін қолдандым, онда мен тиісті ақпаратты жинадым (html оқу сияқты).  Менің көзім бірден 1 сайтқа түсті, онда күрделілігі бойынша html бойынша 15 сабақ болды.  Мен 48 парақтық дәптерді сатып алған сияқтымын, батылдығымды жинап, дәптерге әр әріпті дерлік жазып, жаңа ғана оқыған белгілерді күніне 300 рет қолдана отырып, оқуға кірістім.
 
Бұл оқиға өте қызықты болды.  Шын мәнінде, бұл оқу тәсілінің бір проблемасы бар:
  
Дегенмен, бейнежазбалар аздап жетіспеді.  Бейнедегі тірі адам мәтінде не жазылғанын тағы бір рет түсіндіріп берсе, жақсы болар еді.
 
Осылайша 1 айдың ішінде тіл үйрендім.  Толық емес, әрине.  Мен сізге айтамын, оны зерттеудің қажеті жоқ.  Мысалы, қазір маған сұраңыз, dfn немесе bdi тегі нені білдіреді?  Мен нұсқаулықты қарастырамын.  Бірақ бұл маған html-де сайттарды оңай жасауға кедергі келтірмейді, өйткені ондағы тегтер мен атрибуттардың 70-80% өте сирек пайдаланылады және стандартты жағдайларда іс жүзінде қажет емес.
 
Html тілін жоғары деңгейде үйренудің ең жылдам жолы – қадамдық жоспар
 
Шынымды айтсам, менің басымда бар болғаны 1 айдың ішінде тілді қалай тамаша үйренуге болатыны туралы тамаша жоспарды көріп тұрмын, егер сіз қатты тырыссаңыз, одан да аз.  Бір кездері мен көбірек уақыт өткіздім.
 
Үлкен мәселетегін ақпаратты пайдалана отырып оқу – көбінесе оның көмегімен барлық өзекті трюктар мен амалдар ашылмайды.  Тиісінше, қосымша  Ақпаратты басқа көздерден іздеу керек.  Бірақ адамдар жалқау және оны жиі таппайды, сондықтан олардың білімі толық емес болып қалады.
 
Бақытымызға орай, енді ештеңе іздеудің қажеті жоқ, мен сізге ең көп ұсына аламын жылдам жолнәтижеге кепілдік беретін тілді үйрену.  Барлық сабақтар біздің веб-сайтта қолжетімді.
 
Бірінші қадамнан өткеннен кейін сіз сайттың қалай жасалғаны туралы жалпы түсінікке ие боласыз.  Келесі қадамды өткеннен кейін сіз html-дің негізгі теориясын оңай түсініп, тіпті оларға кестелерді, суреттерді, пішіндерді және т.б. орналастыру арқылы қарапайым веб-беттерді жасай аласыз.
 
Келесі қадам - ​​толық тәжірибе.  Атап айтқанда, сіз веб-сайт жасап жатырсыз.  Өте қарапайым, өйткені бұл бірінші рет сізге қажет нәрсе.  Бұл кезеңде ең маңыздысы – алған білімдерін қолдана білу.  Өйткені қолданбай білімнің құны жоқ.  Достарыңызға мақтану үшін html тілін үйренгіңіз келмейді, солай ма?  Бұл үшін емес деп үміттенеміз.  Мақсаты html ретінде пайдалануды үйрену базалық тілвеб-сайттарды жасау кезінде.
 
Келесі және соңғы қадам - ​​html5 әкелген жаңа тегтер мен мүмкіндіктер туралы ең өзекті ақпаратты зерттеу, css3 жаңа мүмкіндіктерін зерттеу.  Курстың өзінде сіз сайтты құруда күшті серпіліс жасайсыз: сіз үш сайтты орналастырып жатырсыз, олардың әрқайсысы алдыңғысынан қиынырақ.  Иә, тіпті 4, өйткені сізге бонус ретінде тағы бірнеше сабақ бар.
 
Сіз жасаған соңғы сайт интернет-дүкен болады.  Сіз мұндай жаттығулардың күшін сезінесіз бе?  Енді сіз толық 0-сіз (мүмкін сіз тегтің не екенін білмейсіз де) және 1 айдан кейін сізде кәсіби интернет-дүкен үлгісі болады.  Қандай мысал келтірерімді де білмеймін.  Төрт доңғалақты велосипед мініп, бірден BMW-ге көшіп кеткендейсің.
 
Нәтиже
 
Жалпы, мен тіл үйренудің ең жақсы жолын ұсындым.  Әрине, ол сізден инвестиция талап етеді.  Ақша инвестициясы және уақыт пен күш инвестициясы ретінде.  Бірақ бұл шын мәнінде бастаушыдан кәсіпқойға дейінгі ең қысқа жол.
 
Мүмкін мен асыра айтып отырған шығармын, сізді алдағым келмейді, өйткені сіз бір айда кәсіпқой болмайсыз, бірақ бір адам сайттарды айлап, жылдар бойы аралап, тегін ақпарат жинап жүрсе, сіз тиімдірек жұмыс істеп, бара аласыз. оқу жолы арқылы 15-20 есе өнімді.