яндекс

понедельник, 9 июля 2018 г.

Самостоятельное создание сайта

Самостоятельное создание сайта

Специально для тех, кто хочет научиться самостоятельно писать исходный код создаваемого сайта, мы подготовили пошаговую инструкцию по созданию простого сайта на HTML. Поехали!
Внимание! Если вы абсолютный новичок или просто не хотите погружаться в работу с кодом и другие технические моменты, можете смело переходить к разделу «Создать сайт с нуля или на конструкторе сайтов?» 

Создание HTML-сайта

В качестве первого примера мы создадим простой HTML-сайт, который будет состоять всего из одной страницы. HTML (HyperText Markup Language — язык разметки гипертекстов) – универсальный язык, предназначенный для описания веб-страниц. Его задача заключается в том, чтобы указать браузеру, что и как нужно отображать при загрузке страницы в браузере пользователя. Каждый из его тегов описывает фрагмент страницы.
Ниже приводится исходный код простейшей HTML-страницы:
    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    5. 

  5. <base href="http://www.internet-technologies.ru/wp-content/uploads/pages/createMySite/" />
    6. 

  6. <title>Туристическое агентство ТурБюро</title>
    7. 

  7. <meta name="description" content="Описание страницы" />
    8. 

  8. <meta name="keywords" content="Ключевые слова" />
    9. 

  9. <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    10. 

  10. </head>
    11. 

  11. <body>
    12. 

  12. <div id="page">
    13. 

  13. <header>
    14. 

  14. <a href="/" title="" class="logo"><img src="images/logo.png" alt="Туристическое агентство" /></a>
    15. 

  15. <div class="phone">+7 (123) 45-67-89</div>
    16. 

  16.  
    17. 

  17. <nav>
    18. 

  18. <ul id="top_menu">
    19. 

  19. <li><a href="index.html">О компании</a></li>
    20. 

  20. <li><a href="services.html">Наши услуги</a></li>
    21. 

  21. <li><a href="contacts.html">Контакты</a></li>
    22. 

  22. </ul>
    23. 

  23. </nav>
    24. 

  24.  
    25. 

  25. <div class="header_img">
    26. 

  26. <img src="images/header_img.jpg" alt="Туристическое агентство" />
    27. 

  27. </div>
    28. 

  28. </header>
    29. 

  29. <section id="content">
    30. 

  30. <h1>Приветствуем Вас на сайте ТурБюро!</h1>
    31. 

  31. <img src="images/content_img.jpg" alt="Картинка" class="float-right" />
    32. 

  32. <p>Здравствуйте! Мы рады приветствовать вас на сайте туристического агентства «ТурБюро»! Мы предлагаем нашим клиентам только самые интересные и захватывающие приключенческие туры по всему миру!</p>
    33. 

  33. <p>Только у нас вы сможете полететь в Индию на слоне и окунуться в глубокое синее море, держась за плавник акулы. Но не волнуйтесь - каждый клиент нашего агентства застрахован по полной программе и жаждет приключений снова и снова!</p>
    34. 

  34. <p>Если вам нечего заняться, вы поистине решили заняться приключениями на свою голову, то приглашаем вас в офисы нашей компании по всей стране для выбора самых вкусных предложений.</p>
    35. 

  35. </section>
    36. 

  36. <footer>
    37. 

  37. <a href="http://www.internet-technologies.ru/" title="Сайтостроение от А до Я">Сайтостроение от А до Я</a><br />Все права защищены
    38. 

  38. </footer>
    39. 

  39. </div>
    40. 

  40. </body>
    41. 

  41. </html>
    42.
Скопируйте этот код в новый текстовый файл и сохраните его на своем компьютере. Задайте для сохраняемого файла имя index.html. Затем откройте этот файл в любом браузере и посмотрите на результат.

Обратите внимание, что по умолчанию любой веб-сервер пытается выдать браузеру именно страницу с названием index.html. Поэтому в 99% случаев исходный код главной страницы сайта сохраняется в файле под таким названием и это считается хорошим тоном.
Автор: на

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)