Как создать свою вебстраницу в три шага: Пособие для чайников.
Урок первый. Hello World
1) открываем "notepad.exe"
2) В открытом редакторе пишем:
Hello World
3) Сохраняем фаил под именем "index.htm"
Примечание: Обязательно даём название вместе с "" !
4) Открываем полученный результат.
5) Домашнее задание:
1) в редакторе пишем русским шрифтом и сохраняем. Интернет ехплорер должен автоматически распознавать русский шрифт.
2): перед текстом добавляем <h1> а после текста пишем </h1> Первая часть начинает, вторая заканчивает. Что? Посмотрите сами!
Урок второй. Пинг-Понг
Как в первом уроке открываем редактор notepad.exe
в нём мы записываем следующее
<a href="ping.htm"> ping </a>
всё сохраняем как "pong.htm"
А теперь начинаем в редакторе новый документ и теперь записываем
<a href="pong.htm"> pong </a>
и сохраняем там же где и первый фаил но под названием "ping.htm"
теперь открываем один из фаилов в Internet Explorer
Как мы видим мы получили сылку. Описание такое: <a href="pong.htm"> pong </a>
название фаила на который мы делаем сылку. Этот фаил может быть и просто картинка
название сылки. Может быть любым
Домашнее задание: Пытаемся применить навыки из первого урока! И ломаем код, чтобы узнать, что и для чего.
Урок третий: улыбнись!
После того, как мы научилиь писать и соединять две разные страницы, мы научимся вставлять картинки.
Для этого, мы подготовим любую небольшую картинку в формате JPG и сохраним её как
picture.jpg
теперь мы открываем опять редактор и записываем там:
<img src="picture.jpg" />
и сохраняем фаил как "mypic.htm"
открыв страницу мы увидим картинку на странице.
Домашнее задание:
1) Ломайте код, чтобы посмотреть что к чему.
2) Фотоальбом
Сделайте страницу, на которой будут два кратких описания к любым двум картинкам. Под каждым из этих описаний должна быть ссылка на страницы этих картинок. Назовите эту входную страницу "index.htm". Не забудте дать своей странице название большими буквами!
Попробуйте во втором уроке вместо pong вставить Ваше <img src="picture.jpg" /> - Что получилось? Вам понравилось? Примените знания на вашем первом собственном проекте!
А что дальше?
Страницы можно все писать в Notepad.exe Все, без исключения. Но это не всегда удобно, когда таких вот описаний очень много. Для упрощения пользуются специализованными редакторами. Мне, к примеру, очень нравится Dreamweaver.
Зубрить описания можно... но не нужно. Я обычно учу что-то, когда мне нужно воплотить какую-нибудь идею, так-как сам я больше дизайнер, чем програмист ;) Плюс редактора Dreamweaver перед простым notepad кроме красочным выдилением ещё и то, что можно просто составлять страницу. По методу What You See Is What You Get. (WYSIWYG)
А всё остальне просто навыки!)