Найти тему
Big-Header

Создаю свой сайт. Первый день.

Оглавление

Скажу сразу, я вообще не понимаю что, где и как писать или создавать сайт. Делается это для того, чтобы показать вам, на сколько человек может продвинуться в создании сайта за месяц. В качестве редактора блокнота я выбрал Sublime Text, как по мне это простой и удобный текстовый редактор для создания сайтов, программ и всего остального.

1. Создаем структуру документа HTML и CSS

Для начала создадим папку с любым названием. И в эту папку создаем два файла, один с расширением html, а другой - css.

-2

Открываем main.html через браузер и через Sublime Text, и открываем main.css через Sublime Text. После в файле main.html пишем структуру нашего документа.

Структура html-документа
Структура html-документа

В шестой строке (там где находится курсор) мы пишем путь к нашему css-файлу, то есть просто название вашего файла. Если ваш css-файл находится не в папке вместе с html-файлом, то нужно указывать полный путь к css-файлу. В данном случае у меня все файлы были в одной папке.

2. Текст в HTML и CSS

В HTML можно менять размер текста просто меняя цифры в строке.

-4

В CSS все на много проще. Просто в html-файле для каждого объекта, который вы хотите поменять задаете свой свое уникальное имя.

Пример: <h1 class='text'>Здесь пишите любой текст</h1>

После переходите в CSS и задаете ему размер, форму, прозрачность шрифта расстояние между символами и все остальное.

-5

3. Изображение в HTML и CSS

Изображение вставляется так же очень просто. В <body></body> пишем

<img src='путь к файлу картинки или URL-адрес картинки с интернета' class='photo'>

Для него мы так же создаем уникальное имя и переходим в CSS. У картинки можно поменять размер, прозрачность и отступы. Так же если присмотреться на картинки в "Яндекс Дзен", то можно увидеть закругление углов, их тоже можно создать в CSS.

-6
-7

Так же в "Яндекс Дзен" весь текст и все картинки находятся в центре сайта. Это можно легко сделать написав в CSS следующее:

Для текста: "margin: 0 auto;"

Для картинки: "display:block;" и "margin:auto;"