Пример веб сайта на языке html

Пример веб сайта на языке html

В примерной программе по информатике и ИКТ на тему “Коммуникационные технологии” отводится всего 12 часов и предлагается создать Web-страничку с использованием шаблонов. На тему “Мультимедийные технологии” выделяется 8 часов, но если в образовательном учреждении информатика изучается на пропедевтическом уровне уже в 5, 6 и 7 классах, то целесообразно перенести изучение мультимедийных технологий в пропедевтический курс и тогда можно увеличить время на изучение коммуникационных технологий, а точнее, можно добавить тему “Создание Web-сайтов на языке HTML” в 8 классе.

Освоение технологии создания сайтов рекомендуется начать с языка разметки гипертекста HTML в программе Блокнот, что является первоосновой в данном направлении. Конечно, за 8 часов невозможно изучить весь язык HTML, но можно показать назначение и применение основных тегов языка. Если ученик заинтересуется технологией создания сайтов, то сможет продолжить изучение материала самостоятельно или на соответствующих курсах, кружках или факультативах.

Представленное методическое пособие прошло неоднократную опрабацию в 8-х классах гимназии №441 Фрунзенского р-на Санкт-Петербурга и включает материал для проведения теоретических и практических занятий, выполнение которых сначала демонстрируется через проектор, а затем учащиеся выполняют самостоятельно на компьютере, используя раздаточный материал к уроку.

Для учащихся, которые бысторо выполнили запланированную работу на уроке предусмотрены дополнительные задания.

Эффективно осваивается материал, когда учащиеся вместе с учителем выполняют общий проект, например, по теме из истории Санк-Петербурга “Драматические театры Санкт-Петербурга”, а затем в качестве итоговой работы создают собственный небольшой проект, используя в качестве шаблона сайт, созданный совместно с учителем.

В качестве зачетной работы ученики отвечают на вопросы теста на знание тегов HTML и представляют созданный самостоятельно сайт.

Основные цели обучения: формирование познавательного интереса, развитие интеллектуальных и творческих способностей в области Web-технологий.

Обучающие: сформировать систему знаний по технологии создания Web-сайтов;

  • обучить языку разметки гипертекста HTML для создания сайтов;
  • познакомить с этапами проектной деятельности.
  • Развивающие: развить творческие способности к самовыражению, посредством создания сайтов;

  • сформировать умение сопоставлять, искать аналог и осуществлять перенос знаний в новую предметную область Web-технологий;
  • развить навыки работы на компьютере
  • Воспитательные: воспитать добросовестное отношение к работе;

  • воспитать чувства товарищества и личной ответственности за созданный сайт;
  • воспитать художественный и эстетический вкус;
  • воспитать грамотного и корректного пользователя сети Интернет.
  • Урок 1

    1. Общие сведения о Web-сайтах и языке HTML

    Публикации во Всемирной паутине (World Wide Web) реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвящённую какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц, объединённых гиперссылками. Web-страницы могут содержать текст, рисунки, таблицы, мультимедийные и динамические объекты. Создание Web-сайтов можно осуществлять с помощью языка HTML.

    HTML – Hyper Text Markup Language язык разметки гипертекста. HTML ни в коей мере не является языком программирования, он отвечает только за расположение элементов (текста, рисунков) в окне браузера. HTML является языком для создания Web-сайтов во Всемирной паутине. Язык HTML состоит из простых команд – тегов. Теги управляют представлением информации на экране при отображении HTML-документа. Теги заключаются в угловые скобки <>… и бывают парные и непарные (одиночные <>).

    Документ HTML – это текстовый файл с расширением .html или .htm, содержащий набор тегов.

    Браузер – (browser) – программа для просмотра Web-страниц. Широко используют бразеры Microsoft Internet Explorer, Opera и др. Браузер при получении документа HTML выполняет его анализ, строит объектную модель документа, затем результат отображает на мониторе.

    2. Структура HTML-документа

    Записываются meta-теги, содержащие информацию о названии страницы, об авторе и др.

    Содержит непосредственно информацию страницы: тексты, рисунки, таблицы

    3. Форматирование символов

    Символы, заключенные между следующими тегами отображают:

    …. — полужирный шрифт

    …… — подчеркнутый шрифт

    — нижний индекс

    … — верхний индекс

    Текст, заключенный между тегами …….. имеет заданный размер, цвет и гарнитуру. Для этого используются атрибуты: SIZE = значение от 1 до 7 и COLOR = цвет (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white), каждому цвету соответствует свой шестнадцатеричный код от 000000 до FFFFFF.

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

    Одиночный тег
    разрывает текстовый поток и вставляет пустую строку. Несколько таких тегов добавляют несколько пустых строк. Межстрочный интервал – одинарный.

    4. Практическое задание №1.

    Создание первого HTML-документа “Драматические театры Санкт-Петербурга”, работа со шрифтами, задание цвета и размера шрифта. Освоение технологии работы.

    Урок №2

    1. Форматирование текста по абзацам

    — начинает абзац с новой строки. Новый абзац отделяется от предыдущего двойным межстрочным интервалом.

    Выравнивание текста по абзацам:

    — по ширине

    — по правому краю

    2. Задание цвета всего текста и фона документа

    Описываются в начальном теге тела документа

    3. Заголовки разных уровней

    Тегами …. оформляют заключенный в них текст. Значения n меняются от 1 до 6, при этом текст выводится от более крупного к более мелкому. Теги …. могут иметь атрибуты ALIGN=CENTER, LEFT, RIGHT.

    4. Простые списки

      ……

    — неупорядоченный (ненумерованный) список

      ……

    — упорядоченный (нумерованный) список

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

    Виды нумераций списков:

    5. Практичекое задание №2

    Форматирование текста по абзацам, цвет фона, заголовки разных уровней, списки.

    Урок №3

    1. Вставка графических изображений

    Всеми браузерами поддерживаются форматы .gif, .jpg. Эти форматы являются растровыми. GIF – поддерживается прозрачность и анимацияю, хорошо подходит для рисованных изображений. JPG – для полноцветных изображений, хорошо подходит для отсканированных изображений и фотографий, анимацию не поддерживает.

    Одиночный тег вставляет графические изображения в текстовый поток в любом месте:

    Необязательные атрибуты тега :

    ALT = альтернативный текст

    BORDER = толщина обрамляющей рамки в пикс., 0 нет рамки

    HEIGHT = высота изображения в пикселах или %

    WIDTH = ширина изображения в пикселах или %

    HSPACE = свободное пространство слева и справа от изображения в пикселах или %

    VSPACE =- свободное пространство сверху и снизу от изображения в пикселах или %

    ALIGN = left, right, middle выравнивание изображения

    Чтобы рисунок был по центру, можно использовать тег ……. /

    2. Практическое задание №3

    Вставка и форматирование графических изображений. Самостятельное создание Web-страниц драматических театров.

    Урок №4

    Рисунок так же можно сделать, как гиперссылку, написав:

    2. Практическое задание №4

    Оформление списка театров на главной странице glavn.htm, как гиперссылки на соотвествующие Web-страницы театров.

    Урок №5

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

    С помощью таблиц удобно создавать навигацию по сайту.

    — вся таблица.

    — строка.

    — ячейка в ряду.

    Пример таблицы из двух строк (рядов), содержащих по две ячейки:

    Текст ячейки 1, 1

    Текст ячейки 1 2

    Текст ячейки 2, 1

    Текст ячейки 2, 2

    текст ячейки 1,1 текст ячейки 1,2

    первая строка

    текст 2,1 ячейки текст 2,2 ячейки

    вторая строка

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

    Основные атрибуты тегов

    таблица

    и задают параметры таблицы, строки или ячейки:

    ALIGN=left, right, center – выравнивание (

    ,

    ,

    )

    BGCOLOR=’цвет’ – фоновый цвет (

    ,

    ,

    )

    HSPACE=значение – свободное пространство слева и справа от таблицы в пикселах (

    )

    VSPACE=значение — свободное пространство сверху и снизу от таблицы в пикселах (

    )

    WIDTH=значение – ширина таблицы (ячейки) – в пикселах, или в процентах (

    ,

    )

    HEIGHT= значение – высоты таблицы (ячейки, строки) – в пикселах, или в процентах (

    ,

    )

    BORDER= значение – толщина рамки вокруг таблицы и ее ячеек, по умолчанию значение=1, если значение=0, то рамки нет (

    ,

    ,

    ,

    )

    BORDECOLOR=’цвет’ – цет рамки (

    VALIGH=bottom, middle, top – выравнивание содержимого по вертикали (

    )

    2. Практичекое задание №5

    Создание навигации по сайту в форме таблицы из одной строки

    Уроки №6 и №7

    1. Секция заголовка , мета-теги

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

    В секции заголовка обычно помещается и ряд тегов с различными атрибутами, предоставляющими дополнительную информацию (метаинформацию) о Web-сайте:

    (указывается через запятую набор ключевых слов, которые могут быть использованы рядом поисковых систем)

    2. Самостоятельная работа над своим проектом

    Примерные темы проекта: “Мосты через Неву”, “Реки и каналы Санкт-Петербурга”, “Мосты через каналы Санкт-Петербурга”, “Необычные музеи Санкт-Петербурга”, “Музыкальные театры”, “Филармонии и капелла”, “Технические ВУЗ-ы Санкт-Петербурга”, “Детские театры Санкт-Петербурга”, “Гуманитарные ВУЗ-ы Санкт-Петербурга”, “Пригороды Санкт-Петербурга”, “Музеи Санкт-Петербурга”, “Военные учебные заведения в Санкт-Петербурге” и др.

    Необходимо оформить главную страницу сайта по образцу файла glavn.htm, выбрав в качестве навигации по сайту таблицу или список, и 2 — 3 страницы, раскрывающие содержание сайта и содержащие: заголовок, текст и рисунок.

    Урок №8

    1. Контрольный тест на знание тегов HTML – 15 минут.

    2. Рефлексия. Представление проекта и оценивание его учениками класса и учителем – 30 минут.

    Вопросы контрольного теста – Приложение 2.

    Литература для учителя

  • Усенков Д.“Уроки Web-мастера”, Москва, БИНОМ, 2004 г.
  • Смирнова И. “Начала Web-дизайна, Санкт-Петербург, БХВ, 2004г.
  • Томас А.Пауэл “Web-дизайн. Наиболее полное руководство. В подлинике”, 2-е издание, БХВ-СПБ, 2005 г.
  • Браун М. “HTML 3.2. Наиболее полное руководство. В подлиннике”, БХВ-СПб, 1999
  • Захаркина В.В. “Основы создания Web-страниц”, методическое пособие, СПБ, 2000 г.
  • К.Ахметов, “Microsoft Internet Explorer 4.0 для всех”, изд-во Компьютер, Москва, 1997 г.
  • Литература для ученика

  • Усенков Д.“Уроки Web-мастера”, Москва, БИНОМ, 2004 г.
  • Смирнова И. “Начала Web-дизайна, Санкт-Петербург, БХВ, 2004г.
  • Если сайт состоит из одной или нескольких страниц и в ближайшей перспективе не будет наполнятся большим количеством контента или обрастать сложным функционалом (интернет магазин, каталог товаров, форум и прочее). То создать такой сайт лучше на html в блокноте.

    1. Для этого понадобится готовый дизайн сайта собственного производства или скачанный из сети psd исходник. Его нужно раскроить для верстки html.
    2. Блокнот, а именно NotePad++. Его можно скачать с официально сайта.
    3. Файл index.html. Его можно создать в любой удобной папке на компьютере. Но лучше выдели отдельную папку для своего сайта и размести его там. У меня это папка c:siteindex.html
    4. Файл c:sitestyle.css. Это файл стилей, зачем он нужен станет понятно позже.
    5. Папка c:siteimages. В эту папку нужно поместить все изображения нужные для будущего сайта.
    6. Купить хостинг и домен если нужно сайт выложить в интернете

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

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

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

    Теперь нужно открыть файл index и style в NotePad++

    Структура html документа

    Скопируй код в файл index.html

    Теперь открой его в браузере, должно получится так:

    В кратце опишу что значат эти теги. Если хочешь подробнее разобраться то по googl-и как говорится информации на эту тему море.

    Указываем браузеру по какому стандарту нужно отображать страницу:

    Тег html говорит о том где начинается и заканчивается html документ

    Тег head необходим для размещения служебной информации, тут подключаются стили, скрипты и размещена meta информация страницы. Посетители сайта не видят содержимого этого тега.

    Тег body содержит разметку страницы, содержимое этого тега видят посетители сайта.

    Верстка или создание сайта на html

    В процессе верстки сайта будут встречаться теги и атрибуты описать которые в данной статье невозможно. Поэтому рекомендую пользоваться сайтом htmlbook.ru. Кроме того советую внимательно изучать каждый тег и стиль css, который тебе встречается.

    Итак что будем верстать:

    Фон и основной каркас сайта

    Замени содержимое своего файла index.html на следующее:

    И добавь в style.css такой код:

    Обнови страницу с сайтом в браузере (F5), должно получится так:

    Шапка сайта

    Добавьте в тег div с идентификатором basic следующий код:

    Что бы получилось следующее:

    И добавляем в файл css строки:

    Верхнее меню сайта

    Что бы на нашем html сайте появилось навигационное меню, которое изображено в макете добавить в index.html после:

    Что бы получилось так:

    А в файл style.css:

    Теперь сайт имеет логотип телефон и меню при наведении на которое меняется фон:

    Левое меню и контент

    Пришло время сделать левое меню и блок с контентом. Для этого копируем код и тщательно изучаем, что к чему. После блока:

    Файл index.html будет выглядеть вот так:

    И в конец файла css копируем:

    Если все сделано правильно получится сайт как на картинке ниже:

    Подвал сайта

    Теперь весь файл index.html выглядит вот так:

    В файл css добавляем код в самый низ:

    Теперь весь файл style.css выглядит следующим образом:

    А сам сайт вот так:

    Другие страницы сайта и ссылки меню

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

    Названия страниц должны быть уникальными и состоять из латинских символв. Я просто перевел названия пунктов меню на транслит.

    • o-nas.html — О нас
    • assortiment.html — Ассортимент
    • otzivi.html — Отзывы
    • zabronirovat-stolik.html — Забронировать столик
    • nashi-klienty.html — Наши клиенты
    • kontakty.html — Контакты

    То же самое нужно сделать и с левым меню.

    • kofe-ayrish.html — Кофе Айриш
    • kofe-amerikano.html — Кофе Американо
    • kofe-glyase.html — Кофе Глясе
    • kofe-dippio.html — Кофе Диппио
    • kofe-kapuchino.html — Кофе Капучино
    • kofe-kon-panna.html — Кофе Кон Панна
    • kofe-koretto.html — Кофе Коретто
    • kofe-latte.html — Кофе Латте
    • kofe-lungo.html — Кофе Лунго

    Теперь открываем index.html в NotePad++ и добавляем нужные ссылки соответствующему меню, что бы получилось так:

    Теперь жми "Сохранить" потом "Файл > Сохранить как" и сохраняй для каждой ссылки файл с соответствующим именем в папке с файлами сайта. Вот что получилось у меня:

    Все сайт готов. Осталось только поменять в каждой странице контент.

    У такого сайта не смотря на его простоту есть очень большой недостаток. Что бы поменять один пункт меню или элемент дизайна придется это делать это в каждом сайте. Когда страниц больше 10 начинается страшная путаница при его обслуживании. Так что создание сайта html в блокноте советую делать только для очень маленьких сайтов или одно-страничных LandingPage. А для полноценных сайтов осваивать CMS (они не так сложны как кажется).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Я рекомендую Notepad++. Он бесплатный, простой в использовании, и в отличие от Блокнота, в нём легко просматривать картинку в браузере, после внесения изменений в код.

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

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

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

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

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

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

    Описание сайта

    Страница

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

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

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

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

    Подвал

    !—В ячейке строки создаём ещё одну таблицу для шапки сайта.
    Оформление:
    border="1" — двойная рамка толщиной в 1px
    background="images/168.png" — картинка в шапке сайта, если требуется.
    Адрес картинки вы должны вставить свой.
    bgcolor="#7FFFD4" — фоновый цвет в шапке, если нет картинки.
    cellpadding="10" — отступ содержимого от рамки не менее 10px.
    style="width:100%; border-radius:5px;" — добавляем "резиновость"
    и закругляем уголки рамки— >
    table
    border =" 1 "
    background =" images/168.png "
    bgcolor =" #7FFFD4 "
    cellpadding =" 10 "
    style =" width:100%; border-radius:5px; ">
    !—Создаём строку таблицы— >
    tr >
    !—Создаём столбец таблицы— >
    th >
    !—Содержание ячейки столбца— >
    h1 >Название сайта (организации) /h1 >
    h3 >Описание сайта /h3 >
    !—Закрываем таблицу— >
    /th >
    /tr >
    /table >

    !—В этой же ячейке контейнера создаём ещё одну таблицу
    для основного контента.
    Оформление как и в предыдущей таблице— >

    table
    border =" 1 "
    bgcolor =" #e6e6fa "
    cellpadding =" 10 "
    style =" width:100%; border-radius:5px; ">
    !—Создаём строку— >
    tr >
    !—Создаём ячейку
    Оформление:
    rowspan="2" — объединяем две ячейки в одну.
    Число объединяемых ячеек по числу ячеек в сайдбаре.
    style="width:80%" — основной контент занимает 80% всей площади,
    оставшиеся 20% для сайдбара— >
    td
    rowspan =" 2 "
    style =" width:80% ">
    h2 >Страница /h2 >
    !—Начинаем абзац с красной строки— >
    p style = "text-indent:20px ">
    Здравствуйте уважаемые будущие веб-мастера!
    Мне 55 лет и я рад приветствовать Вас на своём сайте.
    Этот сайт первый, который я разработал самостоятельно,
    а до этого умел только входить в интернет. /p >

    p style =" text-indent:20px ">Почему я решил его сделать?
    За те 3 месяца, пока разбирался в
    сайтостроении и создавал этот ресурс обнаружилось,
    что авторы руководств по созданию
    сайтов считают многие нюансы само собой разумеющимися
    и не обращают на них внимание
    А мне, учитывая возраст и «опыт», было не просто
    понять как раз эти нюансы, они отнимали больше всего
    времени. /p >
    !—Закрываем ячейку— >
    /td >

    !—Создаём ячейку сайдбара— >
    td bgcolor =" #e6e6fa ">
    h3 >Меню /h3 >
    !—Абзац для ссылки на страницу сайта— >
    p >
    !—Ссылка на страницу сайта— >
    a href ="">
    !—Картинка маркера перед названием страницы— >
    img src =" http://trueimages.ru/img/00/06/f4fffdb5.png ">
    !—Название страницы
    style="margin-left:5px;" — отступ названия от маркера— >
    span style =" margin-left:5px; ">Страница /span > /a >
    !—Закрываем абзац— >
    /p >
    p >
    a href ="">
    img src =" http://trueimages.ru/img/31/ab/4dcb087c2ae4305edcd15171696.jpg ">
    span style =" margin-left:5px; ">Страница 1 /span ;> /a >
    /p >
    p >
    a href ="">
    img src =" http://trueimages.ru/img/31/ab/4dcb087c2ae4305edcd15171696.jpg ">
    span style="margin-left:5px;">Страница 2 /span > /a >
    /p >
    !—Закрываем строку Меню— >
    /td >
    /tr >
    !—Создаём строку с дополнительной информацией— >
    tr >
    !—Ячейка с дополнительной информацией— >
    td
    bgcolor =" #e6e6fa "
    align =" center ">
    h3 >Общая информация /h3 >
    p >Текст общей информации /p >
    !—Закрываем ячейку с общей информацией
    и таблицу основного контента— >
    /td >
    /tr >
    /table >

    !—Создаём таблицу подвала— >
    table
    border =" 1 "
    bgcolor =" #7FFFD4 "
    height =" 100 "
    cellpadding =" 10 "
    style =" width:100%; border-radius:5px; ">
    !—Создаём строку.— >
    tr >
    !—Создаём столбец— >
    th >
    h3 >Подвал /h3 >
    !—Закрываем таблицу подвала. При желании в подвале можно
    сделать несколько строк и столбцов— >
    /th >
    /tr >
    /table >
    !—Закрываем таблицу контейнера— >
    /td >
    /tr >
    /table >
    /body >
    /html >

    Вот такой очень простой код. Без учёта пробелов и комментариев, даже 100 строк не наберётся.

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

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

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

    Готовый код различных наворотов для вашего сайта вы можете найти на странице Бесплатные скрипты и CSS эффекты для сайта

    Размещение сайта в папках директории

    Все действия показаны в редакторе Notepad++. Если кто ещё не установил, то вот ссылка на инструкцию по установке: Установка Notepad++

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

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

    Открываем Notepad++, открываем «Новый документ», проверяем и если нужно исправляем кодировку на uft-8 (без БОМ), копируем код сайта с моей страницы, вставляем его в поле редактора.

    Затем выбираем "Файл — Сохранить как…" , в открывшемся поисковике находим созданную при создании директории сайта папку, допустим "website", в строке "Сохранить"(внизу окна поисковика) меняем название с "nev1" на «index.html», и сохраняем.

    После сохранения файла, папка должна выглядеть следующим образом:

    Теперь, чтоб в дальнейшем не писать длинные адреса для изображений, откроем папку content и создадим в ней ещё одну папку для картинок с названием images1.

    В неё будем складывать изображения для всех страниц, кроме главной.

    Выбираем меню Запуск (верхняя строка панели редактора), и в нём Launch in Chrome.

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

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

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

    После изменения какой либо позиции, нужно нажать Сохранить(третья иконка слева), и через Запуск посмотреть как получилось.

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

    Теперь разберёмся с картинками. Изображения в моём шаблоне загружены через сервис trueimages.

    Вы же будете делать свои, и сохранять их в папке images и images1 директории website, значит адреса картинок будут другими.

    Как сделать картинку рассказано в статье Как сделать картинку для шапки в Paint(это для тех кто не знаком с фотошопом).

    А адреса у Вас буду выглядеть так: Для Главной (index.html) — images/имя рисунка.

    А на всех последующих страницах вместо images ставиться images1.

    Картинки маркеров на Главной прописываются так

    А на следующих страницах так опять вместо images — images1

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

    Последующие страницы делаются по тому же шаблону, только сохраняются в папке «content», и называются не «index.html», а по заголовку статьи, только в названии файла он пишется английскими буквами, с окончанием «html».

    Изображения для них размещаются соответственно в папке images1. Если и на главной, и на других страницах, есть одни и те-же картинки, то они должны быть в обеих папках.

    Адреса этих страниц определяются так. Когда Вы создадите страницу, сохраните её в папке content, выберете в Notepad++ меню Запуск, и откроете в своём браузере, то в адресной строке браузера как раз и будет нужный адрес.

    Вставляется он в виде ссылки перед текстом «Другая страница» (как пишутся ссылки читайте в статье Ссылки примерно вот так

    На моём сайте можно подобрать ещё несколько красивостей для оформления страницы, как то: красивая прямая линия, рамки, бегущая строка или бегущая картинка, кнопка и ещё кое что.

    Когда все доработки будут сделаны, то есть сайт будет готов, можно переходить к третьему пункту — выводу сайта в интернет.

    Перенос сайта со своего компьютера на виртуальный хостинг, то есть в интернет

    Для этого нужно будет приобрести хостинг и домен. Что такое хостинг, можно посмотреть здесь, а доменное имя сайта — это адрес, по которому Ваш сайт будет определятся в интернете.

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

    Во-первых, 1200 руб. в год — смешная цена, а во вторых гарантия того, что Ваш сайт будет доступен в любое время по всему миру, и оперативное решение возникающих проблем (а это возможно только на платных хостингах), того стоит.

    Я рекомендую Вам хостинг Бегет. Это один из, если не самый лучший хостинг провайдер России.

    Евгений Попов даже запустил проект «Хостинг-Нинзя», по выявлению лучшего хостера, и заключающийся в опросе пользователей.

    В конце концов этот проект стал крупнейшим сервисом по подбору хостинга, и Бегет сразу занял, и твёрдо удерживает в нём первое место.

    Цена хостинг + домен = 1120 руб. в год. Первый месяц(целый месяц!) — тестовый, то есть вначале покупается только домен за 120 руб в год, и только через месяц, если Вам понравилось, оплачиваются услуги хостинга.

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

    А это уже встречается не часто, даже за более солидные деньги.

    Расскажу пару запоминающихся случаев. Как то раз я набрав адрес своей админки, в ответ получил, не помню уж какую, ошибку. Представляете моё состояние?

    Был сайт, и нет его. Позвонил в техподдержку хостинга, и через час выяснилось, что плагин BulletProf Security, после обновления, возможно и при моём неумелом участии, наштамповал новых файлов .htaccess, и закрыл тем самым всякий доступ на сайт.

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

    В другой раз пытался установить крутую тему, но она никак не хотела устанавливаться. В основном архиве находились ещё архивы, а в них ещё.

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

    В каком ещё хостинге Вам окажут такую помощь. Да ни в каком. Нет таких больше.

    Вот на его то примере, я и покажу процесс появления Вашего сайта в интернете. Подробнее про Бегет и про то, как на нём зарегистрироваться и приобрести хостинг и домен читайте в статье Перевод сайта с Денвера на хостинг.

    Читайте там до абзаца «А вот теперь тот способ переноса сайта…». Дальше расписан перевод сайта с Денвера, и Вам это не нужно.

    Когда сайт зарегистрирован, проходим в панель управления хостинга.

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

    Итак, открываем менеджер, и дважды щёлкаем по строке с доменным именем вашего сайта.

    Откроется директория, в которой должна быть папка public.html. Вот в неё и будем переносить файлы с нашего компа.

    Открываем папку public.html и щёлкнув по разделу Новая папка, создаём там две папки images и content. В папке content — папку images1. Короче, всё так-же, как на компьютере.

    Затем находим Загрузить файлы, и щёлкнув по нему, откроем окно загрузки

    Здесь заходим в Выбрать, и, в открывшемся поисковике, находим файлы и папки созданные на нашем компе, в директории website.

    Первым делом выбираем файл index.html, и загружаем его на хост, нажав Загрузить в меню окна загрузки.

    Затем точно таким-же образом загружаем файлы из папок images, images1, и content в одноимённые, созданные на хостинге.

    Адреса страниц при этом изменятся так как в них добавиться доменное имя сайта, примерно так:

    Для главной — Доменное имя/index.html
    Для страниц — Доменное имя/content/straniza.html

    Значит, все адреса в меню нужно будет менять. Для этого щёлкаем правой клавишей мыши по index.html, и в открывшемся меню выбираем Правка.

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

    У меня, к сожалению, нет картинки с нашими файлами, но редактор менеджера отличается от Notepad++ только подсветкой синтаксиса, думаю разберётесь без картинки.

    Если редактор менеджера кому-то не понравиться, можно скачать файл на компьютер, открыть в Notepad++, отредактировать (изменить адреса), удалить старый фал из менеджера, а отредактированный загрузить обратно.

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

    В открывшемся окне, в поле Кодовое значение, проставляем 644 и жмём Изменить(что такое 644 и другие права доступа можно узнать в интернете)

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

    Код блочного шаблона сайта можно изучить прочитав статью Код сайта HTML+CSS. Ссылка на статью чуть ниже в меню.

    Да, ещё о том, как сделать этот сайт побольше.

    Для этого в директории сайта в папке content создаются несколько папок для рубрик, каждая со своей папкой images.

    Папки называются по названию рубрик и в каждую из них помещается несколько файлов со статьями по теме рубрики.

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

    Всё остальное делается так, как описано выше, но я настоятельно рекомендую, для больших сайтов использовать php, о чём я подробно рассказал в статье Код сайта на php. Ссылка на статью чуть ниже в меню.

    Ну а если вас устраивает вариант показанный на этой странице, то надеюсь, уже завтра ваш сайт на чистом HTML, можно будет найти в интернете.

    Читайте также:  Почему не отвечает игровой центр майл
    Ссылка на основную публикацию
    Почему слабый интернет на телефоне
    Результаты поиска Пользование Симптомы При использовании мобильного интернета наблюдаются затруднения в доступе к интернет-ресурсам: слишком медленно происходят загрузка страниц в...
    Почему вай фай в метро постоянно отключается
    Люди часто спрашивают, почему в метро не подключается Вай Фай, и что делать при появлении такой ситуации. Ниже рассмотрим, как...
    Почему веганы не пьют кофе
    Мы все знаем, что веганы – это люди, отказывающиеся от употребления в пищу продуктов животного происхождения. Существует множество причин следовать...
    Почему скорость записи на флешку маленькая
    Современные USB-накопители являются одними из самых популярных внешних носителей данных. Немаловажную роль в этом играет еще и скорость записи и...
    Adblock detector