1. Скопируйте на свой диск с диска K, из папки /tutor/internet/lab01 файл blank.htm и сразу же переименуйте его как lab01-1.htm
В дальнейшем, обязательно используйте файл blank.htm в качестве шаблона для файлов с лабораторными работами.
2. Щелкнув по ярлыку, запустите html-редактор Smart Web Builder. Используя пункты меню Файл и Открыть, откройте файл lab01-1.htm.
3. Только средствами HTML (т.е. без применения CSS!) создайте html-документ, в котором в заголовке окна браузера должна быть надпись «Лаб. 1» и ваши фамилия и имя, а на экране текст следующего вида:
Фон документа задать светло-серым (silver).
Название университета, факультета и лабораторной оформить как заголовки разного размера, а все остальное — как текст, расположенный слева или справа на экране. Обратите внимание, где именно используется полужирный шрифт, а где курсив.
Отрывок из стихотворения расположить со сдвигом вправо,
шрифт — курсив, цвет — темно-синий (navy).
Фамилия автора стихов должна быть справа и меньшим размером шрифта,
причем инициалы отделить от фамилии неразрывным пробелом.
Текст стихотворения
находится здесь. Его нужно просто скопировать
из открывшегося окна в окно Smart Web Builder.
По окончании редактирования html-документа, сохраните его, а затем в окне Проводника
щелкните мышью по названию файла — в результате этого данный
html-документ автоматически откроется в окне Internet Explorer и вы увидите, что получилось.
Если что-то не так, вернитесь в Smart Web Builder, внесите исправления, сохраните файл,
снова перейдите в окно Internet Explorer и нажмите кнопку "Обновить" — только
тогда вы увидите внесенные изменения на экране.
Кроме этого в Smart Web Builder есть возможность работать в режиме одновременного редактирования и просмотра того, что получается.
Все подпункты этого задания делаются в одном файле lab01-2.htm одно за другим (используйте файл blank.htm).
В этом файле обязательно применив средства CSS (в частности, селекторы по классу), создайте html-документ, в котором:
1) в заголовке окна браузера должна быть надпись «Лаб. 1» и ваши фамилия и имя,
2) фон документа задан цветом #FFF5EE,
3) текст документа задан цветом #A52A2A,
4) все заголовки установлены уровня 3, по центру, имеют цвет — darkorange,
5) линии имеют цвет #A52A2A и размещаются по центру.
В этом задании:
Заголовок выполните гарнитурой Arial (средствами CSS).
Текст отформатируйте, используя список определений. Обратите внимание, где именно используется полужирный шрифт, а где курсив.
До и после задания проведите линию на всю ширину экрана.
В этом задании:
Заголовок выполните гарнитурой Garamond (средствами CSS).
Пункты содержания отформатируйте, используя маркированный список. Обратите внимание, какой именно вид маркера у пунктов содержания.
После задания проведите линию на всю ширину экрана.
В этом задании:
Сравнив с образцами гарнитур в теории, определите, какой гарнитурой выполнен заголовок. Сделайте заголовок этой гарнитурой (средствами CSS).
Текст отформатируйте, используя нумерованный список. Обратите внимание
на то, как именно пронумерован каждый пункт и на расстояния между пунктами.
У вас оно должно быть таким же, как в образце.
После задания проведите линию на всю ширину экрана.
В этом задании:
В тексте звездочки (*) нужно заменить на символьные примитивы в соответствии с образцом (знак параграфа, многоточие, тире и неразрывный пробел, различные кавычки, символы национальных алфавитов).
Текст абзаца, относящегося к первому параграфу выровнять по ширине (средствами CSS).
Но! Разрывы строк в этом абзаце подгонять под образец не нужно! Сколько у вас слов в строку поместится,
столько пусть и будет.
Обратите внимание, где именно используется полужирный шрифт, а где курсив.
Учтите, что по правилам типографики недопустимо, чтобы единица измерения (км, кг, знак градуса или валюты и т.п.) оказалась на новой строке, а стоящее впереди число — на предыдущей. То есть число и единица измерения всегда должны быть соединены неразрывным пробелом или, если пробел недопустим, необходимо использовать запрет разрыва строки.