Web-программирование, HTML/CSS

Материал из PTHSWiki
Перейти к: навигация, поиск

Содержание

Какими программами пользоваться

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>

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>
Личные инструменты
Пространства имён
Варианты
Действия
Навигация
Инструменты