Основные html теги

6.02.2010. HTML, Дизайн

Представляю вам список самых используемых html-тегов, которые, по хорошему, надо знать наизусть. Для пользования списком желательно хотя бы небольшое знание HTML, т.к. большинство атрибутов и свойств тегов здесь не рассмотрено

Почти все теги состоят из двух частей:

<тег> - открывающий тег
</тег> - закрывающий тег

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

Главные теги

Большинство из этих тегов должны быть в любом документе.

<html> </html> - самый главные тег любой html странице. Обозначает начало и конец html-документа
<head> </head> В нем прописывается служебная информация
<body> </body> - в этом теге находится основное содержимое страницы

Информация о странице

Теги, сообщающие название страницы и ее описание:

<title> Название страницы </title>
<meta name="description" content="text" /> - описание страницы

Работа с текстом

Заголовки

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

Заголовков в HTML всего 6 штук: от 1 уровня до 6. Чем меньше уровень заголовка, тем больше шрифт и тем он важнее.

<h1> - Заголовок первого уровня
<h2> - Заголовок второго уровня
<h3> - Заголовок 3 уровня
<h4> - Заголовок 4 уровня
<h5> - Заголовок 5 уровня
<h6> - Заголовок 6 уровня

Заголовки 1-3 уровня используются поисковиками (google, yandex,bing) для определения, о чем текст, поэтому рекомендую использовать эти теги во всех создаваемых вами текстах

Внешний вид текста (курсив, жирные, подчеркнутый)

<b> жирные текст, где-то прочитал, что его не рекомендуют использовать </b>
<strong> тоже жирный текст</strong>
<i>наклонный текст, также не рекомендован к использованию</i>
<em> наклонный текст</em>
<u> подчеркнутый текст </u>
<strike> перечеркнутый текст<u>
^{<sup> верхний индекс</sup>}
_{<sub> нижний индекс </sub>}
<big> Текст чуть больше обычного (чаще всего на 1 пункт)</big>
<small>Аналогично, только меньше</small>

Форматирование текста

В html для форматирование текста используется несколько тегов:

<p> </p> - абзац
<div> <div> - "элемент-бокс". Обычно в нем хранится текст, к которому применяются различные css-стили (установка ширины, отступов, шрифта, фона, выравнивания и т.д.)
<blockquote></blockquote> -создает отступ
<br/> - перенос строки
<hr/> - горизонтальная линия
<pre> </pre> - сохраняет форматирование текста (количество пробелов, переносы строк и т.д)
<ul> </ul> - создает маркированный список
<ol> </ol> - нумерованный список
<li> </li> - создает элемент списка (как маркированного, так и нумерованного)
<span></span> - насколько я знаю, нифига не делающий тег, служит для прикручивания к тексту стиля (опять таки css)

Ссылки и изображения

Создание ссылки:

<a href="http://adorning.ru"> adorning.ru</a> - href="адрес ссылки, а между <a ... > и </a> - текст ссылки

Вставка изображения:

<img src="adress" alt="text" align="center"/> - вставка изображения, находящегося по адресу adress, с выравниванием по центру. При наведение мышкой на изображение будет отображен текст text

Создание таблицы:

<table> </table> - создание таблицы
<tr> </tr> - новая строка таблицы
<td> </td> - новая ячейка таблицы
<th> </th> - новая ячейка таблицы с жирным текстом, выравнивание текста по центру

Некоторые специальные символы:

  - неразрывный пробел
© - ©
&#177 - ±

Кроме того, многие теги для форматирования текста поддерживают выравнивание текста/тега. За это отвечает атрибут align:

align="center" - выравнивание по центру
align="right" - выравнивание по правому краю
align="left" - выравнивание по левому краю
align="justify" - выравнивание по ширине

Для использования пишем тег и до закрытия открывающего тега куда надо выравнивать:

<p align="center"> текст выравнен по центру </p>

Еще пара полезных атрибутов:

style="css" - позволяет вам прописать css для этого экземпляра тега

id="id" - ид стиля в css таблице (уникальный для страницы)

class="class" - класс css для использования с этим тегом

Про сам СSS я, возможно, как-нибудь расскажу. CSS необходим для управления отображением текста: цветом фона, шрифта, типом шрифта, его размерами, выравниваем, границами, шириной элементов, отступами и многим другим.

Вот и все на сегодня!

P.S. Если вам, вдруг, понадобится сервер, то вот хороший сервер за paypal.

"description" content="?">

Уроки GIMP. Рисуем молнию. Вариант 1.

3.02.2010. GIMP, Дизайн

Сегодня я расскажу, как можно в gimp нарисовать молнию (по крайне мере, что-то похожее на молнию).

Первым делом нам необходимо создать новое изображение размером 400х400. Затем залить его черно-белым градиентом. Для этого выбираем инструмент "Градиентная заливка". В параметрах выставляем градиент и проводим из верхнего левого угла к центру правой стороны. В результате должно получится что-то такое:

Теперь идем в Фильтры->визуализация->облака->разностные облака и устанавливаем детализацию на максимум (15). С размером по X и Y можно поэкспериментировать, я поставил на 3.1 и 3.4.

Нажимаем ОК и инвертируем (цвет->инвертировать) полученное изображение:

Возможно вы уже видите очертания нашей молнии, а чтобы они стали видны любому нам пора в цвет->кривые и приводим ее примерно к такому виду (следите за вашим изображение, параметры будут немного отличаться). Главное, чтобы вы увидели на черном фоне тонкую молнию. Весь оставшийся мусор (если он есть) без сомнений удаляйти

Мои параметры:

И результат:

Вот это уже очень даже похоже на молнию, только цвет какой-то неправильный. Поэтому лезем в цвет->цветовой баланс и перекрашиваем нашу молнию:

И, как всегда, результат:

Осталось немного косметических эффектов. Выделяем нашу молнию (выделение->выделение по цвету. Затем инвертировать). Применяем фильтр сгладить и гауссово размывание (3px). После этого увеличиваем контрастность, чтоб молния снова стала похожей на молнию.

Вот и все. Самая примитивная молния нарисована.

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

Уроки C++. Структуры.

1.02.2010. c++, Программирование

Очень часто бывает необходимо объединить в одной переменной хранить несколько значений. Например, 2 координаты: х и у. Вот тогда можно использовать структуры данных, или просто структуры.
Создавать и работать с структурами очень просто. Для объявления структуры надо написать struct name
{ type varname;
type2 var2name}
Например,
struct point
{
float x;
float y;
int color;
string name;
};

Теперь, после того, как мы объявили структуру, пора создать ее экземпляр:
point points[1000]; // мы создали массив из 1000 элементов

Обращение к элементу структуры осуществляется через точку:

points[10].x=0,5;

points[10].y=1;

cout<<points[1].name;

И так далее.

Если вы создаете структуры динамически, то обращение к элементу осуществляется через ->:

point *p;

p=new point;

p->x=1;

p->y=2;

P.S.
Скачать программы и обои для стен, игры для nokia 5800 и бесплатные игры на телефон.

Уроки GIMP. Рисуем огонь.

29.01.2010. GIMP, Дизайн

Сегодня я расскажу как можно нарисовать огонь с помощью GIMP

Первым делом, создайте новое изображение с разрешением 600х600 точек. Затем идем в Фильтры->визуализация->облака->сплошной шум и настраиваем фильтр приблизительно как на этом рисунке:

Теперь берем кисть, устанавливаем ей черный цвет и закрашиваем верхнюю часть примерно так:

А сейчас надо воспользоваться таким полезным инструментом, как палец. Он позволяет нам размазывать изображения как мы хотим. С помощью этого инструмента добейтесь того, чтоб на вашем изображении появились черно-белые огненные языки. Находим черный кусок и размазываем его вверх так, чтоб образовывалось что-либо наподобие языка пламени. Для большой реалистичности делаем в несколько этапов, постепенно уменьшая размер пальца. Если не хватает черного цвета, то добавляем его кистью. Затем применяем фильтр общие->эрозия. Результат должен быть примерно таким:

Затем идем в Цвет->Цветовой Баланс и придаем черно-белому огню цвет:

В результате у нас появилось что-то очень похожее на огонь. Осталось его сделать немного более реалистичным.

Первым делом идем в фильтры->искажения->рябь

Настраиваем:

Далее фильтры->размывание->Гауссово размывание. И фильтры->имитация->масляная краска с размером маски 3. Также используем фильтры сгладить и увеличение резкости.

Еще можно применить фильтры->искажения->исправить искажения оптики:

Вот и все. После небольшого количества простых действий мы смогли нарисовать достаточно реалистичный огонь. А вот и сам результат:

Кстати, если вы фанат photoshop`а, то вот здесь есть уроки фотошоп на русском. Надеюсь, вы найдете там то, что вам нужно.

C++. Урок 12. Работа с указателями. Динамическое выделение памяти

28.01.2010. c++, Программирование

Кроме переменных в с++ существуют указатели, которые вместо того, чтобы "хранить" их, содержат адрес этих данных в памяти. То есть, например, у нас есть куча шариков. Где-то есть шарик с номером 5. Ну так вот, указатель - это такая переменная, которая указывает на "позицию" этого шарика, на его местоположения.

Создание указателя:

тип *имя;

Пример:

int *p; // указатель на переменную типа int или первый элемент массива типа int

char *pc; // указатель на переменную или массив типа char

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

int *p;

int a=10;

p=&a;

//теперь p указывает на переменную a.

Для записи чего-либо в память, на которую указывает указатель надо использовать оператор *, который обозначает, что мы работаем с данными, находящимися по такому-то адресу

*p=20; //теперь a==20

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

Для выделения памяти служит функция new:

char *c=new char(количество символов);

Вот мы создали массив типа char.Работа с ним ничем не отличается от работы с обычным массивом.

Внимание, после того, как вы поработали с массивом и вам он больше не нужно, необходимо отчистить память:

delete [] имя указателя на память, которую нужно отчистить.

Может будет интересно:

Если вам нужен выделенный сервер, то рекомендую вот этот сервер в Германии

Переадресация на вашу страницу Вконтакте (vkontakte.ru), любой другой профиль или другой сайт

23.01.2010. Разное

Вполне возможно, что вы оставляете где-то ссылку на ваш адрес Вконтакте, но выглядит он как-то не очень красиво: www.vkontakte.ru/idxxxxxx. Сегодня я расскажу, как сделать для любого вашего профиля свой нормальный красивый адрес.

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

Если у вас нету своего сайта, то можно его создать на бесплатном хостинге. Например, http://0fees.net/.

После этого, на сайте, с которого вы хотите установить переадресацию на ваш профиль, вам необходимо в корневом каталоге вашего сайта отредактировать файл .htaccess. Удалите из него весь текст и вставьте туда это:

RedirectPermanent / http://vkontakte.ru/ваш ид
Можно вместо сайта вконтакте указать там адрес вашего twitter, ЖЖ и т.д.

P.S. Это был пример простейшей переадресации с одного сайта на другой

P.P.S. Инструкция подходит только для web-сервера Apache

Урок 11. C++. STL Стеки и очереди (stack and queue)

21.01.2010. c++, Программирование

Собственно сегодня небольшой урок про стеки и очереди.

Стеки (stack)

Стеки - это множество элементов, сложенных в стопку. Например, у нас есть коробка 3х5. Мы кладем в нее доски такого же размера с различными узорами. У нас получается стек. Достать из него мы можем только начинаяя с последнего элемента, поэтому первый положенные элемент вынут будет последним. В стеках реализуется принцип first in last out (FILO).

Для создания стека нужно подключить <stack> и в коде программы его объявить:

stack <type> name, где type - тип стека, а name - имя стека.

У стека есть немного функций:

push() - добавить элемент
pop() - удалить верхний элемент
top() - получить верхний элемент
size() - размер стека
empty() - true, если стек пуст

Пример:

string s;

stack <string> st;

while (cin>>s);

st.push(s);

while (!(st.empty()))

{cout<<st.top();st.pop()}

В этом примере мы считываем слова с клавиатури и выводим их в обратном порядке

Очереди (Queue)

Очереди, как следует из название, используют принцип first in first out (FIFO). То есть, тот, кого мы первым запихнули в очередь, первым из нее и выйдет (хотя в реальной жизни не всегда так....)

Реализуются очереди также просто.

Подключаем <queue>

И создаем очередь

queue <type> name;

Перечень функций почти тот-же:

push() - добавить элемент
pop() - удалить первый элемент
size() - размер очереди
empty() - true, если очередь пуста
front() - получить первый элемент
back() - получить последний элемент

Пример:

queue <int>  events;

int n;

while (cin>>n)

events.push(n);

while (!events.empty)

{make(events.front());events.pop()}

В данном примере make - какая-то функция, обрабатывающая события

Вот и все об очередях со стеками. Просто и немного;)

С++. Урок 10. Изучаем map (ассоциативный массив).

18.01.2010. c++, Программирование

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

C++. Урок 9. Стандартные алгоритмы для работы с STL (algorithm)

17.01.2010. c++, Программирование

В C++ существует множество спецальных алгоритмов для работы с массивами. Они позволяют сортировать данные в массиве, искать в нем какое-либо значение, менять элементы местами и т.д. Для их работы вам необходимо подкючить <algorithm> в начале программы.

C++. Урок 8. STL. Контейнеры. Vector (вектор) – динамический массив

14.01.2010. c++, Программирование

Кроме массивов в c++ существуют еще контейнеры, которые позволяют вам немного по другому хранить данные и, вдобавок, применять к ним различные функции (поиск, сортировка и т.д.) . Сегодня вы узнаете об одном из контейнеров - векторе (vector) Читать дальше

C++. Урок 7. Чтение и запись в файл

13.01.2010. c++

Пора наконец-то научится работать с файлами в с++: читать в них, писать в них и изменятять их.

Небольшая заметка, если пропало место на жестком диске в Linux (KDE,Kubuntu)

11.01.2010. Linux

Вот столкнулся с проблемой, у меня раздел /home вынесен на отдельный раздел объемом 30 гигов. Недавно обнаружил, что торренту некуда скачивать файлы, нету места на диске, при этом размер всех папок не превышал 5 гигов. Корзина, если верить KDE, была очищена. Самое интересное, что все программы показывали, что заняты как раз эти 5 гигов.

Спустя 5 минут было найдено решение. Оказывается папка .trash не удаляла удаленные из нее файлы;), пришлось сделать это ручками из под рута. Если у кого-то возникнет похожая проблема (не хватает места на диске, исчезло место на диске, диск переполнен и т.д.), то возможно вам просто необходимо стереть корзину вручную (не бойтесь, после трения папке она автоматически востановится)

C++. Урок 6. Строки

10.01.2010. c++

Сегодня вы познакомитесь со строками в с++ и научитесь немного их обрабатывать.

C++. Урок 5. Циклы

10.01.2010. c++

Сегодня мы познакомимся с такой вещью, как циклы

Интернет (gprs/edge/3G/DialUp) через мобильный телефон в Linux

9.01.2010. Linux

Иногда бывает необходимо выйти в интернет в отсутствии адекватного интернета и единственным источником выхода в сеть является мобильный интернет. Под Windows производители обычно предоставляют свои программы, а вот про Unix-системы забывают. Вдобавок, на данный момент, выйти в интернет с полпинка не получается. В kubuntu (KDE4), например, подключение создается, но не работает. Под Gnome, говорят, те же траблы. Поэтому приходится ставить дополнительный софт и настраивать его. Я для выхода в интернет стал использовать программу wvdial. Читать дальше