..::реклама::..

..::счетчик::..

Первая страница

   1. Создание простейшей страницы
   2. Изменяем цвета фона и текста
   3. Выравнивание текста
   4. Списки
   5. Вставка изображения
   6. Ссылки

 1. Создание простейшей страницы

   Любая Web-страница должна начинаться с тега <html>, а заканчиваться его закрывающим близнецом </html>. Структурно Web-страница разбивается на две части: заголовок и тело. В заголовке указывается служебная информация обо всей Web-странице, а в теле Web-страницы мы уже и описываем ее содержимое вместе с правилами его отображения. При этом заголовок Web-страницы ограничивается тегами <head> и </head>, а тело документа обозначается тегами <body> и </body>

   Итак, для начала создайте новую папку и назовите ее, к примеру, "Мой сайт". Затем откройте программу "Блокнот" и наберите в нем следующий HTML-код:

 <html>
  <head>
   <title>Первая страничка</title>
  </head>
  <body>Добро пожаловать! :)</body>
 </html>

   Выбираем в "Блокноте": "Файл" - "Сохранить как...", задаем имя index.html и сохраняем в нашу папку "Мой сайт". Посмотрим, что у нас получилось. Результат

   Теперь разберем то, что мы набирали:

   <html> - указывает программе просмотра страниц что это HTML-документ
   <head> - определяет место, где помещается различная информация не отображаемая в теле документа (тег <body>). Здесь располагается тег названия документа и теги для поисковых машин
   <title> - в этом теге указывается заголовок страницы
   <body> - определяет видимую часть документа. В этом разделе располагается вся содержательная часть документа (текст статьи, фотографии, формы для заполнения, другие объекты)

 

 2. Изменяем цвета фона и текста

   Теперь попробуем изменить цвета фона и текста. Для этого отредактируем наш файлик index.html. Кликаем по нему правой кнопкой мыши и выбираем:
"Открыть с помощью" - "Блокнот"

   Вносим следующие изменения:

 <html>
  <head>
   <title>Первая страничка</title>
  </head>
  <body text="white" bgcolor="black">Добро пожаловать! :)</body>
   <br><font color="red">Это моя первая страничка!</font>
 </html>

   Результат

   Посмотрим, что нового у нас появилось в нашем html-коде:

   • Параметры тега <body> - text и bgcolor:

   text - устанавливает цвет текста документа, используя значение цвета в виде RRGGBB (пример: 000000 - черный цвет), либо используя константы цвета, например для черного цвета, используемой в нашем уроке <body text= "black">
   bgcolor - устанавливает цвет фона документа, используя значение цвета в виде RRGGBB (пример: FF0000 - красный цвет), либо используя константы цвета, например для красного цвета, используемой в нашем уроке <body bgcolor="red">

   • Теги <br> и <font>:

   <br> - (BReak line) устанавливает перевод строки в том месте, где этот тег находится.
*не требует парного закрывающего тега
   <font> - представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура
   Параметр color - устанавливает цвет текста

 

 3. Выравнивание текста

   Для установки выравнивания текста обычно используется тег параграфа <p> с параметром align, который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега <div> с аналогичным параметром align

<p>Текст</p> Добавляет новый параграф, по умолчанию выровненный по левому краю. Перед параграфом и после него автоматически добавляются небольшие вертикальные отступы.
<p align="center">Текст</p> Выравнивание по центру
<p align="left">Текст</p> Выравнивание по левому краю
<p align="right">Текст</p> Выравнивание по правому краю
<p align="justify">Текст</p> Выравнивание по ширине
<nobr>Текст</nobr> Отключает автоматический перенос строк, даже если текст шире окна браузера
Текст<wbr> Отключает автоматический перенос строк, даже если текст шире окна браузера
<div align="center">Текст</div> Выравнивание по центру
<div align="left">Текст</div> Выравнивание по левому краю
<div align="right">Текст</div> Выравнивание по правому краю
<div align="justify">Текст</div> Выравнивание по ширине

   * По умолчанию текст выравнивается по левому краю.

   Отличие между параграфом (тег <p>) и тегом <div> в том, что в начале и в конце параграфа появляется вертикальный отступ, чего нет в случае использования тега <div>

   Давайте попробуем разместить текст по центру при помощи тега параграфа <p>. Вносим изменения в index.html

 <html>
  <head>
   <title>Первая страничка</title>
  </head>
  <body text="white" bgcolor="black">Добро пожаловать! :)</body>
   <br><font color="red">Это моя первая страничка!</font>
 
   <br><p align="center">Выравнивание по центру</p>
 
 </html>

    Результат

   Думаю, что теперь принцип выравнивания текста Вам понят. Попробуйте поэкспериментировать с тегами, которые указаны в этом уроке в таблице выше.

 

 4. Списки

   Как выглядят списки, мы все прекрасно знаем. Чаще всего они бывают нумерованные и ненумерованные. В нумерованных списках каждый пункт обозначен некоторым номером. У ненумерованных списков пункты выделяются при помощи графических маркеров. Списки также разделяют на одноуровневые и многоуровневые. В одноуровневых списках все элементы равноценны. А в многоуровневых каждый элемент может содержать еще несколько пунктов, которые организуют новый список, вложенный в исходный элемент. Может быть, звучит несколько туманно, но единожды увидев это на примере, уже ни с чем нельзя будет спутать.

   Итак, начнем мы с маркированных ненумерованных списков. Все его содержимое обязано располагаться внутри пространства, ограниченного стартовым тегом <ul> и его закрывающим близнецом </ul>. Отдельные элементы списка объявляются при помощи обозначающего тега <li>, который не имеет закрывающей пары. Точнее, закрывающий тег </li> может применяться, но он необязателен.

   Давайте создадим еще одну html-страничку. Для этого опять откроем "Блокнот" и внесем туда следующий HTML-код:

 <html>
  <head>
   <title>Списки</title>
  </head>
  <body>Mapкированный список</body>
   <ul type="square" title="Ненумерованный список">
    <li>Первый пункт списка
    <li>Второй пункт списка
    <li>Третий пункт списка
   </ul>
 </html>

   Сохраним файл как spiski.html в папке "Мой сайт".
   Посмотрим, что у нас получилось Результат

   <ul> (Unordered List) - тег служит для создания ненумерованного списка. Допускается вложение ненумерованного списка в списки другого вида. Требуется закрывающий тег </ul>

   Атрибуты:

   type - При помощи параметра type мы имеем возможность явно указывать, какой тип маркера следует использовать для отображения элементов списка. В качестве значений данного параметра применяется одно из трех предустановленных ключевых слов:

disk Закрашенный кружок (по умолчанию)
circle Незакрашенный кружок
square Квадратик

   title - Всплывающая подсказка при наведении курсора на список.

   <li> (List Item) - тег служит для обозначения элемента (строки) списка. Используется в нумерованных(<ol>) и ненумерованных(<ul>) списках

 

   Теперь перейдем к рассмотрению упорядоченных нумерованных списков. Список подобного типа создается при помощи тегов <ol> и </ol>. А элементы списка объявляются при помощи все того же тега <li>. Рассмотрим пример создания простейшего нумерованного списка и увидим, как его обрабатывает и отображает браузер. Немного отредактируем нашу страничку spiski.html, внеся туда следующие изменения:

 <html>
  <head>
   <title>Списки</title>
  </head>
  <body>Mapкированный список</body>
   <ul type="square" title="Ненумерованный список">
    <li>Первый пункт списка
    <li>Второй пункт списка
    <li>Третий пункт списка
   </ul>
   <br>Нумерованный список
   <ol type="I" title="Нумерованный список">
    <li>Первый пункт списка
    <li>Второй пункт списка
    <li>Третий пункт списка
   </ol>
 </html>

   Результат

   В теге <ol> атрибут type имеет следующие типы маркеров:

1 Нумерации обычными арабскими цифрами (по умолчанию)
A Обозначение элементов списка при помощи символов латинского алфавита верхнего регистра (заглавные буквы). Нумерация идет по алфавитному порядку, начиная от A до Z
a Обозначение элементов списка при помощи символов латинского алфавита нижнего регистра (маленькие буквы). Нумерация идет по алфавитному порядку, начиная от a до z
I Устанавливает римские цифры в качестве основы нумерации, но для их отображения будут использоваться латинские символы верхнего регистра
i создает нумерацию при помощи римских цифр, которые будут состоять из символов латинского алфавита нижнего регистра

   * Параметр type с теми же значениями может употребляться для указания вида маркеров отдельных элементов списка. Для этого параметр type с соответствующим значением разрешено указывать в теге элемента списка <li>

   Пример записи: <li type="A">

   Примечание:
   Браузеры по-разному интерпретируют указание вида маркера для отдельного элемента списка. Браузер Netscape изменяет вид маркера для данного и всех последующих, пока не встретится очередное переопределение вида маркера. Браузер Internet Explorer изменяет вид маркера только для данного элемента.

 

   Давайте еще рассмотрим теги:
   <dl> - служит для создания списка определений
   <dd> и <dt>- являются описанием списка определений.

   Опять редактируем нашу страничку spiski.html:

 <html>
  <head>
   <title>Списки</title>
  </head>
  <body>Mapкированный список</body>
   <ul type="square" title="Ненумерованный список">
    <li>Первый пункт списка
    <li>Второй пункт списка
    <li>Третий пункт списка
   </ul>
   <br>Нумерованный список
   <ol type="I" title="Нумерованный список">
    <li>Первый пункт списка
    <li>Второй пункт списка
    <li>Третий пункт списка
   </ol>
   <br>Список определений
   <dl title="Список определений">
    <dt>HTML
     <dd>Это язык гипертекстовой разметки
    <dt>Браузер
     <dd>Это программное обеспечение для просмотра веб-сайтов
   </dl>
 </html>

   Результат

   Со списками все, идем дальше.

 

 5. Вставка изображения

   Давайте вернемся к нашей страничке index.html и попробуем вставить в нее изображение. Делается это при помощи тега <img> с обязательным параметром scr (от source - источник), в котором указывается адрес картинки (место, где она находится).

   Создайте в папке "Мой сайт" еще одну папку и назовите ее "picture". Теперь, сохраните в нее эту картинку:

   Открываем папку "picture" и видим, что наша картинка носит имя kartinka и имеет расширение .jpg

   Приступаем к редактированию index.html

 <html>
  <head>
   <title>Первая страничка</title>
  </head>
  <body text="white" bgcolor="black">Добро пожаловать! :)</body>
   <br><font color="red">Это моя первая страничка!</font>
 
   <br><p align="center">Выравнивание по центру</p>
 
   <br><center><img src="picture/kartinka.jpg" alt="Изображение"></center>
 
 </html>

    Результат

   Тег <center> - выравнивание изображения по центру. Также, могут быть использованы теги:

      <left> - выравнивание по левому краю
      <right> - выравнивание по правому краю

   Разберем параметры тега <img>, которые мы использовали в данном примере:

      src="picture/kartinka.jpg" - здесь мы указали адрес нашего изображения, т.е. место, где находится наша картинка.

      alt="Изображение"" - устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.

   А теперь перечислим все параметры тега <img>

      • align - определяет как рисунок будет выравниваться по краю и способ обтекания текстом. Может принимать следующие значения:

            bottom - выравнивание нижней границы изображения по окружающему тексту

            left - выравнивает изображение по левому краю окна

            right - выравнивает изображение по правому краю окна

            middle - выравнивание середины изображения по базовой линии текущей строки

            top - верхняя граница изображения выравнивается по самому высокому элементу текущей строки

      • alt - альтернативный текст для изображения

      • border - толщина рамки вокруг изображения. Указывается в пикселях.

            Пример: border="1"

      • width - ширина изображения. Указывается в пикселях или процентах.

            Пример: в пикселях - width="155", в процентах - width="100%"

      • height - высота изображения. Указывается в пикселях или процентах.

            Пример: в пикселях - height="155", в процентах - height="100%"

      • hspace - горизонтальный отступ от изображения до окружающего контента. Указывается в пикселя

            Пример: hspace="5"

      • vspace - вертикальный отступ от изображения до окружающего контента. Указывается в пикселя

            Пример: vspace="5"

      • ismap - сообщает браузеру, что картинка является серверной картой-изображением. Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.

      • lowsrc - путь к графическому файлу низкого разрешения для предварительного отображения

      • src - путь к графическому файлу

      • usemap - ссылка на тег <map>, содержащий координаты для клиентской карты-изображения

 

 6. Ссылки

   Ссылки (или гиперссылки) позволяют щелчком кнопки мыши на выделенном тексте или изображении перейти к другому файлу или фрагменту страницы. Ссылки применяются в большинстве существующих страниц. Они могут быть текстовыми и графическими. Текстовые ссылки представляют собой выделенное слово или целую фразу. Выделение ссылки производится цветом или подчеркиванием, в зависимости от настройки браузера.

   В языке HTML структуры текстовых и графических ссылок подобны друг другу. Все они задаются тегом <a> с параметром href, которому соответствует закрывающий тег </a>. В ссылке сначала указывается имя файла, на который она ссылается, а затем текст или имя графического файла, содержащего изображение ссылки. Кроме простых графических ссылок, можно создать так называемую графическую карту ссылок: картинку с «горячими областями», щелчок на которых приводит к срабатыванию соответствующих ссылок.

   Давайте попробуем создать на странице index.html ссылку на вторую страничку spiski.html. Для этого добавим следующий html-код (редактируем index.html):

 <html>
  <head>
   <title>Первая страничка</title>
  </head>
  <body text="white" bgcolor="black">Добро пожаловать! :)</body>
   <br><font color="red">Это моя первая страничка!</font>
 
   <br><p align="center">Выравнивание по центру</p>
 
   <br><center><img src="picture/kartinka.jpg" alt="Изображение"></center>
 
   <br><a href="spiski.html">Ссылка</a>
 
 </html>

    Результат

   Чтобы создать графическую ссылку, необходимо между тегами <a> и </a> вствить изображение. Приведем пример на нашей картинке. Ссылка будет выглядить следующим образом:

<a href="spiski.html"><img src="picture/kartinka.jpg" alt="Изображение"></a>

   Рассмотрим параметр target, который может принимать следующие значения:

            _blank - загружает страницу в новое окно браузера

            _self - загружает страницу в текущее окно

            _parent - загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self

            _top - отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self

   * По умолчанию используется _self

 
Хостинг от uCoz