Создание 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)
Атрибуты тегов
Атрибут - это параметр, который изменяет свойства 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)
Добавляем изображение
Файл с изображением лучше разместить в папку с вашей веб-страницей, чтобы не указывать путь к файлу.
Как указать размеры изображения:
Добавляем ссылку на файл
Разбиваем на строки
Как вы думаете, какой тег в приведенном выше 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>