Многие думают что HTML - это один из языков программирования, но это не так. HTML никак не связан с программированием, он не сложнее чем BB-коды форума, и Вы сейчас в этом убедитесь...
Нажмите подробнее, что бы прочитать весь урок.
Давайте сначала разберемся, что означает HTML?
HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML.
Другими словами, это обычное оформление текста и ссылок (цвет, размер, шрифт...)
Шаг 1. Как создать HTML страницу?
Создайте на Рабочем столе текстовый документ и измените его расширение, вместо txt напишите htm.
Да, именно простое переименование обычного текстового документа, думаю тут нету ничего сложного.
Откройте только что созданный htm - файл при помощи блокнота, следующий код который мы будем писать, называется тегами.
Все что оформляются в <> - Браузер будет воспринимать как тег. Теги бывают открытые, к примеру <br> и закрытые <b> текст </b>. Закрывающиеся теги еще называются "контейнером", поскольку стиль текста изменяется только в границах этого тега.
Итак, первым делом надо указать, что мы будем работать с HTML, напишите в нашем блокноте:
<html>
</html>
</html>
Этим действием мы указали браузеру, что следующий код, который заключается между тегами <html> и </html> интерпретировался как веб - документ. Данный тег является закрывающимся, поэтому мы дописали </html>.
Далее пишем:
<html>
<head></head>
<body>
</body>
</html>
<head></head>
<body>
</body>
</html>
<head> - является тегом заголовка, а <body> тела соответственно, вся информация между тегами <body></body> будет выводится в окне браузера. Оба тега являются закрывающимися.
Если использовать теги <title> </title> между тегами <head> </head>, можно задать заголовок документа, который будет отображаться в левом верхнем углу браузера.
<html>
<head><title>Заголовок страницы</title> </head>
<body>
</body>
</html>
<head><title>Заголовок страницы</title> </head>
<body>
</body>
</html>
Вот этими довольно простыми действиями мы создали веб-страницу.
В следующем шаге мы рассмотрим, как формировать текст в середине контейнера
<body> </body>
Шаг 2. Оформление текста
Весь следующий код будем писать только в контейнере<body> </body>.
- Для оформления текста используются следующие теги:
<br> - начало новой строки. Это не закрывающийся тег.
Пример:
Строка1<br>
Строка2<br><br>
Строка 4
Строка2<br><br>
Строка 4
Результат:
Строка1
Строка2
Строка 4
<b> текст </b> - жирный текст
<i> текст <i> - наклонный текст
<u>текст </u> - подчеркнутый текст
- Цвет, размер и стиль шрифта задается следующими тегом с параметрами:
Параметр - указывается непосредственно в самом теге, он служит для дополнительного форматирования текста в середине контейнера. Параметры можно комбинировать, что позволяет сократить код. У некоторых тегов есть параметры, у некоторых их нету.
<font> текст </font>
Параметры <font>:
color - цвет текста
face - стиль шрифта
size - размер текста
Пример:
<font color="red"> текст < /font>
Результат: текст
Цвета можно задавать названиями: red, blue, green, yellow, black, gray, brown, white
Или в шеснадцатиричном значении: к примеру - #FF0000,#00FF00, #0000FF, #FFFF00, #FFFFFF, #442200, #000000
Больше цветом можете посмотреть ТУТ
Или в шеснадцатиричном значении: к примеру - #FF0000,#00FF00, #0000FF, #FFFF00, #FFFFFF, #442200, #000000
Больше цветом можете посмотреть ТУТ
Стиль шрифта задается так:
Стили:
- Times
- Times New Roman
- Arial
- Helvetica
- Courier
- Verdana
- Tahoma
<font face="Verdana"> текст < /font>
Результат: текст
Так же можно комбинировать эти параметры:
<font face="Helvetica" color="#FF3399" size="4" > текст < /font>
Результат: Текст
- Выравнивание:
Для выравнивания текста, будем использовать блок <div> </div>.
Параметры:
align (left, center, right)
Пример:
<div align="center">Текст</div>
Результат:
Текст
Применим теперь это все на практике:
<html>
<head><title>Заголовок страницы</title> </head>
<body>
<div align="center"><font face="Helvetica" color="#FF3399" size="4" > Моя первая веб-страница</font></div><br>
<b>Привет</b> <i>Мир!</i>
</body>
</html>
<head><title>Заголовок страницы</title> </head>
<body>
<div align="center"><font face="Helvetica" color="#FF3399" size="4" > Моя первая веб-страница</font></div><br>
<b>Привет</b> <i>Мир!</i>
</body>
</html>
Результат:
Моя первая веб-страница
Привет Мир!
Шаг 3. Параметры BODY
У тега <body> есть так же свои параметры, при использовании которых, стиль применяется ко всему, что находиться в контейнере <body> </body> , т.е. ко всему документуПараметры:
bgcolor - задает цвет фона всего документа. Цвета указываются именами или в шестнадцатеричном формате.
background - в качестве фона можно установить картинку. Пути указывать относительные,
Пример: <body background="test.jpg">, В качестве фона будем использовать картинку test.jpg, которая лежит в той же папке, где и наш htm файл.
text - задает цвет текста. Цвета указываются так же именами или в шестнадцатеричном формате.
<html>
<head><title>Заголовок страницы</title> </head>
<body bgcolor="black" text="white" >
<div align="center"><font face="Helvetica" color="#FF3399" size="4" > Моя первая веб-страница</font></div><br>
<b>Привет</b> <i>Мир!</i>
</body>
</html>
<head><title>Заголовок страницы</title> </head>
<body bgcolor="black" text="white" >
<div align="center"><font face="Helvetica" color="#FF3399" size="4" > Моя первая веб-страница</font></div><br>
<b>Привет</b> <i>Мир!</i>
</body>
</html>
Результат:
Моя первая веб-страница
Привет Мир!
Шаг 4. Гипер ссылки
Ну и напоследок, расскажу про интересную вещь, как гиперссылки (ссылки), или как в народе говорят "линки".Они необходимы, что бы делать переходы с одной страницы на другую.
Выглядит это так: <a href="путь к htm странице"> Название ссылки </a> .
Вот несколько способов применения
<a href="test.htm">Открыть test.htm</a> Можно совершать переход между страницами. Для этого, страница test.htm должна лежать в папке с основным документом.
<a href="http://google.ru">Открыть Google</a> Можно использовать страницы из интернет.
<a href="test.jpg">Открыть рисунок test.jpg</a> Откроет рисунок в новом окне.
<a href="http://google.ru">Открыть Google</a> Можно использовать страницы из интернет.
<a href="test.jpg">Открыть рисунок test.jpg</a> Откроет рисунок в новом окне.
Посмотрим, как это будет выглядеть на практике:
<html>
<head><title>Заголовок страницы</title> </head>
<body bgcolor="black" text="white" >
<div align="center"><font face="Helvetica" color="#FF3399" size="4" > Моя первая веб-страница</font></div><br>
<b>Привет</b> <i>Мир!</i><br>
Дополнительная информация о HTML <a href="http://www.google.ru/search?hl=ru&source=hp&q=html">ТУТ</a>
</body>
</html>
<head><title>Заголовок страницы</title> </head>
<body bgcolor="black" text="white" >
<div align="center"><font face="Helvetica" color="#FF3399" size="4" > Моя первая веб-страница</font></div><br>
<b>Привет</b> <i>Мир!</i><br>
Дополнительная информация о HTML <a href="http://www.google.ru/search?hl=ru&source=hp&q=html">ТУТ</a>
</body>
</html>
Привет Masta!
ОтветитьУдалитьВсе это конешно хорошо, но я тут увлекся этим делом и заметил, что контра обрезает высокие странички... Всмыслк показывает только верхнюю часть а все что ниже не хочет... В общем я расстроен :(
Вот буквально на днях выложу MastaMOTD's 2.5.0, там можно будет вставлять что угодно
ОтветитьУдалитьОтлично! Мне уже не терпится скачать.
ОтветитьУдалитьКстати! Ты свои моды компилишь на amxmodx 1.8.1 последней ревизии?
Спрашиваю потаму, что у меня 1.8.1 и один из модулей Uaio_r2_by_mastaman в управлении плагинами просто напросто не отображается, т.е. цифра порядковая стоит, а имени плагина нет...
Я еще вот думаю может по-этому и всевидящий глаз не работает?
1.8.1 - 300 Версия компилятора.
ОтветитьУдалитьНе в этом дело, AMXMOD поддерживает так же старые плагины которые были написаны под AMX даже.
Даже если ставить оригинальную версию, так же функции некоторые не работают...
Masta! У меня еще такой вопрос или даже просьба... А может ты бы еще сделал возможность подмены показа самого первого MOTD при подключении к серверу (который хранится в файле motd.txt в папке cstrike)?
ОтветитьУдалитьА то там только маленькую страничку можно сделать, а мне хотелось бы в этом окошке дать сразу много инфы для народа.
Или может ты знаешь способ заставить контру показывать большую страничку в этом MOTD?
Удали все из motd.txt, и вставь следующий код:
ОтветитьУдалить<body style="padding:0px; margin:0px; background:black"><iframe src="Страница из интернет" width="100%^" height="800px" frameborder="0" scrolling="no" align="center"> </body>
В src= указываешь URL страницы,
В height= указываешь высоту своего сайта. Это сделает корректную прокрутку страницы
А у меня сервер стоит в локалке!
ОтветитьУдалитьКак думаещь в моем случае реально указать путь к *.htm?
Да, не вопрос.
ОтветитьУдалитьЗакинь нужный файл в директорию cstrike.
и в src= укажи так:
src="имяфайла.htm"
и все)
Во блин прикол!
ОтветитьУдалитьЯ так и сделал, а у меня не хочет работать.
Из-за чего нашел, но передо мной встал выбор!
Masta Спаси меня!
Вобщем если в реестре: HKEY_CURRENT_USER\Software\Valve\Steam\Language стоит russian то не работает, а если english то все работает... Но если стоит руский то у меня в конре худ и чат сообщения отображаются очень красиво, а если инглишь то как-то кривовато хотя тоже вроде норм но все таки гораздо хуже чем с русским.
Ну так закинь htm файл в папку cstrike_russian
ОтветитьУдалитьВот блин! Точно работает! СПАСИБО БОЛЬШОЕ! Ты гений!
ОтветитьУдалитьЗдраствуйте. Подскажите пожалуйста такую вещь. Скачал ваш плагин mastamotds, там когда исправляю информацию сохраняю в utf-8, в браузе открываеться четко, а в контре ироглифы. В чем может быть проблема? Поясните пожалуйста. Заранее спасибо.
ОтветитьУдалитьСохраняйте в кодировке windows-1251
ОтветитьУдалитьСпасибо огромное!!!
ОтветитьУдалитьДобрый день. Нужена профессиональная помощь. Я наоснове блога сделал себе многостаничный сайт http://videomasterplus.blogspot.com. Все хорошо кроме одного. Хочу чтобы ссылка шапки возвращала читателя к главной странице. Что нужно поправить в коде чтобы это сделать? Спасибо заранее. Ответ можно писать на andrey.maklakov@gmail.com
ОтветитьУдалитьВообще то это блог посвященный Counter-Strike 1.6, а не веб-дизайну, ну так уж и быть помогу))
ОтветитьУдалить1) Необходимо зайти в админку
2) Далее выбрать Макет --- Изменить HTML
3) Найти в этой куче кода что то на подобии: <div id='header-wrapper'>
4) Ищем где закрывается этот тег div
5) <div id='header-wrapper'>
...
...
...
...
</div>
Сделать в качестве ссылки на свой блог, этот div
примерно так:
<a href="адре сайта" border="0">
<div id='header-wrapper'>
...
...
...
...
</div>
</a>
6)Нажать на кнопку "Сохранить шаблон", обновить страницу с блогом, и проверить результат
Привет MastaMan! я вот сделал HTML страницы, как мне теперь сделать так что бы по определенной команде они показывались?
ОтветитьУдалитьИспользуй MastaMotd's
Удалить