Урок ПЕРВЫЙ "как сделать сайт" для домохозяек

Описание: Скрапбукинг, квиллинг, декупаж, бисероплетение, рисование и т.п.
Модераторы: Лисица, Птичка

Мышкевич F
Обживаюсь
Обживаюсь
Мышкевич F
Возраст: 43
Репутация: 192
Сообщения: 739
Награды: 3
Имя: Таня
Дети, дата рождения: Андрюша, 17.05.2013
Откуда: KZ-Київ-Warszawa

Генератор идей Мороженое Писака

Сообщение #1 Мышкевич » 01.11.2015, 10:32

Структура странички.

Спойлер
Страничка состоит из:
- головы (head)
- и тела (body).
Для того чтобы их обозначить используется вот так:

Код: Выделить всё

<head>
       Информация для страницы
</head>
<body>
         Сама страница
</body>

В голове пишутся всякие важные вещи, такие как ключевые слова для поисковика, тематика сайта, какие шрифты используются (автоматически браузер отобразит только латиницу, без шрифтов кирилица или иероглифы отобразятся кракозябрами), в каком файлике лежат стили для оформления и ссылки на скрипты, если они используются на страничке. Также тут прописывается название сайта и иконка - они покажутся в строчке с адресом.
В теле уже идет все, что хочется показать.
Все это еще поверх оборачивается в теги хтмл, то есть так:

Код: Выделить всё

<html>
<head>
       Информация для страницы
</head>
<body>
         Сама страница
</body>
</html>

И в самом верху пишется что-то типа такого:
<!DOCTYPE html> если интересно зачем, можно почитать тут http://htmlbook.ru/samhtml/struktura-html-koda

Теперь надо бы создать саму папку, где будет лежать все, что будет иметь отношение к странице, и назвать ее, например, «мой сайт».
В папке создать пустой текстовый документ, и прописать ему разрешение .html (открыть блокнот, создать документ index.html и сложить его в папку).
Потом в этой папке создать еще две папки: «images» под картинки и "css» под стили.
Теперь в папке css создать файл styles.css - точно так же через блокнот, переименовав пустой текстовый файл.
Итак, начнем заполнять html файл:
под спойлером код для копипаста
Спойлер

Код: Выделить всё

<!DOCTYPE html>
<html>

 <head>

        <meta name="description" content=«описание сайта" />
        <meta name="keywords" content=«ключевые слова для поисковика" />
        <meta name="robots" content="index, follow" />
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
        <title>Наименование</title>
        <link rel="icon" type="image/png" href="images/pic.png" /> 
        <link rel="stylesheet" type="text/css" href="css/styles.css"/>
 </head>

 <body>
             Теперь тут можно писать кирилицей, благодаря строчке со шрифтами в хедере
 </body>
</html>

<!DOCTYPE html>
<html>
<head>

<meta name="description" content=«описание сайта, его тематика, пишется все что угодно" />
<meta name="keywords" content=«ключевые слова для поисковика через запятую" />
<meta name="robots" content="index, follow" /> -
разрешение для поисковых роботов побегать по странице
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> - шрифты
<title>Наименование</title> - появится в браузере над адресом
<link rel="icon" type="image/png" href="images/pic.png" /> - ссылка (link это "ссылка" и описывает ссылку, внутри тега даем ей адрес (href), тип (type) и описание (rel)), в данном случае мы задали иконку,сама ссылка ведет на папку «images», лежащую рядом с хтмл файлом, если туда положить картинку с именем pic.png она появится в строке с адресом. Подробнее тут если интересно http://htmlbook.ru/faq/kak-dobavit-ikonku-sayta-v-adresnuyu-stroku-brauzera )
<link rel="stylesheet" type="text/css" href="css/styles.css"/> - стили (ссылка ведет на папку «css», лежащую рядом с хтмл файлом - пока файл со стилями не заполнен, строчку можно удалить, но когда стили понадобятся она должна быть)
</head>

<body>
Теперь тут можно писать кирилицей, благодаря строчке со шрифтами в хедере
</body>
</html>



Для удобства то, что внутри двигается пробелами - удобнее потом читать то, что понаписано.

То, что пишется в хедере, просто копипастится от странички к страничке, и вписываются нужные изменения, так что тут просто понять какая строчка к чему, запоминать нет необходимости.
Итак, теперь начинаем наполнять страничку.
Это все уже лучше набирать руками, во-первых, запоминается лучше, во вторых, если логика открывающих- закрывающих тегов не уловилась глазами, то обязательно уловятся руками при наборе.
Между <body> и </body> у нас стояла фраза "Теперь тут можно писать кирилицей, благодаря строчке со шрифтами в хедере».
Ее надо стереть.
Что обычно есть на страничке? Название сайта, телефон и меню.
Значит, между <body> и </body> пишем:
Мой сайт
телефон 555-55-55
Меню:
Главная
О нас
Контакты
История

Выглядеть должно так:

Код: Выделить всё

 
<body>
             Мой сайт
            телефон 555-55-55
            Меню:
            Главная
            О нас
            Контакты
            История
</body>


Теперь нажимаем ctrl+s (это команда «сохранить» без посещения в меню блокнота) и открываем страничку в браузере (ее в дальнейшем лучше не закрывать, а обновлять, чтобы видеть изменения).

Мы видим, что текст, расположенный столбиком, лег в одну линию. Дело в том, что браузер не видит все наши отступы и переносы на другие строчки, он видит это все одной строкой. Собственно как видит, так и показывает.
Нам надо рассказать браузеру, что это все - разные элементы. Для этого мы их разложим в контейнеры. Их есть несколько видов, сейчас мы воспользуемся контейнером div.
Перед фразой «Мой сайт» напишем div и чтобы браузер понял, что это обозначение, а не текст, заключим его в треугольные скобки <div>. Это мы обозначили начало контейнера. Если не указать, где контейнер заканчивается, браузер его просто проигнорирует. Так что в конце фразы «Мой сайт» тоже поставим <div> но добавим еще косую палочку - косая палочка означает конец этого контейнера - вот так </div>. Также запакуем в контейнер телефон, меню пока не тронем.

Код: Выделить всё

<body>
           <div>  Мой сайт </div>
            <div> телефон 555-55-55 </div>
            Меню:
            Главная
            О нас
            Контакты
            История
</body>

Сохраняем, смотрим что получилось.
Так как мы еще не задавали никаких стилей для оформления, то по умолчанию браузер наши контейнеры расположил один под другим.
Чтобы понять, как же браузер видит наши блоки, мы их разукрасим, то есть добавим стиль.
Стили будем добавлять прям в хтмл файл, потому что прежде чем воспользоваться дополнительным файлом под стили надо прочувствовать его необходимость.
Стили можно добавить внутрь скобок в теге, обозначающем начало контейнера, так и пишем там style=" ", и вот внутри кавычек через точку с запятой и пробел перечисляем
Итак, хотим шрифт побольше, желтые буквы и синий фон.
font-size:20px - это мы заказываем шрифт в 20 пикселей.
background:blue - цвет фона, или бекграунда
color:yellow - цвет текста

Выглядеть должно так:

Код: Выделить всё

<body>
           <div style="font-size:20px; background:blue; color:yellow">  Мой сайт </div>
            <div> телефон 555-55-55 </div>
            Меню:
            Главная
            О нас
            Контакты
            История
</body>


Мы теперь видим, что блок для браузера занял высоту по высоте шрифта (то есть элемента) а в длину расположился насколько это возможно.
К телефону добавим те же стили, только цвета наоборот. Теперь поставим телефон справа и допишем в стиле такое:
text-align:right в переводе - выравнивание текста:право

Код: Выделить всё

<body>
           <div style="font-size:20px; background:blue; color:yellow">  Мой сайт </div>
            <div style="font-size:20px; background:yellow; color:blue; text-align:right"> телефон 555-55-55 </div>
            Меню:
            Главная
            О нас
            Контакты
            История
</body>


Теперь мы хотим чтобы блоки шли друг за другом в одну линию и добавим к первому блоку стиль float или в переводе «обтекание»
float:left

Код: Выделить всё

<body>
           <div style="font-size:20px; background:blue; color:yellow; float:left">  Мой сайт </div>
            <div style="font-size:20px; background:yellow; color:blue; text-align:right"> телефон 555-55-55 </div>
            Меню:
            Главная
            О нас
            Контакты
            История
</body>


И тут у нас сюрприз - да, блоки встали друг за дружкой, но 2й начинается сразу после окончания текста (то есть содержимого) в первом. Хотим, чтобы было 50% на 50%
Задаем в стиле к первому блоку ширину в 50 процентов, и он будет занимать аккурат полэкрана. Второй займет оставшееся пространство, тоже 50.
width:50%

Код: Выделить всё

<body>
           <div style="font-size:20px; background:blue; color:yellow; float:left; width:50%">  Мой сайт </div>
            <div style="font-size:20px; background:yellow; color:blue; text-align:right"> телефон 555-55-55 </div>
            Меню:
            Главная
            О нас
            Контакты
            История
</body>


В принципе тут для команд используются слова, несущие в себе смысловую нагрузку, то есть со знанием английского попроще, без - ну чтож, их не так много, рука набивается быстро.
Последний раз редактировалось Мышкевич 12.11.2015, 12:54, всего редактировалось 8 раз.
Изображение


olimpiya F
Живу здесь
Живу здесь
Аватара
olimpiya F
Возраст: 43
Репутация: 3295
Сообщения: 15107
Награды: 22
Имя: Светлана

Участник ФМ Добрая фея Проверено реалом
Мороженое Меценат форума

Сообщение #41 olimpiya » 11.11.2015, 13:51

Птичка, начнешь делать, станет понятнее.
У меня другая проблема. Сначала я упорно хочу разобраться, потом, когда немного понимаю что к чему, азарт заканчивается. Вот к третьему уроку не могу приступить и не хочу. :-(
Sveta

Птичка F
Живу здесь
Живу здесь
Аватара
Птичка F
Возраст: 42
Репутация: 3693
Сообщения: 16881
Награды: 42
Имя: Юлька
Дети, дата рождения: Ваня 21/10/08 Маруся 17/07/16
Откуда: Херсон-Харків-Львів

Рукодельница Участник ФМ Победитель конкурса
Добрая фея Забеременела с нами Мама девочки

Сообщение #42 Птичка » 11.11.2015, 13:53

cybd, конкретно мне сначала надо теорию почитать, и может само все встанет

например
<link type="image/png" href="images/pic.png" rel="icon">
<link rel="stylesheet" type="text/css" href="css/styles.css"/>

и то и то вроде ссылка (на картинку и на стили), но type href и rel пишутся в разной последовательности
и в первом случае в конце не /> а просто >

Мышкевич F
Обживаюсь
Обживаюсь
Мышкевич F
Возраст: 43
Репутация: 192
Сообщения: 739
Награды: 3
Имя: Таня
Дети, дата рождения: Андрюша, 17.05.2013
Откуда: KZ-Київ-Warszawa

Генератор идей Мороженое Писака

Сообщение #43 Мышкевич » 11.11.2015, 14:00

Птичка, последовательность роли не играет, для удобства конечно лучше писать в одной и той же (читать удобнее).

Конкретно в данном случае они у меня вышли в разнобой - я когда запустила у себя тестовую страничку, у меня иконка не отображалась (кажется сначала не то разрешение для картинки поставила, потом не тот тип) - вот и перетасовались пока ковырялась.
Насчет синтаксиса
http://htmlbook.ru/html/link

Впрочем, пойду наведу порядок :)
Изображение


Вернуться в «Очумелые ручки»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 2 гостя