Создать сайт через блокнот html образец: Как создать простой HTML сайт в блокноте

Создание HTML-документа в редакторе Блокнот | Информатика

Автор: Лямина Ирина Владимировна

Организация: МБОУ СОШ №3

Населенный пункт: Свердловская область, г. Реж

Рекомендации по выполнению лабораторной работы

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

1. Заголовок документа;
2. Тело документа;

Файл справочника Sprav_html.doc находится на рабочем столе в папке Учебник по WEB/Справочная информация. В этом файле содержится палитра «безопасных цветов» для Web.

В структуре большинства Web-страниц доминирующее положение занимает информация, имеющая текстовый формат. Учитывая этот факт, следует отметить важность выбора способа представления текстовой информации на Web-странице. От того, как используется текст, во многом зависит впечатление пользователя от Вашего сайта. Вы должны изучить все способы оформления текста, способствующие тому, чтобы этот текст становился максимально выразительным.

Заголовки

Формирование заголовков производится тегами <h2> и <H6>.

<h2> – верхний уровень в иерархии заголовков.

<H6> – нижний уровень (самый мелкий).

Теги заголовков парные. Каждый элемент заголовка должен иметь открывающий и закрывающий теги (<h2> и </h2>).

Допускается использование атрибута ALIGN, определяющего способ выравнивания заголовков.

Задание 1

1. Откройте ранее созданный файл имя_знака.htm
2. Откройте файл справочника Справочник по HTML.doc из папки Учебник по WEB/Справочная информация. Найдите раздел «Форматирование текста». Ознакомьтесь со значениями атрибутов тегов заголовков.
3. Напишите HTML-код, содержащий отцентрированный заголовок первого уровня «Знак зодиака». Сохраните с изменениями Web-страницу имя_знака.html

Образец результата

Текстовые абзацы

Тег <P> задает начало абзаца и вставляет соответствующий пустой интервал для отделения данного абзаца от предыдущего. Парный тег можно опустить. Тег абзаца имеет только один атрибут align.

Не следует использовать тег <P> для создания дополнительной пустой строки. Этот подход не поддерживается стандартом HTML, и современные браузеры игнорируют все пустые теги <P>.

Принудительный разрыв строки

Тег <BR> позволяет выполнить перенос оставшейся части текста абзаца на следующую строку. Это непарный тег. В отличие от тега абзаца тег <BR> не увеличивает интервал в тексте.

Бывает наоборот, нежелательно разрывать текст, например: фамилия и инициалы, «1991 г.». Тэг <NoBR> используется для запрещения разрыва строки: <NoBR>1991 г.</NoBR>. Строка может быть разорвана браузером либо до открывающегося тэга, либо после закрывающегося.

Задание 2

1. Откройте файл справочника Справочник по HTML.doc из папки Учебник по WEB/Справочная информация. Найдите раздел «Форматирование текста». Выясните, какие значения может принимать атрибут align тега <P>.
2. В предыдущем задании Вы оформили заголовок страницы. Откройте файл имя_знака.htm и оформите текстовые абзацы этой страницы. Первый абзац необходимо отцентрировать, второй – выровнять по ширине.
3. Выясните отличие использования тега <P> и тега <BR>.

Образец результата

Изменение шрифта

Парный тег <FONT> позволяет определить параметры шрифта данного фрагмента текста, которые устанавливаются с помощью соответствующих атрибутов этого тега. Основные атрибуты тега <FONT FACE=”Arial”>:

• SIZE – используется для задания абсолютного размера шрифта между 1 и 7. Size=+n/–n – увеличивает или уменьшает шрифт относительно текущего значения.
• COLOR – задает цвет текста: color=“имя”. При определении цвета шрифта можно использовать либо названия цветов, либо их шестнадцатеричные коды.
• FACE – задает имя шрифта, используемого для отображения данного фрагмента текста, например: face=“Arial”.

При указании значения атрибута, определяющего имя шрифта, можно через запятую задать несколько имен шрифтов, которые браузер ищет в локальной системе. Использоваться будет тот, имя которого найдено первым.

Начертания шрифтов

Тег <B> и </B> — позволяет отобразить текст полужирным шрифтом.

Тег <I> и </I> — позволяет отобразить текст в курсивном начертании.

Тег <U> и </U> — отображает подчеркнутый текст.

Подчеркнутый текст следует применять осторожно, чтобы не спутать его с гиперссылкой.

Задание 3

1. 1.Откройте файл справочника Справочник по HTML.doc.doc. Найдите раздел «Форматирование текста». Ознакомьтесь с атрибутами тега <font>.
2. 2.В предыдущих заданиях Вы оформили заголовок и задали параметры для двух абзацев страницы (файл имя_знака.htm). Теперь задайте параметры шрифта для этих текстовых абзацев.
3. 3.Для первого абзаца: имя шрифта Comic Sans MS, цвет шрифта 7B68EE, размер шрифта 5. Для второго абзаца: имя шрифта Arial, цвет шрифта black, размер шрифта 4.

Образец результата

Нижние и верхние индексы

Тег <SUB> и </SUB> позволяет опустить текст на полстроки ниже обычного текста. Текст, расположенный между этими тегами, будет изображаться шрифтом того же размера, что и обычный текст.

Тег <SUP> и </SUP> позволяет поднять текст на полстроки выше обычного текста. Текст, расположенный между этими тегами, будет изображаться шрифтом того же размера, что и обычный текст.

Задание 4

1. 1.Напишите HTML-код страницы, в котором используются нижние и верхние индексы.

Горизонтальные линии на HTML – странице

С помощью тегов <P> и <BR> выделяются смысловые фрагменты в документе. Но иногда необходимо отчетливо показать границу между разделами, чтобы подчеркнуть жесткое разделение текста.

Горизонтальная линия организуется с помощью тега <HR>. Это непарный тег. По умолчанию (если нет атрибутов) линия пересекает всю ширину страницы и отображается так, что создается иллюзия трехмерности.

Атрибуты тега <HR> определяют выравнивание линии по горизонтали, позволяют изобразить линии трехмерными или подавить иллюзию трехмерности, задать толщину и длину линии. Горизонтальные линии применяются для:

1. Разделения текстовых фрагментов. С помощью тонких линий можно несколько «разрыхлить» мелкий текст Web-страницы. После каждого тематического раздела вставляется линия, визуально разделяющая части текста. Этот же способ применяется для очень длинных Web-страниц с монотонным текстом;
2. Выделения заголовков, сносок, ремарок автора;
3. Создания прямоугольников и квадратов. Путем подбора атрибутов size и width горизонтальную линию можно превратить в прямоугольник или квадрат.

Пример:

<hr size=”4” width=”75%”>

Браузер изобразит трехмерную горизонтальную линию толщиной 4 пикселя и шириной, составляющей 75% от ширины экрана браузера.

 

Образец результата

Задание 5

1. Откройте раздел «Форматирование текста» в файле справочника Справочник по HTML.doc, размещенном в папке Учебник по WEB/Справочная информация. Ознакомьтесь с атрибутами тега <hr>.
2. Откройте файл имя_знака.htm и отделите заголовок от последующих абзацев горизонтальной линией. Параметры горизонтальной линии: толщина – 4 пикселя, ширина – 50% ширины экрана, имя цвета – dodgerblue, иллюзия трехмерности подавлена. При задании цвета линии использовать его шестнадцатеричное RGB-значение.

Образец результата

Бегущая строка

Эффект «бегущей строки» – популярное украшение Web-страниц, особенно связанных с театром, биржевыми операциями, броской рекламой.

Но в то же время многие читатели ощущают дискомфорт в результате применения этого инструмента.

Текст, выделенный тегами <MARQUEE> и </MARQUEE>, изображается браузером в виде бегущей строки. Атрибуты тега <MARQUEE> определяют следующие параметры бегущей строки:

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

Пример программы создания бегущих строк с различными параметрами приведен в листинге 1.

 

Задание 6

1. Откройте файл справочника Справочник по HTML.doc из папки Учебник по WEB/Справочная информация. Найдите раздел «Бегущая строка». Ознакомьтесь с атрибутами всех тегов, используемых при создании бегущей строки. Разберите приведенный в примере программный код. Реализуйте его.
2. Откройте созданный Вами файл имя_знака.htm и дополните его бегущей строкой. Параметры бегущей строки: направление движения – слева направо, цвет фона – светло-серый, повторение – 5 раз.

Листинг 1

Создание бегущей строки

<html> <body> <font color=”green”> <marquee direction=”right”> Эта зеленая строка появляется слева и движется вправо.</marquee> </font> <font color=”red”> <marquee behavior=”slide”> Этот красный текст не бегает. </marquee> </font> <marquee bgcolor=”red” behavior=”alternate”> Это качающийся текст на красном фоне. </marquee> <marquee height=”20%” width=”50%” bgcolor=”olive”> Этот текст занимает 50% ширины экрана. </marquee> <marquee bgcolor=”grey” behavior=”alternate” scrollamount=”40”> За один шаг строка перемещается на 40 пикселей. Это слишком быстро. </marquee> <marquee bgcolor=”grey” behavior=”alternate” scrolldelay=”400”> 400 миллисекунд ожидается следующий шаг. Это слишком медленно. </marquee> </body> </html>

Образец результата

 

Список использованной литературы:

Лекциопедия – библиотека лекционного материала https://lektsiopedia. org/

Приложения:

1. file0.doc.. 891,5 КБ
2. file1_c3f09bbe-9e23-4f5b-8.. 24,9 МБ

Опубликовано: 12.02.2021

Узнайте, как создать первую страницу

Создайте свою первую веб-страницу

Узнайте, как использовать редактор для создания первой веб-страницы.

Изучение HTML

Мы не научим вас кодировать HTML или CSS. Используйте для этого учебник, такой как W3Schools: начните с «Введение в HTML» и следуйте страницам до «HTML CSS».

Основные шаги

Это основные шаги, которые вы должны предпринять. Каждый шаг подробно описан ниже.

1. Установить редактор
2. Создайте папку для вашего веб-сайта
3. Добавить веб-страницу (файл index.html)
4. Добавить HTML-код
5. Предварительный просмотр веб-страницы

1. Установите редактор

Для написания HTML-кода вам понадобится текстовый редактор. Вы можете использовать редактор, уже установленный на вашем компьютере (например, Блокнот), но настоятельно рекомендуется использовать редактор, подходящий для управления сайтом и написания кода. Рекомендуем:

• Код Visual Studio
• Сублимтекст

Установите выбранный вами редактор и выполните следующие действия.

11-05-2023 В этом уроке используется Atom, но, к сожалению, он больше не поддерживается. Эта страница скоро будет обновлена!

2. Создайте папку для своего веб-сайта

В Проводнике Windows (или Finder) создайте папку для своего веб-сайта, например, в папке «Документы»:

В Visual Studio Code: выберите Файл > Открыть папку… и откройте только что созданную папку.

Теперь вы готовы добавить файлы в папку веб-сайта.

Важно: добавьте все файлы в папку сайта

Все файлы, которые вы хотите добавить на свой сайт, должны находиться в папке сайта. Поэтому, если вы хотите добавить изображения, скопируйте их в папку сайта (рекомендуется создать для этого подпапку, например, с названием «img»).

3. Добавить веб-страницу (файл index.html)

Добавить файл через файл > Новый файл , назовите его «index. html» и создайте его (нажмите Create File ):

Ваше рабочее пространство должно выглядеть как:

чтобы добавить HTML-код в файл index.html .

4. Добавьте код HTML

Перейдите к введению HTML W3Schools, или к любому другому учебнику, который показывает начало HTML-документа. Теперь скопируйте код примера HTML (выделите его, щелкните правой кнопкой мыши и выберите Скопируйте или нажмите CTRL+C):

Затем вставьте его в файл index.html в редакторе (используйте Правка > Вставить или CTRL+V):

Внесите некоторые изменения в код. Добавьте правильный заголовок, заголовки и текст абзаца (данные ниже приведены только для примера):

Есть ли более быстрый способ сделать все это? Да!

Введите ! , а затем щелкните первый фрагмент в автозаполнении (или просто нажмите Enter). Он сгенерирует шаблон HTML по умолчанию.

Добавить изображение

Сначала добавьте новую папку «img». Используйте значок Новая папка рядом с названием вашей папки (в данном примере «Сайт»):

Добавьте имя «img» и нажмите Enter:

Скопируйте изображение, которое будет использоваться на странице в папку «img» (используйте Windows Explorer/Finder):

Затем вставьте его в подпапку «img» папки веб-сайта:

Теперь изучите главу учебного пособия W3Schools по изображениям. Добавьте код для элемента изображения, чтобы встроить изображение в html-документ:

5. Предварительный просмотр веб-страницы

Сохраните файл. ( Файл > Сохранить или CTRL+S)

Чтобы проверить, хорошо ли выглядит страница, вы можете просмотреть ее в своем браузере. В Проводнике Windows (или Finder) перейдите к папке веб-сайта и дважды щелкните файл index.html :

Возможно, будет неплохо продолжить работу с открытым предварительным просмотром, например. в браузере рядом с редактором:

Подсказка:
Чтобы быстро перейти к папке веб-сайта, вы можете открыть ее непосредственно из VS Code. Щелкните правой кнопкой мыши вкладку файла и выберите «Показать в проводнике».

Еще один способ получить встроенный предварительный просмотр в VS Code — установить для него расширение. Откройте представление «Расширения» (Ctrl+Shift+X) и выполните поиск «предварительный просмотр в реальном времени» или «предварительный просмотр html», чтобы увидеть список доступных расширений предварительного просмотра HTML.

Теперь вы можете дополнительно настроить страницу, сделать ее своей, попробовать что-то новое.
Если вы еще этого не сделали, то сейчас самое время узнать немного больше об HTML из руководств W3schools. В по крайней мере, прочитайте первые страницы от Введения до Стили и используйте / проверьте то, что вы узнали, добавив это в свой HTML-документ. Может быть даже добавить немного стиля ( перейдите к учебнику по CSS W3Schools, чтобы узнать больше).

Теперь вы готовы загрузить файлы на свой сайт. Это объясняется на отдельной странице:

Важно: ваша первая страница (домашняя) должна иметь имя index.html или index.php

Чтобы ваш адрес сайта работал, ваш сайт должен иметь индексный файл: ваш первый страница (домашняя страница) должна иметь имя index.html (или index.php ). Имена файлов чувствительны к регистру. Используйте только символы нижнего регистра для индексных файлов.

Проблемы с изображением? например изображение не отображается

Наиболее распространенная причина того, что изображения не работают, — это проблемы с именами файлов. На веб-сайте имена файлов и папок вводятся с учетом регистра. Поэтому вы должны быть осторожны, смешивая прописные и строчные буквы. Совет: всегда используйте символы нижнего регистра! Другие проблемы могут возникнуть при обращении к изображению в html-коде. Или вы забыли загрузить изображения. Некоторые примеры приведены ниже. Некоторые статьи по этим вопросам:

• Работа с файлами
• причин, почему изображения не загружаются

Совет для Windows: всегда отображайте полные имена файлов в проводнике Windows. Перейдите на вкладку View , затем через options выберите «изменить папку и параметры поиска»:

На вкладке View снимите флажок «Скрыть расширения для известных типов файлов» и нажмите Ok :

Пример: Различия в регистре (прописные и строчные буквы)

Можете ли вы определить, что здесь не так?:

В приведенном выше случае расширение файла указано в верхнем регистре. И в html-коде это в нижнем регистре:

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

Советы по кодированию: автоматическая вставка кода

Создайте новый файл ( Ctrl+N ) для практики. Нажмите Ctrl + S , чтобы сохранить его как файл .html. Затем введите html и нажмите Введите , чтобы вставить основной HTML-код:

Теперь добавьте заголовок h2, набрав h2 (внутри тела), чтобы добавить заголовок страницы на страницу:

90 026 атом советы: добавьте пакеты

Вы можете улучшить Atom с помощью пакетов. Мы покажем вам, как установить пакет browser-plus в качестве примера.

• Выберите Файл > Настройки
• Нажмите Установить
• В поле поиска введите браузер-плюс
• Нажмите Установите (это может занять несколько минут, вы можете продолжать использовать Atom)

После этого вы можете закрыть настройки:

После успешной установки пакета Browser-Plus используйте ALT+CTRL+O, чтобы запустить его (или щелкните правой кнопкой мыши > Открыть Browser-Plus).

Создать HTML-страницу — AWS SDK для JavaScript

Создать HTML-страницу — AWS SDK для JavaScript

AWS SDK для JavaScript V3 API Справочное руководство подробно описывает все операции API для AWS SDK для JavaScript. версия 3 (V3).

Этот раздел является частью руководства по созданию приложения AWS, которое отправляет и извлекает сообщения с помощью AWS SDK для JavaScript и Amazon Simple Queue Service (Амазон СКС). Чтобы начать с начала руководства, см. раздел Создание примера приложения для обмена сообщениями.

Теперь вы создаете HTML-файлы, необходимые для работы приложения. графический пользовательский интерфейс (GUI). Создайте файл с именем index.html . Скопируйте и вставьте код ниже в на index.html . Этот HTML-код ссылается на main.js . Это пакетная версия index.js, которая включает в себя необходимый AWS SDK для модулей JavaScript.

  <голова> <метакодировка="utf-8" /> <ссылка rel="icon" href="./images/favicon.ico" />    <стиль> .messageelement {
 маржа: авто;
 граница: 2px сплошная #dedede;
 цвет фона: #D7D1D0 ;
 радиус границы: 5px;
 максимальная ширина: 800 пикселей;
 отступ: 10 пикселей;
 поле: 10px 0;
 }
 . messageelement::после {
 содержание: "";
 ясно: оба;
 дисплей: таблица;
 }
 .messageelement img {
 плыть налево;
 максимальная ширина: 60 ​​пикселей;
 ширина: 100%;
 поле справа: 20px;
 радиус границы: 50%;
 }
 .messageelement img.right {
 поплавок: справа;
 поле слева: 20px;
 поле справа: 0;
 }   <тело> <дел>
Пример приложения для обмена сообщениями AWS
 <дел>