Практическая работа по html: Практические и лабораторные работы по HTML. Скачать PDF

Практические работы по HTML

Практические работы по HTML

Задание № 1.

Создание простейшего файла HTML

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

2. Нажмите правой кнопкой мыши и выберите «Создать» — «Пустой файл».

3. Введите имя файла rasp.html.

4. Нажмите правой кнопкой мыши «Открыть с помощью» — «Mousepad»

5. Наберите простейший html документ:

Учебный файл HTML

Расписание занятий на среду.

6. Сохраните документ, закройте редактор.

7. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

Задание № 2.

Управление расположением текста на экране

1. Выполните шаг №4 из предыдущего задания, для файла rasp.html

2. Внести изменения в файл rasp.html, расположив слова Расписание, занятий, на среду на разных строках.

Пример:

Расписание

занятий

на среду.

3. Сохраните текст с внесенными изменениями в файле rasp.html.

4. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

Не удивляйтесь тому, что внешний вид вашей Web-страницы не изменился.

Задание № 3.

Управление расположением текста на экране 2

1. Выполните шаг №4 из первого задания, для файла rasp.html

2. Внести изменения в файл rasp.html:

Пример:

Расписание

занятий

на среду.

3. Сохраните текст с внесенными изменениями в файле rasp.html.

4. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

Внешний вид строк должен поменяться. Отчего зависит изменение текста?

Задание № 4.

Форматирование текста

Тег перевода строки
отделяет строку от последующего текста или графики.

Тег абзаца

тоже отделяет строку, но еще добавляет пустую строку, которая зрительно

выделяет абзац.

1. Внесите изменения в файл RASP.HTML

Учебный файл HTML

Расписание

занятий

на среду.

3. Сохраните текст с внесенными изменениями в файле rasp.html.

4. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

Задание № 5.

Форматирование текста

1. Внесите изменения в файл RASP.HTML

Учебный файл HTML

Расписание

занятий

на среду.

3. Сохраните текст с внесенными изменениями в файле rasp.html.

4. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

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

Задание № 6.

Задание размеров символов Web-страницы

Существует два способа управления размером текста, отображаемого браузером:

• использование стилей заголовка,

• задание размера шрифта основного документа или размера текущего шрифта.

Используется шесть тегов заголовков: от

(тег двойной, т.е. требует закрытия).

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

1. Внесите изменения в файл RASP.HTML

Учебный файл HTML

на среду.

3. Сохраните текст с внесенными изменениями в файле rasp.html.

4. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

5. Замените тег h2 на h3-h6, и посмотрите как меняется размер загаловка.

Задание № 7.

Установка размера текущего шрифта

Тег шрифта позволяет задавать размер текущего шрифта в отдельных местах текста в

диапазоне от 1 до 7.

1. Внесите изменения в файл RASP.HTML

Учебный файл HTML

Расписание занятий

на среду.

3. Сохраните текст с внесенными изменениями в файле rasp.html.

4. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

5. Замените размер шрифта на другие, и посмотрите как меняется размер текста.

Задание № 8.

Установка цвета шрифта

Тег предоставляет возможности управления гарнитурой, цветом и размером текста.

Для изменения цвета шрифта можно использовать в теге атрибут COLOR=”X”. Вместо

“X” надо подставить английское название цвета в кавычках (“ ”), либо его шестнадцатеричное

значение. При задании цвета шестнадцатеричным числом необходимо представить этот цвет

разложенным на три составляющие: красную (R – Red), зелѐную (G – Green), синюю (B – blue),

каждая из которых имеет значение от 00 до FF. В этом случае мы имеем дело с так называемым

форматом RGB.

Примеры записи текста в формате RGB приведены в Таблице 1:

1. Внесите изменения в файл RASP.HTML

Учебный файл HTML

Расписание

занятий на среду.

3. Сохраните текст с внесенными изменениями в файле rasp.html.

4. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

5. Поменяйте цвет на другой, и посмотрите результат работы тега font.

Задание № 9.

Выравнивание текста по горизонтали.

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

с атрибутом align, который определяет способ выравнивания. Атрибут align может принимать значения: left, right, center, justify выравнивание по левому краю, правому краю, по центру и ширине соответственно.

1. Внесите изменения в файл RASP.HTML

Учебный файл HTML

Расписание

занятий на среду.

3. Сохраните текст с внесенными изменениями в файле rasp.html.

4. Откройте документ rasp.html двойным щелчком мыши, и проверьте результат.

Сделайте Web-страницу по следующему образцу.

В скобочках указан цвет текста. Обязательно должно присутствовать выравнивание текста.

Файлу дайте название biscuit.html

Практические задания по теме «Web-дизайн и программирование» — Мои файлы — Каталог файлов

Язык гипретекстовой разметки HTML 4.0

Практическая работа № 1 – «Разметка страницы тегами HTML»

• Задание № 1.1 – «Разметка и эскиз первой HTML-страницы»

Практическая работа № 2 – «Создание простого web-сайта»

• Задание № 2.1 – «Создание первого web-сайта с тремя html-страницами» (+ пример: стр. 1, стр. 2, стр. 3)

Практическая работа № 3 – «Разметка web-страниц с использованием таблиц»

• Задание № 3.1 – «Размещение таблиц на html-странице. Форматирование текста в таблице»
• Задание № 3.2 – «Размещение таблиц на html-странице. Форматирование ячеек таблицы»
• Задание № 3.3 – «Размещение таблиц на html-странице. Объединение ячеек таблицы»
• Задание № 3.4 – «Создание web-страницы с использованием таблиц» (+ пример 3.4)

Практическая работа № 4 – «Дополнительные элементы языка HTML для форматирования web-страниц»

• Задание № 4.1 – «Горизонтальные линии (тег <HR>)»
• Задание № 4.2 – «Escape-поcледовательности»
• Задание № 4.3 – «Физические и логические стили»

Практическая работа № 5 – «Форматирование web-страниц с использованием фреймов»

• Задание № 5.1 – «Создание простых фреймовых структур»
• Задание № 5.2 – «Создание сложных фреймовых структур»
• Задание № 5.3 – «Форматирование элементов фреймовых структур»
• Задание № 5.4 – «Создание сайта содержащего фреймовую структуру» (+ пример 5.4: стр. 1, стр. 2, стр. 3, стр. 4, стр. 5)

Практическая работа № 6 – «Отправка данных на web-сайт с использованием форм»

• Задание № 6.1 – «Создание формы с использованием тега <BR> »
• Задание № 6.2 – «Создание формы с использованием тега <HR> »
• Задание № 6.3 – «Создание формы с использованием тега <PRE> »
• Задание № 6.4 – «Создание формы с использованием таблиц»
• Задание № 6.5 – «Создание формы с использованием тега <P> »
• Задание № 6.6 – «Создание формы с использованием cписка определений»
• Задание № 6.7 – «Создание формы с использованием нумерованного списка»
• Задание № 6.8 – «Создание формы с использованием с размещением флажков/переключателей по горизонтали»
• Задание № 6.9 – «Создание формы с использованием с размещением флажков/переключателей в списке»
• Задание № 6.10 – «Создание формы с использованием сетки переключателей»
• Задание № 6.11 – «Создание html-документа с несколькими формами»

Практическая работа № 7 – «Размещение на web-странице мультимедийных объектов»

• Задание № 7.1 – «Встаивание в web-странницу модулей, содержащих flash-графику» (+ пример 7.1)
• Задание № 7.2 – «Встаивание в web-странницу модулей, содержащих avi-изображение» (+ пример 7.2)
• Задание № 7.3 – «Создание web-страниц с элементами ActiveX» (+ пример 7.3)
• Задание № 7.4 – «Создание сайта с внедрением мультимедийных модулей» (+ пример 7.4 и страница page1.php)

Практическая работа № 8 – «Форматирование web-страниц с использованием таблиц стилей. Создание каскадных листов стилей (css)»

• Задание № 8.1 – «Форматирование HTML-страницы с помощью листа стилей – тег <style>...</style> (+ пример 8.1)
• Задание № 8.2 – «Cоздание внешнего листа стилей для форматирования HTML-страниц (+ пример 8.2)
• Задание № 8.3 – «Создание web-сайта с использованием листов стилей» (+ пример 8.3: стр. 1, стр. 2, стр. 3, стр. 4, стр. 5)
• Задание № 8.4 – «Применение визуальных фильтров для Internet Explorer» (+ пример 8.4)
• Задание № 8.5 – «Форматирование страниц с использованием CSS»

Динамический HTML (DHTML)

Практическая работа № 9 – «Объектная модель DHTML. События»

• Задание № 9.1 – События onMouseOver, onMouseOut. Объекты self и status (+ пример 9.1)
• Задание № 9.2 – Событие onDblClick (двойной щелчок). Метод alert (+ пример 9.2)
• Задание № 9.3 – Событие onHelp (+ пример 9.3)
• Задание № 9.4 – Событие onMouseMove (+ пример 9.4)
• Задание № 9.5 – События onClick, onMouseOut, onMouseOver и onMouseUp (+ пример 9.5)
• Задание № 9.6 – Использование форм и JavaScript (+ пример 9.6)
• Задание № 9.7 – Событие onChange (+ пример 9.7)

Практическая работа № 10 – «Объектная модель DHTML. Методы»

• Задание № 10.1 – Методы click и alert. Свойство returnValue ( + пример 10.1)
• Задание № 10.2 – Метод insertAdjacentHTML ( + пример 10.2)
• Задание № 10.3 – Метод insertAdjacentText ( + пример 10.3)

Практическая работа № 11 – «Объектная модель DHTML. Свойства»

• Задание № 11.1 – Свойство className ( + пример 11.1)
• Задание № 11.2 – Свойство id. Метод innerHTML ( + пример 11.2)
• Задание № 11.3 – Свойство style ( + пример 11.3)
• Задание № 11.4 – Свойство title ( + пример 11.4)

Практическая работа № 12 – «Объектная модель DHTML. Визуальные фильтроы в DHTML для Internet Explorer»

• Задание № 12.1 – Фильтр переходов RevealTrans. Методы Apply, Play, Stop ( + пример 12.1)

Практическая работа № 13 – «Объектная модель DHTML. Примеры программ на JavaScript. Управление окнами»

• Задание № 13.1 – Объект Window. Метод open. Событие onClick ( + пример 13.1)
• Задание № 13.2 – Объект Window. Методы open, clоse. Событие onClick ( + пример 13.2)
• Задание № 13.3 – Объект navigator. Метод appName ( + пример 13.3)
• Задание № 13.4 – Методы alert, confirm, promt ( + пример 13.4)
• Задание № 13.5 – Метод scroll ( + пример 13.5)

Практическая работа № 14 – «Объектная модель DHTML. Примеры программ на JavaScript. Создание слайд-шоу»

• Задание № 14.1 – Коллекция тегов image. Атрибут src ( + пример 14.1)
• Задание № 14.2 – Событие onChange. Массив Array. Свойство selectedIndex ( + пример 14.2)

Практическая работа № 15 – «Объектная модель DHTML. Примеры программ на JavaScript. Работа с датой и временем»

Практическая работа № 16 – «Объектная модель DHTML. Примеры программ на JavaScript. Абсолютное и относительное позиционирование элементов»

Практическая работа № 17 – «Объектная модель DHTML. Примеры программ на JavaScript. Создание раскрывающихся меню с иерархической структурой»

«Создание простейшего html-документа. Форматирование текста»

Лабораторная работа 1. Создание статического HTML-документа c применением CSS

Глава 1. ОСНОВЫ ВЕБ-КОНСТРУИРОВАНИЯ

3. Основы языка разметки HTML 3.1. Создание HTML-документа в редакторе Блокнот Веб-страница представляет собой текстовый документ, в котором расставлены команды языка HTML. Они интерпретируются браузером.

Подробнее

WEB-программирование

WEB-программирование Л Е К Ц И И [Shift]+[F5] Ситников С.Ю. Лекция 1 2 Лекция 1 3 Тимоти Джон Бернерс-Ли британский учёный, изобретатель URL, HTTP, HTML, создатель Всемирной паутины Лекция 2 4 Пример элемента

Подробнее

Создание сайтов HTML

Создание сайтов HTML HTML Разработку web-сайта можно осуществлять двумя способами: с помощью специального web-редактора; непосредственно написанием программы на языке HTML. HTML (HyperText Markup Language)

Подробнее

Основы HTML и CSS. Лабораторная работа 9.

Лабораторная работа 9. Основы HTML и CSS Цель работы. Получение студентами навыков работы с языком гипертекстовой разметки HTML (HTML5) и каскадными таблицами стилей CSS (CSS3). Задание: 1) Изучить основные

Подробнее

Создание вэб-приложений. 26 часов

Создание вэб-приложений 26 часов HTML HTML теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными

Подробнее

СЕРИЯ САМ СЕБЕ ПРОГРАММИСТ! СЕРИЯ

СЕРИЯ САМ СЕБЕ ПРОГРАММИСТ! СЕРИЯ «Наука и Техника» Санкт-Петербург Кириченко А.В., Хрусталев А.А. HTML5 + CSS3. Основы современного web-дизайна «Наука и Техника» Санкт-Петербург УДК 681.3.068; 004.738

Подробнее

Синтаксис языка HTML

Введение в HTML Содержание История языка HTML Синтаксис языка HTML Структура документа HTML Цветовая разметка документа. Способы задания цветовых параметров Разметка текста. Физическое форматирование текста.

Подробнее

Введение. Как работает CSS

Введение Каскадные таблицы стилей, или Cascading Style Sheets (CSS), обеспечивают творческую свободу в разметке и дизайне веб-страниц. Пользуясь CSS, вы сможете украсить текст страниц привлекательными

Подробнее

Основные понятия в веб-разработке

HTML CSS Урок 1 Основные понятия в веб-разработке План урока 1. Что такое HTML и CSS 2. Как работает интернет 3. Виды сайтов 4. Устройство сайта 5. Основные протоколы 6. Процесс разработки сайта 7. Структура

Подробнее

Лекция 3 Текстовый процессор

Лекция 3 Текстовый процессор Текстовый редактор Microsoft Word Приложение Microsoft Word 2010 это текстовый процессор, предназначенный для создания профессионально оформленных документов. Объединяя в себе

Подробнее

СОДЕРЖАНИЕ 1. НАСТРОЙКА ДИЗАЙНА САЙТА… 2 1.1. Общие сведения… 2 1.2. Создание макетов дизайна страниц сайта… 2 1.3. Установка элементов по умолчанию… 7 Система управления сайтом CMS BinN S.Builder

Подробнее

ДИНАМИЧЕСКОЕ WEB-ПРИЛОЖЕНИЕ

1 ДИНАМИЧЕСКОЕ WEB-ПРИЛОЖЕНИЕ 1. О языке HTML и технологии ASP.NET В этой работе Вы создадите динамическое Web-приложение. Ваше приложение должно быть установлено на сервере. У пользователей-клиентов,

Подробнее

Текстовый процессор OpenOffice.org Writer

2 Текстовый процессор OpenOffice.org Writer Текстовый процессор (ТП) OpenOffice.org Writer входит в пакет программ Текстовый процессор Writer, предназначен для создания, редактирования и форматирования

Подробнее

Глава 1. ОСНОВЫ ВЕБ-КОНСТРУИРОВАНИЯ

5.2.Работа в редакторе FrontPage Рассмотрим основные приемы работы в редакторе FrontPage на примере разработки веб-страницы Озера Беларуси. Она будет содержать текст и фотографии, которые следует подготовить

Подробнее

Вопрос 3. HTML формы

Вопрос 3. Язык гипертекстовой разметки HTML. HTML (HyperText Markup Language) это коллекция стилей (указанных в терминах языка HTML), которые определяют различные компоненты WWW документов. Годом рождения

Подробнее

Разработка Web-страниц

Разработка Web-страниц Цель работы: получить представление о создании гипертекстовых документов с помощью языка HTML. Создать персональную Web-страницу. Результат работы файл Моя страница1_фамилия.doc

Подробнее

Что такое HTML? HTML

HTML — это просто План вебинара 1. Знакомство 2. Что такое HTML? 3. Базовая HTML-разметка. 4. Инструменты для работы с HTML. 5. Синтаксис HTML. 6. Строение HTML тегов. 7. Знакомство с CSS. 8. Подключение

Подробнее

Технология CSS в проектировании Web сайтов

Технология CSS в проектировании Web сайтов Методические указания к лабораторной работе Цель работы: научиться работать с каскадными таблицами стилей при проектировании Web сайтов. Теоретическая справка

Подробнее

<HTML> <HEAD> <TITLE>

Лабораторная работа 1. Создание простейшего HTML-документа. Форматирование шрифта и абзаца Цель работы: Научиться создавать простейший гипертекстовый документ средствами текстового редактора Блокнот. Научиться

Подробнее

Понятие и назначение CSS

Понятие и назначение CSS План разделение контента и оформления логическая и физическая структура документа; способы задания стиля; ссылка на внешнее описание; синтаксис описания стилей; Позиционирование

Подробнее

Создание сайтов HTML

Создание сайтов HTML Начало В 1989 году Тим Бернерс-Ли разработал технологию гипертекстовых документов World Wide Web. Гипертекст это текст, в котором содержатся ссылки на другие документы. Основные понятия

Подробнее

Лекция Каскадные таблицы стилей (CSS)

Министерство образования Республики Беларусь Учреждение образования Гомельский государственный университет им. Ф. Скорины Физический факультет «Информационные системы и сети» Лекция Каскадные таблицы стилей

Подробнее

Глава 2. Общая структура HTML-документа

Глава 2. Общая структура HTML-документа 2.1. Общие правила 2.1.1. Элементы Элемент (тег, tag) — способ разметки текста. В HTML-документе элемент — это метка, которая прикрепляется к участку простого текста

Подробнее

Практикум «Создание Web-сайта Компьютер»

1 Практикум «Создание Web-сайта Компьютер» Web-сайт состоит из Web-страниц, объединенных гиперссылками. Web-страницы могут быть интерактивными и могут содержать мультимедийные и динамические объекты. Задание

Подробнее

1.1. Общие понятия HTML

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

Подробнее

Создание сайта в программе HEFS

Создание сайта в программе HEFS Студенты 3 курса ГБПОУ ОК «Юго-Запад» Тегливец М. И. Холодков А.С. Руководитель преподаватель информатики Ворокова М.Н. Сайт это современное средство передачи информации,

Подробнее

Глава 2. Структура HTML-документа

Глава 2. Структура HTML-документа 2.1 Создание HTML-документа Документы в формате HTML являются обычными текстовыми файлами с расширением «htm» или «html», содержащими специальные теги (управляющие элементы)

Подробнее

Что такое HTML.

Тренинговый Центр Анфисы Бреус «Вдохновение» Пошаговые инструкции по управлению и ведению блога на WordPress Урок 10 Тема: HTML редактор в WordPress Вопросы: Что такое HTML? Редактирование записи в HTML

Подробнее

Лекция 4 Каскадные Таблицы Стилей

Лекция 4 Каскадные Таблицы Стилей Лектор Ст. преподаватель Купо А.Н. Каскадные Таблицы Стилей СSS (Cascading Style Sheets Таблицы Каскадных Стилей) — это язык, содержащий набор свойств для описания внешнего

Подробнее

Лекция 8. Использование CSS

Донецкий национальный технический университет Факультет компьютерных наук и технологий Кафедра компьютерной инженерии Лекция 8. Использование CSS Иваница Сергей Васильевич, ассистент кафедры компьютерной

Подробнее

<html> <head> <title>название документа</title>

Основы языка гипертекстовой разметки HTML Web-документ (иначе html-документ) является обычным текстовым файлом, к имени которого добавлено расширение.htm или.html. Такой документ открывается в обозревателе

Подробнее

Базовая HTML-разметка

Базовая HTML-разметка 1 Введение Общий хронометраж блока: 4 часов Юрий Чижов Front-end разработчик Cleverbits.co Юрий Чижов Front-end разработчик Cleverbits.co 1.1 Базовая HTML-разметка 1.2 Знакомство

Подробнее

/\_/\ =( w )= ) ( // ( )//

5 Основы HTML Встроенная в браузер JavaScript-консоль, которой мы до сих пор пользовались, хороша, когда нужно протестировать небольшой фрагмент кода, но для создания более масштабных программ понадобится

Подробнее

ИНСТРУКЦИЯ К HTML РЕДАКТОРУ CKEDITOR

ИНСТРУКЦИЯ К HTML РЕДАКТОРУ CKEDITOR Описание редактора CKeditor Форматирование текста 1. Сервисы редактора CKeditor 2. Стили шрифта 3. Структурирование текста 4. Выравнивание текста 5. Вставка ссылок,

Подробнее

Arilot CMS руководство пользователя

Arilot CMS руководство пользователя 1 Вход в систему администрирования Внешний вид формы авторизации зависит от дизайна 1.1 При наличии кнопки «Вход» Нажмите кнопку «Вход» (Рисунок 1: Кнопка входа). Рисунок

Подробнее

Лабораторная работа 1

Теория Лабораторная работа 1 Задание Требования к отчету HTML (HyperText Markup Language) — язык разметки гипертекста. http://www.w3schools.com/default.asp — страница, позволяющая тестировать и просматривать

Подробнее

Компьютерные сети и Интернет

Конспекты лекций по курсу «Введение в информатику и системы программирования», 1 семестр С.А. Немнюгин, направление «Прикладные математика и физика») 1 Лекция 4 Компьютерные сети и Интернет Введение в

Подробнее

Основы HTML: работа с текстом

РАБОТА 03 Основы HTML: работа с текстом Изучаемые вопросы 1. Передача данных и адресация в Интернете 2. Дескрипторы, использование пробелов и пустых строк, структура документа 3. Абзацы и заголовки 4.

Подробнее

КОНТРОЛЬНАЯ РАБОТА 2

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РФ БРЯНСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ КОНТРОЛЬНАЯ РАБОТА по дисциплине «Информатика» Вариант 64 7 Студент гр. З09-МиТЛП Иванов И.И. зач.книжки 09.034 Преподаватель

Подробнее

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

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

Разработка сайта с использованием языка разметки текста HTML

(2 урока)

Цель урока: Научиться создавать Web-сайты с использованием языка разметки текста HTML в простейшем

текстовом редакторе Блокнот.

Ход урока:

1. Орг. момент.

2. Проверка Д/з. Ответить на вопросы к конце п. 6.4

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

«Разработка сайта с использованием языка разметки текста HTML»

Задание. В операционной системе Windows или Linux создать сайт с использованием языка разметки текста

HTML в простейшем текстовом редакторе Блокнот. Сайт «Компьютер» должен содержать начальную

страницу и страницы «Программы», «Словарь» и «Анкета». Сохранить их в файлах с именами index.htm,

software.htm, glossary.htm и anketa.htm в папке сайта.

Начальная страница сайта. Создадим начальную страницу Web-сайта «Компьютер».

1. В операционной системе Windows или Linux запустить простейший текстовой редактор Блокнот.

2. Ввести тэги, определяющие структуру Web-страницы.

Ввести заголовок Web-страницы: «Компьютер».

Ввести заголовок текста, отображаемый в браузере: «Всё о компьютере»

<HTML>

<HEAD>

<TITLE>Компьютер</TITLE>

</HEAD>

<BODY>

Всё о компьютере

</BODY>

</HTML>

Просмотреть получившуюся Web-страницу в браузере.

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

начальную страницу текст, разбитый на абзацы с различным выравниванием.

3. <P ALIGN=»left»>На этом сайте вы сможете получить различную информацию о компьютере, его

программном обеспечении и ценах на компьютерные комплектующие. </P>

<P ALIGN=»right»>Терминологический словарь познакомит вас с компьютерными терминами, а также вы

сможете заполнить анкету.</P>

Пусть начальная страница сайта «Компьютер» будет содержать центрированный крупный заголовок синего

цвета, отделенный горизонтальной линией от двух по-разному выровненных абзацев.

4. <FONT COLOR=»blue»>

<h2 ALIGN=»center»>

Всё о компьютере

</h2>

</FONT>

<HR>

<P ALIGN=»left»>На этом сайте…</P>

<P ALIGN=»right»>Терминологический словарь…</P>

На начальной странице сайта «Компьютер» логично разместить изображение компьютера.

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

следующий вид:

<IMG SRC=»computer.gif» ALIGN=»right»>

Создадим папку сайта «Компьютер» и добавим в сайт пустые страницы «Программы», «Словарь» и «Анкета».

Сохраним их в файлах с именами software.htm, glossary.htm и anketa.htm в папке сайта. Такие пустые

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

6. <HTML>

<HEAD>

<TITLE>Заголовок страницы</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Создадим панель навигации по сайту «Компьютер». На начальной странице сайта разместим указатели

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

страниц, на которые осуществляется переход.

создание Web –сайта на языке HTML»

Я не знаю большей красоты, чем здоровье.
(Г. Гейне)

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

Тема: «Интернет: создание Web –сайта на языке HTML»

Цель:

Образовательные

знакомство с элементами и структурой HTML документа;

освоение приемов создания Web-страницы на языке HTML;

научиться выполнять форматирование созданных Web-страниц;

закрепить технологические навыки работы с компьютером;

Развивающие

способствовать развитию познавательного интереса у учащихся;

способствовать развитию творческой активности учащихся;

развивать наглядно-образное мышление, память и умение сравнивать и анализировать;

Воспитательные

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

способствовать культурному и интеллектуальному развитию учащихся;

воспитание информационной культуры учащихся, внимательности, аккуратности.

Оборудование: ПК, мультимедийных проектор, экран.

Программное обеспечение: операционная система Windows ХР, браузер Internet Explorer или Mozilla Firefox, стандартное приложение Блокнот, графические изображения.

Ход работы.

Организационный момент.

Приветствие. Здравствуйте ребята! Сегодня у нас не обычный урок. Сегодня мы с вами будем учиться создавать продукт, который является основным элементом, или можно сказать структурным «атомом» сети Интернет. А именно – Web-странички и сайты.

Актуализация знаний.

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

Грамотно разработанный сайт может стать хорошим методом распространения информации о предприятии.

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

Содержательная часть.

Теоретическая часть.

Для проверки домашнего задания, я предлагаю вам пройти тест. Приложение 1

По окончанию тестирования, предлагаю вам подвести итог и снять усталость. Дети встают, листочки с тестовыми заданиями лежат на столе. Учитель называет правильную букву ответа. Тот, кто ответил правильно, поднимает обе руки вверх и тянется к потолку, тот кто ответил не правильно разводит руки в стороны и делает повороты туловища вправо-влево. Сосед по парте, на листике с тестовым заданием, ставит «+», если ответ правильный, и «–», если ответ не верный. Подсчитывает количество баллов. Теперь предлагаю вам сесть за компьютеры и приступить к выполнению практического задания

Практическая часть

Инструктаж по ТБ

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

Инструктаж по ТБ

Создание WEB-страницы по предложенному материалу

В папке Женева находится текстовый файл «Женева», в котором дается небольшая информация об этом городе и файл картинки «Женева», с изображением самого города.

Создайте в Блокноте WEB-страницу, содержащую этот текст под названием ЖЕНЕВА

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

3. Выделите в тексте 3 абзаца:

1-ый абзац – цвет шрифта — красный, размер шрифта = 5

2-ой — цвет шрифта — синий, размер шрифта = 3

3-ий – цвет шрифта — зеленый, размер шрифта = 4

Предполагаемый результат.

Физкультминутка

Снятие зрительного напряжения.

Снятие физического и умственного напряжения. Приложение 2

б) Создание сайта

В папке ГОРОСКОП дан WEB-сайт «ГОРОСКОП» для трех знаков зодиака, состоящий из 4-х WEB-страниц.

Создать гиперссылки:

А) с первой страницы сайта на другие страницы сайта

Б) с каждой страницы сайта на главную.

Предполагаемый результат.

Заключительная часть.

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

И в заключении хотелось бы добавить: здоровье нельзя улучшить, его можно только сберечь! Берегите себя!

Оценить работу на уроке.

Домашнее задание. Прочитать §29. Ответить на вопросы письменно стр. 163 (5,6)

Самостоятельная работа | Практическая контрольная работа

Планирование уроков на учебный год (по учебнику Н.Д. Угриновича, профильный уровень)

Главная | Информатика и информационно-коммуникационные технологии | Планирование уроков и материалы к урокам | 11 классы | Планирование уроков на учебный год (по учебнику Н.Д. Угриновича, профильный уровень) | Самостоятельная работа. Практическая контрольная работа

Содержание урока

Практические работы по HTML

Задание № 1. Создание простейшего файла HTML

Задание № 2. Управление расположением текста на экране

Задание № 3. Некоторые специальные команды форматирования текста

Задание № 4. Выделение фрагментов текста

Задание № 5. Задание размеров символов Web-страницы

Задание № 6. Установка размера текущего шрифта

Задание № 7. Установка гарнитуры и цвета шрифта

Задание № 8. Выравнивание текста по горизонтали

Задание № 9. Задание цвета фона и текста

Задание № 10. Размещение графики на Web-странице

Задание № 11. Использование атрибутов изображения

Задание № 12. Установка фонового изображения на Web-странице

Задание № 13. Создание таблицы

Задание № 14. Построение гипертекстовых связей

Задание № 15. Создание ссылки на другой HTML-документ

Задание № 16. Редактирование ссылки на другой HTML-документ

Задание № 17. Самостоятельное итоговое задание

Как подготовить хорошую Web-страницу

Тестирование

Практическая контрольная работа

Практические работы по HTML

Задание № 15

Создание ссылки на другой HTML-документ

Ссылки позволяют щелчком на выделенном слове или фразе перейти к другому файлу.

Опишем ссылку:

<A HREF=»5.HTML»>5 класс</A>

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

1. Внесите изменения в файл RASP.HTML

<HTML>
<HEAD>
<TITLE>Учебный файл HTML</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#330066">
<P ALIGN="CENTER">
<FONT COLOR="#008080" SIZE="7">
<B>Расписание</B></FONT><BR>
<FONT SIZE="6"><I> занятий на вторник</I></FONT>
<BR><BR>
<IMG SRC="CLOCK.PNG" ALIGN="TOP">
</P>
<CENTER>
<TABLE WIDTH=60%>
<TR><TD><A HREF="5.HTML">5 класс</A></TD>
<TD>6 класс</TD> </TR>
<TR><TD>7 класс</TD>
<TD>8 класс</TD> </TR>
<TR><TD>9 класс</TD>
<TD>10 класс</TD> </TR>
<TR><TD>11 класс</TD> </TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

2. Сохраните файл RASP.HTML

3. Просмотрите полученную Web-страницу.

На экране вы увидите то, что изображено на рисунке 10.

Рис. 10

Следующая страница Задание № 16. Редактирование ссылки на другой HTML-документ

Cкачать материалы урока

Изучите HTML с практическими пошаговыми инструкциями. Примеры · Dev Practical

.

Изучите основы HTML, используя простые и практические примеры. В этом посте вы узнаете, как HTML шаг за шагом работает со всеми тегами HTML.

Наброски

1. Что такое HTML?
2. Как работает HTML: Введение в HTML
3. Инструменты для написания HTML
4. Учебное пособие по базовым элементам и тегам html
   
   — Базовый шаблон HTML
   — Заголовки
   — Пункты
5. Другое форматирование текста с использованием HTML
6. Создание разделов с помощью Div
7. Создание разделов с использованием семантических тегов HTML5
   
   — Верхний колонтитул — В сторону — Нижний колонтитул
8. Промежуточные теги HTML [учебное пособие]
   
   — Упорядоченный список — Неупорядоченный список — Код — Предварительные формы — Ввод HTML — Ввод текста — Радио-ввод — Кнопка «Отправить» — Цитаты — Видео — Аудио — Вставить — Холст

Что такое HTML?

HTML — это сокращенная форма языка гипертекстовой разметки.Это помогает нам правильно отображать текст, ссылки, изображения, звуки и видео на веб-странице. Каждый раз, когда вы посещаете веб-сайт, вы должны знать, что здесь задействован HTML.

HTML был создан Тимом Бернерсом-Ли для обмена документами через Интернет. Он эволюционировал. Теперь вы можете обмениваться изображениями, видео и даже играть в игры в Интернете.

Как работает HTML: Введение в HTML.

HTML используется для описания внешнего вида документа, отображаемого в интернет-браузере.

Документы HTML

— это обычные текстовые документы, но с расширением имени файла « .html ». Обычные текстовые файлы имеют расширение имени файла « .txt ».

Когда HTML-файл просматривается в браузере, браузер интерпретирует HTML-код, но не отображает сам HTML-код.

Чтобы просмотреть сам html-код , вы можете щелкнуть правой кнопкой мыши на веб-странице и щелкнуть по исходному тексту.

Для редактирования HTML-кода необходимо использовать текстовый редактор.Вы можете использовать множество текстовых редакторов, например Sublime Text или Notepad ++.

Элементы HTML

Элемент Html включает открывающий тег, закрывающий тег и содержимое между тегами.

HTML-теги

Это теги, используемые для сообщения браузеру о начале и конце HTML-элемента.

1. Базовая html-страница

Каждая HTML-страница содержит шаблон, который всегда присутствует на любой HTML-странице. Более того, теги, используемые в шаблоне, помогают разделить ваш html на значимые разделы.

Каждая HTML-страница обычно имеет следующие теги:

код:

  
  
  
  
  
  
 Это базовая HTML-страница. 
  
 
 

Результат:

Это базовая HTML-страница.

Все, что вы хотите отобразить на странице HTML, добавляется между тегами body.

Текстовые теги HTML

1. Заголовки

   : создание заголовков с использованием HTML

Есть 6 типов заголовков с h2, которые используются в качестве заголовка сообщения или статьи для целей SEO.

Остальное можно использовать для заголовков и подзаголовков.

 
 h2 Заголовок1 
 
 
 h3 Заголовок2 
 
 
 h4 Заголовок3 
 
 
 h5 Заголовок4 
 
 
 h5 Заголовок5 
 
 
 H6 Heading6 
 

h3 Заголовок2

h4 Заголовок3

h5 Заголовок4

h5 Заголовок5

H6 Заголовок6

2.Пункты

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

 
 Это абзац. 
 
 
 Это второй абзац. 
 

Это абзац.

Это второй абзац.

3. Разрыв строки

Тег разрыва строки
разрывает строку текста везде, где она вставлена.

Разрыв строки будет здесь
, а не здесь на всей строке текста.

Здесь разрыв строки будет
, а не на всей строке текста.

4. Смелый и сильный

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

Текст, выделенный жирным шрифтом

5. Курсив и выделение

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

Текст, выделенный курсивом

Подчеркнутый текст

6.Подчеркнутый

Используйте это осторожно, чтобы пользователи не путали их со ссылками.

Подчеркнутый текст

7. Списки заказов

 
 
 
 Элемент 1 
 
 
 Элемент 2 
 
 
 Элемент 3 
 
 
 

8. Неупорядоченные списки

 
 
 
 Элемент 1 
 
 
 Элемент 2 
 
 
 Элемент 3 
 
 
 

1. Надстрочный

 Слово  теги  является надстрочным.

Слово ^теги является надстрочным.

1. Нижний индекс

 Слово  теги  является нижним индексом. 

Слово _теги является нижним индексом.

1. Горизонтальная линия

Создайте линию, разрывающую текст.

1. Выделенный или выделенный текст

2. Удаленный (сквозной) текст

тегов.

1. Короткие и длинные котировки

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

Я цитирую эту историю.

1. Курсив

Собака съела мою домашнюю работу — распространенная ложь.

1. Изображений

HTML-ссылки

Ссылки помогают переходить с одной страницы на следующую веб-страницу или другой веб-сайт.

Тег, используемый для создания ссылок, — это теги .

URL-адрес — это цель, на какую страницу или веб-сайт вы хотите перейти.

Относительный путь

код:

это относительная ссылка

это относительная ссылка

Абсолютный путь

код:

это абсолютная ссылка

Результат:

это абсолютная ссылка

Ссылка, открывающаяся в новой вкладке / окне

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

код:

Результат:

Div

  <заголовок>

  
 

в сторону

  <сторона>

  
 

Промежуточные теги HTML

Код

до

  
 
 Формы
 
 
  
 
 
 Типы ввода Html 
 Текстовый ввод
 
 
  
 
 
 Радиовход
 
 
  
  
 
 
 Кнопка «Отправить»
 
 
  
 
 
 ИЛИ
 
 
  Отправить  
 
 
 Вы можете прочитать подробную статью о HTML-формах, которую я написал.
 ЦИТАТЫ
 Встроенные котировки
 
 Когда Дэйв просит HAL открыть дверцу отсека, HAL отвечает:  Мне очень жаль, Дэйв. Боюсь, я не могу этого сделать.  
 
 Цитаты
 
 
 
 Слова могут быть похожи на рентгеновские лучи, если использовать их правильно - они пройдут через все что угодно. Вы читаете - и вас пронзают. 
 
 < / blockquote> 
  - Олдос Хаксли, О дивный новый мир  
 Видео
 <элементы управления видео>


  Ваш браузер не поддерживает видео тег.
 
 Аудио
 <управление звуком> 
  
  
 Ваш браузер не поддерживает элемент audio. 
 
 Код для вставки
  
 Холст
  
  
 Практическое приложение для HTML и CSS: создание простой веб-страницы 
 Программный код 
 Для начала наш HTML-документ содержит только базовые  HTML-элементы , необходимые для  правильной рендеринга  (отображения) веб-страницы в браузере.Он также содержит элемент абзаца с некоторым текстом внутри, чтобы отображаемая страница не была полностью пустой, что было бы скучно и бесполезно, вам не кажется?
 Начните с открытия нового документа в текстовом редакторе и сохраните его под выбранным именем, убедившись, что он имеет расширение файла  .html  или  .htm . Затем скопируйте и вставьте следующий код в свой документ и сохраните изменения:
  
 
 
 
 Это гордый, независимый пункт.
 
 Объявление  DOCTYPE  (объявление отличается от HTML-элемента) должно быть включено в качестве первой строки в HTML-документ для обеспечения правильного отображения страницы. DOCTYPE "html" указывает браузеру, что эта веб-страница использует  HTML5 , последнюю основную версию HTML.
 Обязательные элементы HTML 
 Эти обязательные элементы HTML состоят из  начальных  и  конечных тегов  и всего, что находится между ними:
  HTML |:  Эти теги сообщают браузеру, что он работает с HTML-документом.Все остальные элементы  вложены  в эти начальный и конечный теги.
  ГОЛОВКА |:  Самый первый элемент, вложенный в элемент HTML, содержит заголовки, метаинформацию и сценарии, если они используются.
  КОРПУС |:  Также вложенный в элемент HTML и непосредственно после элемента HEAD, этот элемент содержит содержимое страницы, которую нужно отобразить.
 Нам нужен следующий элемент, потому что мы хотим что-то видеть на нашей странице!
  ПАРАГРАФ |
:  Теги абзаца обозначают начало и конец абзаца текста, который браузер выделяет отдельно от элементов, появляющихся до или после, с некоторым вертикальным интервалом.
 Когда вы открываете документ в веб-браузере, он должен выглядеть примерно так:
 Абзац текста - единственный видимый элемент HTML, но мы знаем, что элементы HTML, HEAD и BODY поддерживают его.
 Кодовое приложение 
 Теперь, когда вы создали очень простую веб-страницу, настала ваша очередь добавить остальной контент. Держите эту страницу открытой в браузере, чтобы все, что вам нужно было сделать, это обновить страницу после сохранения изменений в текстовом редакторе.
 Раздел Раздел 
 Давайте изменим внешний вид определенной области страницы, задав ей цвет фона.
  Каскадные таблицы стилей (CSS)  - это компьютерный язык, используемый с HTML и некоторыми другими языками разметки, такими как Extensible Markup Language (XML), для изменения представления содержимого.
 CSS обычно находится в отдельном документе и применяется к нескольким страницам веб-сайта. Стили для одной веб-страницы могут быть определены либо в элементе HEAD, либо в начальном теге одного элемента на странице,  встроенный CSS  (это то, что мы собираемся сделать).
  DIV |
:  Поместите абзацы, заголовки, изображения, списки и другое содержимое внутри элемента DIV, чтобы вы могли повлиять на его внешний вид с помощью границ, отступов (пространство между содержимым и границей контейнера разделения), шрифты, цвета и другие свойства с помощью CSS.
 Присвойте элементу DIV атрибут стиля цвета фона. Чтобы добавить атрибут к элементу, вам необходимо предоставить пару имя-свойство: значение-свойство, за которой следует точка с запятой, все в двойных кавычках.
 Скопируйте блок DIV выше и вставьте его сразу после конца элемента абзаца в документе. Вы увидите, что, поскольку этот абзац текста находится за пределами (выше) раздела разделения, он не будет оформлен так же, как контент внутри элемента DIV.
 Если синий, названный в честь Алисы (кто такая Алиса?), Не тот цвет, который вы хотите использовать, поищите в Интернете список всех 140 названий цветов HTML, поддерживаемых большинством браузеров.
 Заголовок 
 Из шести заголовков HTML этот элемент заголовка с наименьшим номером отображает самый большой заголовок верхнего уровня.
  h2 |
:  Хотя это самый крупный заголовок и заголовок верхнего уровня, элемент  H6  является наименьшим и наиболее детализированным заголовком.
 Скопируйте следующую строку и вставьте ее в элемент h2 в своем файле:
 Преимущества изучения HTML 
 Вот как должна выглядеть страница с заголовком внутри красочного раздела, оставляя один абзац текста в снегу:
 Заголовок находится внутри элемента разделения, имеющего синий цвет фона.
 Список 
 Хотя есть много веских причин для изучения HTML, мы перечислим только три. Мы будем использовать элемент  UL  для создания неупорядоченного или маркированного списка. Чтобы пронумеровать (упорядочить) наш список, мы будем использовать элемент  OL  (упорядоченный список).
  UL |
: 
 Скопируйте эти строки и вставьте их в свой документ после конца элемента  h2 .
 Вы узнаете, где расположены угловые скобки на клавиатуре.
 У вас есть новый способ выразить себя миру.
 Вы получаете ценные навыки для полезного и творческого занятия или хобби.
 Применение кода: Final Code 
 Вот документ со всеми добавленными прибамбасами:
  
 
 
 
 
 Это гордый, независимый абзац.
 Преимущества изучения HTML 
 Вы узнаете, где расположены угловые скобки на клавиатуре.
 Вы у вас появится новый способ самовыражения.
 Вы получите ценные творческие и технические навыки.
 
 
 И показан во всей красе Firefox:
 Абзац текста теперь содержит маркированный список.
 Дополнительные вопросы 
 Как изменить шрифт заголовка на Courier?
 Если бы вы хотели добавить сплошную рамку вокруг раздела деления и сделать его шириной ровно 300 пикселей, как бы вы это сделали?
 Как бы вы изменили маркированный список на нумерованный?
 Ключ ответа 
 1) Изменить шрифт заголовка 
 Добавьте атрибут font-family к элементу h2:
 На снимке экрана в конце ключа ответа показаны изменения по всем трем дополнительным вопросам .Заголовок теперь выделен шрифтом Courier.
 2) Добавьте границу и ширину к разделу раздела 
 В начальном теге
 добавьте еще два свойства к атрибуту стиля: 1) width, который определяет ширину контейнера разделения до определенного процента от ширины экрана. или к точному количеству пикселей, и 2) граница, которая добавляет визуальную рамку вокруг раздела разделения.
 Свойства атрибута перечислены в двойных кавычках и разделены точкой с запятой.
 Ширина страницы осталась прежней, но разделение уже не было таким же широким, как экран.
 3) Изменить тип списка 
 В упорядоченном списке вместо маркеров отображаются числа.
  OL |
:  Как и его менее упорядоченный дочерний элемент (UL), элемент OL содержит элементы списка (LI) для нумерованного списка.
 Замените теги
 и
 в документе на
 и
:
 Вы узнаете, где на клавиатуре расположены угловые скобки.  
 У вас есть новый способ самовыражения миру.
 Вы приобретаете ценные творческие и технические навыки.
 Страница после заполнения всех трех дополнительных вопросов.
 10 лучших проектов для начинающих, чтобы практиковать навыки HTML и CSS 
 Изучение кода всегда увлекательно и весело для всех, и когда дело доходит до входа в мир программирования, большинство людей начинают с самого простого  HTML  и  CSS  .Путешествие каждого новичка в программирование во внешнем интерфейсе начинается с этих двух основных строительных блоков, и вам нужно проявить творческий подход, когда дело доходит до разработки красивого приложения.
 Первоначально новичкам нравится создавать кнопки, добавлять ссылки, добавлять изображения, работать с макетом и делать много интересных вещей в веб-дизайне, но когда дело доходит до создания проекта с использованием только HTML и CSS, они застревают и не понимают, что они должны заставить практиковать все эти вещи. В конце концов, их знания ограничиваются только HTML и CSS.Что бы ни случилось, после изучения всего в какой-то момент вы поймете, что создание проекта важно для практики навыков HTML и CSS. Вам нужно проверить, как HTML и CSS работают вместе, чтобы создать красивое веб-приложение. Итак, вопрос в том, какие проекты для начинающих вы можете создать, чтобы применить на практике все, что вы узнали… Давайте обсудим это.
 1. Страница дани 
 Самый простой веб-сайт, который вы можете создать как новичок, - это страница дани того, кем вы восхищаетесь в своей жизни.Для этого требуются только базовые знания HTML и CSS. Сделайте веб-страницу с описанием этого человека, добавив его / ее изображение. Вверху веб-страницы добавьте изображение и имя человека, а ниже - макет для остальных деталей. Вы можете использовать абзацы, списки, ссылки, изображения с помощью CSS, чтобы придать ему достойный вид. Добавьте подходящий цвет фона и стиль шрифта на свою веб-страницу. Большинство частей вы можете сделать, используя HTML, но чтобы придать ему лучший вид, используйте немного CSS. Воспользуйтесь помощью по приведенной ниже ссылке.
 2. Веб-страница, включающая форму 
 Формы всегда являются неотъемлемой частью любого проекта, и вы будете работать с большим количеством форм в большинстве приложений, так почему бы не попрактиковаться в этом раньше и проверить свои знания. Как только вы познакомитесь с полем ввода или основными тегами в HTML для создания формы, создайте проект, используя все эти теги. Как использовать текстовое поле, флажок, переключатель, дату и другие важные элементы в одной форме. Вы узнаете, как правильно структурировать веб-страницу при создании формы.Знания HTML / HTML5 достаточно хорошо, но вы можете использовать немного CSS, чтобы проект выглядел лучше. Воспользуйтесь помощью по ссылкам, приведенным ниже.
 3. Веб-сайт параллакса 
 Веб-сайт параллакса включает фиксированные изображения в фоновом режиме, которые вы можете оставить на месте, и вы можете прокручивать страницу вниз, чтобы увидеть различные части изображения. Обладая базовыми знаниями HTML и CSS, вы можете придать сайту эффект параллакса. Использование эффекта параллакса в веб-дизайне действительно популярно, и он придает веб-странице красивый внешний вид.Попробуйте и разделите всю страницу на три-четыре разных раздела. Установите 3-4 фоновых изображения, выровняйте текст для разных разделов, установите поля и отступы, добавьте background-position и другие элементы и свойства CSS для создания эффекта параллакса. Вы можете получить помощь от  Parallax Website .
 4. Целевая страница 
 Целевая страница - еще один хороший проект, который вы можете реализовать с помощью HTML и CSS, но для этого требуется хорошее знание этих двух строительных блоков. Вы будете проявлять много творчества при создании целевой страницы.Вы научитесь добавлять нижний колонтитул и верхний колонтитул, создавать столбцы, выравнивать элементы, разделять разделы и многое другое. Вам нужно будет осторожно использовать CSS, помня, что разные элементы не пересекаются друг с другом. Вы также позаботитесь о цветовых сочетаниях, отступах, полях, промежутках между разделами, абзацами и рамками. Цветовые комбинации должны хорошо сочетаться друг с другом для разных участков или фонов. Вы можете воспользоваться помощью по приведенной ниже ссылке.
 5. Веб-сайт ресторана 
 Продемонстрируйте свои глубокие знания HTML и CSS, создав красивую веб-страницу для ресторана.Создание макета ресторана будет немного сложнее, чем в предыдущих примерах проектов. Вы будете выравнивать различные блюда и напитки, используя сетку макета CSS. Вы будете добавлять цены, изображения, и вам нужно также придать ему красивый вид, используя правильное сочетание цветов, стиля шрифта и изображений. Вы можете добавить галерею изображений для различных блюд, а также добавить скользящие изображения для лучшего вида. Добавьте ссылки для перенаправления на внутренние страницы. Сделайте адаптивным настройку области просмотра, используя медиа-запросы и сетку.Вы можете получить помощь на сайте ресторана  .
 6. Веб-страница события или конференции 
 Вы можете создать статическую страницу, содержащую событие или конференцию. Люди, которые заинтересованы в участии в конференции, создают для них кнопку регистрации. Упомяните различные ссылки на докладчика, место проведения и расписание вверху в разделе заголовка. Опишите цель конференции или категорию людей, которые могут извлечь пользу из этой конференции. Добавьте на свою веб-страницу введение и изображения докладчика, сведения о месте проведения и основную цель конференции.Разделите страницу на разделы, добавьте верхний и нижний колонтитулы, демонстрирующие меню. Используйте правильный цвет фона, который может хорошо сочетаться друг с другом для разных разделов. Выберите подходящий стиль шрифта и цвет шрифта, соответствующие теме вашей веб-страницы. Это требует глубоких знаний HTML / HTML5 и CSS. Вы можете воспользоваться помощью  Style Conference .
 7. Музыкальный магазин Страница 
 Если вы меломан, вы можете создать для него веб-страницу. Требуются знания HTML5 / CSS3. Добавьте подходящее фоновое изображение, описывающее цель или суть страницы.В разделе заголовка добавьте разные меню. Добавьте кнопки, ссылки, изображения и некоторые описания коллекции доступных песен. Внизу укажите ссылки для покупок, магазина, карьеры или контактные данные. Вы также можете добавить на свои веб-страницы другие функции, такие как пробная версия, подарочные карты или подписка. Сделайте его адаптивным, установив окно просмотра или используя медиа-запросы и сетку. Вы можете воспользоваться помощью  myTunes .
 8. Сайт для фотографий 
 Если у вас есть глубокие познания в HTML5 и CSS3, вы можете создать одностраничный адаптивный сайт с фотографиями.Используйте flexbox и медиа-запросы для быстрого реагирования. Добавьте название компании с изображением (относящимся к фотографии) вверху (целевой странице). Ниже демонстрируется ваша работа с добавлением нескольких изображений. Укажите контактную информацию фотографа внизу (нижний колонтитул). Добавьте кнопку для просмотра своей работы. Эта кнопка приведет вас прямо в раздел изображений. Вам нужно позаботиться о полях, отступах, сочетании цветов, размере шрифта, стиле шрифта, размере изображения и стиле кнопки. Вы можете воспользоваться помощью  Acme Photography .
 9. Личное портфолио 
 Зная HTML5 и CSS3, вы также можете создать свое портфолио. Продемонстрируйте свои образцы работ и навыки в своем портфолио со своим именем и фотографиями. Вы также можете добавить туда свое резюме и разместить свое полное портфолио в учетной записи GitHub. В разделе заголовка упомяните некоторые меню, такие как «О нас», «Контакты», «Работа» или «Услуги». Вверху добавьте одно из своих изображений и представьтесь там. Ниже добавьте несколько примеров работы и, наконец, (нижний колонтитул) добавьте контактную информацию или учетную запись в социальной сети.Вы можете получить помощь от  Personal Portfolio .
 10. Техническая документация 
 Если вы немного знакомы с Javascript, вы можете создать веб-страницу с технической документацией. Это требует знания HTML, CSS и базового JavaScript. Разделите всю веб-страницу на два раздела. Левая сторона создает меню со всеми темами, перечисленными сверху вниз. Справа нужно указать документацию или описание тем. Идея состоит в том, что после того, как вы нажмете на одну из тем в левом разделе, она загрузит контент справа.Для щелчка вы можете использовать опцию закладок javascript или CSS. Не нужно делать его слишком навороченным, просто придайте ему простой и приличный вид, подходящий для технической документации. Вы можете получить помощь в технической документации  .
  Полезная ссылка:  10 советов по эффективному веб-дизайну в 2019 году
 HTML - это основа веб-страниц, используется для разработки веб-страниц путем структурирования веб-сайтов и веб-приложений. Вы можете изучить HTML с нуля, следуя этому руководству по HTML и Примеры HTML.
 CSS - это основа веб-страниц, используется для разработки веб-страниц путем стилизации веб-сайтов и веб-приложений. Вы можете изучить CSS с нуля, следуя этому руководству по CSS и примерам CSS.
 7 проектов для отработки навыков HTML и CSS для начинающих | автор: Avic Ndugu 
 Это всегда увлекательно, когда вы впервые пытаетесь изучить новый навык. Особенно кодирование.
 Однако, если у вас нет практики, вы забываете большую часть того, что узнали. Поэтому в какой-то момент вы понимаете, что вам нужно практиковать то, что вы узнали.Иначе вы все это забудете.
 Вот здесь-то и появляются проекты. Проекты - это хороший способ применить на практике то, что вы узнали. И поверьте, вы хотите поработать над некоторыми проектами. Вы можете использовать проекты, чтобы продемонстрировать, над чем вы работали.
 Женщина, работающая над проектом на компьютере
 Для новичка выбор проектов, соответствующих вашему текущему уровню знаний, может быть сложной задачей. Вы можете выбрать проект. Тогда проект становится слишком большим, чтобы его можно было реализовать с использованием ваших нынешних ноу-хау.По крайней мере, это то, через что я прошел в этом познавательном путешествии.
 Я курировал несколько проектов, которые, по моему мнению, подходят, даже если  ваши знания ограничены только HTML и CSS . Эти проекты доступны на популярных обучающих веб-сайтах, где вы найдете дополнительную информацию о том, чем вы будете заниматься.
 1. Страница дани
 Скриншот страницы дани
 Напишите дань уважения тому, кем вы восхищаетесь, и опубликуйте на веб-странице. Этот проект будет включать работу с добавлением изображений, ссылок, списков и абзацев.Для создания этого проекта потребуется знание HTML. Однако вы можете использовать немного CSS, чтобы проект выглядел лучше.
  2. Форма опроса 
 Формы полезны при сборе данных в Интернете. Этот проект будет в основном проверять ваши навыки на всевозможных материалах. Это проверит ваши знания форм и структуры вашей веб-страницы. Форма не требуется для отправки каких-либо данных.
 Это наращивание со страницы дани. Для создания этого проекта потребуется знание html / html5.
  3. Создание целевой страницы продукта 
 Целевая страница продукта - авторский проект
 Это позволит проверить ваши знания как HTML, так и CSS. Вам потребуется попрактиковаться в создании столбцов и выравнивании элементов внутри столбцов. Вам также потребуется выполнить базовое редактирование изображений, например. обрезка и изменение размера для создания идеальных изображений для вашей веб-страницы. 
 Вам потребуются глубокие знания HTML / CSS.
  4. Создание страницы технической документации 
 Страница документации проекта
 Для этого потребуются некоторые знания HTML, CSS и начальной загрузки или JavaScript.Основная идея такова: когда вы нажимаете на любую тему слева, она загружает этот контент справа.
 В настоящее время я пытаюсь реализовать этот проект, и я опубликую последний проект, как только он будет завершен.
  5. Создайте веб-страницу личного портфолио 
 Портфолио, демонстрирующее проекты, над которыми вы работали.
 Вы будете практиковать все полученные навыки в HTML и CSS. Вам также необходимо знать, как обрезать изображения и изменять их размер. Если у вас нет вариантов, используйте GIMP. Он бесплатный, с открытым исходным кодом и доступен для Windows и Linux.
 Если вы спешите сделать портфолио, вы можете прочитать статью Брайана о создании онлайн-портфолио с использованием готовой темы / шаблона.
  6. Страница Google.com 
 Снимок экрана google.com
 Да, вы видели это много раз. Но можете ли вы это воспроизвести. Простая страница google.com со значками, логотипом Google, текстовым полем и двумя кнопками. Вы можете сделать страницу google.com похожей. В этом проекте вы делаете вид, будто google.com не работает как google.com.
 Вам необходимо знать как HTML, так и CSS.
 7.  google.com Страница результатов поиска 
 Снимок экрана страницы результатов поиска google
 Вы создадите страницу с форматом результата поиска google. Ваша страница должна иметь обычные 10 результатов и переход к следующим страницам внизу.
 Это обновление базовой страницы google.com выше. Однако вы сможете повторно использовать часть кода в этом проекте.
 Кроме того, сделайте так, чтобы страница выглядела немного, но функциональность не должна быть проблемой прямо сейчас.
 Если вы хотите изучить основы HTML, вы можете ознакомиться с моим кратким вводным уроком по HTML.
 Вы, , сделали базовый проект , когда изучали HTML и CSS? Если вы действительно поделитесь ими ниже и помогли другим учащимся найти «простые», но сложные идеи, которые можно было бы попробовать.
 HTML / CSS упражнения, практические проекты, экзамены 
 УПРАЖНЕНИЯ, ПРИМЕРЫ, ПРАКТИЧЕСКИЕ ПРОЕКТЫ HTML / CSS, ВОПРОСЫ ДЛЯ ИНТЕРВЬЮ… 
 
 1) Земля кода
 Начинающий
 30 Упражнения: основы, форматирование текста, ссылки, изображения.
 Создайте веб-страницу, на которой ваше имя выводится на экран, напечатайте свое имя шрифтом Tahoma, распечатайте список определений из 5 элементов, создайте ссылки на пять разных страниц и т. Д.
 2) W3schools (Интернет-терминал)
 Начинающий
 90 Упражнения HTML: заголовки, абзацы, стили, форматирование, комментарии, изображения, скрипты, таблица, списки, формы.
 3) Coredogs
 Начинающий
 9 Упражнения: создавайте веб-страницы, похожие на различные образцы изображений.
 4) HTML - это просто
 Начинающий
 20 упражнений: создайте страницу и загрузите ее на бесплатный веб-хостинг, сделайте страницу с большим жирным курсивом заголовком, добавьте ссылку на страницу, добавьте счетчик посещений, опубликуйте онлайн-резюме, вставьте таблицу с данными о ценах на акции в 6 столбцов, создайте головоломку, сделайте простую страницу и поместите два ввода текста, кнопку «Отправить» и т. д.
 5) Github
 Начинающий
 18 Примеры: заголовки, изображения, списки, таблицы, селекторы, цвета, текст, поля.
 6) Умный способ учиться
 Начальный - средний
 1600 контрольных вопросов.
 7) Тестовый купол
 Начальный - средний
 Онлайн-тест HTML / CSS
 7) 100 форм (HTML)
 Начинающий
 Создайте 100 уже созданных форм: формы церковных пожертвований, бронирование гостиниц, обзор продуктов, регистрационная форма, регистрация на поездку и т. Д.
 8) Геопространственное обучение (HTML / CSS)
 Начинающий
 10 упражнений: теги, встраивание, селекторы, свойства, группировка, макет, позиционирование: добавьте теги на веб-страницу так, чтобы она выглядела как на снимке экрана ниже, создайте веб-страницу со множеством встроенных элементов, селекторов, добавьте пары значений свойств в правила CSS и т. Д. .
 9) Код со мной
 Начинающий
 10 упражнений: формат, страница, классы CSS, проект, блочная модель, макет CSS, интерактивные. Используйте инспектор, создайте страницу с помощью тегов,,