четверг, 21 мая 2009 г.

Простое форматирование текста в html

Рассмотрим самые простые теги для форматирования текстов на веб-страницах.

Абзац:
<p>текст по умолчанию выравнивается по левому краю</p>
<p align="left">Абзац с выравниванием влево</p>
<p align="right">Абзац с выравниванием вправо</p>
<p align="justify">Абзац с выравниванием "по ширине" (как в книгах)</p>
<p align="center">Абзац с выравниванием по центру</p>


Перевод строки:
<br>

или
<br />


<b>жирный текст</b>
<strong>жирный текст</strong>
<i>наклонный</i>
<em>наклонный</em>
<u>подчеркнутый</u>
<s>зачеркнуто</s>


Теги рекомендуется закрывать, кроме <br>.
Хороший тон - закрывать теги правильно, то есть

Правильно:
<p>Текст <i><b>жирным курсивом</b></i>.</p>


Неправильно:
<p>Текст <b><i>жирным курсивом</b></i>.</p>


Чем отличается <b> от <strong>, <i> от <em> ?

Визуально - ничем. Однако для поисковых машин есть разница. Они считают, что STRONG и EM - это ударение в смысле выделения важности текстового фрагмента, a B и I - просто жирный и курсив. Таким образом, для поисковиков важнее STRONG и EM.

Заголовки
<h1>Заголовок 1 уровня (самый большой)</h1>
<h2>Заголовок 2 уровня</h2>
<h3>Заголовок 3 уровня</h3>
<h4>Заголовок 4 уровня</h4>
<h5>Заголовок 5 уровня</h5>
<h6>Заголовок 6 уровня</h6>


Заголовки служат для того же, для чего и в газетах: выделять заголовки и подзаголовки перед следующим текстом. H1 самый большой визуально, H6 - самый маленький. Для поисковых машин заголовки очень важны. Они помогают поисковикам понять, о чем же действительно текст, а людям - быстрее определиться, читать ли дальше.
Автор: на

вторник, 19 мая 2009 г.

Кодировки. Самый простой HTML документ.

Документы HTML составляются в текстовых редакторах и могут иметь разную кодировку.
Наиболее распространенная кодировка для русскоязычных html-файлов - это windows-1251 (она же ANSI, она же "Кириллица Windows").
Для многоязычных документов используют utf-8, для английских и европейских - iso-8859-1.
Также иногда можно встретить морально устаревшие русские кодировки KOI8-R и CP-866 (DOS).

Мы будем пользоваться кодировкой windows-1251, как наиболее удобной для разработки русскоязычных сайтов.

Браузеры понимают почти все известные кодировки, однако кодировку документа HTML принято указывать и в самом документе, с помощью тега <meta>, см. ниже. Это нужно, чтобы точно указать браузеру кодировку, иначе он может ее неправильно определить.

Создаем первый HTML-файл.

Необходимо создать в редакторе новый файл, и не забудьте, чтобы редактор был переключен в кодировку windows-1251

Самый простой документ HTML выглядит примерно так.

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=windows-1251">
<title>Заголовок документа</title>
</head>
<body>
<p>Привет!</p>
</body>
</html>


Минимальный документ HTML состоит из тегов <head> и <body>, которые вложены в тег <html>
Содержимое тега <head> отвечает за свойства документа (кодировку, заголовок, некоторые другие).
Содержимое тега <body> - это собственно то, что будет отображено в окне браузера ("тело документа")

Тег <meta> указывает браузеру, в какой кодировке у нас этот документ:

<meta http-equiv="Content-type" content="text/html; charset=windows-1251">

Такую форму записи следует просто "зазубрить" и использовать в своих html-файлах.

Теги <meta> могут содержаться только внутри <head>.

В теле документа содержится один абзац с текстом "Привет!". Абзацы маркируются в html тегами <p>

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

Что еще можно сказать о нашем документе ? В HTML принято закрывать большинство тегов. То есть для открывающего тега <p> должен быть закрывающий тер </p> и т.д. Есть некоторые теги, которые не нужно закрывать, я отдельно опишу их позже.

Тег <title> содержит в себе заголовок нашего документа. Это тот самый текст, который отображается в заголовке окна браузера. Это самый важный текст, для людей: чтобы знать, что открыто в этом окне, и для поисковых машин - этот текст должен отражать суть вашего документа.

Тег <title> должен обязательно содержаться внутри <head>, и больше нигде. Встречается один раз.

Плохой пример заголовка документа:
<title>Документ 1</title>

<title>Сказка о царе Салтане</title>
(если в теле документа действительно эта сказка)
Автор: на

понедельник, 18 мая 2009 г.

Инструментарий для создания сайтов

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

Удобный текстовый редактор с подсветкой HTML-кода, и с поддержкой кодировок windows-1251 (ANSI) и utf-8.

Редактор попроще:
Notepad2 | Страница программы | Скачать

или
редактор посложнее:
Notepad++ | Страница программы | Скачать
(для Windows выбирайте *.exe, например npp.5.3.1.Installer.exe (на момент написания этого поста)

Первый редактор не требует инсталляции, его достаточно распаковать в любую папку. Например в C:\Program Files\notepad2\
Затем notepad2 можно использовать в качестве замены Блокнота Windows.

Можно также пользоваться Блокнотом Windows, но Notepad2 удобнее как минимум за счет подсветки кода.

Notepad++ обладает огромным списком возможностей.На начальной стадии изучения создания сайтов все они не понадобятся.

FTP-клиент

Для того, чтобы выкладывать готовые файлы на ваш сайт, необходима программа-клиент FTP.
Рекомендую воспользоваться клиентом FileZilla
Сайт программы | Скачать

На момент написания последняя версия FileZilla_3.2.4.1_win32-setup.exe
Автор: на

О блоге и об авторе

Добро пожаловать!
Этот блог для новичков, тех, кто хотел бы научиться создавать сайты.
Автор блога имеет более чем 5-летний стаж создания сайтов, и в этом блоге попробует максимально доступно изложить процесс создания сайтов для начинающих.
Автор: на
Подписаться на: Сообщения (Atom)