Заявка на участие в семинаре

Все поля обязательные для заполнения
Как к Вам обращаться
Email
Телефон
Семинар
Комментарий
отправить
закрыть

Пошаговое создание веб-страницы

Уральская академия современных информационных технологий Пошаговое создание веб-страницы
Дата публикации: 19.01.2015 13:28:28
Автор статьи: Кузнецов К.С.


Наша веб-школа запускает цикл ознакомительных статей для новичков, которые хотели бы посветить свое свободное время разработке сайтов, но не знают с чего начать. А начнем мы знакомства с HTML - язык гипертекстовой разметки, на примере создание простой веб-страницы.

Шаг 1. Создание файла.

Для начала создадим файл, в котором будет храниться вся необходимая нам информация.

В итоге у нас получился файл для хранения информации в формате  HTML – «about.html».

Шаг 2. Открываем наш файл в программе для редактирования.

Для редактирования всевозможных скриптов, программного кода, языков разметки страниц и т.п. подойдет обычный «Блокнот». Но в нем будет неудобно работать с большим объемом текстовой информации, т.к. весь наш код представлен в виде простой текстовой информации. Поэтому для удобства работы программистов и верстальщиков создали всевозможные программы, которые значительно упрощают процесс написания кода. Подобные программы имеют различный набор функций, например таких, как подсветка синтаксиса языка, на котором вы пишете, различные подсказки по написанию кода, контроль закрывающихся тегов, скобок, встроенный FTP-клиент, с помощью которого можно изменять файлы прямо на сервере, где у вас размещен сайт и т.д. и т.п. Конечный выбор программы всегда остается за вами, выбирайте то,  где вам наиболее удобно и комфортно писать ваш код. Я лишь хочу обратить ваше внимание на бесплатную и легкую программу «Notepad », а так же на платный инструментарий от компании Adobe – «Dreamweaver».

Я воспользуюсь бесплатной программой Notepad и открою наш файл в этом редакторе.

Шаг 3. Создаем шаблон гипертекстовой разметки внутри файла.

Вся информация в файле с гипертекстовой разметкой должна помещаться в соответствующие ячейки – теги. Существует большое множество различный тегов, с которыми вы познакомитесь в процессе разработки сайтов, а возможно и различный программы, в которых используются HTML-страницы. Теги делятся на открывающиеся, закрывающиеся и одинарные.

Например:  тег <a> - открывающийся, тег </a> - закрывающийся, тег <img> - одиночный.

Отличие состоит в том, что открывающиеся и закрывающиеся теги работают в паре, т.е. вся информация помещается между этими двумя тегами, на пример так - <a>[наша информация]</a>. А в одиночном теге вся информация помещается внутри самого тега - <img href=”[путь до картинки]”>.

Для создания шаблона нам необходимо разделить наш файл на ячейки. Выделим три основные ячейки:

В итоге у нас должен получиться следующий код:

<html>
   <head></head>
   <body></body>
</html>

Настоятельно вам рекомендую использовать систему отступов и пробелов, чтобы сделать ваш код читабельным и красивым. Так же рекомендую использовать комментарии, для более удобного ориентирования в коде. Комментарии на HTML пишутся в следующем теге <!—[ваш комментарий]  à

Шаг 4. Заголовок страницы.

Для того чтобы передать название нашей страницы окну браузера или вкладке используется специальный тег <title></title>, который помещается внутри тега <head></head>.

В итоге у нас получится следующий код:

<html>
   <head>
      <title>Моя первая веб-страница</title>
   </head>
   <body></body>
</html>

Шаг 5. Размещаем информацию на странице.

Всю информацию, которую мы хотим показать посетителю нашей веб-страницы, мы должны поместить в тег <body></body>.
Для переноса строк используется одинарный тег <br>. Так же вы можете использовать тег для абзацев <p></p>

Разместим следующий текст на нашей страницы:

Здравствуй, дорогой посетитель!

Приветствую тебя на моей первой веб-страницы.
Здесь я буду выкладывать свои результаты, которых я достигну в процессе обучения разработки сайтов.

В итоге у нас получиться следующий html-код:

<html>
   <head>
      <title>Моя первая веб-страница</title>
   </head>
   <body>
      <p>
         Здравствуй, дорогой посетитель!
      </p>
      Приветствую тебя на моей первой веб-страницы.
      <br>
      Здесь я буду выкладывать свои результаты, которых я достигну в процессе обучения разработки сайтов.
   </body>
</html>

Шаг 6. Сохраняем и проверяем результат.

После того как внесены вы закончили редактировать ваш файл, сохраняем все изменения и переходим к проверке результата.

Проверять html-файлы я рекомендую вам во всех основный браузерах: Internet Exploer, Chrome, Opera, Mozila.

Если в окне браузера вы видите только следующий текст:

Здравствуй, дорогой посетитель!

Приветствую тебя на моей первой веб-страницы.
Здесь я буду выкладывать свои результаты, которых я достигну в процессе обучения разработки сайтов.

То я вас поздравляю с успешным созданием вашей первой веб-страницы.



Назад в раздел