Лабораторная работа №6 «Разработка простейшего сайта»
Введение
Во-первых, создание простейшего сайта – это очень просто, значительно проще, чем работать в текстовом редакторе Word. С хорошим сайтом, конечно, дело обстоит сложнее, но главное – начать. А если захочется и/или понравится, то мастерство можно наращивать постепенно. Разобравшись с этой лабораторной работой, вполне можно сразу же начинать делать вполне приличный (но не супер) сайт – типа сайта кафедры АСНИиЭ.
Заниматься веб-дизайном может каждый. Даже если дизайнер не может сам «сгенерить» идею относительно структуры страницы, можно покопаться в интернете (инете), найти подходящую страницу, сохранить ее с картинками или только один html-файл, а затем использовать для своего сайта полностью или частично – добавив или убрав что-либо.
Это не программирование, освоить которое многим мешают два момента: a) необходимость придумать стратегию или комбинацию (по терминологии Остапа Бендера); б) четко представлять, как работают 3 основных оператора (присваивания, логический и цикла), и как изменяется информация в компьютере при их выполнении.
Правда, веб-дизайнер высшего класса должен уметь программировать, но это требуется редко, и абсолютное большинство сайтов не содержат программного кода. Но если Вам понравится веб-дизайн, то Вы все равно освоите программирование, возможно, немного помучавшись. Программирование – вещь очень простая, но надо иметь хорошее воображение, что опять-таки может быть достигнуто тренировкой путем решения задач.
Имеются программы визуального веб-дизайна, но как сказал один веб-дизайнер, они работают примерно так же, как программы машинного перевода. И, как сказал другой по поводу одной из таких программ – Microsoft FrontPage, превращают кролика в носорога. Страницы получаются громоздкими, раз в 30 больше, чем сделанные «ручками», и загружаются в 30 раз медленнее. При современных скоростях интернета это уже почти не имеет значения, но если Вы попытаетесь изменить (отредактировать) такую страницу, то произнесете, как минимум, мысленно, немало «теплых», а точнее, горячих слов о программе. Короче, хорошо, что есть калькуляторы, но арифметику надо знать. Чтобы вовремя подправить «дуру-машину». Применительно к веб-дизайну это означает, что надо изучить основы языка HTML. А после этого можете пользоваться программами визуального веб-дизайна и подправлять HTML-код при необходимости.
Наиболее доходчивым, по мнению преподавателя, в части обучения азам веб-дизайна, являются бесплатные уроки на сайте https://mm-business.ru «Работа на дому через Интернет». Ну просто … надо быть, чтобы не понять. Да и … поймут.
Имейте в виду: автор сайта угрожает завести уголовное дело на каждого, кто без разрешения скопирует что-либо с сайта (Интересно, как он узнает о факте копирования? Вероятно, пугает наивных мальчиков и девочек.). А если вы собираетесь еще и выставить что-либо с этого сайта в интернет без ссылки (это уже можно «вычислить»), да не всякой (см. красным шрифтом внизу сайта), мой вам совет: насушите сначала сухарей J. А если серьезно, материалы с сайта можно выставить в интернете, но надо внести в html-файл, содержащий эти материалы, следующий текст: <a href="https://mm-business.ru" title="Как начать работать через Интернет. Все о работе в сети Интернет.">Работа через Интернет на дому - MM-business.ru</a>. (Без точки.). Автор описания к лабораторной работе не знает, что содержится в рекламе на данном (и любом другом) сайте – не попадитесь на недобросовестную рекламу или интернет-подставу, коих в инете тьма. По крайней мере, когда автор «лабы» зашел на сайт, слева внизу данного сайта выскочила подстава насчет сайта «Одноклассники» – точно, не знаю какая, может быть, и вовсе безобидная, вроде рекламы, а может быть и нет: якобы мой аккаунт заблокирован, взломан или что-то еще, хотя его в природе не существует.
После первого прочтения прочтите материал как минимум еще раз – чтобы понять «непонятки», которые возникли при первом чтении.
Основная часть
Задание к работе. Ознакомиться в общем, без заучивания всего подряд, с уроками на сайте https://mm-business.ru/. Что надо знать, можно узнать из перечня контрольных вопросов. Главное – знать и понимать основы языка HTML, чтобы при необходимости можно было воспользоваться справочником по этому языку при разработке сайта. Надо проработать и понять материал уроков 1-10. Уроки оформлены доходчиво, понятно, методически грамотно, хотя местами с опечатками, орфографическими и синтаксическими ошибками (не учите по этим урокам русский язык!). Если серьезно, преподаватель относится с большим уважением к автору уроков – сам бы так хорошо не написал. Вероятно, очень многих не очень понятливых он научил. Уроки 1, 9, 10 надо проработать особенно тщательно.
Теперь, по мнению лабописца, следует проработать уроки, а уже потом читать остальной текст «лабника» (этот текст лучше бегло прочесть, а шпаргалку, указатель и вопросы – просмотреть, освоить уроки, а затем уже прочитать внимательно). Для перехода к урокам (для этого должен работать интернет!) этого скопируйте и вставьте адрес https://mm-business.ru/ в строку навигации браузера (самое верхнее текстовое окно). Слева (боковое меню), примерно в нижней трети, будет синяя подчеркнутая надпись «Уроки создания сайта». При наведении на нее указателя мыши появляется «лапа» – значит это ссылка (гиперссылка). Каждой ссылке соответствует своя страница или точка на странице (этой же или другой). При нажатии на ссылку (левой кнопкой мыши) Вы попадете на страницу с первым уроком. Внизу страницы каждого урока будут ссылки на оставшиеся уроки.
Кстати, в строке навигации отображается путь к отображаемой странице – полезная информация при подготовке сайта. Если Вы изменили html-файл (и сохранили изменения!), то, если он уже открыт в браузере, для визуального контроля изменений необязательно снова открывать его – достаточно нажать кнопку «Обновить» браузера (обычно 2 круглые стрелки одна над другой).
Основные определения
HTML – Hyper Text Marker Language – язык гипертекстовой разметки.
HTML-файл – текстовый файл с расширениями html или htm. Открывается и редактируется в Блокноте.
HTML-теги – команды в треугольных скобках. Бывают непарные (<br> – перенос строки – может быть в любом месте HTML-файла) и парные (<head> </head> теги. Тег может занимать часть строки, строку или несколько строк в любом месте HTML-файла. Внутри тега могут быть параметры (атрибуты), которые отделяются пробелами. В параметрах могут быть числа в обычном (десятичном целом) формате, они обрамляются парными кавычками, например, ”80” или 16-ричными – тогда перед числом ставится символ «#», например, #005A7F.
Сайт с точки зрения разработчика и интернет-обозревателя (браузера) (примеры – Internet explorer, Opera) – это совокупность html-файлов на компьютере.
Движок сайта – программное обеспечение сайта (программа управления сайтом) или CMS (с англ. – система управления содержимым) обеспечивает доступ браузера к сайту. Браузер читает html-файлы, картинки и т.д., и вырисовывает на экране то, что называется интернет-страничкой, которую мы и видим. Иными словами, обозреватель интерпретирует HTML-код (читает и выполняет команды (теги) языка HTML).
Стартовая страница сайта обязательно должна называться index. {html/htm/php}. В фигурных скобках перечислены возможные расширения.
Советы
Не рекомендуется использовать в именах html-файлов большие буквы, русские буквы, пробелы – только маленькие английские буквы (нежелательно большие латинские[1]), цифры, дефис, символ подчеркивания. Имена могут быть длинными (примерно до 250 символов). Дело здесь в том, что программное обеспечение сайтов часто работает под бесплатной ОС Linux, которая, в отличие от ОС Windows, некорректно работает с этими символами.
Если на экране отображаются не те символы, дать команду Вид/Кодировка/Кириллица (Windows-1251).
Чтобы не путаться с расширениями файлов и при необходимости их легко изменять, рекомендуется включить отображение расширений. В Windows XP это делается так: Проводник/Сервис/Свойства папки/Вкладка Вид/В поле (списке) «Дополнительные параметры» снять галочку (щелкнуть левой кнопкой по ней) «Скрывать расширения…». В Windows 7 последовательность Проводник/Упорядочить/Параметры папок и поиска/ Вкладка Вид/В поле (списке) «Дополнительные параметры» снять галочку (щелкнуть левой кнопкой по ней) «Скрывать расширения…». В файл-менеджере Total Commander расширения отображаются по умолчанию.
Далее в шпаргалке и уроках есть раздел «Цвет». Когда Вы сделаете страницу, поэкспериментируйте с цветами фона и букв: хорошо ли читается текст при просмотре в браузере? Иногда текст иных сайтов читать невозможно, не инвертировав текст и фон путем выделения мышью участка страницы или только скопировав в буфер и вставив в Блокнот или Word.
Шпаргалка по HTML (минимальный набор тегов для создания сайта)
Будет неплохо, если Вы выучите теги шпаргалки наизусть. А понять надо обязательно. Понять – значит отформатировать html-файл нужным образом с помощью шпаргалки.
Комментарий. Между символами «<!» и «>» (без кавычек) может быть любой текст, который игнорируется браузером – на странице не отображается. Этот текст называется комментарием и служит «шпаргалкой» веб-дизайнеру. Комментарий, как и любой другой парный тег, может занимать часть строки, строку или несколько строк в любом месте HTML-файла. Если убрать или добавить комментарий, вид страницы в обозревателе не изменится. Если Вы хотите временно убрать область HTML-документа (часть строки, строку или несколько строк), ее можно «закомментировать», обрамив символами «<!» и «>».