31.10.2010

Знакомство с HTML

Сегодня хочу познакомить вас немного с языком HTML. Я сама то в этом языке знаю всего несколько «букв», писать большие «слова» почти не умею. Но, что знаю, буду вам рассказывать и показывать на примерах. Чтобы браузер при отображении документа понимал, что перед ним не простой текст, а с элементами форматирования, в HTML применяются теги. Хочу представить вам непарный тег < hr >. Правильно он пишется без пробелов от угловых скобок. Но, если я его пишу правильно, то этот тег у меня превращается в режиме Создать сразу в линию. Как с этим справиться я знаю. Надо по особому писать этот тег, но как писать - я не знаю.)))

Этот тег рисует горизонтальную линию, которая по своему виду зависит от параметров, помещенных внутрь этого тега. Не бойтесь, это на словах все сложно. А я покажу на готовых примерах, и вы все поймете. 

Для примера возьмем линию, которая подчеркивает обращение к читателю на моем блоге Пучок петрушки


Вот и здесь пришлось сделать эту запись в виде рисунка, а то она у меня превращается в зеленую линию сразу, еще до моих объяснений. 

Как видите, картинка не радует глаз, справа от линии осталось свободное место. Чтобы исправить ситуацию, нам нужно или же исправить параметр width и указать для него большую величину, или же в параметре align, который отвечает за местоположение линии написать слово «center». Все изменения вносятся в параметр между кавычками. Если непонятно, то посмотрите на примерах, где параметры этого тега изменены. Их вы найдете ближе к концу статьи. 

Вот что получится в первом случае, когда в параметре width мы проставим цифру 650, вместо 450

Видите, как удлинилась линия? 

А вот второй вариант, когда мы располагаем линию по центру, не изменяя параметр width, а задаем в параметре align расположение по центру. Кстати, в этом случае вы также можете изменить параметр width, если вас не устроит длина линии. 

Выбирайте, какой способ вам нравится больше. Также, если в параметре align написать right, то линия будет начинаться от правой стороны страницы. Но всегда линия будет идти с новой строки, а не в продолжении текста, например.

При помощи программы HTMLColors2000, о которой шла речь в предыдущем уроке, вы можете самостоятельно подобрать цвет линии. В моем примере цвет в теге hr показан следующим образом: color="#38761d". На следующем рисунке вы видите, как изменился цвет линии, когда я заменила параметр color на #ff00aa

Вы же можете выбрать любой другой подходящий цвет. 

Где вы можете использовать знания, полученные сегодня? 

- В любом гаджете Текст, который вы установили на свой блог. Например, вот так: 

Обязательно, нажав на режим: Обогащенный текст (RTF). И у вас получится то, что вы видели в примерах с блога Пучок петрушки
- В любом гаджете HTML/JavaScript, причем вы можете ставить этот тег над описанием Ява скрипта или под ним. Можете прописать его один раз или несколько. Как пример, посмотрите на этот рисунок с моего блога Республика Тыква

Здесь этот тег прописан один раз наверху и три раза внизу. Как он прописан наверху не могу показать, уж слишком длинный Ява-скрипт. Но самая первая строчка в этом гаджете, та же, что и последние три строки. Вот что получается в результате:


- Вы можете вставить этот тег прямо в текст. Вот вам пример из моего сайта Капустная Мозаика

А вот и результат: 

Вот такие могут быть примеры применения тега < hr >. Постаралась объяснить попонятнее. Что получилось – решать вам.

2 комментария:

Petra комментирует...
Этот комментарий был удален автором.
Petra комментирует...

Пожалуйста, пишите комментарии. Чтобы я хотя бы знала, стоит ли мне вообще писать следующие посты. Может быть, мои знания кажутся вам не такими нужными. Ну чем богаты...

Это стОит прочитать:

Наши читатели пишут

Новые Друзья Блога

Шпаргалки для чайника

Дорогие читатели коллективного блога,
за полтора года работы с блогами я узнала сама и с помощью других блоггеров много интересного и полезного о продуктах Google.
Все свои открытия, сделанные "методом научного тыка", я для памяти записываю в специальный блог в виде иллюстрированных уроков.
Но не являясь ни профессиональным учителем, ни профессиональным программистом не могу утверждать, что мои записи выдержаны в полном соответствии с официальной териминологией. Поэтому я назвала их "Шпаргалками" .
Осмелюсь предложить их вашему вниманию.
Полезны они только совершенным Чайникам.
Вопросы принимаются в комментариях к постам.
Критика - не принимается: я так делаю, мне это нравится. Если вы делаете по-другому, тоже имеете полное право. Удачи.

Путеводитель по "Блог-о-ведению"

для начинающих блоггеров:

как использовать стандартные функции продуктов Google :

Скачать Picasa бесплатно. По-русски.

Путеводитель по теме "Программа Пикаса" от Гуугля

1. Как я разобралась с хаосом папок.

2. Как я работаю с папками в этой программе.

3. Как я делаю в Пикасе коллажи и подписи к ним:

первая статья

вторая статья

третья статья

четвёртая статья

4. Что мне понравилось в новой версии Программы Пикаса.

5. Как я загружаю картинки из программы Пикаса прямо в свои Блоги.

6. Какие виды коллажей я уже умею делать в программе.

7. Фотографии, внесённые в папку можноразделить на несколько папок.

8. Как c помощью Пикаса я"фотографирую" экран компьютера

9. Как с помощью Пикаса защитить свои Авторские права.

10. Пикаса сама переименовывает файлы, если вам это нужно.

11. Как в Пикаса переносить с одной фотки на другую подписи, которые надо повторить.

12. Как в Пикаса восстановить первоначальную картинку.

13. Как сделать шаблон подписи и установит её на большом количестве картинок.

14. Как улучшить качество снимка

15. Внести изменения в веб-альбомыпрямо из Пикаса за одно движение.

16. Смотрим через Пикаса веб-альбомы других пользователей.

17. Как получать обновления из веб-альбомов своих друзей и коллег по хобби.

19. Если у вас веб-альбомы в разныхаккаунтах.

20. Смежные галереи веб-альбомов - содержат интересные вам материалы.

Путеводитель по Гаждетам и др. темам

А. Что я сама узнала

3. Опция прямая "ссылка на сообщение".

11. Глюки от Гугля. И на солнце есть пятна.

21. Какие разделы есть в Группах Гугль.

22. Опция Gmail : отправить сообщение в Группу и опубликовать комментарий в посте.

23. Форматирование текста - это помогает читать и понимать.

24. Не надо пугаться, если вас заблокировали, как спам-блог.

25. Инструкция для Читателей.

Б. Что мне другие рассказали

1. Гаджет/виджет "Случайные посты"

3. Как поставить переводчик в блог. От Тройки.

3. Как поставить переводчик в блог. От Тройки.

4. Гаджет "выскажи своё мнение" от БП

Браузер Chrome Google

А. Загрузить Хром. - это бесплатно.

1. Что надо знать о браузере Хром.

2. Как копировать текст и картинки из интернета с помоью Хрома

3. Как изменить масштаб отображения страниц блога.

5. Установить Ярлыки блогов и запускать их с рабочего стола.

Проверьте, всё ли вы сделали, чтобы не потерять свой АККАУНТ:

Разные полезности:

Для продвинутых пользователей рекомендую блог:

Всё для Blogger(а) на Blogspot(е)!

и Группу помощи русскоязычным Блоггерам.

Советы Читателю:

Введение. Статьи 1. - 2. - 3.

Posted by Picasa

Всегда ваша

Яна

*****************************************************