Скачать готовую веб страницу html по информатике. Основы HTML

Итак. Пришло время создать нечто более сложное, чем мы делали до этого, но используя полученные знания в предыдущих уроках.

В этом уроке курса MM часть 1 мы сделаем 2-страничный сайт...например, о заработке в интернете.

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

Вверху сайта мы сделаем "шапку сайта". Слева будет меню сайта с ссылками на другие страницы сайта, остальное место будет занимать контент (содержимое) сайта.

Идея понятна? Приступаем.

Запускаем Блокнот и пишем наш минимальный набор для создания страницы .

Теперь напишем между тегами название нашей страницы, например, вот так

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Далее разместим теги и , чтобы все содержимое нашего сайта было размещено по центру страницы.
Если вы не забыли, теги и надо разместить между и , т.е. вот так

Для создания каркаса страницы мы будем использовать таблицу, но чуть более хитрую, чем мы проходили в HTML-уроке о таблицах . Нам нужна таблица, в которой в первой строке будет 1 ячейка, а в другой строке будет 2 ячейки, т.е. вот такая нам нужна таблица:

В ячейке 1 мы расположим шапку сайта, в ячейке 2 будет меню сайта, а в ячейке 3 будет содержимое страницы.

Для того чтобы сделать такую таблицу, напишите вот такой код

Т.е. код нашей страницы будет вот такой:

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Как видите, в такой вот "хитрой" таблице используется лишь 1 пара тегов в первой строке таблицы, а не два, как при построении таблицы 2х2. Но зато появился параметр colspan="2". Этот параметр как бы говорит, какого размера должна быть ячейка. В данном случае ячейка должна быть шириной в 2 ячейки.

Так. Теперь зададим размеры таблицы. Ширину таблицы сделаем 750 пикселей. Из расчета, что кто-то из посетителей сайта может использовать монитор 800х600 точек, и просматривать более широкий сайт ему будет некомфортно.

Высоту таблицы сделаем 600 пикселей

Т.е. код нашей страницы теперь будет вот такой.

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Здесь у нас будет шапка
Здесь будет меню

Чтобы стало видно границы частей сайта - "зальем" область меню и область шапки цветом. Например, вот так

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Здесь у нас будет шапка
Здесь будет меню	Здесь будет содержимое страницы

Сохраните файл под именем index.html , для того чтобы его можно было просмотреть, как он будет выглядеть в браузере.

Теперь вставляем картинку шапки в наш сайт. О том, .

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете


Здесь будет меню	Здесь будет содержимое страницы

Теперь установим точные размеры ячейки таблицы, предназначенной для шапки. Т.к. картинка шапки у нас имеет размер 750х120, то и размер ячейки таблицы сделаем 750 х 120.

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете


Здесь будет меню	Здесь будет содержимое страницы

ТАК .

Установим ширину меню равной 200 пикселей, для этого добавим width="200" в соответствующий тег

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете


Здесь будет меню	Здесь будет содержимое страницы

Задний план меню "зальем" вот таким фоном, для этого сохраните этот фон с его "родным" именем sv11.jpg в ту же директорию, где находится файл страницы.

А теперь прописываем нужный код

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете


Здесь будет меню	Здесь будет содержимое страницы

Теперь наша страница будет выглядеть ТАК .

У вас, возможно, возник вопрос, почему браузер не "отрабатывает" ширину меню 200? Меню ведь выглядит шире, чем 200 пикселей. Да. Есть такой глюк браузера, но все встанет на свои места, если начать писать текст в основном разделе страницы. (Или можно задать жестко ширину ячейки, в которой будем писать контент, дописав width="550" )

Чтобы подтвердить это, добавим текста на наш сайт.

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете


Здесь будет меню

Теперь все почти ОК...Почти, потому что налицо небольшие проблемки. Текст отображается ровно посередине (по вертикали), а следовало бы, чтобы текст был расположен вверху ячеек.

Для этого нам надо прописать еще один параметр в теге меню и основного содержимого страницы.

Этот параметр мы не проходили в уроке о таблицах , - это параметр выравнивания по вертикали valign="top".

Значение top означает, что содержимое будет располагаться вверху.

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете


Здесь будет меню	Этот сайт посвящен заработку в интернете. Если вы совсем новичек, то этот сайт поможет вас сориентировать и подскажет где и как можно заработать в сети.

Теперь наша страница будет выглядеть ТАК .

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Главная

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

Теперь надо сделать текст меню в виде ссылок. Слово Главная залинкуем на страницу index.html, а слово Ссылки на страницу ssilki.html, которую мы создадим чуть позже.

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Главная

Ссылки

Теперь наш сайт будет выглядеть ТАК .

Осталось сделать вторую страницу сайта. Для того чтобы упростить работу, сделаем так - сохраним нашу страницу index.html под другим именем ssilki.html, а затем подредактируем файл.

Т.е. на компьютере у вас должно быть 2 пока что одинаковых страницы - index.html и ssilki.html.

Теперь изменим название страницы (между тегами и ), и изменим текст страницы, например, вот так

Главная

На этой странице будут размещены ссылки на сайты о заработке в интернете

Сайт о заработке в интернете MoneyMaster

Вторая страница сайта будет выглядеть ТАК.

Возможно, у кого-то возник вопрос. А почему столько много пустых строк, нельзя ли уплотнить код?

Можно. Я сделал пропуски, чтобы было наглядней видно структуру страницы. А так можно разместить весь код вообще в одну строчку
Но не стоит. Иначе будет трудно искать ошибки, если что...

Если есть какие либо вопросы по этому примеру - пишите .

Вот мы и сделали простенький сайтик, который вы можете подредактировать и разместить в интернете.

Очень многие спрашивают, как разместить сайт в и нтернете , чтобы его можно было видеть не только на своем компьютере, а чтобы его могли видеть и другие люди. Ок. Забегу немного вперед.

Для того, чтобы ваш сайт был доступен из интернет всему миру, надо найти , который предоставит вам место для вашего сайта. Хостинг бывает бесплатный и платный. Бесплатный хостинг дает вам также и адрес сайта. Так например, если вы зарегистрировались на хостинге narod.ru, указав при регистрации логин pupkin, то адрес вашего сайта будет http://pupkin.narod.ru Но бесплатные хостинги обладают кучей недостатков и их следует использовать лишь для тренировки. Если же делать серьезный сайт, то надо покупать и покупать хостинг, затем связать домен и хостинг (подробнее эти вопросы рассматриваются в книге MoneyMaster-3), тогда ваш сайт будет иметь желаемый вами адрес типа http://gadukino.ru (если домен не занят), и вы получите еще кучу преимуществ по сравнению с бесплатным хостингом, например, возможность использовать скрипты, что позволит вам создавать динамические сайты. После того как вы определились с хостингом и получили место для вашего сайта, надо перебросить файлы сайта на хостинг. Сделать это можно с помощью специальных FTP- программ, например LeapFTP, CuteFTP, или можно сделать с помощью файловых оболочек Windows Commander, Total Commander и др. можете скачать видео-урок, из которого вы узнаете, как сделать переброску файлов на хостинг.

ПОЗДРАВЛЯЮ!

Если вы дошли до этого момента и у вас все получилось, значит, вы прошли своего рода тест-драйв и теперь с уверенностью можете двигаться дальше.

Конечно, сделанный для примера сайт не так крут. И даже в этом сайте пришлось использовать готовые картинки, которые вы скорей всего создавать не умеете.

А вы хотели бы научиться рисовать сами графический дизайн вашего сайта?

Этому вы можете научиться, пройдя обучение по книге MM-2.

Книга MM часть 2.

УЖЕ СЕГОДНЯ вы сможете сделать СВОЙ приличный, эксклюзивный дизайн для вашего сайта , не теряя недели/месяцы на изучение учебников и прочих материалов, не воруя дизайн у других и не используя темплейты.

ДАЖЕ ЕСЛИ ВЫ В ПРИНЦИПЕ НЕ ДИЗАЙНЕР - У ВАС ВСЕ РАВНО ПОЛУЧИТСЯ ПРИЛИЧНЫЙ ДИЗАЙН!

Как сделать красивый сайт, даже если вы пока не дизайнер.

Обучение необходимым навыкам и приемам для создания графических элементов сайта. Разновидности дизайна.
Основы композиции сайта.
Рекоммендуемые сочетания цветов.
Создание макета сайта в Adobe Photoshop.
Эффекты в Adobe Photoshop.
Нарезка сайта в Image Ready.
Верстка кода в DreamWeaver.
Таблицы стилей CSS.

К сожалению, книга 2 не бесплатная, но я уверен, что вы не пожалеете о ее покупке. Наверняка до прочтения книги MM-1 вы и представить не могли, что, изучив ее, вы научитесь создавать простенькие сайты. Скорей всего, вам это казалось чем то очень сложным, "не для вашего ума". Но я вас провел по самой короткой дорожке к результату, держа вас как ребенка за руку. Точно так же, изучив MM-2, вы научитесь делать графический дизайн сайта, при этом, опять же пройдя по самой короткой дорожке, т.е. СЭКОНОМИВ ВРЕМЯ, не тратя месяцы на изучение различных книг. Потратив несколько вечеров на изучение MM-2, вы будете в силах делать свой дизайн для своих сайтов, значительно обогнав тех, кто решит купить книги в обычном магазине и будет месяцами их изучать.

Цена на книгу MM-2 также включает в себя цену на консультации. Да.
Каждый покупатель получает право на консультации в соответствующих закрытых разделах форума. Наверняка у вас будут появляться вопросы, а спросить некого. Покупая книгу - вы всегда будете иметь возможность задать вопросы и получить на них ответы от меня или от опытных учеников! При таком подходе ваше обучение будет максимально эффективным! При таком подходе вы максимально быстро научитесь делать сайты и зарабатывать с их помощью.

Если у вас совсем уж туго с финансами, то можете заработать необходимые деньги . Много там не платят, но для кого-то это будет спасительной соломинкой, чтобы купить книги.

Вам срочно нужно сделать сайт, используя только HTML, и выложить его в интернет? Тогда вам не составит труда скопировать готовый код и следовать моим инструкциям.

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

Если у кого-то именно он и является целью, и нет желания изучать другие языки, то эта статья для них.

Короче, в самописном исполнении, без использования CMS, проще уже ничего не существует.

А для тех кому требуется что-то по круче, в конце статьи есть ссылки на статьи с кодом блочного шаблона, с использованием CSS, и кодом динамического сайта с использованием PHP.

Сайт на чистом html сделаем прямо на этой странице, так сказать — сайт в сайте, вполне рабочий и готовый к заполнению контентом.

Разделим весь процесс на три части.

1. Создание директории сайта на своём компьютере.

2. Создание сайта.

3. Перевод сайта с нашего компа на хостинг, то есть в интернет.

Создание директории сайта на своём компьютере

Первый пункт самый простой. О том как создать директорию очень наглядно показано в статье (все ссылки с этой страницы открываются в отдельном окне, чтоб не потеряться).

А что, и в какую папку положить, я подробно покажу после кода главной страницы, чтоб уже было с чем идти в директорию.

Затем приступим ко второму пункту, самому творческому.

Создание шаблона сайта

Для создания шаблона потребуется редактор, в который нужно будет вставить приведённый ниже код.

Это может быть как простой виндовский Блокнот, так и любой другой текстовый редактор.

За основу шаблона возьмём многослойную таблицу HTML. Раньше, до появления CSS все сайты писались таблицами, теперь же более популярной стала блочная вёрстка.

Но и до сих пор, табличная структура не устарела и с успехом применяется.

Например инвестиционная CMS H-script со сложнейшим функционалом, целиком свёрстана на основе таблиц.

Итак, вот такой сайт, с минимальным оформлением.

Как в дальнейшем оформлять таблицы, очень подробно показано в статье .

Название сайта (организации) Описание сайта

Страница

Здравствуйте уважаемые будущие веб-мастера! Мне 55 лет и я рад приветствовать Вас на своём сайте.
Этот сайт первый, который я разработал самостоятельно, а до этого умел только входить в интернет.

Почему я решил его сделать? За те 3 месяца, пока разбирался в сайтостроении и создавал этот ресурс обнаружилось, что авторы руководств по созданию сайтов считают многие нюансы само собой разумеющимися и не обращают на них внимания.
А мне, учитывая возраст и отсутствие опыта, было не просто понять как раз эти нюансы, они отнимали больше всего времени.

Меню

Общая информация

Текст общей информации

Название сайта