Newcomposers.ru

IT Мир
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Задания по html

Сборник упражнений и задач по основам HTML

Пару слов о задачнике

Наш задачник по основам HTML содержит стандартные упражнения и задачи с решениями на закрепление теоретических основ излагаемых в учебнике.

Если в ходе освоения учебного материала у вас возникнут трудности, пишите мне в индивидуальный ‘Чат с автором’ (по возможности стараюсь отвечать всем).

Чтобы посмотреть результат выполнения исходного кода решения задачи во фрейме кодового блока, используйте кнопку ‘Результат’ .

Оглавление задачника

Синтаксис HTML

1.1. Скопируйте исходный код нашей первой веб-страницы в свой редактор и для удобства восприятия отформатируйте его. Показать решение.

Условие задачи №1.1

1.2. Попробуйте написать по памяти код нашей первой веб-страницы. Показать решение.

1.3. Скопируйте исходный код нашей первой веб-страницы в свой редактор, после чего исправьте в нем все ошибки. Показать решение.

Условие задачи №1.3

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

Условие задачи №1.4

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

Универсальные атрибуты html-элементов

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

2.2. Создайте веб-страницу, состоящую из двух абзацев, в которых будет по два коротких предложения, расположенных на разных строках. Цвет текста первого абзаца должен быть красным, а второго – синим. При наведении курсора на первый абзац, должна появляться подсказка «Я первый абзац», а при наведении на второй – «Я второй абзац». Используйте атрибут style, а в качестве его значения свойства CSS : «color: red» и «color: blue» . Также воспользуйтесь атрибутом title, не путая его с аналогичным элементом. Показать решение.

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

Условие задачи №2.3

2.4. Скрипт в исходном коде примера позволяет найти в документе элемент с требуемым id и сделать цвет его шрифта красным. Зная это, сделайте текст второго абзаца красным. Показать решение.

Условие задачи №2.4

2.5. Преобразуйте второй абзац в исходном коде примера в редактируемый элемент с проверкой орфографии. Используйте для этого универсальные атрибуты contenteditable и spellcheck. Запустите код в своем браузере и устраните ошибки в тексте. Обратите внимание, что после получения абзацем фокуса, браузер автоматически будет подсвечивать слова с ошибками до тех пор, пока все ошибки не будут исправлены. Показать решение.

Условие задачи №2.5

2.6. Исправьте ошибки в исходном коде примера, после чего запустите его в своем браузере. Показать решение.

Условие задачи №2.6

Мнемоники и коды Юникод в HTML

3.1. Создайте веб-страницу, содержащую абзац с предложением «Сколько будет ½+⅓ ?». Чтобы задать красный цвет шрифта для суммы, используйте тег , а также универсальный атрибут style со значением «color: red» . Для дробей используйте мнемоники и коды Юникода (результат должен быть одинаков), которые можно найти в наших таблицах мнемоник здесь. Показать решение.

3.2. Создайте веб-страницу, содержащую предложение: «Я открывающий тег «. Для знаков ‘ ‘ используйте мнемоники, а чтобы задать зеленый цвет шрифта, используйте тег и универсальный атрибут style со значением «color: green» . Показать решение.

3.3. Создайте веб-страницу, содержащую предложение: «Чтобы вывести мнемонику ‘&’ на экран, необходимо в коде знак амперсанда заменить на его мнемонику!». При наведении курсора на мнемонику, должна появляться подсказка «Мнемоника». Используйте универсальный атрибут style и значение цвета green , а также универсальный атрибут title. Не забудьте использовать в заголовке документа служебный тег . Показать решение.

3.4. Исправьте ошибки в исходном коде примера, после чего запустите его в своем браузере. Показать решение.

htmllab

Задания по основам работы с HTML и CSS

Задачи по основам HTML призваны закрепить работу с набором следующих тем: структура HTML, комментарии в HTML, основные теги, основные атрибуты HTML. Задачи по основам.

Задачи по работе с гиперссылками освещают вопросы: понятия гиперссылки, внешние гиперссылки, внутренние гиперссылки. Задачи на гиперссылки.

Задачи по изображениям в HTML: вставка изображения в HTML (HTML код изображения), размер HTML изображения, выравнивание изображения… Задачи по работе с изображениями в HTML.

Задания по углубленной работе с HTML и CSS

Задания по HTML с Emmet. Быстрая верстка, команды Emmet (так называемая шпаргалка Emmet). После выполнения задач с плагином Emmet скорость вашей верстки/разработки вырастет в разы. Задания по Emmet.

Задания по CSS-селекторам. Селекторы CSS: css селекторы классов , css селекторы атрибутов , соседние селекторы css , контекстные селекторы css, дочерние селекторы +в css , приоритет селекторов. Задания на CSS-селекторы.

Задания по float css. Обтекание в HTML и CSS — хорошая возможность разместить блоки на одном уровне или построить многоколоночную страницу. Владея свойством float, можно отчасти управлять блочностью элемента, а зная как решать проблемы с обтеканием — не тратить время на поиски «ошибок». Задания на CSS Float.

Работа CSS-позиционирования важна для понимания сложной верстки. Здесь приводятся задачи на понимание и работу с: position absolute, position relative, position fixed и position static, CSS-свойств top left bottom right. Задания по CSS-позиционированию.

Задания по верстке форм

  1. Сверстайте форму аутентификации на сайте, такую же как в Twitter Bootstrap (не используя этот фреймворк). Например, как в панели навигации Bootstrap.
  2. Сверстайте форму диспетчера на сайте
  3. Подключить jQuery-плагин для выбора даты/месяца из поля
  4. Создайте чекбокс по аналогии с социальной сетью.
  5. Создайте форму регистрации посетителя сайта
  6. Создайте форму подобной той, что сортирует товары в Яндекс.Маркет

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

Современные возможности CSS позволяют создавать замечательные CSS-анимации и работать с фоном раскрашивая его градиентной заливкой. Небольшой набор задач на CSS-анимацию.

Задания на медиа запросы (мобильные сайты). Создание мобильной версии сайта — важная часть умений веб-разработчиков. Задания посвящены темам: создание мобильного сайта, проверка мобильной версии сайта. Задания на media queries.

Задания по верстке psd макета и CSS-фреймворкам. Верстка сайта на основе psd макета — важнейшая часть работы веб-верстальщика. На уроках HTML мы рассматриваем основные шаги верстки из psd в HTML. Задания по верстке psd макета.

Практические задания по теме «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)
Читать еще:  Использование js в html

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

  • Задание № 4.1 – «Горизонтальные линии (тег )»
  • Задание № 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 – «Создание формы с использованием тега
    »
  • Задание № 6.2 – «Создание формы с использованием тега »
  • Задание № 6.3 – «Создание формы с использованием тега

»

  • Задание № 6.4 – «Создание формы с использованием таблиц»
  • Задание № 6.5 – «Создание формы с использованием тега

    »

  • Задание № 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-страницы с помощью листа стилей – тег (+ пример 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)

    Практическая работа № 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 для начинающих

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

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

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

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

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

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

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

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

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

      — тип документа (доктайп)

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

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

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

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

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

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

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

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

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

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

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

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

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

      Метатег

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

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

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

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

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

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

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

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

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

      Как организовать дистанционное обучение во время карантина?

      Помогает проект «Инфоурок»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      Выберите книгу со скидкой:

      История России. С древнейших времен до XVI века. 6 класс. Контурные карты

      350 руб. 55.00 руб.

      Контурные карты История России конец XVII-XVIII век. 8 класс. (Новые)

      350 руб. 55.00 руб.

      История России. 7 класс. Рабочая тетрадь.

      350 руб. 137.00 руб.

      История России. 6 класс. Рабочая тетрадь.

      350 руб. 137.00 руб.

      История России XX-начало XXI в. Атлас с контурными картами.

      350 руб. 106.00 руб.

      История России. XVI-конец XVII века. 7 класс. Контурные карты

      350 руб. 55.00 руб.

      История России. 8 класс. Рабочая тетрадь. История России. 8 класс. Рабочая тетрадь.

      350 руб. 137.00 руб.

      История России XIX – начало XX века. 9 класс. Контурные карты (Историко-культурный стандарт)

      350 руб. 55.00 руб.

      История России. 9 класс. Рабочая тетрадь.

      350 руб. 137.00 руб.

      ЕГЭ. История России в таблицах и схемах для подготовки к ЕГЭ. 10-11 классы

      350 руб. 80.00 руб.

      ЕГЭ. История России в таблицах и схемах. 10-11 классы

      350 руб. 80.00 руб.

      История России в рассказах для детей. ХV — ХVII века

      350 руб. 137.00 руб.

      БОЛЕЕ 58 000 КНИГ И ШИРОКИЙ ВЫБОР КАНЦТОВАРОВ! ИНФОЛАВКА

      Инфолавка — книжный магазин для педагогов и родителей от проекта «Инфоурок»

      Бесплатный
      Дистанционный конкурс «Стоп коронавирус»

      • Добрынин Иван Юрьевич
      • Написать
      • 7549
      • 28.10.2016

      Номер материала: ДБ-295911

      Добавляйте авторские материалы и получите призы от Инфоурок

      Еженедельный призовой фонд 100 000 Р

      • 28.10.2016
      • 631
      • 27.10.2016
      • 833
      • 27.10.2016
      • 611
      • 27.10.2016
      • 580
      • 27.10.2016
      • 698
      • 27.10.2016
      • 5360
      • 27.10.2016
      • 674

      Не нашли то что искали?

      Вам будут интересны эти курсы:

      Все материалы, размещенные на сайте, созданы авторами сайта либо размещены пользователями сайта и представлены на сайте исключительно для ознакомления. Авторские права на материалы принадлежат их законным авторам. Частичное или полное копирование материалов сайта без письменного разрешения администрации сайта запрещено! Мнение редакции может не совпадать с точкой зрения авторов.

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

    Ссылка на основную публикацию
    Adblock
    detector