Сайты созданные с помощью гипертекста HTML
Практическая работа «Разработка сайта с использованием языка разметки гипертекстовых документов HTML»
Цель работы: формирование навыков использования основных тэгов языка HTML при создании Web-сайта в текстовом редакторе Блокнот.
Описание сайта
Web-сайт состоит из 5 связанных гиперссылками страниц:
- Титульная страница «Времена года» — файл index.htm;
- «Зима» – файл winter.htm;
- «Весна» – файл spring.htm;
- «Лето» – файл summer.htm;
- «Осень» – файл autumn.htm.
Описание работы
Часть 1 Создание страницы «Зима»
Скопировать папку «Времена года» в личную папку.
- Запустить приложение Блокнот. Создать html-код страницы «Зима», опираясь на изученный ранее материал (конспект, текст параграфа).
- Разместить на странице теги, определяющие страницу в целом.
- Введите заголовок первого уровня «Времена года» и заголовок второго уровня «Зима». Отцентрируйте заголовки.
- Выполните отбивку заголовков прямыми линиями. Цвет первого заголовка – черный, цвет второго – синий.
- Сохранить файл в папке «Времена года»: установите тип файлов – «Все файлы», укажите имя файла – winter.htm.
- Просмотрите страницу в браузере.
- Установите фоновый цвет страницы (голубой, bgcolor=»ccccff»).
- Поместите рисунок, выравнивая его по правому краю документа.
- Поместите стихотворение, выравнивая его по левому краю страницы. Каждую строку оформите отдельным абзацем, строфы отделите пустой строкой.
- Создайте панель навигации по сайту.
- Сохраните файл. Просмотрите страницу в браузере. Она должна иметь вид, соответствующий образцу.
Часть 2 Создание страницы «Весна»
- Запустить приложение Блокнот. Создать html-код страницы «Весна».
- Заголовки и их отбивку выполнить аналогично странице «Зима», цвет второго заголовка – зеленый.
- Цвет фона – бирюзовый (bgcolor=»00ffcc»).
- Стихи разместить аналогично странице «Зима», начертание символов определить как полужирный курсив.
- Рисунок разместить аналогично странице «Зима», установив размеры изображения по вертикали и горизонтали: 450 на 600 пикселей.
- Сохранить файл в папке «Времена года». Указать тип файлов – «Все файлы». Указать имя файла – spring.htm
- Открыть файл spring.htm с помощью браузера Internet Explorer. Вид окна должен соответствовать образцу.
Часть 3 Создание страницы «Лето»
- Запустить приложение Блокнот. Создать html-код страницы «Лето».
- Заголовки и их отбивку выполнить аналогично, цвет заголовков – черный.
- Разместить объекты на странице, согласно образцу. Цвет фона – зеленый (bgcolor=»00cc66″).
- Сохранить файл в папке «Времена года». Указать тип файлов – «Все файлы». Указать имя файла – summer.htm.
- Открыть файл summer.htm с помощью браузера Internet Explorer. Вид окна должен соответствовать образцу.
Часть 4 Создание страницы «Осень»
Запустить приложение Блокнот. Создать html-код страницы «Осень».
- Заголовки и их отбивку выполнить аналогично, цвет первого заголовка – черный, второго – коричневый оттенок #993300.
- Разместить объекты на странице, согласно образцу. Цвет фона – желтый (bgcolor=»ffcc66″).
- Сохранить файл в папке «Времена года». Указать тип файлов – «Все файлы». Указать имя файла – autumn.htm.
- Открыть файл autumn.htm с помощью браузера Internet Explorer. Вид окна должен соответствовать образцу.
Часть 5Создание титульной страницы
Запустить приложение Блокнот. Создать html-код титульной страницы.
- Поместить заголовок первого уровня «Времена года», выравнивание – по центру, цвет заголовка – синий.
- Выполнить отбивку заголовка прямой линией.
- Поместить таблицу из 2 строк и двух столбцов. Задать ширину границ – 3 пункта, размер ячеек 300 на 200 пикселей.
- Поместить в ячейки иллюстрации.
- Добавить панель навигации.
- Сохранить файл в папке «Времена года». Указать тип файлов – «Все файлы». Указать имя файла – index.htm.
- Открыть файл index.htm с помощью браузера Internet Explorer. Вид окна должен соответствовать образцу.
nsportal.ru
|
|
|
web-mastery.info
Создание Сайта HTML в Блокноте: (100)% Руководство
Как сделать сайт с помощью текстового редактора или создание сайта html в блокноте за пару минут!
Здравствуйте,уважаемые друзья и гости блога Pribylwm.ru! Вы хотите узнать как легко и быстро делается создание сайта html в блокноте на своем компьютере или любом мобильном устройстве? В этом уроке Вы узнаете, как создать простой веб-сайт с нуля, используя Блокнот. Если Вы на Mac, Вам нужно использовать TextEdit.
Есть другие профессиональные редакторы кода, которые Вы можете использовать для редактирования кода, такие как HTML
Если у Вас Mac и Вы хотите что-то лучше, чем TextEdit, Вы можете загрузить Adobe Brackets, который работает как на Mac, так и на Windows. Я буду работать на Windows и, следовательно, используя базовую версию Блокнота. Код в этом руководстве работает в любом редакторе, поэтому просто выберите понравившийся вам редактор и начнем.
Создание сайта HTML в блокноте — Ваша первая страница в блокноте!
Windows
Чтобы открыть Блокнот в Windows 7 или более ранней версии, нажмите Пуск -> Все программы -> Стандартные -> Блокнот. Вы также можете нажать «
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-файла в браузере
ПРИМЕЧАНИЕ. Если у Вас возникли проблемы с открытием файла, убедитесь, что Вы сохранили его в формате .html.
Просмотр HTML-файла в браузере
После открытия файла в вашем браузере он будет выглядеть так:
Обратите внимание на путь к файлу в
файле панели URL : /// C: /Users/WebsitesDIY/Desktop/HTML/index.html
Это полный путь к файлу на вашем компьютере
Центрирование текста
Теперь, когда Вы понимаете основы создания HTML-файла, давайте узнаем, как центрировать текст
Перейдите в созданный html-файл и добавьте теги
Удалите <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>
Кроме того, давайте изменим заголовок между тегами <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=”***.jpg” width=”200” height=”150” border=”1” align=”right” alt=”КОМПЬЮТЕР”>
Справа налево убирайте по одной команде и просматривайте результат.Например:
а) <IMG src=”*.jpg” width=”200” height=”150” border=”1” align=”right” >
Сохраните, просмотрите и т. д.
infourok.ru
Бесплатные веб-шаблоны
Шаблоны web сайтов — это практически готовый сайт, который не требует знания html, css или javascript, достаточно изменить заголовки, логотип (эмблему), наполнить шаблон контентом и можно загружать страницы в Интернет, сайт готов.
Шаблоны веб сайтов универсальны, на основе веб-шаблона можно создать сайт практически для любого проекта, например, для:
- Отображения личной информации.
- Продажи продуктов в онлайновом режиме.
- Отображении информации о компании или услугах.
- Отображения галерей фотографий.
- Размещения музыкальных файлов.
- Онлайнового размещения видео.
Все шаблоны веб-страниц изготовлены участниками проекта «HTML-pedia», Вы можете распоряжаться веб шаблонами, как вам угодно, но при условии, что ссылка на изготовителя веб-шаблона должна быть сохранена, или хотя бы имелась на одной из страниц сайта, например, на странице с ссылками.
Веб шаблон — Актеры кино. Шаблон состоит из страниц: главная, обои (фотогалерея), карта сайта, также в шаблон входит гостевая книга. Здесь вы можете на шаблон смотреть, а здесь скачать веб шаблон — Актеры кино. Архив весит 675 кБ, не пугайтесь, тяжесть архива от 6-ти вложенных в него обоев для рабочего стола. |
|---|
Как работать с веб шаблоном?
После того как вы скачали шаблон, вам возможно захочется что-то изменить в дизайне шаблона, или даже полностью заменить дизайн веб-шаблона на свой собственный. Даже не зная html и css вы можете это легко сделать. Для этого вам нужно будет лишь заменить шаблонную графику на свою, сохранив пропорции и расширение (.gif, jpg, png) изображений.
Также вам потребуется заменить общую информацию, содержащуюся в веб-шаблоне на свою личную информацию, об организации, продукте или услугах. Для это нужно щелкнуть по иконке веб-шаблона правой кнопкой мыши и выбрать в контекстном меню «Открыть с помощью» и наведя курсор на слово «Блокнот» щелкнуть левой кнопкой мыши. Веб шаблон откроется в блокноте в виде обычного текста, в котором вы можете делать изменения, заменяя текст шаблона на свой.
Еще проще работать с шаблоном открыв его с помощью любого визуального редактора, например, в таких как: «Frontpage», «Dreamweaver», или NVU. С их помощью вы сможете легко изменять и обновлять информацию в веб шаблоне.
Страницы: 1 | 2 | 3html-pedia.narod.ru