Файл: Основы программирования на языке HTML.pdf

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

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

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

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

Добавлен: 29.03.2023

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

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

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

СОДЕРЖАНИЕ

Введение

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

1.1. История языка HTML

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

Глава 2. Основы программирования на языке HTML

2.1. Структура HTML-документа

2.2. Основные теги языка HTML

Глава 3. Пример использования языка HTML

Заключение

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

Глава 3. Пример использования языка HTML

Откройте блокнот и скопируйте в него следующее:

<html>

<head>

<title>Главная страница - страница обо мне</title>

</head>

<body>

<center><h1>Информация обо мне</h1></center>

Краткая биография обо мне

Родился в 1985 году в городе Москва. Закончил в 2008 году МАИ.

На данный момент работаю ведущим инженером в крупной авиакомпании.

<br/><br/>

<center><img alt="Два самолета"

src="https://imgfotki.yandex.ru/get/9931/160700675.0/0_110e34_54188f48_-1-orig">

</center>

<br/><br/>

<font style="color:green">Этот текст зеленый</font>

<br/><br/>

<b>Просто пример жирного текста</b>

<br/><br/>

Низ страницы

<br/><br/>

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

<hr>

Этот материал был написан благодаря сайту

<a href=http://zarabotat-na-sajte.ru/>

http://zarabotat-na-sajte.ru/</a> - за что я ему благодарен.

<br/><br/>

Спасибо. До новых встреч!

</body>

</html>

Далее нажмите "сохранить как", в поле тип файла выберите "все файлы", а в названии напишите index.html. Обязательно в конце названия должно быть расширение .html (не .txt), иначе браузеры не будут интерпретировать его как веб-документ.

Описание html тегов из примера:

1. <html></html> — эти теги должны присутствовать на каждой веб-странице обязательно. Они сообщают браузерам и поисковым машинам, что это html-страница.

Любая html страница имеет следующую структуру:

2. <body></body> — между этими тегами заключается весь видимый контент страницы.

3. <head></head> — внутри этих тегов должны располагаться все заголовочные теги. Этот раздел можно опустить, но я не советую это делать, поскольку это важная часть документа, особенно для поисковых систем. Более подробно про <head></head> читайте в описание заголовочных тегов

4. <title></title> — между этими тегами прописывается заголовок страницы, которое отображается в самом вверху браузера. Кстати, когда Вы что-то ищите в поисковиках, то первое, что отображается, это как раз название страницы. Тег <title></title> часто сокращенно называют "тайтлом". Советую ознакомиться со статьей: как составить тег <title>

Теперь перейдем к тегам, которые находятся в теле html страницы (внутри <body> и </body>).

5. <center></center> — эти теги выравнивают все, что находится внутри них по центру. В данном случае центром будет - центр экрана. В будущем рекомендуется отказаться от использования этих тегов.

6. <h1></h1> — это один из класса тегов заголовочных тегов <h1>..<h6>, обычно в него заключают название страницы. Например, у этой странице заголовочный тег "Пример создания html страницы".

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

При составлении html-кода нужно придерживаться простого правила: сначала должен идти заголовочный тег <h1>, а дальше могут идти уже <h2>, <h3> и т.д. Главное, чтобы не было сначала <h2>, потом <h1>, потом <h3> и т.п. Должна быть строгая иерархия. Заголовков <h2>, <h3> и т.п. может быть много.

7. <br/> — это одиночный тег, который не требует закрывающего тега. Он осуществляет переход на следующую строку. В моем примере написаны два одиночных тега подряд, чтобы дважды перейти на следующую строку.

8. <img alt="подсказка" src="URL_ИЗОБРАЖЕНИЯ"> — это одиночный тег, который выводит изображение.

src — обязательный параметр, в котором указывается адрес изображения (вместо URL_ИЗОБРАЖЕНИЯ необходимо прописать адрес, где хранится Ваше изображение). 

Примечание: Если изображение находится в одной папке с Вашей html-страницей, то достаточно написать название изображения, иначе нужно прописывать либо абсолютный или относительный URL;

Не забудьте указать расширение изображения. Например, .jpg, .gif, .jpeg.

alt или title — в эти параметры можно записать описание к Вашему изображению. Когда Вы наведете мышкой на изображение, то появится это описание. Эти параметры важны для продвижения сайта, особенно в поиске по картинкам. Если изображение не удалось загрузить, то будет выведен этот текст, что также является плюсом.

9. <font></font> — эти теги созданы для изменения шрифта, фона, размера и т.д. Короче говоря, все, что связано с форматированием текста можно настроить в одном теге. Это тег имеют довольно много атрибутов, о которых я расскажу в отдельном уроке.

Примечание: <span></span> — аналогичный тег.

Есть также свойство CSS font, в котором можно задавать все эти параметры.

10. <b></b> — выделить жирным. Все, что заключено между <b> и </b>будет выделено жирным. Например, если Вы напишите его в самом начале контента, а закроете в самом конце, то весь текст на странице будет выделен жирным. Это довольно часто встречающийся тег, аналогом которого является <strong></strong>.

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

11. <hr/> — одиночный тег, который выводит горизонтальную линию. Имеет несколько параметров, о которых будет сказано позднее.

12. <a href="URL">текст_ссылки</a> — тег для создания ссылок.

href="URL" — этому параметру необходимо присвоить URL ссылки, на которую ведет ссылка. Является обязательным параметром.

Примечание: Если документ, на который Вы хотите перейти, находится в одной папке с Вашей html-страницей, то достаточно написать название этого документа. Например:

Заключение

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

Новый язык программирования обладает как неопровержимыми преимуществами перед предыдущими версиями, так и грешит некоторыми недостатками. К неоспоримо сильным сторонам HTML 5 принадлежат невероятно большие возможности по созданию качественно новой графики. Особую благодарность в этом следует выразить тегу canvas, который уже стал внедряться во многие браузеры. Благодаря функции canvas веб-разработчики получили расширенные возможности по созданию графики нового поколения.

Сайты, разработанные с использованием HTML5, прогружаются намного быстрее традиционного флэша, но какое-то время на их загрузку всё же требуется. Для того, чтобы игры, сайты и онлайн-приложения, основанные на HTML5, могли в максимальной степени проявить все свои преимущества, может потребоваться компьютер с высокой мощностью и функционалом. В противном случае многие из преимуществ HTML5 могут остаться в тени для пользователя. Несмотря на то, что пятое поколение языка программирования пока не получило официального одобрения от W3C, всё же, как ожидается, справедливость восторжествует и HTML5 проникнет во все сферы деятельности в сети уже в ближайшее время.

Основным элементом языка HTML являются теги. Тег - это, как правило, парная конструкция, предназначенная для задания свойств текста или другой информации, расположенной внутри него. 

Главным элементом любой HTML страницы является одноименный тег ‹html›. Этот тег содержит внутри себя все остальные структурные части страницы и явно указывает браузеру, что обрабатывается HTML код. Он имеет закрывающий тег. Теги могут иметь различные атрибуты, значения которых указывается в двойных или одиночных кавычках.

В третьей главе мы рассмотрели пример создания HTML страницы в блокноте, а также рассмотрели теги которые использовали при написании.

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

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

HTML для новичков https://zarabotat-na-sajte.ru/uroki-html/ дата обращения (30.09.2018)

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

Гулевич П. Секреты создания HTML сайта с нуля – М.: Webmoment, 2010. – [Электронный ресурс]. URL: http://www.razym.ru/56732-pavel-gulevich-sekretysozdaniya-html-sajta-s.html (дата обращения: 30.09.2018).

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

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

Дунаев В.В. «HTML, скрипты и стили» - БХВ-Петербург, 2014. - 208 c.

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

Иванов С.О., Ильин Д.В., Ильина Л.А., Назарова О.В. Имитационное моделирование средств защиты информации, соответствующих общим критериям международного стандарта ISO/IEC 15408 // Вестник Чувашского университета. — 2016. — № 3. — С. 194-200.

Коваленко, Т.А. HTML – развитие языка стандарта отображения страниц / Т.А. Коваленко, В. Барнаш // Сборник Вопросы образования и науки. Международной научно-практической конференции.2017—С.64-66.

Лазаро, Исси Коэн Полный справочник по HTML, CSS и JavaScript / Лазаро Исси Коэн, Джозеф Исси Коэн. - М.: ЭКОМ Паблишерз, 2014. - 938 c.

Макфарланд Д. Большая книга CSS3 - М.:Питер, 2015. - 608c.

Основные теги в HTML https://zarabotat-na-sajte.ru/uroki-html/osnovnie-tegi-html.html дата обращения (30.09.2018)

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

Фримен Э. «Изучаем программирование на HTML5» - Питер, 2013. - 592 c.

  1. Коваленко, Т.А. HTML – развитие языка стандарта отображения страниц / Т.А. Коваленко, В. Барнаш // Сборник Вопросы образования и науки. Международной научно-практической конференции.2017—С.64-66. ↑

  2. Лазаро, Исси Коэн Полный справочник по HTML, CSS и JavaScript / Лазаро Исси Коэн, Джозеф Исси Коэн. - М.: ЭКОМ Паблишерз, 2014. - 938 c. ↑

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

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

  5. Дунаев В.В. «HTML, скрипты и стили» - БХВ-Петербург, 2014. - 208 c. ↑

  6. Макфарланд Д. Большая книга CSS3 - М.:Питер, 2015. - 608c. ↑

  7.   Фримен Э. «Изучаем программирование на HTML5» - Питер, 2013. - 592 c. ↑

  8. Гулевич П. Секреты создания HTML сайта с нуля – М.: Webmoment, 2010. – [Электронный ресурс]. URL: http://www.razym.ru/56732-pavel-gulevich-sekretysozdaniya-html-sajta-s.html (дата обращения: 30.09.2018). ↑

  9. Иванов С.О., Ильин Д.В., Ильина Л.А., Назарова О.В. Имитационное моделирование средств защиты информации, соответствующих общим критериям международного стандарта ISO/IEC 15408 // Вестник Чувашского университета. — 2016. — № 3. — С. 194-200. ↑

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

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

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

    ↑

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

  14. HTML для новичков https://zarabotat-na-sajte.ru/uroki-html/ дата обращения (30.09.2018) ↑

  15. Основные теги в HTML https://zarabotat-na-sajte.ru/uroki-html/osnovnie-tegi-html.html дата обращения (30.09.2018) ↑

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