Бұл мақалада сіз HTML тілін бірінші веб-сайтыңызды жазу үшін қалай пайдалану керектігін үйренесіз! Мақалада жақсырақ түсіну үшін көрнекі мысалдар беріледі. Мақала бастапқыда HTML тілін енді ғана үйрене бастағандарға арналған екенін бірден ескертейік. Бұған қоса, біз осы мақаланы оқығаннан кейін бірінші веб-сайтыңызды жасауға кепілдік береміз.
HTML HyperText Markup Language дегенді білдіреді, яғни мәтінді ұйымдастыруға арналған тіл.
Веб-сайттарда әрекеттерді орындау үшін сценарийлерді пайдаланатын бағдарламалау тілдерінен (JavaScript, PHP, т.б.) айырмашылығы, реттілік тілі (HTML) веб-сайт мазмұнын белгілеу үшін тегтерді пайдаланады.
HTML тілін нөлден бастайық
Ағылшын тілі A, B, C және т.,,
т.б. HTML тілінің бұл ерекше «әріптерін» веб-шеберлер тегтер деп атайды.
Төменде HTML тегінің мысалы берілген.
Тегтер Осы мәтіннің шеттерінің астын сызу.
CSS тіл стильдерімен жұптастырылған HTML тегтері веб-сайттарды жылдам және тиімді жасауға мүмкіндік береді.
HTML тілінің басқа тілдер арасындағы орны
Өздеріңіз білетіндей, жақсы веб-сайткемінде 5 тілде құрастырылған.
Заманауи веб-сайт келесі тілдерде жасалған:
- HTML (құрылым және реттілік).
- CSS (стиль мазмұны).
- JavaScript (шолғыш әрекеттері).
- PHP (сервер әрекеті).
- SQL (деректерді сақтау).
HTML - басқалар негізделген негізгі іргелі тіл. Сондықтан HTML тілін үйрену интернетте веб-сайттар құруды үйренетін кез келген адам үшін бірінші қадам болуы керек.
Тег
HTML тілі құрылғаннан бері жылдар бойы өзгерді. Қазіргі уақытта интернет-сайттардың көпшілігі тілдің соңғы нұсқасы – HTML5 нұсқасына көшуде. Бірақ HTML5-те де тілдің негіздері өзгеріссіз қалады.
HTML бетінің құрылымы сэндвичке ұқсайды. Сэндвичте екі тілім нан болатыны сияқты, HTML құжатында ашу және жабу HTML тегі болады.
Бұл тегтер сэндвичтегі нан сияқты ішіндегінің барлығын қоршап алады.
Тег
HTML тілін үйренуді жалғастыра отырып, тегпен міндетті түрде таныс болуыңыз керек. Тікелей басты тег ішінде сайттың барлық мазмұны, соның ішінде тег болады. Бұл тег қажет және ол жазылған сайт бетінің барлық параметрлерін қамтиды. Бұл параметрлер сайтқа кірушілерге көрінбейді, оларды тек браузерлер (Google Chrome, Mozilla Firefox, т.б.) көреді.
Веб-бет параметрлері блогында браузерге сайтыңызды интернетте дұрыс көрсетуге көмектесетін барлық "көрсетілмеген" элементтер бар.
Барлық опциялартегтің ішінде конфигурациялауға болады, біз оны қараймыз, бірақ сәл кейінірек - уақыты келгенде.
Тег
Тег тег сияқты тегтің ішінде.
Бұл тег сайтыңызда көрсеткіңіз келетін барлық ақпаратты көрсету үшін қажет.
Тақырыптар, абзацтар, кестелер, суреттер және сілтемелер тегтің ішінде болуы мүмкін элементтердің аз ғана бөлігі болып табылады.
HTML құжатының негізгі құрылымы:
… …
Бірінші сайтыңыз
Енді HTML көмегімен веб-сайттарды жасауға болатынын және бұл үшін негізгі тегтер пайдаланылатынын білесіз:
- . Веб-беттің шекараларын белгілейді.
- . Браузерде веб-бетті көрсету параметрлерін қамтиды.
- . Сайт келушілеріне көрсеткіңіз келетін барлық веб-бет элементтерін (суреттер, бейнелер, мәтін және т.б.) қамтиды.
,, сияқты басқа тегтер туралы жақын арада сөйлесетін боламыз.
Оқырман бұл мақаланы оқып қана қоймай, шеберлігін шыңдауға бірден жүгірсе, жақсы болар еді. HTML дағдыларыңызды жетілдіру үшін жаңа дағдыларыңызды сынау алаңы ретінде қызмет ететін бірінші веб-сайтыңызды жасауыңыз керек.
Ұялы байланыс операторлары («МТС», «МегаФон» және т.б.) бізге ұялы байланыс қызметтерін көрсететіні белгілі. Дәл осылай сайттарды құру және басқару қызметтерін бізге хостинг операторлары ұсынады. Веб-сайтыңызды жасау үшін кез келген тегін хостинг операторының сайтына өтіңіз.
Тексерілген хостинг провайдерлеріне BEGET немесе кіредіreg, мысалы. Кез келген адамды таңдай аласыз.
Қысқа тіркелуден кейін 24 сағаттан кейін бүкіл әлемге көрінетін Интернеттегі бірінші веб-сайтыңыз автоматты түрде жасалады және сіз жаттығуды бастай аласыз!
Заманауи сайт құрылымы
Енді сіздің сайтыңыз бар, тегте қандай тегтер бар екенін және олардың сайттардағы ақпаратты қалай ұйымдастыратынын тексеріңіз.
Жоғарыдағы сурет HTML тілінің HTML5 соңғы нұсқасымен бірге келген құрылымның схемалық көрінісі болып табылады. HTML5-пен қатар жаңа тегтер ғана емес, сонымен қатар веб-сайттарды құрудың мағынасы да келді. Суретте көріп отырған барлық тегтер негізгі тегте орналасқан. Бұл тегтер сайтыңыздың құрылымын "сызуға" және оған мағына беруге көмектеседі.
Мысалы, тегтердің ішінде … сайт тақырыбын (тегтер) және сайт сипаттамасын (тегтер) орналастыру ыңғайлы.
Сайттың мәзірін (сілтемелерін) тегтердің ішіне (тег) орналастыру ыңғайлы.
Тегтердің ішіне мағынасына қатысты кез келген үлкен ақпарат блогын орналастыру ыңғайлы. Бұл әрқайсысы тегтерге «оралған» бірнеше мақала немесе фотосуреттер (тег) немесе кестелер (тегтер) болуы мүмкін.
) және т.б.
Тегтердің ішіне. мағынасына сәйкес келмейтін кез келген ақпаратты орналастыру ыңғайлы.
Тегтердің ішінде байланыс ақпараты, сайттың қосымша бөлімдері және т.б. сияқты қосымша ақпаратты орналастыру әдеттегідей.
Ендеше, сіз қазіргі заманғы веб-сайттардың неден жасалғанын біршама меңгердіңіз. Оған мысал келтірейікМенің басымдағы дүрбелеңнің орнын түсіністік қорқынышы басты.
Сонымен, сіз хостинг операторыңыздың сайтындағы файл менеджерін ашып, index.php деп аталатын құжатты тапқанда, оған сайтыңыздың құрылымын нөлден бастағандай етіп жазыңыз.
Менің бірінші веб-сайтым
Бет тақырыбы
Бет сипаттамасы
Сілтеме №1 | №2 сілтеме | Сілтеме №3
Кейбір мақаланың тақырыбы
Бұл кез келген ақпаратты қамтитын блок және CSS көмегімен сіз осы блокты және бүкіл сайтты оның барлық мазмұнымен қалағандай бояй аласыз. © Барлық құқықтар қорғалған
Сайттың әртүрлі параметрлері бар екенін айтқанымыз есіңізде ме? Міне, бұл:
- Браузерлерге сайтта орыс және ағылшын таңбалары болуы мүмкін екенін көрсетеміз (әйтпесе сайтты ашқанда қорқынышты krakozyabry көресіз).
- браузер қойындысында және іздеу жүйесінде («Яндекс», Google және т.б.) көрсетілетін бет атауын көрсету үшін пайдаланылады.
Әрине, CSS стилінсіз сайтыңыз сараң болып көрінеді (ақ фонда қара әріптер), бірақ бірінші бетті HTML тілінде жазып көріңіз.
Құттықтаймыз! Сіз өзіңіздің веб-сайтыңызда бірінші веб-парақшаңызды жасадыңыз! Бұл қызықтырақ болады!
