Mini web-design HOWTO. Part 1
Всем привет!
С этого момента начну свой цикл статей о том как делать веб-странички. Материала в сети просто нескончаемое количество, но велосипед должен быть изобретен, это закон любого творчества! В том числе творчества в сфере информационного строительства.
Веб страницы это текстовый документ состоящий из специфической разметки на языке HTML, текстовой и графической информации, часть программного кода на других языках и стилей.
Теперь по порядку.
язык HTML - это язык разметки веб-страницы который описывает структуру и типы элементов на странице. Самый простой вариант веб страницы такой.
Создаем файл index.html в текстовом редакторе (не текстовом процессоре!)
и пишем:
<html>
<head>
</head>
<body>
</body>
</html>
И сохраняем
Элементы изображено выше это теги языка разметки. Получив их Ваш браузер знает что ему делать и как отобразить :)
Между тегами <html> </html> размещено сам код страницы, это начало и конец. Все что вне их отображаться не будет.
Между тегами <head> </head> находиться голова, то есть заголовок страницы вся необходимая техническая информация для существования станицы: типа, указания кодировки, заголовок, ссылки на стили, ява-скрипт и другое. Это очень ценный элемент и является обязательным.
Между тегами <body> </body> находиться тело :) собственно само содержимое страницы.
Для придания хоть каково вида нашей первой странице внесем некие изменения, добавим заголовок - немного “головы” и немного “тела”
<html>
<head>
<title>My first web-page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>1, 2, 3 - check microphone<br />
hello, hello</p>
</body>
</html>
сохраняемся и смотрим эту страницу в браузере.
, где <title>My first web-page</title> это заголовок страницы который отображается в вершней строке браузера в самой верхней шапке, рядом с названием браузера
<h1>Hello World!</h1> - это заголовок в самом теле страницы говорящий о том что это заголовок первого уровня (есть еще h2, h3, h4, h5) и текст помещенным между тегами заголовка будет большими буквами и иметь свойство ЗАГОЛОВКА.
<p>1, 2, 3 - check microphone - это “простой текст” мы просто указываем браузеру что между тегами <p> </p> идет простой текст и все, а <br /> в нем делает перевод строки
Дабы не загружать кучей инфо по тегам, всем! обязательно прочитать Спецификацию по HTML 4.01 на сайте русского переводчика данного документа
http://www2.stack.ru/~julia/HTML401/cover.phtml
Обязательно использовать как справочник!
Официальная же документация на английском
Что дальше?
Дальше план такой (анонс):
- Разобраться со стилями (в самом первом приближении) так как это следующий шаг в создании вебстраниц для “дизайнеров”.
- научимся верстать страницу 2 вариантами табличной версткой и слоями. Это самый большой кусок информации, но нужный. Я сам сейчас верстаю слоями, хоть начинал с табличной. Считаю слои более перспективным и современным способом верстки. По ходу глубже разберемся со стилями, и другими элементами страниц.
- Дальше научимся “правильно” делать макет веб страницы в любимом редакторе и привильно его готовить для веба.
- Пройдем этапы надевания “дизайна” на структуру страницы. Подгонку и решение проблем.
- И научимся создавать мини-сайт с размещением его в сети. Тут будут и FTP и другие протоколы, пройдем регистрацию сайта, домена и остальные прелести.
- Более глубокое это уже я расскажу принцип как делать шаблоны для других систем управления содержимым (CMS) под различные движки.
А дальше только совершенствоваться.
Желаю удачи до скорого!
Публікації
Немає коментарів:
Дописати коментар