Untitled

<html>


<head>
<title>Лабораторная работа №8</title> <!-- Название страницы для браузера -->
<meta charset="utf-8"> <!-- Кодировка по умолчанию UTF-8 -->
<meta name="description" content="Лабораторная работа №8"> <!-- Тег описания страницы -->
<meta name="keywords" content="Информатика, HTML, CSS"> <!-- Ключевые слова страницы -->
    <link rel="icon" href="" type="image/x-icon"> <!-- Иконка страницы для браузера -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Open+Sans:300,400&amp;subset=cyrillic" rel="stylesheet">
<link rel="stylesheet" type="text/css" href=""/>
</head>

<body>
<style>
body{margin:0;}
h1,h6,ul, header,div,span,p{font-family: 'Open Sans Condensed', sans-serif; }
header{    width: 100%;
    height: 130px;
    background: #f1f1f1;
    box-shadow: 1px 0px 6px 0px #404040;}
	.namelab {
    font-size: 60px;

    font-weight: 800;
    display: inline-block;
    vertical-align: bottom;
    color: #012e47;
}
	.logo__image{    display: inline-block;
    position: relative;
    text-align: left;
    padding: 28px 14px 0px 18px;
}
.reload{

}
main{text-align: center;    padding: 65px;}
p{font-size:20px;}
h6{font-size:25px;}
h1{    font-size: 111px;}
#test_id_for_main_image{    width: 88px;
    vertical-align: middle;}


	button{    font-size: 25px;
    background: #545454;
    border: none;
    padding: 5px 22px;
    color: #fff;
    border-radius: 25px;
    margin-right: 20px; cursor:pointer;}
	button:hover{    background: #9E9E9E;}


	ul{    display: inline-block;    font-size: 28px;}
	 .li-1,.li-2,.li-3 {
    list-style-type: none; /* Убираем маркеры у списка */
   }
   .li-1:before, .li-2:before, .li-3:before {
    content: "X. "; /* Добавляем в качестве маркера символ */
   }
   .li-2:before {
    content: "Y. "; /* Добавляем в качестве маркера символ */
   }
    .li-3:before {
    content: "Z. "; /* Добавляем в качестве маркера символ */
   }
   td {    width: 150px;
    height: 110px;}
	th{    height: 100px;}


	 TABLE {
    border-collapse: collapse; /* Убираем двойные линии между ячейками */
   }
   TD, TH {
    border: 1px solid black; /* Параметры рамки */
   }
   TH {
       background: #f3f3f3; /* Цвет фона */
   }
</style>

<header>

<img class="logo__image" src="https://volsu.ru/bitrix/templates/INDEX/images/logo.png" title="Волгоградский государственный университет" alt="ВолГУ">
<div class="namelab">Лабораторная работа №8
</div>
<div class="reload"> О</div>
</header>


<main>

<h1>HTML <img id="test_id_for_main_image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/HTML.svg/267px-HTML.svg.png"></h1>
<hr>
<h6>Создание Web Сайтов</h6>
<hr>
<p><b>HTML</b> (от англ. <i>HyperText Markup Language</i> — «язык гипертекстовой разметки») — стандартизированный
язык разметки документов во <u>Всемирной паутине</u>. Большинство веб-страниц содержат описание разметки на языке
HTML (или XHTML). Язык HTML интерпретируется<b> браузерами</b>; полученный в результате интерпретации форматированный
текст отображается на экране монитора компьютера или мобильного устройства.
Язык HTML <b>до 5-й</b> версии определялся как приложение<u> SGML</u> (стандартного обобщённого языка разметки по стандарту ISO 8879).
 <br/>Спецификации HTML5 формулируются в терминах DOM <u>(объектной модели документа</u>).</p>


<h1>Форма POST запроса</h1>

<form action="">
<input type="password" style="font-size: 34px; border-radius: 14px; border: 1px solid #7b7b7b; text-align: center;" placeholder="Введите что-нибудь" value="Новосибирск">
<input type="text" style="font-size: 34px; border-radius: 14px; border: 1px solid #7b7b7b; text-align: center;" placeholder="Введите что-нибудь" value="Новосибирск">
<br/><br/>


<input type="file" style="background: #ccc;padding: 5px; border-radius: 6px;font-size: 17px;
    background: #6767671f;
    padding: 5px;
    border-radius: 6px;
    font-size: 17px;
    border: 7px dotted #929292;">
<br/><br/><br/><br/>

<button>Отправить</button>
<style>
.button-reset{ background: #ff7b7b;}
</style>
<button type="reset" class="button-reset">Сбросить</button>


</form>


<h1>Список и Таблица</h1>

<hr>
<p><u>Маркированный список</u> определяется тем, что перед каждым элементом списка добавляется небольшой <b>маркер</b>,
 обычно в виде закрашенного кружка. Сам список формируется с помощью
контейнера <span style="color: #ffffff; background: #b1b1b1; padding: 2px 9px; font-weight: bold;">< ul ></span> а каждый пункт списка
начинается с тега <span style="color: #ffffff; background: #b1b1b1; padding: 2px 9px; font-weight: bold;">< li ></span></p>
<hr>


<ul type="circle">
     <li>Зима</li>
     <li>Весна</li>
	 <ul >
     <li class="li-1">Март</li>
     <li class="li-2">Апрель </li>
     <li class="li-3">Май</li>
    </ul>
     <li>Лето</li>
     <li>Осень </li>
   </ul>
<br><br>
   <table border="1" style="    margin: 0 auto;">
   <caption>Таблица (пустая)</caption>

   <tr>
    <th rowspan="3">&emsp;&emsp;&emsp;&emsp;</th>
    <th> &emsp;&emsp;</th>
    <th>&emsp;&emsp; </th>
    <th>   &emsp; &emsp;  </th>
	 <th>&emsp; &emsp;</th>
    <th rowspan="3"> &emsp;&emsp;&emsp;&emsp;</th>

   </tr>
   <tr><td colspan="4"></td></tr>
   <tr><td ></td><td> </td><td></td><td></td></tr>

  </table>


   <h1>Переключатели</h1>

   <hr>
<p>Переключатели (жарг. радиокнопки) используют, когда необходимо выбрать один единственный вариант из нескольких предложенных.</p>
<hr>


   <p><b>Выьерите свой город</b></p>
  <p><input name="perekl" type="radio" > Омск</p>
    <p><input name="perekl" type="radio" checked > Новосибирск</p>
    <p><input name="perekl" type="radio" >  Томск</p>

</main>


<footer></footer>

</body>

</html>