HTML: различия между версиями

Содержимое удалено Содержимое добавлено
оформление
содержание
Строка 168:
Ради будущего! (Потому что так требует HTML 4.01)</i>
</blockquote>
 
=== Ссылки ===
Как я уже говорил, основным свойством, которое отличает нормальный текст и гипертекст является гиперссылка. Гиперссылки создаются с помощью тега <nowiki><a></nowiki> с атрибутом href, который принимает значение нужного нам URL. Например, нужно создать страницу, которая содержит ссылку на статью. Это может выглядеть примерно так:
 
<source lang="html4strict">
<html>
<head><title>Ссылка</title></head>
<body>
Здесь можно найти материалы о web-дизайне:
<a href="http://ru.wikibooks.org/wiki/HTML">ru.wikibooks.org</a>
</body>
</html>
</source>
 
Теперь на странице надпись [[HTML|ru.wikibooks.org]] станет гиперссылкой.
 
Обычно страницы в интернете не сидят одиноко. Они размещаются группами, которые называются узлами. Сайт — это по моему определению набор страниц и других файлов, которые имеют общую часть URL. Например, все страницы, начинающиеся на <nowiki>http://www.microsoft.com</nowiki>, принадлежат одному сайту одной маленькой компьютерной фирмы. Далее следует символ „/“, и адрес продолжается.
 
Можно сделать у себя на компьютере маленькую модель сайта. Для этого нужно создать новый каталог, в котором будем размещать файлы. Затем в каталоге разместить файл index.htm. Если есть какая-то ссылка на ваш сайт, без указания, какой конкретно файл загружать, то будет загружен именно index.htm. Далее мы можем создать еще одну папку внутри нашей. Пусть она называется subdir. Если в ней разместить файл index.htm, то для перехода к нему нужно будет написать: „www.ваш_сайт.com/subdir/“.
 
<blockquote>''При обращении к каталогу всегда в конце добавляйте слэш. Если вы не будете добавлять слэш, то сервер будет вынужден выполнять два запроса. Сначала ваш, без слэша. Потом, когда он разберется что то запрос к каталогу, он сгенерирует свой запрос, со слэшем, и уже его выполнит.''</blockquote>
 
Кроме гипертекстовых страниц на сайте можно размещать любые другие файлы. Тогда после щелчка по ссылке будет появляться стандартный диалог загрузки.
 
Например, если вы певец и хотите поделиться своими песнями с другими, вы можете положить в папку с сайтом файл track1.mp3, а в файле index.htm написать:
 
<source lang="html4strict">
<html>
<head><title>Моя музыка</title></head>
<body>
Я только что записал новый трек. Вы можете <a href="track1.mp3">скачать его здесь.</a>
</body>
</html>
</source>
 
Если файлы находятся в одном каталоге, то в атрибуте href достаточно написать название файла, чтобы сделать ссылку. Если же мы имеем файлы „site/1.htm“ и „site/subdir/2.htm“, то чтобы с первого сделать ссылку на второй, а со второго на первый, надо написать href = „subdir/2.htm“ и href =»../1.htm " соответственно. Такие адреса называются относительными. Две точки означают «тот каталог что выше». Относительные адреса хороши тем, что когда мы переименовываем папку «site» или меняем хостинг их не нужно менять.
 
Но этим возможности тега <nowiki> <a> </nowiki> не исчерпываются. a — сокращенно от anchor — что значит якорь. С помощью тега <a> можно ставить в гипертекстовом документе якоря, или проще говоря закладки, позволяющие переходить в определённое место документа. Это особенно полезно, когда документ большой, и нужно быстро переходить в нём к нужному разделу. Для этого существует атрибут id.
 
<blockquote>''Я правда не понимаю для чего делать закладки с помощью тега <nowiki><a></nowiki>, когда атрибут id есть в каждом тезисе. Но всеми способами получается нормально.''</blockquote>
 
Чтобы долго не объяснять снова приведу пример:
 
<source lang="html4strict">
<html>
<head><title>Моя музыка</title></head>
<body>
<h1> Содержание</h1>
<a href="#part1"><h2>Часть 1</h2></a>
<a href="#part2"><h2>Часть 2</h2></a>
<a href="#part3"><h2>Часть 3</h2></a>
<h1 id="part1">Часть 1</h1>
<p> Много текста </p>
<h1 id="part2">Часть 2</h1>
<p>Много текста</p>
<h1 id="part3"> Часть 3</h1>
<p>Много текста</p>
</body>
</html>
</source>
 
Когда мы делаем гиперпереходы в пределах одной страницы, то в атрибуте href просто пишем знак («#») и название закладки (то что написано в атрибуте id). А когда делаем переход на закладку в другой странице, то сначала пишем адрес страницы, затем добавляем знак («#») и название закладки. Когда случайно делается переход на закладку, которой не существует, ничего страшного не происходит. Мы просто попадаем в начало страницы, как при обычном переходе.
 
<blockquote>''Вообще-то w3cschools писали об атрибуте name, но кроме того они писали, что скоро этот атрибут будет отвергнут и заменён на id. Поэтому думаю лучше использовать более новый, и в два раза короче вариант. А чем короче страница, тем быстрее она загрузится :-)''</blockquote>
 
Чаще страницы загружаются в том окне, где вы щёлкнули ссылку. Но мы можем выбрать место, где будут загружаться страницы. Для этого в теге <nowiki><a></nowiki> существует атрибут target. Он может принимать значения _blank, если нам нужно загружать страницу в новом окне, _self, если нам ничего менять не нужно (оно и так загружается в том окне где щёлкнули), _parent, если мы хотим забрать из окна фрейма и открыть страницу на всё окно.
 
=== Теги форматирования ===
Строка 570 ⟶ 504 :
* preload — используется для загрузки файла вместе с загрузкой веб-страницы.
* src — указывает путь к воспроизводимому файлу (только если не использовался тег <nowiki><source /></nowiki>).
 
== Ссылки ==
Как я уже говорил, основным свойством, которое отличает нормальный текст и гипертекст является гиперссылка. Гиперссылки создаются с помощью тега <nowiki><a></nowiki> с атрибутом href, который принимает значение нужного нам URL. Например, нужно создать страницу, которая содержит ссылку на статью. Это может выглядеть примерно так:
 
<source lang="html4strict">
<html>
<head><title>Ссылка</title></head>
<body>
Здесь можно найти материалы о web-дизайне:
<a href="http://ru.wikibooks.org/wiki/HTML">ru.wikibooks.org</a>
</body>
</html>
</source>
 
Теперь на странице надпись [[HTML|ru.wikibooks.org]] станет гиперссылкой.
 
Обычно страницы в интернете не сидят одиноко. Они размещаются группами, которые называются узлами. Сайт — это по моему определению набор страниц и других файлов, которые имеют общую часть URL. Например, все страницы, начинающиеся на <nowiki>http://www.microsoft.com</nowiki>, принадлежат одному сайту одной маленькой компьютерной фирмы. Далее следует символ „/“, и адрес продолжается.
 
Можно сделать у себя на компьютере маленькую модель сайта. Для этого нужно создать новый каталог, в котором будем размещать файлы. Затем в каталоге разместить файл index.htm. Если есть какая-то ссылка на ваш сайт, без указания, какой конкретно файл загружать, то будет загружен именно index.htm. Далее мы можем создать еще одну папку внутри нашей. Пусть она называется subdir. Если в ней разместить файл index.htm, то для перехода к нему нужно будет написать: „www.ваш_сайт.com/subdir/“.
 
<blockquote>''При обращении к каталогу всегда в конце добавляйте слэш. Если вы не будете добавлять слэш, то сервер будет вынужден выполнять два запроса. Сначала ваш, без слэша. Потом, когда он разберется что то запрос к каталогу, он сгенерирует свой запрос, со слэшем, и уже его выполнит.''</blockquote>
 
Кроме гипертекстовых страниц на сайте можно размещать любые другие файлы. Тогда после щелчка по ссылке будет появляться стандартный диалог загрузки.
 
Например, если вы певец и хотите поделиться своими песнями с другими, вы можете положить в папку с сайтом файл track1.mp3, а в файле index.htm написать:
 
<source lang="html4strict">
<html>
<head><title>Моя музыка</title></head>
<body>
Я только что записал новый трек. Вы можете <a href="track1.mp3">скачать его здесь.</a>
</body>
</html>
</source>
 
Если файлы находятся в одном каталоге, то в атрибуте href достаточно написать название файла, чтобы сделать ссылку. Если же мы имеем файлы „site/1.htm“ и „site/subdir/2.htm“, то чтобы с первого сделать ссылку на второй, а со второго на первый, надо написать href = „subdir/2.htm“ и href =»../1.htm " соответственно. Такие адреса называются относительными. Две точки означают «тот каталог что выше». Относительные адреса хороши тем, что когда мы переименовываем папку «site» или меняем хостинг их не нужно менять.
 
Но этим возможности тега <nowiki> <a> </nowiki> не исчерпываются. a — сокращенно от anchor — что значит якорь. С помощью тега <a> можно ставить в гипертекстовом документе якоря, или проще говоря закладки, позволяющие переходить в определённое место документа. Это особенно полезно, когда документ большой, и нужно быстро переходить в нём к нужному разделу. Для этого существует атрибут id.
 
<blockquote>''Я правда не понимаю для чего делать закладки с помощью тега <nowiki><a></nowiki>, когда атрибут id есть в каждом тезисе. Но всеми способами получается нормально.''</blockquote>
 
Чтобы долго не объяснять снова приведу пример:
 
<source lang="html4strict">
<html>
<head><title>Моя музыка</title></head>
<body>
<h1> Содержание</h1>
<a href="#part1"><h2>Часть 1</h2></a>
<a href="#part2"><h2>Часть 2</h2></a>
<a href="#part3"><h2>Часть 3</h2></a>
<h1 id="part1">Часть 1</h1>
<p> Много текста </p>
<h1 id="part2">Часть 2</h1>
<p>Много текста</p>
<h1 id="part3"> Часть 3</h1>
<p>Много текста</p>
</body>
</html>
</source>
 
Когда мы делаем гиперпереходы в пределах одной страницы, то в атрибуте href просто пишем знак («#») и название закладки (то что написано в атрибуте id). А когда делаем переход на закладку в другой странице, то сначала пишем адрес страницы, затем добавляем знак («#») и название закладки. Когда случайно делается переход на закладку, которой не существует, ничего страшного не происходит. Мы просто попадаем в начало страницы, как при обычном переходе.
 
<blockquote>''Вообще-то w3cschools писали об атрибуте name, но кроме того они писали, что скоро этот атрибут будет отвергнут и заменён на id. Поэтому думаю лучше использовать более новый, и в два раза короче вариант. А чем короче страница, тем быстрее она загрузится :-)''</blockquote>
 
Чаще страницы загружаются в том окне, где вы щёлкнули ссылку. Но мы можем выбрать место, где будут загружаться страницы. Для этого в теге <nowiki><a></nowiki> существует атрибут target. Он может принимать значения _blank, если нам нужно загружать страницу в новом окне, _self, если нам ничего менять не нужно (оно и так загружается в том окне где щёлкнули), _parent, если мы хотим забрать из окна фрейма и открыть страницу на всё окно.
 
== Элементы оформления ==