Задания по html и css: Практикум | htmlbook.ru

MENU

• Главная Babulya
• Содержание
  • Рецепты
  • МедБабуля
    • Диета, здоровый образ жизни
    • Сердце и сосуды
    • Инфекции
      • Корь: чем опасна, методы профилактики и лечения
      • Вирусный гастроэнтерит: симптомы и лечение
      • Дизентерия: причины, симптомы, лекарства, профилактика
      • Проктит и парапроктит: симптомы и лечение, диета
      • Лептоспироз: что нужно знать об этой болезни
      • Туберкулёз мультирезистентный: новые препараты лечения
      • Хламидиоз: симптомы, опасность, диагностика, лечение
      • Кишечная палочка (эшерихиоз, коли-инфекция): симптомы, лечение
      • Дифтерия: лечение, сыворотка, вакцинация
    • Рецепты, диагностика, препараты
      • Цистит: препараты для однократного приема
      • Лекарства от тахикардии при пониженном давлении: медикаменты и народные средства
      • Аритмия: лечение разных нарушений сердечного ритма
      • Таблетки от гипертонической болезни
      • Пропранолол при лечении гипертонии
      • Микоплазмоз: эффективные лекарства для лечения
      • ЛПОНП в липидограмме
      • Пяточная шпора: диагностика и лечение
      • Тепловой, солнечный удар: симптомы, первая помощь и профилактика
      • Синдром беспокойных ног: причины, симптомы, лечение
      • Мочевая кислота: влияние на развитие подагры
      • Диабетическая кома: виды, причины, первая помощь
      • Сухая мозоль со стержнем и другие омозолелости: лечение
      • Аллергия на пыльцу, солнце, холод: причины, симптомы, лекарства
      • Вегетативная нервная система: строение, функции, расстройства, лечение
      • Головная боль: виды, причины, диагностика, лечение
      • Противовирусные препараты при ОРВИ
      • Что используют в мире для лечения SARS-CoV-2, препараты, протокол МОЗ
      • Чтобы клещ не укусил. Правила в вопросах и ответах
      • Грибок ногтей и кожи ног: лекарства и народные средства
      • Акцентуация личности, неврозы, психозы, психосоматика, тесты онлайн
      • Народные методы при лечении щитовидной железы
      • Анафилактический шок, анафилаксия: что нужно знать
  • Дети
  • КиберБабуля
    • CMS, фреймворки
    • Курс программирования на java
    • Курс CS50 2019
    • Андроид
    • Pythoh 2.х.х: тесты и практические задания
    • Веб-программирование с Python 3.х.х и JavaScript (конспекты CS50)
      • Git и GitHub, HTML, CSS: основные понятия, примеры
      • Адаптивный дизайн: CSS, Sass, Bootstrap, подробнее о Git
      • Flask, WSGI, Werkzeug, Jinja2, Django
      • Python, SQL и PostgreSQL: примеры использования
      • Объектно-ориентированное программирование в Python, API
      • Интеграция JavaScript с Python и Flask
      • Front Ends, Single-Page Apps, шаблоны JS, CSS и SVG анимация
      • Django
      • Запуск файлов Python на локальном сервере
    • HTML, CSS, JavaScript
      • Введение. Основные понятия: front-end, HTML, CSS, JavaScript
      • Введение в HTML
      • Первые практические задачи по HTML-разметке
      • Введение в CSS
      • JavaScript: примерный план изучения для начинающих
      • Fronted Developer: дорожная карта для изучения
      • Тест на знание JavaScript начального уровня, 50 вопросов
      • Тест на знание JavaScript (2) начального уровня, 75 вопросов
      • События в JavaScript краткий обзор управления
      • События жизненного цикла страницы load, resize, scroll
      • JavaScript: добавление интерактивности в документы HTML
      • Converter js методом toString за полчаса
      • URL Decoder/Encoder, Text To Hex/Hex To Text
      • Currency Converter (конвертер валют bank.gov.ua) на JS
      • Приложение на JavaScript: проверка IP, время, погода
      • Приложение календарь, IP, прогноз погоды, дата и время
      • Прогноз погоды с OpenWeather forecast, конвертер валют
      • Прогноз погоды, конвертер валют с графиками canvas Chart.js
      • Карты и геолокация: примеры использования бесплатных API с открытым исходным кодом (Open Street Map и Leaflet API)
      • Аудио плеер на JS: визуализация частот Canvas
      • Аудио плеер на Java Script продвинутый
      • Слайдер, карусель на Java Script для сайта
      • Цветной текст на изображение: фильтр css ‘mix-blend-mode’
      • Background CSS: множественный фон, смешивание, blend-mode
      • Бегущая строка. Чем заменить HTML-тег marquee
      • Видеопоток: GetUserMedia API, запись, загрузка
      • Приложение Смешная ВебКамера с GetUserMedia
      • Canvas: рисование и анимация графики, введение
      • Основы Canvas HTML5: принципы рисования
      • Режим немедленного рисования в canvas
      • Режим path mode (режим рисования пути) canvas
      • Контекст canvas: градиенты, узоры, тени, стили линий
      • Three.JS: 3D-графика с canvas WebGL
      • Графики. Строим кривые для конвертера валют с Chart.js
      • Короткий тест по canvas
      • Генераторы цветовых схем: создаём палитру сайта
      • Объект в JavaScript: создаём и преобразуем на практике
      • Приложение прогноз погоды на JS с выбором города
      • React: точка входа. Базовые примеры (1)
      • React.js: точка входа. Базовые примеры (2)
      • Что нужно знать, чтобы начать работать с JAMstack
      • JAMstack Gatsby + NetlifyCMS с oAuth видео
      • Создаем тест «jQuery начальный уровень» на … jQuery
      • Доступ к содержимому iframe на странице на javascript
      • Эффект fade, toggle на vanilla js и jQuery: сравнение, пример
      • 3Д анимация SCC3: img реверс/аверс perspective + transform
      • Множественные свойства CSS на jQuery, animation, button
  • РелаксБабуля

Основы HTML для начинающих

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

Поделиться

Твитнуть

Поделиться

Класснуть

Запинить

Для изучения урока, скачайте архив с необходимыми файлами.

HTML — это язык разметки документов. Правильное произношение — Эйч Ти Эм Эль.

Вы, наверняка, работали когда-нибудь в редакторе документов Word или подобных офисных приложениях? Наверное вы знаете, что данный вид редакторов имеет богатые возможности для редактирования текста, расположения элементов, вставки картинок и т. д.

Зачем, спросите вы, писать в статье, посвященной HTML о текстовых процессорах? А вот зачем. Если разобраться, что такое офисный редактор? Это приложение для редактирования и отображения документов.

Ключевое слово здесь — документ. То есть, мы создаем, редактируем и просматриваем документ в какой-то программе, в данном случае — в офисном редакторе. Если открыть такой документ в простом текстовом редакторе, например, в Блокноте, то мы увидим множество странных символов и знаков. Эта каша из символов непонятна человечеству, но понятна компьютерам. Благодаря этому внутреннему языку, документ Word приобретает определенную структуру и вид в самом редакторе, а документ предстает перед нами во всей своей красе с отформатированным текстом и картинками на своем месте.

HTML — это язык разметки документов для браузера. Word’ом здесь выступает браузер, а документом — HTML страничка. Это самая основа технологии HTML, понимание которой необходимо для того, чтобы не путать язык разметки веб документов с языками программирования. Название говорит за себя — с помощью HTML мы размечаем, где на странице будет показан элемент, картинка или текст, и в каком порядке они будут следовать друг за другом.

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

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

Этакий Word для HTML. Такие визуальные редакторы называются:

WYSIWYG редакторы — What You See Is What You Get. То есть, если перевести на русский: что видим, то и получаем.

Я их называю «вузивуги». Хоть это фонетически и не правильно, зато ярко свидетельствует о бессмысленности данного изобретения. Новички очень часто используют такие редакторы для создания своих первых сайтов. Конечно, это удобно — не нужно углубляться в изучение тегов, стилей оформления и прочих, на первый взгляд, неприятных и сложных вещей. Редактор сам автоматически преобразует наши действия в HTML код.

Но, как говорится, ни чего просто так не бывает. А если конкретнее — у такого подхода есть очень серьезные недостатки. Что же мешает всем подряд использовать визуальные редакторы для оформления HTML страничек? Дело в том, что сформированные таким образом страницы имеют, как правило, очень много лишнего кода, очень много ошибок с семантической точки зрения. Сейчас, конечно, нет проблем со скоростным интернет соединением и разница в размере странички в 400 кб и 100 кб не существенна для скорости, однако оптимизированный и правильно написанный HTML код избавляет от множества проблем и дает массу преимуществ, а именно:

• Грамотный HTML код положительно влияет на поисковую оптимизацию, скорость сканирования поисковым роботом сайта. Сгенерированные вузивугой килобайты кода здесь не приемлемы и даже вредны;
• HTML код, сгенерированный WYSIWYG редактором имеет множество семантических ошибок. То есть, теги, генерируемые таким редактором используются не по назначению, там где нужно использовать, например, списки <ul>, редактор сгенерирует нам другой, ненужный нам тег. Зависит, конечно, от редактора, но здесь имеются ввиду комплексные решения для создания сайтов, а не простого редактирования текста в текстовой области средствами WYSIWYG.
• Генерируется много лишних тегов и структура документа получается раздутой. Допустим, вы передвигаете элемент в такой программе сначала вправо, потом влево, потом по центру — от каждого действия остается след в исходном HTML коде. Редактор — это программа и он не может знать, что именно вы хотите получить в результате, он формирует тонны кода с учетом всех возможных вариантов поведения документа в браузере.
• Как правило, редакторы для визуального оформления HTML кода, быстро устаревают. А ввиду отсутствия интереса со стороны профессионалов — вообще лишаются поддержки и останавливаются в развитии. А HTML развивается. Все развивается, кроме вузивуги. Соответственно, они не могут генерировать правильный и современный код, в котором были бы задействованы новые фишки и решения.
• Поддерживать такие проекты и развивать — кара небесная. Об использовании паттернов и повторном использовании кода речи вообще быть не может.

Так что, HTML будем писать только ручками. Адекватных инструментов для визуального редактирования HTML еще не придумали, да и врядли они появятся. Язык разметки HTML прост в освоении и понимании, а средств автоматизации написания HTML кода множество, но об этом в других уроках.

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

Структура документа HTML

Рекомендую для занятий скачать и установить редактор Sublime Text. Крайне не рекомендую использовать для HTML верстки встроенный в Windows «Блокнот», если вы не хотите сломать себе психику на ранних порах изучения HTML.

Мы решили, что код HTML документа будем писать вручную, то есть верстать. HTML Верстка — процесс создания HTML документа. В простонародье и осведомленных кругах — просто верстка. Любой документ имеет структуру и определенные правила построения. Из каких же элементов состоит код, какая структура у HTML?

Давайте создадим на компьютере первоначальный шаблон — файл index.html, откроем с помощью редактора и вставим в него следующий код:

<!doctype html> 
<html> 
<head> 
	<title>Заголовок</title> 
	<meta charset="UTF-8"> 
	<link rel="icon" href="favicon.ico"> 
	<link rel="stylesheet" href="style.css"> 
	<script src="script.js" type="text/javascript"></script>
</head> 
<body> 
	Тело документа 
</body> 
</html>

Обратите внимание, документы HTML имеют расширение .html.

Итак, по порядку из примера.

<!doctype html> — тип документа (доктайп)

<!doctype html>

Данная конструкция всегда указывается в начале документа для правильного «понимания» браузером того, какая версия HTML используется при построении документа.

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

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

<html> — начало документа

<html>

Первый тег, который мы встречаем после доктайпа, это <html>.

HTML тег — структурная единица разметки HTML документа. Код HTML складывается из кирпичиков, которые именуются тегами. Каждый тег имеет свою функцию, а изучение языка разметки HTML, в конечном счете, заключается именно в изучении тегов и их свойств в документе.

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

Итак, разметка документа начинается с тега <html> и заканчивается закрывающим тегом </html>. Каждый тег, который содержит в себе другие теги или элементы должен закрываться закрывающим тегом. Например, <html></html>, <p></p>, <div></div>, и т. д.

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

Тег <head>

<head>

Далее, мы видим тег <head>, который содержит другие, пока не понятные нам элементы. Содержит другие элементы — это значит, что элементы или теги находятся между открывающим и закрывающим тегом конструкции:

<тег> 
	содержание или другие теги
</тег>

Тег <head> предназначен для хранения метаинформации HTML документа, то есть информации, которая не отображается в самом документе, но является важной и во многом определяет, как документ будет выглядеть и как себя вести.
Данный тег обязателен в документе.

Тег <title> — заголовок документа

<title>Заголовок</title>

Заголовок <title> является обязательным тегом, содержащим текстовую метаинформацию, которая отображается в заголовке браузера или вкладки. Тег <title> должен находиться в теге <head>. Также, содержимое данного тега используется поисковыми системами для отображения документа в результатах выдачи.

Метатег <meta charset=»UTF-8″ >

<meta charset="UTF-8" >

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

Метатег — специализированный тег, предназначенный для предоставления структурированных данных о странице. Метатеги чаще всего используются в теге <head>. Метатеги не являются обязательными в структуре HTML документа.

Рекомендую во всех HTML документах изначально использовать кодировку UTF-8, как в примере выше.

Фавиконка (favicon)

<link rel="icon" href="favicon.ico" >

Подключает к документу файл с изображением фавиконки. Фавиконка (favicon) — миниатюрный значок, отображаемый рядом с названием документа во вкладке браузера. Фавиконка — это графический файл, размером 16 x 16 (или 32 x 32) пикселей, который может иметь различные форматы, такие, как png, jpg, ico, gif. Традиционно используется формат ico. Анимированные фавиконки — это gif файлы, содержащие анимацию. Наблюдать анимированный фавикон можно, например, ВКонтакте, когда приходит новое сообщение.

CSS стили документа

<link rel="stylesheet" href="style.css">

Подключает к документу CSS файл со стилями оформления HTML.

CSS — каскадные стили оформления HTML документа. У каждого тега, который находится в теге <body>, имеется набор свойств, такие как — цвет, ширина, высота, положение относительно других элементов. Все эти свойства и есть стили CSS, которые можно вынести во внешний файл. Конструкция <link> подключает внешние файлы к документу HTML, в том числе и стили CSS.

Примечание: свойство href конструкции <link > указывает расположение внешнего файла. В нашем примере, файл style.css и favicon.ico, находятся в той-же папке, что и файл index.html. <link> не имеет закрывающего тега.

Тег <script>

<script src="script.js" type="text/javascript"></script>

Тег <script> содержит код или ссылку на файл javaScript и чаще всего используется внутри тега <head>, хотя инструмент оптимизации скорости загрузки страниц от Google, рекомендует данный тег использовать в конце документа, перед закрывающим тегом </body>.

В нашем примере подключается внешний файл script.js, который находится в той-же папке, что и основной файл index.html.

Итак, друзья, мы рассмотрели основные элементы, которые используются в теге <head> чаще всего. Кроме этих элементов, для <head> есть ряд других, более специфичных и не обязательных.

</head>

Закрываем тег <head> и шагаем дальше.

Тело aka body

<body>

Вот здесь то и начинается все самое интересное и визуально осязаемое в HTML верстке документа.

Перейдем, непосредственно, к верстке видимой части страницы. Все, что мы пишем и верстаем внутри тега <body> будет отображено в браузере. Откроем наш файл index.html в браузере для того, чтобы наглядно видеть, что мы делаем в редакторе.

Тег <body> может содержать любые HTML теги, необходимые для оформления документа и обеспечения его функционала (формы). Приведу таблицу наиболее используемых тегов и вкратце опишу каждый. Вы можете сразу выполнять приведенные примеры в редакторе.

<a>

<a href="http://webdesign-master.ru">текст ссылки</a>

<em>,
<strong>

<em>текст курсивом</em>

<strong>жирный (акцентируемый) текст</strong>

<h2>,
<h3>,
<h4>,
<h5>,
<h5>,
<h6>

<h2>Заголовок первого уровня</h2> 
<h3>Заголовок второго уровня</h3> 
<h4>Заголовок третьего уровня</h4> 
... и т. д.

<ol>,
<ul>

<ul> 
	<li>Элемент маркированного списка 1</li>
	<li>Элемент маркированного списка 2</li>
</ul> 

<ol> 
	<li>Элемент нумерованного списка 1</li>
	<li>Элемент нумерованного списка 2</li>
</ol> 

<p>

<p>Внешний вид HTML разметки во многом 
определяется CSS стилями.</p> 

<p>Тем не менее, некоторые веб-мастера 
предпочитают не использовать стили на первых 
этапах проекта.</p>

<img>

<img src="путь_до_картинки.jpg" alt="Текст">

<form> 
+ <input> 
+ <textarea>

<form action="ссылка_на_скрипт_обработки_формы"> 
	<input type="text" name="name">
	<input type="text" name="email">
	<textarea name="text">
		Текст сообщения
	</textarea>
	<input type="submit" value="Написать">
</form>

<span>

Изучение HTML, в большинстве случаев, не вызывает
<span>ни каких сложностей</span> у новичков.

<video>,
<audio>

<video src="rolik_chuma.mp4" controls></video> 
<audio src="muzichka.mp3" controls></audio>

<div>

<div> 
	<div> 
		Текст во вложенном блоке 
	</div> 
</div>

<iframe>

<iframe src="http://rtfm.org.ru"></iframe>

Мы рассмотрели далеко не все теги, да это и не нужно на данном этапе. Главное — понять основную идею HTML, научиться использовать представленные выше теги, а потом двигаться дальше.

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

Например, не:

<video src="ролик чума.mp4" controls></video>

а:

<video src="rolik_chuma.mp4" controls></video>

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

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

Практическое задание по HTML верстке

Если вы еще не скачали архив с примерами, сделайте это. Для примера, можете подглядывать в файл example.html, который также находился в архиве.

1. Распакуйте архив и в папке с распакованными файлами создайте файл index.html. Откройте созданный файл с помощью текстового редактора Sublime Text;
2. Создайте первоначальную структуру документа с доктайпом, тегом <html>, содержащим <header> и <body> и перейдите к редактированию содержимого тега <body>;
3. Откройте файл readme.txt и выполните соответствующие задания в созданном вами файле index.html. Для проверки результата, откройте index.html в вашем любимом браузере.

На этом урок по основам HTML окончен, в следующем уроке «Основы CSS» мы научимся управлять стилями элементов документа, познакомимся ближе с каскадными таблицами стилей, научимся использовать классы стилей и сделаем нашу верстку красивой и красочной.

Премиум уроки от WebDesign Master

Другие уроки по теме «HTML и CSS»

Работа с текстом | Справочник HTML CSS

Назад к списку задач

Уровень: Начинающий

7 месяцев назад

Задача по HTML и CSS: работа с тегами для оформления текста и стилизация текста используя CSS.

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

1. Создайте папку в удобном для вас месте на вашем компьютере
2. В этой папке создайте новый HTML документ — index.html
3. В index.html создайте HTML скелет документа
4. Создайте новый CSS файл — style.css
5. Подключите CSS файл к HTML файлу
6. Создайте заголовок первого уровня в теге body и напишите там текст «Оформление текста»
7. Добавьте данному заголовку класс title
8. В CSS файле в самом верху создайте селектор для тега body и напишите следующие стили — шрифт Arial, sans-serif, размер шрифта 16px, цвет текста #333, межстрочный отступ 1.5
9. В CSS файле создайте селектор для класса title, и напишите следующие стили — размер шрифта 40px, цвет текста #f03333, межстрочный отступ 1.2, все буквы заглавные
10. После заголовка создайте абзац и напишите там немного текста, можете использовать сайт-генератор случайного текста lipsum.com
11. После абзаца создайте заголовок второго уровня, напишите текст «Заголовок второго уровня» и придайте ему класс subtitle
12. В CSS файле создайте селектор для класса subtitle, и напишите следующие стили — размер шрифта 30px, цвет текста #12ac11, межстрочный отступ 1.2, подчеркивание текста снизу
13. После заголовка создайте абзац и напишите там немного текста, можете использовать сайт-генератор случайного текста lipsum.com
14. После абзаца создайте ненумерованный список с тремя пунктами
15. В каждом пункте напишите немного текста, на свой выбор
16. Задайте списку класс list
17. В CSS файле создайте селектор для класса list, и напишите следующие стили — размер шрифта 20px, цвет текста #444, все буквы наклонные, стиль маркеров списка — square

Назад к списку задач

Если хотите поделиться своим решением, используйте сайты типа codepen.io и оставляйте ссылку в комментарии

Практические задания по теме «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-стилей CSS

CSS — это каскадные таблицы стилей.

CSS экономит много работы. Он может управлять макетом нескольких
веб-страницы сразу.

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

цветов,
Ящики

Что такое CSS?

Каскадные таблицы стилей (CSS) используются для форматирования макета веб-страницы.

С помощью CSS вы можете контролировать цвет, шрифт, размер текста, интервал
между элементами, как элементы расположены и расположены, какой фон
изображения или цвета фона, которые будут использоваться, разные дисплеи для разных устройств
и размеры экрана, и многое другое!

Совет: Слово каскадно означает, что стиль
примененный к родительскому элементу, также будет применяться ко всем дочерним элементам внутри
родитель.Итак, если вы установите цвет основного текста на «синий», все заголовки,
абзацы и другие текстовые элементы в теле также получат тот же цвет (если вы не укажете
что-то другое)!

Использование CSS

CSS можно добавить в HTML-документы тремя способами:

• Inline — с использованием атрибута стиля внутри HTML-элементов
• Внутренний - с использованием элемента