Как сказано в Писании, «якорь нужен для веса. Если сайт мало весит, он и пролежит не долго: Интернет — изменчивая штука, того и гляди — унесет куданить. А если есть на страничке якорь — можно не волноваться, на какой адрес положили, там и будет лежать».

Запоминаем: якорем называется метка какого-либо места на html-страничке.

Зачем «метить место на странице»? Например, читали ли вы когда-нибудь книги в Интернете? Такие, которые расположены на одной длинной-предлинной странице?

Вверху страницы под заголовком идет Содержание, каждая строчка которого является ссылкой на соответствующую главу книги. Удобно? Несомненно! Т.е. «якорная» ссылка — это обычная ссылка, но ведет она не просто на определенную html-страницу, а на ее конкретную часть/строку.

Не понятно?

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

Год: 2009
Система: Windows®XP|Vista
Язык интерфейса:Английский
Обновлено:8 февраля 2009г.
Установка:Не требуется
Размер: 1.1mb
Откроем папку и запустим файл формата exe.В окне пишем нужную программу версию и ждем...Может ругаться антивирус(кряки все же)

Во-первых, зайдите в фотошоп и создайте новый документ размером 600×200 pixels, с чёрным background-ом.
Создайте прямоугольник, размером 600×40 pixels, используйте Rectangular Marquee Tool (M) . Используя стиль “fixed size” вы можете задать размеры.

• Скачайте выбранный шаблон.
• Извлеките папку с шаблоном из архива.
• Файл index.html будет являться главной страницей сайта (ГЛАВНАЯ).
• Определитесь, какие html-страницы будут на Вашем сайте.
• На основе файла index.html создайте Ваши страницы, копируя файл index.html и переименовывая его согласно создаваемым страницам (например, contact, faq, about и т. д.).

• Разместите созданные файлы страниц в ту же самую папку, в которой находится файл index.html
• С помощью меню: горизонтального, вертикального и если имеется – меню внизу страниц (над футером) соедините гиперссылками страницы сайта и напишите названия кнопок меню (названия страниц сайта).
• При этом обратите внимание на расширение страниц: info.html и info.htm – это страницы с разным расширением, ссылка на страницу, которая будет называться, например, НОВОСТИ (файл может быть назван news) может являться файлом news.htm, но записанный в тэгах как news.html не откроется.

• В графическом редакторе создайте баннер для своего сайта, с такими же размерами, как и баннер шаблона.
• Замените баннер шаблона на свой баннер, дав ему такое же название - banner, при этом расширение файла Вашего баннера, должно быть такое - же, как и баннера шаблона (JPEG или GIF), иначе вам придется производить изменения в файле стилей .css
• Разместите графические файлы, которыми вы хотите оформить и заполнить ваши страницы в папку images.
• Создайте тексты для размещения на страницах сайта в текстовом редакторе, например в Word, Вы потом будете просто копировать фрагменты текста и вставлять его на страницы сайта в соответствующие теги.
• Начинайте заполнять страницы сайта текстовой и графической информацией, вставляя:
  - заголовки между тэгами: <h1-6>Текст заголовка (h1, h2, h3, h4, h5 или h6)</h1-6>
  - тексты абзацев между тегами: <p>Текст абзаца</p>
  - тексты списков между тегами: <ul><li>Текст пункта списка</li></ul>
  - изображения в теги: <img src="Ссылка на изображение">
  - ссылки в теги: <a href="Адрес ссылки">Текст ссылки</a> и т. д.
• Таким образом, заполняйте страницу за страницей.
• После того, как страницы сайта будут заполнены контентом (текстовой и графической информацией) протестируйте меню сайта и все гиперссылки – все должно открываться, исправьте все ошибки.

• Определитесь с хостингом, на котором Вы будите размещать свой сайт в сети Интернет – это может быть как платный, так и бесплатный хостинг.
• Выберите доменное имя для своего сайта, например, www.my_site.ru, если домен занят, подберите свободный домен.

• Пропишите во всех ссылках абсолютный адрес до файлов страниц сайта с учетом доменного имени сайта. Допустим, есть страница КОНТАКТ (файл может быть, например, contact.html), и у Вас, например, домен www.my_site.ru, тогда все ссылки, которые ведут на страницу КОНТАКТ, в данном случае должны выглядеть следующим образом: http://www. my_site.ru/contact.html
• При этом нужно помнить, что файл главной страницы сайта (страница ГЛАВНАЯ) должен всегда называться index
• В зависимости от выбранного Вами расширения он может быть: index.html, index.htm и пр.
• Но абсолютный адрес до файла главной страницы любого сайта будет выглядеть следующим образом: www.имя_домена.ru или http://www.имя_домена.ru, в примере, который рассматривался выше, абсолютный адрес до главной страницы сайта будет: http://www. my_site.ru
• Если планируете разместить сайт на платном хостинге, оплатите выбранное доменное имя и услуги размещения сайта на выбранном хостинге.

• И, наконец, выгрузите файлы сайта по протоколу FTP на выбранный хостинг.
• Если вы ничего не перепутали и все правильно заполнили, если деньги, которые Вы перевели хостингу, наконец, дошли и, в конце, концов, зачислены в бухгалтерию хостинга...
• Наберите в строке вашего браузера Ваше доменное имя (в нашем примере это http://www. my_site.ru), и нажмите клавишу Enter на клавиатуре Вашего компьютера...
• В Вашем браузере, на экране Вашего компьютера откроется Ваш сайт.
• Вы его видите его - он в сети Интернет!

Вся информация о структуре web страницы записана кодами языка html, которые заключают между угловыми скобками <>, эти коды называются тэгами (tags), например, тэг <body>.

• Подавляющее большинство тэгов являются парными, например <body></body>.
• Тэг <body> открывает правило элемента body, а тэг </body> закрывает правило элемента body. Каждый тэг должен быть закрыт, после его открытия, иначе возникнут проблем с отображением Вашей веб страницы.
• В тэгах, которые закрывают правило, добавляется знак слэш (/) в начале тэга.
• Между парными тэгами находиться правило элемента этих тэгов. На примере кода нашего файла basic.htm, который мы создали, видно, что между парой тэгов <head></head> находиться правило элемента head:

<head>
<title>Документ без имени</title>
<meta http-equiv="Тип-содержимое" content="text/html; 
charset=windows-1251">
</head>

• Обратите внимание, что между тэгами <head></head> находится пара тэгов <title></title>, между которыми находится имя документа.
• Кроме того, между тэгами <head></head> находиться еще один непарный тэг:

<meta http-equiv="Тип-содержимое" content="text/html; 
charset=windows-1251">

• В этом непарном тэге находятся правила, определяющие тип и кодировку web страницы (в нашем случае это html и windows-1251 соответственно).
• Раз уж мы упомянули тэги <title></title> давайте сразу впишем между ними имя нашего сайта.
• После создания веб страницы между парой тэгов <title></title> по умолчанию находиться текст: Документ без имени. Выглядит это следующим образом:

<title>Документ без имени</title>

• Действуем также как и в Worde, в кодовом режиме убираем текст Документ без имени между тэгами <title></title> используя клавишу Backspace клавиатуры Вашего компьютера, она обозначается как стрелка налево.
• Ставим курсор между тэгами <title></title> и набираем на клавиатуре компьютера имя сайта, например:

<title>Мой первый сайт</title>

• Сайт может называться как угодно, например: «Я и моя коллекция тропических бабочек».

• Что видит человек, который заходит на сайт? Он видит на своем экране красивую страницу, заполненную текстом и картинками. Давайте заглянем за кулисы и посмотрим, как выглядит обратная сторона web страницы.
• Итак, рассмотрим от начала, с самой первой буквы, самой первой строки и до конца кодовой (гипертекстовой) разметки внутреннее строение сайта.

• DOCTYPE «Тип документа», влияет на совместимость сайта с компьютерами посетителей сайта. На сегодняшний день использование для создания структуры сайта тип документа HTML 4.01 Transitional является самым оптимальным вариантом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

• <html> Тэг, открывающий «HTML-документ». Закрывающий тэг из этой пары будет самым последним на нашей веб странице.
• <head> Тэг, открывающий все оглавление документа.
• <title></title> Тэги, между которыми нужно написать название документа:

<title>Мой первый сайт</title>

• <meta http-equiv> Непарный тэг, содержит код, определяющий тип и кодировку документа:

<meta http-equiv="Тип-содержимое" content="text/html; 
charset=windows-1251">

• <style type="text/css"> Тэг, открывает «отделение стиля», определяющего внешний вид web страницы, в этом отделении кодовая запись осуществляется в терминах языка css:

body {
Здесь пишем правило селектора body – «тела» документа.
}
#nav {
Здесь пишем правило селектора навигации, создающего и 
определяющего вид кнопок навигации по страницам сайта. 
}       
#content {
Здесь пишем правило селектора контента. 
В этом селекторе будет заключена практически вся основная 
текстовая и визуальная информация доступная для 
посетителей сайта.
}
p {
Здесь пишем правило для абзацев. Текстовая информация 
выводится на экран компьютеров посетителей сайтов в виде 
текстовых блоков – абзацев.
}

• </style> Тэг, закрывающий «отделение стиля»;.
• </head> Тэг, закрывающий «оглавление документа».

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

• <body> Тэг, открывает отделение «тела» документа, определяющего структуру web страницы. Кодовая запись осуществляется в терминах языка html. (Закрывающий тэг из этой пары </body> будет предпоследним на нашей веб странице).
• <div id="content"> Тэг, открывающий «селектор контента». В этом селекторе будет заключен практически весь объем текстовой и визуальной информации, отображение которой увидят посетители сайта.
• <div id="nav"></div> Тэги, между которыми находиться «селектор навигации». Этот селектор создает кнопки, с помощью которых вы можете путешествовать по сайту, например, с «Главной» страницы на страницу «Новости» и т.д.
• <h1></h1> Тэги, между которыми пишем текст «главного заголовка» сайта. Всего можно задать и использовать только шесть стилей оформления заголовков:h1, h2, h3, h4, h5 и h6. На сайте может быть сколько угодно заголовков, просто к каждому заголовку нужно будет выбрать один из шести видов оформления. Стиль оформления любого текстового элемента - это: тип, размер, цвет и прочие параметры шрифта.
• <p></p> Тэги «абзацев», между которыми пишем текстовую информацию сайта. На сайте может быть столько абзацев, сколько Вам необходимо. Остается только придумать заголовки для каждого абзаца, чтобы донести до посетителей главную мысль сайта.
• </div> Тэг, закрывающий «селектор контента».
• </body> Тэг, закрывающий отделение «тела» документа.
• </html> Тэг, закрывающий «HTML-документ».

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

До сих пор только вы имели возможность наслаждаться просмотром ваших страниц. Теперь пришло время и всем остальным оценить ваши произведения.

Готов ли мир к этому?

Мир готов - скоро и вы тоже будете готовы. Для показа вашего web-сайта в Internet вы должны иметь пространство на сервере и бесплатную FTP-программу.

Если у вас есть доступ в Internet, у вас, возможно, уже есть немного места для вашего web-сайта. Ваше пространство на сервере может называться примерно так - http://home.provider.com/~usernumber. Но сначала вы должны активировать его. Прочтите об этом в документации вашего Internet-провайдера или на его справочных страницах.

Другая возможность получить некоторое пространство в Internet - настроить учётную запись e-mail (на, например, Hotmail), тогда вы сможете зарегистрировать свободное пространство в Internet. Такой сервис имеют несколько компаний, среди них - Angelfire (щёлкните "Sign Up" и выберите free membership) - регистрация займёт всего несколько минут.

Для доступа на сервер вам необходимо знать "Host Name" (Например, ftp.angelfire.com) и иметь своё username и password.

Это всё, что мне нужно?

Для доступа на сервер и выгрузки на него ваших страниц вам понадобится также программа, работающая по протоколу FTP. Возможно, у вас её ещё нет, но можно загрузить её бесплатно.

Имеется множество FTP-программ. Одна из лучших - FileZilla, абсолютно бесплатная. Можно скачать FileZilla с filezilla.sourceforge.net.

А как выгружать страницы?

Ниже мы даём описание того, как выгружать страницы на бесплатную учётную запись/account на Angelfire с помощью FileZilla. Но эта процедура применима, в большей или меньшей степени, для всех провайдеров и FTP-программ.

Откройте FTP-программу после того, как подключитесь к Internet. Вставьте "Host Name" ("ftp.angelfire.com" ниже "Address"), имя пользователя (ниже "User") и пароль (ниже "Password") и щёлкните "Connect". У вас теперь имеется доступ к этому серверу. В одной части программы вы видите содержимое вашего компьютера ("Local Site"), а в другой - содержимое сервера ("Remote Site"):

Найдите ваши HTML-документы и изображения на вашем компьютере (в "Local site") и перешлите их на сервер ("Remote site") дважды щёлкнув на них. Теперь их видит весь мир! (Например, по адресу http://www.angelfire.com/folk/htmlnet/page1.htm).

Назовите одну из страниц "index.htm" (или "index.html"), и она автоматически станет стартовой страницей. т. е., если вы введёте http://www.angelfire.com/folk/htmlnet (без указания имени файла), откроется http://www.angelfire.com/folk/htmlnet/index.htm.

Для длительной работы неплохо приобрести собственный домен (www.ваше-имя.com) и избавиться от длинного адреса, предоставляемого Internet-провайдером бесплатного сервиса.

Хорошо было бы придать страницам достойный их содержания вид?

Разумеется, но как?

Для этого используйте Cascading Style Sheets (CSS)/каскадные таблицы стилей. В этом уроке мы дадим краткое описание CSS. Позднее вы можете прочитать наш учебник CSS. Так что примите этот урок, так сказать, для растравки.

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

Как показано в Уроке 7, CSS может добавляться атрибутом style. Например, вы можете установить тип и размер шрифта параграфа:

Пример 1:

           <p style="font-size:20px;">Это напечатано размером 20</p>
           <p style="font-family:courier;">Это напечатано шрифтом Courier</p>
           <p style="font-size:20px; font-family:courier">Это напечатано шрифтом Courier размером 20</p>

будет выглядеть в браузере:

В этом примере мы использовали атрибут style для специфицирования типа шрифта (командой font-family) и размер шрифта (командой font-size). Обратите внимание, как в последнем параграфе мы одновременно установили тип и размер, разделяя параметры точкой с запятой.

Объём работы значительно возрастёт?

Одной из привлекательных особенностей CSS является возможность управлять внешним видом страниц централизованно. Вместо использования style в каждом тэге вы можете указать браузеру только один раз, как должен выглядеть текст на странице:

Пример 2:

           <html>

             <head>
             <title>My first CSS page</title>

             <style type="text/css">
             h1 {font-size: 30px; font-family: arial}
             h2 {font-size: 15px; font-family: courier}
             p {font-size: 8px; font-family: times new roman}
             </style>

             </head>

             <body>
             <h1>My first CSS page</h1>
             <h2>Welcome to my first CSS page</h2>
             <p>Here you can see how CSS works </p>
             </body>

           </html>

В этом примере правила CSS вставлены в раздел head и применяются ко всей странице. Для этого используется тэг <style type="text/css">, который даёт соответствующее указание браузеру.

В этом примере заголовки на странице будут выведены шрифтом Arial размера 30px. Все подзаголовки - Courier размера 15. А весь текст в обычных параграфах будет шрифтом Times New Roman размера 8.

Можно также указывать правила CSS в отдельном документе. Тогда можно применять CSS уже ко всем страницам. Это очень важное качество, если вам понадобится изменить тип или размер шрифта для большого web-сайта с тысячами страниц. Сейчас мы не будем в это углубляться, но вы можете изучить всё подробнее в нашем учебнике CSS.

Что ещё можно сделать с помощью CSS?

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

           <p style="color:green;">Зелёный текст</p>

           <h1 style="background-color: blue;">Заголовок на синем фоне<h1>

           <body style="background-image: XXX;">

Попробуйте вставить эти примеры на ваши страницы - как показано выше, а также как CSS в разделе head.

CSS это ничего, кроме цветов и типа шрифта?

Помимо изменения вида: цвета, типа шрифта и т. п., CSS можно использовать также для управления настройками страницы и представлением (поля, всплывание, выравнивание, ширина, высота и т. д.). Регулируя различные элементы с помощью CSS, вы можете отображать ваши страницы элегантно и точно.

Пример 3:

           <p style="padding:25px;border:1px solid red;">Мне нравится CSS</p>

будет выглядеть в браузере:

С помощью свойства float элемент может "всплывать" вправо или влево. Это иллюстрирует следующий пример:

Пример 4:

           <img src="bill.jpg" alt="Bill Gates" style= "float:left;" />

           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
           sed diam nonummy nibh euismod tincidunt ut laoreet dolore
           magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
           quis nostrud exerci tation ullamcorper suscipit 
           lobortis nisl ut aliquip ex ea commodo consequat...</p>

будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...

В этом примере один элемент (изображение) всплывает слева, а другой элемент (текст) заполняет остальное.

С помощью свойства position вы можете поместить элемент точно в нужном месте на странице:

Пример 5:

           <img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />

В этом примере изображение помещается на 50 пикселов снизу и на 10 пикселов справа в окне браузера. Но вы можете поместить его так же точно в любом другом месте. Попробуйте. Очень легко и очень круто, а?

Название "Ещё о таблицах" может звучать немного вызывающе. Если вы уже можете создавать таблицы, то уже абсолютно ничто в HTML не может смутить вас.

Что же ещё?

При создании таблиц используются два атрибута: colspan и rowspan.

Colspan - сокращение от "column span/охват столбцов". Colspan используется в тэге <td> для специфицирования того, сколько столбцов охватывает данная ячейка:

Пример 1:

           <table border="1">
             <tr>
               <td colspan="3">Cell 1</td>
             </tr>
             <tr>
               <td>Cell 2</td>
               <td>Cell 3</td>
               <td>Cell 4</td>
             </tr>
           </table>

будет выглядеть в браузере:

Установка colspan "3", заставляет ячейку в первом ряду охватывать три столбца. Если установим colspan "2", ячейка охватит только два столбца, и понадобится вставить дополнительные ячейки в первый ряд, чтобы ячейки ровно распределились на два ряда.

Пример 2:

           <table border="1">
             <tr>
               <td colspan="2">Cell 1</td>
               <td>Cell 2</td>
             </tr>
             <tr>
               <td>Cell 3</td>
               <td>Cell 4</td>
               <td>Cell 5</td>
             </tr>
           </table>

будет выглядеть в браузере:

А как насчёт rowspan?

Как вы уже могли догадаться, rowspan специфицирует, сколько рядов охватывает данная ячейка:

Пример 3:

           <table border="1">
             <tr>
               <td rowspan="3">Cell 1</td>
               <td>Cell 2</td>
             </tr>
             <tr>
               <td>Cell 3</td>
             </tr>
             <tr>
               <td>Cell 4</td>
             </tr>
           </table>

будет выглядеть в браузере:

В этом примере rowspan имеет значение "3" в ячейке Cell 1. Это указывает, что ячейка должна охватывать три ряда (свой собственный ряд плюс ещё два). Cell 1 и Cell 2 при этом остаются в одном ряду, а Cell 3 и Cell 4 образуют отдельные ряды.

Удивлены? Ладно, это не так сложно. Неплохо будет нарисовать таблицу на бумаге до начала работы в HTML.

Неудивительно? Тогда вернитесь к началу и создайте пару таблиц с использованием colspan и rowspan.