Shalena.net.ua - Всё для сайта

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

HTML - язык гипертекстовой разметки (Hyper Text Markup Language). HTML постоянно набирает популярность, причем не только в сфере интернет-технологий, но и в области предоставления презентационных услуг, рекламно-выставочной деятельности, внедрения в состав программного обеспечения и пр.

Начнем с выбора редактора, в котором будем писать свой HTML-код. Я, например, использую PSPad. А вообще можно испльзовать Notepad, Dreamweaver и другие специальные программы. Если у вас нет этих программ, то рекомендую использовать обычный Блокнот, который есть на каждом компьютере.

И пишем в нашем Блокноте:

Написали? Это очень просто. Это будет наш шаблон, который мы будем использовать на протяжении всех наших уроков (если у кого спецпрограммы, там этот код прописывается автоматически). Давайте и сохраним его под именем shablon.html.

Обратите внимание:

1) название файла всегда пишите только латинскими буквами;

2) в конце стоит после точки html. html - это расширение, в котором мы будем сохранять наши странички. Это специально для того, чтоб наши записи мог прочитать и интерпретировать браузер.

Только вот что я еще хочу заметить. Со временем у вас будет не один десяток, а может и сотня файлов, принадлежащих вашему сайту. Поэтому лучше сразу приучить себя упорядочивать файлы по папкам. Так что можете открыть новую папку, назвав ее, к примеру "mysite" и сохранить там наш созданный shablon.html.

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

Каждый тег состоит из открывающего и закрывающего тега. Перед каждым закрывающим тегом, обратите внимание, стоит косая черта. Она-то и означает конец тега.

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

Этот тег - просто границы нашего документа. Благодаря этим тегам браузер распознает начало и конец нашей странички, расположенной между этими тегами. И выводит его содержание на всеобщее обозрение.

Это заголовок документа (не путайте с названием!!!). Информация, находящаяся между ними не видна на страничке, она необходима тем программам, которые ее могут просматривать. И является своего рода "бойцом невидимого фронта". Заголовок не является обязательным элементом. Но все-таки, должен быть заголовок документа, кроме того, туда входят такие полезные элементы, как стиль документа, ключевые слова, да и много полезных вещей, без которых потом трудно будет обойтись.

Между этими тегами мы будем писать название нашей странички. И это название отзовется самой верхней строчкой в окне браузера. Не делайте его слишком длинным. Достаточно одной строчки. А то и одного слова. Советую вам не называть его общими названиями, ведь ваша страничка уникальна, правда? Вместо безликой "Моя домашняя страничка" дайте то имя, ради которого вы и решили себя явить миру. У меня этим именем стало "Shalena.net.ua - Всё для сайта".

А это тело документа и является одним из самых важных компонентов любого HTML-документа. Все, что мы зашем между этими тегами, все наши таланты, работы и творения, фотографии, рисунки, фильмы, музыку и бог знает что вы еще там напридумываете, все это отобразится на вашей страничке. И от того, на сколько она будет содержательной, интересной, красивой и уникальной, будет зависеть и популярность вашего сайта. Хотя, скажу откровенно, мало сделать сайт хорошим, его еще нужно разрекламировать. И хоть это и не очень приятное слово, режущее слух, но как еще дать понять миру, что вы существуете? А как это сделать, я тоже расскажу… но позднее.

Теперь давайте попробуем что-нибудь показать на нашей первой страничке. Может у вас есть какая-нибудь ваша или не ваша фотография, можно и просто рисунок. Он обязательно должен быть назван латинскими (желательно маленькими) буквами и иметь расширение jpg, jpeg, gif или png. Просто изображения с другими расширениями не прочитает ни один браузер. Итак у нас есть изображение ... например myfoto.jpg.

Открыли наш шаблон:

Кстати, для написания тегов можно использовать и нижний регистр. Это не принципиально. Браузер одинаково прочитает код, написанный как в верхнем, так и в нижнем регистре.

Так вот, открыли наш шаблон. Для того, чтоб у нас появилось что-то на страничке, добавим в наш HTML-файл наше изображение (у меня это myfoto.jpg). А вставим мы его при помощи тега img и его обязательного параметра src. Обратите внимание, что изображение наше должно находится в одной папке с нашей html-страничкой.

И напишем приветсвие для тех, кто посетит нашу страничку, и для себя любимого. Текст можно писать просто без тегов. Да, вставим в теги для названия странички TITLE название нашей страницы (у меня это - Моя домашняя страничка).
Итак, смотрим, что в нашем HTML-документе.

Написали? Теперь сохраняем наш HTML-документ с расширением html. Я назвала его index.html. Так, как правило, называют страницу сайта, которая является главной или ее еще называют домашней или индексной страницей сайта.

Если вы все сделали, так как я написала, то у вас должно было получится что-то, похожее на это: