Создание web-сайтов. HTML
HTML (HyperText Markup Language) - язык гипертекстовой разметки
- Создаем текстовый документ
(в проводнике Windows - контекстное меню -> Создать -> Текстовый документ,
в Linux - контекстное меню -> Создать -> Пустой файл) - Переименовываем его - изменяем название на произвольное, расширение меняем на html
например: index.html - Открываем файл с помощью блокнота (контекстное меню -> Открыть с помощью… -> Выбираем текстовый редактор (Блокнот, Mousepad или другой)
- Пишем в файле любую фразу, например, «Привет!»
- Сохраняем файл
- Открываем его с помощью браузера
Примеры web-страниц на языке HTML
Тег - это ключевое слово, заключенное в угловые скобки
Например: <br> (это тег разрыва строки)
Контейнер - это парный тег
Например:
<head>
…
</head>
Пустая страница с заголовком:
<head>
<title>Диденко Дмитрий</title>
</head>
<body>
</body>Страница с текстом «Это новый сайт»
<head>
<title>Диденко Дмитрий</title>
</head>
<body>
Это новый сайт
</body>Начертания шрифта
<b> - полужирный шрифт (bold)
<i> - курсив (italic)
<u> - подчеркнутый (underlined)
<sup> - верхний индекс (superscript)
<sub> - нижний индекс (subscript)
<head>
<title>Диденко Дмитрий</title>
</head>
<body>
Это <b>новый</b> <i>сайт</i>
</body>Атрибуты тегов
Атрибут - это параметр, который изменяет свойства HTML-элемента или предоставляет информацию о нём.
Пример:
<font size=»25″>
font - тег
size - имя атрибута
«25» - значение атрибута
Изменяем свойства шрифта
<font size="25">Большие буквы</font>
<font size="2">Маленькие буквы</font>
<font color="green">Зеленые буквы</font>
<font color="#FF0000">Красные буквы</font>В последнем примере применено шестнадцатеричное кодирование цвета в формате #RRGGBB (Red, Green, Blue)
Добавляем изображение
Файл с изображением лучше разместить в папку с вашей веб-страницей, чтобы не указывать путь к файлу.
<head>
<title>Диденко Дмитрий</title>
</head>
<body>
Это <b>новый</b> <i>сайт</i>
<img src="picture.jpg">
</body>Как указать размеры изображения:
<head>
<title>Диденко Дмитрий</title>
</head>
<body>
Это <b>новый</b> <i>сайт</i>
<img src=»picture.jpg» width=»50px» height=»25px»>
</body>
Добавляем ссылку на файл
<head>
<title>Диденко Дмитрий</title>
</head>
<body>
Это <b>новый</b> <i>сайт</i>
<img src="picture.jpg">
<a href="picture.jpg">Моя картинка</a>
</body>Разбиваем на строки
<head>
<title>Диденко Дмитрий</title>
</head>
<body>
Это <b>новый</b> <i>сайт</i><br>
<img src="picture.jpg"><br>
<a href="picture.jpg">Моя картинка</a>
</body>Как вы думаете, какой тег в приведенном выше html-коде служит для разбиения текста на строки?
Создание таблиц
Таблица
Вариант CSS:
<table style="border:solid; border-collapse:collapse">
</table>Вариант с минимумом CSS:
<table border="1" style="border-collapse:collapse">
</table>Строка таблицы
<table style="border:solid; border-collapse:collapse">
<tr>
</tr>
</table>Ячейки таблицы
Вариант с CSS:
<table style="border:solid; border-collapse:collapse">
<tr>
<td style="border:solid;">Ячейка1</td>
<td style="border:solid;">Ячейка2</td>
</tr>
</table>Вариант с минимумом CSS:
<table border="1" style="border-collapse:collapse">
<tr>
<td>Ячейка1</td>
<td>Ячейка2</td>
</tr>
</table>