Многие кидаются создавать сайты, даже не зная, что такое HTML, просто загружают инфу по шаблонным сайтам!
Что же такое HTML? Это язык разметки гипертекстовых документов. С помощью него вы сможете построить свой собственный сайт, сделав его оригинальным и не похожим на миллионы шаблонных страничек. HTML достаточно прост и выучить его может практически каждый. А я постараюсь вам помочь в этом. Объяснять буду как для новичков, которые только сегодня услышали страшное слово ‘HTML’ : )
Начнём с самого простого, с основ.
Для начала откройте Блокнот (Пуск - Все программы – Стандартные - Блокнот).
Каждая веб-страничка имеет основные тэги (метки):
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
Теперь создадим нашу первую страничку:
<html>
<head>
<title>Моя первая страничка</title>
</head>
<body>
Рада вас видеть! : )
</body>
</html>
В основном, тэги двойные, то есть открывающие : <html>, <body>, <title> и закрывающие: </html>, </body>, </title>. Не забывайте об этом. Но есть такие тэги, которые не требуют закрывающего тэга, например тэг <br>, с помощью которого можно перенести текст (или картинку) на другую строку. Вы можете писать тэги и большими буквами, например <HTML>, <BODY>, но в таком случае закрывающие тэги также пишите большими буквами: </HTML>, </BODY>
Итак, теперь сохраним нашу страничку. Для этого выбираем Файл – Сохранить как…, пишем имя нашей будущей странички по-английски или цифрами, ставим точку и html. После жмём ‘Сохранить’
Например: example.html
Посмотрите что у вас получилось. Многие вместо текста могут увидеть непонятные закорючки. Чтобы вам не меня каждый раз кодировку, поставим загадочную строчку, которая определит нам кодировку и текст будет отображаться по-русски:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
Это мета-тэг, потавьте его после открывающего тэга <head>. Подробно о мета-тэгах поговорим позже.
Итак, у нас всё прекрасно отображается. Теперь можно поменять цвет текста и цвет самой странички. Для этого в тэг <body> поставим соответствующие определения.
bgcolor="#цвет" – определяет цветовой фон всей страницы
text="#цвет" – определяет цвет текста
Цвет в HTML пишется шестизначными буквами и цифрами. На многих сайтах есть таблицы цветов, так же как и в различных графических программках. Приведу пару примеров цветов:
000000 – чёрный
FFFFFF – белый
FF0000 – красный
00FF00- зелёный
Писать цвет можно как большими, так и маленькими буквами.
Итак, я сделаю фон странички чёрным, а цвет текста красным:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Моя первая страничка</title>
</head>
<body bgcolor="#000000" text="#ff0000">
Рада вас видеть! : )
</body>
</html>
Если не вводить в тэг <body> дополнительные тэги, то страничка автоматически будет белого цвета, а текст чёрного.
Мы можем выделить любое слово (или несколько) каким-нибудь другим цветом. В этом нам поможет тэг <font></font>. Давайте слово ‘вас’ сделаем голубого цвета и добавим ещё одну строчку:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Моя первая страничка</title>
</head>
<body bgcolor="#000000" text="#ff0000">
Рада <font color='#78D2FF'>вас</font> видеть! : )
<br>
Приходите ещё
</body>
</html>
Я уже упоминала тэг <br>, с его помощью мы перенесли строчку. Если вы хотите опустить текст ниже, то поставьте несколько тэгов <br>
Давайте ещё немного поэкспериментируем с текстом. Текст можно выровнять по центру, по левому или правому краю. В этом нам поможет тэг <p>:
<p align="center">выравниваем по центру</p>
<p align="left">выравниваем по левому краю</p>
<p align="right"> выравниваем по правому краю</p>
<p align="justify">выравниваем по обоим краям </p>
Если не вводить тэг <p></p>, то текст (или картинки) автоматически выравнивается по левому краю.
Выравнивание можно использовать и с другим тэгом, <div></div>:
<div align="center">выравниваем по центру</div>
<div align="left">выравниваем по левому краю</div>
<div align="right"> выравниваем по правому краю</div>
<div align="justify">выравниваем по обоим краям </div>
Чтобы выровнять текст по центру, можно использовать тэг <center></center>. Но такое исключение есть только у данного тэга, остальные используются вместе с <p></p> или <div></div>
Давайте выровняем наш текст по центру:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Моя первая страничка</title>
</head>
<body bgcolor="#000000" text="#ff0000">
<div align="center">
Рада <font color='#78D2FF'>вас</font> видеть! : )
<br>
Приходите ещё
</div>
</body>
</html>
Текст можно сделать крупнее, меньше, жирнее, сделать его курсивом, подчеркнуть, зачеркнуть. Начнём с заголовков:
<h1>Ваш текст </h1>
<h2>Ваш текст </h2>
<h3>Ваш текст </h3>
<h4>Ваш текст </h4>
<h5>Ваш текст </h5>
<h6>Ваш текст </h6>
<h1> - самый крупный, <h6> - соответственно, самый мелкий. Данный тэг автоматически переносит на следующую строчку, это не всегда нам нужно. Например вы хотите выделить таким образов всего одно или несколько слов и перенос на следующую строчку нам вовсе не нужен. В этом случае нам поможет атрибут size, который используется вместе с тэгом <font>:
<font size="+4">Ваш текст </font>
<font size="+3">Ваш текст </font>
<font size="+2">Ваш текст </font>
<font size="+1">Ваш текст </font>
<font size="+0">Ваш текст </font>
<font size="-1">Ваш текст </font>
<font size="-2">Ваш текст </font>
size="+4" – самый крупный, size="-2" – соответственно, самый мелкий.
Как ещё можно изменить текст:
<b> Полужирный текст </b>
<i> Наклонный текст (курсив) </i>
<tt> моноширинный шрифт </tt> (как у пишущей машинки)
<u> Подчеркнутый текст </u>
<strike> Перечеркнутый </strike>
<s> Перечеркнутый </s>
<small>маленький шрифт относительно основного текста</small>
<big>Большой шрифт относительно основного текста </big>
Верхний индекс <sup> sup </sup>
Нижний индекс <sub> sub </sub>
Верхний и нижний индексы пригодятся при написании химической формулы или математического уравнения.
К тексту (или одному слову, предложению, абзацу) можно применить сразу несколько тэгов. Например:
<b><i>Ваш текст</i></b>
Применим новые тэги на практике. Я сделаю строчку ‘Рада вас видеть’ крупнее и подчеркну, а фразу ‘Приходите ещё’ курсивом:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Моя первая страничка</title>
</head>
<body bgcolor="#000000" text="#ff0000">
<div align="center">
<font size="+3"><u>Рада <font color='#78D2FF'>вас</font> видеть! : )</u></font>
<br>
<i>Приходите ещё</i>
</div>
</body>
</html>
Чтобы лучше усвоить урок, поэкспериментируйте со своим текстом.
С помощью атрибута face мы сможет задать тип шрифта нашему тексту.
Есть стандартные типы шрифтов, которые присутствуют на компьютере каждого:
Times
Times New Roman
Arial
Helvetica
Courier
Verdana
Tahoma
Cosmic Sans
Garamond
Пример:
<font face="Tahoma">Ваш текст</font>
Можно указать сразу несколько типов шрифтов. Если у посетителя вашей веб-странички не окажется одного шрифта, копьютер автоматически определит и отобразит другой указанный шрифт. Пример:
<font face=" Tahoma, Arial, Helvetica"> Ваш текст</font>
Вы можете скачать шрифты и с Интернета, но при создании своей виртуальной странички не забывайте, что не у всех могут быть ваши скаченные декоративные шрифты.
Вопросы по данному материалу можно задавать в этой теме