Untitled

<!DOCTYPE html>
<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;}
:focus {
        outline: none !important;
}
a:active{    color: #0125ea !important;}
a{background: #CDDC39;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    padding: 5px;
}
a:visited {color:black !important; }
a:hover{    background: #ccc;}
h1,h6,h2,h3,h4,h5,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; /* Убираем маркеры у списка */
   }

   td {    width: 150px;
    height: 110px;}
    th{    height: 100px;}


    a:-webkit-any-link:active {
    color: -webkit-activelink;
}


    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>
     <ol type="A" start="24" >
     <li >Март</li>
     <li >Апрель </li>
     <li >Май</li>
    </ol>
     <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>Переключатели (жарг. радиокнопки) используют, когда необходимо выбрать один единственный
вариант из нескольких предложенных.
<br>
X<sub>и внизу текст</sub>  G<sup>и текст всверху</sup>
<br>
<br>
<a href="https://wcc.ru" target="_blank">Перейти на сайт</a>
<br><br><br>


<tt>Контейнер < tt > отображает текст моноширинным текстом</tt>
<h2>Привет x1</h2>
<h3>Привет x2</h3>
<h4>Привет x3</h4>
<h5>Привет x4</h5>
</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>


 <h1>Рисунок</h1>
 </main>
<style>
.telephone{      width: 230px;
    height: 450px;
    border-radius: 30px;
    background: #d6e3bc;
    margin: 0 auto;
    border: 3px solid #464646;}
    .screen{          background: #fff;
    width: 188px;
    height: 215px;
    margin: 16px 19px;
    border-radius: 35px;
    border: 3px solid black;}
    .knopka{    width: 40px;
    height: 40px;
    background: #151414;
    border-radius: 100px;
    margin: 7px;
   }
    .newlist li{    display: inline-block;}
</style>


<div class="telephone">
<div class="screen"> <div style="font-size: 75px; padding: 46px 11px; font-weight: 900;">12:00</div></div>

<ul class="newlist" style="           margin: 5px -13px;
    width: 210px;">
<li><div class="knopka"></div></li>
<li><div class="knopka"></div></li>
<li><div class="knopka"></div></li>
<li><div class="knopka"></div></li>
<li><div class="knopka"></div></li>
<li><div class="knopka"></div></li>
<li><div class="knopka"></div></li>
<li><div class="knopka"></div></li>
<li><div class="knopka"></div></li>
</ul>


</div>

<br><br>


 </div>


<footer></footer>

</body>

</html>