HTML5 файылын жасауHTML5 файылын жасау

HTML5 файылын жасау

Элементтер html5 файылын құрайтын құрылыс блоктары. Құжатты жасау үшін бізге қарапайым мәтіндік файлды жасау керек, файл кеңейтімі ретінде *.html көрсету керек.

Мәтіндік файлды құрайық, оны индекс деп атаймыз және оның кеңейтімін .html етіп өзгертейік.

HTML5 файылын жасау
HTML5 файылын жасау

HTML5 файылын жасау Содан кейін бұл файлды кез келген мәтіндік редакторда, мысалы, Notepad++ бағдарламасында ашыңыз. Файлға келесі мәтінді қосыңыз:

<!DOCTYPE html>
<html>
 бос орын
</html>

HTML5 файылын жасау үшін бізге алдымен екі элемент қажет: DOCTYPE және html. Doctype немесе Document Type Declaration элементі веб-браузер құжат түрін хабарлайды. берілген құжаттың html құжаты екенін және html4 немесе белгілеу тілінің басқа нұсқасы емес, html5 пайдаланылатынын көрсетеді.

Ал оның бастапқы және аяқталу тегтерінің арасындағы элемент htmlқұжаттың бүкіл мазмұнын қамтиды.

Элемент ішінде html біз басқа екі элементті орналастыра аламыз: head және body. head элементте веб-беттің метадеректері meta — веб-парақша тақырыбы, кодтау түрі және т.б. орналасады, сондай-ақ сыртқы ресурстарға сілтемелер — стильдер, сценарийлер, егер олар пайдаланылса. Элементтің body өзі html бетінің мазмұнын анықтайды.

Енді index.html файлының мазмұнын келесідей өзгертейік мысалы:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Документ HTML5</title>
    </head>
    <body>
        <div>Содержание документа HTML5</div>
    </body>
</html>

Бас элементі екі элементті анықтайды:

  • элемент title беттің тақырыбын білдіреді
  • Элемент meta беттің мета ақпаратын анықтайды. Таңбаларды дұрыс көрсету үшін кодтауды көрсеткен жөн. Бұл жағдайда атрибутты пайдаланып charset=»utf-8″utf-8 кодтауын көрсетеміз.

Элемент элементінің ішінде блокты безендіретін body тек бір элемент пайдаланылады — . div Бұл блоктың мазмұны қарапайым жол болып табылады.

Біз кодтау ретінде utf-8 таңдағандықтан, браузер веб-бетті осы кодтауда көрсетеді. Дегенмен, құжат мәтінінің өзі де таңдалған utf-8 кодтауына сәйкес болуы керек. Әдетте, әртүрлі мәтіндік редакторларда кодтауды орнату үшін сәйкес параметрлер бар. Мысалы, Notepad++ бағдарламасында «Кодтаулар» мәзіріне өтіп, ашылатын тізімнен UTF-8-ге BOM сыз түрлендіру элементін таңдау керек:

html құжатының кодировкасы
html құжатының кодировкасы

Осыдан кейін қалып-күй жолында сіз UTF-8 W/o BOM көре аласыз , ол қажетті кодтау орнатылғанын көрсетеді.

Браузерде index.html файлын сақтап, ашайық:

index.html файлын браузермен ашқан кездегі көрініс
index.html файлын браузермен ашқан кездегі көрініс

Осылайша, біз бірінші HTML5 құжатын жасадық. title Элементте біз «HTML5 құжаты» тақырыбын көрсеткендіктен, браузер қойындысында осындай атау болады.

utf-8 кодтауы көрсетілгендіктен, веб-шолғыш кириллица таңбаларын дұрыс көрсетеді.

body Біз браузердің негізгі өрісінде элементтің ішінде анықталған барлық мәтінді көреміз.

79 комментариев для “HTML5 файылын жасау”
  1. Every weekend i used to go to see this web
    page, for the reason that i wish for enjoyment, for the reason that this this
    site conations really pleasant funny information too.

  2. Thanks , I have recently been searching for information approximately this subject for
    ages and yours is the best I have came upon so far. However, what concerning the conclusion? Are you sure in regards to the source?

  3. It is perfect time to make some plans for the future and it is time to be happy.
    I’ve read this post and if I could I want to suggest you
    some interesting things or tips. Maybe you could write
    next articles referring to this article. I wish to read
    even more things about it!

  4. Today, I went to the beach front with my children. I found a sea shell and gave it to my 4 year
    old daughter and said «You can hear the ocean if you put this to your ear.» She put the shell to her ear and screamed.
    There was a hermit crab inside and it pinched her ear.
    She never wants to go back! LoL I know this is totally off topic but I had to tell someone!

  5. You really make it seem so easy with your presentation but I find this topic to be
    really something which I think I would never understand.
    It seems too complicated and very broad for me.

    I am looking forward for your next post, I’ll try to get the hang of it!

  6. Hey very cool website!! Man .. Beautiful ..
    Superb .. I’ll bookmark your blog and take the feeds also?
    I am happy to find numerous useful info right here
    within the submit, we need develop extra techniques in this regard, thanks for sharing.
    . . . . .

  7. That is really attention-grabbing, You’re a very professional blogger.
    I’ve joined your feed and look ahead to looking
    for extra of your excellent post. Additionally, I have shared your web site in my social networks

  8. Hello! I’ve been reading your web site for some time now and finally got the
    bravery to go ahead and give you a shout out from
    Porter Tx! Just wanted to tell you keep up the great work!

  9. Please let me know if you’re looking for a article writer
    for your weblog. You have some really good posts and I feel I would be
    a good asset. If you ever want to take some of the load off,
    I’d absolutely love to write some material for your blog
    in exchange for a link back to mine. Please blast me an email if interested.
    Thank you!

  10. Buyers additionally had several choices of remaining-drive ratios to maximize economy or performance potential. Screen Actors Guild Award for Outstanding Performance by a Female Actor in a Supporting Role.

  11. Good day! I know this is kinda off topic but I was wondering if you knew where I could get a captcha plugin for my comment form?
    I’m using the same blog platform as yours and I’m having problems finding one?
    Thanks a lot!

  12. Hello there, I discovered your site by the use of Google
    even as searching for a related matter, your website got here up, it seems good.
    I’ve bookmarked it in my google bookmarks.
    Hello there, simply changed into aware of your weblog
    through Google, and found that it is really informative.
    I am gonna be careful for brussels. I’ll appreciate when you proceed this in future.
    A lot of people might be benefited from your writing. Cheers!

  13. An impressive share! I have just forwarded this
    onto a friend who has been doing a little homework on this.
    And he in fact bought me lunch due to the fact
    that I found it for him… lol. So let me reword
    this…. Thank YOU for the meal!! But yeah, thanx for spending some time to discuss this issue here on your site.

  14. Howdy! I know this is kinda off topic but I was wondering which blog platform are you
    using for this site? I’m getting tired of WordPress because I’ve had issues with hackers and I’m looking at options for another platform.
    I would be great if you could point me in the direction of
    a good platform.

  15. I like the valuable information you supply on your
    articles. I will bookmark your blog and take a look at once
    more here frequently. I’m slightly certain I’ll be informed a lot of new stuff right
    here! Good luck for the next!

  16. It’s appropriate time to make a few plans for the future
    and it’s time to be happy. I’ve learn this publish and if I may just I want to suggest you some attention-grabbing things or advice.
    Perhaps you can write subsequent articles relating to
    this article. I desire to read more issues about it!

  17. I was wondering if you ever thought of changing the layout of your site?
    Its very well written; I love what youve got to say.
    But maybe you could a little more in the way of content so people could connect with it better.
    Youve got an awful lot of text for only having
    1 or 2 pictures. Maybe you could space it out better?

  18. Heya are using WordPress for your site platform?

    I’m new to the blog world but I’m trying to get started and create my own. Do
    you need any html coding knowledge to make your
    own blog? Any help would be really appreciated!

  19. I’m really inspired together with your writing skills as
    well as with the structure in your blog. Is that this
    a paid subject matter or did you customize it your
    self? Anyway keep up the excellent quality writing, it’s
    uncommon to look a great blog like this one today..

  20. Awesome blog! Do you have any hints for aspiring writers?

    I’m planning to start my own site soon but I’m a little lost on everything.
    Would you advise starting with a free platform like WordPress or go for a
    paid option? There are so many options out there that I’m totally overwhelmed
    .. Any recommendations? Cheers!

  21. This design is spectacular! You most certainly know how to keep a reader entertained.

    Between your wit and your videos, I was almost moved to start my own blog
    (well, almost…HaHa!) Wonderful job. I really enjoyed what you
    had to say, and more than that, how you presented it.
    Too cool!

  22. Deep water manufacturing, heavy oils, excessive water manufacturing, extreme slugging, hydrates, sour gases, asphaltenes and waxes make this task even tougher.

  23. Thanks for the auspicious writeup. It in reality was a entertainment account it.
    Look advanced to more added agreeable from you! However, how could we keep in touch?

  24. It’s the best time to make some plans for the future
    and it’s time to be happy. I have read this post and
    if I could I wish to suggest you some interesting things or advice.
    Perhaps you can write next articles referring to this
    article. I want to read more things about it!

  25. I am now not positive the place you’re getting your information, however good topic.

    I needs to spend a while learning much more or figuring out more.

    Thank you for magnificent information I was in search
    of this information for my mission.

  26. Thanks , I’ve recently been looking for
    information about this subject for a long time and yours is the
    greatest I’ve discovered so far. However, what about the conclusion? Are you positive concerning the source?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *