Каждая Web-страница имеет две ипостаси: одна — внешняя, которую видят пользователи в окне браузера, и другая — HTML-код, который соединяет все элементы страницы воедино и делает ее работающей. Чтобы ваш дизайнерский труд был более эффективным, нужно понимать, как устроена Web-страница. Я не говорю, что вам надо научиться программировать с закрытыми глазами, но необходимо четко представлять структуру HTML- кода, как его оптимизировать и какие части кода можно копировать и вставлять (мое самое любимое занятие в HTML-программировании).
Овладеть навыками работы с HTML совсем несложно. Сам Web-браузер помогает в изучении HTML-трюков и ловких приемов, так как программный код любой Web-страницы можно просмотреть с помощью браузера. Кроме того, существуют мощные программные средства, которые позволяют создавать новые сайты так же легко, как разрабатывать графику с помощью графических программ. Интерфейсы этих программ очень похожи между собой. В данной главе вы узнаете: как использовать таблицы, фреймы и CSS-стили для эффективного управления макетом страницы; как создавать фоновые узоры; как сделать страницу интерактивной с помощью ссылок.
Итак, не бойтесь заглянуть за ширму привлекательных Web-страниц, просмотреть и попытаться понять HTML-код.
В основном, элементы размещаются на Web-странице с помощью языка разметки страниц HTML (HyperText Markup Language). Первоначально HTML был очень простым и использовался лишь в качестве языка для отображения документов и организации ссылок между ними. С течением времени HTML эволюционировал и сейчас уже обладает возможностями поддержки сложных макетов страниц, роскошных интерактивных медиакомпонентов и дополнительных встроенных языков, например JavaScript.
Web-страница, которую все мы хорошо знаем и любим, получается благодаря тому, что браузер (например, Mozilla Firefox или Internet Explorer) интерпретирует HTML код. (Интересно заметить, что первый графический Web- браузер появился в 1993 г. и назывался “Mosaic”. Эта небольшая программа имела ошеломительный успех, а год спустя была преобразована в браузер Netscape, получивший кодовое название “Mozilla”. Такова история развития этого браузера.)
Язык HTML позволяет отобразить графику, анимацию и медиакомпоненты в окне браузера, при этом самого кода пользователь не видит — конечно, до тех пор, пока специально не захочет на него взглянуть. HTML-код напоминает невидимого чародея из книги “Волшебник Изумрудного города”.
Когда вы впервые увидите HTML-код, может показаться, что вы смотрите через очки на запуск ракетной установки. Однако все не так уж сложно. В HTML применяется система тегов (небольших частей кода), определяющая каждый типовой элемент на Web-странице (начиная от ссылок и заканчивая изображениями). Теги позволяют размещать изображения, создавать таблицы, задавать стиль шрифта и т.п. Все теги заключены в угловые скобки: открывающие (<) и закрывающие (>). Например, HTML-тег <а>, используемый для кнопок и ссылок, выглядит следующим образом:
<а href="page2.htm">Page 2</а>
Данный фрагмент кода позволяет отобразить на Web-странице подчеркнутую ссылку Раде 2. Когда пользователь щелкнет на этой ссылке, на экране появится страница page2 .html. Причем совершенно не обязательно, чтобы текст ссылки соответствовал имени файла. Например, этот код <а href="page2 .html" > выполнится с таким же успехом, если текст ссылки будет целым предложением Щелкните здесь, чтобы увидеть мою коллекцию. В следующем примере все это предложение будет отображаться как подчеркнутая ссылка на страницу page2 .html.
<а href="раде2.htm">Щелкните здесь, чтобы увидеть мою коллекцию.</а>
Теги, как правило, представлены парной конструкцией. Каждая конструкция содержит открывающий— в данном случае это <а href="page2 .htm"> — и закрывающий тег — </а>. И открывающий, и закрывающий теги заключены в угловые скобки -
< и >. Текст, находящийся между этими тегами (Раде 2), вы увидите на Web-странице в ссылке. К примеру, на Web-странице этот HTML-код будет отображаться простой текстовой ссылкой.
Освоение языка HTML сводится к изучению различных тегов и их месторасположения в структуре кода. Если вы все это запомните, то обязательно добьётесь успехов. Вы можете буквально копировать и вставлять теги из других страниц, а затем немного изменять их в соот ветствии со своими идеями. Фактически в Web-индустрии поощряется изучение HTML путем вставки и изменения скопированного кода. Безусловно, нужно быть внимательным и проверять, чтобы все было вставлено правильно. Программа Dreamweaver способна выделять фрагменты кода, которые нуждаются в исправлении.
Чтобы просмотреть исходный код Web-страницы, необходимо выполнить несложную последовательность действий.
- Подключитесь к Интернету и откройте Web-браузер, например Mozilla Firefox или Internet Explorer.
- Введите URL-адрес и перейдите на страницу, исходный код которой вы хотите просмотреть.
- Для просмотра исходного HTML-кода:
- в браузере Firefox выберите ViewOPage Source (Вид1^Источник страницы);
- в браузере Internet Explorer — Вид^Источник (ViewOSource).
На экране откроется новое окно с HTML-кодом текущей Web-страницы. При беглом просмотре вы увидите текстовое содержимое страницы, а также теги <а> для ссылок. Любую часть кода можно скопировать.
В открывшемся окне отображается только HTML-код, здесь вы не увидите внешних связанных CSS-документов. (Более подробную информацию по каскадным таблицам стилей вы найдете в разделе “CSS: тег <div>”.) Если на странице используется внешний CSS-документ, в конструкции <head> нужно указать путь к CSS-файлу. Можно скопировать путь к CSS-файлу и вставить его в адресное поле браузера, как будто вы вводите Web-адрес, вы увидите CSS-код, используемый страницей.
Учитесь у других
Теперь, когда вы знаете, как “заглянуть за кулисы” и просмотреть HTML-код, вы можете делать для себя закладки на интересных Web-страницах, которые вам встретились в Интернете. Как мне кажется, лучший способ научиться программировать на HTML — каждый день изучать структуру встречающихся вам страниц. После просмотра и детального анализа достаточного количества Web-страниц, вы начнете понимать основную структуру HTML-кода, порядок расположения тегов на странице. Этому важно научиться до того, как вы начнете копировать и вставлять части HTML-кода.
Как крылья бабочки, открывающий и закрывающий HTML-теги зеркально отображают друг друга на странице. К примеру, первая строка HTML-кода начинается с тега <html>. Последняя строка содержит закрывающийся тег </html>. Такого рода зеркальная иерархия наблюдается вплоть до объектного уровня (например, в надписях, кнопках и т.д.). Обратите внимание на то, что закрывающие теги располагаются в обратной последовательности от соответствующих им открывающих.
Предложение с двух сторон ограничено CSS-тегами <span class*"stylel>Learn where to copy and paste</span>
Learn where to copy and paste and youre gold en.
То, что пользователь видит на странице
Разобравшись со структурой HTML-страницы, вы поймете, какие части программного кода нужно скопировать и куда их вставить для дальнейшего редактирования и получения желаемого результата. Кроме того, копируя и вставляя готовые части HTML-кода, вы экономите время, так как вам не приходится вводить код и исправлять случайно пропущенные ошибки.
Один и тот же HTML-код по-разному отображается в разных браузерах. Кроме того, некоторые теги уникальны для каждого браузера. Если тег не распознается браузером, этот тег просто игнорируется. Вполне возможно соз, щть страницу, которая будет отвратительно смотреться в одном браузере и превосходно— в другом. Миниатюрная открытка, представленная очень растянута в браузере Internet Explorer. Та же открытка в браузере Firefox выглядит абсолютно нормально. Возможен и противоположный эффект, можно создать страницу, которая отлично смотрится в Internet Explorer и ужасно — в Firefox.
Наложение мозаичного узора
Тема заключается в размере шрифта. В этом случае в браузере Internet Explorer шрифты оказываются гораздо большего размера. Больший размер шрифта растягивает ячейки таблицы, деформируя при этом весь дизайн. Еще одна проблема состоит в том, что в ячейке используется фоновый узор (Использование фонового узора — единственная возможность добиться эффекта расположения HTML-текста поверх изображения.) Когда ячейки раздвигаются из-за слишком большого текста, узор может повторяться совершенно нс так, как нужно.
Для того чтобы исправить некорректное повторение узора, сделайте этот узор гораздо большим, чем ячейка таблицы. Единственный элемент, который не растягивает ячейку, — это фоновое изображение в ячейке таблицы. Итак, поместите фоновый рисунок большого размера в ячейку и задайте для нее меньшую высоту и ширину (показывая, таким образом, лишь часть вашего изображения). В этом случае, если текст и графика в ячейке будут слишком ее растягивать, худшее, что может случиться, — вы увидите немного больший узор вместо его наложения.
При использовании огромных фоновых рисунков необходимо, чтобы размер файла не был слишком большим. Для этого убедитесь, что дизайн достаточно прост и количество используемых цветов невелико. В противном случае ваша страница будет загружаться очень долго. Чтобы преодолеть |ффеы большого шрифта, задайте меньшее число пунктов в коде страницы или определите меньший абсолютный размер шрифта с помощью CSS. В любом случае до того, как выставить свою страницу на всеобщее обозрение в Интернете, нужно протестировать ее работу в нескольких различных браузерах.
Немного из истории HTML и Интернет
Может показаться, что HTML и Интернет, какими мы их знаем сегодня, существуют всего несколько лет, однако их корни уходят к далеким 1950 годам. Проследить за эволюцией “глобальной паутины” можно на сайте www. w3. org. Консорциум World Wide Web (W3C) как хранитель царства WWW занимается стандартизацией новых технологий, связанных с HTML.
На сайте интернет-сообщества (IS0C) можно изучить историю того, как развивалась идея передачи данных по сети.
www. soc.org /internet history/brief.shtml
Язык HTML подразумевает размещение содержимого на странице сверху вниз и слева направо. Для получения эффекта множества столбцов или строк, как разделы в газете, вам понадобятся специальные контейнеры. К счастью, в HTML доступно три вида таких контейнерных конструкций: фреймы, таблицы и CSS-теги <div> (от англ, division — разделение).
Предлагаем посмотреть другие страницы сайта:
← Создание сайтов, работы, портфолио - демонстрация | Найдите добровольцев для тестирования сайта →
# ПОДЕЛИТЬСЯ:
# НАШ INSTAGRAM:
