В этом уроке мы Создадим наш первый Сайт за 8 простых шагов.
Давайте сразу и приступим.
Мы не будем сначала долго изучать теорию, а сразу начнем практиковаться. С необходимыми для сайтостроения инструментами будем знакомиться по мере того, как будет возникать в них надобность.
Наверняка, вы много раз встречали сайты, продающие различные инфо-товары. Это такие длинные одностраничные сайты, на которых размещается фотография автора, текст, разные картинки. Такой вариант сайта можно использовать как простой вариант сайта-визитки.
Создать такой сайт можно очень быстро, буквально за несколько минут, а выглядит он вполне симпатично.
Мы будем сейчас Создавать Самостоятельно Сайт именно такого вида.
Причем вариантов оформление такого сайта бесконечно много. Далее я покажу, что и как можно менять, чтобы настроить дизайн под себя.
Итак, прежде всего, нам нужно создать 2 документа:
1.
Html – файл – это и есть страница нашего сайта.
Заведите себе отдельную папку для сайта. Затем создайте простой текстовый файл. Откройте его двумя нажатиями на левую кнопку мыши. И после этого сразу сохраните следующим образом: нажмите на кнопку «Файл», затем «Сохранить как» и в строке «имя файла» пишите index.html , а в «Тип файла» выбирайте «все файлы» и нажимайте кнопку «сохранить».
Поздравляю! Вы только что создали Html-файл нашей странички!
Видите, теперь значок файла сменился с блокнота на значок браузера?
Теперь, если вы попытаетесь его открыть двойным нажатием левой кнопки мыши, то откроется окно браузера с пустой страницей сайта. Попробуйте.
Поэтому, дальше, чтобы его открыть для редактирования, придется при наведении на него курсора мышки, нажимать правую кнопку мыши и выбирать в раскрывшемся списке «Открыть с помощью» - «Блокнот». Пока оставьте этот файл в покое.
2.
Создаем файл CSS.
Создайте еще один текстовый файл. Откройте его и сохраните также через «Сохранить как..». В строке «имя файла» пишите style.css , а в «Тип файла» снова выбирайте «все файлы» и нажимайте «сохранить».
Отлично! Вы создали файл каскадной таблицы стилей!
Для чего нам нужен этот файл? Обычно таблицы стилей CSS используются для управления стилем на многостраничных сайтах. Хотя при создании нашего одностраничного сайта можно было бы обойтись без создания файла CSS, но мне хочется, чтобы вы сразу приучались все делать более профессионально.
Итак, если наш первый файл – это страничка самого сайта со структурой и контентом(содержанием) сайта, то файл CSS отвечает за стиль этого самого контента.
Пока не понятно, но постепенно разберемся.
Сразу вставьте в этот документ следующий код:
body {
background-color:#999999;
margin-top:10px;
}
p {
font-family:Verdana;
color:#000000;
text-align:left;
}
h1 {
color:#000000;
font-family:Verdana;
font-size:19px;
text-align:left;
}
Сохраните и закройте этот файл.
В конце урока мы вернемся к файлу style.css и разберем, что всё это значит, а пока переходим к следующему шагу.
3.
Возвращаемся к файлу index.html . Открываем его для редактирования, как указано выше.
Копируем отсюда и вставляем в файл следующий код:
<! DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Первый сайт - заголовок сайта</title>
<meta http-equiv="Content-Type" content="test/html; charset=windows-1251">
<meta name="Keywords" content="ключевые слова, через запятую">
<meta name="Description" content="Описание нашего сайта">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
</body>
</html>
Нажимаем сохранить.
Что же мы такое сделали?
Мы создали как бы «почву» для нашего сайта. Этот шаг является типовым, его нужно делать каждый раз при создании новой странички сайта.
Капельку теории сайтостроения в двух словах:
При создании сайтов в html мы имеем дело с различными элементами, с помощью которых и создается внешний вид страницы. Эти элементы называются тегами. Например, есть свои теги для создания абзаца, таблицы и т.д.
Пишутся теги, как вы успели заметить, внутри треугольных скобочек: < > Например, <body>.
Тэги бывают парные, требующие закрытия, и, одинарные, закрытия не требующие.
Например, тег <body>, внутри которого находится содержание странички сайта, закрывается </body>.
Запомните, что все содержимое (контент) сайта у нас будет располагаться внутри тегов <body> </body> !
4.
Мы будем создавать наш сайт на основе таблицы.
Давайте решим, какой ширины будем создавать сайт.
Исходя из того, что самое распространенное разрешение мониторов 1024х768, не рекомендуется делать ширину сайта более 1000 рх.
В нашем примере мы сделаем ширину 700 рх, а вы, если хотите, можете поставить любую другую.
Прямо сейчас нам понадобится тег таблицы – он парный:
<table> </table>
Итак, создаем таблицу, состоящую из одной строчки и одного столбца.
(копируем и вставляем нижележащий код между тегами <body> </body>)
<table border="2" bordercolor="#993333" cellspacing="0" cellpadding="10" width="700" bgcolor="#ffffff" align="center">
<tr>
<td>
</td>
</tr>
</table>
Сохраните результат.
Для образования строки в таблице используется парный тег <tr> </tr>
Для образования столбца – парный тег <td> </td>
Столбцы создаются внутри строк.
Сейчас следует сказать, что для расширения возможностей тегов используются, так называемые, атрибуты.
В нашей таблице мы использовали следующие атрибуты:
border="2" – толщина рамки таблицы. Если поставить "0", то рамка видна не будет.
bordercolor="#993333" – цвет рамки ячеек таблицы. У нас указан коричневый цвет. Другие цвета, используемые в сайтостроении, можно посмотреть тут >>
cellspacing="0" - расстояние между ячейками таблицы, здесь оставляем 0.
cellpadding="10" – внутренний отступ в ячейке таблицы для содержимого таблицы.Используется, чтобы текст не прилипал к краю таблице. Можете поставить на свой вкус, не обязательно "10".
width="700" – это ширина таблицы, как мы и договаривались. Можете поставить свой вариант.
bgcolor="#ffffff" – цвет фона таблицы. Сейчас стоит белый. Можно установить любой по своему вкусу.
align="center" – это атрибут выравнивания по горизонтали. Значение "center" означает, что таблица будет выровнена по центру страницы. Другие варианты выравнивания: "left" – слева и "right" - справа
5.
Как вы поняли, контент нашего сайта будет располагаться внутри нашего единственного столбца, т.е. тега <td> </td>.
Давайте добавим Заголовок нашей странички, который поместим внутри тега заголовка
<h1> </h1>.
Например, такой:
<h1>Сайт-визитка начинающего веб-дизайнера</h1>
Снова сохраните результат.
Посмотрите на результат своей работы. У вас должно получиться так:
Если у вас получилось что-то не так, проверьте, правильно ли вы все сделали.
У вас сейчас весь html-код должен выглядеть следующим образом:
<! DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Первый сайт - заголовок сайта</title>
<meta http-equiv="Content-Type" content="test/html; charset=windows-1251">
<meta name="Keywords" content="ключевые слова, через запятую">
<meta name="Description" content="Описание нашего сайта">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<table border="2" bordercolor="#993333" cellspacing="0" cellpadding="10" width="700" bgcolor="#ffffff" align="center">
<tr>
<td>
<h1>Сайт-визитка начинающего веб-дизайнера</h1>
</td>
</tr>
</table>
</body>
</html>
Вы, наверное, поняли, что если ширину таблицы мы задали равной 700 px, то высота таблицы будет меняться автоматически по мере заполнения странички.
6.
Теперь давайте добавим на сайт изображение, или фотографию.
Для добавления изображения используется одинарный тег <img>
Если на сайте используется немного изображений, то сами файлы изображений можно держать в корневой папке сайта (той, где находится index.html и другие странички сайта), но лучше сразу приучаться все упорядочивать и создавать для фото и изображений отдельную папку.
Давайте создадим в нашей корневой папке папку с именем img . Поместим в нее какое-нибудь фото небольшого размера. Я взял фото шириной 300px и высотой 381px. (Узнать размер изображения можно, наведя на него мышкой, во всплывающем окошке появится размер: первая цифра – это ширина изображения, вторая – его высота.)
Итак, после того, как мы помести ли наше фото в папку img и узнали его размер, вставляем сразу за нашим заголовков следующий код:
<img src="img/foto1.jpg" width="300" height="381" align="left" hspace="10">
Сохраните результат
Атрибуты изображения <img>:
src="img/foto1.jpg" - указывает место расположения изображения. В данном случае, мое изображение носит название foto1.jpg (в названии нужно также указывать расширение файла изображения) и находится в папке img .
width="300" – это ширина изображения. У меня это 300px.
height="381" – это высота изображения. У меня это 381px
align="left" . Помните, в теге таблице данный атрибут выполнял функцию выравнивания? Так вот, помещенный внутри тега изображения он выполняет другую роль – он позволяет нижеследующему тексту «обтекать» изображение.
В данном случае у этого атрибута стоит значение "left" – это означает, что изображение «прилипнет» к левому краю, а текст будет обтекать его справа. Вы можете, если хотите, поставить значение "right" – тогда ваше фото прилипнет к правому краю, а текст будет обтекать его слева.
hspace="10" – этот атрибут создает отступ справа и слева от изображения. Я его применил здесь для того, чтобы текст, которым мы дальше напишем, не прилегал вплотную к нашему фото.
7.
Теперь давайте добавим на нашу страничку текст. Для этого мы воспользуемся парным тегом<p> </p> - это тег абзаца. Каждый раз, когда начинаете новую мысль, заключайте текст в этот тег – у вас создастся отступ между строчками.
Если же вы хотите сделать принудительный перенос текста на следующую строчку без создания отступа, воспользуйтесь одинарным тегом <br> .
Для создания Красной строки самым простым способом будет использование символа неразрывного пробела - . Вставьте его сколько требуется раз.
Итак, напишите любой текст и вставьте его после изображения. Или вставьте, как пример, этот код:
<p>Ваш текст, заключенный в тег абзаца, появится справа от изображения, «обтекая» его. Если же вы не хотите, чтобы текст обтекал изображение, а начинался снизу изображения, сотрите атрибут align="left" в теге <img>. </p>
<p>Это второй абзац. Вы видите, какой получился отступ при использовании тега <p> </p>. А если Вам не нужен такой отступ, то используйте тег <br>.
<br>Это предложение было принудительно переведено с использованием тега <br>. </p>
<p> Для самого простого создания красной строки можно использовать символ неразрывного пробела. В начале этого абзаца он был применен четыре раза. </p>
<p>Этот абзац уже пойдет внизу нашей картинки и будет располагаться на всю ширину области нашего сайта. </p>
Сохраните результат и посмотрите его в браузере.
Итак, Вы уже научились добавлять картинки и текст на страничку сайта. Таким образом можно добавить сколько угодно текста и фото. Вы можете бесплатно создать такой сайт-визитку самостоятельно и, как Вы убедились, довольно быстро.
8.
Последним шагом давайте создадим вторую рамочку для границ нашего сайта, как на примере.
Для этого поместим таблицу, содержащую контент нашего сайта внутрь еще одной таблицы. Другими словами, наша таблица, состоящая из одной строки и одного столбца, должна оказаться внутри другой таблицы, также состоящей из одной стоки и одного столбца. Вы, наверняка, и сами поняли, как это сделать. Это совсем не сложно:
Помещаем этот код перед началом нашей таблицы, т.е. после тега <body> и перед тегом <table>
<table border="2" bordercolor="#993333" cellspacing="0" cellpadding="2" bgcolor="#ffffff" align="center">
<tr>
<td>
А этот код после тега </table> и перед тегом </body>
</td> </tr>
</table>
Сохраните результат.
Мы поместили нашу таблицу внутрь еще одной. Вы видите, что атрибуты этой таблицы мало отличаются от первой, за исключением атрибута внутреннего отступа cellpadding="2" – здесь мы поставили значение 2, а не 10, хотя можете поэкспериментировать с этим отступом между рамками, и поставить то расстояние, какое вам больше нравится. Еще мы здесь не указали атрибут ширины – она определится автоматически.
Ну вот, Вы смогли Создать сайт – визитку самостоятельно бесплатно. Конечно, это совсем простой сайт, но, ведь, все начинается с простого.
В следующем уроке мы немного доработаем наш сайт, усложним его.
Осталось только обобщить и еще раз уточнить, как и что Вы можете в этом сайте изменить под свой вкус:
В файле style.css мы можем менять:
Свойства body
Цвет фона сайта – свойство background-color:#999999; Высота верхнего отступа – свойство margin-top:10px;
Свойства текста абзаца p
Название шрифта – свойство font-family:Verdana; Можете, например, поставить Arial или Times New Roman
Цвет текста абзаца – свойство color:#000000;
Размер шрифта – свойство font-size:16px; Подбирайте, какой Вам больше нравится. Выравнивание текста – свойство text-align:left; Сейчас стоит выравнивание по левому краю - left. Можете поставить выравнивание по центру – center или по правому краю – right Свойства заголовка h1 Аналогично рассмотренным выше свойствам текста абзаца p Если Вам понадобится сделать дополнительные заголовки на сайте, используйте для них теги h2, h3, h4, h5 и h6. Настроить свойства этих заголовков можно также, как и заголовка h1 в файле style.css В файле index.html мы можем менять: Вы можете изменять значения атрибутов тега таблицы <table>, чтобы настроить область сайта по своему вкусу: border="2" – толщина рамки таблицы. Если поставить "0", то рамка видна не будет. bordercolor="#993333" – цвет рамки ячеек таблицы. У нас указан коричневый цвет. cellpadding="10" – внутренний отступ в ячейке таблицы для содержимого таблицы. Используется, чтобы текст не прилипал к краю таблице. Можете поставить на свой вкус, не обязательно "10". width="700" – это ширина таблицы, как мы и договаривались. Можете поставить свой вариант. bgcolor="#ffffff" – цвет фона таблицы. Сейчас стоит белый. Можно установить любой по своему вкусу. align="center" – это атрибут выравнивания по горизонтали. Значение "center" означает, что таблица будет выровнена по центру страницы. Другие варианты выравнивания: "left" – слева и "right" - справа После того, как вы смогли создать свой сайт-визитку самостоятельно, его нужно установить, или, как говорят, залить на хостинг, т.е. чтобы ваш сайт стал доступен в сети Интернет |
