15.03.2013, 14:08 | #1 (permalink) |
Member
Регистрация: 01.03.2013
Сообщений: 533
Сказал(а) спасибо: 11
Поблагодарили 3 раз(а) в 2 сообщениях
Репутация: 801
|
Простые уроки по 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> сообщает, что здесь заголовок заканчивается. Что касается тега <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> |
15.03.2013, 14:08 | |
Helpmaster
Member
Регистрация: 08.03.2016
Сообщений: 0
|
Не стоит просто сидеть и ждать ответов, лучше изучить аналогичные темы Очень простые часы на микроконтроллере Простые часы на микроконтроллере ATtiny2313 Простые часы в стиле стимпанк Подскажите простые и интересные радиосхемы Простые часы на МК PIC16F84 |
15.03.2013, 14:29 | #2 (permalink) | |
support
Регистрация: 19.08.2007
Адрес: Зея
Сообщений: 15,797
Записей в дневнике: 71
Сказал(а) спасибо: 166
Поблагодарили 203 раз(а) в 86 сообщениях
Репутация: 75760
|
Обязательно до открывающего тега <html> вставьте строку, определяющую соответствие разметки страницы стандарту. Для большинства сайтов достаточно вставить следующий код:
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Это позволит избежать проблем при прохождении валидации страницы. Цитата:
В качестве первого можно использовать NeonHTML, в качестве второго - Notepad++. WISIWIG-редакторы - класс программного обеспечения, предназначенного для разработки веб-узлов. Интерфейс программы позволяет разрабатывать веб-документы различного уровня, используя как текстовый режим, так и визуальный. При этом все изменения, внесенные в разметку страницы, отображаются в режиме реального времени в окне просмотра документа. Проблема многих WISIWIG-редакторов в том, что выходные веб-документы содержат много излишней информации (программного мусора), так что страницу перед публикацией необходимо оптимизировать, удалив из нее излишний код. Для этого предусмотрен специальный инструмент. Редактор NeonHTML лишен этого недостатка, так как в файл передается только чистый код страницы без дополнительных тегов. Однако при вставке на страницу фрагмента текста из буфера обмена не всегда корректно распознается кодовая страница, что может вызвать проблему с корректным отображением страницы в браузере. Текстовый редактор Notepad++ лишен вышеописанного недостатка, однако в нем полностью отсутствует визуальный режим страницы, так что для отслеживания внешнего вида документа необходимо иметь открытыми одновременно окна редактора и веб-браузера, что несколько неудобно. |
|
15.03.2013, 14:56 | #3 (permalink) |
Member
Регистрация: 01.03.2013
Сообщений: 533
Сказал(а) спасибо: 11
Поблагодарили 3 раз(а) в 2 сообщениях
Репутация: 801
|
Добавляем ссылку и картинку на сайт.
Первое, что мы сделаем - это добавим HTML ссылку на нашу страницу. Для этого напишем в теге <body> такой код: Код:
<a target = "_self" href = "index.html" title = "Ссылка">Ссылка на эту страницу</a> Значение "_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"> Атрибут "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) |
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> Если вы опасаетесь, что ваша таблица стилей не будет поддерживать подобную конструкцию, то вместо нового абзаца можно использовать тег переноса строки <BR>, тогда код будет следующим: Код:
<a href="page.html target="_blank" alt="перейти на страницу новости"> <img href="new_page.jpg" width="260" height="180"><br> Краткое содержание страницы</a> |
15.03.2013, 18:18 | #5 (permalink) |
Member
Регистрация: 30.06.2011
Сообщений: 121
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 516
|
а как себя будет чувствовать таблица стилей, если как в последнем случае блочный элемент <p> будет вписан в строчный <a>?
|
Ads | |
Member
Регистрация: 31.10.2006
Сообщений: 40200
Записей в дневнике: 0
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 55070
|
15.03.2013, 18:51 | #6 (permalink) |
Member
Регистрация: 01.03.2013
Сообщений: 533
Сказал(а) спасибо: 11
Поблагодарили 3 раз(а) в 2 сообщениях
Репутация: 801
|
Как установить страницу 404
Страница 404 - это страница, которая открывается при ошибке 404. Ошибка 404 - это попытка открыть несуществующую страницу. То есть, когда Вы вводите неправильный адрес (или переходите по неработающей ссылке), то Вы как раз переходите на эту страницу. Безусловно, у самого браузера есть встроенная страница. Но, думаю, что Вам бы хотелось оформить эту страницу как-то по-другому, возможно, написать какой-нибудь свой текст и т.д. Первое, что необходимо сделать - это создать файл .htaccess. Обратите внимание, что имени у этого файла нет, а расширение "htaccess". Если Вы работаете в Unix, то проблем с созданием не возникнет. А вот если Вы работаете в Windows, то создать файл .htaccess можно таким образом (так делаю я, хотя, возможно, есть более простые способы): Открыть блокнот. Выбрать пункт меню "Сохранить как". Введите имя файла ".htaccess". Выберите тип файла "Все файлы". Сохраните. В результате, у Вас появится файл .htaccess. Скопируйте его в корень своего сайта. Теперь Вы можете его открыть (например, в том же блокноте) и написать там такую строку: Код:
ErrorDocument 404 /404.html Код:
<html> <head> </head> <body> <h1>Страница не существует!</h1> <p>Проверьте правильность ввода адреса</p> <p>С Уважением, <a href = ''>Мой сайт</a></p> </body> </html> |
16.03.2013, 03:49 | #7 (permalink) |
support
Регистрация: 19.08.2007
Адрес: Зея
Сообщений: 15,797
Записей в дневнике: 71
Сказал(а) спасибо: 166
Поблагодарили 203 раз(а) в 86 сообщениях
Репутация: 75760
|
Dr.Format_C
Нормально будет себя чувствовать, это параграф текста, а не блок div. Тем более, что в теме речь идет о чистом HTML Привыкайте к тому, что в любых правилах есть исключения |
17.03.2013, 14:26 | #8 (permalink) |
Member
Регистрация: 01.03.2013
Сообщений: 533
Сказал(а) спасибо: 11
Поблагодарили 3 раз(а) в 2 сообщениях
Репутация: 801
|
Наверняка, Вы часто встречали кнопку "Наверх". Иногда это кнопка, иногда ссылка, это не важно. Например, это кнопка есть вконтакте. И в этой статье я расскажу, как сделать кнопку "наверх".
Код:
<div id="top"></div> <!-- Много контента --> <a href="#top">Наверх</a> |
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) |
support
Регистрация: 19.08.2007
Адрес: Зея
Сообщений: 15,797
Записей в дневнике: 71
Сказал(а) спасибо: 166
Поблагодарили 203 раз(а) в 86 сообщениях
Репутация: 75760
|
Иван, ты прав, это элемент стиля тега. ID в данном случае используется в качестве закладки на странице, куда и происходит переход при клике по гиперссылке. Если не указано конкретного имени закладки, то происходит переход к началу страницы.
Подобным образом можно организовать гипертекстовые переходы внутри документа, к примеру, в MS Word. |
Ads | |
Member
Регистрация: 31.10.2006
Сообщений: 40200
Записей в дневнике: 0
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 55070
|
|
|