Файл: Языки гипертекстовой разметки (Возможности применения технологии HTML в образовательном процессе).pdf

Скачать файл
Заказать решение

ВУЗ: Не указан

Категория: Курсовая работа

Дисциплина: Не указана

Добавлен: 14.05.2023

Просмотров: 334

Скачиваний: 2

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

СОДЕРЖАНИЕ

Введение

Глава 1. Теоретические основы языков разметки

1.1. История языков разметки

1.2. Языки разметки

Глава 2. Изучение языков разметки на примере HTML

2.1. Преимущества и недостатки языка HTML

2.2. Синтаксический анализатор HTML в браузерах

2.3. Возможности применения технологии HTML в образовательном процессе

Глава 3. Особенности создания информационного сайта образовательного учреждения

Заключение

Список литературы

Всё, что находится между этими тегами, является телом документа.

Стоит дополнить этот тег атрибутом background со ссылкой на изображение, создав, таким образом, фон для сайта. Получится <body background=”fon.jpg”>. Ниже будет идти конструкция - table (таблица) с атрибутами bgcolor (цвет фона таблицы), border (толщина внешней рамки), width (ширина таблицы в пикселях), align (выравнивание по горизонтали). Цветом фона таблиц выберем белый, ширину зададим в 900 пикселей, выравнивание по центру. Толщина внешней рамки будет равна единице. Далее необходимо добавить строки. Тег <tr> служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега <th> или <td>. Закрывающий тег использовать не обязательно.

Теперь теги дополняем атрибутами <tr width (ширина ячеек данной строки), height (высота)>; colspan (объединение соседних ячеек); valign (выравнивание содержимого по вертикали), top (выравнивание по верхнему краю), bottom (по нижнему), middle (центрирование). В первой клетке «таблицы» укажем, что это «Информационный сайт Центра СПО» и сделаем выравнивание слева. Вторая строка будет ссылкой на сайт ЕГУ им. И.А. Бунина.

Создадим ссылку с помощью href. Этот атрибут задает адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущее окно браузера, однако это свойство можно изменить с помощью атрибута target. Атрибут является обязательным для ссылок. В нашем случае, мы просто укажем внутри атрибута ссылку на сайт университета. Теперь при нажатии на кнопку, пользователь перейдёт по ссылке.

Далее проделаем подобные манипуляции, сделав в третьей клетке ссылку на основной сайт Центра СПО. Теперь нужно добавить фотографии на сайт. С помощью строк и элемента img, задав параметры width и height, укажем путь к нашей фотографии. Пусть это будет фотография с выступления студентов СПО на Дне открытых дверей ЕГУ.

Рисунок 8. Добавление изображений

Далее создадим логотип, установив его во второй, средней ячейке таблицы. Для большего взаимодействия с сайтом сделаем так, чтобы при нажатии на логотип появлялась фотография корпуса СПО.

Рисунок 9. Результат работы с кодом

В последнюю ячейку таблицы добавим скриншот сайта СПО и сделаем так, чтобы при нажатии на картинку осуществлялся переход на данный сайт. Это поможет создать больше взаимодействия с сайтом. Теперь предстоит оформить следующую часть сайта, а именно описание и основную информацию о заведении. При помощи <p> создаём абзацы для текста и заполняем их информацией о нашем учебном учреждении. Первый абзац будет играть роль заголовка, который будет указывать на текст ниже. Второй и третий абзац занимаем информацией об учебном учреждении. Как и планировалось, для удобного и гармоничного вида хватило двух абзацев.

Добавим картинку для фона, чтобы фон сайта не выглядел голым. Для этого скачиваем изображение и переименовываем его в «fon.jpg», чтобы оно правильно было принято программой и задействовано в нашей странице. Теперь можно добавить поля с контактной информацией (адресом электронной почты) и адресом учебного корпуса. Снова, используя <td>, создаём две надписи и помещаем туда нашу информацию. К каждой надписи добавим ссылку на почту Центра СПО для возможности контактировать с руководством.

Рисунок 10. Добавление контактной информации

На этом основная работа по созданию сайта заканчивается и остаётся лишь изменить код. Среди изменений для возможного дальнейшего применения сайта выделим форматирование текста в информационном блоке и добавление логотипа Центра СПО как изображения для вкладки с сайтом. Таким образом, нам удалось разработать сайт образовательного учреждения, используя текстовые редакторы Блокнот и Notepad++, а также Photoshop CS5 для корректировки изображений.

Заключение

Язык разметки (текста) — набор символов или последовательностей, вставляемых в текст для передачи информации о его выводе или строении.

Мы рассмотрели 5 языков разметки: HTML, XML, Wiki, BBcod и Textile.

Более подробно рассмотрели самый известный язык гипертекстовой разметки. В 1991 году, британским ученым Тимом Бернерсом Ли, сотрудником Европейского института физики частиц (CERN) в Женеве, была разработана система передачи гипертекстовой информации через интернет. А за основу нового языка был взят SGML. Язык разметки гипертекста был назван - HTML (Hyper Text Markup Language) и он является до сих пор самым известным из приложений SGML. HTML в первую очередь был разработан для обмена научной и технической документации для использования людьми, не являющимися специалистами в области верстки. Последняя версия языка это HTML 5.0.

Применение технологии HTML в образовательном процессе можно использовать при обучении студентов работе с данным языком разметки. Это начальная ступень web-разработки и её изучение позволит заинтересовать студентов в этом направлении.

Другой возможностью применения HTML будет создание учебных пособий, методических указаний, лабораторных работ и других материалов для студентов. Многообразие способов визуализации материала позволит создать наиболее удобный формат подачи для каждого предмета и направления подготовки. Одним из наиболее востребованных возможностей языка разметки в создании учебных материалов – это гиперссылки. Они позволят связать в единую сеть всю программу курса или направления подготовки.

Создание информационного сайта образовательного учреждения с использованием языка гипертекстовой разметки HTML является сегодня востребованным и актуальным на рынке информационных услуг.

Данный сайт позволит использовать для распространения информацию об образовательном учреждении (ОУ), будет способствовать формированию прогрессивного имиджа ОУ через его представление в Интернет-сообществе, поддерживать процесс информатизации в ОУ путем развития единого образовательного информационного пространства.

Список литературы

  1. Бен, Ф. HTML5 и CSS3.Разработка сайтов для любых браузеров и устройств. – СПб.: Издательство ООО «Питер-Пресс», 2017. - 272 с.
  2. Брайан, Х. HTML5 и CSS3. Веб-разработка по стандартам нового поколения. - СПб.: "Издательский дом "Питер", 2014. – 320 с.
  3. Дакетт, Д. HTML и CSS. Разработка и дизайн веб-сайтов / Д. Дакетт. - М.: Эксмо, 2015. - 480 c.
  4. Джон Дакетт «Основы веб-программирования с использованием HTML, XHTML и CSS» - Эксмо, 2016. - 768 c.
  5. Дронов, В. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / В. Дронов. - М.: БХВ-Петербург, 2014. - 138 c.
  6. Егорова Ю.Н., Мытникова Е.А., Мытников А.Н., Егорова О.А. Программный комплекс оценки угроз информационной безопасности информационных систем как эффективное средство формирования профессиональных компетентностей бакалавров по дисциплине «Информационная безопасность»//Современные наукоемкие технологии. — 2016. — № 4-1. — С. 109-113.
  7. Прохоренок, Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н.А. Прохоренок, В.А. Дронов. - Москва: СПб. [и др.] : Питер, 2015. - 768 c.
  8. Ташков П, «Веб-мастеринг HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка» - Книга по Требованию, 2017. - 512 c.
  9. Титтел, Э. HTML, XHTML и CSS для чайников, 7-е издание = HTML, XHTML & CSS For Dummies, 7th Edition / Эд Титтел, Джефф Ноубл. – М.: «Диалектика», 2011. – 400 с. 3
  10. Фельке-Моррис, Т. Большая книга веб-дизайна: М.: Издательство «ЭКСМО», 2012. – 608 с.
  11. Фримен, Э. Изучаем HTML, XHTML и CSS = Head First HTML with CSS & XHTML / Э. Фримен, Э. Фримен. – П.: «Питер», 2010. – 656 с.
  12. Шафер, С. HTML, XHTML и CSS. Библия пользователя, 5-е издание = HTML, XHTML, and CSS Bible, 5th Edition / Стивен Шафер. – М.: «Диалектика», 2010. – 656 с.
  13. Язык HTML. История развития – [Электронный ресурс]. URL: http://preal.ru/under/yazyk-html-istoriya-razvitiya/(дата обращения: 06.11.2019)
  14. Garsiel, T. How Browsers Work: Behind the scenes of modern web browsers / T. Garsiel, P. Irish. – Режим доступа: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ (Дата обращения: 07.11.2019)
  15. HTML 5: нововведения, преимущества и недостатки http://ua-blogger.com/html-5-novovvedeniya-preimuschestva-i-nedostatki.html дата обращения (06.11.2019)
  16. HTML 5: эволюция мутаций, или куда доведет язык [Электронный ресурс]/Режим доступа URL: http://sotoman.ru/reviews/ID_987.html дата обращения (06.11.2019)
  17. HTML- история развития языка разметки гипертекста – [Электронный ресурс]. URL: http://www.castcom.ru/publications/web/html_istoriya_razvitiya_yazyka_razmetki_giperteksta.html(дата обращения: 06.11.2019)
  18. Краткая история HTML– [Электронный ресурс]. URL: http://htmleditors.ru/Rasnoe/history/history1.html(дата обращения: 06.11.2019)
  19. Краткая история языков HTML и XHTML– [Электронный ресурс]. URL: http://html-5.ru/istoriya-html5 (дата обращения: 06.11.2019)
  20. Помощь по BBCode– [Электронный ресурс]. URL: http://eko-fazenda.ru/forum/faq.php?mode=bbcode (дата обращения: 06.11.2019)
  21. Что такое HTML и XHTML? История. – [Электронный ресурс]. URL: http://monetavinternete.ru/sozdaem-sajt-s-nulya/osnovy-html/chto-takoe-html-xhtml-istoria/ (дата обращения: 06.11.2019)

  1. HTML- история развития языка разметки гипертекста – [Электронный ресурс]. URL: http://www.castcom.ru/publications/web/html_istoriya_razvitiya_yazyka_razmetki_giperteksta.html(дата обращения: 06.11.2019)

    ↑

  2. Краткая история HTML– [Электронный ресурс]. URL: http://htmleditors.ru/Rasnoe/history/history1.html(дата обращения: 06.11.2019) ↑

  3. Прохоренок, Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н.А. Прохоренок, В.А. Дронов. - Москва: СПб. [и др.] : Питер, 2015. - 768 c. ↑

  4. Дронов, В. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / В. Дронов. - М.: БХВ-Петербург, 2014. - 138 c. ↑

  5. Язык HTML. История развития – [Электронный ресурс]. URL: http://preal.ru/under/yazyk-html-istoriya-razvitiya/(дата обращения: 06.11.2019) ↑

  6. Краткая история языков HTML и XHTML– [Электронный ресурс]. URL: http://html-5.ru/istoriya-html5 (дата обращения: 06.11.2019)

    ↑

  7. Что такое HTML и XHTML? История. – [Электронный ресурс]. URL: http://monetavinternete.ru/sozdaem-sajt-s-nulya/osnovy-html/chto-takoe-html-xhtml-istoria/ (дата обращения: 06.11.2019) ↑

  8. Джон Дакетт «Основы веб-программирования с использованием HTML, XHTML и CSS» - Эксмо, 2016. - 768 c. ↑

  9. Ташков П, «Веб-мастеринг HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка» - Книга по Требованию, 2017. - 512 c. ↑

  10. Помощь по BBCode– [Электронный ресурс]. URL: http://eko-fazenda.ru/forum/faq.php?mode=bbcode (дата обращения: 06.11.2019) ↑

  11. Егорова Ю.Н., Мытникова Е.А., Мытников А.Н., Егорова О.А. Программный комплекс оценки угроз информационной безопасности информационных систем как эффективное средство формирования профессиональных компетентностей бакалавров по дисциплине «Информационная безопасность»//Современные наукоемкие технологии. — 2016. — № 4-1. — С. 109-113. ↑

  12. HTML 5: эволюция мутаций, или куда доведет язык [Электронный ресурс]/Режим доступа URL: http://sotoman.ru/reviews/ID_987.html дата обращения (06.11.2019) ↑

  13. HTML 5: нововведения, преимущества и недостатки http://ua-blogger.com/html-5-novovvedeniya-preimuschestva-i-nedostatki.html дата обращения (06.11.2019)

    ↑

  14. Дакетт, Д. HTML и CSS. Разработка и дизайн веб-сайтов / Д. Дакетт. - М.: Эксмо, 2015. - 480 c. ↑

  15. Garsiel, T. How Browsers Work: Behind the scenes of modern web browsers / T. Garsiel, P. Irish. – Режим доступа: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ (Дата обращения: 07.11.2019) ↑

  16. Фримен, Э. Изучаем HTML, XHTML и CSS = Head First HTML with CSS & XHTML / Э. Фримен, Э. Фримен. – П.: «Питер», 2010. – 656 с. ↑

  17. Титтел, Э. HTML, XHTML и CSS для чайников, 7-е издание = HTML, XHTML & CSS For Dummies, 7th Edition / Эд Титтел, Джефф Ноубл. – М.: «Диалектика», 2011. – 400 с. 3 ↑

  18. Шафер, С. HTML, XHTML и CSS. Библия пользователя, 5-е издание = HTML, XHTML, and CSS Bible, 5th Edition / Стивен Шафер. – М.: «Диалектика», 2010. – 656 с. ↑

  19. Фельке-Моррис, Т. Большая книга веб-дизайна: М.: Издательство «ЭКСМО», 2012. – 608 с. ↑

  20. Фельке-Моррис, Т. Большая книга веб-дизайна: М.: Издательство «ЭКСМО», 2012. – 608 с. ↑

  21. Брайан, Х. HTML5 и CSS3. Веб-разработка по стандартам нового поколения. - СПб.: "Издательский дом "Питер", 2014. – 320 с. ↑

  22. Брайан, Х. HTML5 и CSS3. Веб-разработка по стандартам нового поколения. - СПб.: "Издательский дом "Питер", 2014. – 320 с. ↑

  23. Бен, Ф. HTML5 и CSS3.Разработка сайтов для любых браузеров и устройств. – СПб.: Издательство ООО «Питер-Пресс», 2017. - 272 с. ↑

  24. Бен, Ф. HTML5 и CSS3.Разработка сайтов для любых браузеров и устройств. – СПб.: Издательство ООО «Питер-Пресс», 2017. - 272 с. ↑

Смотрите также файлы