Продвинутый HTML - и CSS

Ссылки, картинки, всего по мелочи

Начнём с того, что иногда вам может понадобиться вывести какую-то информацию и интересным образом попытаться её систематизировать. Короче говоря, попросту сделать таблицу. Три шага:

Парный тег <table> - обрамляет весь контент вашей новенькой таблицы
Парный тег <tr> - заключает в себе строку таблицы
Два похожих друг на друга парных тега <th> и <td>.

Как запомнить всю разницу между ними и заодно подучить английский?

TR - сокращение от Table Row, что означает "строка таблицы";
TH - Table Header, то есть "заголовок таблицы", и хотя он не озаглавливает всю таблицу, но точно может озаглавить каждый из ваших столбцов;
TD - Table Data, то есть именно нужная вам информация.

Пример:

<table>
    <tr> <th>Первый заголовок</th> <th>Второй заголовок</th> </tr>
    <tr> <td>100 рублей</td> <td>Миллионы миллиардов лет на этой планете</td> </tr>
</table>

Предположим, мы хотим структурировать ваши доходы и расходы, причём сделать это на отдельной странице. Тогда нам понадобится сделать ссылку с главной страницы на новую через специальный парный тег <a>. Озаглавим главную страницу index.html, страницу с доходами/расходами - stonks.html, и они находятся в одном каталоге.

Ссылка будет выглядеть так: <a href="stonks.html">Доходы и расходы</a>.

Как добавлять изображения? Простейший способ - тег <img>: <img src="smiley.gif" alt="Smiley face" height="42" width="42">.

Атрибут src (от англ. source - источник) показывает, где находится файл с картинкой.

Атрибут alt (alternative text) часто используется в тех случаях, когда браузер по каким-то причинам загрузить картинку не может, и когда вы мышкой наводите на место картинки, выскакивает подсказка и говорит, что здесь должна была быть картинка с тематикой "Smiley face".

Атрибуты height и width - очень важные и повсеместно использующиеся атрибуты высоты и ширины. Эти параметры можно указывать как в пикселях (42px), так и в процентах от всего экрана (30%).

Пример формы:

<form action="/action_page.php">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="Submit">
</form>

У парного тега <form> есть атрибут action, он указывает на страницу, на которую браузер отправит заполненные вами данные. Страница имеет расширение .php, из чего можно сделать вывод, что страница написана на языке PHP.

Тег <input> - это поле ввода. Атрибут type говорит о типе вводных данных (button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week).

Атрибут name указывает странице, чем являются каждые из введённых данных. Два указанных имени - это fname и lname; когда программист через PHP будет обращаться к данным по ключу fname, он получит имя человека, который заполнил анкету.

<input type="submit" value="Submit"> - кнопка отправки с текстом Submit. Value может быть указан в объектах других типов как предопределённое присвоенное объекту значение.

Пособие по всем тегам и их атрибутам - здесь.

CSS - Каскадные таблицы стилей

CSS используют для изменения внешнего вида страницы. Есть два пути использования CSS: можно создать специальный файл с расширением .css и подключить его внутри тегов <head>: <link rel="stylesheet" href="style.css" type="text/css"/>, или можно написать там же парный тег <style> и весь CSS-текст написать между ними.

Пример 1. Изменение цвета текста, заключённого в тегах <p>.

p {
    color: red;
}

Схема использования CSS: указанные пары свойств-значений относятся к селектору.

Пример 2. Отображение красного текста посередине экрана. Комментарии.

<!DOCTYPE html>
<html>
    <head>
        <style>
p {
    color: red;
    text-align: center;
    /* Так можно писать комментарии в CSS. */
} 
/* А так можно писать комментарии, которые будут располагаться
на нескольких строках. */
        </style>
    </head>
    <body>
        <p>Hello World!</p>
        <p>This paragraph is styled with CSS.</p>
        <p>CSS comments are not shown in the output.</p>
    </body>
</html>

Таким образом выглядит итоговая страница.

Виды селекторов:

Тег: p { ... }. Простейший способ придавать любому тегу стиль.
Идентификатор: <div id="one"><p>Привет!</p></div> и #one { color: blue; }. Способ, который используется для придания только одному тегу каких-то определённых свойств.
Класс: <p class="center">This paragraph refers to one class.</p> и .center { background-color: black; color: white; text-align: center; }. Используется для различных однотипных элементов, тип тега не имеет значения (можно приписывать один и тот же класс, например, и параграфу, и таблице).
Класс для тега: p.center { ... }. Будет работать только с параграфом.
Все элементы: * { color: red; }.
Множественный выбор для одних и тех же свойств: h1, h2, p { text-align: center; color: red; }.

Пособие по CSS - здесь.