суббота, 28 августа 2010 г.

Учимся делать ссылки в html

Ссылка – раде нее и создавалось все. Весь язык HTML без ссылок - это всего лишь набор отформатированного текста. Ссылка же позволяет связать два документа одинаковой тематики, что увеличивает значимость как первого, так и второго документа.

Но и это еще не все. Главной особенностью ссылки является то, что она может ссылаться на любой документ (страницу) находящееся в сети. Так же стоит отметить о многоликости ссылки. Она может быть текстовой, изображением, невидимой областью.

Для того чтобы обозначить ссылку существует тег "a" и его параметр htef, в котором указывается адрес страницы на которую ссылаются.


Пример отображения ссылки


Запомните, тег "a" парный, требует обязательное закрытие.

При переходе по ссылке, по умолчанию, страница открывается в текущем окне браузера. Иногда это неудобно, например, когда необходимо сделать ссылку на другой сайт.

У ссылке существует параметр target, с помощью которого можно изменить переход в другом окне.

Продолжение - Учимся делать ссылки в html


пятница, 20 августа 2010 г.

FAQ по HTML - Форматирование текста

Начну с самого главного тега, без которого нет смысла заниматься разработкой веб страниц.

Тег p - параграф.

Параграф – это текста разделенный по смыслу для более удобного обзора и прочтения. Получается, что какой бы вы текст не вводили, вы, так или иначе будете разбивать его на отдельные части, которые заключите в данный тег.

Далее к тексту применим форматирование, то есть заставим наш текст выглядеть визуально красиво.

Для этого будем применять следующие теги:

strong - Жирное начертание текста. Пример: Применение тега strong. Данный тег является парным, то есть требует закрытия.

em - Курсивное начертание текста. Пример: Применение тега em. Данный тег тоже парный.

Важно знать что теги b и strong, также как i и em являются не совсем эквивалентными друг другу.

Первый тег b — это тег физической разметки и устанавливает жирный текст. Тег strong — это тегом логической разметки и определяет важность помеченного текста.

Такое разделение возникло не случайно и необходимо для универсальности вывода информации.



Для изменения размеров текста применяют заголовки h1...h6.

Заголовки предназначены для создания заголовков (названий) к разделам и показывают их относительную важность. Вы должны знать, что по умолчанию h1 отображается в жирном начертании и размером 24 пунктов, тег h2 уже имеет размер 18 пунктов, а h3 — 14 пунктов и т.д.


Пример отображения парных тегов


Теперь поговорим о выравнивании текста, которое определяет его внешний вид на странице. Существуют несколько видов выравнивания текста: по левому краю, правому краю, центру, и по ширине. Для этого используют параметр align.

Продолжение в FAQ по HTML - Форматирование текста




понедельник, 16 августа 2010 г.

Введение в HTML

Начиная писать данный пост о часто задаваемых вопросах по языку разметки гипертекста HTML, я задумался над тем, что я могу сообщить нового. Зная, что в сети есть более расширенные сайты на эту тему, я решил дать только необходимую информацию по данному вопросу, а именно то, что чаще всего используется на практике.

Думаю для тех, кто только осваивает HTML, будет очень удобно и полезно, так как они конкретно получат ответ на все свои вопросы.

Начну с главного, что Вы должны знать.

HTML - это простой текст, который с помощью специальных символов (тегов) может форматироваться. То есть при открытии любого браузера вы на экранах своих мониторов увидите текст аккуратно оформленный.

Все теги заключаются символами <> и бывают двух видов одиночные и парные. Парные теги закрываются следующим образом .


Пример отображения парных тегов


Как вы видите при правильном написании тегов каждый из них находиться, и закрывается в нутрии главного.

То ест если представить теги в виде контейнеров содержащую необходимую информацию, то два соседних контейнера не должны пересекаться между собой.


Пример отображения не правельного сочетания тегов


Структура любого html документа должна состоять из следующих элементов:

DOCTYPE – указывает на тип документа;
HEAD – блок (раздел) заголовка документа;
BODY – тело документа;

Как вы видите в предыдущих примерах, сначала мы указываем тип документа (данный тег необходим браузеру), далее идет блок тегов, указывающий, что данный документ html, после идет раздел заголовка документа, и только потом идет тело документа.

Теперь поговорим о метатегах, которые необходимо размещать в разделе заголовка документа.

Продолжение читайте в FAQ по HTML - Введение


суббота, 14 августа 2010 г.

Эффективное ускорение своего сайта

Давайте заглянем чуть глубже, за экран монитора. Что мы там увидим? Бесконечное множество страниц сайта, которые, так или иначе, попадают к нам в компьютер и загружают нас потоком соей информации.

Единицы из таких сайтов являются качественными и используют всю технологию современного сайтостроения. Скорость загрузки таких сайтов достаточно велика, чтобы просматривать их даже на DIAL-UP соединении (модемном доступе).

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

Для чего вообще нужна такая быстрота?

Те кто занимается манимейкерством однозначно скажут вам, от того с какой скоростью будет загружаться мини-сайт, зависит, пусть посредственно, количество продаж того или иного товара или услуги. То есть быстрый сайт позволяет пользователю донести информацию быстрее, тем самым экономит его время на ознакомление с ней.

В предыдущей заметки я рассказал вам про один из способов увеличения скорости загрузки вашего сайта. Есть еще один инструмент, который можно совместить с предыдущем.

Это сжатие данных посредством технологии GZip. Что это за технология? Это специальная утилита сжатия и восстановления (декомпрессии) файлов, которая работает в основном в UNIX-системах.

Основная функция данной утилиты – это сжатие и распаковка одного файла.

Недостатком GZip является его неумение упаковывать несколько файлов в один архив. С другой стороны его возможность работать с непрерывным потоком данных, упаковывая, распаковывая их «на лету», дает нам огромное преимущество. Подробнее о технологии вы можете прочитать на страницах Википедии.

Применение GZip сжатия уменьшает объем страниц до 90%, весь процесс занимает всего лишь несколько миллисекунд. GZIP сжатие относится только к текстовой части информации. Графика, видео, архивы и прочие нетекстовые данные не сжимаются.

Я когда узнал о данной технологии попытался применить на своем сайте Библиотека Internet-бизнесмена и всех сайтов расположенные на домене www.infowind.ru. На основном сайте данная технология позволила ускорить его работу в 1.6 раза. На поддоменах вызвала ошибку в коде, что заставило меня задуматься об обновлении и доработке своей CMS.

Вообще если вы являетесь разработчиком или просто у вас есть сайт который вам хотелось бы улучшить подключайте технологию GZip. Разместите в самом начале документа код:


ob_start('ob_gzhandler');

Теперь смотрите, что дало подключение Gzip на данном сайте (включено в CMS AF 1.01)

Для тестирования можно воспользоваться специальным сайтом для проверки: www.port80software.com/support/p80tools.asp. Забьём в окошко "compression check" адрес этой страницы, и рассмотрим результаты теста.


Результат работы технологии Gzip сжатия данных


При отключенном GZip оригинальный размер страницы 11.3 KB.

После включения сжатия я выиграл в скорости загрузки 0.608 секунд на DIAL-UP соединении.

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

PS: Можете делиться своим опытом применения технологии в комментариях.


четверг, 12 августа 2010 г.

FAQ по HTML - Введение

Начиная писать данный пост о часто задаваемых вопросах по языку разметки гипертекста HTML, я задумался над тем, что я могу сообщить нового. Зная, что в сети есть более расширенные сайты на эту тему, я решил дать только необходимую информацию по данному вопросу, а именно то, что чаще всего используется на практике.

Думаю для тех, кто только осваивает HTML, будет очень удобно и полезно, так как они конкретно получат ответ на все свои вопросы.

Начну с главного, что Вы должны знать.

HTML - это простой текст, который с помощью специальных символов (тегов) может форматироваться. То есть при открытии любого браузера вы на экранах своих мониторов увидите текст аккуратно оформленный.

Все теги заключаются символами <> и бывают двух видов одиночные и парные. Парные теги закрываются следующим образом .

Пример отображения парных тегов


Как вы видите при правильном написании тегов каждый из них находиться, и закрывается в нутрии главного.

То ест если представить теги в виде контейнеров содержащую необходимую информацию, то два соседних контейнера не должны пересекаться между собой.


Пример отображения не правельного сочетания тегов


Структура любого html документа должна состоять из следующих элементов:

DOCTYPE – указывает на тип документа;
HEAD – блок (раздел) заголовка документа;
BODY – тело документа;

Как вы видите в предыдущих примерах, сначала мы указываем тип документа (данный тег необходим браузеру), далее идет блок тегов, указывающий, что данный документ html, после идет раздел заголовка документа, и только потом идет тело документа.

Теперь поговорим о метатегах, которые необходимо размещать в разделе заголовка документа.

Title – сообщает пользователю название сайта.


Пример по тегу title


Description – описывает краткое содержание документа.


Пример по тегу description


Keywords – в данном теги указывают ключевые слова, встречающихся на странице.


Пример по тегу keywords


Так же в данном разделе публикуются теги кодировок и скрипты используемые на странице.


Пример по отображению параметра кодировки страницы


В аргументе charset указывается кодировка. При отсутствии кодировки, браузер пытается ее определить сам. Есть вероятность, что она будет определена неправильно, поэтому необходимо ее указывать.



Содержание FAQ по HTML:

Введение.
Форматирование текста.
Учимся делать ссылки.
Работаем со списком.
Изучаем таблицы.
Форма, как средство взаимодействия с пользователем сайта.


вторник, 10 августа 2010 г.

Как увеличить скорость загрузки сайта путем кэширования сайта и буферизации вывода

Я думаю, для вас не будет огромной тайной, если я вам сообщу, что статичные страницы загружаются намного быстрее, чем динамичные. Все достаточно просто. Статические страницы сразу же после запроса к ним обрабатываются браузером.

С динамическими страницами чуть сложнее. Они сначала обрабатываются сервером, делаются запросы к базе данных и только потом отдается браузеру. Как вы понимаете время, затраченное на обработку страниц - увеличивается.

Я предлагаю вам реально работающую систему кэширования страниц с буферизацией вывода. Данный скрипт прекрасно работает в рамках CMS AF. Что делает данная система:

- записывает все, что происходит на сервере в файл;
 - сохраняет данный файл для дальнейшего обращения к нему.

Сразу скажу, что данные сохраняются в статическом виде. Это дает нам огромное преимущество: ускорение загрузки страниц и снижение нагрузки на сервер, и базу данных.

Мало того для того чтобы записать динамическую страницу в статичный файл будем пользоваться простой буферизацией страницы.

Хватит теории - переходим к действию - Увеличиваем скорость загрузки сайта


понедельник, 9 августа 2010 г.

ТИЦ 10 или результат четырехмесячной работы

После очередного апдейта Яндекса, который случился 6.08.10г. ТИЦ Денежного сайта достиг минимального уровня в 10 единиц. С одной стороны можно радоваться тому, что так относительно быстро мой личный сайт вырос.


По последним данным Яша не позволяет многим новым сайтам в течение полгода взлететь высоко. С чего это связано трудно сказать, но статистика SEO оптимизаторов говорит именно об такой проблеме.


Возможно, Яндекс накладывает фильтр на новые сайты и ждет, когда те обрастут немного качественным контентом. Но это только предположение.


Подолжение на Денежном сайте