Сайт

Готовый сайт html в блокноте по информатике – Шаблон сайта на чистом HTML

30.10.2019

Содержание

Сайты созданные с помощью гипертекста HTML

Практическая работа «Разработка сайта с использованием языка разметки гипертекстовых документов HTML»

Цель работы: формирование навыков использования основных тэгов языка HTML при создании  Web-сайта в текстовом редакторе Блокнот.

Описание сайта

Web-сайт состоит из 5 связанных гиперссылками страниц:

  1. Титульная страница «Времена года» — файл index.htm;
  2. «Зима» – файл winter.htm;
  3. «Весна» – файл spring.htm;
  4. «Лето» – файл summer.htm;
  5. «Осень» – файл autumn.htm.

Описание работы

Часть 1 Создание страницы «Зима»

Скопировать  папку «Времена года» в личную папку.

  1. Запустить приложение Блокнот. Создать html-код страницы «Зима», опираясь на изученный ранее материал (конспект, текст параграфа).
  2. Разместить на странице теги, определяющие страницу в целом.
  3. Введите заголовок первого уровня «Времена года» и заголовок второго уровня «Зима». Отцентрируйте заголовки.
  4. Выполните отбивку заголовков прямыми линиями. Цвет первого заголовка – черный, цвет второго – синий.
  5. Сохранить файл в папке «Времена года»: установите тип файлов – «Все файлы», укажите имя файла – winter.htm.
  6. Просмотрите страницу в браузере.
  7. Установите фоновый цвет страницы (голубой, bgcolor=»ccccff»).
  8. Поместите рисунок, выравнивая его по правому краю документа.
  9. Поместите стихотворение, выравнивая его по левому краю страницы. Каждую строку оформите отдельным абзацем, строфы отделите пустой строкой.
  10. Создайте панель навигации по сайту.
  11. Сохраните файл. Просмотрите страницу в браузере. Она должна иметь вид, соответствующий образцу.

Часть 2 Создание страницы «Весна»

  1. Запустить приложение Блокнот. Создать html-код страницы «Весна».
  2. Заголовки и их отбивку выполнить аналогично странице «Зима», цвет второго заголовка – зеленый.
  3. Цвет фона – бирюзовый (bgcolor=»00ffcc»).
  4. Стихи разместить аналогично странице «Зима», начертание символов определить как полужирный курсив.
  5. Рисунок разместить аналогично странице «Зима», установив  размеры изображения по вертикали и горизонтали: 450 на 600 пикселей.
  6. Сохранить файл в папке «Времена года». Указать тип файлов – «Все файлы». Указать имя файла – spring.htm
  7. Открыть файл spring.htm с помощью браузера Internet Explorer. Вид окна должен соответствовать образцу.

Часть 3 Создание страницы «Лето»

  1. Запустить приложение Блокнот. Создать html-код страницы «Лето».
  2. Заголовки и их отбивку выполнить аналогично, цвет заголовков – черный.
  3. Разместить объекты на странице, согласно образцу. Цвет фона – зеленый (bgcolor=»00cc66″).
  4. Сохранить файл в папке «Времена года». Указать тип файлов – «Все файлы». Указать имя файла – summer.htm.
  5. Открыть файл summer.htm с помощью браузера Internet Explorer. Вид окна должен соответствовать образцу.

Часть 4 Создание страницы «Осень»

Запустить приложение Блокнот. Создать html-код страницы «Осень».

  1. Заголовки и их отбивку выполнить аналогично, цвет первого заголовка – черный, второго – коричневый оттенок #993300.
  2. Разместить объекты на странице, согласно образцу. Цвет фона – желтый (bgcolor=»ffcc66″).
  3. Сохранить файл в папке «Времена года». Указать тип файлов – «Все файлы». Указать имя файла – autumn.htm.
  4. Открыть файл autumn.htm с помощью браузера Internet Explorer. Вид окна должен соответствовать образцу.

Часть 5Создание титульной страницы

Запустить приложение Блокнот. Создать html-код титульной страницы.

  1. Поместить заголовок первого уровня «Времена года», выравнивание – по центру, цвет заголовка – синий.
  2. Выполнить отбивку заголовка прямой линией.
  3. Поместить таблицу из 2 строк и двух столбцов. Задать ширину границ – 3 пункта, размер ячеек 300 на 200 пикселей.
  4. Поместить в ячейки иллюстрации.
  5. Добавить панель навигации.
  6. Сохранить файл в папке «Времена года». Указать тип файлов – «Все файлы». Указать имя файла – index.htm.
  7. Открыть файл index.htm с помощью браузера Internet Explorer. Вид окна должен соответствовать образцу.

nsportal.ru

Шаблоны сайтов — домашние странички

Шаблоны бесплатно

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

Этот html шаблон подойдет для создания своей веб страницы. Отредактировать шаблон можно в блокноте или специальном html редакторе.
КатегорияШаблоны личного сайта
Версткаhtml, css
Дополнительно
Размер файла69.36 Kb
Загрузок381
Рейтинг
Html шаблон личного сайта — хорошая замена стандартного шаблона на таких хостингах как Narod.ru. Для правки шаблона используйте текстовый редактор.
КатегорияШаблоны личного сайта
Версткаhtml, css
Дополнительно
Размер файла94.53 Kb
Загрузок400
Рейтинг
Этот готовый шаблон подойдет для создания собственного интернет сайта. Отредактировать шаблон можно в блокноте или специальном html редакторе.
КатегорияШаблоны личного сайта
Версткаhtml, css
Дополнительно
Размер файла19.63 Kb
Загрузок228
Рейтинг
Красивый шаблон подойдет для интернет странички в интернет. Изменяйте этот шаблон html редактором, типа FRONTPAGE.
КатегорияШаблоны личного сайта
Версткаhtml, css
Дополнительно
Размер файла61.32 Kb
Загрузок1391
Рейтинг
Этот простой шаблон подойдет для создания своего сайта. Чтобы исправить шаблон используйте блокнот или html редактор.
КатегорияШаблоны личного сайта
Версткаhtml, css
Дополнительно
Размер файла84.23 Kb
Загрузок780
Рейтинг
Html шаблон сайта — хорошая замена стандартного шаблона на таких хостингах как Narod.ru. Чтобы отредактировать шаблон воспользуйтесь редактором html.
КатегорияШаблоны личного сайта
Версткаhtml, css
Дополнительно
Размер файла38.4 Kb
Загрузок259
Рейтинг
# « 13 14 15 16 17 18 19 20 21 » #

Статистика

Шаблоны
Всего: 3 506
Загрузок: 727 367
Программы
Всего: 19
Загрузок: 350 747
Книги
Всего: 30
Загрузок: 559 737
Скрипты
Всего: 83
Загрузок: 527 712

Последние новости

21.06.10В начале июня 2010 года мы переступили символическую черту — 1 000 000 скачиваний бесплатных шаблонов. Очень надеемся, что начинающие веб мастера смогли найти среди них то, что им требовалось. В плана …
Прочесть — Новости в RSSБесплатный rss reader

web-mastery.info

Создание Сайта HTML в Блокноте: (100)% Руководство

Как сделать сайт с помощью текстового редактора или создание сайта html в блокноте за пару минут!

Здравствуйте,уважаемые друзья и гости блога Pribylwm.ru! Вы хотите узнать как легко и быстро делается создание сайта html в блокноте на своем компьютере или любом мобильном устройстве? В этом уроке Вы узнаете, как создать простой веб-сайт с нуля, используя Блокнот. Если Вы на Mac, Вам нужно использовать TextEdit.

Есть другие профессиональные редакторы кода, которые Вы можете использовать для редактирования кода, такие как HTML

Если у Вас Mac и Вы хотите что-то лучше, чем TextEdit, Вы можете загрузить Adobe Brackets, который работает как на Mac, так и на Windows. Я буду работать на Windows и, следовательно, используя базовую версию Блокнота. Код в этом руководстве работает в любом редакторе, поэтому просто выберите понравившийся вам редактор и начнем.

Создание сайта HTML в блокноте — Ваша первая страница в блокноте!

Windows

Чтобы открыть Блокнот в Windows 7 или более ранней версии, нажмите Пуск -> Все программы -> Стандартные -> Блокнот. Вы также можете нажать «Пуск» и выполнить поиск «Блокнот». Я буду делать это в Windows 10, которую не так давно приобрел и установил. Кстати, и Вам советую!

Mac

Откройте TextEdit и убедитесь, что для текстового редактора задан обычный текст, для этого выберите «Настройки»> «Новый документ»> «Выбрать обычный текст». Затем убедитесь, что отметили «Отображать HTML-файл как HTML-код» и «Отображать RTF-файл как RTF-код

» в разделе «Открыть и сохранить».

Затем скопируйте и вставьте следующий код в редактор:

<!DOCTYPE html>
<html>
<body>

<h2>Мой первый заголовок</h2>

<p>Мой первый абзац.</p>

</body>
</html>

Сохранение файла HTML

Сохраните файл как «index.html» с расширением HTML. Это очень важно, если Вы не добавите .html в конец имени, это не сработает.

Примечание. Несмотря на то, что .html предпочтительнее, Вы также можете использовать .htm без буквы «L».

Установите кодировку UTF-8, которая является предпочтительной для файлов HTML. Кодировка ANSI предназначена только для символов США и Западной Европы.

Открытие HTML-файла в браузере

Затем перейдите в папку, в которой Вы сохранили файл, и откройте его в браузере. В этом примере мы используем Chrome, но любой современный браузер должен работать.

ПРИМЕЧАНИЕ. Если у Вас возникли проблемы с открытием файла, убедитесь, что Вы сохранили его в формате .html.

Просмотр HTML-файла в браузере

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

Обратите внимание на путь к файлу в

файле панели URL : /// C: /Users/WebsitesDIY/Desktop/HTML/index.html

Это полный путь к файлу на вашем компьютере

Центрирование текста

Теперь, когда Вы понимаете основы создания HTML-файла, давайте узнаем, как центрировать текст

Перейдите в созданный html-файл и добавьте теги <center> </center> к «Моему первому заголовку», например, так: <center> <h2> Мой первый заголовок </h2> </center>

Удалите <p> Мой первый абзац. </p> на данный момент.

Сохраните файл и снова откройте его в браузере. Если окно вашего браузера все еще открыто, Вы можете просто нажать кнопку «Обновить», чтобы перезагрузить страницу.

Текст заголовка должен теперь быть сосредоточен в середине веб — страницы.

Добавление видео с YouTube на Ваш сайт

Чтобы добавить видео YouTube на свой сайт: Перейдите на Youtube и найдите видео, которое хотите добавить на свой сайт.

«Щелкните правой кнопкой мыши» на видео и «Скопируйте код для вставки».

Вставка кода для вставки видео в блокнот

Вставьте код для вставки в Блокнот

Код для встраивания будет выглядеть примерно так:

<iframe width = «854» height = «480» src = «https://www.youtube.com/embed/0tWSpXrkOp4» frameborder = «0» allowfullscreen> </iframe>

Вы можете изменить ширину и высоту по своему усмотрению. Просто измените эти цифры в коде и оставьте все остальное без изменений. В этом примере мы будем использовать width = «427» и height = «240». Вы можете установить для себя все, что Вы хотите.

Сосредоточьте видео, поместив тег <center> </center> вокруг кода вставки, скопированного с YouTube.

Кроме того, давайте изменим заголовок между тегами <h2> Мой первый заголовок </h2> на «Мой первый сайт в блокноте».

Добавление ссылки на другую страницу

Теперь мы добавим ссылку, которая идет в Google, когда люди нажимают на нее.

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

<a href=»http://www.google.com»>Перейдите в Google</a>.

Обратите внимание, как ссылка центрируется с помощью тегов center. Также обратите внимание на тег <br> непосредственно перед центральным тегом — это добавляет разрыв строки между видео и ссылкой.

Теперь Вы должны увидеть ссылку под видео, которая идет в Google, если Вы нажмете на нее.

Вы можете создавать ссылки, которые идут на любую страницу, которую Вы хотите. Просто измените то, что в атрибуте href.

Если Вы хотите открыть ссылку в новом окне, когда кто-то нажимает на нее, добавьте следующий атрибут в тег ссылки: <a href=»https://www.google.com» target=»_blank»>Перейти к Google</a>

Создание 2-й страницы для вашего сайта

Теперь мы создадим вторую страницу для вашего сайта и назовем ее page2.html. Таким образом, Вы можете создавать ссылки на другие части вашего сайта вместо ссылок на Google, как мы делали ранее.

Создайте новый HTML-файл и добавьте к нему приведенный ниже код. Сохраните это и назовите это page2.html

<!DOCTYPE html>
<html>
<body>

<center>
<h2>Страница сайта №2</h2>
</center>

<center>
<p>Это моя вторая страница.</p>
</center>

</body>
</html>

В итоге должно получиться вот так:

Ваш веб-сайт теперь будет иметь вторую страницу, на которую мы можем ссылаться с первой страницы.

Ссылки на Page2 с вашей главной страницы

Теперь, когда мы создали Page2, давайте изменим ссылку на первой странице, чтобы она ссылалась на page2.html.

Откройте «index.html» и измените URL, который ссылается на Google, чтобы вместо него перейти на страницу 2:

<a href=»page2.html»>Страница 2</a>

Вы находитесь на странице 2 вашего сайта

Если Вы успешно создали свою ссылку, Вы должны перейти на страницу page.html, нажав на ссылку под видео. Если по какой-то причине ваша ссылка не работает, вернитесь на несколько шагов назад и снова следуйте инструкциям. Знание того, как добавить ссылки / URL-адреса на Ваш сайт, очень полезно. Ведь в интернете это просто большая коллекция ссылок, проиндексированных Google.

Добавление классных стилей с помощью CSS

Теперь мы собираемся стилизовать ссылку на страницу 2 с помощью CSS, чтобы она выглядела как кнопка. CSS используется для управления макетом вашего сайта.

Скопируйте и вставьте следующий код в верхней части страницы index.html чуть ниже тега <body>. При вставке не перезаписывайте другой код.

<head>
<style media=»screen» type=»text/css»>
a {
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
padding: 10px;
background-color: #00AEEF;
color: #ffffff;
border-radius: 10px;
}
</style>
</head>

 

В основном этот фрагмент кода говорит браузеру добавить цвет фона и высоту к ссылке, которую мы сделали ранее. Мы также сделали углы немного округленными, добавив радиус границы 10px. Есть много бесплатных онлайн-учебников, где Вы можете узнать больше о CSS, чтобы Ваш сайт выглядел действительно красиво.

Добавление эффекта наведения на кнопку

Последнее, что мы собираемся сделать, это добавить эффект наведения на кнопку. Эффект при наведении заставит кнопку меняться в цвете, когда Вы наводите курсор мыши.

Добавьте следующий код чуть выше закрывающего тега </style>:

a:hover {
background-color: #005170;
}

И при наведении на кнопку ссылки ее цвет будет изменяться:

Ваш сайт должен выглядеть следующим образом

Ваш веб-сайт должен теперь выглядеть как пример на картинке. Должен быть заголовок с именем вверху, видео посередине и кнопка внизу. Когда Вы наводите курсор мыши на кнопку, цвет должен измениться на темно-синий. Если Ваш веб-сайт выглядит неправильно, возможно, в коде есть ошибки. Пожалуйста, вернитесь на несколько шагов и попробуйте снова. Важно понять основы, прежде чем перейти к следующему шагу, где мы покажем, как разместить свой веб-сайт в Интернете, чтобы каждый мог получить к нему доступ.

Создание сайта HTML в блокноте — Сделай свой сайт Живым!

Чтобы мир мог видеть Ваш сайт, его необходимо загрузить на веб-сервер, который постоянно подключен к Интернету 24/7. Теперь мы не рекомендуем настраивать собственный сервер. Гораздо проще платить 3 или 5 долларов в месяц профессиональному провайдеру веб-хостинга, который сделает это за Вас. Я рекомендую использовать McHost и подписаться на тарифный план на год или более для запуска вашего сайта и получения БЕСПЛАТНОГО доменного имени и множество дополнительных бонусов. Этот сайт размещен на McHost, и нам это нравится. Они быстрые, безопасные и имеют отличное обслуживание клиентов.

Теперь Вы знаете как быстро и легко, даже для новичка, делается создание сайта html в блокноте на простом компьютере или мобильном устройстве! Всем удачи и благополучия! До новых встреч!

pribylwm.ru

11 класс. Создание web — страниц. Практическая работа №1

Разработка Web-сайтов. Тема — Основные тэги HTML. 11 кл

Задание № 1: Создать структуру Web-страницы.

1. В своей папке создайте папку Создание Web-сайта.

2. Запустите текстовый редактор Блокнот .

3. Введите HTML-код, задающий структуру Web-страницы:

(Ваша фамилия и имя)

ДИНАМИЧЕСКОЕ ПРОГРАММИРОВАНИЕ

5. Сохраните файл с именем Структура.

6. Скопируйте созданный файл, переименуйте копию в index.html.

Задание №2: Редактирование Web-страницы.

1. Откройте файл index.html с помощью браузера.

2. Для редактирования откройте этот же файл с помощью «Блокнот».

3. Текст ДИНАМИЧЕСКОЕ ПРОГРАММИРОВАНИЕ поместите в контейнер<H1>…H1>. Сохраните файл Блокнота, обновите Web -страницу и выясните, что изменилось.

4. После закрывающего тега H1> добавьте тег <HR>. Выясните, что изменилось.

5. После <HR> добавьте следующий текст:
Динамическое программирование – это способ решения сложных задач путём сведения их к более простым подзадачам того же типа. Такой подход впервые применил американский математик Р. Беллман. Его идея состояла в том, что оптимальная последовательность шагов оптимальна на любом участке. Например, в задачах поиска оптимального маршрута по графу или нахождению количества программ исполнителя. В информатике динамическое программирование часто сводится к тому, что мы храним в памяти решение задач меньшей размерности, что ускоряет выполнение программы, если использовать рекурсивную функцию.
Для справки:
Оптимальный
наиболее приемлемый, самый благоприятный, наилучший для чего-либо.

6. Сохраните текст в Блокноте, сверните его, обновите страницу браузера, просмотрите изменения.

Задание № 3: Форматирование Web-страницы.

1. Добавьте выделенные строки в текст Web-страницы.

<FONT color=” maroon ”>

ДИНАМИЧЕСКОЕ ПРОГРАММИРОВАНИЕ
FONT>
Просмотрите изменения.

2. Добавьте выделенные строки в текст Web-страницы

<P align=”left”>
Динамическое программирование – это способ решения сложных задач путём сведения их к более простым подзадачам того же типа.
P>
Просмотрите изменения.
3. Добавьте выделенные строки в текст Web-страницы.
<P align=”justify”>
Такой подход впервые применил американский математик Р. Беллман. Его идея … что ускоряет выполнение программы, если использовать рекурсивную функцию.

P>
Просмотрите изменения.

4. Самостоятельно оформите текст примерно так, как в рамке ниже:

5. Добавьте выделенные строки в текст Web-страницы
bgcolor=»FFFFCC«>

Просмотрите изменения.

6. Найдите фото Р. Беллмана в интернете. сохраните в свою папку с Web-страницей.

7. Добавьте выделенные строки в текст Web-страницы (вместо *** вставьте имя сохранённого изображения).


Р. Беллман. ”>
Просмотрите изменения.

8. Закройте файлы, сохранив их. Ваша Web-страница готова к просмотру.

Задание № 4.

Исследуйте команду отображающую рисунок:
<IMG src=”***.jpgwidth=”200” height=”150” border=”1” align=”rightalt=”КОМПЬЮТЕР”>
Справа налево убирайте по одной команде и просматривайте результат.Например:
а) <
IMG src=”*.jpgwidth=”200” height=”150” border=”1” align=”right” >
Сохраните, просмотрите и т. д.

infourok.ru

Бесплатные веб-шаблоны

Шаблоны web сайтов — это практически готовый сайт, который не требует знания html, css или javascript, достаточно изменить заголовки, логотип (эмблему), наполнить шаблон контентом и можно загружать страницы в Интернет, сайт готов.

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

  1. Отображения личной информации.
  2. Продажи продуктов в онлайновом режиме.
  3. Отображении информации о компании или услугах.
  4. Отображения галерей фотографий.
  5. Размещения музыкальных файлов.
  6. Онлайнового размещения видео.

Все шаблоны веб-страниц изготовлены участниками проекта «HTML-pedia», Вы можете распоряжаться веб шаблонами, как вам угодно, но при условии, что ссылка на изготовителя веб-шаблона должна быть сохранена, или хотя бы имелась на одной из страниц сайта, например, на странице с ссылками.



Веб шаблон — Актеры кино. Шаблон состоит из страниц: главная, обои (фотогалерея), карта сайта, также в шаблон входит гостевая книга. Здесь вы можете на шаблон смотреть, а здесь скачать веб шаблон — Актеры кино. Архив весит 675 кБ, не пугайтесь, тяжесть архива от 6-ти вложенных в него обоев для рабочего стола.


Как работать с веб шаблоном?

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

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

Еще проще работать с шаблоном открыв его с помощью любого визуального редактора, например, в таких как: «Frontpage», «Dreamweaver», или NVU. С их помощью вы сможете легко изменять и обновлять информацию в веб шаблоне.

Страницы: 1 | 2 | 3

html-pedia.narod.ru

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *