Файл: Основы программирования на языке HTML (Основы программирования на HTML).pdf
Добавлен: 18.05.2023
Просмотров: 116
Скачиваний: 3
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Примерзаголовков в HTML</title>
<style>
.first {
font-size: 28px;
}
#second {
font-weight: 700;
}
</style>
</head>
<body>
<h1>Стихи Бунина Ивана Алексеевича</h1>
<divclass="first">
<p>Беру твою руку и долго смотрю на нее,
Ты в сладкой истоме глаза поднимаешь несмело:
Вот в этой руке - все твое бытие,
Я всю тебя чувствую - душу и тело.</p>
</div>
<divid="second">
<p>Нынче ночью кто-то долго пел.
Далеко скитаясь в темном поле,
Голос грустной удалью звенел,
Пел о прошлом счастье и о воле.</p>
</div>
</body>
</html>
Изображение 8. Пример использования элементов<div>с указанием атрибутов класса и идентификатора.
<b> - текст внутри элемента имеет жирное начертание. Требуется закрывающий тег. Прямой аналог CSS-стиля «font-weight».
Пример:
Заявление от имени <b>Иванова Ивана Ивановича</b>.
<i> - текст внутри элемента имеет курсивное начертание. Требуется закрывающий тег.
Пример:
Заявление от имени <i>Петрова Петра Петровича</i>.
Изображение 9. Примеры использования элементов <b>и <i>.
Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>, которые расшифровываются как строка в таблице (от английского «Table Row») и ячейка в таблице (от английского «Table Data»). Закрывающий тег обязателен.
Также, связанные с элементом <table> являются такие элементы как: <th>,<thead>, <tbody>, <tfoot> и <caption>.
Элемент <th> выполняет ту же функцию, что и <td>, т.е. ячейка в таблице. Но только с одним отличием, текст внутри элемента <th> выделяется жирным шрифтом. Закрывающий тег обязателен.
<thead> используется для создания отдельной верхней строки или строк, выделен в отдельный элемент для удобства редактирования документа веб-программистам. Также, выполняет функцию выделения важной части таблицы для оптимизации веб-сайта и повышении его в результах выдачи поисковых систем (SEO). В таблице может использоваться только один раз. Закрывающий тег обязателен.
<tbody> используется для выделения основной части таблицы. В таблице может использоваться только один раз. Закрывающий тег обязателен.
<tfooter> используется для выделения нижней части таблицы. В таблице может использоваться только один раз. Закрывающий тег обязателен.
<caption> предназначен для описания таблицы, размещается сразу внутри элемента <table>. Отличие от элемента <p>, что элемент <caption> размещается по ширине самой таблицы. Закрывающий тег обязателен.
Пример:
<table>
<thead>Население стран мира млн. человек в 2019 году</thead>
<tr>
<th>Россия</th>
<th>Великобритания</th>
<th>Украина</th>
<th>Беларусь</th>
</tr>
<tr><td>146</td><td>66</td><td>41</td><td>10</td></tr>
</table>
Изображение 10. Пример использования элемента <table>.
Элемент <form> устанавливает форму на веб-страницы, с помощью которой пользователь может заполнить необходимые данные, отправить их на сервер, где эти данные будут обработаны. Наиболее частое применение форм это: форма входа (аутенфикации) пользователя на веб-сайте при помощи логина и пароля; форма обратной связи, где пользователь оставляет свои контактные данные и соопутствующий текст; заполнение необходимых данных для заказа продукции из интернет-магазина. Данные на сервер выполняются при заполнении всех необходимых условий при нажатии определенной кнопки либо по нажатию клавиши Enter.
Атрибуты данного элемента:
accept-charset - устанавливает кодировку, в которой сервер может принимать и обрабатывать данные формы.
Пример:
<form accept-charset ="utf-8">
</form>
action – используется для указания обработчика данных, введенных пользователем. В свою очередь обработчиком может выступать любая CGI-программа либо другой HTML-документ, содержащий необходимые скрипты для выполнения.
Пример:
<form action="script.php">
</form>
autocomplete – отвечает за автозаполнение всех полей форм документе на основе ранее введенной информации в полях этой же формы или других, в том числе на других веб-страницах. Принимает значения ON или OFF.
Пример:
<form autocomplete="on">
</form>
enctype - определяет способ кодирования данных формы при их отправке на сервер.
Значения
application/x-www-form-urlencoded - Вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%90%D0%BD%D1%8F вместо Аня).
multipart/form-data - Данные не кодируются. Это значение применяется при отправке файлов.
text/plain -Пробелы заменяются знаком +, буквы и другие символы не кодируются.
Пример:
<form action="script.php" enctype=" multipart/form-data" method="GET">
</form>
method – используется для указания метода передачи данных GET или POST. О преимуществах и достоинствах в данной работе обойдём этот вопрос, вкратце, для безопасности и для большого объёма данных (от 4 КБ и более) преимущественно используется POST, в остальных случаях GET.
Пример:
<form action="script.php" method="GET">
</form>
name –
novalidate –
target -
1.7.Основы программирования веб-страницы на языке HTML.
Для создания веб-страницы на языке гипертекстовой разметки будет использоватьсятекстовый редактор под названием «SublimeText», а для просмотра промежуточного и готового результата будем использовать веб-браузер Google Chrome.
Google Chrome – веб-браузер от корпорации Google, на март 2020 года является самым популярным браузером для настольных и мобильных устройств.
SublimeText - текстовый редактор, предназначенный для удобного создания и редактирования кода программ на многих языках программирования и не только, включая язык гипертекстовой разметки HTML.
Для начала необходимо скачать с официальных сайтов программы-установщики вышеуказанных программ.
Официальный сайт Google Chrome - https://www.google.ru/chrome
Официальный сайт Sublime Text - https://www.sublimetext.com/3
Изображение 11. Официальный сайт веб-браузера Google Chrome.
После скачивания программ-установщиков запустить их и следовать инструкции по установке программ.
1) Необходимо создать пустой документ в формате .html. Для этого на на любом пустом месте рабочего стола создадим пустую папку с названием «site», в будущем это пригодиться для удобного хранения всех необходимых файлов, связанных с веб-документом.
В новой папке создаём пустой текстовый документ и переименовываем его в «index.html».
На самом деле необязательно именно в такой последовательности выполнять действия, создать пустой текстовый файл можно было непосредственно в самом редакторе HTML-кода и в дальнейшем сохранить его туда, где это было нужно.
2) Открыть «index.html» открыть через веб-браузер GoogleChrome, свернуть его и открыть этот веб-документ уже через SublimeText.
3)Нам нужно объявить тип этого документа, чтобы браузеры правильно распознавали язык разметки гипертекстовой разметки. Для этого мы должны прописать:
<!DOCTYPE html>
После объявления типа документа, мы должны обозначить контейнер <html>, а непосредственно в нём объявить элементы <head>и<body>.
В контейнере размещается весь HTML-код.
В элементе <head>размещается заголовок веб-документа и вся техническая и наиболее важная информация о веб-странице, например стили и скрипты. Веб-страница подгружается постепенно от начала веб-документа и до его конца. Поэтому для правильного отображения веб-документа рекомендуется размещать ссылку на стили вначале веб-документа, иначе во время загрузки веб-документа, он может отображаться иначе чем это было запланировано веб-разработчиком.
В элементе <body> размещается непосредственно контент веб-страницы, всё то, что будет отображаться в конечном веб-документе.
На текущий момент код веб-документа должен выглядеть как в изображении 11.
Изображение 12. Код веб-документа на этапе 3.
4) Следующий этапом нам нужно объявить заголовок веб-документа, но пока неизвестно что за веб-документ нам нужно создать. И тут как раз есть некая предыстория.
К веб-разработчику обратился владелец сервиса шиномонтажа, которому требуется создать информационный портал в интернете, где будет размещена вся необходимая информация о сервисе, такая как: оказываемые услуги, прайс-лист, место положение, контакты.
Название сервиса шиномонтаж «Шиномонтажный сервис - В добрый путь!». Мы должны добавить название сервиса в код нашей веб-страницы, чтобы во вкладке веб-браузера Google Chrome было видно название. Для этого в элемент <head>добавим элемент <title>с закрывающимся тегом, а внутри него поместим название.
Код должен быть таким: <title>Шиномонтаж - В добрый путь!</title>
5) Теперь будет создаваться непосредственно визуальная часть веб-страницы.
Для начала объявим заголовок веб-страницы с помощью элемента <h1>, для этого в элементе <body> нужно прописать такой код:
<h1>Официальный сайт шиномонтажного сервиса - "В добрый путь"!</h1>
После пропишем <hr> для отделения заголовка от остальной части веб-страницы горизонтальной линией.
Далее зададим четыре блока <div>, после каждого блока <div> прописываем <hr> для отображения горизонтальной линии.
Внутри каждого блока <div> объявим заголовок второго уровня <h2>.
Начиная с первого блока <div> в каждом <h2> прописываем по порядку:
- О сервисе
- Прайс-лист
- График работы и место положение
- Контакты
Код должен выглядеть сейчас таким образом:
<!DOCTYPE html>
<html>
<head>
<title>Шиномонтажный сервис - В добрый путь!</title>
</head>
<body>
<h1>Официальный сайт шиномонтажного сервиса - "В добрый путь"!</h1>
<hr>
<div>
<h2>О сервисе</h2>
</div>
<hr>
<div>
<h2>Прайс-лист</h2>
</div>
<hr>
<div>
<h2>График работы и место положение</h2>
</div>
<hr>
<div>
<h2>Контакты</h2>
</div>
</body>
</html>
В первый <div> создаём три абзаца <p></p> и прописываем в каждый по порядку следующий текст:
«Наш сервис предлагает услуги снятия, установки, балансировки колес для легковых автомобилей. Мы также занимаемся сезонным хранением колес.»
«Мы молодой, развивающийся шиномонтажный сервис, основанный 2 года назад, за прошедшие сезоны мы успели пройти стадию от "шиномонтажки" в гаражно-строительном кооперативе до аренды отдельно стоящего нежилого здания, планируем развиваться и дальше!»
«Мы всегда уважаем и ценим всех наших клиентов в любое время, в наших планах расширить услуги для грузовых автомобилей, ремонтировать покрышки (резину), продажа и утилизация резины, дисков.»
Следующим шагом нам нужно создать таблицу с ценой на услуги. Она должна будет иметь вид как таблица ниже:
Изображение 13. Таблица на услуги шиномонтажа.
Для этого о втором блоке <div> нам нужно создать таблицу <table> с закрывающим тегом </table>.
Внутри <table> задаем элемент <thead> и в нём прописываем следующий текст:
«Прайс-лист на услуги шиномонтажа легкового автомобиля».
В дальнейшем создаем пять строк в таблице с помощью элементов <tr>. В каждом элементе <tr> создаем семь столбцов <td> и заполняем как в таблице выше.
После редактирования таблицы создаем два абзаца и прописываем в каждый из них по порядку следующий текст:
Хранение комплекта колес (4) для легковых автомобилей за 1 сезон – 1600 рублей.
ВНИМАНИЕ! Теперь мы можем оказать выездные услуги замены и балансировки всех колес вашего легкового автомобиля в пределах ВАО и СВАО, возможно с доставкой Вашего комплекта колес, который есть у нас на хранении. Фиксированная стоимость – 5000 рублей.
В последних двух абзацах выделим стоимость жирным шрифтом, для этого заключим в <b> теги.
Код должен выглядеть так:
<p>Хранение комплекта колес (4) для легковых автомобилей за 1 сезон - <b>1600</b> рублей.</p>
<p><b>ВНИМАНИЕ!</b> Теперь мы можем оказать выездные услуги замены и балансировки всех колес вашего легкового автомобиля в пределах ВАО и СВАО, возможно с доставкой Вашего комплекта колес, который есть у нас на хранении. Фиксированная стоимость - <b>5000</b> рублей.</p>
В третьем блоке <div> прописываем такой текст:
Работаем каждый день с 08:00 до 20:00 без выходных и обеда. Государственные праздники - выходной день, просим понять. Предварительная запись и запись на выезд по телефону.
Находимся по адресу: город Москва, Погонный проезд, дом 10, строение 5. Заезд с улицы 1-я Мясниковская.
Каждый абзац заключаем в тег <p>. Адрес нужно выделить в ссылку на Яндекс.Карты для удобства пользователей, для этого заносим адрес в теги <a>, прописываем атрибут href=””, и указываем ссылку: yandexmaps://maps.yandex.ru/maps/213/moscow/?from=api-maps&ll=37.706242%2C55.817571&mode=usermaps&origin=jsapi_2_1_74&um=constructor%3Aa1785aaa7f150f7f1b7962a1f6edf71a8687c693a0ade31fbc3c6e7029073021&z=18