Файл: Основы программирования на языке HTML (Секционирование содержания).pdf

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

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

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

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

Добавлен: 05.04.2023

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

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

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

СОДЕРЖАНИЕ

Введение

Глава 1. Обзор основных элементов языка HTML

1.1 Метаданные документа

Заключение

ЗАКЛЮЧЕНИЕ

Библиография

URL:// https://developer.mozilla.org/ru/docs/Web/HTML/Element/title (дата обращения: 23.10.2018)

Секционирование содержания // Веб-документация MDN: сайт. 2018. 9 окт.

URL:// https://developer.mozilla.org/ru/docs/Web/HTML/Element/ (дата обращения: 23.10.2018)

<address> // Веб-документация MDN: сайт. 2018. 29 янв.

https://developer.mozilla.org/ru/docs/Web/HTML/Element/address (дата обращения: 24.10.2018)

<article> // Веб-документация MDN: сайт. 2017. 30 янв.

https://developer.mozilla.org/ru/docs/Web/HTML/Element/article (дата обращения: 24.10.2018)

<aside> // Веб-документация MDN: сайт. 2017. 4 сен.

https://developer.mozilla.org/ru/docs/Web/HTML/Element/aside (дата обращения: 24.10.2018)

<header> // Веб-документация MDN: сайт. 2018. 22 июл.

https://developer.mozilla.org/ru/docs/Web/HTML/Element/header (дата обращения: 24.10.2018)

<h1>-<h6> // Веб-документация MDN: сайт. 2018. 9 мар.

https://developer.mozilla.org/ru/docs/Web/HTML/Element/Heading_Elements (дата обращения: 24.10.2018)

<hgroup> // Веб-документация MDN: сайт. 2018. 31 янв.

https://developer.mozilla.org/ru/docs/Web/HTML/Element/hgroup (дата обращения: 24.10.2018)

<main> // Веб-документация MDN: сайт. 2018. 13 окт.

https://developer.mozilla.org/ru/docs/Web/HTML/Element/main (дата обращения: 24.10.2018)

<nav> // Веб-документация MDN: сайт. 2018. 31 мар.

https://developer.mozilla.org/ru/docs/Web/HTML/Element/nav (дата обращения: 24.10.2018)

<section> // Веб-документация MDN: сайт. 2018. 31 мар.

https://developer.mozilla.org/ru/docs/Web/HTML/Element/section (дата обращения: 24.10.2018)

<blockqoute> // Веб-документация MDN: сайт. 2016. 18 июл.

https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote (дата обращения: 24.10.2018)

<div> // Веб-документация MDN: сайт. 2016. 18 июл.

https://developer.mozilla.org/ru/docs/Web/HTML/Element/div (дата обращения: 24.10.2018)

<dl> // Веб-документация MDN: сайт. 2016. 13 июл.

https://developer.mozilla.org/ru/docs/Web/HTML/Element/dl (дата обращения: 24.10.2018)

<figcaption> // Веб-документация MDN: сайт

https://developer.mozilla.org/ru/docs/Web/HTML/Element/figcaption

<figure> // Веб-документация MDN: сайт

https://developer.mozilla.org/ru/docs/Web/HTML/Element/figure

<hr> // Веб-документация MDN: сайт

https://developer.mozilla.org/ru/docs/Web/HTML/Element/hr

<li> // Веб-документация MDN: сайт

https://developer.mozilla.org/ru/docs/Web/HTML/Element/li

<ol> // Веб-документация MDN: сайт

https://developer.mozilla.org/ru/docs/Web/HTML/Element/ol

<p> // Веб-документация MDN: сайт

https://developer.mozilla.org/ru/docs/Web/HTML/Element/p

<pre> // Веб-документация MDN: сайт

https://developer.mozilla.org/ru/docs/Web/HTML/Element/pre

<ul> // Веб-документация MDN: сайт

https://developer.mozilla.org/ru/docs/Web/HTML/Element/ul

<menu> // Веб-документация MDN: сайт

https://developer.mozilla.org/ru/docs/Web/HTML/Element/menu

<a> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

<abbr> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr

<b> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b

<br> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br

<cite> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite

<code> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code

<em> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

<i> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i

<kbd> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd

<mark> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark

<q> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q

<small> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small

<span> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

<strong> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

<caption> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption

<col> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col

<colgroup> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup

<table> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

<tbody> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody

<td> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td

<tfoot> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot

<th> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th

<thead> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead

<tr> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr

<button> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

<datalist> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

<fieldset> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset

<form> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

<input> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

<label> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

<legend> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend

<meter> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter

<optgrouop> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup

<option> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

<output> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output

<progress> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress

<select> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

<textarea> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

accesskey // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey

class // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class

contenteditable // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable

contextmenu // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contextmenu

dir // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir

hidden // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

id // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

lang // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang

spellcheck // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck

style // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style

tabindex // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

title // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title

Приложения

Листинг 1.

Главное меню приложения

  1. <!DOCTYPE html>  
  2. <HEAD>  
  3.     <meta charset='utf-8'>  
  4.     <title>Library</title>  
  5.     <script src='jquery-3.3.1.min.js'></script>  
  6.     <script src='menu.js'></script>  
  7.     <link rel='stylesheet' href='menu.css'>  
  8. </head>  
  9. <body>  
  10.     <h1>Домашняя веб-библиотека Косса Сергея. </h1>  
  11.     <table>  
  12.     <tr align='center'>  
  13.         <td colspan='2' class='top_caption'><h2>Книга</h2></td>  
  14.         <td colspan='6' class='top_caption'><h2>Автор</h2></td>  
  15.     </tr>  
  16.     <tr>  
  17.         <td class='name_book' class='name_book'>Название:</td>  
  18.         <td class='name_book_e' width='300'>  
  19.             <input size='40' id='book_search' onkeyup='quickSearchBook(this)'>  
  20.             </input>  
  21.         </td>  
  22.         <td class='last_name'>Фамилия:</td>  
  23.         <td class='last_name_e'>  
  24.             <input id='lastName' onkeyup='quickSearchAuthor()'>  
  25.             </input>  
  26.         </td>  
  27.         <td class='first_name'>Имя:</td>  
  28.         <td class='first_name_e'>  
  29.             <input id='firstName' onkeyup='quickSearchAuthor()'>  
  30.             </input>  
  31.         </td>  
  32.         <td class='middle_name'>Отчество:</td>  
  33.         <td class='middle_name_e'>  
  34.             <input id='middleName' onkeyup='quickSearchAuthor()'>  
  35.             </input>  
  36.         </td>                           
  37.     </tr>  
  38.     <tr align='center'>  
  39.         <td colspan='2' style='border:1px black solid'>  
  40.             <select id='book_list' size='20' style='width: 370px' onchange='bookSelected(this)'>  
  41.             </select>  
  42.         </td>  
  43.         <td colspan='6' style='border:1px black solid'>  
  44.             <select id='author_list' size='20' style='width: 570px' onchange='authorSelected(this)'>  
  45.             </select>  
  46.         </td>  
  47.     </tr>  
  48.     <tr align='center'>  
  49.         <td colspan='2' style='border:1px solid black;'>  
  50.             <button onclick='downloadBook()'>  
  51.                 Получить ссылку на скачивание  
  52.             </button>  
  53.             <div id='d_link'>  
  54.             </div>  
  55.         </td>  
  56.         <td colspan='2' style='border:1px solid black;'>  
  57.             <button onclick='showAuthorBooks()'>  
  58.                 Найти автора  
  59.             </button>  
  60.         </td>  
  61.         <td colspan='2' style='border:1px solid black;'>  
  62.             <button onclick='clearAll()'>  
  63.                 Сбросить  
  64.             </button>  
  65.         </td>  
  66.         <td colspan='2' style='border:1px solid black;'>  
  67.             <button onclick='logout()'>  
  68.                 LOGOUT  
  69.             </button>  
  70.         </td>  
  71.     </tr>  
  72.     </table>  
  73. </body>  
  74. </html>  

Листинг 2

Авторизация

  1. <!DOCTYPE html>  
  2. <HEAD>  
  3.     <meta charset='utf-8'>  
  4.     <title>Authorization</title>  
  5.     <link rel='stylesheet' href='pwd.css'>  
  6. </HEAD>  
  7. <BODY>  
  8.     <table>  
  9.         <form method='post' action='index.php'>  
  10.             <tr align='center' >  
  11.                 <td colspan='2' >Авторизация</td>  
  12.             </tr>  
  13.             <tr>  
  14.                 <td>Логин:</td>  
  15.                 <td>  
  16.                     <input name='NAME'></input></td>  
  17.             </tr>  
  18.             <tr>  
  19.                 <td>Пароль:</td>  
  20.                 <td>  
  21.                     <input type='password' name='PASS'>  
  22.                     </input>  
  23.                 </td>  
  24.             </tr>  
  25.             <tr align='center'>  
  26.                 <td colspan='2'>  
  27.                     <input type='submit' value='LOGIN'></button>  
  28.                 </td>  
  29.             </tr>  
  30.         </form>  
  31.     </table>  
  32. </BODY>  
  33. </html>         

Листинг 3

Каскадная таблица стилей pwd.css

  1. body {  
  2.     background-color    : lightcyan;  
  3. }  
  4. table {  
  5.     border              : 1px solid black;  
  6.     margin              : auto;  
  7.     background-color    : lightblue;  
  8.     }  
  9. td {  
  10.     padding             : 20px;  
  11.     font-size           : 18pt;  
  12.     }  
  13. button {  
  14.     padding-left        : 80px;  
  15.     padding-right       : 80px;  
  16.     }  

Листинг 4

Каскадная таблица стилей menu.css

  1. table {  
  2.     background-color    : #b3d9ff;  
  3.     border-collapse     : collapse;  
  4.           
  5. }  
  6. .top_caption {  
  7.     border-left     : 1px solid black;  
  8.     border-top      : 1px solid black;  
  9.     border-right        : 1px solid black;  
  10. }  
  11. .name_book {  
  12.     padding-left        : 10px;  
  13.     padding-bottom      : 10px;  
  14.     padding-top     : 10px;  
  15.     border-left     : 1px solid black;  
  16.     border-bottom       : 1px solid black;  
  17. }  
  18.           
  19. .name_book_e {  
  20.     border-bottom       : 1px solid black;  
  21.     border-right        : 1px solid black;  
  22. }  
  23. .last_name {  
  24.     padding-left        : 10px;  
  25.     border-bottom       : 1px solid black;  
  26. }  
  27. .last_name_e {  
  28.     border-bottom       : 1px solid black;  
  29. }  
  30.               
  31. .first_name {  
  32.     padding-left        : 10px;  
  33.     border-bottom       : 1px solid black;  
  34. }  
  35. .first_name_e {  
  36.     border-bottom       : 1px solid black;  
  37. }  
  38.           
  39. .middle_name {  
  40.     padding-left        : 10px;  
  41.     border-bottom       : 1px solid black;  
  42. }  
  43.           
  44. .middle_name_e {  
  45.     border-bottom       : 1px solid black;  
  46.     border-right        : 1px solid black;  
  47. }  

Листинг 5

menu.js

  1.  var bookListWithIds;  
  2.  var selectedID;  
  3.    
  4.  function quickSearchBook(book_search)  
  5.  {  
  6.       
  7.                
  8.      $.post('actions.php',{ACTION:"GET_BOOKS_BY_NAMES", Book:book_search.value}, function(data)  
  9.          {  
  10.              var list = document.getElementById("book_list");  
  11.              fillList(list, data, "Title");  
  12.          });  
  13.  }  
  14.    
  15.    
  16.  function fillList(list, data, dataColumn)  
  17.  {  
  18.      list.innerHTML="";  
  19.      var decoded = JSON.parse(data);  
  20.      decoded.forEach( function(elem)   
  21.      {  
  22.          var option = document.createElement("option");  
  23.          if (Array.isArray(dataColumn))  
  24.          {  
  25.              option.text = elem[dataColumn[0]]+" "+elem[dataColumn[1]]+" "+elem[dataColumn[2]];  
  26.          }  
  27.          else  
  28.          {  
  29.             option.text = elem[dataColumn];  
  30.          }  
  31.          list.add(option);  
  32.            
  33.            
  34.      });  
  35.       
  36.  }  
  37.    
  38.    
  39.  function bookSelected(list)  
  40.  {  
  41.      var fname = document.getElementById("firstName");  
  42.      var lname = document.getElementById("lastName");  
  43.      var mname = document.getElementById("middleName");  
  44.        
  45.        
  46.      selectedID = list.selectedIndex;  
  47.            
  48.     $.post('actions.php',{ACTION:"GET_AUTHOR_BY_BOOK",Book:list.value}, function(data)  
  49.          {  
  50.                 var decoded = JSON.parse(data);  
  51.                 fname.value = decoded[0]['FirstName'];  
  52.                 lname.value = decoded[0]['LastName'];  
  53.                 mname.value = decoded[0]['MiddleName'];  
  54.                   
  55.         });  
  56.     var dl = document.getElementById("d_link");  
  57.     if (dl.innerHTML!="") dl.innerHTML="";  
  58.   
  59.  }  
  60.    
  61.  function quickSearchAuthor()  
  62.  {  
  63.      var fname = document.getElementById("firstName");  
  64.      var lname = document.getElementById("lastName");  
  65.      var mname = document.getElementById("middleName");  
  66.        
  67.      var list = document.getElementById("author_list");  
  68.       
  69.     $.post('actions.php',{ACTION:"GET_AUTHORS_BY_NAME", FName:fname.value, LName:lname.value, MName:middleName.value}, function(data)  
  70.      {  
  71.          fillList(list, data, ["LastName", "FirstName", "MiddleName"]);  
  72.     });    
  73.  }  
  74.    
  75.  function authorSelected(list)  
  76.  {  
  77.      var fio = list.value.split(" ");  
  78.      var book_list = document.getElementById("book_list");  
  79.      $.post('actions.php',{ACTION:"GET_BOOKS_BY_AUTHOR", LName:fio[0], FName:fio[1], MName:fio[2]}, function(data)  
  80.      {  
  81.          bookListWithIds=JSON.parse(data);     
  82.          fillList(book_list, data, "Title");  
  83.     });    
  84.  }  
  85.    
  86.  function downloadBook()  
  87.  {  
  88.      $.post('actions.php',{ACTION:"DOWNLOAD_BOOK", ID:bookListWithIds[selectedID]['BookID']}, function(data)  
  89.      {  
  90.          var dl = document.getElementById("d_link");  
  91.          var i = data.indexOf("!FILE:!");  
  92.          var f = data.substring(i+7);  
  93.          dl.innerHTML="<p><a href='"+f+"' download>СКАЧАТЬ</a>";  
  94.        
  95.     });        
  96.  }  
  97.    
  98.  function showAuthorBooks()  
  99.  {  
  100.     quickSearchAuthor();   
  101.  }  
  102.    
  103.  function clearAll()  
  104.  {  
  105.     document.getElementById("firstName").value = "";  
  106.     document.getElementById("lastName").value = "";  
  107.     document.getElementById("middleName").value = "";      
  108.  }  
  109.    
  110. function logout()  
  111. {  
  112.     $.post('actions.php',{ACTION:"LOGOUT"}, function(data)  
  113.     {  
  114.         window.location.replace('index.php');  
  115.     });            
  116.  }  

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