Доброго времени суток, мои дорогие подписчики и читатели блога. Сегодняшняя публикация посвящена очень простой, но интересной теме. После ее прочтения вы узнаете, как сделать html документ, разберетесь со всеми нюансами его написания и сможете запускать свои текстовые файлы, как страницы в интернете. А это основы основ для создания собственного сайта! Ну что ж, приступим.
В наше с вами время компьютерные науки занимают первую ступень пьедестала почета среди всех областей знаний. Каждый человек первого и второго мира пользуется компьютерными инновациями и глобальной сетью. Поэтому неудивительно, что основы программирования подумывают вводить в базовую образовательную школьную систему.
Отличительные черты html-документов
Начнем с того, что разберем, что же под собой подразумевает html-документ и каким образом он отличается от других типов документов.
Первая часть термина состоит из аббревиатуры английских букв. Если ее расшифровать, то получим вот такие слова: «Hyper Text Markup Language». Это средство для задания структуры и внешнего вида веб-ресурсов.
Код на языке разметки html можно просматривать во многих редакторах как визуального, так и текстового видов. Однако результат работы набранной программы можно увидеть только в браузере или в специализированных программных продуктах, позволяющих включить предварительный просмотр.
Сам же по себе html-документ – это файл с расширением .html или .htm, в котором содержится информация, структурированная при помощи языка гипертекстовой разметки.
Как видите, пока все очень просто. И гарантирую вам, что дальше не станет намного сложнее.
Да создадим веб-страницу…в «Блокноте»
Да-да, это не опечатка и вам не показалось. Любой html-документ можно создать в стандартном текстовом редакторе. Про самые лучшие из них я писал в этой статье. Важно только сохранить его в правильном расширении – и вуаля, текстовый документ превращается в элегантную веб-страничку.
А теперь отложим шутки и перейдем к делу. Советую вам читая ниже перечисленный список действий выполнять по очередности каждый пункт на своем персональном компьютере. Это самый простой и быстрый способ создания html-документов.
- В меню «Пуск» найдите программу «Блокнот» и откройте ее;
- В блокноте наберите или вставьте текст примера:
1 2 3 4 5 6 7 8 9 10 11 12
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Создаем html-файл</title> </head> <body> <h1>Мое любимое время года</h1> <img src="http://valerie-website.at.ua/images/wallpaper/wallpaper_summer2009_04.jpg" width="320" alt="summer"> <p>Больше всего на свете я люблю лето! Оно радует меня яркими красками, теплыми солнечными деньками и больше всего каникулами!</p> </body> </html> - Нажмите на вкладку «Файл» и выберете пункт выпадающего списка «Сохранить как…»;
- Появившееся диалоговое окно позволит вам сохранить документ не только в любом месте вашего девайса, а еще указать кодировку (выбираем UTF-8) и тип файла (указываем отображение всех файлов и в названии пишем «myFile.html»). Сохраняем документ и закрываем его;
- Теперь осталось открыть «myFile.html» в браузере и посмотреть на результат работы кода. Это можно сделать через пункты меню «Открыть с помощью…» и выбрать браузер или двойным кликом по иконке самого файла (откроется в браузере, выбранном по умолчанию).
Документ с таким расширением можно повторно редактировать, открывая его через блокнот или другие существующие профильные программы. Вы также можете открывать страницу из закладок хром, если не поменяете месторасположение myFile.html.
Хочу добавить, что вносимые изменения в сам документ не будут отображаться в браузере, если вы не будете перезагружать страницу. Вот перечень действий для отслеживания изменений в файле:
- Изменим в примере выше картинку. Для этого откройте созданный ранее файл через блокнот и замените строку
1
<img src="https://romanchueshov.ru/wp-content/uploads/2016/06/nish-saita.jpg" width="320" alt="summer">
на
.1
<img src="http://fityogajill.com/wp-content/uploads/2014/05/Summer-Challenge.jpg" width="320" alt="summer">
- Сохраните и закройте документ.
- Перейдите на вкладку, где открыт пример и нажмите «Обновить эту страницу» или используйте горячую клавишу F5. Картинка поменяется на новую.
Данный способ создания веб-страницы очень примитивен. Он отлично выручает в случаях написания простенького html-кода или желания просмотреть готовые примеры разметки, найденные на других интернет-ресурсах, в браузере.
Однако из-за отсутствия таких встроенных функций, как проверка семантики и синтаксиса веб-языков, с увеличением объема кода вероятность допустить ошибки в написании увеличивается. После их очень сложно отследить. Для новичка в области верстки (создание разметки страниц сайта) это вообще непосильная задача.
Поэтому если вы решили углубиться в изучение описываемого языка, скачайте себе специализированный редактор. О них я писал ранее, так что можете перейти по ссылке на статью.
Для чего нужны документы с расширением .html?
Изначально язык разметки html создавался для структурирования и форматирования обычных текстовых документов, относящихся к научным трудам, техническим разработкам и, безусловно, к документации. Это довольно старый инструмент разметки текста, дотягивающийся своими корнями еще к 90-м годам прошлого века.
В следствии развития компьютерных технологий, изменения настигли и html. Сначала это было добавление дополнительных возможностей, например, поддержание мультимедийной информации, а после html-документы стали использовать для верстки страниц сайтов.
На сегодняшний день преобладающее множество сайтов написано с помощью html-языка, дополненного другими средствами программирования (css, javascript, php и другие).
На этой ноте я закончу свою статью. Надеюсь она была для вас информативной и заложила фундамент для новой отрасли знаний! А если вы согласились с предыдущим предложением, то становитесь подписчиками моего блога и рассказывайте о нем коллегам и друзьям.
Пока-пока!
С уважением, Роман Чуешов
