Web-программирование, HTML/CSS
(Различия между версиями)
Gusarev (обсуждение | вклад) (Новая страница: «== Какими программами пользоваться == {| |- | [https://notepad-plus-plus.org/downloads/ Notepad++] |- | [https://code.visualstudio....») |
Gusarev (обсуждение | вклад) (→Создание элементов при загрузке окна (onload) и изменение свойств существующих объектов) |
||
(не показана 31 промежуточная версия 1 участника) | |||
Строка 1: | Строка 1: | ||
− | == Какими программами пользоваться == | + | == Какими программами и сайтами пользоваться == |
{| | {| | ||
|- | |- | ||
− | | [https://notepad-plus-plus | + | | [https://github.com/notepad-plus-plus/notepad-plus-plus/releases/download/v8.1.9/npp.8.1.9.Installer.exe Notepad++] |
|- | |- | ||
| [https://code.visualstudio.com/Download VS Code] | | [https://code.visualstudio.com/Download VS Code] | ||
− | | | + | |- |
+ | | [https://w3schools.com Справочник по всему в HTML] | ||
+ | |- | ||
+ | | [https://learn.javascript.ru/ Учебник по всему в JavaScript] | ||
+ | |||
+ | |||
+ | |} | ||
== Материалы некоторых занятий == | == Материалы некоторых занятий == | ||
− | 21. | + | ===21.10.2021=== |
+ | |||
+ | ====Списки==== | ||
+ | lists.html | ||
+ | <source lang="html4strict"> | ||
+ | <html> | ||
+ | <head> | ||
+ | <title> | ||
+ | Lists | ||
+ | </title> | ||
+ | </head> | ||
+ | <body> | ||
+ | <ol> | ||
+ | <li>List item 1</li> | ||
+ | <li>List item 2</li> | ||
+ | <li>List item 3</li> | ||
+ | <li>List item 4</li> | ||
+ | </ol> | ||
+ | <ul> | ||
+ | <li>unordered list item</li> | ||
+ | <li>unordered list item</li> | ||
+ | <li>unordered list item</li> | ||
+ | <li>unordered list item</li> | ||
+ | <li>unordered list item</li> | ||
+ | </ul> | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | |||
+ | ====Формы (простой вариант)==== | ||
+ | forms.html | ||
+ | <source lang="html4strict"> | ||
+ | <html> | ||
+ | <head> | ||
+ | <title>Forms</title> | ||
+ | </head> | ||
+ | <body> | ||
+ | <form> | ||
+ | <input type="text" | ||
+ | placeholder="Type here..." | ||
+ | name="just_text"> | ||
+ | <input type="submit" value="Ага, согласен"> | ||
+ | </form> | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | |||
+ | ====Формы (вариант посложнее)==== | ||
+ | forms_extra.html | ||
+ | <source lang="html4strict"> | ||
+ | <html> | ||
+ | <head> | ||
+ | <link rel="stylesheet" href="variables.css"> | ||
+ | <title> | ||
+ | Forms (extra) | ||
+ | </title> | ||
+ | </head> | ||
+ | <body> | ||
+ | <form> | ||
+ | <div> | ||
+ | <p><input name="user_name" type="text" placeholder="User name"></p> | ||
+ | <p><input name="password" type="password" placeholder="password"></p> | ||
+ | </div> | ||
+ | <div> | ||
+ | Favorite color? | ||
+ | <input name="color" type="radio" value="white"> White | ||
+ | <input name="color" type="radio" value="black"> Black | ||
+ | <input name="color" type="radio" value="red"> Red | ||
+ | <input name="color" type="radio" value="blue"> Blue | ||
+ | <input name="color" type="radio" value="green"> Green | ||
+ | </div> | ||
+ | <div> | ||
+ | <input name="ocean" list="oceans" placeholder="Oceans"> | ||
+ | <datalist id="oceans"> | ||
+ | <option value="Pacific"> | ||
+ | <option value="Indian"> | ||
+ | <option value="Atlantic"> | ||
+ | <option value="Arctic"> | ||
+ | </datalist> | ||
+ | </div> | ||
+ | |||
+ | <div> | ||
+ | <input type="checkbox" id="fav_oceans" name="fav_oceans" checked> | ||
+ | <label for="pacific">Pacific</label> | ||
+ | </div> | ||
+ | <div> | ||
+ | <input type="checkbox" id="fav_oceans" name="fav_oceans"> | ||
+ | <label for="indian">Indian</label> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div> | ||
+ | <input type="checkbox" id="fav_oceans" name="fav_oceans"> | ||
+ | <label for="Arctic">Arctic</label> | ||
+ | </div> | ||
+ | <div> | ||
+ | <input type="checkbox" id="fav_oceans" name="fav_oceans" checked> | ||
+ | <label for="Atlantic">Atlantic</label> | ||
+ | </div> | ||
+ | </form> | ||
+ | |||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | |||
+ | ====Стили (inline, type)==== | ||
+ | styles.html | ||
+ | <source lang="html4strict"> | ||
+ | <html> | ||
+ | <head> | ||
+ | <title>Styles</title> | ||
+ | <style> | ||
+ | h1, h2 { | ||
+ | color:red; | ||
+ | text-align: center; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <h1>My first first heading!</h1> | ||
+ | <h1 style="text-align:right;">Second heading here!</h1> | ||
+ | <h2>Secret header</h1> | ||
+ | Hello, world! | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | |||
+ | ====Стили (внешний css-файл)==== | ||
+ | styles_css.html | ||
+ | <source lang="html4strict"> | ||
+ | <html> | ||
+ | <head> | ||
+ | <link rel="stylesheet" href="styles.css"> | ||
+ | <title>Styles (CSS)</title> | ||
+ | </head> | ||
+ | <body> | ||
+ | <h1>My first first heading!</h1> | ||
+ | <h1 style="color:blue; text-align: right">Second heading here!</h1> | ||
+ | Hello, world! | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | |||
+ | styles.css | ||
+ | <source lang="css"> | ||
+ | h1 { | ||
+ | text-align:center; | ||
+ | color:red; | ||
+ | } | ||
+ | </source> | ||
+ | |||
+ | |||
+ | ===28.10.2021=== | ||
+ | ====Таблицы (+thead)==== | ||
+ | <source lang="html4strict"> | ||
+ | <html> | ||
+ | <head> | ||
+ | <link rel="stylesheet" href="variables.css"> | ||
+ | <title> | ||
+ | Tables | ||
+ | </title> | ||
+ | <style> | ||
+ | table { | ||
+ | border: 1px solid black; | ||
+ | border-collapse: collapse; | ||
+ | margin: 10px; | ||
+ | } | ||
+ | /* td { | ||
+ | border: 1px solid black; | ||
+ | } | ||
+ | th { | ||
+ | border: 1px solid black; | ||
+ | } */ | ||
+ | td, th { | ||
+ | border: 1px solid black; | ||
+ | padding: 10px; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <table> | ||
+ | <thead> | ||
+ | <th>Ocean</th> | ||
+ | <th>Max depth, m</th> | ||
+ | <th>Avg depth, m</th> | ||
+ | </thead> | ||
+ | <tr> | ||
+ | <td>Atlantic</td> | ||
+ | <td>3646</td> | ||
+ | <td>8486</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>Pacific</td> | ||
+ | <td>11022</td> | ||
+ | <td>4000</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>Indian</td> | ||
+ | <td>8047</td> | ||
+ | <td>3741</td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | |||
+ | ====Области (div)==== | ||
+ | <source lang="html4strict"> | ||
+ | <html> | ||
+ | <head> | ||
+ | <title>div size</title> | ||
+ | <style> | ||
+ | div { | ||
+ | border: 3px solid black; | ||
+ | background-color:rgb(0, 183, 255); | ||
+ | width: 550px; | ||
+ | height: 400px; | ||
+ | padding: 5px; | ||
+ | margin: 10px; | ||
+ | font-family: 'Courier New', Courier, monospace; | ||
+ | font-size: 28px; | ||
+ | /* font-weight: bold; */ | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div> | ||
+ | <p>Это пример тега div</p> | ||
+ | <p>А это вторая строка этого div</p> | ||
+ | </div> | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | |||
+ | ====Styles (id, class)==== | ||
+ | <source lang="html4strict"> | ||
+ | <html> | ||
+ | <head> | ||
+ | <title>Style ids</title> | ||
+ | <style> | ||
+ | h1 { | ||
+ | color:green; | ||
+ | } | ||
+ | .some_class { | ||
+ | color: orange; | ||
+ | } | ||
+ | #some_id { | ||
+ | color: blue; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <!-- <h1>My first heading!</h1> | ||
+ | <h1 id="some_id">My second heading!</h1> | ||
+ | <h1 id="another_id">My third heading!</h1> --> | ||
+ | <h1 id="some_id">My first heading!</h1> | ||
+ | <h1 class="some_class">My second heading!</h1> | ||
+ | <h1 class="some_class">My third heading!</h1> | ||
+ | Hello, world! | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | |||
+ | ====Изменение при наведении на объект (hover)==== | ||
+ | <source lang="html4strict"> | ||
+ | <html> | ||
+ | <head> | ||
+ | <title> | ||
+ | Hover | ||
+ | </title> | ||
+ | <style> | ||
+ | button { | ||
+ | border-width: 1px; | ||
+ | width: 200px; | ||
+ | height: 50px; | ||
+ | font-size: 25px; | ||
+ | background-color: green; | ||
+ | } | ||
+ | button:hover { | ||
+ | background-color: chocolate; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <button>Click me</button> | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | |||
+ | |||
+ | ===11.11.2021=== | ||
+ | |||
+ | ====JavaScript и управление активностью кнопки==== | ||
+ | lists.html | ||
+ | <source lang="html4strict"> | ||
+ | <html> | ||
+ | <head> | ||
+ | <script> | ||
+ | document.addEventListener("DOMContentLoaded", function(event) { | ||
+ | document.getElementById('send').disabled = "true"; | ||
+ | }); | ||
+ | function myFunction() { | ||
+ | var nameInput = document.getElementById('name').value; | ||
+ | console.log(nameInput); | ||
+ | if (nameInput === "") { | ||
+ | document.getElementById('send').disabled = true; | ||
+ | } else { | ||
+ | document.getElementById('send').disabled = false; | ||
+ | } | ||
+ | } | ||
+ | </script> | ||
+ | </head> | ||
+ | <body> | ||
+ | <form action="sent.php" method="post" name="frm"> | ||
+ | <input type="text" name="name_input" id="name" onkeyup="myFunction()"><br> | ||
+ | <button type="submit" class="button button-dark" id="send">Send message</button> | ||
+ | </form> | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | |||
+ | |||
+ | ===18.11.2021=== | ||
+ | |||
+ | Удивительный [http://howtocenterincss.com/ сайт], где можно узнать, как написать CSS-код для выравнивания в разных обстоятельствах. | ||
+ | |||
+ | ====Несколько div, выравнивание, реакция на hover==== | ||
+ | lists.html | ||
+ | <source lang="html4strict"> | ||
+ | <html> | ||
+ | <head> | ||
+ | <title> | ||
+ | Hover | ||
+ | </title> | ||
+ | <style> | ||
+ | #div_header { | ||
+ | width: 100%; | ||
+ | height: 150px; | ||
+ | font-size: 50px; | ||
+ | font-family: Arial, Helvetica, sans-serif; | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | background-color: #667766; | ||
+ | } | ||
+ | .menu_item { | ||
+ | border-width: 1px; | ||
+ | width: 300px; | ||
+ | height: 100px; | ||
+ | margin-top: 5px; | ||
+ | line-height: 100px; | ||
+ | font-size: 30px; | ||
+ | text-align: center; | ||
+ | background-color: #AABBDD; | ||
+ | } | ||
+ | .menu_item:hover { | ||
+ | background-color: #BBCCEE; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div id="div_header">HEADER</div> | ||
+ | <div class="menu_item">menu item 1</div> | ||
+ | <div class="menu_item"> menu item 2</div> | ||
+ | <div class="menu_item">menu item 3</div> | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | |||
+ | |||
+ | ===02.12.2021=== | ||
+ | |||
+ | Как использовать [https://developer.mozilla.org/ru-RU/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout grid] и [https://developer.mozilla.org/ru-RU/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox flexbox] для вёрстки "прямоугольного" сайта. | ||
+ | |||
+ | ====Простой пример с вёрсткой grid/flexbox==== | ||
+ | flex-example.html | ||
+ | <source lang="css"> | ||
+ | <html> | ||
+ | <head> | ||
+ | <title>Document</title> | ||
+ | <link rel="stylesheet" href="flex-example.css"> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div class="container"> | ||
+ | <div class="header"> | ||
+ | Header | ||
+ | <div class="app_logo">My App</div> | ||
+ | <div class="home">Home</div> | ||
+ | <div class="search">Search</div> | ||
+ | <div class="logout">Log out</div> | ||
+ | </div> | ||
+ | <div class="sidebar"> | ||
+ | Sidebar | ||
+ | </div> | ||
+ | <div class="content"> | ||
+ | Content | ||
+ | </div> | ||
+ | <div class="footer"> | ||
+ | Footer | ||
+ | </div> | ||
+ | </div> | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | |||
+ | |||
+ | flex-example.css | ||
+ | <source lang="css"> | ||
+ | html, body { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .container { | ||
+ | /* background-color: gainsboro; | ||
+ | padding: 10px; */ | ||
+ | display: grid; | ||
+ | grid-template-columns: repeat(12, 1fr); | ||
+ | grid-template-rows: 10vh 80vh 10vh; | ||
+ | } | ||
+ | |||
+ | .header { | ||
+ | background-color: coral; | ||
+ | padding: 10px; | ||
+ | grid-column: 1 / -1; | ||
+ | display: flex; | ||
+ | flex-direction: row; | ||
+ | /* justify-content: start; | ||
+ | justify-content: center; | ||
+ | justify-content: space-between; | ||
+ | justify-content: space-around; */ | ||
+ | justify-content: space-evenly; | ||
+ | } | ||
+ | |||
+ | /* .search { | ||
+ | margin-left: auto; | ||
+ | } */ | ||
+ | |||
+ | .sidebar { | ||
+ | background-color: darkgoldenrod; | ||
+ | padding: 10px; | ||
+ | grid-column: 1 / 2; | ||
+ | } | ||
+ | |||
+ | .content { | ||
+ | background-color: darkseagreen; | ||
+ | padding: 10px; | ||
+ | grid-column: 2 / -1; | ||
+ | } | ||
+ | |||
+ | .footer { | ||
+ | background-color: dimgrey; | ||
+ | padding: 10px; | ||
+ | grid-column: 1 / -1; | ||
+ | } | ||
+ | </source> | ||
+ | |||
+ | |||
+ | ===09.12.2021=== | ||
+ | |||
+ | Дополнение к предыдущему коду, использование flex для вариантов выравнивания по горизонтали. | ||
+ | |||
+ | ====Пример с вёрсткой grid/flexbox: выравниваем заголовок==== | ||
+ | flex-example.html | ||
+ | <source lang="css"> | ||
+ | <html> | ||
+ | <head> | ||
+ | <title>Document</title> | ||
+ | <link rel="stylesheet" href="flex-example.css"> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div class="container"> | ||
+ | <div class="header"> | ||
+ | <div class="header_left_part"> | ||
+ | <div class="app_logo">My App</div> | ||
+ | <div class="home">Home</div> | ||
+ | </div> | ||
+ | <div class="header_right_part"> | ||
+ | <div class="search">Search</div> | ||
+ | <div class="logout">Log out</div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="sidebar"> | ||
+ | <div class="menu_item">Menu item 1</div> | ||
+ | <div class="menu_item">Menu item 2</div> | ||
+ | <div class="menu_item">Menu item 3</div> | ||
+ | <div class="menu_item">Menu item 4</div> | ||
+ | </div> | ||
+ | <div class="content"> | ||
+ | Contentem grew ghr guhr geqhr uqhre gheq r | ||
+ | </div> | ||
+ | <div class="footer"> | ||
+ | Footer | ||
+ | </div> | ||
+ | </div> | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | |||
+ | |||
+ | flex-example.css | ||
+ | <source lang="css"> | ||
+ | html, body { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .container { | ||
+ | /* background-color: gainsboro; | ||
+ | padding: 10px; */ | ||
+ | display: grid; | ||
+ | grid-template-columns: repeat(12, 1fr); | ||
+ | grid-template-rows: 20vh 60vh 20vh; | ||
+ | } | ||
+ | |||
+ | .header { | ||
+ | border-color: blue; | ||
+ | border-style: double; | ||
+ | background-color: coral; | ||
+ | color: white; | ||
+ | grid-column: 1 / -1; | ||
+ | padding: 0px; | ||
+ | display: flex; | ||
+ | } | ||
+ | |||
+ | .header_left_part { | ||
+ | width: 100%; | ||
+ | border-color: yellow; | ||
+ | border-style: double; | ||
+ | display: flex; | ||
+ | } | ||
+ | |||
+ | .header_right_part { | ||
+ | width: 20%; | ||
+ | border-color: red; | ||
+ | border-style: double; | ||
+ | display: flex; | ||
+ | /* margin-left: auto; */ | ||
+ | justify-content: flex-end; | ||
+ | } | ||
+ | |||
+ | .app_logo { | ||
+ | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .home { | ||
+ | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .search { | ||
+ | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .logout { | ||
+ | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .sidebar { | ||
+ | background-color: darkgoldenrod; | ||
+ | padding: 10px; | ||
+ | grid-column: 1 / 5; | ||
+ | } | ||
+ | |||
+ | .content { | ||
+ | background-color: darkseagreen; | ||
+ | padding: 10px; | ||
+ | grid-column: 5 / -1; | ||
+ | } | ||
+ | |||
+ | .footer { | ||
+ | background-color: dimgrey; | ||
+ | padding: 10px; | ||
+ | grid-column: 1 / -1; | ||
+ | } | ||
+ | </source> | ||
+ | |||
+ | ===13.01.2022=== | ||
+ | |||
+ | Пара примеров того, как можно использовать JS (Javascript) на своей странице. | ||
+ | |||
+ | ====Создание элементов при загрузке окна (onload) и изменение свойств существующих объектов==== | ||
+ | DOM_example_1.html | ||
+ | <source lang='html4strict'> | ||
+ | <html> | ||
+ | <head> | ||
+ | <script> | ||
+ | // run this function when the document is loaded | ||
+ | window.onload = function() { | ||
+ | |||
+ | // create a couple of elements in an otherwise empty HTML page | ||
+ | const heading = document.createElement("h1"); | ||
+ | const heading_text = document.createTextNode("Это header, который был сделан кодом на JS!"); | ||
+ | heading.appendChild(heading_text); | ||
+ | document.body.appendChild(heading); | ||
+ | } | ||
+ | </script> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div id="test">default text</div> | ||
+ | <input type="button" style="width:200px;height:50px" value="Click me!" onclick="document.getElementById('test').textContent='Привет-привет!'"></button> | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> |
Версия 17:44, 13 января 2022
Содержание |
Какими программами и сайтами пользоваться
Notepad++ |
VS Code |
Справочник по всему в HTML |
Учебник по всему в JavaScript
|
Материалы некоторых занятий
21.10.2021
Списки
lists.html
<html>
<head>
<title>
Lists
</title>
</head>
<body>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
<ul>
<li>unordered list item</li>
<li>unordered list item</li>
<li>unordered list item</li>
<li>unordered list item</li>
<li>unordered list item</li>
</ul>
</body>
</html>
Формы (простой вариант)
forms.html
<html>
<head>
<title>Forms</title>
</head>
<body>
<form>
<input type="text"
placeholder="Type here..."
name="just_text">
<input type="submit" value="Ага, согласен">
</form>
</body>
</html>
Формы (вариант посложнее)
forms_extra.html
<html>
<head>
<link rel="stylesheet" href="variables.css">
<title>
Forms (extra)
</title>
</head>
<body>
<form>
<div>
<p><input name="user_name" type="text" placeholder="User name"></p>
<p><input name="password" type="password" placeholder="password"></p>
</div>
<div>
Favorite color?
<input name="color" type="radio" value="white"> White
<input name="color" type="radio" value="black"> Black
<input name="color" type="radio" value="red"> Red
<input name="color" type="radio" value="blue"> Blue
<input name="color" type="radio" value="green"> Green
</div>
<div>
<input name="ocean" list="oceans" placeholder="Oceans">
<datalist id="oceans">
<option value="Pacific">
<option value="Indian">
<option value="Atlantic">
<option value="Arctic">
</datalist>
</div>
<div>
<input type="checkbox" id="fav_oceans" name="fav_oceans" checked>
<label for="pacific">Pacific</label>
</div>
<div>
<input type="checkbox" id="fav_oceans" name="fav_oceans">
<label for="indian">Indian</label>
</div>
</div>
<div>
<input type="checkbox" id="fav_oceans" name="fav_oceans">
<label for="Arctic">Arctic</label>
</div>
<div>
<input type="checkbox" id="fav_oceans" name="fav_oceans" checked>
<label for="Atlantic">Atlantic</label>
</div>
</form>
</body>
</html>
Стили (inline, type)
styles.html
<html>
<head>
<title>Styles</title>
<style>
h1, h2 {
color:red;
text-align: center;
}
</style>
</head>
<body>
<h1>My first first heading!</h1>
<h1 style="text-align:right;">Second heading here!</h1>
<h2>Secret header</h1>
Hello, world!
</body>
</html>
Стили (внешний css-файл)
styles_css.html
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>Styles (CSS)</title>
</head>
<body>
<h1>My first first heading!</h1>
<h1 style="color:blue; text-align: right">Second heading here!</h1>
Hello, world!
</body>
</html>
styles.css
h1 {
text-align:center;
color:red;
}
28.10.2021
Таблицы (+thead)
<html>
<head>
<link rel="stylesheet" href="variables.css">
<title>
Tables
</title>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
margin: 10px;
}
/* td {
border: 1px solid black;
}
th {
border: 1px solid black;
} */
td, th {
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<table>
<thead>
<th>Ocean</th>
<th>Max depth, m</th>
<th>Avg depth, m</th>
</thead>
<tr>
<td>Atlantic</td>
<td>3646</td>
<td>8486</td>
</tr>
<tr>
<td>Pacific</td>
<td>11022</td>
<td>4000</td>
</tr>
<tr>
<td>Indian</td>
<td>8047</td>
<td>3741</td>
</tr>
</table>
</body>
</html>
Области (div)
<html>
<head>
<title>div size</title>
<style>
div {
border: 3px solid black;
background-color:rgb(0, 183, 255);
width: 550px;
height: 400px;
padding: 5px;
margin: 10px;
font-family: 'Courier New', Courier, monospace;
font-size: 28px;
/* font-weight: bold; */
}
</style>
</head>
<body>
<div>
<p>Это пример тега div</p>
<p>А это вторая строка этого div</p>
</div>
</body>
</html>
Styles (id, class)
<html>
<head>
<title>Style ids</title>
<style>
h1 {
color:green;
}
.some_class {
color: orange;
}
#some_id {
color: blue;
}
</style>
</head>
<body>
<!-- <h1>My first heading!</h1>
<h1 id="some_id">My second heading!</h1>
<h1 id="another_id">My third heading!</h1> -->
<h1 id="some_id">My first heading!</h1>
<h1 class="some_class">My second heading!</h1>
<h1 class="some_class">My third heading!</h1>
Hello, world!
</body>
</html>
Изменение при наведении на объект (hover)
<html>
<head>
<title>
Hover
</title>
<style>
button {
border-width: 1px;
width: 200px;
height: 50px;
font-size: 25px;
background-color: green;
}
button:hover {
background-color: chocolate;
}
</style>
</head>
<body>
<button>Click me</button>
</body>
</html>
11.11.2021
JavaScript и управление активностью кнопки
lists.html
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById('send').disabled = "true";
});
function myFunction() {
var nameInput = document.getElementById('name').value;
console.log(nameInput);
if (nameInput === "") {
document.getElementById('send').disabled = true;
} else {
document.getElementById('send').disabled = false;
}
}
</script>
</head>
<body>
<form action="sent.php" method="post" name="frm">
<input type="text" name="name_input" id="name" onkeyup="myFunction()"><br>
<button type="submit" class="button button-dark" id="send">Send message</button>
</form>
</body>
</html>
18.11.2021
Удивительный сайт, где можно узнать, как написать CSS-код для выравнивания в разных обстоятельствах.
Несколько div, выравнивание, реакция на hover
lists.html
<html>
<head>
<title>
Hover
</title>
<style>
#div_header {
width: 100%;
height: 150px;
font-size: 50px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
vertical-align: middle;
background-color: #667766;
}
.menu_item {
border-width: 1px;
width: 300px;
height: 100px;
margin-top: 5px;
line-height: 100px;
font-size: 30px;
text-align: center;
background-color: #AABBDD;
}
.menu_item:hover {
background-color: #BBCCEE;
}
</style>
</head>
<body>
<div id="div_header">HEADER</div>
<div class="menu_item">menu item 1</div>
<div class="menu_item"> menu item 2</div>
<div class="menu_item">menu item 3</div>
</body>
</html>
02.12.2021
Как использовать grid и flexbox для вёрстки "прямоугольного" сайта.
Простой пример с вёрсткой grid/flexbox
flex-example.html
<html>
<head>
<title>Document</title>
<link rel="stylesheet" href="flex-example.css">
</head>
<body>
<div class="container">
<div class="header">
Header
<div class="app_logo">My App</div>
<div class="home">Home</div>
<div class="search">Search</div>
<div class="logout">Log out</div>
</div>
<div class="sidebar">
Sidebar
</div>
<div class="content">
Content
</div>
<div class="footer">
Footer
</div>
</div>
</body>
</html>
flex-example.css
html, body {
margin: 0;
padding: 0;
}
.container {
/* background-color: gainsboro;
padding: 10px; */
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 10vh 80vh 10vh;
}
.header {
background-color: coral;
padding: 10px;
grid-column: 1 / -1;
display: flex;
flex-direction: row;
/* justify-content: start;
justify-content: center;
justify-content: space-between;
justify-content: space-around; */
justify-content: space-evenly;
}
/* .search {
margin-left: auto;
} */
.sidebar {
background-color: darkgoldenrod;
padding: 10px;
grid-column: 1 / 2;
}
.content {
background-color: darkseagreen;
padding: 10px;
grid-column: 2 / -1;
}
.footer {
background-color: dimgrey;
padding: 10px;
grid-column: 1 / -1;
}
09.12.2021
Дополнение к предыдущему коду, использование flex для вариантов выравнивания по горизонтали.
Пример с вёрсткой grid/flexbox: выравниваем заголовок
flex-example.html
<html>
<head>
<title>Document</title>
<link rel="stylesheet" href="flex-example.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="header_left_part">
<div class="app_logo">My App</div>
<div class="home">Home</div>
</div>
<div class="header_right_part">
<div class="search">Search</div>
<div class="logout">Log out</div>
</div>
</div>
<div class="sidebar">
<div class="menu_item">Menu item 1</div>
<div class="menu_item">Menu item 2</div>
<div class="menu_item">Menu item 3</div>
<div class="menu_item">Menu item 4</div>
</div>
<div class="content">
Contentem grew ghr guhr geqhr uqhre gheq r
</div>
<div class="footer">
Footer
</div>
</div>
</body>
</html>
flex-example.css
html, body {
margin: 0;
padding: 0;
}
.container {
/* background-color: gainsboro;
padding: 10px; */
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 20vh 60vh 20vh;
}
.header {
border-color: blue;
border-style: double;
background-color: coral;
color: white;
grid-column: 1 / -1;
padding: 0px;
display: flex;
}
.header_left_part {
width: 100%;
border-color: yellow;
border-style: double;
display: flex;
}
.header_right_part {
width: 20%;
border-color: red;
border-style: double;
display: flex;
/* margin-left: auto; */
justify-content: flex-end;
}
.app_logo {
padding: 5px;
}
.home {
padding: 5px;
}
.search {
padding: 5px;
}
.logout {
padding: 5px;
}
.sidebar {
background-color: darkgoldenrod;
padding: 10px;
grid-column: 1 / 5;
}
.content {
background-color: darkseagreen;
padding: 10px;
grid-column: 5 / -1;
}
.footer {
background-color: dimgrey;
padding: 10px;
grid-column: 1 / -1;
}
13.01.2022
Пара примеров того, как можно использовать JS (Javascript) на своей странице.
Создание элементов при загрузке окна (onload) и изменение свойств существующих объектов
DOM_example_1.html
<html>
<head>
<script>
// run this function when the document is loaded
window.onload = function() {
// create a couple of elements in an otherwise empty HTML page
const heading = document.createElement("h1");
const heading_text = document.createTextNode("Это header, который был сделан кодом на JS!");
heading.appendChild(heading_text);
document.body.appendChild(heading);
}
</script>
</head>
<body>
<div id="test">default text</div>
<input type="button" style="width:200px;height:50px" value="Click me!" onclick="document.getElementById('test').textContent='Привет-привет!'"></button>
</body>
</html>