Создание сайта. Язык разметки гипертекста
реклама
HTML Hyper Text Markup Language Язык разметки гипертекста Автор: Палецкая А.Ю. учитель информатики МОУ Сортавальского МР РК СОШ №1 Язык разметки гипертекста Для создания web-страниц используется специальный язык разметки гипертекста, который называется HTML. Страница на этом языке представляет собой обычный текстовый файл, в который добавлены специальные инструкции – теги. Существует два способа создания webстраниц: вручную и с помощью визуальных HTML редакторов. Создание web-страниц вручную Откроем программу Блокнот: И наберем в ней следующие теги: <HTML> <BODY> </BODY> </HTML> Сохраним файл под именем index.htm в созданной папке My_site Редактирование сайта В папке My_site найдем файл index.htm и откроем его двойным щелчком мыши. Страница пустая, поскольку мы ничего не написали между тегами <BODY> и </BODY>. Чтобы продолжить ввод текста, нужно в меню Вид окна браузера найти команду Просмотр HTML кода: Ввод текста <HTML> <BODY> Мама мыла раму </BODY> </HTML> Ввод абзацев <HTML> <BODY> Мой дядя самых честных правил, Когда не в шутку занемог, Он уважать себя заставил И лучше выдумать не смог. </BODY> </HTML> Результат Ввод абзацев <HTML> <BODY> Мой дядя самых честных правил,<BR> Когда не в шутку занемог,<BR> Он уважать себя заставил<BR> И лучше выдумать не смог.<BR> </BODY> </HTML> Результат Начертание <B>…</B> жирный <I>…</I>курсив <U>…</U> подчеркнутый Начертание <HTML> <BODY> Мой <I><B>дядя</B></I> самых честных правил,<BR> Когда не в шутку занемог,<BR> Он уважать себя заставил<BR> И лучше выдумать не смог.<BR> </BODY> </HTML> Вопрос: Как будет оформлено слово «дядя»? Цвет шрифта <HTML> <BODY> <FONT COLOR=“Blue”> Мой <I><B>дядя</B></I> самых честных правил,<BR> Когда не в шутку занемог,<BR> Он уважать себя заставил<BR> И лучше выдумать не смог.<BR> </FONT> </BODY> </HTML> Выравнивание абзацев <P ALIGN="left"> На этом сайте вы сможете получить различную информацию о компьютере, его програмном обеспечении и ценах на компьютерные комплектующие.</P> <P ALIGN="right">Терминологический словарь познакомит вас с компьютеными терминами, а также вы сможете заполнить анкету.</P> Выравнивание по ширине <P ALIGN=«JUSTIFY»> Поля <BODY LEFTMARGIN=30 RIGHTMARGIN=30> Горизонтальная линия: <HR> <HR WIDTH=50%> Списки(нумерованный) <OL> <LI> Физика </LI> <LI> Математика </LI> <LI> История </LI> </OL> Результат: 1. Физика 2. Математика 3. История Списки(маркированный) <UL> <LI> Физика </LI> <LI> Математика </LI> <LI> История </LI> </UL> Результат: •Физика •Математика •История Теги для оформления заголовков <H1>Заголовок первого уровня</H1> <H2>Заголовок второго уровня</H2> <H3>Заголовок третьего уровня</H3> <H4>Заголовок четвертого уровня</H4> <H5>Заголовок пятого уровня</H5> <H6>аголовок шестого уровня</H6> Результат оформления заголовков Задание Практическая работа «Создание web-страницы на заданную тему» Разработать страницу сайта Компьютерный салон: «Наши сотрудники» Заголовок сайта: «Компьютерный салон» оформить тегами заголовка второго уровня Заголовок страницы «Наши сотрудники» оформить тегами заголовка третьего уровня На странице создать нумерованный список: 1. Звонарев О.И. – директор 2. Полякова Е.С. – бухгалтер 3. Попов И.Н. – продавец-консультант 4. Егоров М.Л. – продавец-консультант 5. Сергеева Е.Ю. – кассир Отделить список от заголовка горизонтальной линией.
