Обложка / Оглавление /
Юным программистам
Полезные мелочи
Шаблоны
|
Обложка / Оглавление / |
Юным программистамПолезные мелочи Шаблоны |
Проще всего готовить HTML-страницы прямо в Word-е. Поэтому возникает вопрос, зачем нужно знать HTML? Я не уверен, что это обязательно нужно. Мы ведь пользуемся Word-ом совершенно не интересуясь, как он работает. Правда Word другое дело. Как он работает просто невозможно понять. Как работает HTML понять можно.
HTML-страница, подготовленная в Word-е всегда очень большая. Word всегда умудряется натолкать в любой документ столько всего лишнего, что не устаешь удивляться. Обычно это не имеет большого значения, пока не столкнешься с нашим Интернетом. Большие Word-овские файлы трудно передавать по нашим линиям связи и при обнаружении ошибок их бывает трудно редактировать.
Конечно, когда речь идет о текстах с большим количеством мелких картинок, то лучше воспользоваться услугами Word-а. Например, в статье по математике каждая формула должна быть преобразована в картинку и вставлена точно на свое место. Делать эту работу вручную – это каторжный труд. Но если страница в основном текстовая с небольшим количеством картинок, то можно сделать ее и вручную. Такую страницу будет проще в дальнейшем редактировать.
Есть и другие причины, в силу которых лучше иметь некоторое представление о том, как работает HTML, чем не иметь его. Кроме всего прочего это еще и интересно.
HTML – это язык разметки гипертекста. Гипертекст отличается от простого текста наличием некоторых дополнительных возможностей, в основном это ссылки на другие ресурсы. Следовательно, обычный текст является частным случаем гипертекста. Отсуда можно заключить, что HTML может быть использован и для разметки обычного текста.
Текст мало написать, нужно его еще в наиболее изящном виде донести до читателя. Именно эту проблему и решает язык разметки. Браузеру необходимо сообщить каким образом следует отобразить каждый элемент текста: шрифт, размеры символов, центрирование, разбивка на параграфы, создание таблиц, правильное позиционирование картинок, которые непосредственно в тект не включаются и хранятся в отдельном каталоге. Все это и еще многое другое позволяет делаеть язык разметки.
Язык разметки – искусственный язык, но он использует те же самые символы, которые используются при записи слов естественного языка. При этом слова языка разметки приходится включать в основной текст. Возникает мешанина из двух текстов: основного текста и текста, состоящего из знаков разметки основного текста. Чтобы эти два текста надежно различать, договорились все директивы языка разметки выделять угловыми скобками < и >. Сами угловые скобки со всем их содержимым являются словами языка разметки и не отображаются браузерами.
Для того, чтобы научиться пользоваться языком разметки нужно знать некоторый минимум его слов – тегов. В этом смысле изучение языка разметки ничем не отличается от изучения любого другого языка. Разве что слов в этом языке значительно меньше, чем в любом естественном языке.
Учите слова, господа, и никаких секретов.
Очень интересный элемент <IFRAME>. Он создает плавающее окно. Плавающее – это значит, что его можно поместить в любое место документа, как картинку. В этом окне можно отображать любой другой документ или просто картинку.В следующем примере окно помещено в таблицу и в нем отображается страница i.htm со стихотворением. HTML-код главной страницы приведен слева. Закрывающий тег </IFRAME> обязателен. Если про него забыть, то весь остальной текст документа отображен не будет. Обычно пишут так: <IFRAME> Ваш браузер не отображает плавающие окна </IFRAME>. Если браузер действительно не отображает IFRAME, то есть не понимает тег <IFRAME>, он его проигнорирует и покажет текст. Если же он плавающие окна поддерживает, то текст, расположенный между тегами, показан не будет.
|
<HTML> <BODY background="fon.gif"> <table border=1 width=100%> </td> <td width=50%> </td> </tr> </BODY> |
|
Атрибуты или свойства тега <IFRAME>
align
Выравнивание. Принимает значения:
align="justify"
align="left"
align="right"
align="center"
frameborder
Выводит или не выводит рамку вокруг фрейма. Может принимать значения:
frameborder=1 (по умолчанию, рамка выводится)
frameborder=0 (по умолчанию, рамка не выводится)
frameborder="yes" (по умолчанию, рамка выводится)
frameborder="no" (по умолчанию, рамка не выводится)
height – высота фрейма
width – ширина фрейма
marginheight
Отступы содержимого iframe от верхнего и нижнего края
marginwidth
Отступы содержимого iframe от левого и правого края
name
Имя фрейма. Позволяет в необходимых случаях обращаться к окну по имени.
scrolling
Задает свойства скроллинга. Возможны три значения:
scrolling="auto" по умолчанию, браузер самостоятельно определяет возможность скроллинга
scrolling="yes" скроллинг разрешен
scrolling="no" скроллинг запрещен
src
Адрес загружаемого документа
В этом примере показано, как отображать через плавающее окно различные страницы. Для этого сначала необходимо присвоить окну имя, примерно так: name="window1". Теперь к окну можно обращаться по имени и если в гиперссылках задать атрибут target="window1", то документ откроется в этом окне.
Например, первая гиперссылка задана так:
<a href="http://rdt45.narod.ru/kce/mathematics.htm" target="window1"> Математика и естествознание </a>
К сожалению, размеры окна изменять нельзя и, если размеры страницы велики, то просматривать ее таким образом неудобно.
|
|
Более подробно код можно посмотреть, если открыть в браузере меню/вид/Просмотр HTML-кода.
Центрирование текста
<p align=justify>
<p align=left>
<p align=right>
<p align=center>
Специальные символы
Почувствуйте разницу
Длинное тире — — — — — — — В Word-е набирается Alt+Ctrl+Num+ "-" (минус на цифровой клавиатуре)
Тире – – – – – – – В Word-е набирается Ctrl+Num+ "-" (минус на цифровой клавиатуре)
Черточка - - - Как набирается на клавиатуре черточка или минус, нет необходимости говорить: На-при-мер.
Неразрывной дефис ‑ ‑ ‑ ‑ В Word-е набирается Ctrl+Shift+ "-" (минус на основной клавиатуре) На‑при‑мер
Постепенно сужая окно браузера можно проследить как работает черточка в первом и втором случае.
При наборе текста в блокноте длинное и короткое тире можно вставить копированием из данной страницы.
Неразрывной дефис так просто вставить не удается. Вместо него в тексте следует записать его код: ‑
С помощью кодов можно вводить любые символы. Например, вы видите буквы A B C D E. В действительности же в документе напечатано A B C D E.
Для того, чтобы браузер понял, что речь идет о коде символа, а не о самом символе, код всегда начинается с амперсанда и решетки: &#N, где N – код символа. Если код N представляет шестнадцатиричное число (например, Word дает коды в этом формате), то мы записываем: xN. Например, шестнадцатеричный код знака умножения есть число D7, поэтому, в HTML-документе для его отображения мы должны записать ×. В некоторых случаях кроме числовой предусмотрена мнемоническая кодировка. В этом случае для отделения кода символа от остального текста используется амперсанд и точка с запятой: &[Мнемоническое имя];
Конечно, набирать таким образом текст нет никакого смысла за исключением тех случаев, когда у нас просто нет другого выбора. Например, символы &, > и < являются служебными, и браузер их не отображает. Чтобы эти символы появились в окне браузера, их следует ввести при помощи цифровых или мнемонических кодов. Есть и другие символы, которые удобно вводить при помоще кодов, скажем, знак параграфа.
Необходимый код символа можно найти при помощи диалога вставки символа, который имеется в Word-е. Не всегда это сделать легко: таблица большая и много похожих символов. Когда нужный вам знак имеется в текстовом документе, удобнее воспользоваться следующей возможностью, которую предоставляет Word. Если поместить курсор непосредственно после знака, отображенного в документе Word, и нажать клавиши ALT+X, Word заменит знак его шестнадцатиричным кодом. Обратно, если набрать шестнадцатиричный код символа и нажать клавиши ALT+X, то Word заменит код на соответствующий ему символ. При помощи калькулятора шестнадцатиричный код можно преобразовать в десятичный. В HTML-документе используются десятичные коды символов.
В таблице приводятся некоторые часто используемые коды символов
| Символ | Название | Числовая кодировка | Мнемоническая кодировка |
| & | Амперсанд | & | & |
| < | Меньше | < | < |
| ≤ | Меньше либо равно | ≤ | ≤ |
| > | Больше | > | > |
| ≥ | Больше либо равно | ≥ | ≥ |
| § | Параграф | § | § |
| Неразрывной пробел |   | | |
| ‑ | Неразрывной дефис | ‑ | Нет |
| – | Тире | – | – |
| − | Минус | − | − |
| ± | Плюс-минус | ± | ± |
| × | Умножить | × | × |
| — | Длинное тире | — | — |
| ~ | Тильда | ~ | нет |
| ≈ | Приближенне равенство | ≈ | ≈ |
| ≠ | Не равно | ≠ | ≠ |
| ≡ | Тождество | ≡ | ≡ |
| ⊥ | Перпендикулярно | ⊥ | ⊥ |
| ƒ | Знак функции | ƒ | ƒ |
| _" | Кавычка | " | " |
| _„ | Кавычка открывающая | „ | |
| _” | Кавычка закрывающая (правая) | ” | |
| _“ | Кавычка левая | “ | |
| ° | Градус | ° | ° |
| ◦ | Кружочек | ◦ | |
| ́ | Знак ударения | ́ | Нет |
Кавычки слишком мелко смотрятся в таблице. Чтобы их лучше разглядеть отобразим их крупным шрифтом.
„Пример”, “Пример”, "Пример".
Мне лично больше нравится первый вариант, но я не уверен, что он правильный.
Цвета
| желтый | yellow | color="yellow" | color=#ffff00 |
| аквамарин | aqua | color="aqua" | color=#00ffff |
| зеленый | green | color="green" | color=#008000 |
| каштановый | maroon | color="maroon" | color=#800000 |
| красный | red | color="red" | color=#ff0000 |
| оливковый | olive | color="olive" | color=#808000 |
| пурпурный | purple | color="purple" | color=#800080 |
| светло-зеленый | lime | color="lime" | color=#00ff00 |
| серебристый | silver | color="silver" | color=#c0c0c0 |
| серый | gray | color="gray" | color=#808080 |
| сизый | teal | color="teal" | color=#008080 |
| синий | blue | color="blue" | color=#0000ff |
| ультрамарин | navy | color="navy" | color=#000080 |
| фуксиновый | fuchsia | color="fuchsia" | color=#ff00ff |
| черный | black | color="black" | color=#000000 |
Большой заголовок