Web-программирование, HTML/CSS
(Различия между версиями)
Gusarev (обсуждение | вклад) (→Списки) |
Gusarev (обсуждение | вклад) (→Материалы некоторых занятий) |
||
| Строка 161: | Строка 161: | ||
color:red; | 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> | ||
| + | |||
| + | ====Таблицы (thead)==== | ||
| + | <source lang="html4strict"> | ||
| + | </source> | ||
| + | |||
| + | ====Таблицы (thead)==== | ||
| + | <source lang="html4strict"> | ||
| + | </source> | ||
| + | |||
| + | ====Таблицы (thead)==== | ||
| + | <source lang="html4strict"> | ||
</source> | </source> | ||
Версия 17:30, 28 октября 2021
Содержание |
Какими программами пользоваться
| Notepad++ |
| VS Code |
Материалы некоторых занятий
21.20.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>
