Здравствуйте, уважаемые читатели Nejalko.ru!
Сегодня у нас важное дело: создание html-страницы в блокноте своими руками! Дело не хитрое, но ответственное, можно сказать, начало карьеры сайтостроителя, а это уже серьезно.
Для создания первой html-страницы нам понадобится блокнот, любой браузер и 10 минут свободного времени. Если все это у Вас есть приступаем к работе.
В любом удобном для Вас месте на жестком диске создаем папку с названием, например, "site", внутри нее создаем еще одну папку с названием "www". Можно заранее сделать отдельную папку, назвать ее "Сайтостроение" и в ней размещать все файлы, получаемые за время изучения html учебника. Папка "www" нужна нам для привыкания к правильной работе с сайтами. Дело в том, что на любом хостинге (там, где готовые сайты располагаются в интернете) Ваш сайт будет находится в папке именно с таким названием, поэтому доводим до автоматизма сразу, чтобы в будущем было проще.
Внутри папки "www" создаем текстовый документ с названием "index.html", чтобы сделать расширение ".html" нужно у нового документа во время присвоения ему названия стереть расширение .txt и дописать .html, причем после ".html" не должно оставаться ни одного символа.
Если документ уже создан в виде index.txt, то его нужно, опять же, переименовать и дописать .html, удалив все остальное, что идет через точку или открыть файл, написать в нем код и выбрать в меню "Файл-Сохранить как" затем в нижнем выпадающем списке "Тип файла" выбрать пункт "Все файлы (*.*)"
И в поле "Имя файла" стереть "txt", а дописать вместо него "html"
Если Вам где-то встретится файл с расширением "htm" (что такое расширение файла), то этот файл создан также с использованием языка html, можете сами попробовать менять расширение файлов с "html" на "htm" и разницы в работе документа не увидите.
Открывать только что созданный файл можно через "Блокнот", а если Вы работаете в Total Commander, то выбирайте мышкой документ и нажимайте "F4", на мой взгляд еще удобнее блокнота.
С предварительной подготовкой закончили, теперь можно создать первую html-страницу, так сказать, на чистом листе. Для этого вспоминаем предыдущую статью и создаем страницу сайта за 11 шагов (можете копировать из правой колонки таблицы и вставлять в свой "index.html":
| 1. Указываем декларацию | <!DOCTYPE html> |
| 2. Открываем тег начала html-документа | <html> |
| 3. Открываем головной тег | <head> |
| 4. Указываем заголовок странички | <title>Первая страница сайта</title> |
| 5. Закрываем головной тег | </head> |
| 6. Открываем тег тела документа | <body> |
| 7. Наполняем документ контентом (тем, что хотим поместить на страницу), например таким | Это первая страница сайта, на ней я буду пробовать свои силы в изучении HTML! |
| 8. Закрываем тег тела документа | </body> |
| 9. Не забываем тег окончания html-документа | </html> |
| 10. Сохраняем нашу страничку комбинацией клавиш Ctrl+S | |
| 11. Кликаем двойным кликом по нашей страничке index.html и смотрим что у нас получилось | |
А получиться должно следующее:
Так выглядит код этой страницы:
Ну как Вам? Согласен, не особо впечатляет, но это самое-самое начало и времени ушло на создание первой маленькой и простенькой html-страницы ровно 2 минуты.
Как мы видим, на странице выводится только то, что указано между тегами <body></body> и это единственный правильный вариант.
Но в этом примере есть недочет, не пугайтесь, он не страшный, но лучше его не делать, а заключается он в том, что текст в html должен находится в соответствующих тегах, желательно тегах параграфа: <p>текст</p>. Это не только правильно, но еще и удобно, судите сами: на странице много текста, но в коде все абзацы (параграфы) будут аккуратно разделены соответствующими тегами <p> в начале параграфа и </p> - в конце параграфа, следовательно мы сразу можем увидеть, где параграф, например, третий снизу или пятый от начала. Кроме всего прочего, использование тегов дает возможность задать каждому параграфу свой стиль, но об этом позже.
Давайте заключим наш текст в теги параграфа, то есть добавим тег <p> ПЕРЕД словом "Это", а затем поставим тег </p> ПОСЛЕ слова "HTML!" в коде страницы, сохраним и посмотрим, что из этого получится (сохранять можно комбинацией Ctrl+S).
Чтобы увидеть изменения обновите Вашу страницу кнопкой "F5" и увидите, что в итоге текст "отпрыгнул" немного вниз и в сторону, но лучше будет видно на большем количестве текста. Снова заходим в код и добавляем еще пару предложений, заодно убираем теги параграфов у первого предложения:
Сохраните этот код, обновите Вашу html-страничку и увидите... именно, мешанину текста, потому что без тегов параграфов браузер не понимает, в каком место ему нужно что разделить или объединить.
У меня, первое время, в связи с данной особенностью языка HTML, возникал когнитивный диссонанс, как же так, в Word' e нажимаешь "Enter" и создается новый абзац, а в html нажимаешь тот же "Enter", предложение в коде перескакивает как и нужно, но после сохранения на странице никаких изменений. Так вот, чтобы в html создать новый абзац, необходимо текст этого абзаца заключить в уже знакомые нам теги <p> перед параграфом и </p> в конце параграфа. Давайте прямо сейчас это и сделаем, каждое предложение заключим в теги параграфа, вот так:
Главное, что нужно запомнить, если тег двойной (парный), то открыв его, обязательно закройте там, где действие этого тега должно закончится.
Вот что у нас получилось после сохранения кода и обновления нашей маленькой html-странички "index.html":
Согласитесь, так гораздо приятнее, читать уже можно и глаза "на лоб не лезут".
Закрепим еще раз: без тегов параграфа у нас получается сплошной, практически не читаемый текст, несмотря на то, сколько раз в коде Вы нажмете "Enter", но стоит прописать соответствующие случаю теги параграфа, как все становится понятно и красиво, поэтому не забывайте помещать элементы html-страницы в соответствующие им теги: текст в текстовые, таблицы в теги таблиц, изображения в теги изображения и так далее.
Ну, и напоследок, есть такой интересный одиночный тег <br>, если его поставить в конце предложения, то следующее предложение будет отображаться на следующей строке, данный тег действует, как одно нажатие "Enter" в том же блокноте, то есть переносит стоящий за ним текст на следующую строку.
Попробуйте по вставлять тег <br> в разные части параграфов (или даже предложений) и понаблюдайте за результатом, так сказать, ознакомьтесь и закрепите.
Напомню еще раз, теги <br>, <img> - одиночные, то есть не требуют закрытия, а теги <p></p>, <title></title>, <html></html>, <head></head> обязательно должны закрываться с помощью слеша "/" перед второй частью тега.
Надеюсь, все запомнили, насколько просто сделать страничку сайта на html? Замечательно, тогда двигаемся далее. В следующей статье поработаем с текстом в html.
Хорошего настроения, друзья!
