Модуль 1. Урок 2. Работа с Notepad++ и веб изображениями

Дата: 2025-06-15; Просмотры: 9
Оценка:
0.00 из 5.00 — оценок
Скачиваний: 0

Предисловие

В этом уроке мы продолжим тему урока 1 по форматированию веб текста, а также приступим к изучению новой темы по работе с веб картинками. Также мы познакомимся с заменой Блокнота на программу Notepad++.

Знакомимся с Notepad++

Блокнот хорош тем, что он бесплатен и по умолчанию входит во все версии ОС Windows. Но, все-же, редактор кода Notepad++ для создания сайтов более удобен (рис. 1). Вот некоторые из его возможностей:

· Бесплатен;

· Многооконный интерфейс;

· Подсветка цветом кода;

· Автосохранение кода;

· Быстро открывает даже большие файлы;

· Наличие подсказок кода;

· И много других возможностей.

Рис. 1. Интерфейс Notepad++

Настройки Notepad++

Чтобы работа в Notepad++ была удобной, рекомендуется выолнить его настройки.

Настройка кодировки UTF-8

Каждый раз, когда вы создаете новый HTML документ в программе Notepad++, вам приходится менять кодировку файла из ANSI в UTF-8 (без BOM). Чтобы это выполнялось автоматически, нужно выполнить ряд команд. А именно: Опции-Настройки-Новый документ (рис. 2). Здесь должен быть активирован переключатель UTF-8 без метки BOM. После нажатия на кнопку «Закрыть» при создании нового веб документа, у вас в HTML коде автоматически будет установлена кодировка UTF-8 (без BOM).

 

 

Рис. 2. Настраиваем кодировку UTF-8 (без BOM)

Быстрая вставка шаблона HTML кода

HTML документы, которые создает начинающий пользователь обычно содержат такой шаблон:

<!DOCTYPE html> <!-- Указываем формат документа -->

<html>

<head> <!—Пишем название документа -->

<meta charset="UTF-8"> <!-- Определяем кодировку символов документа -->

<title>...</title> <!-- Задаем заголовок документа -->

</head>

<body> <!—Пишем содержание документа -->

</body>

</html>

Можно один раз записать этот HTML код в Notepad++ и далее, когда он потребуется, вызывать его на экран горячими клавишами.

Выполните в Notepad++ команду Файл-Новый, а затем выполните команду «Макросы-Начало записи». Далее скопируйте из буфера памяти (или наберите вручную) шаблон стандартного HTML документа в Notepad++. Когда вставка шаблона будет завершена – выполните команду «Макросы-Остановка записи».

Теперь нужно сохранить запись. Для этого выполните команду Макросы-Сохранить запись (рис. 3).

Рис. 3. Команда Сохранить записанный макрос

Когда вы исполните команду Сохранить записанный макрос – появиться такое окно (рис. 4).

Рис. 4. Здесь назначаем горячие клавиши

Теперь, если вам нужен будет шаблон HTML, то достаточно будет нажать на горячие клавиши Ctrl+ Alt+ Shift+1 (рис. 5).

Рис. 5. Клавиши вызова шаблонного кода HTML

Ремарки (примечания)

Ремарки - это такой текст, который будет проигнорирован браузером - на экране он будет не виден, но останется в исходном коде страницы. Для чего нужны ремарки? Вот, например, два варианта:

 

Ремарки оформляются следующим образом:

<body>

<!-- Это ремарка - на странице сайта она не отображается.-->

Это основное содержимое страницы, которое мы увидим.

</body>

Посмотрим на этот код в браузере (рис. 6).

Рис. 6. Отображается основной текст, а ремарка - нет

 

Автоподбор кода (Автозавершение)

Когда вы будете писать код в редакторе Notepad++, то вы увидите предлагаемые подсказки в виде тегов в списке (рис. 7).

Рис. 7. Нам предлагается подсказка по закрытию тела документа

Такое окно будет появляться автоматически если настройки Notepad++ сделаны верно. Выполните команду

Опции-Настройки-Автозавершение и проверьте наличие таких настроек (рис. 8).

Рис. 8. Окно Автозавершение

Выделение кода разным цветом

Для выделения тегов кода цветом выделите нужную часть кода и нажмите правой кнопкой мыши. В открывшемся списке выберите «Style token» и любой стиль (рис. 9). Такая потребность возникает, когда код очень длинный и вам часто нужно возвращаться какому-то определенному месту. Выделенный код (подсветка) остается до тех пор, пока вы не закроете документ.

Рис. 9. Пример подсветки кода цветом

Перенос строк, если текст кода слишком длинный

Для настройки переноса строк в меню Вид, отметьте пункт Перенос строк. После этого, любой длинный текст будет вмещаться в видимую часть окна (рис. 10).

Рис. 10. Перенос строк настроен

Это далеко не все возможности Notepad++. Мы предлагаем вам попробовать в нем поработать. Вернуться из Notepad++ в Блокнот Windows никогда не поздно.

Форматируем текст

Кpупный шpифт можно задать так:

<BIG>Кpупный шpифт</BIG>

Любой фрагмент текста станицы можно выделить жирным шрифтом так:

<B>Жиpный текст</B>

Для задания куpсива используются следующие теги:

<I>Курсив (Наклонный текст)</I>

И еще:

<TT>шрифт как на старой пишущей машинке</TT>

Вот что мы увидим в браузере (рис. 11).

Рис. 11. Четыре варианта оформления текста

Списки

Разберемся, какими тегами обозначаются маркированные списки:

<body>

<ul>

<li>Первый элемент</li>

<li>Второй элемент</li>

<li>Третий элемент</li>

</ul>

</body>

В браузере подобный список будет выглядеть так (рис. 12).

Рис. 12. Маркированный список

Теперь маркеры зададим как цифры:

<body>

<ol>

<li>Первый пункт списка. </li>

<li>Второй пункт списка. </li>

<li>Третий пункт списка. </li>

</ol>

</body>

Так код будет выглядеть в браузере следующим образом (рис. 13).

Рис. 13. Нумерованный список

Гоpизонтальная линия

Тег <HR> добавляет в HTML документ горизонтальную линию. Закрывающий тег не требуется. Ранее уже говорилось, что в тегах могут размещаться атрибуты - специальные команды, которые расширяют действие тега. Атрибуты линии такие:

size — устанавливает толщину линии;

width — устанавливает длину линии в процентах от ширины экрана монитора;

color — задает цвет линии.

 

Вот пример трех линий разной длины, толщины и цвета

<body>

<HR SIZE=2 color=red

<HR SIZE=4 color=green >

<HR SIZE=8 color= blue >

</body>

Этот код в браузере показан на рис. 14. Длина линий здесь задана в процентах от ширины экрана ПК.

Рис. 14. Пример задания трех линий с разными атрибутами

Графические форматы для сайтов

В веб-дизайне принято использовать такие растровые графические форматы:

Работа с изображениями

Для вставки картинки в веб-документ используют тег вида

<img src="1cat.jpg">

Важно при этом понять, что между кавычками пишут не только название изображения, но и путь к нему. Например, если картинка расположена в папке ABC, то запись тегов такова:

<img src="ABC/cat.jpg">

Но, если картинка лежит в том же каталоге (папке), в которой лежит и index.htm l, то путь (маршрут до картинки) прописывать не нужно – достаточно указать название картинки и ее расширение.

Посредством атрибутов width (ширина) и heigh (высота) можно задать размеры изображения в пикселах:

<img src="cat.jpg" height="100">

Если размеры не заданы, то картинка рисуется в реальных ее размерах.

 

Пример вставки картинки на веб страницу:

<BODY>

<img src="sobaka.jpg">

<IMG SRC="sobaka.jpg" widh=50 height=50>

</BODY>

Отображение данного кода в браузере приведено на рис. 15.

Рис. 15. Задание картинки с разными для нее атрибутами

Выравнивание изображений (тег align)

Для того, чтобы наши изображения выглядели так, как нам хочется их надо выровнять. И поможет нам в этом параметр align. У этого параметра есть несколько значений. Например, запись align="left" ставит картинку слева.

<body>

<img src="cat.jpg" align="left">

Картинка слева, а текст обтекает ее справа, и этот текст может занимать несколько строчек.

</body>

Результат выполнения кода в браузере приведен на рис. 16.

Рис. 16. Для картинки задан код align="left" (картинка слева)

Пример кода с параметром align="right"

<body>

<img src="cat.jpg" align="right">

Картинка справа, а текст обтекает ее слева и этот текст может занимать несколько строчек.

</body>

Выполнение кода в браузере изображено на рис. 17.

Рис. 17. Для картинки задан код align="right"(картинка справа)

Картинка как гиперссылка

Для работы подготовим такой набор файлов (рис. 18). Все эти файлы поместим в папку вместе с файлом index. html.

Рис. 18. Три файла необходимы, чтобы картинка работала как ссылка (кнопка)

Код файла index. html такой:

<BODY>

<P>Изображение можно сделать "горячим", то есть осуществлять переход при нажатии на изображение:</P>

<P><A HREF="zadanie1.htm"><IMG SRC="1.gif"></A></P>

</BODY>

Вид кода в браузере (рис. 19).

Рис. 19. Отображение файла index. html в браузере

При нажатии мышкой на картинку откроется содержание файла zadanie1.htm l (рис. 20)

Рис. 20. Текстовое содержимое файла zadanie1.htm l

Вопросы и задания для самопроверки

Рис. 21. Как сделать изображение гиперссылкой (графическая подсказка)

ОГЛАВЛЕНИЕ

Предисловие. 1

Знакомимся с Notepad++. 1

Настройки Notepad++. 1

Настройка кодировки UTF-8. 1

Быстрая вставка шаблона HTML кода. 2

Ремарки (примечания) 3

Автоподбор кода (Автозавершение) 4

Выделение кода разным цветом.. 4

Перенос строк, если текст кода слишком длинный. 5

Форматируем текст. 5

Списки. 5

Гоpизонтальная линия. 6

Графические форматы для сайтов. 7

Работа с изображениями. 7

Выравнивание изображений (тег align) 8

Картинка как гиперссылка. 9

Вопросы и задания для самопроверки. 10