Навигация:

Главная Случайная страница Обратная связь ТОП Интересно знать Избранные Новые материалы

Топ:

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

Методика измерений сопротивления растеканию тока анодного заземления: Анодный заземлитель (анод) – проводник, погруженный в электролитическую среду (грунт, раствор электролита) и подключенный к положительному...

Особенности труда и отдыха в условиях низких температур: К работам при низких температурах на открытом воздухе и в не отапливаемых помещениях допускаются лица не моложе 18 лет, прошедшие...

Интересное:

Искусственное повышение поверхности территории: Варианты искусственного повышения поверхности территории необходимо выбирать на основе анализа следующих характеристик защищаемой территории...

Мероприятия для защиты от морозного пучения грунтов: Инженерная защита от морозного (криогенного) пучения грунтов необходима для легких малоэтажных зданий и других сооружений...

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

Дисциплины:

Автоматизация Антропология Археология Архитектура Аудит Биология Бухгалтерия Военная наука Генетика География Геология Демография Журналистика Зоология Иностранные языки Информатика Искусство История Кинематография Компьютеризация Кораблестроение Кулинария Культура Лексикология Лингвистика Литература Логика Маркетинг Математика Машиностроение Медицина Менеджмент Металлургия Метрология Механика Музыкология Науковедение Образование Охрана Труда Педагогика Политология Правоотношение Предпринимательство Приборостроение Программирование Производство Промышленность Психология Радиосвязь Религия Риторика Социология Спорт Стандартизация Статистика Строительство Теология Технологии Торговля Транспорт Фармакология Физика Физиология Философия Финансы Химия Хозяйство Черчение Экология Экономика Электроника Энергетика Юриспруденция

Выполнение практической работы.

2020-05-10

0.00 из 5.00 0 оценок

Заказать работу

Практическая работа №14

Цель работы: создание простейшего web-сайта.

1) Создайте личную папку, куда вы будете сохранять все файлы своего сайта.

2) Запустите программу Блокнот (Notepad).

3) Наберите в окне программы листинг 1.

Листинг 1

<html>

<head>

<title> Практическая работа №1 ФИО </title>

</head>

<body>

Мой первый сайт

</body>

</html>

4) Сохраните файл под именем index.html (обязательно укажите тип файла HTML при сохранении) в личной папке.

5) Для просмотра Web-страницы используйте любую программу браузера (Internet Explorer, Opera, Mozilla Firefox или другую). Для этого, не покидая программу Блокнот (сверните окно на панель задач), откройте личную папку и двойным кликом по файлу lab_1_ФИО.html откройте окно браузера. На экране вы увидите результат работы, изображенный на рис. 2.

Рис. 2. Мой первый сайт

6) Вместо «мой первый сайт» написать свое любимое четверостишие, каждая строчка- новая строка. Пример приведен в листинге 2.

Листинг 2

<html>

<head>

<title> Практическая работа №1 ФИО </title>

</head>

<body>

<p>Белая береза</p>

<p>Под моим окном</p>

<p>Принакрылась снегом,</p>

<p>Точно серебром.</p>

</body>

</html>

7) На экране вы увидите результат работы, изображенный на рисунке 3.

Рис. 3. Четверостишие

8) Самостоятельно добавьте в заголовок название стихотворения и автора. Существует шесть тегов заголовков: от h1 до h6 (тег требует закрытия). Каждому тегу соответствует конкретный стиль, заданный параметрами настройки браузера.

9) Самостоятельно измените размер текста 2 и 3 строчки, используя тег <FONT>.

Тег <FONT> предоставляет возможности управления гарнитурой, цветом и размером текста. Изменение гарнитуры текста выполняется простым добавлением к тегу <FONT> атрибута FACE. Например, для отображения текста шрифтом Arial необходимо записать:

Для изменения цвета шрифта можно использовать в теге <FONT> атрибут COLOR=”X”. Вместо “X” надо подставить английское название цвета в кавычках (“ ”) или его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом необходимо представить этот цвет разложенным на три составляющие: красную (R – Red), зелѐную (G – Green), синюю (B – blue), каждая из которых имеет значение от 00 до FF. В этом случае мы имеем дело с так называемым форматом RGB. На рисунке 4 представлена краткая таблица цветов.

Рис. 4. RGB

1. <p> </p> - тэг абзацев

2. Align – указывает, как будет выровнен абзац:

Left – по левому краю

Center – по середине

Right – по правому краю

Justify – по ширине страницы

Пример: <p align=”center”>…</p>

<br> - тэг переноса на новую строку.

3. Выбор шрифта

<font> < /font> - тэг задания параметров шрифта текста.

Face – для задания шрифтов.

Пример: <font face=”Times New Roman”>…</font>

Size – задание размера текста

Цвет шрифта

Color

Страница – «Моя семья»

Техническое выполнение: в блокноте набирается HTML – код. Сохраняется с расширением.htm и открывается с помощью web-браузера.

HTML – код будет выглядеть так:

<HTML>

<HEAD>

<TITLE> Моя семья </TITLE>

</HEAD>

<H1 ALIGN= CENTER><fond size="medium"face= "verdana"> Моя семья</fond></H1>

<P ALIGN= justify>Привет всем,кто посетил мой сайт.<BR>

Меня зовут Иванова Мария. Мне 15 лет.Я учусь в 9-м классе МБОУ "СОШ№22" города Курска.

Мои любимы предметы в школе - математика и информатика.

Я еще не решила кем я хочу в будущем, хотя уже пора и задуматься,

но я думаю, я не ошибусь в выборе профессии и у меня будет светлое будущее.<BR>

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

У меня много друзей по всей России и за её пределами. С ними я общаюсь с помощью Skype.<BR>

А теперь я расскажу про свою семью.</P>

<H1 ALIGN= CENTER><A HREF= "F:\Информатика\Моя семья\Мама.htm"> - мама

</A></H1>

<H1 ALIGN= CENTER><A HREF= "F:\Информатика\Моя семья\папа.htm"> - папа

</A></H1>

<H1 ALIGN= CENTER><A HREF= "F:\Информатика\Моя семья\сестра.htm"> - сестра

</A></H1>

</BODY>

</HTML>

Страница – «мама»

HTML – код будет выглядеть так:

<HTML>

<HEAD>

</HEAD>

<BODY BACKGROUND="F:\Информатика\Моя семья\фон3.jpeg"> ~здесь вы прописываете ваш путь к фону~

<P ALIGN= justify>Мою маму зовут Наталья Ивановна. Ей 38 лет. Она работает бухгалтером в небольшой конторе.

Иногда ей приходится работать в выходные дни.<BR> В свободное время она любит проводить время со своей семьей.

Моя мама очень вкусно готовит, и к нам часто приходят гости.<BR>

</P>

</BODY>

</HTML>

Страница – «папа»

HTML – код будет выглядеть так:

<HTML>

<HEAD>

</HEAD>

<BODY BACKGROUND="E:\Информатика\Моя семья\фон4.jpg"> ~здесь вы прописываете ваш путь к фону~

<P ALIGN= justify>Моего папу зовут Владимир Васильевич. Ему 39 лет.

У папы очень много работы и мало свободного времени.<BR>

Когда у него бывают выходные, мы всей семьей ездим отдыхать на природу.

В юности папа занимался фотографиями, у нас дома много его снимков.<BR>

</P>

</BODY>

</HTML>

Страница – «сестра»

Попробуйте сделать самостоятельно!

Не забудьте, что все картинки, музыка и т.д., использованные при создании сайта, должны быть расположены в одной папке. Путь к ним, а также путь к «страницам» сайта должны быть указаны, начиная с корневого каталога. (например: C:\Users\School\Desktop\2018-2019\9\Иванова Мария\Сайт)

Главная страница сайта сохраняется с именем “index.html”

Практическая работа №14

Цель работы: создание простейшего web-сайта.

1) Создайте личную папку, куда вы будете сохранять все файлы своего сайта.

2) Запустите программу Блокнот (Notepad).

3) Наберите в окне программы листинг 1.

Листинг 1

<html>

<head>

<title> Практическая работа №1 ФИО </title>

</head>

<body>

Мой первый сайт

</body>

</html>

4) Сохраните файл под именем index.html (обязательно укажите тип файла HTML при сохранении) в личной папке.

Рис. 2. Мой первый сайт

Листинг 2

<html>

<head>

<title> Практическая работа №1 ФИО </title>

</head>

<body>

<p>Белая береза</p>

<p>Под моим окном</p>

<p>Принакрылась снегом,</p>

<p>Точно серебром.</p>

</body>

</html>

7) На экране вы увидите результат работы, изображенный на рисунке 3.

Рис. 3. Четверостишие

9) Самостоятельно измените размер текста 2 и 3 строчки, используя тег <FONT>.

Рис. 4. RGB

4. <p> </p> - тэг абзацев

5. Align – указывает, как будет выровнен абзац:

Left – по левому краю

Center – по середине

Right – по правому краю

Justify – по ширине страницы

Пример: <p align=”center”>…</p>

<br> - тэг переноса на новую строку.

6. Выбор шрифта

<font> < /font> - тэг задания параметров шрифта текста.

Face – для задания шрифтов.

Пример: <font face=”Times New Roman”>…</font>

Size – задание размера текста

Цвет шрифта

Color

Страница – «Мой класс»

HTML – код будет выглядеть так:

<HTML>

<HEAD>

<TITLE> Мой класс </TITLE>

</HEAD>

<H1 ALIGN= CENTER><fond size="medium"face= "verdana"> Мой класс</fond></H1>

<P ALIGN= justify>Привет всем, кто посетил мой сайт.<BR>

Меня зовут Иванова Мария. Мне 15 лет.Я учусь в 9-м классе МБОУ "СОШ№22" города Курска.

Мои любимы предметы в школе - математика и информатика.

Сегодня я хочу рассказать вам о моём классе<BR>

В классе нас 25 человек и мы все очень дружные<BR>

</P>

<H1 ALIGN= CENTER><A HREF= "F:\Информатика\Мой класс\классная.htm"> - классный руководитель

</A></H1>

<H1 ALIGN= CENTER><A HREF= "F:\Информатика\Мой класс\1.htm"> - первая подгруппа

</A></H1>

<H1 ALIGN= CENTER><A HREF= "F:\Информатика\Мой класс\2.htm"> - вторая подгруппа

</A></H1>

</BODY>

</HTML>

Практическая работа №14

Цель работы: создание простейшего web-сайта.

1) Создайте личную папку, куда вы будете сохранять все файлы своего сайта.

2) Запустите программу Блокнот (Notepad).

3) Наберите в окне программы листинг 1.

Листинг 1

<html>

<head>

<title> Практическая работа №1 ФИО </title>

</head>

<body>

Мой первый сайт

</body>

</html>

4) Сохраните файл под именем index.html (обязательно укажите тип файла HTML при сохранении) в личной папке.

Рис. 2. Мой первый сайт

Листинг 2

<html>

<head>

<title> Практическая работа №1 ФИО </title>

</head>

<body>

<p>Белая береза</p>

<p>Под моим окном</p>

<p>Принакрылась снегом,</p>

<p>Точно серебром.</p>

</body>

</html>

7) На экране вы увидите результат работы, изображенный на рисунке 3.

Рис. 3. Четверостишие

9) Самостоятельно измените размер текста 2 и 3 строчки, используя тег <FONT>.

Рис. 4. RGB

1. <p> </p> - тэг абзацев

2. Align – указывает, как будет выровнен абзац:

Left – по левому краю

Center – по середине

Right – по правому краю

Justify – по ширине страницы

Пример: <p align=”center”>…</p>

<br> - тэг переноса на новую строку.

3. Выбор шрифта

<font> < /font> - тэг задания параметров шрифта текста.

Face – для задания шрифтов.

Пример: <font face=”Times New Roman”>…</font>

Size – задание размера текста

Цвет шрифта

Color

ВЫПОЛНЕНИЕ ПРАКТИЧЕСКОЙ РАБОТЫ.

Учащиеся должны создать Web-сайт «Моя семья», который состоит из 4 страниц.

Страница – «Моя семья»

HTML – код будет выглядеть так:

<HTML>

<HEAD>

<TITLE> Моя семья </TITLE>

</HEAD>

<H1 ALIGN= CENTER><fond size="medium"face= "verdana"> Моя семья</fond></H1>

<P ALIGN= justify>Привет всем,кто посетил мой сайт.<BR>

Меня зовут Иванова Мария. Мне 15 лет.Я учусь в 9-м классе МБОУ "СОШ№22" города Курска.

Мои любимы предметы в школе - математика и информатика.

Я еще не решила кем я хочу в будущем, хотя уже пора и задуматься,

но я думаю, я не ошибусь в выборе профессии и у меня будет светлое будущее.<BR>

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

У меня много друзей по всей России и за её пределами. С ними я общаюсь с помощью Skype.<BR>

А теперь я расскажу про свою семью.</P>

<H1 ALIGN= CENTER><A HREF= "F:\Информатика\Моя семья\Мама.htm"> - мама

</A></H1>

<H1 ALIGN= CENTER><A HREF= "F:\Информатика\Моя семья\папа.htm"> - папа

</A></H1>

<H1 ALIGN= CENTER><A HREF= "F:\Информатика\Моя семья\сестра.htm"> - сестра

</A></H1>

</BODY>

</HTML>

Страница – «мама»

HTML – код будет выглядеть так:

<HTML>

<HEAD>

</HEAD>

<BODY BACKGROUND="F:\Информатика\Моя семья\фон3.jpeg"> ~здесь вы прописываете ваш путь к фону~

<P ALIGN= justify>Мою маму зовут Наталья Ивановна. Ей 38 лет. Она работает бухгалтером в небольшой конторе.

Иногда ей приходится работать в выходные дни.<BR> В свободное время она любит проводить время со своей семьей.

Моя мама очень вкусно готовит, и к нам часто приходят гости.<BR>

</P>

</BODY>

</HTML>

Страница – «папа»

HTML – код будет выглядеть так:

<HTML>

<HEAD>

</HEAD>

<BODY BACKGROUND="E:\Информатика\Моя семья\фон4.jpg"> ~здесь вы прописываете ваш путь к фону~

<P ALIGN= justify>Моего папу зовут Владимир Васильевич. Ему 39 лет.

У папы очень много работы и мало свободного времени.<BR>

Когда у него бывают выходные, мы всей семьей ездим отдыхать на природу.

В юности папа занимался фотографиями, у нас дома много его снимков.<BR>

</P>

</BODY>

</HTML>

Страница – «сестра»

Попробуйте сделать самостоятельно!

Главная страница сайта сохраняется с именем “index.html”

Практическая работа №14

Цель работы: создание простейшего web-сайта.

1) Создайте личную папку, куда вы будете сохранять все файлы своего сайта.

2) Запустите программу Блокнот (Notepad).

3) Наберите в окне программы листинг 1.

Листинг 1

<html>

<head>

<title> Практическая работа №1 ФИО </title>

</head>

<body>

Мой первый сайт

</body>

</html>

4) Сохраните файл под именем index.html (обязательно укажите тип файла HTML при сохранении) в личной папке.

Рис. 2. Мой первый сайт

Листинг 2

<html>

<head>

<title> Практическая работа №1 ФИО </title>

</head>

<body>

<p>Белая береза</p>

<p>Под моим окном</p>

<p>Принакрылась снегом,</p>

<p>Точно серебром.</p>

</body>

</html>

7) На экране вы увидите результат работы, изображенный на рисунке 3.

Рис. 3. Четверостишие

9) Самостоятельно измените размер текста 2 и 3 строчки, используя тег <FONT>.

Рис. 4. RGB

4. <p> </p> - тэг абзацев

5. Align – указывает, как будет выровнен абзац:

Left – по левому краю

Center – по середине

Right – по правому краю

Justify – по ширине страницы

Пример: <p align=”center”>…</p>

<br> - тэг переноса на новую строку.

6. Выбор шрифта

<font> < /font> - тэг задания параметров шрифта текста.

Face – для задания шрифтов.

Пример: <font face=”Times New Roman”>…</font>

Size – задание размера текста

Цвет шрифта

Color

Поделиться с друзьями:

Своеобразие русской архитектуры: Основной материал – дерево – быстрота постройки, но недолговечность и необходимость деления...

Типы оградительных сооружений в морском порту: По расположению оградительных сооружений в плане различают волноломы, обе оконечности...

История развития хранилищ для нефти: Первые склады нефти появились в XVII веке. Они представляли собой землянные ямы-амбара глубиной 4…5 м...

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