Notepad
Итак, открываем блокнот: Start|Programs|Accessories|Notepad и видим перед собой вот это чудо:
Вот он! Вот он этот чистый, невинный лист блокнота. Бум делать из него человека! То есть наше детище… Ну или что у кого там получится…
Пишем в Notepad:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Написали? Просто, правда? Это будет наш шаблон. Давайте и сохраним его под именем shablon.html. Только вот что я еще хочу сказать. Может это и преждевременно, Но! Со временем у вас появится не один десяток файлов, принадлежащих вашей страничке. Сваливая все файлы в одной папке, вам будет все труднее и труднее найти нужный файл, заменить или удалить старый. Я набила на этом много шишек, а потому мой вам мудрый совет. Сразу упорядочивайте файлы по папкам. Так что можете открыть новую папку, назвав ее, к примеру "mysite" и сохранить там наш новоиспеченный shablon.html.
Итак, рассмотрим еще раз, уже повнимательнее наш шаблон. С первого же взгляда видно, что практически все написанные теги - парные!
<TITLE> имеет пару </TITLE>
<HEAD> имеет пару </HEAD>
<BODY> имеет пару </BODY>
И вы, скорее всего, обратили внимание на косую черту в второй колонке тегов. Она означает конец тега.
Теперь вы знаете, как выглядят некоторые теги, но возможно не знаете что они означают. Но сейчас вы узнаете и это… Вы многое что теперь узнаете. Клянусь своим сковородником!
Не забывайте закрывать теги, иначе ваш код убежит в лес и одичает окончательно.
Теги
Тег <HTML></HTML> - это просто границы нашего документа. Благодаря этим тегам браузер распознает начало и конец нашей странички, расположенной между этими тегами. И выводит его содержание на всеобщее обозрение.
Тег <HEAD></HEAD> - это заголовок документа (не путайте с названием!!!).
Информация, находящаяся между ними не видна на страничке, она необходима тем программам, которые ее могут просматривать. Заголовок не является обязательным элементом. Но все-таки, должен быть заголовок документа, кроме того, туда входят такие полезные элементы, как стиль документа, ключевые слова, да и много полезных вещей, без которых потом трудно будет обойтись.
<TITLE></TITLE> - между этими тегами мы будем писать название нашей странички. И это название отзовется самой верхней строчкой в окне браузера. Не делайте его слишком длинным. Достаточно одной строчки. А то и одного слова. Советую вам не называть его общими названиями, ведь ваша страничка уникальна, правда? Вместо безликой "Моя домашняя страничка" дайте то имя, ради которого вы и решили себя явить миру. У меня этим именем стало "Дикая Правда". Его уж точно ни с чем не спутаешь! Ради любопытства, загляните на мою страничку https://dikarka.ru и на самом верху окна увидите название "ДИКАЯ ПРАВДА". Догадались теперь, как я ухитрилась его туда запузырить? То-то же… Проще пареной репы!
<BODY></BODY> - ну а это и есть тело документа. Все, что мы запихнем между этими тегами, все наши таланты, работы и творения, фотографии, рисунки, фильмы, музыку и бог знает что вы еще там напридумываете, все это отобразится на вашей страничке. И от того, на сколько она будет содержательной, интересной, красивой и уникальной, будет зависеть и популярность вашего сайта. Хотя, скажу откровенно, мало сделать сайт хорошим, его еще нужно разрекламировать. И хоть это и не очень приятное слово, режущее слух, но как еще дать понять миру, что вы существуете? А как это сделать, я тоже расскажу… но позднее.
Авторские права
Да! Чуть не забыла! Пожалуйста, отнеситесь со всей серьезностью к тому, что я сейчас скажу.
Вы несете полную правовую ответственность за все, что помещаете на своей страничке. Не разглашайте чью-то личную информацию, помните о конфиденциальности частной жизни. Уважайте законы авторского права! Не воруйте чужое!
Во всемирной паутине немало мест, где можно бесплатно скачать понравившиеся картинки, фотографии, музыку и многое другое. Но если там стоит "copyrigt" - остановитесь! Если же что-то разрешено скопировать, но с ссылкой на источник, обязательно дайте эту ссылку. Не выдавайте чужое за свое! В общем, старайтесь показать, что умеете делать вы и только вы, а не рекламировать других.
Ну, теперь можно и прерваться, и посмотреть, что же у нас там получилось в нашем первом файле. Открываем свою папочку "mysite", разыскиваем файл "shablon.hmtl" .
Хотя, чего его разыскивать? Кроме него там и нет пока ничего… и попробуем его открыть. Так… и что мы видим? Правильно… ничего. А чего показывать, если мы туда ничего своего не внесли?
Что ж, попробуем исправить положение.
Надеюсь у вас есть какая-нибудь ваша фотография? Все равно какая, лишь бы была! Надеюсь она названа латинскими буквами? И нижнем регистром? И, желательно в формате jpg? Типа такой… myfoto.jpg. Не обижайтесь, но некоторые вещи я буду повторять сто раз, потому как если бы мне кто раньше так повторял… мне не пришлось бы обливаться слезами, лупить ни в чем не повинный компьютер и переделывать заново свои работы. Тогда начнем...
Рождение первенца
Да! Кстати… а как же открыть нам свой блокнот, если он сразу открывается в окне браузера? Думаете подкололи, да? А очень просто! Для этого есть два пути, которыми я обычно пользуюсь. Уверяю, есть еще и другие…
- Открыть опять блокнот (для особо забывчивых -
Start|Programs|Accessories|Notepad). Хотя давно пора выставить его иконку на рабочий стол… Открыли? Ну и оттудаFile|Open… достать наш родной, единственный и неповторимый shablon.html. Получилось? Ну и славненько… - Если у вас открыт браузером этот файл, ткните правой кнопкой мыши по экрану и выберите меню View Source, результат будет тот же. Наш файл сам откроется в NotePad!
- Есть конечно и еще дикий способ… заменить расширение shablon.html на shablon.txt и потом открыть его. Но потом опять придется сохранять под расширением html. Так что не советую…
Итак, хватит болтовни, смотрим что у нас там осталось с прошлого раза:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Вы уже выучили наизусть этот наш шаблон как "Отче наш"? Нет? Странно… мы им будем пользоваться постоянно.
Хотя, скажу вам по секрету, можно писать эти теги и строчными буквами, браузеру на это начхать. Точно так же откроет он и содержимое этого файла:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Ну а теперь запомнили? Еще повторить? Ладно… в общем, объясняю, я буду писать буквы всех тегов строчными буквами исключительно из-за того, чтобы вам легче было отличать изменяемую часть от постоянной. Договорились? А вы можете писать как хотите. Как удобней.
Итак, немного изменим содержимое нашего шаблона, вставив туда свою фотографию myfoto.jpg. Кстати, эта фотография должна лежать в той же папке, что и shablon.html
<HTML>
<HEAD>
<TITLE>Моя Домашняя Страничка</TITLE>
</HEAD>
<BODY>
<IMG src="myfoto.jpg">
Ура! Привет мир! Привет люди! Встречайте!
</BODY>
</HTML>
Ну и сохраним этот файл уже не под именем shablon.html, а под другим именем, например, "myhome.html" В принципе, можно сохранить и под расширением "...htm" До недавнего времени я так и поступала. Как известно, краткость - сестра таланта, и я всегда старалась сэкономить если не на деньгах, то хотя бы на буквах. Каково же было мое изумление, когда, загрузив свою новую страничку на сервер, я поняла, что день, потраченый на загрузку файлов на сервер прошел впустую. Не загрузилось ни-че-го! И только, прочитав инструкцию сервера, я поняла, что ошибка - в недостающей четвертой буковке…Вот вам и талант, вот вам и сестра! Вот вам и родня! Так что будьте бдительны! И не забудьте сохранить его в той же папке, что и "shablon.html" и "myfoto.jpg".
Надеюсь, вы все сделали правильно? Чтобы проверить, пойдем и откроем файл "myhome.html" и посмотрим что получилось. А должно получиться примерно следующее:
Нда…негусто. Но все же лучше, чем ничего.
Загрузка странички на сервер
А теперь мы сделаем вот что. Найдем место для нашего сайта и выложим эту нашу первую страничку на халявный сервер. Вы удивитесь, что тут показывать? А я вам скажу, что лучше сразу поместить то, что есть, и постепенно отлаживать.
Конечно, можно пойти и другим путем: сначала сделать отличную страничку, и только потом загрузить ее на сервер, но на это у меня свои возражения. Во-первых, что хорошо смотрится на домашнем компьютере, может показываться в интернете по-другому. Может и вообще не показываться. И поэтому, отлаживая страничку с самого начала, вам легче будет докопаться до ошибок. А от ошибок, уверяю вас, никто еще не застрахован.
Так что, если я вас убедила, будем искать место, где можно уютно разместить своего первенца. Вопрос, где же?
Ниже ссылки не рабочие. Так что дальше можете не читать! Вообще ниже текст удалила. Просто переходите к следующему уроку