HTML от чайника

Я чайник в HTML, и оттого особенно приятно и мне иногда кому-то что-то объяснить...
Вот, например, меня спросили:

...Стас! А где у фотки тег?... :) А потом я буду спрашивать, как делать ссылку на жж-юзера, чтоб это выглядело его, юзера, именем пользователя, как делать ссылку, чтоб она в одном слове пряталась и как делать зачеркивание...

И вот я тут сейчас всё объясню (насколько сам понимаю...

)

Значит так. Начнём с картинок. Картинка вставляется с помощью тега "img". Выглядит это примерно так:

Вот то же самое с примерами:

И выглядеть сие будет так:

Если написать теперь текст сразу после этого тега, то будет видно, что в этом случае картинка является как бы буквой в строчке, т.е. "растягивает" строчку на всю свою высоту. А чтобы позволить тексту располагаться "вокруг", надо добавить в картинку параметр "align" (он указывает, как выравнивать картинку), и будет так:

И выглядеть сие будет так:

Как видишь, текст теперь обтекает картинку, и тут можно писать сколько влезет, а картинка будет цивилизованно висеть сбоку, а не торчать по-дурацки, как в примере выше.
Но теперь плохо то, что текст прилип к картинке, и это мы исправим, добавив ещё один параметр – "hspace". Он добавляет горизонтальные отступы вокруг картинки.

Теперь мы имеем:

И заодно впихнём для полного счастья картинку ещё и справа:

И выглядеть сие будет так:

И вот теперь напишем снова текст около этой картинки. Теперь он [текст] уже отступает немного от картинки, что нас и радует. Отмечу, что тег второй картинки, которая справа, я написал в самом начале следующего абзаца, и поэтому картинка расположена ниже – т.е. картинка в данном случае вставляется так, что её верхний край совпадает с верхней границей абзаца.

Сразу оговорюсь, что это всё метод тыка + помощь программы ColdFusion чёрт-те какой давности, так что может быть все эти вещи ныне делают иначе. Тем более что отступ от картинки явно есть и слева, а это фигово.
Кажется, ограничиться отступом справа тоже можно, но это я делал (если не ошибаюсь) с помощью css, т.е. дополнительного файла форматов, а это, наверное, уже лишнее было бы в этом объяснении. Так я вообще могу потерять репутацию чайника

, а сие вовсе не входит в мои планы.

Ну, вроде пока с картинкой всё... Вернее, всё, что касается ответа на текущий вопрос

. Дальше – ссылки. Ссылку вставляют с помощью тега "a". Выглядит это примерно так:

<a href="адрес в интернете" title="всплывающая подсказка">текст либо картинка</a>

Естественно, что если ссылкой служит картинка, то пихается целиком тег "img" со всеми его прибамбасами (как было сказано выше). Если же текст – ясен пень, просто пишется текст любой длины, со всеми своими форматами. Вот пример с текстовой ссылкой:

<a href="http://www.livejournal.com/users/jazzzmen/" title="Это вот ссылка на дневник ПиНа">Дневник ПиНа</a>

Ну и выглядеть это будет, само собой, так:

Дневник ПиНа

Ну а если ссылкой служит картинка, то получится примерно вот так (картинку берём предыдущую, а ссылка ведёт на увеличенную копию):

Как ты заметил, я убрал из тега "a" параметр "title", поскольку он дублирует параметр "alt" из тега "img". Возможно, знатоки меня поправят, но по мне, так дублирование ни к чему, а оставить я предпочитаю "alt", т.к. надпись из него появится в квадратике у тех, чей браузер по какой-то причине не прочтёт картинку.

Ну, остались мелочи.

Ссылка на жж-юзера делается вот так: <lj user="jazzzmen">, и получается jazzzmen. Это вообще есть в жж-шном helpе, а ещё легче пользоваться для работы (громко сказано, а?

) в жж программой-клиентом Semagic.

Зачёркиваем вот так: <s>Ашыпка</s>, и получится ~~Ашыпка~~.

Ну вот пока всё

#html #чайник #жж