Основы HTML
Внимание! Все тесты в этом разделе разработаны пользователями сайта для собственного использования. Администрация сайта не проверяет возможные ошибки, которые могут встретиться в тестах.
Тест для проверки знаний по теме «Основы HTML», для обучающихся, по дисциплине «Информатика».
Система оценки: 5 балльная
Список вопросов теста
Вопрос 1
HTML- это:
Варианты ответов
- Система программирования
- Графический редактор
- Система управления базами данных
- Система для создания гипертекстовых документов
Вопрос 2
Документ HTML представляет собой:
Варианты ответов
- Текстовый файл с расширением txt или doc
- Текстовый файл с расширением htm или html
- Графический файл с расширением gif или jpg
Вопрос 3
Тэг — это:
Варианты ответов
- Инструкция браузеру, указывающая способ отображения текста
- Текст, в котором используются спецсимволы
- Гипертекст
Вопрос 4
Между какими тэгами находится содержимое тела документа ?
Абсолютные и относительные ссылки
Это короткая шпаргалка о том, как правильно ставить ссылки и не теряться в адресах.
Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Абсолютные ссылки
Абсолютная ссылка — это адрес ресурса целиком. Обычно такие ссылки ставят на сторонние ресурсы и надеются, что адрес не изменится.
https://htmlacademy.ru https://htmlacademy.ru/blog/boost/tools/chrome-devtools-2
Не забывайте — если вы используете абсолютные ссылки на сайте, то при смене структуры папок или перемещении файлов большинство ссылок могут сломаться.
Относительные ссылки
То, куда ведут относительные ссылки, зависит от расположения текущей страницы. Посмотрим на примере:
Предположим, мы загрузили страницу по такому адресу:
https://htmlacademy.ru/blog/frontend/html/index.html
Во всех примерах ниже приведены относительная ссылка и полный путь, в который браузер расшифровывает ссылку.
Ссылка на файл в той же папке
1.html https://htmlacademy.ru/blog/frontend/html/1.html
Файл расположен в той же папке, где и текущая страница. Пишется без дополнительных знаков.
Ссылка на файл в папке ниже текущей
directory/3.html https://htmlacademy.ru/blog/frontend/html/directory/3.html
Файл в дочерней папке относительно текущей. Перед именем файла через / пишем название папки.
dir1/dir2/5.html https://htmlacademy.ru/blog/frontend/html/dir1/dir2/5.html
Страница находится на две папки ниже текущей.
Ссылка относительно корня сайта
/2.html https://htmlacademy.ru/2.html
Файл расположен в корневой папке сайта. Для ссылки относительно корня используется / . Такая ссылка сработает только на веб-сервере — с локальными файлами на компьютере это не сработает.
/dir1/dir2/4.png https://htmlacademy.ru/dir1/dir2/4.png
Файл на два уровня ниже корня сайта.
Ссылка на папку выше текущей
../6.html https://htmlacademy.ru/blog/frontend/6.html
На одну папку «вверх» относительно текущей. Для «подъёма» используется синтаксис ../ .
../../7.html https://htmlacademy.ru/blog/7.html
На две папки вверх. Синтаксис ../ может повторяться сколько угодно раз, главное, чтобы все папки «по пути» существовали.
Комбинированная ссылка
../../../dir1/dir2/8.html https://htmlacademy.ru/dir1/dir2/8.html
На три папки вверх и на две папки вниз относительно текущей — поднялись до корня и последовательно спустились в папки dir1 и dir2 .
Все приведённые примеры одной картинкой:
id-ссылки (якорные ссылки)
Якорные ссылки пригодятся, если нужно сослаться на определенное место документа — например, на заголовок. Для этого заголовку нужно установить определенный атрибут id , а в ссылке через # дописать этот атрибут в конце.
Содержание первой главы
Ставим якорную ссылку на той же странице:
Ставим якорную ссылку на другую страницу:
Пройдите интерактивный тренажёр по якорным ссылкам, чтобы узнать наверняка, как это делается.
Что будет, если ошибиться
Файл, на который вы ссылаетесь, не загрузится — появится ошибка 404. Если так случилось, можно посмотреть через Chrome DevTools, что с адресом.
Ещё можно по незнанию поставить ссылку на файл на своём компьютере, а потом удивляться, почему не грузятся картинки. Такое в 1998 произошло на сайте Microsoft Game Studios. Разработчики оставили ссылку на файл на диске H:/ .
Сейчас, конечно, такого никто в больших компаниях не допустит — но если вы сначала делаете страничку на своём компьютере, могут быть нюансы. Поэтому пользуйтесь нашей шпаргалкой, чтобы избежать ошибок.
Ссылки — сила:
- Что такое ссылки и как их ставить. Тег a
- Как ставить пустые ссылки
- Что лучше использовать: ссылки или кнопки
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Осмысленный alt-текст: 6 правил
Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.
Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
- 27 февраля 2024
Что такое Lazy Loading и как её включить на сайте
Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.
Ленивая загрузка делает сайт быстрее и экономит трафик, если у пользователя мобильный интернет с ограничениями.
Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
- 22 ноября 2023
Знакомство с HTML
Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.
HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.
Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
- 1 ноября 2023
Специальные символы в HTML
HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
- 23 октября 2023
Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport , то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.
- 18 сентября 2023
Атрибут class в HTML на примерах
Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.
Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
- 14 сентября 2023
В чём отличия цитат
В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.
Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
- 12 сентября 2023
Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
- 13 июня 2023
Как отличить h1, h2 и h3
Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от до . Каждый уровень заголовка имеет свой семантический вес, где имеет наибольший вес, а — наименьший.
Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.
Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.
В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.
- 8 июня 2023
Как правильно вставлять SVG
Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.
SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.
Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.
�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~
Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.
SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.
Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.
- 1 июня 2023
Устранение неполадок с неисправыми ссылками
Если приложение пытается использовать неработающие ссылки, возникает ошибка исключения. Основная причина ошибки заключается в невозможности найти указанный компонент, но существует несколько сценариев, в которых ссылка считается неработающей, и это:
- Ссылочный путь проекта является неправильным или неполным.
- Файл, на который ссылается ссылка, удален.
- Файл, на который ссылается ссылка, был переименован.
- Сбой сетевого подключения или проверки подлинности.
- На компьютер не установлен указанный com-компонент.
В следующих разделах приведены решения этих сценариев.
На файлы в сборках ссылаются абсолютные пути в файле проекта. Таким образом, пользователи, работающие в среде с несколькими разработчиками, могут обнаружить, что в локальной среде отсутствует сборка, на которую указывает ссылка. Чтобы избежать этих ошибок, лучше добавить ссылки между проектами. Дополнительные сведения см. в разделе Сборки в .NET.
Путь к ссылке неправильный или неполный
Если проекты совместно используются на разных компьютерах, некоторые ссылки могут быть не найдены, если компонент находится в другом каталоге. Ссылки хранятся под именем файла компонента (например, MyComponent). При добавлении ссылки на проект расположение папки файла компонента (например, C:\MyComponents) добавляется к свойству проекта ReferencePath .
При открытии проекта Visual Studio ищет в каталогах по пути ссылки, чтобы попытаться найти эти файлы компонентов. Если открыть проект на компьютере, на котором компонент хранится в другом каталоге, например D:\MyComponents, ссылка не будет найдена и в списке задач появится ошибка.
Чтобы устранить эту проблему, используйте один из следующих методов:
- Удалите неработающие ссылки и замените ее с помощью диалогового окна Добавление ссылки .
- Используйте элемент Reference Path на страницах свойств проекта. Измените папки в списке, чтобы они указывали на правильные расположения. Свойство Reference Path сохраняется для каждого пользователя на каждом компьютере. Таким образом, изменение пути к ссылке не влияет на других пользователей проекта.
Ссылки между проектами не имеют таких проблем с неработающей ссылкой. По этой причине используйте ссылки между проектами вместо ссылок на файлы, если это возможно.
Исправление неработающие ссылки на проект
Чтобы исправить неисправную ссылку на проект, исправьте путь к ссылке, выполнив следующие действия:
- В Обозреватель решений щелкните правой кнопкой мыши узел проекта и выберите Пункт Свойства. Откроется конструктор проектов .
- Если вы используете Visual Basic, выберите страницу Ссылки , а затем — Ссылочные пути .
- В диалоговом окне Ссылочные пути введите путь к папке, содержащей элемент, на который вы хотите ссылаться, в поле Папка .
- Выберите Добавить папку.
- В поле Папка введите путь к папке, содержащей элемент, на который вы хотите ссылаться.
- Выберите Добавить папку.
Файл, на который ссылается ссылка, удален
Ниже приведены два варианта исправления неработающей ссылки на проект для удаленного файла, который больше не существует на диске.
- Удалите ссылку.
- Если ссылка существует в другом расположении на компьютере, считайте ее из этого расположения.
Файл, на который ссылается ссылка, переименован
Ниже приведены два варианта исправления неработающей ссылки на файл, который был переименован:
- Удалите ссылку, а затем добавьте ссылку на переименованный файл.
- Если ссылка существует в другом расположении на компьютере, считайте ее из этого расположения.
Сбой сетевого подключения или проверки подлинности
Для недоступных файлов может быть много возможных причин. Например, может возникнуть сбой сетевого подключения или сбой проверки подлинности. И наоборот, каждая причина может иметь уникальные средства восстановления. Например, для доступа к необходимым ресурсам может потребоваться обратиться к локальному администратору. Однако удаление ссылки и исправление кода, который ее использовал, всегда является вариантом.
Компонент COM, на который ссылается ссылка, не установлен на компьютере
Если пользователь добавляет ссылку на компонент COM, а второй пользователь пытается запустить код на компьютере, на котором не установлен этот компонент, второй пользователь получает ошибку неработающей ссылки. Установка компонента на втором компьютере исправляет ошибку. Дополнительные сведения об использовании ссылок на com-компоненты в проектах см. в разделе Взаимодействие COM в приложениях платформа .NET Framework.
Ссылки
- Страница «Ссылки», конструктор проектов (Visual Basic)
- Что такое конструктор проектов .NET?
Что произойдет если файл на который вы ссылаетесь отсутствует
Урок №3. За пределами html-страницы.
Цели работы:
1.Знакомство с принципом работы гиперссылок.
2.Рассмотрение внешних и внутренних ссылок, ссылок на различные ресурсы сети Интернет.
3.Закрепление изученного материала на примерах.Пример 3.1. Организация гиперссылок.
После вставки ссылки закройте окно и сохраните изменения. Проверьте правильность выполнения, снова загрузив измененный документ – если всё правильно сделано слово Дальше отобразится синим цветом и станет подчёркнутым – теперь оно является гиперссылкой на документ «xxx.htm» из Урока №2 (пример 2.2). Имя файла на который ссылаетесь можно писать и без кавычек.
Задание 3.1: Аналогичные действия проделайте с примером 2.2, вставив перед гиперссылку на первый документ («my.htm») — Назад. В результате Вы получите два связанных HTML-документа, если всё проделано правильно, то при нажатии на гиперссылку загрузится второй документ («xxx.htm») и, наоборот, при нажатии в загруженном документе на слово Назад произойдёт переход на первую страницу («my.htm»).
Задание 3.2: Создайте два HTML-документа на произвольную тему, свяжите их гиперссылками, как показано в примере 3.1. Один из документов должен содержать внутреннюю ссылку и «прицельную» ссылку на второй документ. Для проверки ее работы целесообразно ввести большой фрагмент текста, либо просто заполнить страничку каким – либо символом. Отметим, что внутренняя ссылка не покажет своего действия, если текст в Вашем документе не выходит за пределы видимости.
Для обращения к следующему занятию Вам необходимо пройти тест
Copyright © 2006 Масальский Антон.