Учимся делать сайт

Пособие по HTML и CSS для начинающих

Для создания веб страниц необходим любой текстовый редактор, например стандартный «Блокнот». Если Вы хотите работать в визуальном редакторе, таком как «Frontpage» или «Dreamweaver», тогда этот сайт Вам не подойдёт. На этом сайте описываются способы создания WEB-страниц именно в текстовом редакторе. Только при этом способе работы Вы узнаете язык html и сможете разобраться в принципах работы CSS (Cascading Style Sheets).

HTML - это не язык программирования, как многие думают.
HTML - это язык разметки гипертекстовых документов ((H)yper(T)ext(M)arkup(L)anguage).
Его назначение - определять структуру документа.

Язык html составляет набор тэгов. Это директивы браузеру, которые указывают ему структуру Вашего документа. За внешний вид отвечает технология — CSS. Для того, чтобы научиться делать страницы, по сути, нужно выучить набор тэгов и их аттрибутов и все! Какие тэги нужно знать?

Основные: html, head, title, body;
Структурные: div, span;
Текстовые: p, ul, ol, li, h1-h6, br, em, strong, b, i;
Таблицы: table, tr, td, th;
Ссылки: a;
Мультимедиа: img, object;
Фреймы: frameset, frame, iframe;
Формы: form, input, textarea, label, select, option;
Факультативные: hr;
Специальные: script, link, meta;

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

  Начало работы с HTML

Примерный порядок действий
  1. Определить направленность сайта
  2. Придумать оригинальное имя для сайта.
  3. Схематично нарисовать дизайн сайта. (на бумаге или, например, в «Paint»)
  4. Подобрать цвета для фона, таблиц, ячеек и меню.
  5. Заранее подобрать количество ссылок в Меню. (Это же будет кол-ом разделов Вашего сайта)
  6. Когда всё готово, переходим к написанию кода html.
  7. Когда первая страница готова. копируем её столько раз, сколько Вы предполагаете страниц на сайте.
  8. Изменяем содержимое страниц, ссылки, картинки, тексты и сами названия страниц в теге «title»
  9. Пишем новые данные в Meta-теги изменённых страниц.
  10. Публикуем сайт в Интернете.
  11. Регистрируем сайт в каталогах, меняемся ссылками (баннерами), «раскручиваем» его.
  12. Аплодисменты переходящие в бурные овации
Подготовка к работе
  1. Создайте директорию (папку) и назовите ее, например mysite.
  2. В основной директории создайте папки для необходимых файлов (фото, музыка и т.д.).
  3. Все необходимые файлы разместите в соответствующие папки.
  4. Названия папок, файлов пишутся латинскими буквами и цифрами, без пробелов.
  5. Оптимизируйте графику (вес картинок в пределах 1 - 100kb, расширения JPG, GIF, PNG).

Когда закончите работу на компьютере, загрузите все файлы на сервер в том же порядке, какой у Вас в папке mysite, то есть, если картинки расположены в папке (к примеру) images, тогда и на сервере они должны находиться в папке с таким же названием.

Загружать файлы сайта удобнее по FTP

Для загрузки файлов по FTP откройте Internet Explorer и в адресной строке введите

ftp://логин:пароль@ftp.narod.ru

вместо слов "логин" и "пароль" впишите свои логин и пароль на народ.ру

Или из мастерской идите по ссылке "Управление файлами и HTML-редактор" там вверху жмите на ссылку "загрузить файлы"

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


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

 

 

 

 

Поиск по сайту


О сайте

Я, автор этого сайта не являюсь профессиональным верстальщиком и WEB дизайнером. Я только лишь любитель, пытающийся разобраться в тонкостях WEB-дизайна, вёрстки WEB-страниц и прочих аспектах сайтостроительства. Поэтому настоящий сайт прошу рассматривать как помощь по изучению HTML и CSS именно таким же любителям, как и я.

Статистика




Ссылки







Дизайн в ЖЖ


Hosted by uCoz