HTML редактор
HTML редактор
Итак. Начали.
Для создания web-страницы набираем специальный код на языке HTML. Запустите любой текстовый редактор, например Блокнот, входящий в Windows (Пуск- Программы- Стандартные — Блокнот). или качаем более продвинутый(бесплатный) редактор с нашего сайта webmasteruvse.ru
Теперь наберите в нем этот «текст»:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
То что Вы набрали — является минимальным «набором» для создания страницы. В дальнейшем при создании web-страниц Вы можете просто копировать его на новую страницу для облегчения работы.
Теперь поясним набранное. Команды, заключенные в <>, называются тегами. Теги бывают парные и не парные. Парные теги состоят из открывающего тега и закрывающего. Например тег <html> — открывающий тег, а </html> — закрывающий. Как видите разница в открывающем и закрывающем теге всего лишь в /.
Не парные теги состоят только из открывающего тега. Например тег <body>. Между тегами <title> и </title> напишите название Вашей странички. Например вот так:
<html>
<head>
<title> HTML редактор. </title>
</head>
<body>
</body>
</html>
Теперь между тегами <body> и </body> напишите то, что Вы хотите разместить на Вашей странице, например так:
<html>
<head>
<title> HTML редактор. </title>
</head>
<body>
Приветствую Вас на моей страничке! Здесь Вы найдете много интересного. </body>
</html>
Сохраните набранное в виде файла с расширением htm или html, например page1.html в отдельной папке.
Далее запустите сохраненный Вами файл page1.html или откройте его в Internet Explorer.
Поздравляем! Вы только что создали свою первую интернет-страницу.
Теперь идем дальше. Давайте поменяем цвет фона на Вашей страничке. Цвет фона задается в теге body, и записывается в 16-ричной системе., где каждая из цифр или букв означает «количество» основных цветов — RGB — Red Green Blue.
Например <body bgcolor="#000000"> означает что цвет фона будет состоять из 00-красного, 00-зеленого, и 00 — голубого. Таким образом мы получим черный цвет.
Белый цвет фона кодируется так <body bgcolor="#FFFFFF">
Красный цвет фона кодируется так <body bgcolor="#FF0000">
Зеленый цвет фона кодируется так <body bgcolor="#00FF00">
Синий цвет фона кодируется так <body bgcolor="#0000FF">
Различные комбинации позволяют получить практически любой цвет фона. Например
Такой цвет <body bgcolor="#0 °CC99">
Такой цвет <body bgcolor="#FF9999">
и т. д.
Итак, добавьте параметр в тег body, например вот так:
<html>
<head>
<title> Моя первая страничка в Интернет. </title>
</head>
<body bgcolor="#CC0000">
Приветствую Вас на моей страничке! Здесь Вы найдете много интересного. </body>
</html>
Сохраните страничку и запустите ее опять в Internet Explorer.
Поэкспериментируйте с параметром bgcolor.
Если Вы хотите разделить набранный Вами текст на части…т. е. сделать на странице операцию подобную нажатию кнопки Enter в текстовом редакторе — для этого нужно использовать не парный тег <br>
Разделим наш текст на несколько строк, например вот так:
<html>
<head>
<title> HTML редактор. </title>
</head>
<body bgcolor="#CC0000">
Приветствую Вас на моей страничке! <br> Здесь Вы найдете много интересного. </body>
</html>
ну или, чтобы это выглядело более читаемо, вот так:
<html>
<head>
<title> HTML редактор.</title>
</head>
<body bgcolor="#CC0000">
Приветствую Вас на моей страничке! <br>
Здесь Вы найдете много интересного. <br>
</body>
</html>
Сохраните страничку и посмотрите ее в Internet Explorer.
Для того чтобы выровнять по центру содержимое Вашей странички, используется парный тег center.
Поставим открывающий тег <center> перед содержимым странички, а тег </center> после содержимого странички, вот так:
<html>
<head>
<title> html редактор.</title>
</head>
<body bgcolor="#CC0000">
<center>
Приветствую Вас на моей страничке! <br>
Здесь Вы найдете много интересного. <br>
</center>
</body>
</html>
Сохраните файл, откройте его в Internet Explorer и посмотрите что получилось.
Теперь установим цвет текста для Вашей странички. Цвет текста задается в теге body, например вот так text="#FFFF00"
Добавим этот параметр после параметра цвета фона.
<html>
<head>
<title> html редактор.</title>
</head>
<body bgcolor="#CC0000" text="#FFFF00">
<center>
Приветствую Вас на моей страничке! <br>
Здесь Вы найдете много интересного. <br>
</center>
</body>
</html>
Теперь вставим какую-либо картинку на Вашу страницу.
Для размещения картинки на Вашей страничке вставляем вот этот код <img src="golub.jpg"> в страничку.
<html>
<head>
<title> Моя первая страничка в Интернет.</title>
</head>
<body bgcolor="#CC0000" text="#FFFF00">
<center>
Приветствую Вас на моей страничке! <br>
Здесь Вы найдете много интересного. <br>
<img src="golub.jpg">
</center>
</body>
</html>
Сохраните файл, откройте его в Internet Explorer и посмотрите что получилось.
Как видите, картинки вставляются в интернет-страничку с помощью тега img,где в параметре src указывается файл картинки.
Теперь вставим ссылку, при нажатии на которую посетитель сайта пойдет на другую страничку Вашего сайта или вообще на другой сайт, т. е. гиперссылку. Добавим текст после нашей картинки, при нажатии на который будет совершен переход на другой сайт. Для вставки гиперссылок используется парный тег.
<html>
<head>
<title> Моя первая страничка в Интернет.</title>
</head>
<body bgcolor="#CC0000" text="#FFFF00">
<center>
Приветствую Вас на моей страничке! <br>
Здесь Вы найдете много интересного. <br>
<img src="golub.jpg"> <br>
<a href=http://unionsofttrade.com> Ищете работу на дому? Нажмите здесь!</a>
</center>
</body>
</html>
Если например Вы хотите сделать чтобы картинка являлась гиперссылкой то сделайте так:
<html>
<head>
<title> Моя первая страничка в Интернет.</title>
</head>
<body bgcolor="#CC0000" text="#FFFF00">
<center>
Приветствую Вас на моей страничке! <br>
Здесь Вы найдете много интересного. <br>
<a href=http://unionsofttrade.com> <img src="golub.jpg"> <br>
Ищете работу на домашнем компьютере? Щелкните здесь!</a>
</center>
</body>
</html>
ПОЗДРАВЛЯЕМ!
Вы прошли начальный курс вебмастера и теперь можете делать простейшие страницы и с их помощью начать зарабатывать деньги!