Пишу эту серию статей
Для своих друзей, которые попросили меня об этом, а также для всех кто заинтересован в создании собственных сайтов.
Все мы мечтаем создать свой сайт в интернете.
В этой статье я опишу подробно как можно создать свою web-страницу за несколько минут.
Итак перейдем от слов к делу.
Как создать свою первую Web-страницу .
Мы с вами будем создавать сайт на примере вымышленной фирмы "Ореон", которая занимается, например продажей компьютеров и компьютерных программ.
Я советую вам начинать создавать HTML -код в обыкновенном блокноте.
Глава 1
1. Откройте блокнот ( Пуск/Все программы/ Стандартные/Блокнот
2.Создайте в нем новый документ (Файл(File)*СОздать ( NEw)
3. Введите в новый документ основные теги(тэг-это элемент Html-кода . отвечающий за слова.которые появятся в заголовке вашего сайта)
Например:
<title>В Контакте | Добро пожаловать</title>
-то что вы видите в заголовке главной страницы известного сайта "В контакте"-введено с помощью тегов. Следовательно---------------->
<title> именно здесь вы сможете написать название своего сайта</title>
Итак введите в новом документе блокнота следующие теги:
<html>
<Head>
<title></title>
</head>
<body>
</body>
</html>
Краткая информация: теги начинаются и заканчиваются угловыми скобками.Смотрите на то, что вы уже ввели.
<html>-открывает тег
</html>-закрывает тег <title> - открывает тег
</title>- закрывает тег
<body> -открывает тег
</body> - закрывает тег
Введем между тегами <title> и </title> название нашей Web-страницы Компания Ореон.
Между тегами <body> и </body> вставьте новую строку с информацией о нашей компании:
Компании Ореон у нас самые лучшие компьютеры и компьютерные программы.
если вы все сделали правильно у вас должно получиться следующее:
<html>
<Head>
<title>Компания Ореон</title>
</head>
<body>
Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы
</body>
</html>
Теперь давайте поменяем цвет фона и текста.
Их можно создавать в цифровом или символьном виде.
Для того чтобы изменить цвет фона и текста давайте используем атрибуты:
bgcolor и text.
Давайте установим желтый цвет для фона (yellow) страницы и синий (blue) для текста.
Для этого вместо тега <body> введите следующее:
<body bgcolor=yellow text = blue>
В основном html- документе у вас должно получиться следующее:
<html>
<Head>
<title>Компания Ореон</title>
</head>
<body bgcolor=yellow text= blue>
Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы
</body>
</html>
Если вы все ввели правильно. Создайте на рабочем столе новую папку под названием Мой сайт. И сохраните туда наш документ для этого:
выберите:
Файл/Сохранить как: и в имени файла введите oreon.html.
Теперь просто откройте папку куда вы сохранили документ oreon.html и запустите его щелчком или двойным щелчком левой кнопкой мыши.
Если у вас все получилось вы увидите свой документ в интернет обозревателе.
Глава 2:
В этом главе мы с вами научимся форматировать текст на странице.
Для чего нужно форматирование текста. Оно служит для того, чтобы наш документ выглядел красиво.С помощью форматирования мы сможем: установить размер и начертание шрифта, с можем выравнивать текст на странице.
Откройте блокнот:
Сейчас Мы c вами разберем следующий пункт это- ЗАГОЛОВКИ РАЗДЕЛОВ ДОКУМЕНТА.
Они бывают разных уровней с 1-го по 6-ой.
ЗАГОЛОВКИ РАЗДЕЛОВ ДОКУМЕНТА указываются парой тегов:
<h1></h1> - заголовок первого уровня, <h2></h2>- второго уровня ,h3-третьего и так далее.
Также заголовки могут иметь различный размер: тег <h1>-самый крупный, с тегом <h6>-самый мелкий.
Вместо первого предложения документа:
<title> Компания Ореон </title>
введите :
<h1>Компания Ореон</h1>
у вас должно получиться следующее:
<html>
<Head>
<h1>Компания Ореон</h1>
</head>
<body bgcolor = yellow text = blue>
Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы.
</body>
</html>
Сохраните документ.
Файл/Сохранить.
Когда вы вновь запустите ваш документ в обозревателе
у вас должно получиться следующее:
КОМПАНИЯ ОРЕОН
Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы.
Теперь мы рассмотрим атрибуты align.
Он позволяет выравнивать заголовки по центру(center) и по правому краю(right). так как по умолчанию текст всегда выравнивается по левому краю.
Давайте выровняем заголовок по центру web-страницы для этого вместо строки:
<h1>Компания Ореон </h1>
введем
<h1 align =center> Компания Ореон</h1>
HTML-документ должен выглядить так:
<html>
<Head>
<h1 align =center> Компания Ореон</h1>
</head>
<body bgcolor = yellow text = blue>
Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы.
</body>
</html>
Сохраните ваш html-документ. Файл/Сохранить.( запустите ваш документ)
Если вы все правильно ввели ,ваш заголовок будет выровнен по центру.
Давайте установим наклонное начертание остального текста.
Для этого используем парные теги <i></i>
Введите их в начало и конец этой строки:
<i>Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы </i>
У вас должно получиться:
<html>
<Head>
<h1 align =center> Компания Ореон</h1>
</head>
<body bgcolor = yellow text = blue>
<i>Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы </i>
</body>
</html>
Сохраним: Файл/Cохранить
Запустим документ.
Если вы ввели все правильно текст о нашей компании примет наклонное начертание.
Краткая справка:
<b></b>- устанавливает полужирное начертание текста
Например:
<i><b> Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы</b></i>
<u></u>- подчеркнутое начертание текста
Например:
<i><u>Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы</u></i>
<small></small>- уменьшает размер шрифта
Например:
<small><i>Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы</i</small>
<big></big>- увеличивает размер шрифта
Например:
<big><i>Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы</i> </big>
Выбирайте любой тег, который посчитаете нужным. Для примера я приведу вам наглядный
вариант с тегом <big></big>(для увеличения текста).
<html>
<Head>
<h1 align =center> Компания Ореон</h1>
</head>
<body bgcolor = yellow text = blue>
<big><i>Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы</i> </big>
</body>
</html>
Есть еще один способ изменения размера шрифта: <font></font>
Атрибут тега size помогает устанавливать размеры шрифта от 1-го ( самого мимнимального) до 7-го- максимального.
Краткая справка:
Размер обычного текста = 3 условным единицам и увеличение либо уменьшение иожно указывать с помощью знаков + или -(минус), а размер шрифта в этом случае увеличивается или уменьшается по сравнению с исходным, который = 3.
Атрибут face-указывает название шрифта ( Arial,Adobe Caslon Pro и любых других шрифтов)
Атрибут color - задает цвет шрифта.
Мы будем изменять размер шрифта с помощью тега <font>.
Для этого заменим строку:
<big><i>Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы</i> </big>
на строку:
<font size=5><i>Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы</i></font>
Что мы сделали:
мы заменили тег <big></big> на <font size=5></font>
Шрифт был установлен в 5 условных единицах. Размер можно указывать любой.(с 1 по 7)
Теперь выровняем текст о нашей компании по центру.
Для этого добавим в начало и конец этого предложения
<font size=5><i>Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы</i></font>
Теги <center></center>/
У вас должно получиться следующее:
<html>
<Head>
<h1 align =center> Компания Ореон</h1>
</head>
<body bgcolor = yellow text = blue>
<center><font size=5><i>Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы</i></font></center>
</body>
</html>
Сохраним наш документ.Теперь вы можете посмотреть в обозревателе, что получилось.
Если у вас все правильно, то у вас все будет выровнено по центру.
СПРАВКА:
Форматирование шрифта может быть двух видов:
1.физическим,которым мы пользовались выше и
2.Логическим
Они различаются между собой тем, что при физическом форматирование, можно прямо указать, что шрифт в заголовке будет жирным, то есть явно показать начертание шрифта текста.
При Логическом же форматировании мы указываем, только структурный тип, а браузер сам выбирает стили, и мы видим их на экране.Например: Высказывания или цитаты: всегда указываются курсивом.
Сравним теги физического и логического форматирования:
ПОЛУЖИРНЫЙ ТЕКСТ:
Физическое:<B>
Логическое <STRONG>
Курсив :
Физическое: <I>
Логическое: <EM>
Моноширинный шрифт:
Физическое: <TT>
Логическое: <CODE>
Перечеркнутый текст:
Физическое : <S>
Логическое: <DEL>
Теги для логического форматирования шрифта текста:
<dfn> </dfn> - для определения текстового термина
<cite> </cite>- для цитат, книг и фильмов.Ссылок на другие сайты или источники материалов.
<em> </em>-выделение важных фрагментов текста
<ABBR></ABBR> Используется для описания аббревиатуры (сокращенное название, которое читается по буквам).
<ACRONYM></ACRONYM> Используется для описания акронима (сокращенное название, которое читается как слово).
<TITLE></TITLE> задает текст всплывающей подсказки.
<code></code> Используется для отображения фрагментов программного кода . обязателен.
<KBD></KBD> Выделения текста, вводимого пользователем с клавиатуры (по умолчанию моноширинной шрифт). .
<SAMP ></SAMP> Используется для выделения примеров (по умолчанию моноширинной шрифт).
<STRONG> </strong> Используется для выделения текста.ДЛЯ Важных фрагментов
<VAR ></var> Используется для выделения имен переменных в фрагменте кода программы
Отображается курсивом.
Продолжение в следующих статьях.Если вам понравилась статья или у вас получилось то, что я написал оставляйте рецензию.