Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Методичка по WEB-дизайну1(последняя).docx
Скачиваний:
5
Добавлен:
01.07.2025
Размер:
2.77 Mб
Скачать
    1. Создание html-документа

Чтобы создать HTML-документ требуется:

  1. Создать текстовый документ (Текстовый документ.txt).

  2. Задать имя файла и расширение *.html или *.htm (например, index.html).

  3. Открыть Aptana Studio 3 и переместить в нее созданный html-документ.

Ввести следующую команду html:5 (Рис.1).

Далее нажать сочетание клавиш Сtrl+ E (англ.яз.). Появится каркас страницы. (Рис.2). Сохраняем файл.

    1. Просмотр документа в окне браузера

Дважды щелкаем левой кнопкой мыши по html-документу, он откроется в браузере, который установлен по умолчанию для данного типа файлов. Если html-документ был отредактирован, то надо его сохранить, перейти в браузер и нажать F5 (обновить).

    1. Разметка текста с помощью html

Теги для логической разметки текста используются внутри тега <body>.

      1. Абзац

Рассмотрим тег <p>, с помощью которого создаются абзацы. По умолчанию абзацы начинаются с новой строки и имеют вертикальные отступы, которыми можно управлять с помощью стилей.

<p> Абзац </р>

Здесь тег <р>-открывающий тег и </р>-закрывающий тег (со слешем "/").

Чтобы ввести абзац в Aptana Studio 3, достаточно ввести букву p (англ. яз., Рис.3) и нажать сочетание клавиш Сtrl+E (Рис.4). Так можно вводить все теги в данной программе.



      1. Атрибуты тегов

Многие теги требуют еще дальнейших вставок. За это отвечают атрибуты. Они располагаются всегда в открывающем теге после его имени и отделяются друг от друга пробелом.

Например для выравнивания текста предназначен атрибут align. Этот атрибут используется в теге <p>,<h1>..<h6>,<div>. Атрибут align принимает следующие значения:

- left - по левому краю (по умолчанию);

- center - по центру;

- right - по правому краю;

- justify - по ширине

<p align="right">Абзац текста с выравниванием по правому краю.</p>

<p align="justify">Абзац текста с выравниванием по ширине.</р>

В программе устанавливаем курсор в теге после буквы р и нажимаем пробел, появится выпадающий список атрибутов, стрелками можно выбрать атрибут align и нажать клавишу Enter (либо дважды щелкнуть левой кнопкой мыши по атрибуту align) (Рис.5).

После этого курсор будет мигать между кавычками, начинаем набирать то значение атрибута align, которое требуется по заданию, например right. Как только мы наберем первую букву r, появится выпадающий список, который будет предлагать имеющиеся в своем списке атрибуты, начинающиеся на букву r (Рис.6). Можно нажать клавишу Enter и программа автоматически добавит данное значение.

      1. Заголовки

Для создания структуры больших текстов обычно используются заголовки. Существует 6 уровней заголовков от <h1> до <h6>. Причем <h1> - заголовок самого высшего уровня (самый большой), <h6> - соответственно, самого низшего (самый маленький).

На практике редко встречаются тексты, в которых встречаются заголовки ниже третьего уровня. Поэтому самыми часто используемыми тегами заголовков являются: <h1>, <h2> и <h3>.

      1. Списки

Список — это собрание множества элементов. HTML различает неупорядоченные, упорядоченные и списки определений. Неупорядоченные отображаются с маркерами, упорядоченные – с нумерацией.