Я продолжаю цикл статей по созданию собственного веб-сайта в ОС Убунту
Итак, в прошлый раз мы остановились на изучении тегов <ul> и <li>. Ссылка на начало:
HTML/CSS Часть 5
CSS позволяет оформить страницу как угодно. Ранее немного затронули CSS и тег <style>. Что бы вынести CSS в отдельный файл, откроем наш файл index.html в ранее созданной папке LinuxUSER при помощи Sublime Text 3 и напишем такую запись внутри тега <head>: пишем link и нажимаем клавишу TAB.
В итоге создалась запись подключения CSS стилей. Теперь что бы указать на файл CSS надо в кавычках здесь href="" указать путь к этому файлу. Но перед этим надо создать структуру каталогов сайта. Структура каталогов выглядит так:
Есть родительский каталог под названием LinuxUSER. И есть файл главной страницы index.html. Теперь создадим ещё один каталог assets.
Для этого наведём курсор мыши на название родительского каталога LinuxUSER под надписью FOLDERS. Нажимаем правую клавишу мыши. В открывшемся окне выбираем New Folder. И в левом нижнем углу напротив Folder Name пишем assets.
Жмём клавишу ENTER и создался каталог assets.
Внутри него надо создать ещё два каталога. Первым создадим каталог img. Наводим курсор мыши на assets. Жмём правую клавишу мыши и выбираем New Forlder и внизу в строке Folder Name пишем img:
В каталоге img будут храниться картинки. И второй каталог будет называться css. Создаётся аналогичным образом что и img:
В каталоге css будем хранить отдельные файлы стилей. Теперь надо указать путь к файлу в кавычках здесь: href="". Но перед этим создадим сам файл внутри css. Правой клавишей мыши нажимаем на css и выбираем New File. После чего жмём CTRL+S и в открывшемся окне напротив имени вместо untitled пишем style.css:
И нажимаем в правом верхнем углу Сохранить. После чего выбираем index.html:
И указываем путь в href="" к созданному файлу /assets/css/style.css
Полностью это выглядит так:
<link rel="stylesheet" href="/assets/css/style.css">
И сохраняем изменения комбинацией CTRL+S.
Теперь надо будет создать основный блоки будущего сайта.
Весь контент сайта располагается между тегами <body>.
Теперь удалим что мы писали в предыдущей статье между тегами <body> и создадим между этими тегами главный контейнер с названием main. В нем мы будем размещать основной контент страницы. Пишем <div class="main">
Полностью писать <div class="main"> вовсе не нужно. Достаточно в нужном месте поставить точку (.) и нажать TAB. И сразу появится следующая запись: <div class=""></div>. Достаточно будет потом просто в галочках вписать название класса и всё.
Далее после <div class="main"> ставим закрывающий тег </div> и наведя курсор мыши между "main"> и </div> жмём ENTER. В результате получается вот такая запись:
<body>
<div class="main">
</div>
</body>
Верхний блок сайтов называется header. Давайте сейчас его создадим. После <div class="main"> напишем <div class="header"></div>.
Так же как и в прошлом случае с main между "header"> и </div> наводим курсор мыши и жмём ENTER:
Запись выглядит так:
<body>
<div class="main">
<div class="header">
</div>
</div>
</body>
Логотип сайта и меню располагаются в header. Теперь напишем ещё один div. Но уже под header: <div class="logo"></div>. Так же перед закрывающем тегом </div> после "logo"> наводим курсор мыши и жмём ENTER:
Запись выглядит так:
<body>
<div class="main">
<div class="header">
<div class="logo">
</div>
</div>
</div>
</body>
Теперь внесём еще один div но уже под logo: <div class="logo_text"></div>. Как и в прошлых случаях между значками "></ жмём ENTER. Полная запись пишется так:
<body>
<div class="main">
<div class="header">
<div class="logo">
<div class="logo_text">
</div>
</div>
</div>
</div>
</body>
Ну и теперь внутри этого контейнера нужно вывести название будущего сайта. Это будет LinuxUSER. Теперь напишем заголовок страницы. Пишем <h1><a href=""></a></h1>. С помощью тега a можно указать любую ссылку в галочках href="". Главная страница указывается через /. То есть <h1><a href="/"></a></h1>. В закрывающих скобках (><) после a href="/"пишем название сайта LinuxUSER. То есть так: <h1><a href="/">LinuxUSER</a></h1>
В итоге структуру создали. Теперь осталось сделать подпись. Подпись будет "Веб-программирование". Для этого создадим ещё один тег заголовка второго уровня: <h2></h2>. И пишем в нём "Веб-программирование". Полная запись выглядит так:
<body>
<div class="main">
<div class="header">
<div class="logo">
<div class="logo_text">
<h1><a href="/">LinuxUSER</a></h1>
<h2>Веб-программирование</h2>
</div>
</div>
</div>
</div>
</body>
Теперь все сохраним комбинацией CTRL+S и откроем страницу с вёрсткой, открыв файл index.html в папке LinuxUSER браузером:
Пока ещё не похоже на нормальный дизайн сайта так как пока ещё не написали стиля.
В следующей статье поговорим о CSS свойства: margin, padding, height, font-size: