КГБОУ СПО «Алтайский строительный техникум»

Учебная дисциплина «Информатика и ИКТ» Практическая работа №28 «СОЗДАНИЕ ИНТЕРНЕТ-САЙТА»

Специальность: «Монтаж, наладка и эксплуатация электрооборудования промышленных и гражданских зданий и сооружений»

сайт с помощью блокнота.

Цели практической работы

2

специальные бесплатные сервисы и платформы.

Создание сайта самому с помощью конструктора сайтов, который позволяет объединить все этапы создания сайта в один пакет.

Заказ изготовления сайта дизайнерской web-студии. Стоимость сайта будет зависеть от целей, которые он должен будет преследовать.

Изучении основ html, свойств css и дальнейшем самостоятельном создании сайта на html.

1

2

3

4

3

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

Для создания HTML документов используют текстовые редакторы (например Блокнот), текстовые процессоры (Word), редакторы тегов HTML и визуальные HTML-редакторы. Вы можете создать HTML документ в простом Блокноте. Придерживаясь определённого стандарта и записав в текстовом файле HTML код, сохранив на жёстком диске и изменив расширение на .html или .htm вы получите полноценную web страничку.

Теги - это инструменты разметки текста. Теги могут прописываться как строчными, так и прописными буквами, разницы никакой нет. Теги бывают парными и не парными. Примером непарного тега является

---

- тег вставки в HTML документ горизонтальной линии. В качестве примера парного тега можно привести тег , этот тег начинает и заканчивает любой HTML документ. Вторая часть парного тега отличается от первой только наличием символа "/", однако первая часть тега может содержать и дополнительные параметры. Например в теге , параметр size="4" определяет размер текста, а color="red" задает цвет.

Основы html

4

, , .
Внутри тега располагается название вашего HTML документа (чаще всего именно его вы видите в качестве ссылки в результатах поиска поисковыми машинами).
Тело HTML документа
Заголовки
Заголовки в языке HTML выделяются тегами

,

, ... ,

. Таким образом существует 6 уровней заголовков h1 – самый крупный шрифт, h6 – самый маленький.
Абзацы в языке HTML
Абзац в HTML документе заключается в тег

.
Выделение текста в HTML
Для выделения текста, или области текста в HTML используют теги , , , таким образом строка жирный, курсив, подчёркнутый, жирный подчёркнутый курсив
Маркированные списки в HTML
Ненумерованные списки прописывают в HTML коде следующим образом

• пункт 1
• пункт 2
• пункт 3

.
Нумерованные списки в HTML
Нумерованные списки прописывают следующими тегами

1. пункт 1
2. пункт 2
3. пункт 3

.

Основы html

6

href="/html.rar">Скачать учебник языка HTML
Параметр href определяет место документа на который ссылается ссылка, в нашем примере ссылка относительная она ссылается на документ html.rar расположенный в той же директории что и страница HTML. Абсолютная ссылка прописывается следующим образом Скачать учебник языка HTML
Правила расстановки относительных ссылок в языке HTML
Если документ на который ссылается ссылка расположен в директории (папке) на уровень ниже, скажем dir, то ссылка параметр href будет иметь вид href="/dir/html.rar" , а если документ расположен в директории на уровень выше, то нам необходимо будет записать href="/../html.rar".
Вставка рисунков в HTML страницу
Рисунок в HTML документ вставляется следующим образом . Параметр src задаёт путь к изображению, параметры width и height определяют ширину и высоту рисунка в пикселях, параметр alt задаёт альтернативный текст - тот текст который отображается в браузере если отключена загрузка графики.

Основы html

7

style="border-collapse: collapse" bordercolor="#111111">
Ячейка11Ячейка12
Ячейка21Ячейка22

Таблицу открывает и закрывает тег , тег - определяет столбец, одиночный тег определяет ячейку в столбце, таким образом представленный код прописывает таблицу размером 2х2. Теги style и bordercolor определяют соответственно стиль отображения таблицы и цвет границы.

Добавление комментариев в HTML-код
Внесение комментариев в html-код страницы - это удобное средство для понимания написанного кода. Текст комментария должен быть заключен между открывающим разделителями. Текст, заключенный между такими скобками, браузером не воспринимается и на экране не отображается.

Основы html

8

элементе. Атрибуты всегда указываются в открывающем теге. Синтаксис атрибутов таков: название_атрибута="значение"
Атрибуты позволяют сделать текст на странице более наглядным.
Например, они могут выравнить текст нужным образом, увеличить его, поменять цвет и т.д.
< H1 align=CENTER >Выравнивание текста по центру
< H1 align=RIGHT >Выравнивание текста по правому краю
< H1 align= LEFT >Выравнивание текста по левому краю< /H1>

Основы html

9

создайте в ней папку «Мой первый сайт»;
В левом нижнем углу монитора нажмите кнопку «Пуск», затем - «Все программы» – «Стандартные» - «Блокнот»

Создание сайта с помощью блокнота

10

помощью блокнота

11

помощью блокнота

12

Для того чтобы отредактировать сайт, нажмите 1 раз правой кнопкой мыши на значок и в контекстном меню выберите «Открыть с помощью» – «Блокнот».
Для просмотра нажмите 2 раза левой кнопкой мыши на значок, и результат вашей работы отобразится в браузере.

разрабатываете самостоятельно.
В качестве примера можно рассмотреть создание сайта «ЖЕНСКОЕ ЛИЦО КОСМОНАВТИКИ»

Откройте с помощью Блокнота файл «glavnay.html» и запишите следующие теги (Бледно желтым выделены комментарии, вы их не пишите, просто обращаете внимание какой тег за что отвечает).

Создание сайта с помощью блокнота

13

Вводите свое название страницы

РЕГУЛЯРНО СОХРАНЯЙТЕ!!!

оформления вашего сайта.

Создание сайта с помощью блокнота

14

Продолжаем редактировать теги сайта. Вставим картинку и заголовок.

файл «glavnay.html», и результат вашей работы отобразится в браузере.

Создание сайта с помощью блокнота

15

Если цвет фона или заголовка вас не устроили, вернитесь в блокнот и поэкспериментируйте с другими цветами.

gipperssilka3.html, gipperssilka4.html.
Страниц необходимо столько, сколько вы запланировали гиперссылок.

Создание сайта с помощью блокнота

16

Продолжаем редактировать теги сайта. Вставим гиперссылки.

блокнота

17

Главная страница готова.
Можете просмотреть результат нажав 2 раза левой кнопкой мыши на файл «glavnay.html», и результат вашей работы отобразится в браузере.

помощью блокнота

19

Смотрим результат.

с помощью блокнота и записывает теги.

Смотрим результат.

помощью блокнота

19

Смотрим результат.

помощью блокнота

19

http://sheiko28.narod.ru/index/0-71;
Сайт «Веб-школа», раздел «HTML», http://www.weblabla.ru/html/html_main.html;
Сайт «Новосибирск», раздел «Как создать сайт самому», http://novosibirsk.cc/help/site/;
Сайт «Munasipov cайтостроение от А до Я», уроки создания сайта, http://munasipov.jimdo.com/%D1%83%D1%80%D0%BE%D0%BA%D0%B8-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F-%D1%81%D0%B0%D0%B9%D1%82%D0%B0/;
Сайт «Дом, который построил Джек», раздел «Строим», подраздел «Создание УР», статья «Описание основ HTML», http://uchresours.narod.ru/html.htmСайт «Дом, который построил Джек», раздел «Строим», подраздел «Создание УР», статья «Описание основ HTML», http://uchresours.narod.ru/html.htm и статья «Блокнот», http://uchresours.narod.ru/notepad.htm.

20

Надеюсь, что в скором времени Интернет-пространство пополнится вашими интересными сайтами.