Навигация:

Главная Случайная страница Обратная связь ТОП Интересно знать Избранные Новые материалы

Топ:

Проблема типологии научных революций: Глобальные научные революции и типы научной рациональности...

Теоретическая значимость работы: Описание теоретической значимости (ценности) результатов исследования должно присутствовать во введении...

История развития методов оптимизации: теорема Куна-Таккера, метод Лагранжа, роль выпуклости в оптимизации...

Интересное:

Искусственное повышение поверхности территории: Варианты искусственного повышения поверхности территории необходимо выбирать на основе анализа следующих характеристик защищаемой территории...

Мероприятия для защиты от морозного пучения грунтов: Инженерная защита от морозного (криогенного) пучения грунтов необходима для легких малоэтажных зданий и других сооружений...

Что нужно делать при лейкемии: Прежде всего, необходимо выяснить, не страдаете ли вы каким-либо душевным недугом...

Дисциплины:

Автоматизация Антропология Археология Архитектура Аудит Биология Бухгалтерия Военная наука Генетика География Геология Демография Журналистика Зоология Иностранные языки Информатика Искусство История Кинематография Компьютеризация Кораблестроение Кулинария Культура Лексикология Лингвистика Литература Логика Маркетинг Математика Машиностроение Медицина Менеджмент Металлургия Метрология Механика Музыкология Науковедение Образование Охрана Труда Педагогика Политология Правоотношение Предпринимательство Приборостроение Программирование Производство Промышленность Психология Радиосвязь Религия Риторика Социология Спорт Стандартизация Статистика Строительство Теология Технологии Торговля Транспорт Фармакология Физика Физиология Философия Финансы Химия Хозяйство Черчение Экология Экономика Электроника Энергетика Юриспруденция

Разработка сайтов (Основы Н TML)

2020-05-10

168

0.00 из 5.00 0 оценок

Заказать работу

Стр 1 из 3Следующая ⇒

Разработка сайтов (Основы Н TML)

Практические работы по теме «Создание Web -страницы в языке HTML»

Структура Web-страницы. Большая часть тэгов образует контейнер, состоящий из открывающего и закрывающего тэгов. Тэги можно набирать как заглавными, так и строчными буквами.

Web-страница помещается в контейнер <HTML></HTML>и.состоит из двух частей: заголовка и отображаемого в браузере содержания.

Заголовок страницы помещается в контейнер <HEAD></HEAD>. Заголовок содержит название страницы, которое помещается в контейнер <TITLE></TITLE> и при просмотре отображается в верхней строке окна браузера.

Также в заголовок помещаются не отображаемые при просмотре мета-тэги, задающие кодировку страницы для ее правильного отображения в браузере, а также содержащие описание и ключевые слова страницы, которые в первую очередь просматривают роботы поисковых систем.

Отображаемое в браузере содержание страницы помещается в контейнер <BODY></BODY>.

Работа 1. Основные тэги HTML

Создать Web-страницу, знакомящую с основными тэгами HTML.

1. Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные - Блокнот].

2. Ввести HTML-код, задающий структуру Web-страницы:

<HTML>
<HEAD>
<TITLE> Первое знакомство с тэгами HTML</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

3. Ввести команду [Файл - Сохранить]. Файлу Web-страницы присвоить имя ваша_фамилия.htm

4. Запустить браузер и открыть созданный файл командой [Файл - Открыть]. В заголовке окна браузера высвечивается название Web-страницы Первое знакомство с тэгами HTML.

5. Заголовки. Внести в текст страницы после <BODY> в пустую строку тэги заголовков различных уровней (размеров).

Заголовки различных уровней:

<H1>Заголовок первого уровня</H1>
<H2>Заголовок второго уровня</H2>
<H3>Заголовок третьего уровня</H3>
<H4>Заголовок четвертого уровня</H4>
<H5>Заголовок пятого уровня</H5>
<H6>Заголовок шестого уровня</H6>

6. Внесение изменений и дополнений в Web-страницу. В процессе создания Web-страницы приходится добавлять новые тэги и просматривать получаемый результат.

7. Активизировать Блокнот с открытой в нем редактируемой Web-страницей. Внести в содержимое страницы необходимые изменения и сохранить новый вариант страницы, выполнив команду меню [Файл - Сохранить].

8. Активизировать браузер с открытым в нем предыдущим вариантом страницы. Щелкнуть по кнопке Обновить. В окне браузера отобразится обновленная Web-страница.

Работа 5. Оформление гиперссылок.

1.. Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные - Блокнот].

2. Открыть файл index. htm

3. Различные виды гиперссылок. Связать Web-страницу с другими документами можно с помощью универсального тэга <A>, и его атрибута HREF, указывающим в каком файле хранится вызываемый ресурс.

<A HREF="file_name">Указатель ссылки</A>

file_name – путь к файлу или его URL-адрес в Интернете. Если вызываемый документ размещается в той же папке, что и Web-страница, то можно указывать только имя файла.

Указатель ссылки в окне браузера выделяется подчеркиванием и особым цветом. При указании на него мышью, ее курсор превращается в значок «рука». Щелчок мыши по указателю, вызывает переход на документ, указанный в гиперссылке.

Используем различные значения атрибута HREF для реализации различных реакций браузера:

< A HREF =" index 1. htm ">Моя вторая страничка</ A > (Сохранить файл и Обновить страничку)

А теперь с оформлением выравнивания и шрифтов Исправляем предыдущую запись.

< A HREF =" index 1. htm ">< P ALIGN =" center ">< FONT SIZE ="4" COLOR ="# FFaa 11" FACE =" Arial "> Моя вторая страничка</ FONT ></ P ></ A > (Сохранить файл и Обновить страничку)

4. Создадим вторую страничку. Для этого откроем Блокнот еще раз. И наберем в нем следующий текст.

<HTML>

<HEAD>

< TITLE >Моя втораЯ страница</ TITLE >

</HEAD>

<BODY>

<BODY BGCOLOR="#FF00CC" BACKGROUND="fon.png" TEXT="#993300" LINK="#00FF00" ALINK="#FF0000" VLINK="#00FF00">

< А HREF="index.htm"><P ALIGN="center"><FONT SIZE="4" COLOR="#FFaa11" FACE="Arial"> Моя первая страничка </A>

</BODY>

</HTML>

5. Сохраним файл под именем index 1. htm.

6. Запустить первый файл index. htm. З апустим гиперссылку Моя втораЯ страница.

В качестве указателя ссылки можно использовать не только текст, но и изображение. В этом случае указатель ссылки задается с помощью тэга <IMG>.

Пусть в нашем проекте при щелчке мышью по маленькому рисунку, вызывается ее крупная фотография. Такой прием часто используют, для снижения времени загрузки страницы. Посетитель увидит уменьшенные копии рисунков, а при желании, сможет загрузить полномасштабное изображение. Дополним нашу страничку, введем текст в пустую строку в файл index 1. htm. . < A HREF="carsk.jpg"><IMG SRC="carsk.gif" HEIGHT="75"></A>

Align

Допустимые значения: LEFT, CENTER и RIGHT. Определяет положение таблицы по отношению к полям документа. По умолчанию установлено выравнивание по левому краю, но это можно изменить путем включения в документ элемента DIV или CENTER.

DIV и CENTER

Элементы DIV можно использовать для разбиения HTML-документа на несколько разделов (англ. division — раздел). Для указания горизонтального выравнивания внутри элемента DIV можно использовать атрибут ALIGN с допустимыми значениями LEFT, CENTER и RIGHT (аналогично принятому для абзацев <P>).

Обратите внимание: элемент DIV по определению закрывает открытый абзац P. За исключением этого случая, браузеры не показывают элемент DIV на экране. Элемент <CENTER> полностью равнозначен <DIV ALIGN=CENTER>. В элементах DIV и CENTER обязательны открывающие и закрывающие метки.

Width

При отсутствии этого атрибута ширина таблицы определяется автоматически в зависимости от содержимого. Атрибут WIDTH можно использовать для установки фиксированной ширины в пикселах (например, WIDTH=212) или в процентах от пространства между левым и правым полем (например, WIDTH="80%").

Border

Используется для указания ширины внешней окантовки таблицы в пикселах (например, BORDER=4). Значение можно установить равным нулю, в результате чего окантовка не будет видна. В отсутствие этого атрибута окантовка также не должна показываться на экране. Обратите внимание: некоторые браузеры воспринимают метку <TABLE BORDER> точно так же, как BORDER=1.

Cellspacing

В традиционном издательском программном обеспечении расположенные рядом ячейки таблицы имеют общую окантовку. В HTML это не так. Каждая ячейка имеет собственную окантовку. Ширина окантовки ячейки в пикселах устанавливается атрибутом CELLSPACING (например, CELLSPACING=10). Этот атрибут также устанавливает расстояние между окантовкой таблицы и окантовками крайних клеток таблицы.

Cellpadding

Устанавливает расстояние между окантовкой ячейки таблицы и содержимым ячейки.

Элемент CAPTION может иметь один атрибут ALIGN со значением ALIGN=TOP или ALIGN=BOTTOM. Соответственно, заголовок таблицы показывается либо над, либо под таблицей. Большинство браузеров по умолчанию показывают заголовок над таблицей. Открывающая и закрывающая метки обязательны. В заголовках тыблиц не разрешаются элементы уровня блока.

Элемент TR открывает описание строки таблицы. Закрывающая метка не обязательна. Имеет два стрибута:

Align

Устанавливает горизонтальное выравнивание в ячейках строки. Допустимые значения: LEFT, CENTER и RIGHT. Действие аналогично атрибуту ALIGN у абзацев.

Valign

Устанавливает вертикальное выравнивание в ячейках строки. Допустимые значения: TOP, MIDDLE и BOTTOM; содержимое ячеек при этом выравнивается по верхнему краю, по центру или по нижнему краю.

Существует два элемента, определяющих ячейки таблицы. TH используется для ячеек-заголовков, а TD - для ячеек с данными. Открывающие метки обязательны, закрывающие - нет. Ячейки могут иметь следующие атрибуты:

Nowrap

Этот атрибут запрещает автоматический перевод текста со строки на строку внутри ячейки таблицы (например, <TD NOWRAP>). Эффект применения этого атрибута аналогичен использованию объекта   вместо пробела по всему содержимому ячейки.

Rowspan

Используется с положительным целым значением числа строк таблицы, занятых ячейкой. По умолчанию принято равным единице.

Colspan

Используется с положительным целым значением числа колонок таблицы, занятых ячейкой. По умолчанию принято равным единице.

Align

Указывает принятое по умолчению выравнивание содержимого ячейки. Имеет приоритет над значением, установленным атрибутом ALIGN строки таблицы. Допустимые значения те же самые: LEFT, CENTER и RIGHT. Если атрибут ALIGN не указан, принятое по умолчанию выравнивание - по левому краю для <td> и по центру для <th>, однако это можно изменить установкой атрибута ALIGN элемента TR.

Valign

Указывает принятое по умолчению выравнивание содержимого ячейки. Имеет приоритет над значением, установленным атрибутом ALIGN строки таблицы. Допустимые значения те же самые: TOP, MIDDLE и BOTTOM. Если атрибут VALIGN не установлен, по умолчанию принято выравнивание по центру, однако это можно изменить установкой атрибута VALIGN элемента TR.

Width

Указывает рекомендуемую ширину содержимого ячейки в пикселах. Значение используется только в случаях, когда оно не противоречит требованиям к ширине других ячеек в колонке.

Height

Указывает рекомендуемую высоту содержимого ячейки в пикселах. Значение используется только в случаях, когда оно не противоречит требованиям к высоте других ячеек в строке.

Таблицы, как правило, показываются на экране "приподнятыми" над поверхностью страницы, а ячейки - "вдавленными" в тело таблицы. Ячейки выделяются окантовкой только если в них есть содержимое. Если содержимое ячейки состоит только из пробелов, ячейка считается пустой, за исключением случаев, когда в ней есть хотя бы один объект  .

Разработка сайтов (Основы Н TML)

12 3 Следующая ⇒

Поделиться с друзьями:

Индивидуальные очистные сооружения: К классу индивидуальных очистных сооружений относят сооружения, пропускная способность которых...

Индивидуальные и групповые автопоилки: для животных. Схемы и конструкции...

Своеобразие русской архитектуры: Основной материал – дерево – быстрота постройки, но недолговечность и необходимость деления...

Двойное оплодотворение у цветковых растений: Оплодотворение - это процесс слияния мужской и женской половых клеток с образованием зиготы...