Файл: Основы программирования на языке HTML (Язык HTML и его назначение)..pdf
Добавлен: 31.03.2023
Просмотров: 469
Скачиваний: 3
Значения атрибута TARGET следующие:
_blank — страница открывается в новом окне браузера;
_parent — страница загружается во фрейм-родитель;
_self — страница загружается в текущее окно;
_top — страница загружается в полное окно браузера.
Этот атрибут очень полезен, потому что иногда ссылку удобнее открыть в новом окне, например, когда она уводит на другой сайт, а вы не хотите, чтобы посетитель забыл о вашем сайте.
Вторым вспомогательным атрибутом является TITLE, который позволяет создать всплывающую подсказку для вашей ссылки. Это очень удобно, так как дает пользователю дополнительную информацию о том, что его ждет при щелчке кнопкой
мыши на ссылке. [4,c.79]
HTML-элемент заголовка (<title>) определяет заголовок документа, который отображается в заголовке окна браузера или на вкладке страницы. Он содержит только текст, а теги внутри элемента игнорируются.[16]Значением атрибута является текст всплывающей подсказки.
Листинг 1.30. Ссылки с дополнительными атрибутами
<html>
<head>
<title>Ссылки</title>
<body>
<a href="aboutme.html" target="_blank" title="Пройдя по ссылке, вы сможете
узнать обо мне">Обо мне</a>
</body>
</html>
Всплывающая подсказка помогает посетителю страницы решить, нужно ли ему переходить по ссылке. Любая ссылка, как внешняя, так и внутренняя, может приводить к изображению. Другими словами, новая страница будет открываться при щелчке кнопкой мыши на картинке. Можно, например, создать миниатюрные копии фотографий, при щелчке кнопкой мыши на которые будет открываться фотография большего размера. Для создания ссылки-изображения достаточно поместить картинку внутрь тега <A>. В листинге 1.31 представлен пример создания ссылки-изображения.
Листинг 1.31. Ссылки-изображения
<html>
<head>
<title>Ссылки</title>
<body>
<a href="mypetfoto.html" target="_
blank" title="Пройдя по ссылке, вы
сможете увидеть фото моего зверя"><img
src="mypetfotomini.jpg" /></a>
</body>
</html>
Вы можете создать ссылку любого вида на каждый объект. Следите за тем, чтобы ссылки имели понятные названия, соответствующие содержанию документов, появляющихся при щелчке кнопкой мыши на них. Это гарантирует, что посетители будут довольны сайтом и в дальнейшем снова зайдут на него. [4,c.81]
Вывод по второй главе.
Web-страницы можно создать с помощью текстового редактора, потому что они представлены в виде отдельного текстового файла. На web – странице представлены не только текст, но и другие элемента, такие как таблицы, картинки, списки, гиперссылки. Для того чтобы разместить все это на страничке необходимо пользоваться специальными наборами команд-тегами.
Язык HTML позволяет вставить в тело документа графические объекты: схемы, рисунки, фотографии jpeg, gif, png форматов. С помощью определенных тегов можно вставлять гиперссылки, делая формат странички удобнее для использования. Вставляя в документ списки информация организуется, web-страница становится удобнее в использовании. Соблюдая определенные правила оформления можно сделать правильно логически выстроенный сайт.
Глава 3. Алгоритм практической работы
3.1. Подготовка
Для создания web-сайта я использовала программу NeonHTML. Подготовила нужную мне информацию. В своей работе я попыталась использовать все, рассмотренные в курсовой работе, этапы создания сайта. Для сайта я взяла тему «Цветы», потому что в данной тематике легко использовать все этапы написания сайта. Можно разобрать как вставляются картинки, цитаты, списки и ссылки, так как материал подбирается легко, больше времени можно уделить техническим моментам.
3.2. Создание сайта
На странице я разместила информацию про несколько самых красивых цветов мира. Сделала заголовки разных уровней с выравниванием по центру, выделила абзацы с текстовой информацией. Дальше сделала список с внутренними ссылками, которые отправляют на ту часть страницы, где расположен более подробный рассказ и картинки соответствующих цветов. В конце вставила таблицу, которая содержит информацию о том к каким семействам принадлежат выбранные мною цветы.
Ниже предоставляю документ созданный с помощью языка гипертекстовой разметки HTML.
<html>
<head>
<title>Цветы </title>
</head>
<body>
<h1 align="center">Цветы</h1>
<br>
<p align="right" title=>"Цветы - стихи природы"</p>
<br>
<p align="left" title="Абзац, выровненный по левому краю">Цветок - самый простой способ, показать любимому человеку свои чувства и эмоции. Когда мы видим красивый цветок, мы чувствуем себя счастливыми. Чудесные цветы могут вызвать улыбку даже у тех людей, кому сейчас тяжело. Ниже рассказано о пяти самых красивых цветах .</p>
<ul type="circle">
<a href="#razdel1"><li>Аквилегия колумбийская</li> </a>.
<a href="#razdel2"><li>Альстрёмерии</li></a>.
<a href="#razdel3"> <li>Африканские маргаритки</li> </a>.
<a href="#razdel4"> <li>Белый лотос</li> </a>.
<a href="#razdel5"> <li>Бромелия</li> </a>.
</ul>
<a name="razdel1"> <h2 align="center">Аквилегия колумбийская</h2> </a>
<br>
<p align="center" title="Абзац, выровненный по центру">Это чудо растет в высоких скалистых горах, на высоте около 4200 метров. Очень редко можно увидеть эти цветы в продаже,<br /> и даже если вы нашли их где-нибудь в магазине, вам придется заплатить довольно высокую цену.</p>
<br>
<img src="67486653_654336728420569_1098876368093567786_n.jpg" alt= "Аквилегия колумбийская"width="500" height="450" >
<a name="razdel2"> <h2 align="center">Альстрёмерии</h2> </a>
<p align="center" title="Абзац, выровненный по центру">Перуанские лилии или Альстрёмерии насчитывают более чем 50 уникальных сортов. Научное название этого растения - альстромерия.<br /> Цветок произрастает в Южной Америке и очень любим местными ценителями флоры.</p>
<img src="1.jpeg"alt= "Альстрёмерии"width="700" height="500" >
<br>
<a name="razdel3"> <h2 align="center">Африканские маргаритки</h2> </a>
<p align="center" title="Абзац, выровненный по центру">Африканские маргаритки - красивые цветы, которые принадлежат к семейству календуловых. Есть примерно около 50 видов африканских маргариток,<br /> а их расцветка бывает фиолетовой, розовой, желтой, кремовой, белой и лиловой.<br /> Маргаритки - типичные для Африки цветы, предпочитающие расти в теплых солнечных местах.</p>
<img src="78c097b41961c9c1923d0b29d7100410.jpg"alt= "Африканские маргаритки"width="1000" height="500" >
<br>
<a name="razdel4"> <h2 align="center">Белый лотос</h2> </a>
<p align="center" title="Абзац, выровненный по центру">Белый лотос называют египетской белой кувшинкой или тигровым лотосом. Вид происходит из семейства Nymphaeaceae и растет<br /> в различных частях Северной Азии и Восточной Африки. Цветки плавают на воде, опираясь на широкие листья.</p>
<img src="unnamed.jpg"alt= "Белый лотос"width="700" height="500" >
<br>
<a name="razdel5"><h2 align="center">Бромелия</h2> </a>
<p align="center" title="Абзац, выровненный по центру">Бромелия принадлежит к семейству бромелиевые. Они широко распространены по всей Вест-Индии и Латинской Америке. <br />Цветы имеют очень глубокую чашечку, которая является их особенностью. Вид назван в честь шведского ботаника и врача по имени Олоф Бромелиус.</p>
<img src="бромелия.jpg"alt= "Бромелия"width="500" height="500" >
<br>
<br>
<table>
<caption>Семейство </caption>
<tr><th>Номер</th><th>Название</th><th>Семейство</th></tr>
<tr><td> 1.</td><td>Аквилегия колумбийская</td><td>Лютиковые </td></tr>
<tr><td> 2.</td><td>Альстрёмерии </td><td>Альстрёмериевые </td></tr>
<tr><td> 3.</td><td>Африканские маргаритки </td><td>Астровые </td></tr>
<tr><td> 4.</td><td>Белый лотос </td><td>Лотосовые </td></tr>
<tr><td> 5.</td><td>Бромелия </td><td>Бромелиевые</td></tr>
</table>
</body>
</html>
Заключение
Изучая и применяя на практике язык гипертекстовой разметки HTML, мы можем создавать сайты, с помощью обычных текстовых редакторов или с использованием специальных программ.
Для того чтобы разместить на страничке текст, картинки, ссылку и другие графические объекты необходимо пользоваться специальными наборами команд-тегами. В языке HTML применяются команды, которые подчиняются определенным правилам построения.
При выполнении курсовой работы были решены поставленные задачи.
1.Была изучена и проанализирована литература по теме основы программирования на языке HTML. В своей работе, для точного изучения этого вопроса я использовала литературу которая написана известными программистами. Так же я пользовалась справочными сайтами для программистов и ссылалась на данные научно электронной библиотеки.
2. Главной задачей языка гипертекстовой разметки HTML является обеспечение правильного, логически выстроенного контента. HTML дает информацию браузеру о структуре документа. Получив определенную информацию, web-браузер использует встроенные правила о том, как воспроизводить каждый из этих элементов.
3. Теоретически процесс создания сайта был рассмотрен и изучен. Определились основы написания сайта и основные моменты, которые были рассмотрены во второй главе.
4. В 3 главе я предоставила созданный мною сайт с использованием языка гипертекстовой разметки HTML. Структура сайта включает в себя: заголовки разных уровней, текстовая информация, изображения цветов, списки, внутренние ссылки, таблица.
Разработанный сайт включает в себя приемы работы с языком HTML, рассмотренные в теории.
Таким образом, язык гипертекстовой разметки HTML при выполнении всех правил программирования позволяет создать сайт любой тематики, и уровня сложности.
Библиография
- Борсук Н.А. Анализ средств разработки web- страниц // Международный научный журнал «Символ науки». – 2016. -№11. – С.41.
- Джамса Крис. Эффективный самоучитель по креативному Web-дизайну. HTML, XHTML, CSS,JavaScript, PHP, ASP, ActiveX. Текст, графика, звук и анимация. Пер с англ./Крис Джамса, Конрад Кинг, Энди Андерсон - М.: ООО "ДиаСофтЮП", 2005.- 672 с.
- Зайцева Е.А. Учебно-методическое пособие ГОУ ВПО «Тамбовский государственный технический университет», Педагогический Интернет-клуб, 2007. – С.31.
- Квинт И. Создаем сайты с помощью HTML, XHTML и CSS. 4-е изд. – СПб.: Питер,2017.-464 с.
- Монахов В.В. Язык программирования Java и среда NetBeans. – 3-е изд., перераб. и доп.- СПб.: БХБ-Петербург, 2011.-704 с
- Петюшкин А. Html. Экспресс-Курс:книга/А. Петюшкин.-Спб.: Бхв-Петербург, 2010. -25с.
- Пилгрим М. Погружение в HTML5: перев. с англ. — СПб.: БХВ-Петербург, 2011. — 304 с.: ил.
- Роббинс Дж. P 58 HTML5, CSS3 и JavaScript. Исчерпывающее руководство / Дженнифер Роббинс; [пер. с англ. М. А. Райтман]. — 4-е издание. — М. : Эксмо, 2014. — 528 с. + DVD. — (Мировой компьютерный бестселлер).
- Степаньян В. В. Особенности методики обучения созданию сайтов и порталов для коммерческого использования // Концепт. – 2014. – С. 3.
- Ташков П. А. Веб-мастеринг на 100 %: HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка. — СПб.: Питер, 2010. — 512 с.
- Фримен Элизабет Фримен Эрик Изучаем НТМL, CSS и ХНТМL Москва, - 2012. – С. 40.
- Шмаков М. С. Электронное издание по курсу «Метрология и технические измерения» Жилищное право [Электронный ресурс] : актуальные вопросы законодательства : электрон. журн. 2007. № 1. URL: http://www.gilpravo.ru (Дата обращения: 02.02.2020).
- BASICWEB.RU https://basicweb.ru/html/ssilki.php (Дата обращения: 01.02.2020)
- Лекция 5. Язык для создания гипертекстовых документов в среде WEB - HyperText Markup Language (HTML) URL: http://bookwu.net/book_kompyuternye-seti_863/20_lekciya-5.-yazyk-dlya-sozdaniya-gipertekstovyh-dokumentov-v-srede-web-hypertext-markup-language-html (Дата обращения: 01.02.2020)
- Компьютерная документация от А до Я. URL: http://www.compdoc.ru/internet/html/htmlbook/ (Дата обращения: 05.02.2020)
- Веб-технологии для разработчиков URL:https://developer.mozilla.org/ru/docs/Web/HTML/Element/title (Дата обращения: 01.02.2020)
- Самоучитель HTML URL: http://htmlbook.ru/html/br (Дата обращения: 01.02.2020)
- Самоучитель HTML URL: http://htmlbook.ru/content/formatirovanie-teksta (Дата обращения: 01.02.2020)
- Самоучитель HTML URL: http://htmlbook.ru/faq/kak-dobavit-kartinku-na-veb-stranitsu (Дата обращения: 11.02.2020)
- Самоучитель HTML URL: http://htmlbook.ru/html/del (Дата обращения: 11.02.2020)
- Самоучитель HTML URL: http://htmlbook.ru/html/img/align (Дата обращения: 11.02.2020)
- Погружение в HTML5 URL: https://html5book.ru/css-border (Дата обращения: 10.02.2020)
- Самоучитель HTML URL: http://htmlbook.ru/samhtml/spiski (Дата обращения: 10.02.2020)
- Погружение в HTML5 URL: https://html5book.ru/html-lists (Дата обращения: 01.02.2020)
- Погружение в HTML5 URL: https://html5book.ru/html-lists#part2 (Дата обращения: 05.02.2020)
- Интернет технологии URL:https://www.internet-technologies.ru/articles/abzac-v-html.html (Дата обращения: 05.02.2020)
- HTML справочник URL: http://mpbox.ru/html/attributes/frame.html (Дата обращения: 01.02.2020)
- Интернет компания R52 URL:http://prodvizhenie.r52.ru/ru/blog/abzatc_v_html/ (Дата обращения: 11.02.2020)
- HTML URL: http://programmerbook.ru/html/a/target/ (Дата обращения: 10.02.2020)
- Самоучитель и справочник по HTML, CSS, JavaScript и PHP URL: https://puzzleweb.ru/html/tag_th.php (Дата обращения: 10.02.2020)
- HTML URL: http://programmerbook.ru/html/a/target/ (Дата обращения: 01.02.2020)
- Справочник тегов HTML URL: https://guruweba.com/html/teg-ins-html-dobavlennyy-tekst/ (Дата обращения: 01.02.2020)
- Гиперссылки в HTML URL:http://www.seoded.ru/beginner/html/giperssilki.html#ixzz6Dag5ATot (Дата обращения: 11.02.2020)
- Учебник HTML URL: http://www.webremeslo.ru/html/glava14.html (Дата обращения: 10.02.2020)
- HTML5 и CSS3 на примерах URL: https://webref.ru/layout/html5-css3/img/scale (Дата обращения: 11.02.2020)
- Справочник HTML URL: https://webref.ru/html/img/alt (Дата обращения: 05.02.2020)
- В помощь веб - мастеру URL: https://wm-help.net/lib/b/book/2723332583/32 (Дата обращения: 10.02.2020)
- Погружение в HTML5 URL: https://html5book.ru/html-lists#part4 (Дата обращения: 05.02.2020)