Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
1ПИ / Разработка Web-страниц на основе HTML-кода_2012.docx
Скачиваний:
26
Добавлен:
16.03.2015
Размер:
145.47 Кб
Скачать

СОДЕРЖАНИЕ

Cоздание эталонныхweb-страниц

Цель:

  • ознакомиться с элементами окна редактора HTML;

  • научиться создавать самые простые WEB-странички;

  • освоить основные приемы работы с заголовком, цветом, шрифтом.

1. Выбрать пункт меню File-New

2. Создать Web-страницу:

2.1. Ввести заголовок страницы: My first Home Page (Моя первая базовая страница)

2.2. Организовать абзац с содержанием: Hello, World!

(Здравствуй, мир!)

    1. Сохранить страницу в каталог HTML под именем d1_1.html

    2. Просмотреть страницу с помощью браузера: Internet Explorer

3. Работаем с созданной Web-страницей:

3.1. Организовать другой абзац с содержанием: “Среди ключевых технологий, на которых держится современная сеть Internet, одной из важнейших и, как это ни странно, вызывающих наиболее ожесточенные споры является язык HTML, предназначенный для разметки и оформления документов World Wide Web.”

3.2. Сделать переход на новую строку и набрать:

“Необычайно интересно проследить историю развития этого языка - историю, в которой столкнулись противоположные подходы к проблеме компьютерного представления текста, и которая послужила ареной сотрудничества и противоборства крупнейших компьютерных компаний, определяющих пути развития и будущее Internet.”

3.3.Сохранить страницу в каталог HTMLпод именемd1_1.html.

3.4.Просмотреть страницу с помощью браузера

4. Продолжаем работать с созданной Web-страницей:

4.1. Вводим внутренние заголовки документа: Using Heading Levels (Использование внутренних уровней заголовка)

4.2. Вставить в документ тег <Н1> и ввести заголовок: This is a level 1 heading (заголовок уровня 1)

4.3. Вставить в документ тег <Н2> и ввести заголовок: This is a level 2 heading (заголовок уровня 2)

4.4. Вставить в документ тег <Н3> и ввести заголовок: This is a level 3 heading (заголовок уровня 3)

4.5. Вставить в документ тег <Н4> и ввести заголовок: This is a level 4 heading (заголовок уровня 4)

4.6. Вставить в документ тег <Н5> и ввести заголовок: This is a level 5 heading (заголовок уровня 5)

4.7. Вставить в документ тег <Н6> и ввести заголовок: This is a level 6 heading (заголовок уровня 6)

4.8. Сохранить страницу под именем d1_1.html

4.9. Просмотреть страницу с помощью браузера

5. Продолжаем работать с созданной Web-страницей:

5.1. Ввести заголовок страницы: Using Paragraphes(Использование абзацев)

5.2. Вставить в документ заголовок: Example of ParagraphFormatting (Примеры форматирования абзацев)

5.3. Вставить и ввести содержание первого абзаца: This is paragraph 1 (Это абзац 1)

5.4. Вставить и ввести содержание второго абзаца: This is paragraph 2. This is was tacked on the end of paragraph 2. (Это абзац 2. Это было добавлено в конце абзаца 2)

5.5. Вставить и ввести содержание третьего абзаца: This is paragraph 3(Это абзац 3)

5.6. Сохранить страницу под именем d1_1.html

5.7. Просмотреть страницу с помощью браузера

6. Продолжаем работать с созданной Web-страницей:

6.1. Ввести заголовок страницы: Using Line Breaks (Использование обрыва строки)

6.2. Вставить в документ заголовок: Example of Line Breaks (Примеры обрыва строки)

6.3. Во втором абзаце вставить метку перехода на новую строку после слов: This is paragraph 2и добавить следующее содержимое. «В языкеHTMLнет никаких средств для создания абзацного отступа (красной строки), поэтому для удобства между абзацами обычно вводят пустую строку. Для создания разделителей в тексте используются горизонтальные полоски - линейки, они создаются с помощью дескриптораHR»

6.4. Во втором абзаце вставить метку перехода на новую строку после слов: This is was tacked on the

6.5. Вставить и ввести содержание третьего абзаца: This is paragraph 3 (Это абзац 3) со следующим содержимым. «Все лишние пробелы между словами и переходы на новую строку при воспроизведении документа игнорируются. Для перехода на новую строку без создания абзаца используется дескрипторBRилиPRE»

6.6. Сохранить страницу под именем d1_1.html

6.7.Просмотреть страницу с помощью браузера: InternetExplorer

7. Продолжаем работать с созданной Web-страницей:

7.1. Ввести заголовок страницы: Using Comment(Использование комментариев)

7.2. Вставить в документ заголовок: Exsamples of Comment (Примеры комментариев)

7.3.Просмотрите содержание первого абзаца: This is paragraph 1(Это абзац 1)

7.4. Просмотрите содержание второго абзаца: This is was tacked on the end of paragraph 2 (Это абзац 2. Это было добавлено в конце абзаца 2.)

7.5. Во втором абзаце вставить комментарий: This comment is in the middle of paragraph(комментарий в середине абзаца)

7.8. Сохранить страницу под именем d1_1. html

7.9. Просмотреть страницу с помощью браузера: InternetExplorer

8. Создать свою Web-страницу (наполнение может быть любое, тема ваша):

8.1. Ввести заголовок страницы.

8.2. Вставить в документ заголовок

8.3. Вставить и ввести содержание трех абзацев

8.4. Третий абзац организовать с тремя переходами на новую строку

8.5. Между абзацами поставить горизонтальные линии

8.6. После заголовка документа вставить комментарий

8.7.Сохранить станицу под именем d1_2.html

8.8.Просмотреть страницу с помощью браузера. Защитить лабораторную работу у преподавателя.