Как создать сайт в блокноте с картинками

Пример карты изображения

Чтобы было понятно, как всем вышеперечисленным пользоваться, приведу элементарный пример. Есть рисунок map.jpg. Его нужно разделить на две активные области. Щелчок на верхней части (зелёный цвет) откроет сайт «Одноклассники», нижняя же часть (синий цвет) будет вести на «ВКонтакте». Ссылки должны открываться в новой вкладке. Для создания карты выполняем следующие шаги.

1. Вставляем изображение на страницу и привязываем его к будущей карте (она будет называться social), для чего пишем следующий код:

2. Определяем на картинке будущие активные области и соответствующие им координаты. Это можно сделать в Paint, Photoshop или любом другом графическом редакторе. В нашем случае всё элементарно: прямоугольники равны и по высоте (114 пикселей) и по ширине (384 пикселя).

3. Начинаем создавать карту: открываем тег и прописываем в атрибуте name её название, которое обязательно должно совпадать со значением свойства usemap самой картинки:

4. С помощью тегов area определяем активные области:

5. Закрываем карту:

Итогом работы стала картинка, щелчок на разных частях которой ведёт к открытию разных социальных сетей, и вот такой HTMLкод:

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

Чтобы редактировать HTML online воспользуйтесь визуальным редактором по ссылке.

Полезные ссылки:

• Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
• Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
• Вёрстка сайта с нуля 2.0 — полноценный платный курс;
• Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).

Как вставить картинку в HTML

Для добавления картинки на HTML-страницу используется тег IMG. Поддерживаются форматы изображений: PNG, GIF и JPEG. К обязательным атрибутам тега относится атрибут src, в котором указывается адрес файла с изображением.

Простой способ, как вставить картинку на сайт html:

Но в таком виде изображение будет выведено с оригинальными размерами, без выравнивания, без дополнительной информации. Поэтому, для того, чтобы добавить картинку более красиво и правильно, нужно использовать дополнительные параметры. Рассмотрим их более подробно.

Атрибуты тега IMG

Для отображения картинки с помощью тега IMG используются следующие параметры:

• width/height – указывает ширину/высоту изображения (в процентах или пикселях);
• align – выравнивание картинки (right, left, center);
• border – определяет толщину рамки вокруг рисунка (в пикселях). Если атрибут не задан явно, то используется значение по умолчанию (border=0);
• hspace/vspace – указывает размер горизонтального/вертикального отступа от картинки до окружающего контента.

Рассмотрим теперь, как сделать картинку в html коде:

Здесь размеры указаны в пикселях.

Адаптивные размеры картинки при помощи HTML

Если вы верстаете «резиновый» или «адаптивный» дизайн сайта, то в html код картинки стоит указывать размеры в процентах. Попробуйте создать HTML-страницу с указанным ниже кодом (предварительно поместив рядом с html-файлом картинку с именем “img.jpg”) и изменять размер окна браузера. Вы увидите, что размер картинки будет изменяться в зависимости от размера окна.

     
Абзац 1
 
Абзац 2
  

В конструкторе сайтов «Нубекс» добавить картинку можно при помощи средств редактора. Более подробно об этом вы сможете узнать из статьи: Как добавить в текст изображение

Как сделать HTML страницу: основные теги для вставки картинки, текста, ссылок, кнопок и пр.

Д оброго всем времени!

Сегодняшняя заметка будет в виде небольшой «записной книжки» с перечнем основных тегов для создания и оформления HTML страницы (вопросы периодически по этому поводу возникают, но каждый из них относительно небольшой для отдельной заметки).

Да, признаться честно, я и сам не помню их все, и время-от-времени подглядываю в свой блокнот (который и решил перевести в отдельную запись). ��

Кстати, редактировать HTML файлы удобно с помощью блокнота Notepad++ (он подсвечивает код, подсказывает где какие теги закрыты или нет).

�� Кстати!

Если вы хотите, чтобы вашу созданную страницу смогли открыть не только вы (со своего ПК), но и другие пользователи в сети Интернет — то для неё необходимо заказать услугу хостинга (и разместить там эту страницу. ).

Основы: с чего начать формирование своей страницы

Типовой код страницы: азы

Язык HTML строится на тегах . Тег — это спец. обозначение какого-нибудь элемента, например, у картинки он: «» , у ссылки: «» и пр. (при помощи них браузер понимает, что представлено в том или ином участке страницы).

Теги заключаются в угловые скобки ( < >), и образуют пару: открывающий и закрывающий (эту пару также называют контейнером ).

Тело всей страницы заключается в теги: . . Обычно, на любой странице также представлен ее заголовок ( . ) и содержание ( . ).

�� Приведу ниже итоговый код простейшей веб-страницы (для примера):

На скрине ниже представлено, как эта страница будет выглядеть в браузере. Думаю, принцип «что за что отвечает» — должен быть ясен. ��

Скриншот. Как наша страница будет выглядеть в браузере

�� Примечание!

Чтобы создать веб-страницу (как в примере выше) — сделайте следующее:

• создайте текстовый документ (можно с помощью правого клика мышки на любом рабочем месте стола. );
• поменяйте у него расширение с TXT на HTML (если ваш проводник не показывает расширений — см. это);
• откройте файл для редактирования в блокноте (я использовал Notepad++);
• вставьте туда вышеприведенные строки кода страницы и сохраните файл;
• затем откройте полученный файл в браузере (в моем примере ниже — файл «page.html»). Для этого достаточно сделать клик ПКМ по этому файлу и в меню выбрать пункт «Открыт c помощью. «. ��

Скриншот. Создаем текстовый файл, вставляем туда код, сохраняем

Скриншот. Код страницы, блокнот Notepad++

��Важно!

Обычно для создания сайтов (и веб-страниц) используют ��спец. конструкторы и движки (вручную формируют HTML страницы реже, особенно, когда речь идет о десятках/сотнях страниц. ).

Адаптивный

Чтобы веб-страничка норм. отображалась не только на ПК, но и на телефонах (где куда меньший экран) — необходимо спец. образом подготовить страницу (например, использовать адаптивную версию — т.е. страница будет масштабироваться автоматически в зависимости от размера экрана устройства).

Для этого можно воспользоваться мета-тегом viewport (нижеприведенный код вставляется между тегами ):

Скриншот. Без тега viewport и с ним

Для того, чтобы скрыть какой-нибудь блок в мобильной версии сайта — достаточно использовать следующую конструкцию в CSS файле (разумеется, можно задать свою ширину в пикселях и класс*, который нужно скрыть) :

Кстати, обратите внимание, что совсем не обязательно указывать ширину картинок, кнопок и пр. элементов в пикселях — допускается использовать проценты (например, max-width:100% — значит макс. ширина 100%):

Основные теги HTML

Текст (строка, список, выравнивание по центру, выделение жирным, пробел, отступ)

Наиболее популярные теги для форматирования текста (в порядке распространенности):

• — тег для формирования абзаца. Каждый новый абзац заключен в свой тег (пример:

  Текст блока HTML с отступами (сверху — 1px, справа — 20px, снизу — 0px, слева — 30px)

  );

• , , , , , — заголовки статьи по старшинству;
• — перенос текста на следующую строку (закрывающий тег не нужен);

• ---

  — горизонтальная линия, разделяет два участка страницы (закрывающий тег не нужен);

• — цитата;
• — цитата;
• — выделение текста жирным шрифтом;
• — аналогично, жирный шрифт;
• — курсив, наклонный шрифт;
• — курсив;
• — зачеркнутый текст;
• — расположение текста (или «того», что будет заключено в тегах) по центру;
• — подсвеченный участок текста;
• — текст меньшего размера;
• — верхний индекс;
• — нижний индекс;
• — предварительно отформатированный текст;
• — термин;
• — сноска;
• — программный код;
• — дата и/или время.

Код значка телефон: ☎ (☎)

Код значка звездочка: ★ (★)

Код стрелочек: влево — &larr ; (←); вверх — ↑ (↑); вправо — → (→); вниз — ↓ (↓)

Другие символы можно найти ��в спец. таблицах

�� Примеры «игры» с тегами:

Текст блока HTML с отступами (сверху — 1px, справа — 20px, снизу — 0px, слева — 30px)

Текст по центру

Текст выделен жирным

Текст курсивом

Текст по центру и курсивом

Цитата

Скриншот. Как выглядят теги на странице

Картинка, изображение, фото

Простейший код для вставки картинки на HTML страницу будет выглядеть следующим образом:

https://ocomp.info/favicon-120×120.png » title color: #008080;»>Значок сайта » alt color: #00ccff;»>logo site «>

Обратите внимание, что:

• в «src» — указывается прямая ссылка на изображение (�� у меня она выделена синим);
• в «title» — указывается текст, который будет виден при наведении курсора на картинку (название картинки);
• в «alt» — описание картинки (рекомендуется многими сервисами и браузерами к указанию. Дело в том, что картинки грузятся не так быстро, как текст, — и было бы хорошо, если бы пользователь в процессе открытия веб-странички видел не пустое место, а описание изображения. ).

Скриншот. Пример отображения картинки

Второй пример (слегка отредактированный):

Обратите внимание на следующее:

• в «width» — можно указать ширину изображения (причем, вместо пикселей можно использовать и проценты!);
• в «height» — указывается высота изображения;
• в «align» — выравнивание картинки относительно текста (можно использовать значения: top, bottom, middle, left и right // сверху, снизу, по центру, слева, справа).

Скриншот. Картинка вставлена с выравниванием справа

Чтобы картинка была в виде ссылки (т.е. при нажатии на картинку происходило открытие какой-нибудь веб-страницы) ее необходимо «заключить» в ссылку:

Обратите внимание на начало и конец кода — картинка находится «внутри» кода ссылки (и, разумеется, в «href» — нужно вставить тот адрес, который должен открываться после клика по картинке).

Ссылка (в т.ч. на телефон, почту, Skype)

Простейший код ссылки:

В «href» нужно добавить свой URL-адрес (кстати, target=»_blank» — обозначает, что ссылка должна быть открыта в новой вкладке. Если вам это не нужно — просто удалите этот участок кода).

* Кроме этого, в «href» можно вставлять не прямую ссылку, а относительный путь:

• / — корневая директория;
• ./ — указывает на текущую папку;
• ../ — перейти на один уровень вверх;

�� Кстати, ссылки можно указывать не только на другие ресурсы, но и на свою почту, Skype, телефон (замените номер и никнейм в моем примере на свои):

Список

Код списка очень простой:

Обратите внимание, что:

• в «type» можно указать: circle, square, disc (см. скрин ниже: если «disk» заменить на «square» — вместо кружков будут квадратики);
• вместо тега — можно использовать (
  — в этом случае список будет нумерованный, т.е. вместо точек будут цифры).

    
Снежный барс
  
Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, относительно короткими лапами, небольшой головой и очень длинным хвостом. Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг. Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными пятнами.
 
Охотится снежный барс, в основном, на горных козлов и баранов, также в его рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по приблизительным оценкам их количество варьируется в районе около 10 тысяч особей. По состоянию на 2013 год, охота на снежных барсов повсеместно запрещена.