Технический форум
Вернуться   Технический форум > Программирование > Форум программистов > Изготовление сайтов


Ответ
 
Опции темы Опции просмотра
Старый 15.03.2013, 14:08   #1 (permalink)
GRYZ
Member
 
Аватар для GRYZ
 
Регистрация: 01.03.2013
Сообщений: 543
Сказал(а) спасибо: 11
Поблагодарили 3 раз(а) в 2 сообщениях
Репутация: 801
Exclamation Простые уроки по 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
GRYZ вне форума   Ответить с цитированием

Старый 15.03.2013, 14:08
Helpmaster
Member
 
Аватар для Helpmaster
 
Регистрация: 08.03.2016
Сообщений: 0

Не стоит просто сидеть и ждать ответов, лучше изучить аналогичные темы

Очень простые часы на микроконтроллере
Простые часы на микроконтроллере ATtiny2313
Простые часы в стиле стимпанк
Подскажите простые и интересные радиосхемы
Простые часы на МК PIC16F84

Старый 15.03.2013, 14:29   #2 (permalink)
AlexZir
support
 
Аватар для AlexZir
 
Регистрация: 19.08.2007
Адрес: Зея
Сообщений: 14,967
Записей в дневнике: 57
Сказал(а) спасибо: 135
Поблагодарили 164 раз(а) в 69 сообщениях
Репутация: 67284
По умолчанию

Обязательно до открывающего тега <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++ лишен вышеописанного недостатка, однако в нем полностью отсутствует визуальный режим страницы, так что для отслеживания внешнего вида документа необходимо иметь открытыми одновременно окна редактора и веб-браузера, что несколько неудобно.
AlexZir вне форума   Ответить с цитированием
Старый 15.03.2013, 14:56   #3 (permalink)
GRYZ
Member
 
Аватар для GRYZ
 
Регистрация: 01.03.2013
Сообщений: 543
Сказал(а) спасибо: 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>
GRYZ вне форума   Ответить с цитированием
Старый 15.03.2013, 16:21   #4 (permalink)
AlexZir
support
 
Аватар для AlexZir
 
Регистрация: 19.08.2007
Адрес: Зея
Сообщений: 14,967
Записей в дневнике: 57
Сказал(а) спасибо: 135
Поблагодарили 164 раз(а) в 69 сообщениях
Репутация: 67284
По умолчанию

При создании 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>
Обратите внимание, что при закрытии тега старшего уровня внутренние теги закрываются автоматически.
AlexZir вне форума   Ответить с цитированием
Старый 15.03.2013, 18:18   #5 (permalink)
Dr.Format_C
Member
 
Аватар для Dr.Format_C
 
Регистрация: 30.06.2011
Сообщений: 121
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 516
По умолчанию

Цитата:
Сообщение от AlexZir Посмотреть сообщение

<a href="page.html target="_blank" alt="перейти на страницу новости">
<img href="new_page.jpg" width="260" height="180">
<p>Краткое содержание страницы</a>
а как себя будет чувствовать таблица стилей, если как в последнем случае блочный элемент <p> будет вписан в строчный <a>?
Dr.Format_C вне форума   Ответить с цитированием
Ads

Яндекс

Member
 
Регистрация: 31.10.2006
Сообщений: 40200
Записей в дневнике: 0
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 55070
Старый 15.03.2013, 18:51   #6 (permalink)
GRYZ
Member
 
Аватар для GRYZ
 
Регистрация: 01.03.2013
Сообщений: 543
Сказал(а) спасибо: 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>
Таким образом, люди будут видеть не стандартную страницу в браузере, а ту страницу, которую создали Вы.
GRYZ вне форума   Ответить с цитированием
Старый 16.03.2013, 03:49   #7 (permalink)
AlexZir
support
 
Аватар для AlexZir
 
Регистрация: 19.08.2007
Адрес: Зея
Сообщений: 14,967
Записей в дневнике: 57
Сказал(а) спасибо: 135
Поблагодарили 164 раз(а) в 69 сообщениях
Репутация: 67284
По умолчанию

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

Привыкайте к тому, что в любых правилах есть исключения
AlexZir вне форума   Ответить с цитированием
Старый 17.03.2013, 14:26   #8 (permalink)
GRYZ
Member
 
Аватар для GRYZ
 
Регистрация: 01.03.2013
Сообщений: 543
Сказал(а) спасибо: 11
Поблагодарили 3 раз(а) в 2 сообщениях
Репутация: 801
По умолчанию

Наверняка, Вы часто встречали кнопку "Наверх". Иногда это кнопка, иногда ссылка, это не важно. Например, это кнопка есть вконтакте. И в этой статье я расскажу, как сделать кнопку "наверх".
Код:
 <div id="top"></div>
<!-- Много контента -->
<a href="#top">Наверх</a>
Соответственно, при клике по ссылке "Наверх" мы попадём на элемент с id="top", то есть тот самый div. Если его расположить сразу после body, то это и будет самый верх страницы. Как видите, всё очень просто.
GRYZ вне форума   Ответить с цитированием
Старый 17.03.2013, 16:32   #9 (permalink)
Ваня
Почётный Шарлотан
 
Аватар для Ваня
 
Регистрация: 27.08.2010
Адрес: Культурная столица России
Сообщений: 9,152
Записей в дневнике: 45
Сказал(а) спасибо: 611
Поблагодарили 751 раз(а) в 114 сообщениях
Репутация: 104730
По умолчанию

У меня на сайте такая штука работала, если просто вместо ссылки вставить "#". Может это как-то с CSS, не знаю...
__________________
Хотел как лучше, а получилось идеально!
Ваня вне форума   Ответить с цитированием
Старый 17.03.2013, 17:44   #10 (permalink)
AlexZir
support
 
Аватар для AlexZir
 
Регистрация: 19.08.2007
Адрес: Зея
Сообщений: 14,967
Записей в дневнике: 57
Сказал(а) спасибо: 135
Поблагодарили 164 раз(а) в 69 сообщениях
Репутация: 67284
По умолчанию

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

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

Яндекс

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

Опции темы
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Выкл.
HTML код Выкл.
Trackbacks are Вкл.
Pingbacks are Вкл.
Refbacks are Выкл.




Часовой пояс GMT +4, время: 02:33.

Powered by vBulletin® Version 6.2.5.
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.