Файл: Языки гипертекстовой разметки ( HTML, XML, XHTML, SGML ).pdf
Добавлен: 03.04.2023
Просмотров: 523
Скачиваний: 3
<tr>…</tr>
Тег <tr> служит контейнером для создания строки таблицы.
Таким образом, во второй главе были рассмотрены основные элементы HTML кода: теги верхнего уровня (<html>, <head>, <body>), комментарии, <DOCTYPE>, метатеги (<meta>, <title>, description, keywords, content-type, content-language, robots, refresh, Author, Copyright, Address), CSS (связанные стили, глобальные стили, встроенные стили), скрипты (<script>), блочные элементы (<div>, <h1> - <h6>, <p>), строчные элементы (<a>, <span>, <b>, <i>, <br>, <img>), списки (нумерованный, маркированный), таблицы.
Глава 3
В данной главе рассмотрена страница резюме программиста, написанная на HTML5. Все элементы кода снабжены комментариями. Полная версия кода страницы представлена в приложении 1. Все элементы, использованные при написании страницы, были рассмотрены в предыдущих главах.
HTML документ начинается с объявления типа документа посредством тега DOCTYPE. Для написания данной работы выбран HTML5, поэтому DOCTYPE записан следующим образом:
<!DOCTYPE html>
Разметка документа начинается с объявления тега <html>.
<html>
Далее идет блок head, в котором содержится служебная информация.
<head>
Далее идет набор мета тегов, в которых мы указываем кодировку, описание страницы и ключевые слова для поисковиков и автора документа. Также в блоке head расположен контейнер <title> с указанием заголовка окна.
<meta charset="utf-8" />
<meta name="description" content="Страница резюме приложение к курсовой работе">
<meta name="keywords" content="Дмитрий Акмулин резюме визитка курсовая работа">
<meta name="author" content="Дмитрий Акмулин">
<title>Резюме</title>
</head>
Как большинство элементов HTML, мы закрываем тег <head> и приступаем к описанию тела страницы посредством тега <body>. В теле страницы содержится информация, которая будет отображаться в браузере.
<body>
Описание начинается с вывода ФИО посредством заголовка первого уровня (тег <h1>). Далее идут два абзаца, содержащие дату рождения и семейное положение (тег <p>). Наименование информации дополнительно выделено жирным шрифтом посредством тега <b>.
<h1>Акмулин Дмитрий Валерьевич</h1>
<p><b>Дата рождения:</b> 10 марта 1988 года</p>
<p><b>Семейное положение:</b> женат, трое детей.</p>
Далее выводится информация о контактах, отделенная от основного текста посредством заголовка второго уровня <h2>. Внутри этого блока информации представлены адрес, представленный обычным текстом, и три ссылки (номер телефона, адрес электронной почты и адрес веб-сайта) посредством тега <a> (атрибут href тега <a> содержит дополнительную информацию о типе ссылки – tel: для номера телефона и mailto: для электронной почты).
<h2>Контакты:</h2>
<p><b>Адрес:</b> 141700, город Москва, улица Генерала Белова, дом 49, корпус 2, квартира 228.</p>
<p><b>Телефон:</b> <a href="tel:+79164022406">+7(916)402-24-06</a></p>
<p><b>E-mail:</b> <a href="mailto:akmulin.dmitrij@gmail.com">akmulin.dmitrij@gmail.com</a></p>
<p><b>Веб сайт:</b> <a href="www.lab-irt.com">>
Следующий блок информации отделен заголовком второго уровня <h2> и содержит несколько абзацев, в которых описывается цель подачи резюме, образование соискателя и опыт работы с выделением наименований информации жирным шрифтом.
<h2>Информация:</h2>
<p><b>Цель:</b> практическое применение знаний и опыта, а также приобретение новых.</p>
<p><b>Образование:</b> среднее специальное.</p>
<p><b>Опыт работы:</b><br />С 2009 года ФГБУ «Центральная Аэрологическая обсерватория» техник, с 2011 инженер. Разработка приборов измерения параметров окружающей среды и состава атмосферы. Проведение НИР и ОКР. Работа над БПЛА и миниатюрными измерительными приборами. Имеются публикации.</p>
Далее представлен блоки сферы профессиональных интересов и навыков, отделенных от остального текста посредством обычных абзацев, выделенных жирным шрифтом, и представленных в виде маркированных списков (теги <ul> и <li>).
<p><b>Сфера профессиональных интересов:</b></p>
<ul>
<li>разработка программного обеспечения;</li>
<li>разработка электронных блоков;</li>
<li>программирование микроконтроллеров.</li>
</ul>
<p><b>Навыки:</b></p>
<ul>
<li>Опытный пользователь ПК (Linux (Mandriva/OpenSUSE/Ubuntu/RedHat), Windows (98/XP/Vista/7), Microsoft Office, OpenOffice/LibreOffice, QtCreator, Eagle PCB, Keil, STM32Cube, SolidWorks);</li>
<li>Языки программирования (C++ (Framework Qt), Python, PHP, JavaScript);</li>
<li>Знание ЕСКД;</li>
<li>Водительские права категории «В».</li>
</ul>
Далее представлена таблица, содержащая информацию об уровне владения навыками посредством использования тегов <table>, <tr>, <th>, <td>. В атрибутах тега <table> указана ширина границы в два пикселя (border), внутренние отступа ячеек, равные 10 пикселям (cellpadding), ширина таблицы, равная 500 пикселям (width) и выравнивание таблицы по центру по горизонтали относительно всей страницы (align="center").
<table border="2" cellpadding="10" width="500" align="center">
<tr>
<th>Навык</th>
<th>Уровень</th>
</tr>
<tr>
<td>Qt</td>
<td>senior</td>
</tr>
<tr>
<td>C++</td>
<td>midle</td>
</tr>
<tr>
<td>PHP</td>
<td>midle</td>
</tr>
<tr>
<td>JavaScript</td>
<td>midle</td>
</tr>
<tr>
<td>Python</td>
<td>junior</td>
</tr>
<tr>
<td>HTML</td>
<td>midle</td>
</tr>
<tr>
<td>CSS</td>
<td>midle</td>
</tr>
</table>
Далее идет блок с дополнительной информацией отделенный заголовком второго уровня и содержащий информацию о личных качествах и увлечениях.
<h2>Дополнительная информация</h2>
<p>
<b>Личные качества:</b><br />Пунктуальность, ответственность, добросовестность, самостоятельность, высокая работоспособность, высокая обучаемость, способность самостоятельно осваивать материал и технологии, мобильность, аналитический склад ума, способность принятия нестандартных решений.
</p>
<p>
<b>Увлечения:</b><br />Походы, спелеология, промышленный альпинизм, страйкбол, компьютерные игры, исторические ролевые игры.
</p>
В конце мы завершаем разметку страницы закрывающим тегом,
</body>
а так же завершаем саму страницу
</html>
Таким образом, в рамках данной работы была создана страница резюме программиста с помощью HTML5, которая была подробно описана в третьей главе. Полный код страницы можно найти в приложении 1.
Заключение
В рамках курсовой работы было проведено исследование языков гипертекстовой разметки, а также была создана страница резюме программиста.
В первой главе была рассмотрена история создания языков гипертекстовой разметки, а также дана характеристика следующим языкам: SGML, HTML, XML, XHTML, HTML5. Кроме того были рассмотрены основные понятия языков разметки – тег, элемент, атрибут.
Вторая глава была посвящена структуре кода HTML документа. Были рассмотрены следующие элементы: теги верхнего уровня (<html>, <head>, <body>), комментарии, <DOCTYPE>, метатеги (<meta>, <title>, description, keywords, content-type, content-language, robots, refresh, Author, Copyright, Address), CSS (связанные стили, глобальные стили, встроенные стили), скрипты (<script>), блочные элементы (<div>, <h1> - <h6>, <p>), строчные элементы (<a>, <span>, <b>, <i>, <br>, <img>), списки (нумерованный, маркированный), таблицы.
В третьей главе подробно описана страница резюме программиста, созданная с помощью HTML5. Каждый элемент снабжен подробным комментарием. Полный код страницы находится в приложении 1.
Библиография
[1]Робсон. Э., Фримен Э. Изучаем HTML, XHTML, и CSS. 2-е изд. - СПб.: Питер, 2014. - стр. 9.
[2]Муссиано Ч., Кеннеди Б. HTML и XHTML. Подробное руководство, 6-е издание. - Пер. с англ. - СПб: Симпол-Плюс, 2008. - стр. 453
[3]Муссиано Ч., Кеннеди Б. HTML и XHTML. Подробное руководство, 6-е издание. - Пер. с англ. - СПб: Симпол-Плюс, 2008. - стр. 29
[4]Муссиано Ч., Кеннеди Б. HTML и XHTML. Подробное руководство, 6-е издание. - Пер. с англ. - СПб: Симпол-Плюс, 2008. - стр. 38
[5]Робсон. Э., Фримен Э. Изучаем HTML, XHTML, и CSS. 2-е изд. - СПб.: Питер, 2014. - стр. 13
[6]Роббинс Дж. HTML5, CSS2 и JavaScript. Исчерпывающее руководство. / Дженнифер Роббинс; Пер. с англ. 4-е изд. - М.: Эксмо, 2014. - стр 18
[7]Роббинс Дж. HTML5, CSS2 и JavaScript. Исчерпывающее руководство. / Дженнифер Роббинс; Пер. с англ. 4-е изд. - М.: Эксмо, 2014. - стр 26
[8]Роббинс Дж. HTML5, CSS2 и JavaScript. Исчерпывающее руководство. / Дженнифер Роббинс; Пер. с англ. 4-е изд. - М.: Эксмо, 2014. - стр27
[9]Роббинс Дж. HTML5, CSS2 и JavaScript. Исчерпывающее руководство. / Дженнифер Роббинс; Пер. с англ. 4-е изд. - М.: Эксмо, 2014. - стр 28
[10]Роббинс Дж. HTML5, CSS2 и JavaScript. Исчерпывающее руководство. / Дженнифер Роббинс; Пер. с англ. 4-е изд. - М.: Эксмо, 2014. - стр 29
[11]Роббинс Дж. HTML5, CSS2 и JavaScript. Исчерпывающее руководство. / Дженнифер Роббинс; Пер. с англ. 4-е изд. - М.: Эксмо, 2014. - стр 30
[12]Роббинс Дж. HTML5, CSS2 и JavaScript. Исчерпывающее руководство. / Дженнифер Роббинс; Пер. с англ. 4-е изд. - М.: Эксмо, 2014. - стр 32
[13]Роббинс Дж. HTML5, CSS2 и JavaScript. Исчерпывающее руководство. / Дженнифер Роббинс; Пер. с англ. 4-е изд. - М.: Эксмо, 2014. - стр 35
[14]Роббинс Дж. HTML5, CSS2 и JavaScript. Исчерпывающее руководство. / Дженнифер Роббинс; Пер. с англ. 4-е изд. - М.: Эксмо, 2014. - стр. 30
[15]Муссиано Ч., Кеннеди Б. HTML и XHTML. Подробное руководство, 6-е издание. - Пер. с англ. - СПб: Симпол-Плюс, 2008. - стр. 546
[16]Муссиано Ч., Кеннеди Б. HTML и XHTML. Подробное руководство, 6-е издание. - Пер. с англ. - СПб: Симпол-Плюс, 2008. - стр. 571
[17]Робсон. Э., Фримен Э. Изучаем HTML, XHTML, и CSS. 2-е изд. - СПб.: Питер, 2014. - стр. 716
[18]Роббинс Дж. HTML5, CSS2 и JavaScript. Исчерпывающее руководство. / Дженнифер Роббинс; Пер. с англ. 4-е изд. - М.: Эксмо, 2014. - стр. 27
[19]Роббинс Дж. HTML5, CSS2 и JavaScript. Исчерпывающее руководство. / Дженнифер Роббинс; Пер. с англ. 4-е изд. - М.: Эксмо, 2014. - стр 219
[20]Роббинс Дж. HTML5, CSS2 и JavaScript. Исчерпывающее руководство. / Дженнифер Роббинс; Пер. с англ. 4-е изд. - М.: Эксмо, 2014. - стр 223
[21]Лоусон Б., Шарп Р. Изучаем HTML5. Библиотека специалиста. 2-е изд. - СПБ.: Питер, 2012. - стр. 16
[22]Лоусон Б., Шарп Р. Изучаем HTML5. Библиотека специалиста. 2-е изд. - СПБ.: Питер, 2012. - стр. 23
[23]Робсон. Э., Фримен Э. Изучаем HTML, XHTML, и CSS. 2-е изд. - СПб.: Питер, 2014. - стр.30
[24]Робсон. Э., Фримен Э. Изучаем HTML, XHTML, и CSS. 2-е изд. - СПб.: Питер, 2014. - стр.31
[25]Лоусон Б., Шарп Р. Изучаем HTML5. Библиотека специалиста. 2-е изд. - СПБ.: Питер, 2012. - стр. 26
[26]Лоусон Б., Шарп Р. Изучаем HTML5. Библиотека специалиста. 2-е изд. - СПБ.: Питер, 2012. - стр. 26
[27]Лоусон Б., Шарп Р. Изучаем HTML5. Библиотека специалиста. 2-е изд. - СПБ.: Питер, 2012. - стр. 26
[28]Лоусон Б., Шарп Р. Изучаем HTML5. Библиотека специалиста. 2-е изд. -
[29]Лоусон Б., Шарп Р. Изучаем HTML5. Библиотека специалиста. 2-е изд. - СПБ.: Питер, 2012. - стр. 26
[30]Лоусон Б., Шарп Р. Изучаем HTML5. Библиотека специалиста. 2-е изд. - СПБ.: Питер, 2012. - стр. 26
[31]Муссиано Ч., Кеннеди Б. HTML и XHTML. Подробное руководство, 6-е издание. - Пер. с англ. - СПб: Симпол-Плюс, 2008. - стр.16
[32]Муссиано Ч., Кеннеди Б. HTML и XHTML. Подробное руководство, 6-е издание. - Пер. с англ. - СПб: Симпол-Плюс, 2008. - стр.62
[33]Роббинс Дж. HTML5, CSS2 и JavaScript. Исчерпывающее руководство. / Дженнифер Роббинс; Пер. с англ. 4-е изд. - М.: Эксмо, 2014. - стр.27
[34]Роббинс Дж. HTML5, CSS2 и JavaScript. Исчерпывающее руководство. / Дженнифер Роббинс; Пер. с англ. 4-е изд. - М.: Эксмо, 2014. - стр.50
[35]Муссиано Ч., Кеннеди Б. HTML и XHTML. Подробное руководство, 6-е издание. - Пер. с англ. - СПб: Симпол-Плюс, 2008. - стр.62
[36]Роббинс Дж. HTML5, CSS2 и JavaScript. Исчерпывающее руководство. / Дженнифер Роббинс; Пер. с англ. 4-е изд. - М.: Эксмо, 2014. - стр.50
[37]Муссиано Ч., Кеннеди Б. HTML и XHTML. Подробное руководство, 6-е издание. - Пер. с англ. - СПб: Симпол-Плюс, 2008. - стр.63
[38]Муссиано Ч., Кеннеди Б. HTML и XHTML. Подробное руководство, 6-е издание. - Пер. с англ. - СПб: Симпол-Плюс, 2008. - стр.99
[39]Роббинс Дж. HTML5, CSS2 и JavaScript. Исчерпывающее руководство. / Дженнифер Роббинс; Пер. с англ. 4-е изд. - М.: Эксмо, 2014. - стр.74
[40]Роббинс Дж. HTML5, CSS2 и JavaScript. Исчерпывающее руководство. / Дженнифер Роббинс; Пер. с англ. 4-е изд. - М.: Эксмо, 2014. - стр.114
[41]Муссиано Ч., Кеннеди Б. HTML и XHTML. Подробное руководство, 6-е издание. - Пер. с англ. - СПб: Симпол-Плюс, 2008. - стр.63
[42]Роббинс Дж. HTML5, CSS2 и JavaScript. Исчерпывающее руководство. / Дженнифер Роббинс; Пер. с англ. 4-е изд. - М.: Эксмо, 2014. - стр.114
[43]Лоусон Б., Шарп Р. Изучаем HTML5. Библиотека специалиста. 2-е изд. - СПБ.: Питер, 2012. - стр.39
[44]Роббинс Дж. HTML5, CSS2 и JavaScript. Исчерпывающее руководство. / Дженнифер Роббинс; Пер. с англ. 4-е изд. - М.: Эксмо, 2014. - стр.288
[45]Роббинс Дж. HTML5, CSS2 и JavaScript. Исчерпывающее руководство. / Дженнифер Роббинс; Пер. с англ. 4-е изд. - М.: Эксмо, 2014. - стр.72
[46]Лоусон Б., Шарп Р. Изучаем HTML5. Библиотека специалиста. 2-е изд. - СПБ.: Питер, 2012. - стр.40
[47]Лоусон Б., Шарп Р. Изучаем HTML5. Библиотека специалиста. 2-е изд. - СПБ.: Питер, 2012. - стр.88