#Урок 3. Разбор сайта на примере шаблона.

И так, теги мы изучили, а что с ними делать дальше? Вот на этот вопрос я вам и дам ответ в данном уроке, в котором мы рассмотрим готовый сайт (шаблон) html и разберем его весь изнутри. Приступим.

Ну значит для начала берем и скачиваем шаблон готового блога на языке html. Далее открываем папку Загрузки (ну или куда у вас он там скачался) находим наш архив с сайтом, называться он должен templatemo_157_yellow_blog.zip, потом вырезаем файл (Ctrl+X) открываем документы (или рабочий стол кому как удобно) создаем папку и даем ей название: «HTML Блог» вставляем в нее наш архив и туда же его распаковываем, но желательно распаковать в templatemo_157_yellow_blog, такой вариант вам будет предложен.

Вот, что должно получиться:

После всего проделанного открываем эту папку — templatemo_157_yellow_blog и видим там файл index.html — открываем его с помощью браузера и что мы видим? Сайт  на английском языке — ничего страшного. Теперь самое интересное: заходим снова в нашу папку с сайтом и щелкаем на него правой кнопкой и для тех, кто последовал моему совету — установить NotePad++, находит во всплывающем окне строку: Edit with NotePad++ и нажимает на нее. А те кто совет не послушал, скачивайте NotePad и возвращайтесь к уроку, с этой программкой действительно будет намного проще. Перед нами открывается код этого сайта:

Ну и пойдемте по порядку:

  • Строка 1 — сообщает браузеру версию HTML
  • Строка 2 — это то с чего начинается каждый html документ, мы об этом теге уже говорили в предыдущих уроках, и тот вид, который данный тег имеет в текущем html документе — необязательный, ссылку из этого тега можно стереть.
  • Строка 3 — <head> — <голова> помните да? Это та область, в которой содержится информация для браузера, невидимая пользователю, которую мы сейчас и разберем поподробнее.
  • Строка 4 — meta http-equiv=»Content-Type» content=»text/html; charset=utf-8» — это мета тег, который указывает браузеру на кодировку документа, на это стоит обратить особое внимание, т.к. если кодировка будет не utf-8, а например Windows-1251, то некоторые пользователи, которые откроют ваш сайт увидят вместо текста на сайте различные знаки, в основном это знаки вопроса.
  • Строка 5 — это заголовок документа, который мы сейчас и изменим:

Все, что находится между тегами <title></title> стираем и пишем свое название: Мой разбор шаблона. Теперь в левом верхнем углу находим значок дискетку и нажимаем на нее. Разворачиваем браузер, обновляем страницу с этим сайтом и наблюдаем изменения:

  • Строка 6 — <meta name=»keywords»… — это ключевые слова, для чего они предназначены вы думаю догадались? Если нет то объясняю: вы указали в данном теге ключевое слово — «мой разбор шаблона» и теперь когда вы вводите в Яндексе поисковой запрос Мой разбор шаблона, ваш сайт отобразится в результатах поиска. Но подробнее об этой теме будет в других уроках, касающихся продвижения сайтов.
  • Строка 7 — мета описание, описывает тематику вашего сайта, опять же для поисковых систем и для того, чтобы отобразить пользователю это описание:

  • Строка 8 — этот тег привязывает к нашему документу HTML таблицу стилей — CSS, которая отвечает за оформление сайта. Об этом более подробно в уроках по CSS.
  • Строка 9 — 15 — подключает скрипт, но это мы пока не трогаем и не забиваем себе голову
  • Строка 16 — закрывает тег содержащего информацию для браузера
  • Строка 17 — наша визуальная часть, то бишь которую мы видим, которую мы и будем сейчас редактировать
  • Строка 18 — 24 — тег <div></div> — сам тег это своеобразный контейнер, который содержит какую либо текстовую или графическую информацию, а вот значение — id=… эта функция указывает на то, какое оформление будет принимать все содержимое в данном контейнере, т. е. опять речь о CSS. Как мы видим в данном примере это стиль текста названия сайта — Yellow blog и его описания, которое находится под ним. Давайте теперь изменим вот этот текст в этом блоке:

Меняем на:

Сохраняем, потом снова разворачиваем браузер и обновляем страницу и вот что должно получиться:

  • И так. Далее мы немного упрощаем нашу задачу. А именно: все Вы видите меню на нашем сайте:          Home Posts Template Gallery About Contact. Ваша задача: через NotePad++ найти каждый этот элемент и переименовать следующим образом: Главная Посты Шаблоны Галерея О Нас Контакты. Вот как должно будет получиться:

Следующее ваше действие:

Находим все тексты сайта и меняем их на русские. Находить их очень просто, даже если плохо с английским, то берем открываем сайт, находим слово или слова, например: by admin

Теперь, открываем NotePad++  в верхнем меню находим вкладку Поиск>Найти…>В поле вводим: by admin и нажимаем кнопку найти далее. Находим этот текст и меняем его на: Писал я. Вот как должно выглядеть в итоге:

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

Уважаемые друзья, гости, читатели, на этом предлагаю закончить третий урок и продвигаться дальше =)

 

Комментарии закрыты.