Задачи по html и css. задача 13. «запись на курсы»

HTML Учебник

HTML ГЛАВНАЯHTML ВведениеHTML РедакторHTML ОсновыHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML Цвета Цвета RGB HEX HSL

HTML CSSHTML Ссылки Ссылки Цветные Ссылки Ссылки Закладки

HTML Изображения Изображения Изображение Карта Изображение Фон Элемент Картинки

HTML ТаблицыHTML Списки Списки Неупорядоченный Список Упорядоченный Список Другой Список

HTML Встроенный БлокHTML КлассыHTML ИдентификаторыHTML ФреймыHTML JavaScriptHTML Путь к ФайлуHTML ГоловаHTML МакетHTML АдаптивныйHTML Компьютерный кодHTML СимантикаHTML Руководство по стилюHTML СущностиHTML СимволыHTML СмайликиHTML КодировкаHTML URL КодировкаHTML vs. XHTML


Блок . Комментарии HTML

Практически во всех языках программирования есть такое понятие как «комментарии». Комментарии — это такой текст, который будет проигнорирован браузером — на экране он будет не виден, но останется в исходном коде страницы.

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

Комментарии в HTML оформляются следующим образом: сначала уголок, знак ! и два дефиса — <!—, потом текст комментария, а потом два дефиса и уголок — —>. Смотрите пример:

Подсчет Баллов

Вы получите 1 очко за каждый правильный ответ. В конце викторины, ваш общий балл будет отображаться. Максимальный балл-40 баллов.

Удачи!

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

SchoolsW3 Онлайн Сертификация

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

Уже выдано более 10 000 сертификатов!

HTML Сертификат документирует ваши знания HTML.

CSS Сертификат документирует ваши знания продвинутого CSS.

JavaScript Сертификат документирует ваши знания JavaScript и HTML DOM.

jQuery Сертификат документирует ваши знания jQuery.

PHP Сертификат документирует ваши знания PHP и SQL (MySQL).

XML Сертификат документирует ваши знания XML, XML DOM и XSLT.

Bootstrap Сертификат документирует ваши знания Bootstrap фреймворк.

Контрольные вопросы¶

  • Что такое HTML? Что такое гипертекстовый документ?
  • Что такое тег? Структура тега HTML. Формат записи.
  • Привести структуру HTML документа. Описать назначение тегов <html>, <head>, <meta>, <body>.
  • Что такое атрибут тега? Формат записи атрибутов.
  • Перечислить теги для представления текстовго содержимого и дать их описание.
  • Как представляются гиперссылки в HTML документе? Дать пример внутренних и внешних ссылок.
  • Перечислить виды списков, существующих в HTML. Привести теги, представляющие списки в HTML.
  • Что такое вложенные списки в HTML? Привести пример разметки вложенного списка.
  • Как включаются графические объекты в HTML документы?
  • Куда будет указывать ссылка, если атрибут href оставить пустым (<a href=”“>анкор</a>)?
  • Как будет отображаться страница, если мета-тег charset не будет соответствовать фактической кодировке текста?
  • Что произойдет, если в странице использовать следующий код:

Задание №1


Описание задачи:

Заверните заголовки в правильные <h> тэги.

Главный заголовок — <h1>  Подзаголовок — <h2>    Второй и Третий — <h3>Текст нужно оформить как параграф — <p>

1.Главный заголовок   Параграф, который рассказывает об основной идее сайта или приложения.   Параграф, который рассказывает об основной идее сайта или приложения.   Параграф, который рассказывает об основной идее сайта или приложения  1.1. подзаголовок     Параграф, который относится к подзаголовку.     Параграф, который относится к подзаголовку.     Параграф, который относится к подзаголовку.   1.1.1. второй подзаголовок       Параграф, который относится ко второму подзаголовку.       Параграф, который относится ко второму подзаголовку.       Параграф, который относится ко второму подзаголовку.   1.1.2. третий подзаголовок       Параграф, который относится к третьему подзаголовку.       Параграф, который относится к третьему подзаголовку.       Параграф, который относится к третьему подзаголовку.

Блок . Структура простейшей страницы

Страница сайта — это обычный текстовый файл с расширением .html. Внутри этого файла и хранится текст HTML страницы вместе с тегами. Этот файл обязательно должен иметь следующие теги: тег <html>, который должен содержать в себе текст всего сайта (все, что написано вне этого тега, браузером будет проигнорировано), а внутри него должны быть еще два тега: тег <head> для служебного содержимого страницы и тег <body> — для основного текста, который и виден на экране браузера.

В служебное содержимое, которое располагается внутри тега <head>, входит много различных вещей, но пока нам нужны только две из них. Это тег <title>, задающий название страницы, которое будет видно во вкладке браузера, и тег <meta>, который задает кодировку страницы (она ставится в атрибуте charset и обычно имеет значение utf-8, подробнее об этом в видео, которое будет ниже на пару абзацев).

Кроме того, перед тегом <html> обычно пишется конструкция doctype, которая указывает версию языка HTML, на которой сделан сайт. Актуальная сейчас версия языка имеет номер пять и доктайп для нее должен выглядеть так — <!DOCTYPE html>.

Итак, давайте посмотрим на основную структуру страницы (чтобы запустить это пример в браузере — скопируйте его в текстовый файл с расширением .html и откройте в браузере, если у вас проблемы с этим — посмотрите видео под примером):

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

Думаю, после того, как вы прочитали про основную структуру страницы, у вас по-прежнему остается некоторое недопонимание, как все это выглядит на практике. Поэтому я снял специальное видео, в котором покажу вам, как сделать вашу первую HTML страницу и запустить ее в браузере (в нем я также расскажу про title страницы, про кодировки, про оформление кода). Посмотрите его и только потом переходите к дальнейшему чтению:

Тут скоро будет видео как начать: как сохранить с расширением .html, структура страницы, кодировки.

Ну, а теперь, научившись создавать простейшие страницы, мы перейдем к изучению полезных тегов, которые следует использовать внутри тега <body>. Это будут теги для абзацев, заголовков, списков, ссылок и других полезных вещей. Итак, приступим.

HTML Учебник

HTML ГЛАВНАЯHTML ВведениеHTML РедакторHTML ОсновыHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML Цвета Цвета RGB HEX HSL

HTML CSSHTML Ссылки Ссылки Цветные Ссылки Ссылки Закладки

HTML Изображения Изображения Изображение Карта Изображение Фон Элемент Картинки

HTML ТаблицыHTML Списки Списки Неупорядоченный Список Упорядоченный Список Другой Список

HTML Встроенный БлокHTML КлассыHTML ИдентификаторыHTML ФреймыHTML JavaScriptHTML Путь к ФайлуHTML ГоловаHTML МакетHTML АдаптивныйHTML Компьютерный кодHTML СимантикаHTML Руководство по стилюHTML СущностиHTML СимволыHTML СмайликиHTML КодировкаHTML URL КодировкаHTML vs. XHTML

Заголовки страницы

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

,

,

,

,

,
. Они имеют разную степень важности

В заголовке h1 следует располагать название всей HTML страницы, в h2 — название блоков страницы, в h3 — название подблоков и так далее.

Заголовки создаются с помощью тегов

,

,

,

,

,
. Они имеют разную степень важности. В заголовке h1 следует располагать название всей HTML страницы, в h2 — название блоков страницы, в h3 — название подблоков и так далее.. Все заголовки по умолчанию жирные и имеют разный размер (это можно поменять через CSS, но об этом позже)

Для примера сделаем заголовки всех уровней:

Все заголовки по умолчанию жирные и имеют разный размер (это можно поменять через CSS, но об этом позже). Для примера сделаем заголовки всех уровней:

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

Сделайте заголовок h1. Ниже сделайте заголовок h2, а под ним — абзац с текстом. После абзацев сделайте еще один заголовок h2, а под ним — 2 абзаца с текстом.

Часть 2. Задачи по HTML/CSS

  1. Задача: «Центрированный блок»
  2. Задача: «Центрированный блок 2»
  3. Задача: «Буква и строка»
  4. Задача: «Всему свой резон»
  5. Задача: «Полезные ссылки»
  6. Задача: «Математические задачи»
  7. Задача: «Интересная затея»
  8. Задача: «Два принципа»
  9. Задача: «Принципы успеха»
  10. Задача: «Собираем проект»
  11. Задача: «Создание графика»
  12. Задача: «Koans»
  13. Задача: «Всякое разное»
  14. Задача: «Наши достижения»
  15. Задача:  «Словари»
  16. Задача: «Фиксированное избранное»
  17. Задача: «Разноцветные блоки»
  18. Задача: «Две колонки»
  19. Задача: «В два ряда»
  20. Задача: «Серия блоков»
  21. Задача: «Молчание — золото»
  22. Задача: «Кольцо»
  23. Задача: «Три треугольника»
  24. Задача: «Три квадрата»
  25. Задача: «Smart Pixel»
  26. Задача: «Безопасность»
  27. Задача: «Распродажа стайлеров»
  28. Задача: «Зафиксируйте цену»
  29. Задача: «Научное наследие»
  30. Задача: «Эйнштейн»
  31. Задача: «Яндекс»
  32. Задача: «Сегодня на сайте»
  33. Задача: «Самое читаемое»
  34. Задача: «Код CSS»
  35. Задача: «Английский»
  36. Задача: «Переводчики онлайн»
  37. Задача: «План занятий»
  38. Задача: «Книги на форуме»
  39. Задача: «Акценты»
  40. Задача: «Отправить»
  41. Задача: «Бес попутал»
  42. Задача: «Сервис и помощь»
  43. Задача: «Четки»
  44. Задача: «Порядок проживания»
  45. Задача: «Новое в каталоге»
  46. Задача: «Расписание»
  47. Задача: «Пагинация»
  48. Задача: «Пагинация 2»
  49. Задача: «Достижения науки»
  50. Задача: «Хостинг»
  51. Задача: «Школьные предметы»
  52. Задача: «Поиск по вакансиям»
  53. Задача: «Clean code»
  54. Задача: «Календарь 2014»
  55. Задача: «Цвет»
  56. Задача: «Архив за декабрь»
  57. Задача: «Архив лекций»
  58. Задача: «T Magazine»
  59. Задача: «Новости»
  60. Задача: «Репетитор»
  61. Задача: «Нетленка»
  62. Задача: «Популярные теги»
  63. Задача: «Refactoring»
  64. Задача: «Refactoring 2»
  65. Задача: «Образование на форуме»
  66. Задача: «3 декабря»
  67. Задача: «Учебники и пособия»
  68. Задача: «Научное сотрудничество»
  69. Задача: «Париж»
  70. Задача: «Зарегистрируйтесь»
  71. Задача: «Мгновенная оплата»
  72. Задача: «Optimo»
  73. Задача: «Strasburg»
  74. Задача: «До Тху»
  75. Задача: «Донна Каран»
  76. Задача: «Потерянные фрагменты»
  77. Задача: «Вход в личный кабинет»
  78. Задача: «Просто войти»
  79. Задача: «Регистрация»
  80. Задача: «Окно»
  81. Задача: «Прицел»
  82. Задача: «Стопка»
  83. Задача: «Пирамида»
  84. Задача: «Автокресло»
  85. Задача: «Товар дня»
  86. Задача: «Find Fonts»
  87. Задача: «Font Filter»
  88. Задача: «Бытовая техника»
  89. Задача: «Спасибо Динаре»
  90. Задача: «Чат с оператором»
  91. Задача: «Зарплаты»
  92. Задача: «Web Not Bombs»
  93. Задача: «Front-end developer»
  94. Задача: «Войти или зарегистрироваться»
  95. Задача: «Введите email»
  96. Задача: «Счетчик»
  97. Задача: «Акция»
  98. Задача: «Управление бронированием»
  99. Задача: «Поиск уроков»
  100. Задача: «Заметки»
  101. Задача: «Калькулятор»
  102. Задача: «Необычная главная»
  103. Задача: «Interface»

Тест с вопросами и интерактивными задачами по HTML

Для проверки своих знаний можно попробовать оценочный тест. В первом блоке идут 50 вопросов с вариантами ответов. Каждый вопрос оценивается в 1 балл. На ответ даётся 1 попытка.

Во втором блоке — интерактивные задачи с возможностью перетаскивания элементов, заполнения пропусков. В такой форме удобно не только на практике проверить свои знания, но и закрепить их. Даётся 3 попытки на каждый вопрос в случае ошибки.

По завершении вы получите суммарный балл и условно результат пройден/не пройден (80% баллов из возможных 120). Кроме того, будет возможность посмотреть на статистику своих результатов и увидеть правильные ответы.

Читайте больше по теме:


Остерегайтесь автоматических преобразований типов

Учтите, что номера могут случайно быть преобразованы в строки или NaN (не Число).

JavaScript слабо типизирован. Переменная может содержать различные типы данных, и переменная может изменять свой тип данных:

var x = «Привет»;     // typeof x — строка x = 5;               // Изменение typeof x — число

При выполнении математических операций JavaScript может преобразовывать числа в строки:


var x = 5 + 7;       // x.valueOf() будет 12,  typeof x будет числом var x = 5 + «7»;     // x.valueOf() будет 57,  typeof x будет строкой var x = «5» + 7;     // x.valueOf() будет 57,  typeof x будет строкой var x = 5 — 7;       // x.valueOf() будет -2,  typeof x будет числом var x = 5 — «7»;     // x.valueOf() будет -2,  typeof x будет числом var x = «5» — 7;     // x.valueOf() будет -2,  typeof x будет числом var x = 5 — «x»;     // x.valueOf() будет NaN, typeof x будет числом

Вычитание строки из строки, это не генерирует ошибку, но возвращает NaN (не число):

Заявления на вершине

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

Будет:

  • Предоставить более чистый код
  • Укажите единственное место для поиска локальных переменных
  • Сделать его проще, чтобы избежать нежелательных (подразумеваемых) глобальных переменных
  • Уменьшить вероятность нежелательных повторных объявлений

// Объявить в самом началеvar firstName, lastName, price, discount, fullPrice;// Использовать позже firstName = «Андрей»;lastName = «Щипунов»;price = 19.90; discount = 0.10;fullPrice = price * 100 / discount;

Это также относится к переменным цикла:

// Объявить в самом началеvar i;// Использовать позжеfor (i = 0; i < 5; i++) {

По умолчанию JavaScript перемещает все объявления наверх (JavaScript Подъемный).

JS Учебник

JS ГлавнаяJS ВведениеJS УстановкаJS ВыводJS СинтаксисJS ЗаявленияJS КомментарииJS ПеременныеJS ОператорыJS АрифметикаJS ПрисваиванияJS Типы данныхJS ФункцииJS ОбъектыJS ОбластьJS СобытияJS СтрокиJS Методы строкJS ЧислаJS Методы чиселJS МассивыJS Методы массиваJS Сортировка массиваJS Итерация массиваJS ДатыJS Формат датыJS Метод получения датJS Методы набора…JS Математические…JS Случайные числаJS БулевыJS Сравнение…JS Заявления if…elseJS Заявление switchJS Цикл forJS Цикл whileJS Заявление break…JS Преобразование…JS Битовые…JS Регулярные выраженияJS ОшибкиJS ОтладчикJS ПодъемныйJS СтрогийJS Ключевое слово thisJS Руководство стиляJS ПрактикаJS Распространенные ошибкиJS ЭффективностьJS Зарезервированные словаJS ВерсииJS Версия ES5JS Версия ES6JS JSON

Задание №7

Описание задачи:

Отформатировать текст как на рисунке, используя теги для форматирования текста. Текст завернуть в тег <p>

Образец:

Требования:HTML — жирным, но не <b>Интернете — курсив, но не <i>помощью — подстрочныйобрабатывается — надстрочныйэкране в привычном для человека — уменьшен шрифт

Этот текст можно скопировать и вставить в окно редактора:

HTML — стандартный язык разметки веб-страниц в Интернете. Большинство веб-страниц создаются при помощи языка HTML. Документ HTML обрабатывается браузером и отображается на экране в привычном для человека виде.

See the Pen Форматирование by Alla (@AllaJan) on CodePen.


С этим читают