Создание web-страницы.
advertisement
Создание web-страницы. Цель работы: Создание HTML страницы. <html> <head> <title>(Ваша фамилия и инициалы)</title> </head> <body> Жизнь И.А. Крылова </body> </html> Добавив в текст тэг <body text="#336699">, мы зададим цвет шрифта для всего текста страницы. А если необходимо задать другой цвет для строк, слов или букв, вставляем нужный текст в контейнер <font></font>. Пример: <html> <head> <title> (Ваша фамилия и инициалы) </title> </head> <body text="#336699"> Жизнь<font color="#CC0000"> И.А. Крылова </font> </body> </html> Цвет фона страницы устанавливается в уже знакомом нам тэге <body>: <body bgcolor="(нужный Вам цвет)"> Пример: <html> <head> <title> (Ваша фамилия и инициалы) </title> </head> <body text="#336699" bgcolor="#000000"> Жизнь<font color="#CC0000"> И.А. Крылова </font> </body> </html> Для выделения заголовка страницы применим форматирование шрифта: Существуют шесть уровней заголовков: <H1> текст </H1> <H2> текст </H2> <H3> текст </H3> <H4> текст </H4> <H5> текст </H5> <H6> текст </H6> <b> Полужирный текст </b> <i> Наклонный текст (курсив) </i> <u> Подчеркнутый текст </u> Все эти тэги для выделения шрифта прописываются перед текстом. Пример: <html> <head> <title> (Ваша фамилия и инициалы) </title> </head> <body text="#336699" bgcolor="#000000"> <H3><u> Жизнь<font color="#CC0000"> И.А. Крылова</H3></u> </font> </body> </html> Для выравнивания текста или картинки применяются тэги <div align="center"> текст </div> выравнивание по центру <div align="left"> текст </div> выравнивание по левому краю <div align="right"> текст </div> выравнивание по правому краю <div align="justify"> текст </div> выравнивание по ширине. Пример: <html> <head> <title> (Ваша фамилия и инициалы) </title> </head> <body text="#336699" bgcolor="#000000"><div align="center"> <H3><u> Жизнь<font color="#CC0000"> И.А. Крылова</H3></u> </div> </font> </body> </html> Вставка изображений Для дальнейшего оформления страницы, вставим портрет писателя. Для этого пропишем тэг <img src="my.jpg"> Вместо my.jpg мы можем подставить имя любой картинки (me.gif, main.png). Самое главное понять, что все расположенное между кавычками – ссылка, т.е. путь к картинке. Чтобы скопировать ссылку к картинке, воспользуйтесь командой Переименовать, копируйте выделенное, вставьте в тэг и добавьте расширение, если необходимо). Картинку сохраняем в той же папке, где хранятся все материалы по сайту. Используя тэги выравнивания, поместим картинку с правого края страницы. Пример: <html> <head> <title> (Ваша фамилия и инициалы) </title> </head> <body text="#336699" bgcolor="#000000"><div align="center"> <H3><u> Жизнь<font color="#CC0000"> И.А. Крылова</H3></u> </div> <img src="(ваша ссылка)" align="right"> </font> </body> </html> Чтобы создать меню сайта, нам нужно отступить от картинки и создать список содержания сайта. Принудительный перевод строки осуществляется тэгом <br>. Списки вводятся тэгом <ul></ul>.Чтобы ввести элементы списка нам нужно ввести в нашу конструкцию тэг <li> (не требует закрывающего тэга): <ul> <li>Текст один <li>Текст другой <li>Текст сякой <li>Текст эдакий </ul> В итоге получим: Текст один Текст другой Текст сякой Текст эдакий Пример: <html> <head> <title> (Ваша фамилия и инициалы) </title> </head> <body text="#336699" bgcolor="#000000"><div align="center"> <H3><u> Жизнь<font color="#CC0000"> И.А. Крылова</H3></u> </div> <img src="(ваша ссылка)" align="right"> <br><br><br><br></br></br></br></br> <ul> <br><li>Биография И. А. Крылова</br> <br><li>Произведения И. А. Крылова</br> <br><li>Современники о творчестве писателя</br> <br><li>Портреты И.А. Крылова </br> </ul> </font> </body> </html> № Критерии самооценки Выполнено 1 2 3 4 5 6 7 8 9 Требуемый в описании файл создан Название размещено верно Изменен размер текста Изменен цвет текста Выравнивание выполнено Изменен цвет фона Рисунок размещен Выравнивание рисунка выполнено Список создан Параметры Выполнено частично Не выполнено
