Простые уроки по HTML

GRYZ · 15.03.2013, 14:08

Выкладываем уроки по html для начинающих

Вот первый урок собственно начало начал

Чуть незабыл для написания кода нам потребуется Notepad++ он лутше блокнота.
Устанавливаем и запускаем редактор. Сразу сохраняем страницу под именем index.html. Теперь пишем (пожалуйста, напишите, а не скопируйте!) в окне редактора:

Код:

<html>
<head>
</head>
<body>
</body>
</html>

А теперь давайте обсудим, что мы здесь написали.

<html>, <head>, <body> - это открывающие теги. Иногда их ещё называют дескрипторы, но я привык называть их тегами, поэтому далее так и буду писать.

</html>, </head>, </body> - это закрывающие теги.

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

Одиночные теги - это теги, которые не требуют наличие закрывающего тега.

Теперь что касается назначения данных тегов.

Тег <html> означает начало HTML-документа.

Тег <head> означает начало заголовка HTML-документа. Сюда могут входить, например, заголовок страницы, различные мета-теги. Обо всём об этом погорим чуть ниже.

Тег </head> означает конец заголовка HTML-документа.

Тег <body> означает начало самого документа. То есть всё (текст, картинки, ссылки и т. д.), что Вы видите на страницах в Интернете - всё расположено в теге <body>.

Тег </body> означает конец содержимого документа.

Тег </html> означает конец HTML-страницы.

Теперь давайте немного добавим в нашу страницу кода, уж, больно она примитивная у нас пока. Внутри тега <head> добавьте такой код:

Код:

 <title>Наша страница</title>
<meta http-equiv="Content-type" content="text/html; charset=windows-1251">

Тег <title> определяет заголовок страницы, который будет отображён в заголовке окна браузера.

Тег </title> сообщает, что здесь заголовок заканчивается.

Что касается тега <meta>, то здесь сначала я должен сообщить об атрибутах тегов. У тегов могут быть различные атрибуты, определяющие, например, вид их содержимого. Атрибуты ставятся внутри открывающего тега и имеют следующий вид:

Название = "значение".

Тег <meta> у нас определяет тип содержимого документа. Атрибут http-equiv и его значение Content-type определяет, что сейчас будет описан тип документа. Атрибут content и его значение text/html; charset = windows-1251 сообщают браузеру, что данный документ является HTML-документом (text/html), и кодировка этого документа кириллица (windows-1251). Это был пример мета-тегов. Я думаю, что пока с ними хватит.

Теперь займёмся содержимым документа. Надеюсь, что Вы уже поняли, что раз содержимое страницы - значит, будем писать что-то внутри тега <body>. Давайте напишем следующий код внутри тега <body>:

Код:

 <h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>

Сохраните страницу и посмотрите на неё в браузере.

Также можно добавить немного атрибутов и в тег <body>. Давайте добавим атрибут text со значением green (зелёный). И атрибут bgcolor со значением yellow (жёлтый).

Таким образом, тег <body> выглядит так:

Код:

 <body text = "green" bgcolor = "yellow">
  <h1>Заголовок 1</h1>
  <h2>Заголовок 2</h2>
  <h3>Заголовок 3</h3>
  <h4>Заголовок 4</h4>
  <h5>Заголовок 5</h5>
  <h6>Заголовок 6</h6>
</body>
</html>

Сохраните страницу и посмотрите на неё в браузере. Как видите, фон страницы стал жёлтым, а текст стал зелёным./html

AlexZir · 15.03.2013, 14:29

Обязательно до открывающего тега <html> вставьте строку, определяющую соответствие разметки страницы стандарту. Для большинства сайтов достаточно вставить следующий код:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

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

Цитата:

Декларация DOCTYPE

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

Ваша визуальная разметка, выполненная средствами CSS по стандартам W3C, может потерпеть крах на экране, если DOCTYPE не будет записан.
Элемент DOCTYPE предназначен для указания соответствия кода документа одному из стандартов W3C. Браузер, в зависимости от стандарта, по-разному интерпретирует элементы на странице.
Элемент DOCTYPE — это, скорее даже не элемент, а описание (декларация), имеющее свой собственный синтаксис.
Декларацию DOCTYPE помещают перед элементом DOCTYPE, она начинается с восклицательного знака и записывается прописными буквами.
Варианты DOCTYPE для HTML 4.01 приводятся ниже.
Предусмотрено 3 стандарта языка HTML 4.01:

Strict (строгий)
Transitional (переходный)
Frameset (аналогичен Transitional, но с фреймами)

Вариант Strict

Код не содержит элементов и атрибутов, помеченных W3C как «устаревшие» или «не одобряемые» (например: CENTER, FONT, S, U, align, background, bgcolor, color, size).
Декларация записывается в виде:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"           "http://www.w3.org/TR/html4/strict.dtd">

Вариант Transitional

Код может содержать устаревшие теги, вариант введён в целях совместимости со старыми версиями HTML.
Декларация записывается в виде:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Вариант Frameset

Аналогичен Transitional, но содержит также элементы для создания наборов фреймов.
Декларация записывается в виде:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Какой вариант DOCTYPE выбрать?

Вариант Frameset отбрасываем сразу, так как фреймы — это рудимент прошлого века, и использовать их мы не собираемся.
В переходной период, когда браузеры не на 100% поддерживают стандарты, ничего другого не остаётся для практики, как выбрать переходной стандарт Transitional.

Для облегчения разработки веб-страниц используют WISIWIG-редакторы либо текстовые редакторы с подсветкой синтаксиса и модулем автозавершения тегов.
В качестве первого можно использовать NeonHTML, в качестве второго - Notepad++.

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

Проблема многих WISIWIG-редакторов в том, что выходные веб-документы содержат много излишней информации (программного мусора), так что страницу перед публикацией необходимо оптимизировать, удалив из нее излишний код. Для этого предусмотрен специальный инструмент. Редактор NeonHTML лишен этого недостатка, так как в файл передается только чистый код страницы без дополнительных тегов. Однако при вставке на страницу фрагмента текста из буфера обмена не всегда корректно распознается кодовая страница, что может вызвать проблему с корректным отображением страницы в браузере.

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

GRYZ · 15.03.2013, 14:56

Добавляем ссылку и картинку на сайт.

Первое, что мы сделаем - это добавим HTML ссылку на нашу страницу.

Для этого напишем в теге <body> такой код:

Код:

 <a target = "_self" href = "index.html" title = "Ссылка">Ссылка на эту страницу</a>

Атрибут "target" может принимать значения "_self", "_new", "_blank"
Значение "_self" означает, что страница откроется в этом же окне.

Значение "_new" означает, что страница откроется в новом окне (некоторые браузеры открывают не новое окно, а создают новую вкладку в браузере).

Значение "_blank" означает, что страница будет открыта в новой вкладке.

Я настоятельно рекомендую Вам испробовать все значения этого атрибута в различных браузерах, чтобы окончательно понять, что каждое из них означает.
Следующий атрибут "href" означает путь к странице. Так как нам пока ссылаться не на что, то приходится сослаться на ту же страницу. Что касается формы записи, то здесь бывают абсолютные и относительные пути.

Абсолютный путь задаёт полный путь к файлу, например, так: "http://mysite.ru/images/image1.gif". А относительный путь указывают путь относительно каталога, в котором находится текущий файл. Например, наш файл "index.html" лежит в корне сервера, а мы пишем: "href = 'images/image1.gif'". Это означает то же самое, что и если бы мы написали: "http://mysite.ru/images/image1.gif". Это, что касается абсолютных и относительных путей.

Надеюсь, что с атрибутом "href" всё стало понятно. Разумеется, ссылаться можно не только на HTML-страницы, но и на любые файлы, будь то картинки, будь то фильмы, будь то музыка, будь то архивы, будь то ещё всё, что угодно.

Последний атрибут - это "title". Здесь всё совсем просто. Этот атрибут задаёт текст, который будет виден при наведении мышки на ссылку.
Теперь добавим изображения, но прежде, чем это делать. Сразу после добавления HTML-ссылки ставим тег "</br>". Этот тег также является одиночным, и он означает переход на новую строку. Напишем в теге <body> такой код:

Код:

 <img src = "image1.gif" alt = "Картинка" width = "100" height = "100">

Тег <img> означает, что мы хотим добавить здесь изображение. Этот тег, как видно, является одиночным, то есть у него нет закрывающего тега. Атрибуты тега также очень и очень простые.

Атрибут "src" указывает путь к картинке. Опять же можно указывать, как абсолютный путь, так и относительный путь, в зависимости от ситуации.

Атрибут "alt" указывает текст, который описывает картинку. Этот же текст будет показываться в случае, если картинка по каким-либо причинам будет не найдена, либо у пользователя в браузере отключён показ картинок.
Атрибуты "width" и "height" указывают ширину и высоту картинки соответственно. Если их не указывать, то картинка будет иметь такой размер, какой имеет исходник.
Можете создать папку img в том же каталоге где лежит index.html и закидывать туда картинки. А в атрибуте "src" пишите значение "http://www.tehnari.ru/images/Имя файла картинки".
А пока код выглядит так:

Код:

 <html>
<head>
</head>
<body text = "green" bgcolor = "yellow" link = "green" vlink = "red" alink = "blue">
  <h1>Заголовок</h1>
  <a target = "_new" href = "index.html" title = "Ссылка">Ссылка на эту страницу</a>
  </br>
  <img src = "image1.gif" alt = "Картинка" width = "100" height = "100">
</body>
</html>

AlexZir · 15.03.2013, 16:21

При создании HTML-разметки допустимы и широко используются вложенные теги. Схема использования уровней вложенности:
<tag 1>info<tag 2>info<tag 3>info</tag 3>info</tag 2>info<tag 1>
В качестве элемента tag может быть использован, к примеру, любой тег форматирования. Порядок закрывающих тегов должен быть обратным порядку открывающих.

В качестве иллюстрации возможности вложенных тегов можно привести следующий пример

Код:

<b>
<u>
<i>
Пример текста, отформатированного стилем полужирный подчеркнутый курсив
</i>
</u>
</b>

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

Код:

<a href="page.html target="_blank" alt="перейти на страницу новости">
<img href="new_page.jpg" width="260" height="180">
<p>Краткое содержание страницы</a>

Данный листинг выводит на страницу рисунок и ниже нее абзац с текстом. При клике по картинке или по абзацу происходит переход на страницу page.html.

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

Код:

<a href="page.html target="_blank" alt="перейти на страницу новости">
<img href="new_page.jpg" width="260" height="180"><br>
Краткое содержание страницы</a>

Обратите внимание, что при закрытии тега старшего уровня внутренние теги закрываются автоматически.

Dr.Format_C · 15.03.2013, 18:18

Цитата:

Сообщение от AlexZir

<a href="page.html target="_blank" alt="перейти на страницу новости">
<img href="new_page.jpg" width="260" height="180">
<p>Краткое содержание страницы</a>

а как себя будет чувствовать таблица стилей, если как в последнем случае блочный элемент <p> будет вписан в строчный <a>?

GRYZ · 15.03.2013, 18:51

Как установить страницу 404

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

Первое, что необходимо сделать - это создать файл .htaccess. Обратите внимание, что имени у этого файла нет, а расширение "htaccess". Если Вы работаете в Unix, то проблем с созданием не возникнет. А вот если Вы работаете в Windows, то создать файл .htaccess можно таким образом (так делаю я, хотя, возможно, есть более простые способы):
Открыть блокнот.
Выбрать пункт меню "Сохранить как".
Введите имя файла ".htaccess".
Выберите тип файла "Все файлы".
Сохраните.

В результате, у Вас появится файл .htaccess. Скопируйте его в корень своего сайта. Теперь Вы можете его открыть (например, в том же блокноте) и написать там такую строку:

Код:

 ErrorDocument 404 /404.html

Теперь создайте в корне сайта страницу "404.html", в которой пишите любой HTML-код, например, такой:

Код:

 <html>
<head>
</head>
<body>
  <h1>Страница не существует!</h1>
  <p>Проверьте правильность ввода адреса</p>
  <p>С Уважением, <a href = ''>Мой сайт</a></p>
</body>
</html>

Таким образом, люди будут видеть не стандартную страницу в браузере, а ту страницу, которую создали Вы.

AlexZir · 16.03.2013, 03:49

Dr.Format_C
Нормально будет себя чувствовать, это параграф текста, а не блок div. Тем более, что в теме речь идет о чистом HTML

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

GRYZ · 17.03.2013, 14:26

Наверняка, Вы часто встречали кнопку "Наверх". Иногда это кнопка, иногда ссылка, это не важно. Например, это кнопка есть вконтакте. И в этой статье я расскажу, как сделать кнопку "наверх".

Код:

 <div id="top"></div>
<!-- Много контента -->
<a href="#top">Наверх</a>

Соответственно, при клике по ссылке "Наверх" мы попадём на элемент с id="top", то есть тот самый div. Если его расположить сразу после body, то это и будет самый верх страницы. Как видите, всё очень просто.

Ваня · 17.03.2013, 16:32

У меня на сайте такая штука работала, если просто вместо ссылки вставить "#". Может это как-то с CSS, не знаю...

AlexZir · 17.03.2013, 17:44

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

Подобным образом можно организовать гипертекстовые переходы внутри документа, к примеру, в MS Word.

15.03.2013, 14:08	#1 (permalink)
GRYZ Member Регистрация: 01.03.2013 Сообщений: 533 Сказал(а) спасибо: 11 Поблагодарили 3 раз(а) в 2 сообщениях Репутация: 801	Простые уроки по HTML Выкладываем уроки по html для начинающих Вот первый урок собственно начало начал Чуть незабыл для написания кода нам потребуется Notepad++ он лутше блокнота. Устанавливаем и запускаем редактор. Сразу сохраняем страницу под именем index.html. Теперь пишем (пожалуйста, напишите, а не скопируйте!) в окне редактора: Код: <html> <head> </head> <body> </body> </html> А теперь давайте обсудим, что мы здесь написали. <html>, <head>, <body> - это открывающие теги. Иногда их ещё называют дескрипторы, но я привык называть их тегами, поэтому далее так и буду писать. </html>, </head>, </body> - это закрывающие теги. Теги бывают парные и одиночные. Парные теги - это теги, которые нуждаются в закрывающем, то есть все три тега, которые мы использовали являются парными, так как они открываются и потом закрываются. Одиночные теги - это теги, которые не требуют наличие закрывающего тега. Теперь что касается назначения данных тегов. Тег <html> означает начало HTML-документа. Тег <head> означает начало заголовка HTML-документа. Сюда могут входить, например, заголовок страницы, различные мета-теги. Обо всём об этом погорим чуть ниже. Тег </head> означает конец заголовка HTML-документа. Тег <body> означает начало самого документа. То есть всё (текст, картинки, ссылки и т. д.), что Вы видите на страницах в Интернете - всё расположено в теге <body>. Тег </body> означает конец содержимого документа. Тег </html> означает конец HTML-страницы. Теперь давайте немного добавим в нашу страницу кода, уж, больно она примитивная у нас пока. Внутри тега <head> добавьте такой код: Код: <title>Наша страница</title> <meta http-equiv="Content-type" content="text/html; charset=windows-1251"> Тег <title> определяет заголовок страницы, который будет отображён в заголовке окна браузера. Тег </title> сообщает, что здесь заголовок заканчивается. Что касается тега <meta>, то здесь сначала я должен сообщить об атрибутах тегов. У тегов могут быть различные атрибуты, определяющие, например, вид их содержимого. Атрибуты ставятся внутри открывающего тега и имеют следующий вид: Название = "значение". Тег <meta> у нас определяет тип содержимого документа. Атрибут http-equiv и его значение Content-type определяет, что сейчас будет описан тип документа. Атрибут content и его значение text/html; charset = windows-1251 сообщают браузеру, что данный документ является HTML-документом (text/html), и кодировка этого документа кириллица (windows-1251). Это был пример мета-тегов. Я думаю, что пока с ними хватит. Теперь займёмся содержимым документа. Надеюсь, что Вы уже поняли, что раз содержимое страницы - значит, будем писать что-то внутри тега <body>. Давайте напишем следующий код внутри тега <body>: Код: <h1>Заголовок 1</h1> <h2>Заголовок 2</h2> <h3>Заголовок 3</h3> <h4>Заголовок 4</h4> <h5>Заголовок 5</h5> <h6>Заголовок 6</h6> Сохраните страницу и посмотрите на неё в браузере. Также можно добавить немного атрибутов и в тег <body>. Давайте добавим атрибут text со значением green (зелёный). И атрибут bgcolor со значением yellow (жёлтый). Таким образом, тег <body> выглядит так: Код: <body text = "green" bgcolor = "yellow"> <h1>Заголовок 1</h1> <h2>Заголовок 2</h2> <h3>Заголовок 3</h3> <h4>Заголовок 4</h4> <h5>Заголовок 5</h5> <h6>Заголовок 6</h6> </body> </html> Сохраните страницу и посмотрите на неё в браузере. Как видите, фон страницы стал жёлтым, а текст стал зелёным./html

15.03.2013, 14:56	#3 (permalink)
GRYZ Member Регистрация: 01.03.2013 Сообщений: 533 Сказал(а) спасибо: 11 Поблагодарили 3 раз(а) в 2 сообщениях Репутация: 801	Добавляем ссылку и картинку на сайт. Первое, что мы сделаем - это добавим HTML ссылку на нашу страницу. Для этого напишем в теге <body> такой код: Код: <a target = "_self" href = "index.html" title = "Ссылка">Ссылка на эту страницу</a> Атрибут "target" может принимать значения "_self", "_new", "_blank" Значение "_self" означает, что страница откроется в этом же окне. Значение "_new" означает, что страница откроется в новом окне (некоторые браузеры открывают не новое окно, а создают новую вкладку в браузере). Значение "_blank" означает, что страница будет открыта в новой вкладке. Я настоятельно рекомендую Вам испробовать все значения этого атрибута в различных браузерах, чтобы окончательно понять, что каждое из них означает. Следующий атрибут "href" означает путь к странице. Так как нам пока ссылаться не на что, то приходится сослаться на ту же страницу. Что касается формы записи, то здесь бывают абсолютные и относительные пути. Абсолютный путь задаёт полный путь к файлу, например, так: "http://mysite.ru/images/image1.gif". А относительный путь указывают путь относительно каталога, в котором находится текущий файл. Например, наш файл "index.html" лежит в корне сервера, а мы пишем: "href = 'images/image1.gif'". Это означает то же самое, что и если бы мы написали: "http://mysite.ru/images/image1.gif". Это, что касается абсолютных и относительных путей. Надеюсь, что с атрибутом "href" всё стало понятно. Разумеется, ссылаться можно не только на HTML-страницы, но и на любые файлы, будь то картинки, будь то фильмы, будь то музыка, будь то архивы, будь то ещё всё, что угодно. Последний атрибут - это "title". Здесь всё совсем просто. Этот атрибут задаёт текст, который будет виден при наведении мышки на ссылку. Теперь добавим изображения, но прежде, чем это делать. Сразу после добавления HTML-ссылки ставим тег "</br>". Этот тег также является одиночным, и он означает переход на новую строку. Напишем в теге <body> такой код: Код: <img src = "image1.gif" alt = "Картинка" width = "100" height = "100"> Тег <img> означает, что мы хотим добавить здесь изображение. Этот тег, как видно, является одиночным, то есть у него нет закрывающего тега. Атрибуты тега также очень и очень простые. Атрибут "src" указывает путь к картинке. Опять же можно указывать, как абсолютный путь, так и относительный путь, в зависимости от ситуации. Атрибут "alt" указывает текст, который описывает картинку. Этот же текст будет показываться в случае, если картинка по каким-либо причинам будет не найдена, либо у пользователя в браузере отключён показ картинок. Атрибуты "width" и "height" указывают ширину и высоту картинки соответственно. Если их не указывать, то картинка будет иметь такой размер, какой имеет исходник. Можете создать папку img в том же каталоге где лежит index.html и закидывать туда картинки. А в атрибуте "src" пишите значение "http://www.tehnari.ru/images/Имя файла картинки". А пока код выглядит так: Код: <html> <head> </head> <body text = "green" bgcolor = "yellow" link = "green" vlink = "red" alink = "blue"> <h1>Заголовок</h1> <a target = "_new" href = "index.html" title = "Ссылка">Ссылка на эту страницу</a> </br> <img src = "image1.gif" alt = "Картинка" width = "100" height = "100"> </body> </html>

15.03.2013, 16:21	#4 (permalink)
AlexZir support Регистрация: 19.08.2007 Адрес: Зея Сообщений: 15,797 Записей в дневнике: 71 Сказал(а) спасибо: 166 Поблагодарили 203 раз(а) в 86 сообщениях Репутация: 75760	При создании HTML-разметки допустимы и широко используются вложенные теги. Схема использования уровней вложенности: <tag 1>info<tag 2>info<tag 3>info</tag 3>info</tag 2>info<tag 1> В качестве элемента tag может быть использован, к примеру, любой тег форматирования. Порядок закрывающих тегов должен быть обратным порядку открывающих. В качестве иллюстрации возможности вложенных тегов можно привести следующий пример Код: <b> <u> <i> Пример текста, отформатированного стилем полужирный подчеркнутый курсив </i> </u> </b> Также вложенными тегами пользуются, чтобы реализовать картинку с гипертекстом Код: <a href="page.html target="_blank" alt="перейти на страницу новости"> <img href="new_page.jpg" width="260" height="180"> <p>Краткое содержание страницы</a> Данный листинг выводит на страницу рисунок и ниже нее абзац с текстом. При клике по картинке или по абзацу происходит переход на страницу page.html. Если вы опасаетесь, что ваша таблица стилей не будет поддерживать подобную конструкцию, то вместо нового абзаца можно использовать тег переноса строки <BR>, тогда код будет следующим: Код: <a href="page.html target="_blank" alt="перейти на страницу новости"> <img href="new_page.jpg" width="260" height="180"><br> Краткое содержание страницы</a> Обратите внимание, что при закрытии тега старшего уровня внутренние теги закрываются автоматически.

15.03.2013, 18:51	#6 (permalink)
GRYZ Member Регистрация: 01.03.2013 Сообщений: 533 Сказал(а) спасибо: 11 Поблагодарили 3 раз(а) в 2 сообщениях Репутация: 801	Как установить страницу 404 Страница 404 - это страница, которая открывается при ошибке 404. Ошибка 404 - это попытка открыть несуществующую страницу. То есть, когда Вы вводите неправильный адрес (или переходите по неработающей ссылке), то Вы как раз переходите на эту страницу. Безусловно, у самого браузера есть встроенная страница. Но, думаю, что Вам бы хотелось оформить эту страницу как-то по-другому, возможно, написать какой-нибудь свой текст и т.д. Первое, что необходимо сделать - это создать файл .htaccess. Обратите внимание, что имени у этого файла нет, а расширение "htaccess". Если Вы работаете в Unix, то проблем с созданием не возникнет. А вот если Вы работаете в Windows, то создать файл .htaccess можно таким образом (так делаю я, хотя, возможно, есть более простые способы): Открыть блокнот. Выбрать пункт меню "Сохранить как". Введите имя файла ".htaccess". Выберите тип файла "Все файлы". Сохраните. В результате, у Вас появится файл .htaccess. Скопируйте его в корень своего сайта. Теперь Вы можете его открыть (например, в том же блокноте) и написать там такую строку: Код: ErrorDocument 404 /404.html Теперь создайте в корне сайта страницу "404.html", в которой пишите любой HTML-код, например, такой: Код: <html> <head> </head> <body> <h1>Страница не существует!</h1> <p>Проверьте правильность ввода адреса</p> <p>С Уважением, <a href = ''>Мой сайт</a></p> </body> </html> Таким образом, люди будут видеть не стандартную страницу в браузере, а ту страницу, которую создали Вы.

17.03.2013, 14:26	#8 (permalink)
GRYZ Member Регистрация: 01.03.2013 Сообщений: 533 Сказал(а) спасибо: 11 Поблагодарили 3 раз(а) в 2 сообщениях Репутация: 801	Наверняка, Вы часто встречали кнопку "Наверх". Иногда это кнопка, иногда ссылка, это не важно. Например, это кнопка есть вконтакте. И в этой статье я расскажу, как сделать кнопку "наверх". Код: <div id="top"></div> <!-- Много контента --> <a href="#top">Наверх</a> Соответственно, при клике по ссылке "Наверх" мы попадём на элемент с id="top", то есть тот самый div. Если его расположить сразу после body, то это и будет самый верх страницы. Как видите, всё очень просто.

Ads
Яндекс Member Регистрация: 31.10.2006 Сообщений: 40200 Записей в дневнике: 0 Сказал(а) спасибо: 0 Поблагодарили 0 раз(а) в 0 сообщениях Репутация: 55070

16.03.2013, 03:49	#7 (permalink)
AlexZir support Регистрация: 19.08.2007 Адрес: Зея Сообщений: 15,797 Записей в дневнике: 71 Сказал(а) спасибо: 166 Поблагодарили 203 раз(а) в 86 сообщениях Репутация: 75760	Dr.Format_C Нормально будет себя чувствовать, это параграф текста, а не блок div. Тем более, что в теме речь идет о чистом HTML Привыкайте к тому, что в любых правилах есть исключения

17.03.2013, 16:32	#9 (permalink)
Ваня Почётный Шарлотан Регистрация: 27.08.2010 Адрес: Культурная столица России Сообщений: 9,152 Записей в дневнике: 45 Сказал(а) спасибо: 612 Поблагодарили 751 раз(а) в 114 сообщениях Репутация: 105004	У меня на сайте такая штука работала, если просто вместо ссылки вставить "#". Может это как-то с CSS, не знаю... __________________ Хотел как лучше, а получилось идеально!

17.03.2013, 17:44	#10 (permalink)
AlexZir support Регистрация: 19.08.2007 Адрес: Зея Сообщений: 15,797 Записей в дневнике: 71 Сказал(а) спасибо: 166 Поблагодарили 203 раз(а) в 86 сообщениях Репутация: 75760	Иван, ты прав, это элемент стиля тега. ID в данном случае используется в качестве закладки на странице, куда и происходит переход при клике по гиперссылке. Если не указано конкретного имени закладки, то происходит переход к началу страницы. Подобным образом можно организовать гипертекстовые переходы внутри документа, к примеру, в MS Word.

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид