Твитнуть об этом видео
Поделиться на Facebook
Поделиться по E-mail
Скачать исходники к 1 бонусному видеоуроку по HTML Размер: 40.24 kB, скачали: 349 раз.
Таблица спецсимволов HTML
- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл index.html в браузере.
- валидность документов
- расширенный язык разметки гипертекста XHTML
Работать мы будем только над одним файлом. Он сохранился из 16 видеоурока по курсу HTML. Называется этот файл index.html. Я прошу открыть код этого файла и проделывать то, что я буду проделывать с ним по ходу видеоурока. Сначала мы проверим наш документ на валидность, потом исправим ошибки и сделаем тем самым документ валидным, затем перепишем документ в расширенном языке разметки гипертекста XHTML, потом опять проверим на валидность и вновь исправим ошибки. Именно по такой схеме будет построен видеоурок.
Что такое валидность?
Прежде, чем проверять документ на валидность, я расскажу вам про нее немного подробнее. Планировалось, что каждый сайт должен соответствовать стандартам, то есть быть валидным. Если сайт соответствует всем стандартам, то он должен отображаться во всех браузерах одинаково правильно. Конечно же, есть старые браузеры, которые совсем не дружат с настоящими стандартами, и именно поэтому ваш сайт не будет отображаться одинаково во всех браузерах, но это уже совсем другая история. Сейчас у нас урок посвящен валидности, и мы будем делать документ валидным.
Как проверить веб-страницу на валидность?
Переходим в валидатор. Прошу вас зайти на сайт . На нем есть три способа проверить документ на валидность:
- ввести адрес документа (если ваш документ располагается на каком-нибудь сайте, то вы можете ввести этот адрес и нажать check)
- загрузить
- вставить сам код
Мы воспользуемся вторым. Жмем check. Результат — 5 ошибок. Как мы видим, первые три ошибки — это ошибки с атрибутом alt. Дело в том, что атрибут alt является обязательным, поэтому нам его нужно поставить ко всем изображениям.
Как сделать веб-страницу валидной?
Мы видим, что ошибка произошла на 12-й строке, вторая ошибка — на 16-й, а третья — на 17-й. На эти строки мы и поставим атрибут alt.
<img src="img/map.png" usemap="#map1" alt="Карта сайта" > <map id="map1"> <area shape="rect" coords="70,43,270,121" href="#s1" alt="Якорь 1" > <area shape="rect" coords="476,37,556,243" href="#s2" alt="Якорь 2" > <area shape="circle" coords="147,199,61" href="#s3" alt="Якорь 3" >
Сохраняем. Переходим снова в браузер. Четвертая ошибка произошла на 38-й строке. Валидатор не распознает атрибут color, поэтому давайте его удалим, хотя, как мы видели, браузер его распознает.
<hr align="left" size="5" width="200" />
Последняя ошибка находится на 44-й строке, и нам показывают, что мы закрыли несуществующий абзац. Перейдем в код. Если мы нажмем на абзац, то есть на закрывающийся тег </p>, то мы увидим его открытие. Здесь можно решить проблему двумя способами:
- перенести закрытие абзаца перед списками
<br />Сейчас Вы смотрите данный видеоурок и скорее всего:</p>
именно из-за списков валидатор показал ошибку
- оставить закрытие абзаца на том же месте, но заменить абзац на тег <div>.
Мы воспользовались первым вариантом. Сохраняем, переходим в браузер. Снова указываем путь к файлу и жмем revalidate. Как мы видим, наш документ полностью прошел проверку. Первую из трех частей видеоурока мы уже преодолели.
Что такое XHTML?
Переходим ко второй части – XHTML. Подробнее про XHTML вы можете прочитать на сайте . XHTML планировался как более строгий язык разметки гипертекста, но теперь стандарт XHTML не развивается, и все разработчики, которые над ним работали перешли на развитие HTML5. Однако вы сейчас можете встретить много сайтов, которые все еще написаны на XHTML, поэтому мы и будем его разбирать.
В чем отличия XHTML и HTML?
Главное отличие XHTML от HTML состоит в том, что элемент doctype записывается по-другому. Поэтому, первым делом мы заменяем элемент doctype. Есть несколько синтаксисов XHTML, мы записали переходный.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Давайте посмотрим следующий пункт отличия. Кодировка должна быть только utf-8. Меняем windows-1251 на utf-8 и преобразовываем в utf-8 без BOM.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Следующий пункт. Все теги должны быть закрыты. На экране мы видим, что в первой строке у нас идет «открыт абзац» — «закрыт абзац», а во второй и третьей строках идут одиночные теги. Они закрываются слешем. Таким образом, в XHTML даже одиночные теги закрываются. Давайте искать эти теги. Это <img>, <area> , <br>. Чтобы не терять время, мы выделяем тег <br>, жмем CTRL+F и переходим на вкладку «Заменить». В поле «заменить на» вводим <br />. Жмем кнопку «заменить все» и читаем, что 9 замен завершено.
<img src="img/map.png" usemap="#map1" alt="Карта сайта" /> <map id="map1"> <area shape="rect" coords="70,43,270,121" href="#s1" alt="Якорь 1" /> <area shape="rect" coords="476,37,556,243" href="#s2" alt="Якорь 2" /> <area shape="circle" coords="147,199,61" href="#s3" alt="Якорь 3" /> <area shape="poly" coords="270,160,351,174,434,160,417,203,433,248,351,236,270,250,287,204" href="#s4" alt="Якорь 4" /> <...> <a href="about.html"><img src="img/info-line.png" align="left" alt="Info-line" width="150" height="150" border="0" hspace="5" vspace="5" /> <...> <br /><small>Дааааа... Шли недели...</small></div> <...>
Следующий пункт. Все теги и атрибуты пишутся строчными буквами. То есть не заглавными, а именно строчными. Если мы посмотрим, то у нас все теги и атрибуты и так писались строчными буквами.
Пользуйтесь специальными символами. Их мы разбирали в шестом видеоуроке по HTML. Сейчас вам просто надо ими воспользоваться. То есть, мы вводим «>» вместо значка «>» или «&» вместо «&» и т. д.
Булевы атрибуты записываются в развернутой форме. Мы с вами проходили формы и там были теги, которые имели булевы атрибуты. Булевы атрибуты мы просто записывали в конце словом «selected» или «checked». Сейчас же булев атрибут нужно записывать в развернутой форме, то есть selected="selected" или checked="checked". В документе index.html у нас таких атрибутов нет.
Сохраняем документ.
Проверяем документ XHTML на валидность.
Давайте проверим его на валидаторе. Мы переходим на тот же сайт и снова загружаем файл. Жмем check. И как мы видим, у нас выявлено целых 18 ошибок. Пугаться не стоит, так как большинство ошибок связано с отсутствием какого-либо обязательного атрибута. Давайте пролистаем вниз. Итак, первая ошибка у нас на второй строке. Нас просят заменить html на xmlns и ссылка на w3.org.
Делаем документ XHTML валидным.
Мы это сделаем, так как этого требует стандарт XHTML.
<html xmlns="http://www.w3.org/1999/xhtml">
Смотрим следующую ошибку. Она произошла на пятой строке. Она связана с тем, что мы не закрыли одиночный тег <meta>. Давайте закроем.
<meta http-equiv="Content-Language" content="ru" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="Мой, личная, страница, info, line, net, рассказ, сайт" /> <meta name="description" content="Моя личная страница! Сказ о том, зачем я создал сайт info-line.net" />
Далее идет не ошибка, а нам просто говорят, что начальный тег имел место быть здесь. На это просто не обращаем внимание.
Ошибку на шестой строке мы уже исправили, на седьмой и восьмой — тоже. Как мы видим, они повторяются.
Следующая ошибка находится на тринадцатой строке. XHTML требует, чтобы в качестве идентификатора указывался атрибут id, а не name. Меняем name на id.
<map id="map1">
Смотрим дальше. Двадцать четвертая строка. Здесь просто не закрыт тег <br>. Мы указывали автозамену, но так как здесь у нас стоит атрибут clear, то эта замена не была совершена. Просто переходим на 24-ю строчку и закрываем тег <br>.
<br clear="left" />Это был именно тот момент в жизни, когда что-то внутри пересчелкнуло и я стал идти по пути успеха.
Следующая ошибка у нас на 35-й строке. Как мы видим, здесь у нас не закрыт тег <li>. Но этот тег не одиночный. Он имеет закрывающий тег. Возможно, в каком-то уроке я ошибся. Поэтому мы сейчас исправим эту ошибку и добавим закрывающий тег </li>.
<ul type="square"> <li>Вы со мной согласны.</li> <li>Вы со мной не согласны.</li> <li>Вы в замешательстве.</li> </ul> <hr align="left" size="5" width="200" > <ol type="I"> <li>Вы со мной согласны.</li> <li>Вы со мной не согласны.</li> <li>Вы в замешательстве.</li> </ol>
Как я вам уже говорил, XHTML – более строгий стандарт, нежели HTML. Если в HTML сайт отображался правильно и даже валидатор не показал ошибки, то в XHTML все должно быть строго правильно.
Смотрим следующие ошибки. Тридцать седьмую строку мы исправили, а вот тридцать восьмую — не исправляли. Здесь ошибка связана с тегом <hr>. Тег одиночный, но мы, опять же, забыли его закрыть.
<hr align="left" size="5" width="200" />
Следующая ошибка на 41-й, 42-й, 43-й строках. Мы их уже исправили.
Сохраняем. Проверяем документ заново. Указываем путь к файлу и жмем revalidate. Я вас поздравляю, результат вы видите на своем экране. Теперь вы способны создать полностью валидный как HTML, так и XHTML документ.
Спасибо за внимание. До встречи в следующем бонусном видеоуроке, в котором мы с вами разберем одну из самых животрепещущих тем — HTML 5.
Info-line.net