Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Создание html сайта: Создание сайта html в блокноте с нуля – Блог opengs.ru

Содержание

Создание сайта html в блокноте с нуля – Блог opengs.ru

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

  1. Для этого понадобится готовый дизайн сайта собственного производства или скачанный из сети psd исходник. Его нужно раскроить для верстки html.
  2. Блокнот, а именно NotePad++. Его можно скачать с официально сайта.
  3. Файл index.html. Его можно создать в любой удобной папке на компьютере. Но лучше выдели отдельную папку для своего сайта и размести его там. У меня это папка c:\site\index.html
  4. Файл c:\site\style.css. Это файл стилей, зачем он нужен станет понятно позже.
  5. Папка c:\site\images. В эту папку нужно поместить все изображения нужные для будущего сайта.
  6. Купить хостинг и домен если нужно сайт выложить в интернете

Для удобства я сделал архив с изображениями и уже готовыми пустыми файлами index.html и style.css. Скачай и распакуй архив в нужную тебе папку.

Для работы сайта в сети необходим веб-сервер. Сервер при обращении к домену или папке сайта без указания конкретного файла будет искать в ней index.html или index.php если не найдет отобразит список файлов папки.

Так как у нас простая html страничка нам не потребуется установка сервера на нашем компьютере, так как язык разметки понимает любой браузер. Однако если потребуется использование php, то просто браузером уже не обойтись.

Теперь нужно открыть файл index и style в NotePad++

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

Скопируй код в файл index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Заголовок страницы для браузера</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
 </head>
 <body>
  <h2>Заголовок страницы</h2>
  <!-- Комментарий -->
  <p>Абзац.</p>
   
 </body>
</html>

Теперь открой его в браузере, должно получится так:

В кратце опишу что значат эти теги. Если хочешь подробнее разобраться то по googl-и как говорится информации на эту тему море.

Указываем браузеру по какому стандарту нужно отображать страницу:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Тег html говорит о том где начинается и заканчивается html документ

<html>...</html>

Тег head необходим для размещения служебной информации, тут подключаются стили, скрипты и размещена meta информация страницы. Посетители сайта не видят содержимого этого тега.

<head>...</head>

Тег body содержит разметку страницы, содержимое этого тега видят посетители сайта.

<body>...</body>

Верстка или создание сайта на html

В процессе верстки сайта будут встречаться теги и атрибуты описать которые в данной статье невозможно. Поэтому рекомендую пользоваться сайтом htmlbook.ru. Кроме того советую внимательно изучать каждый тег и стиль css, который тебе встречается.

{module 110}

Итак что будем верстать:

Фон и основной каркас сайта

Замени содержимое своего файла index.html на следующее:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Мой первый сайт на html</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
    <!-- Основной блок сайта -->
    <div>
     
    </div>
</body>
</html>

И добавь в style.css такой код:

/*Каркас сайта*/
body {padding:0px; margin:0; background:#4c281e; font-size:14px; font-family:Arial, Sans-serif;}
#basic {width:960px; min-height:950px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;}
img {border:0;}
a {color:#ff9c00;}
a:hover {text-decoration:none;}

Обнови страницу с сайтом в браузере (F5), должно получится так:

Шапка сайта

Добавьте в тег div с идентификатором basic следующий код:

<!-- Шапка сайта -->
    <div>
    <a href="/"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
    <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" />
</div>

Что бы получилось следующее:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Мой первый сайт на html</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
    <!-- Основной блок сайта -->
    <div>
     
        <!-- Шапка сайта -->
        <div>
            <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
            <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" />
        </div>
         
    </div>
</body>
</html>

И добавляем в файл css строки:

/*Шапка сайта*/
li.none-bg {background:none!important;}
.telefon {float:right;}

Верхнее меню сайта

Что бы на нашем html сайте появилось навигационное меню, которое изображено в макете добавить в index.html после:

<!-- Шапка сайта -->
            <div>
            <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
            <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" />
        </div>

Этот код:

<!-- Верхнее меню сайта -->
    <div>
        <div>
            <ul>
            <li><a href="#">О нас</a></li>
            <li><a href="#">Ассортимент</a></li>
            <li><a href="#">Отзывы</a></li>
            <li><a href="#">Забронировать столик</a></li>
            <li><a href="#">Наши клиенты</a></li>
            <li><a href="#">Контакты</a></li>
            </ul>
        </div>
        <div></div>
    </div>

Что бы получилось так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Мой первый сайт на html</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
    <!-- Основной блок сайта -->
    <div>
     
        <!-- Шапка сайта -->
        <div>
            <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
            <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" />
        </div>
         
        <!-- Верхнее меню сайта -->
        <div>
        <div>
            <ul>
            <li><a href="#">О нас</a></li>
            <li><a href="#">Ассортимент</a></li>
            <li><a href="#">Отзывы</a></li>
            <li><a href="#">Забронировать столик</a></li>
            <li><a href="#">Наши клиенты</a></li>
            <li><a href="#">Контакты</a></li>
            </ul>
        </div>
        <div></div>
        </div>
         
    </div>
</body>
</html>

А в файл style.css:

/*Верхнее меню сайта*/
#top-menu {width:960px; height:74px; }
.bg-1 {width:950px; height:64px; background:#4c281e url(images/m1.png) repeat-x; padding:0 0 0 10px;}
.bg-2 {width:940px; height:8px; background:#ff9c00; margin:0 auto;}
.bg-1 ul {margin:0; padding:0; list-style:none;}
.bg-1 ul li {float:left; background:url(images/m2.png) no-repeat right center; padding:0 2px 0 0;}
.bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:#ff9c00; text-decoration:none; text-transform:uppercase;}
.bg-1 ul li a:hover {color:#fff; background:#ff9c00;}

Теперь сайт имеет логотип телефон и меню при наведении на которое меняется фон:

Левое меню и контент

Пришло время сделать левое меню и блок с контентом. Для этого копируем код и тщательно изучаем, что к чему. После блока:

<!-- Верхнее меню сайта -->
<div>
......
</div>

Добавляем следующее:

<!-- Левое меню и Контент -->
            <div>
             
            <!-- Контент - правый блок -->
            <div>
                <h2>Кофе Американо</h2>
                <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>
 
                <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>
                 
                <img src="/images/img1.png" alt="" title="" />
                <img src="/images/img2.png" alt="" title="" />
                <img src="/images/img3.png" alt="" title="" />
 
                <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
 
                <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>
 
                <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>
 
                <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
            </div>
             
            <!-- Левое меню - левый блок блок -->
            <div>
                <div>
                    <div></div>
                    <div>
                    <ul>
                    <li><a href="#">Кофе Айриш</a></li>
                    <li><a href="#">Кофе Американо</a></li>
                    <li><a href="#">Кофе Глясе</a></li>
                    <li><a href="#">Кофе Диппио</a></li>
                    <li><a href="#">Кофе Капучино</a></li>
                    <li><a href="#">Кофе Кон Панна</a></li>
                    <li><a href="#">Кофе Коретто</a></li>
                    <li><a href="#">Кофе Латте</a></li>
                    <li><a href="#">Кофе Лунго</a></li>
                    </ul>
                    </div>
                    <div></div>
                </div>
             
            </div>
         
        </div>

Файл index.html будет выглядеть вот так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Мой первый сайт на html</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
    <!-- Основной блок сайта -->
    <div>
     
        <!-- Шапка сайта -->
        <div>
            <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
            <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" />
        </div>
         
        <!-- Верхнее меню сайта -->
        <div>
        <div>
            <ul>
            <li><a href="#">О нас</a></li>
            <li><a href="#">Ассортимент</a></li>
            <li><a href="#">Отзывы</a></li>
            <li><a href="#">Забронировать столик</a></li>
            <li><a href="#">Наши клиенты</a></li>
            <li><a href="#">Контакты</a></li>
            </ul>
        </div>
        <div></div>
        </div>
         
        <!-- Левое меню и Контент -->
        <div>
         
            <!-- Контент - правый блок -->
        <div>
                <h2>Кофе Американо</h2>
                <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>
  
                <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>
                  
                <img src="/images/img1.png" alt="" title="" />
                <img src="/images/img2.png" alt="" title="" />
                <img src="/images/img3.png" alt="" title="" />
  
                <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
  
                <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>
  
                <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>
  
                <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
           
        </div>
             
        <!-- Левое меню - левый блок блок -->
        <div>
            <div>
                <div></div>
                <div>
                <ul>
                <li><a href="#">Кофе Айриш</a></li>
                <li><a href="#">Кофе Американо</a></li>
                <li><a href="#">Кофе Глясе</a></li>
                <li><a href="#">Кофе Диппио</a></li>
                <li><a href="#">Кофе Капучино</a></li>
                <li><a href="#">Кофе Кон Панна</a></li>
                <li><a href="#">Кофе Коретто</a></li>
                <li><a href="#">Кофе Латте</a></li>
                <li><a href="#">Кофе Лунго</a></li>
                </ul>
                </div>
            <div></div>
            </div>
              
        </div>
          
        </div>
          
    </div>
</body>
</html>

И в конец файла css копируем:

/*Левое меню и Контент*/
#content {width:960px; padding:20px 0 0 0; }
.right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;}
.right h2 {text-transform:uppercase; color:#4c281e; font-weight:normal; margin-top:0;}
.left {width:250px; float:left;}
.block-nad-menu {width:240px; height:10px; background:#ff9c00;}
.block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#4c281e;}
.block-menu {width:240px; border-left:10px solid #ff9c00; background:#4c281e;}
.left ul {margin:0; padding:10px 0 0 0; list-style:none;}
.left ul li {background:url(images/m3.png) no-repeat bottom left;}
.left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px; background: url(images/marker.png) no-repeat 10px 8px;}
.left ul li a:hover {background:#ff9c00 url(images/marker.png) no-repeat 10px 8px;}
li.none-bg {background:none!important;}

Если все сделано правильно получится сайт как на картинке ниже:

Подвал сайта

После блока:

<!-- Левое меню - левый блок блок -->
<div>
...
</div>

Вставляем:

<div></div>
         
        <!-- Подвал -->
        <div>
            <div></div>
            <div>ООО “Кофейня” 2015г.<br/>
            г. Москва, ул Революционная 1а</div>
            <div><img src="/images/stat.png" alt="" title="" /></div>
            <div>Создание сайтов веб-студия <a href="#">«Парампампам»</a></div>
             
        </div>
        <div></div>

Теперь весь файл index.html выглядит вот так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Мой первый сайт на html</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
    <!-- Основной блок сайта -->
    <div>
     
        <!-- Шапка сайта -->
        <div>
            <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
            <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" />
        </div>
         
        <!-- Верхнее меню сайта -->
        <div>
        <div>
            <ul>
            <li><a href="#">О нас</a></li>
            <li><a href="#">Ассортимент</a></li>
            <li><a href="#">Отзывы</a></li>
            <li><a href="#">Забронировать столик</a></li>
            <li><a href="#">Наши клиенты</a></li>
            <li><a href="#">Контакты</a></li>
            </ul>
        </div>
        <div></div>
        </div>
         
        <!-- Левое меню и Контент -->
        <div>
         
            <!-- Контент - правый блок -->
            <div>
                <h2>Кофе Американо</h2>
                <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>
 
                <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>
                 
                <img src="/images/img1.png" alt="" title="" />
                <img src="/images/img2.png" alt="" title="" />
                <img src="/images/img3.png" alt="" title="" />
 
                <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
 
                <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>
 
                <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>
 
                <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
             
            </div>
             
            <!-- Левое меню - левый блок блок -->
            <div>
                <div>
                    <div></div>
                    <div>
                    <ul>
                    <li><a href="#">Кофе Айриш</a></li>
                    <li><a href="#">Кофе Американо</a></li>
                    <li><a href="#">Кофе Глясе</a></li>
                    <li><a href="#">Кофе Диппио</a></li>
                    <li><a href="#">Кофе Капучино</a></li>
                    <li><a href="#">Кофе Кон Панна</a></li>
                    <li><a href="#">Кофе Коретто</a></li>
                    <li><a href="#">Кофе Латте</a></li>
                    <li><a href="#">Кофе Лунго</a></li>
                    </ul>
                    </div>
                    <div></div>
                </div>
             
            </div>
         
        </div>
         
        <div></div>
         
        <!-- Подвал -->
        <div>
            <div></div>
            <div>ООО “Кофейня” 2015г.<br/>
            г. Москва, ул Революционная 1а</div>
            <div><img src="/images/stat.png" alt="" title="" /></div>
            <div>Создание сайтов веб-студия <a href="#">«Парампампам»</a></div>
        </div>
        <div></div>
         
    </div>
</body>
</html>

В файл css добавляем код в самый низ:

/*Подвал*/
.myclr {clear:both; float:none; width:100%; height:1px;}
#podval {border-top:10px solid #4c281e; margin-top:20px;}
.yellow {width:940px; height:5px; margin:0 auto; background:#ff9c00;}
.p1 {float:left; width:300px; padding:15px 0 0 0;}
.p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;}
.p3 {float:right; width:30px; padding:15px 0 0 0;}

Теперь весь файл style.css выглядит следующим образом:

/*Каркас сайта*/
body {padding:0px; margin:0; background:#4c281e; font-size:14px; font-family:Arial, Sans-serif;}
#basic {width:960px; min-height:500px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;}
img {border:0;}
a {color:#ff9c00;}
a:hover {text-decoration:none;}
 
/*Шапка сайта*/
#head-site {height:70px;}
li.none-bg {background:none!important;}
.telefon {float:right;}
 
/*Верхнее меню сайта*/
#top-menu {width:960px; height:74px; }
.bg-1 {width:950px; height:64px; background:#4c281e url(images/m1.png) repeat-x; padding:0 0 0 10px;}
.bg-2 {width:940px; height:8px; background:#ff9c00; margin:0 auto;}
.bg-1 ul {margin:0; padding:0; list-style:none;}
.bg-1 ul li {float:left; background:url(images/m2.png) no-repeat right center; padding:0 2px 0 0;}
.bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:#ff9c00; text-decoration:none; text-transform:uppercase;}
.bg-1 ul li a:hover {color:#fff; background:#ff9c00;}
 
/*Левое меню и Контент*/
#content {width:960px; padding:20px 0 0 0; }
 
/*Контент - правый блок*/
.right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;}
.right h2 {text-transform:uppercase; color:#4c281e; font-weight:normal; margin-top:0;}
 
/*Левое меню - левый блок*/
.left {width:250px; float:left;}
.block-nad-menu {width:240px; height:10px; background:#ff9c00;}
.block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#4c281e;}
.block-menu {width:240px; border-left:10px solid #ff9c00; background:#4c281e;}
.left ul {margin:0; padding:10px 0 0 0; list-style:none;}
.left ul li {background:url(images/m3.png) no-repeat bottom left;}
.left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px; background: url(images/marker.png) no-repeat 10px 8px;}
.left ul li a:hover {background:#ff9c00 url(images/marker.png) no-repeat 10px 8px;}
 
 
/*Подвал*/
.myclr {clear:both; float:none; width:100%; height:1px;}
#podval {border-top:10px solid #4c281e; margin-top:20px;}
.yellow {width:940px; height:5px; margin:0 auto; background:#ff9c00;}
.p1 {float:left; width:300px; padding:15px 0 0 0;}
.p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;}
.p3 {float:right; width:30px; padding:15px 0 0 0;}

А сам сайт вот так:

 

Другие страницы сайта и ссылки меню

Получился сайт, но при клике на ссылки меню ничего не происходит. Поэтому нам нужно придумать название страниц, прописать их в URL меню и создать страницы с этими названиями.

Названия страниц должны быть уникальными и состоять из латинских символв. Я просто перевел названия пунктов меню на транслит.

  • o-nas.html – О нас
  • assortiment.html – Ассортимент
  • otzivi.html – Отзывы
  • zabronirovat-stolik.html – Забронировать столик
  • nashi-klienty.html – Наши клиенты
  • kontakty.html – Контакты

То же самое нужно сделать и с левым меню.

  • kofe-ayrish.html – Кофе Айриш
  • kofe-amerikano.html – Кофе Американо
  • kofe-glyase.html – Кофе Глясе
  • kofe-dippio.html – Кофе Диппио
  • kofe-kapuchino.html – Кофе Капучино
  • kofe-kon-panna.html – Кофе Кон Панна
  • kofe-koretto.html – Кофе Коретто
  • kofe-latte.html – Кофе Латте
  • kofe-lungo.html – Кофе Лунго

Теперь открываем index.html в NotePad++ и добавляем нужные ссылки соответствующему меню, что бы получилось так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Мой первый сайт на html</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
    <!-- Основной блок сайта -->
    <div>
     
        <!-- Шапка сайта -->
        <div>
            <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
            <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" />
        </div>
         
        <!-- Верхнее меню сайта -->
        <div>
        <div>
            <ul>
            <li><a href="/o-nas.html">О нас</a></li>
            <li><a href="/assortiment.html">Ассортимент</a></li>
            <li><a href="/otzivi.html">otzivi.html</a></li>
            <li><a href="/zabronirovat-stolik.html">Забронировать столик</a></li>
            <li><a href="/nashi-klienty.html">Наши клиенты</a></li>
            <li><a href="/kontakty.html">Контакты</a></li>
            </ul>
        </div>
        <div></div>
        </div>
         
        <!-- Левое меню и Контент -->
        <div>
         
            <!-- Контент - правый блок -->
            <div>
                <h2>Кофе Американо</h2>
                <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>
 
                <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>
                 
                <img src="/images/img1.png" alt="" title="" />
                <img src="/images/img2.png" alt="" title="" />
                <img src="/images/img3.png" alt="" title="" />
 
                <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
 
                <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>
 
                <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>
 
                <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
             
            </div>
             
            <!-- Левое меню - левый блок блок -->
            <div>
                <div>
                    <div></div>
                    <div>
                    <ul>
                    <li><a href="/kofe-ayrish.html">Кофе Айриш</a></li>
                    <li><a href="/kofe-amerikano.html">Кофе Американо</a></li>
                    <li><a href="/kofe-glyase.html">Кофе Глясе</a></li>
                    <li><a href="/kofe-dippio.html">Кофе Диппио</a></li>
                    <li><a href="/kofe-kapuchino.html">Кофе Капучино</a></li>
                    <li><a href="/kofe-kon-panna.html">Кофе Кон Панна</a></li>
                    <li><a href="/kofe-koretto.html">Кофе Коретто</a></li>
                    <li><a href="/kofe-latte.html">Кофе Латте</a></li>
                    <li><a href="/kofe-lungo.html">Кофе Лунго</a></li>
                    </ul>
                    </div>
                    <div></div>
                </div>
             
            </div>
         
        </div>
        <div></div>
         
        <!-- Подвал -->
        <div>
            <div></div>
            <div>ООО “Кофейня” 2015г.<br/>
            г. Москва, ул Революционная 1а</div>
            <div><img src="/images/stat.png" alt="" title="" /></div>
            <div>Создание сайтов веб-студия <a href="#">«Парампампам»</a></div>
             
        </div>
        <div></div>
         
    </div>
</body>
</html>

Теперь жми “Сохранить” потом “Файл > Сохранить как” и сохраняй для каждой ссылки файл с соответствующим именем в папке с файлами сайта. Вот что получилось у меня:

Все сайт готов. Осталось только поменять в каждой странице контент.

У такого сайта не смотря на его простоту есть очень большой недостаток. Что бы поменять один пункт меню или элемент дизайна придется это делать это в каждом сайте. Когда страниц больше 10 начинается страшная путаница при его обслуживании. Так что создание сайта html в блокноте советую делать только для очень маленьких сайтов или одно-страничных LandingPage. А для полноценных сайтов осваивать CMS (они не так сложны как кажется).

Создание сайта на HTML

Здравствуйте, меня зовут Михаил Русаков!

В этой статье я расскажу Вам о создании простейшего сайта. Кто знает, может быть, знания, которые Вы получите в этой статье, впоследствии станут началом Вашего успеха.

Я склонен полагать, что у Вас имеется большое желание научиться создавать свои собственные сайты. Разумеется, крайне глупо пытаться познать эту науку с изучения какого-нибудь PHP. Гораздо разумнее начать с чего-нибудь попроще, а именно с HTML (HyperText Markup Language — язык гипертекстовой разметки) — базового языка, на котором и построен любой, даже самый сложный сайт. Без этого языка не было бы ни одного сайта, более того, HTML — простейший язык, который может освоить даже школьник (яркий пример — Ваш покорный слуга, начавший осваивать HTML ещё в школе, причём весьма успешно).

Ладно, хватит болтовни — пора приступать к созданию нашего с Вами первого сайта, и этот процесс будет называться: «Создание сайта на HTML».

Первое, что нужно решить: где создавать сайт? Разумеется, можно и в обычном блокноте. Но это несерьёзно (мы так в школе писали), поэтому давайте лучше будем использовать что-нибудь «потяжелее». Я остановил свой выбор на редакторе «Notepad++» — замечательная программа, которая позволяет писать код на огромном количестве языков, в том плане, что это будет весьма и весьма удобно. Не буду сильно её хвалить, потому что для написания кода для серьёзных языков (Java, C++ и т. д.) она не подходит — много лишних проблем возникнет. Но для таких языков, как HTML, CSS, JavaScript и даже PHP — очень хороший выбор.

Скачать Notepad++ можно, пройдя по этой ссылке: http://notepad-plus.sourceforge.net/ru/site.htm

Устанавливаем и запускаем редактор. Сразу сохраняем страницу под именем index.html. Теперь пишем (пожалуйста, напишите, а не скопируйте!) в окне редактора:

<html>
<head>
</head>
<body>
</body>
</html>

Написали? Сохранили? Поздравляю Вас, Вы только что создали самую простую (но очень важную!!!) HTML-страницу!

Теперь можно нашу страницу открыть в браузере. Так и поступим.

Что-нибудь видите? Я уверен, что нет. И это неудивительно, ведь это самая элементарная страница. Вы можете посмотреть исходник страницы. Для этого в меню «Вид» выберите пункт меню «Просмотр HTML кода«, «Исходный код страницы» или что-то в этом духе, в зависимости от Вашего браузера. Также можно просто нажать CTRL-U (в большинстве браузеров откроется исходный код страницы), и Вы увидите Ваш код.

А теперь давайте обсудим, что мы здесь написали.

<html>, <head>, <body> — это открывающие теги. Иногда их ещё называют дескрипторы, но я привык называть их тегами, поэтому далее так и буду писать.

</html>, </head>, </body> — это закрывающие теги.

Теги бывают парные и одиночные. Парные теги — это теги, которые нуждаются в закрывающем, то есть все три тега, которые мы использовали являются парными, так как они открываются и потом закрываются.

Одиночные теги — это теги, которые не требуют наличие закрывающего тега.

Теперь что касается назначения данных тегов.

Тег <html> означает начало HTML-документа.

Тег <head> означает начало заголовка HTML-документа. Сюда могут входить, например, заголовок страницы, различные мета-теги. Обо всём об этом погорим чуть ниже.

Тег </head> означает конец заголовка HTML-документа.

Тег <body> означает начало самого документа. То есть всё (текст, картинки, ссылки и т. д.), что Вы видите на страницах в Интернете — всё расположено в теге <body>.

Тег </body> означает конец содержимого документа.

Тег </html> означает конец HTML-страницы.

Теперь давайте немного добавим в нашу страницу кода, уж, больно она примитивная у нас пока. Внутри тега <head> добавьте такой код:

<title>Наша страница</title>
<meta http-equiv="Content-type" content="text/html; charset=windows-1251">

Тег <title> определяет заголовок страницы, который будет отображён в заголовке окна браузера.

Тег </title> сообщает, что здесь заголовок заканчивается.

Что касается тега <meta>, то здесь сначала я должен сообщить об атрибутах тегов. У тегов могут быть различные атрибуты, определяющие, например, вид их содержимого. Атрибуты ставятся внутри открывающего тега и имеют следующий вид:

Название = «значение».

Тег <meta> у нас определяет тип содержимого документа. Атрибут http-equiv и его значение Content-type определяет, что сейчас будет описан тип документа. Атрибут content и его значение text/html; charset = windows-1251 сообщают браузеру, что данный документ является HTML-документом (text/html), и кодировка этого документа кириллица (windows-1251). Это был пример мета-тегов. Я думаю, что пока с ними хватит.

Теперь займёмся содержимым документа. Надеюсь, что Вы уже поняли, что раз содержимое страницы — значит, будем писать что-то внутри тега <body>. Давайте напишем следующий код внутри тега <body>:

<h2>Заголовок 1-го уровня</h2>
<h3>Заголовок 2-го уровня</h3>
<h4>Заголовок 3-го уровня</h4>
<h5>Заголовок 4-го уровня</h5>
<h5>Заголовок 5-го уровня</h5>
<h6>Заголовок 6-го уровня</h6>

Теги <h2>, <h3>, <h4>, <h5>, <h5>, <h6> — выводят текст в браузере. Причём этот текст является заголовком, более того, чем больше цифра (от 1-го до 6-ти), тем менее крупным шрифтом будет выведен соответствующий текст. Таким образом, код Вашей страницы имеет вид:

<html>
<head>
  <title>Наша страница</title>
  <meta http-equiv="Content-type" content="text/html; charset=windows-1251">
</head>
<body>
  <h2>Заголовок 1-го уровня</h2>
  <h3>Заголовок 2-го уровня</h3>
  <h4>Заголовок 3-го уровня</h4>
  <h5>Заголовок 4-го уровня</h5>
  <h5>Заголовок 5-го уровня</h5>
  <h6>Заголовок 6-го уровня</h6>
</body>
</html>

Сохраните страницу и посмотрите на неё в браузере.

Также можно добавить немного атрибутов и в тег <body>. Давайте добавим атрибут text со значением green (зелёный). И атрибут bgcolor со значением yellow (жёлтый).

Таким образом, тег <body> выглядит так:

<body text = "green" bgcolor = "yellow">
  <h2>Заголовок 1-го уровня</h2>
  <h3>Заголовок 2-го уровня</h3>
  <h4>Заголовок 3-го уровня</h4>
  <h5>Заголовок 4-го уровня</h5>
  <h5>Заголовок 5-го уровня</h5>
  <h6>Заголовок 6-го уровня</h6>
</body>
</html>

Сохраните страницу и посмотрите на неё в браузере. Как видите, фон страницы стал жёлтым, а текст стал зелёным.

Думаю, что на сегодня хватит для Вас материала. Очень полезно будет потренироваться в выводе разного текста, разными цветами.

Увидимся в следующей статье!

С уважением, Михаил Русаков.

P.S. Бесплатный курс по HTML: http://srs.myrusakov.ru/html


  • Создано 21.04.2010 19:53:46



  • Михаил Русаков

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Создаем HTML страницу — Как создать сайт

Делаем свою первую HTML-страницу (веб-страницу)

Урок №2
Создание своей первой веб-страницы

Сайты в интернете, состоят из HTML-страниц, точно также как обычная книга состоит из бумажных страниц, только в отличии от страниц книги, HTML-страницы соединены между собой не переплётом, а ссылками. Давайте создадим свою первую HTML-страницу.

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

HTML-страницы создаются с помощью языка HTML, а код этого языка записывается в текстовых редакторах, например в обычном Блокноте от Windows. Открыв Блокнот и введя туда код написанный на языке HTML, а затем сохранив получившийся документ в файл с расширением .html мы получим HTML-файл, который можно просмотреть с помощью браузера.

Открыть Блокнот в Windows можно следующим образом:

Пуск — Все программы

Стандартные — Блокнот

В Блокноте наберите следующий код:

<html>
 <head>
  <title>Название страницы</title>
 </head>
 <body>
  <h2>Заголовок статьи</h2>
  <p>
   Абзац статьи.</p>
 </body>
</html>

Или просто скопируйте его и вставьте в Блокнот:

Затем сохраните получившийся документ на Рабочий стол, в виде файла с названием index и расширением .html

Для этого нажмите на кнопки:
Файл — Сохранить как…

В появившемся окне выберите Рабочий стол, имя файла напишите index.html и нажмите кнопку:
Сохранить

Теперь файл index.html, который вы сохранили на Рабочий стол, можно открыть в браузере и посмотреть на получившуюся HTML-страницу. Для этого, нужно нажать правой кнопкой мыши по файлу index.html и выбрать из имеющихся у вас браузеров, я обычно использую браузер FireFox:
Открыть с помощью — FireFox

Если у вас на компьютере не установлен браузер FireFox, то можете открыть файл index.html любым другим браузером, например: Opera, Google Chrome, Internet Explorer или Safari.

Файл index.html, открытый в браузере FireFox:

На этом, первый урок учебника по HTML, окончен. В следующем уроке мы подробно разберём HTML-код и узнаем из каких частей он состоит.

Читать далее: Разбираем HTML-код

Дата публикации поста: 7 февраля 2016

Дата обновления поста: 6 февраля 2016

Навигация по записям

Как создать сайт в блокноте?

При взгляде на огромное разнообразие сайтов, представленных в сети, у людей непосвящённых зачастую создаётся впечатление, что создание сайтов бесплатно самостоятельно — дело избранных. Тем не менее, как и любая дальняя дорога начинается с первого шага, а шедевр с первого штриха в альбоме, так и создание нового сайта начинается с малого, можно даже сказать, подручными средствами. А для этого нам понадобится всем известный инструмент и простейший текстовый редактор — Блокнот.

Что такое HTML

Дело в том, что странички сайтов, которые мы видим на мониторах и экранах гаджетов, по сути, являются не чем иным, а текстовыми документами, правда, созданными с использованием языка гипертекстовой разметки или HTML, а делать это можно в обычном Блокноте. Следует отметить, что HTML не относится к языкам программирования — это способ предоставления информации в виде «доступном для понимания» браузерами. Браузеры, выступая в роли переводчиков со своего на человеческий язык, интерпретируют страницы в HTML, в результате чего вы видите на экране не набор символов, а форматированный текст.

Вот как выглядит на экране домашняя страница сайта umi.ru:

А вот как её «видит» браузер:

Чтобы понять, как работает HTML необходимо ознакомиться с его основным понятием, каковым является тег. Этот термин обозначает специальный структурный элемент, представляющий собой определенную комбинацию символов, при помощи которого и осуществляется разметка страницы. Определить тег очень просто — что бы он не означал, он всегда выделен в тексте знаками “<” перед и “>” в конце названия тега. Например, <script> или <table>, означающие «сценарий» и «таблица» соответственно. Если действие относится к определённой части текста, например, выделение полужирным шрифтом, то границы этого участка обозначаются парными тегами. В случае с полужирным текстом это будут комбинации <b> и </b>. Обратите внимание, что любой закрывающий тег отличается от открывающего косой чертой “/”.

Существуют и непарные теги, когда действие разовое и не относится к определённому участку текста, например, перенос строк, обозначаемый в HTML комбинацией <br>.

 

Основные виды тегов и их роль в разметке веб-страницы

  • <!DOCTYPE html>. С этого элемента начинается сайт. Он сообщает браузеру, что документ создан с помощью языка гипертекстовой разметки HTML. По большому счёту, этот элемент не обязателен, но его присутствие позволит избежать потенциальных проблем с отображением страницы;
  • парный тег <html> и </html> сообщает о начале и конце каждой страницы;
  • внутри между элементами парного тега <head> и </head> указывается всевозможная служебная информация о странице, в том числе, ее заголовок, указания на стили, использованные в ее оформлении, подключаемые скрипты, специальные метаданные;
  • ещё один парный тег <title> содержит заголовок страницы и находится внутри тега <head>. Благодаря этому тегу браузер и поисковые роботы определяют название каждой страницы;
  • область документа, отображаемая непосредственно на мониторе и видная пользователю, ограничивается парным тегом <body>. На странице эта область следует за тегом </head>.
  • для добавления в текст ссылок служит тег <a>, однако он несколько отличается от предыдущих своим видом и выглядит <a href=”URL ссылки”>текст ссылки</a>.
  • абзацы в тексте обозначаются парным тегом <p>.
  • для разделения текста при помощи подзаголовков различных уровней существуют парные теги <h2>, <h3>, <h4>, <h5>, <h5>, <h6>. Благодаря им можно выделять текст в зависимости от его важности.
  • для выделения текста полужирным шрифтом служит парный тег <b>.

Это всего лишь небольшая часть из всего разнообразия тегов, которых насчитывается около ста. Тем не менее, с их помощью уже можно начинать  cоздание сайта через блокнот. Есть также ряд правил, по которым теги располагаются в документе. Для основных тегов, включая <html>, <head>, <title>, <body>, существует строгий порядок распределения, тогда как в блоке, ограниченном тегами <body>, остальные теги комбинируются в зависимости от общего замысла и в соответствии со стандартами языка HTML.

Создаём сайт своими руками в Блокноте

Давайте попробуем научиться cозданию сайта через блокнот, чтобы были понятны роль и функции тегов, а также структура создаваемого документа.

Для работы с текстом сайта лучше работать не с традиционной программой «Блокнот», а со специальной его версией Notepad++, созданной как раз для написания кода. Скачать её можно с сайта разработчика. Всё описанное можно сделать и в обычном «Блокноте», но в Notepad++ работать с кодом гораздо удобнее.

Как уже говорилось, документ начинается с тега <!DOCTYPE html>, который сообщает браузеру, как его интерпретировать. Это и будет первая строчка в коде вашего сайта.

Следующий шаг. Обозначьте начало и конец страницы, добавив тег <html> во вторую строку и </html> через несколько строк ниже. Все остальное содержимое будет находиться в пределах, ограниченных этим парным тегом.

Затем выделим в документе участок страницы со служебной информацией, добавив парный тег <head> между тегами <html>, как показано ниже:

Чтобы указать заголовок страницы, в пространстве между тегами <head> и </head> в одну строку напишите парный тег <title></title> и вставьте между них заголовок (название сайта), например, «Создание сайта через блокнот».

А вот как её «видит» браузер:

Это будет единственная служебная информация нашего сайта. Далее приступаем к оформлению той части, которая будет видна на экране дисплея, выделив её тегами <body>. Открывающий тег ставим в строке после тега </head>, а закрывающий — перед тегом </html>, обозначающим, как мы помним, конец страницы.

Теперь, воспользовавшись парным тегом <h2> и </h2>, в строке, следующей после тега <body>, укажем заголовок нашей страницы, который будет показан пользователю. Между этими тегами добавим название страницы, например то же, что и у сайта — «Создание сайта через блокнот».

Наполним сайт содержанием, создав один абзац текста, и ограничив его открывающим тегом <p> в строке после </h2> и </p> в конце абзаца. Между ними добавим текст. Например: «Чтобы научиться  cозданию сайта через блокнот, сначала необходимо получить представление об HTML».

Если вы хотите в тексте сделать выделение полужирным шрифтом, воспользуйтесь парным тегом <b>. В нашем примере выделим слово «HTML» — <b>HTML</b>.

Создадим подзаголовок. Для этого в новой строке пропишем парный тег <h4> в который вставим подзаголовок следующего блока текста, например, «Что такое теги».

Далее создадим еще один абзац текста, использовав уже знакомые нам теги <p> и </p>, вставив между ними отрывок из нашей статьи.

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

Осталось научиться вставлять ссылки — один из ключевых элементов гипертекстов. Для этого воспользуемся тегами <a href=””></a>. Например, в новом абзаце с текстом: «В создании сайта через блокнот нам помогли специалисты компании UMI», — дадим ссылку на сайт. В результате у  вас должна получиться комбинация вида <a href=”https://umi.ru/”>UMI</a>. То есть, между кавычками в теге <a href=””> указывается URL страницы, на которую ведёт ссылка, а перед закрывающим тегом </a> указывается текст, который будет отображён на странице. Как это выглядит на деле, видно на приведённом ниже рисунке.

Наш наипростейший сайт, созданный с помощью блокнота, почти готов. Осталось сохранить документ в формате *.html. Теперь его можно открывать в любом браузере. Заметьте, после сохранения с расширением HTML содержимое файла выглядит несколько по-другому — теперь в нём выделены все теги и ссылки, а при помощи расположенных слева плюсов и минусов можно скрывать и раскрывать содержимое отдельных блоков, находящихся между парными тегами, к примеру, скрыть участок, ограниченный тегом <head>.

Если всё сделано как следует, то результатом вашей работы должна быть вот такая HTML-страница, готовая для публикации в интернете, в результате чего получится вот такой маленький одностраничный сайт:

Конечно, создавать современный сайт через блокнот будет сложно, да и, при существовании специальных конструкторов и сервисов готовых сайтов, которые значительно упрощают процесс создания сайтов и экономят время, это вряд ли оправданно. Тем не менее, иметь представление о том, из чего состоит веб-страница, как она выглядит «без оболочки» будет весьма полезно. Кроме того, теперь вам по силам cоздание сайта через блокнот и вы всегда сможете сделать это, не обращаясь к услугам программистов.

Пошаговое создание сайта html. В чем состоит работа?

От автора: здравствуйте, уважаемые читатели блога webformyself. В этой статье будет показано пошаговое создание сайта html. Мы продолжим работу с сайтом, полученным в результате действий в предыдущей статье. Если не читали, то ничего, ссылка будет дана. Там мы уже разобрали на практике часть шагов, поэтому здесь они будут описаны лишь в теории, зато мы доработаем наш простенький сайт. Вы также можете скачать исходные файлы с кодом.

Планирование

Конечно же, при создании серьезного проекта это должен быть первый шаг. Например, вы можете нарисовать на листочке макет сайта. Если вы создаете страничку в учебных целях, то этот шаг не нужен, но нужно иметь хотя бы минимальное представление о том, каким вы хотите видеть сайт.

Подготовка к работе

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

Создание и оформление базовой структуры.

В этой статье мы создали четыре главных структурных блока простого шаблона – шапку, боковую колонку, основную часть и футер. Сделали мы это с помощью html-тегов. После этого нужно было оформить эти элементы и сайт стал гораздо привлекательнее.

Под базовой структурой нужно понимать самые главные блоки. Например, в сложных шаблонах могут быть сотни элементов, но самых главных всегда всего лишь несколько.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Уроки создания сайта html нужно проходить пошагово. Например, на нашем сайте в премиум-разделе вся информация подается от простого к сложному.

Создание и оформление дополнительных элементов

А теперь начинается один из самых объемных этапов работы. Вернее, так бы было, если бы мы разрабатывали реальный сайт, а поскольку работаем с простейшим шаблоном, то дополнительных элементов у нас будет всего лишь несколько.

Работать нужно снизу вверх. Это необязательно, просто так удобней. Сначала занимайтесь оформлением шапки. Например, что у нас обычно размещают вверху страницы? Правильно, логотип и название сайта. Давайте мы тоже это сделаем. Для шапки у вас уже задан фоновый цвет, теперь нужно задать фоновое изображение. Я выбрал в качестве фонового изображения файл html5.png, который нужно скопировать туда же, где лежит наша страничка.

#header{
background: #D2E4AF url(html5.png) no-repeat 10% 50%
}

#header{

background: #D2E4AF url(html5.png) no-repeat 10% 50%

}

Слишком сложно будет объяснить вам эту строчку в полной мере, если вы впервые работаете с CSS. Вкратце: дописали после цвета адрес изображения, указали, что его не нужно повторять и задали позицию относительно блока: сдвиг на 10% ширины блока влево от левого края по горизонтали и на 50% от высоты вниз от верхнего края по вертикали. Напоминаю, все это нужно прописывать для блока header. Если все сделано правильно, логотип появится в шапке. Естественно, можно использовать и свое изображение, заодно и потренируетесь.

Давайте теперь в шапке разместим красивое название сайта. Заголовки в html задаются тегами h2-h6, в зависимости от размера и важности заголовка. Определенно, заголовок сайта очень важен, поэтому заключаем его в парный тег h2.

<h2>Название сайта</h2>

<h2>Название сайта</h2>

Отлично, у нас появился новый элемент. Как теперь до него дотянутся через CSS? Очень просто:

#header h2{
color: orange;
text-align: center;
text-shadow: 0 0 2px blue
}

#header h2{

color: orange;

text-align: center;

text-shadow: 0 0 2px blue

}

Мы указали, что данные правила нужно применить ко всем тегам h2, находящимся внутри блока с id = «header». То есть ко всем самым крупным заголовкам внутри шапки. Я решил сделать цвет заголовка оранжевым, отцентрировать его и дать небольшую синюю размытую тень. Вам необязательно сейчас разбираться в написанном, просто скопируйте себе в таблицу стилей.

Обновим нашу страничку и увидим, что в целом шапка стала в разы красивее, хотя на реальном сайте в ней обычно содержится что-то еще.

Вставляем меню в боковую колонку

Боковая колонка часто используется для того, чтобы вывести в ней главную навигацию по сайту. Давайте и мы поступим также. Нам нужен список. Каким тегом он задается? Тегом ul, а отдельные его пункты заключаются в теги li. Проще показать на примере:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
<li>Пункт 5</li>
</ul>

<ul>

<li>Пункт 1</li>

<li>Пункт 2</li>

<li>Пункт 3</li>

<li>Пункт 4</li>

<li>Пункт 5</li>

</ul>

Естественно, в реальном проекте будут названия разделов сайта, а не текст: «Пункт 1″. И это будут ссылки. То есть вот так:

<li><a href = «путь к разделу»>Пункт 5</a></li>

<li><a href = «путь к разделу»>Пункт 5</a></li>

По умолчанию рядом с каждым пунктом списка выводится маркер. В этом случае он нам не нужен. Убрать его можно так:

#sidebar ul{
list-style: none
}

#sidebar ul{

list-style: none

}

Опять же заметьте, что мы обратились к спискам, которые находятся именно в боковой колонке. Ко всем остальным (если они будут) данный стиль применен не будет. Остается только немного украсить само меню.

#sidebar ul li{
border-bottom: 2px solid orange;
width: 55px
}

#sidebar ul li{

border-bottom: 2px solid orange;

width: 55px

}

Добавим к пунктам списка рамку снизу, к примеру. Также по умолчанию пункт списка – блочный элемент, который занимает всю ширину в строке. Мы вручную изменим ширину, чтобы она не была такой большой. В реальном примере стили обычно задают непосредственно ссылкам в пунктах списка. Ну и наконец добавим небольшое поведение – пусть при паведении на пункт меню у него меняется цвет.

#sidebar ul li:hover{
background: orange;
color: white
}

#sidebar ul li:hover{

background: orange;

color: white

}

Вставьте этот код и обновите страничку. Вроде неплохо, да?

Оформляем контент

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

#content{
padding: 10px
}

Ну а над низом страницы можно долго не мучаться. Вставьте туда копирайт, например, и отцентрируйте его. Я предлагаю последнее изменение: в самом начале разработки шаблона мы сделали трехпиксельные рамки всем основным структурным блокам. Давайте их уменьшим до одного пикселя, а то слишком толстые.

Итог

Итак, получилось что-то симпатичное. Нашей целью не было создать крутой шаблон – на это может уйти много дней работы. Моей целью было показать вам, как вообще создается сайт, по каким принципам это делается. У нас получился простейший шаблон, который теперь можно дорабатывать сколько угодно. Даже веб-дизайнер нам с вами не понадобился, сами по-быстрому подобрали цвета.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Создание Сайта HTML в Блокноте: (100)% Руководство

Как сделать сайт с помощью текстового редактора или создание сайта html в блокноте за пару минут!

Здравствуйте,уважаемые друзья и гости блога Pribylwm.ru! Вы хотите узнать как легко и быстро делается создание сайта html в блокноте на своем компьютере или любом мобильном устройстве? В этом уроке Вы узнаете, как создать простой веб-сайт с нуля, используя Блокнот. Если Вы на Mac, Вам нужно использовать TextEdit.

Есть другие профессиональные редакторы кода, которые Вы можете использовать для редактирования кода, такие как HTML

Если у Вас Mac и Вы хотите что-то лучше, чем TextEdit, Вы можете загрузить Adobe Brackets, который работает как на Mac, так и на Windows. Я буду работать на Windows и, следовательно, используя базовую версию Блокнота. Код в этом руководстве работает в любом редакторе, поэтому просто выберите понравившийся вам редактор и начнем.

Создание сайта HTML в блокноте – Ваша первая страница в блокноте!

Windows

Чтобы открыть Блокнот в Windows 7 или более ранней версии, нажмите Пуск -> Все программы -> Стандартные -> Блокнот. Вы также можете нажать «Пуск» и выполнить поиск «Блокнот». Я буду делать это в Windows 10, которую не так давно приобрел и установил. Кстати, и Вам советую!

Mac

Откройте TextEdit и убедитесь, что для текстового редактора задан обычный текст, для этого выберите «Настройки»> «Новый документ»> «Выбрать обычный текст». Затем убедитесь, что отметили «Отображать HTML-файл как HTML-код» и «Отображать RTF-файл как RTF-код» в разделе «Открыть и сохранить».

Затем скопируйте и вставьте следующий код в редактор:

<!DOCTYPE html>
<html>
<body>

<h2>Мой первый заголовок</h2>

<p>Мой первый абзац.</p>

</body>
</html>

Сохранение файла HTML

Сохраните файл как «index.html» с расширением HTML. Это очень важно, если Вы не добавите .html в конец имени, это не сработает.

Примечание. Несмотря на то, что .html предпочтительнее, Вы также можете использовать .htm без буквы “L”.

Установите кодировку UTF-8, которая является предпочтительной для файлов HTML. Кодировка ANSI предназначена только для символов США и Западной Европы.

Открытие HTML-файла в браузере

Затем перейдите в папку, в которой Вы сохранили файл, и откройте его в браузере. В этом примере мы используем Chrome, но любой современный браузер должен работать.

ПРИМЕЧАНИЕ. Если у Вас возникли проблемы с открытием файла, убедитесь, что Вы сохранили его в формате .html.

Просмотр HTML-файла в браузере

После открытия файла в вашем браузере он будет выглядеть так:

Обратите внимание на путь к файлу в

файле панели URL : /// C: /Users/WebsitesDIY/Desktop/HTML/index.html

Это полный путь к файлу на вашем компьютере

Центрирование текста

Теперь, когда Вы понимаете основы создания HTML-файла, давайте узнаем, как центрировать текст

Перейдите в созданный html-файл и добавьте теги <center> </center> к «Моему первому заголовку», например, так: <center> <h2> Мой первый заголовок </h2> </center>

Удалите <p> Мой первый абзац. </p> на данный момент.

Сохраните файл и снова откройте его в браузере. Если окно вашего браузера все еще открыто, Вы можете просто нажать кнопку «Обновить», чтобы перезагрузить страницу.

Текст заголовка должен теперь быть сосредоточен в середине веб – страницы.

Добавление видео с YouTube на Ваш сайт

Чтобы добавить видео YouTube на свой сайт: Перейдите на Youtube и найдите видео, которое хотите добавить на свой сайт.

«Щелкните правой кнопкой мыши» на видео и «Скопируйте код для вставки».

Вставка кода для вставки видео в блокнот

Вставьте код для вставки в Блокнот

Код для встраивания будет выглядеть примерно так:

<iframe width = “854” height = “480” src = “https://www.youtube.com/embed/0tWSpXrkOp4” frameborder = “0” allowfullscreen> </iframe>

Вы можете изменить ширину и высоту по своему усмотрению. Просто измените эти цифры в коде и оставьте все остальное без изменений. В этом примере мы будем использовать width = “427” и height = “240”. Вы можете установить для себя все, что Вы хотите.

Сосредоточьте видео, поместив тег <center> </center> вокруг кода вставки, скопированного с YouTube.

Кроме того, давайте изменим заголовок между тегами <h2> Мой первый заголовок </h2> на «Мой первый сайт в блокноте».

Добавление ссылки на другую страницу

Теперь мы добавим ссылку, которая идет в Google, когда люди нажимают на нее.

Добавьте следующий код на свой веб-сайт прямо под видео:

<a href=”http://www.google.com”>Перейдите в Google</a>.

Обратите внимание, как ссылка центрируется с помощью тегов center. Также обратите внимание на тег <br> непосредственно перед центральным тегом – это добавляет разрыв строки между видео и ссылкой.

Теперь Вы должны увидеть ссылку под видео, которая идет в Google, если Вы нажмете на нее.

Вы можете создавать ссылки, которые идут на любую страницу, которую Вы хотите. Просто измените то, что в атрибуте href.

Если Вы хотите открыть ссылку в новом окне, когда кто-то нажимает на нее, добавьте следующий атрибут в тег ссылки: <a href=”https://www.google.com” target=”_blank”>Перейти к Google</a>

Создание 2-й страницы для вашего сайта

Теперь мы создадим вторую страницу для вашего сайта и назовем ее page2.html. Таким образом, Вы можете создавать ссылки на другие части вашего сайта вместо ссылок на Google, как мы делали ранее.

Создайте новый HTML-файл и добавьте к нему приведенный ниже код. Сохраните это и назовите это page2.html

<!DOCTYPE html>
<html>
<body>

<center>
<h2>Страница сайта №2</h2>
</center>

<center>
<p>Это моя вторая страница.</p>
</center>

</body>
</html>

В итоге должно получиться вот так:

Ваш веб-сайт теперь будет иметь вторую страницу, на которую мы можем ссылаться с первой страницы.

Ссылки на Page2 с вашей главной страницы

Теперь, когда мы создали Page2, давайте изменим ссылку на первой странице, чтобы она ссылалась на page2.html.

Откройте «index.html» и измените URL, который ссылается на Google, чтобы вместо него перейти на страницу 2:

<a href=”page2.html”>Страница 2</a>

Вы находитесь на странице 2 вашего сайта

Если Вы успешно создали свою ссылку, Вы должны перейти на страницу page.html, нажав на ссылку под видео. Если по какой-то причине ваша ссылка не работает, вернитесь на несколько шагов назад и снова следуйте инструкциям. Знание того, как добавить ссылки / URL-адреса на Ваш сайт, очень полезно. Ведь в интернете это просто большая коллекция ссылок, проиндексированных Google.

Добавление классных стилей с помощью CSS

Теперь мы собираемся стилизовать ссылку на страницу 2 с помощью CSS, чтобы она выглядела как кнопка. CSS используется для управления макетом вашего сайта.

Скопируйте и вставьте следующий код в верхней части страницы index.html чуть ниже тега <body>. При вставке не перезаписывайте другой код.

<head>
<style media=”screen” type=”text/css”>
a {
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
padding: 10px;
background-color: #00AEEF;
color: #ffffff;
border-radius: 10px;
}
</style>
</head>

 

В основном этот фрагмент кода говорит браузеру добавить цвет фона и высоту к ссылке, которую мы сделали ранее. Мы также сделали углы немного округленными, добавив радиус границы 10px. Есть много бесплатных онлайн-учебников, где Вы можете узнать больше о CSS, чтобы Ваш сайт выглядел действительно красиво.

Добавление эффекта наведения на кнопку

Последнее, что мы собираемся сделать, это добавить эффект наведения на кнопку. Эффект при наведении заставит кнопку меняться в цвете, когда Вы наводите курсор мыши.

Добавьте следующий код чуть выше закрывающего тега </style>:

a:hover {
background-color: #005170;
}

И при наведении на кнопку ссылки ее цвет будет изменяться:

Ваш сайт должен выглядеть следующим образом

Ваш веб-сайт должен теперь выглядеть как пример на картинке. Должен быть заголовок с именем вверху, видео посередине и кнопка внизу. Когда Вы наводите курсор мыши на кнопку, цвет должен измениться на темно-синий. Если Ваш веб-сайт выглядит неправильно, возможно, в коде есть ошибки. Пожалуйста, вернитесь на несколько шагов и попробуйте снова. Важно понять основы, прежде чем перейти к следующему шагу, где мы покажем, как разместить свой веб-сайт в Интернете, чтобы каждый мог получить к нему доступ.

Создание сайта HTML в блокноте – Сделай свой сайт Живым!

Чтобы мир мог видеть Ваш сайт, его необходимо загрузить на веб-сервер, который постоянно подключен к Интернету 24/7. Теперь мы не рекомендуем настраивать собственный сервер. Гораздо проще платить 3 или 5 долларов в месяц профессиональному провайдеру веб-хостинга, который сделает это за Вас. Я рекомендую использовать McHost и подписаться на тарифный план на год или более для запуска вашего сайта и получения БЕСПЛАТНОГО доменного имени и множество дополнительных бонусов. Этот сайт размещен на McHost, и нам это нравится. Они быстрые, безопасные и имеют отличное обслуживание клиентов.

Теперь Вы знаете как быстро и легко, даже для новичка, делается создание сайта html в блокноте на простом компьютере или мобильном устройстве! Всем удачи и благополучия! До новых встреч!

Как создать сайт в блокноте HTML — пример и инструкция

1.Создайте текстовый документ.

2.По желанию переименуйте файл (у меня он будет называться first-page) и обязательно задайте ему расширение .html вместо .txt).

3.Откройте документ программой Блокнот, Notepad, Notepad++ или другом текстовом редакторе, желательно с подсветкой синтаксиса.

4.Скопируйте и вставьте в него следующий текст.

<!DOCTYPE html>
<html>
<head>
<title>Моя первая страничка</title>
</head>
<body>
Тело HTML-документа (отображается на экране)
</body>
</html>

5. Сохраните изменения в файле.

6. Откройте first-page.html, только уже не в Блокноте, а в любом доступном вам браузере. На экране должно отобразиться примерно следующее:

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

Теперь проверьте, правильно ли вы этот код поняли. Рассмотрим его.

Это тег, с которого должен начинаться любой html-документ. Он даёт понять интернет-обозревателю, с какой версией языка разметки тот имеет дело. Без этой строки браузер может начать неправильно обрабатывать код. Написав , мы идентифицировали файл как документ стандарта HTML 5, и браузер, проанализировав первую строку, будет обрабатывать остальной код в соответствии с заданным стандартом.

Даёт понять интернет-обозревателю, что всё, находящееся между открывающим и закрывающим тегами — html-код. Вообще использовать эти теги не обязательно, но принято.

«Head» с английского — «Голова». Этот контейнер содержит теги со вспомогательной информацией для веб-браузеров и поисковых систем. Здесь можно задать файлы скриптов, таблицы стилей, ключевые слова и

<title>Моя первая страничка</title>

Заголовок страницы. Открыв документ в браузере, вы наверняка обратили внимание на имя вкладки. Браузер вывел его на экран. Заголовок важен не только для поисковых систем, но и для людей, ведь он помогает понять, о чём страница.

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

Вы можете поменять надпись на любую другую, и она отобразится в браузере. На экран будет выведен любой находящийся между тегами

и

текст (если только это не теги), так что поздравляю, простые html-странички вы создавать уже научились. Внимательный читатель мог задуматься, почему теги расположены именно так:идёт перед, но закрывающий находится перед закрывающим. Чтобы это понять, рассмотрим предложение: Сайт полезный (называется «Яндекс» (кажется так)).

Кавычки расположены внутри скобок, вторые скобки закрываются перед первыми. Правила вложенности в HTML совпадают с правилами вложенности в русском языке. На основе рассмотренного html-шаблона можно создавать другие страницы, просто меняя информацию внутри контейнеров.

Это был простой пример создания сайта через блокнот, более сложные проекты можно делать с помощью визуального редактора HTML.

Полезные ссылки:

Как создать сайт


Узнайте, как создать адаптивный веб-сайт, который будет работать на всех устройствах,
ПК, ноутбук, планшет и телефон.


Создание веб-сайта с нуля


A «Эскизный макет»

Перед созданием веб-сайта может быть целесообразно нарисовать черновик макета страницы:

Панель навигации

Боковое содержание

Какой-то текст какой-то текст ..

Основное содержание

Какой-то текст какой-то текст..

Какой-то текст какой-то текст ..

Какой-то текст какой-то текст ..

Нижний колонтитул


Первый шаг — простая HTML-страница

HTML — это стандартный язык разметки для создания веб-сайтов, а CSS — это язык, описывающий стиль HTML-документа. Мы объединим HTML и CSS, чтобы создать простую веб-страницу.

Пример

Заголовок страницы

кузов {
семейство шрифтов: Arial, Helvetica, sans-serif;
}

Мой веб-сайт

Веб-сайт, созданный мной.


Попробуй сам »

Объяснение примера

  • Объявление определяет этот документ как HTML5
  • Элемент является корневым элементом HTML
    стр.
  • Элемент содержит метаинформацию о документе
  • Элемент </code> определяет заголовок документа </li> <li> Элемент <code> <meta> </code> должен определять набор символов как UTF-8 </li> <li> Элемент <code> <meta> </code> с name = «viewport» позволяет веб-сайту хорошо выглядеть на всех устройствах и разрешениях экрана. </li> <li> Элемент <code><br /> <style> </code> содержит стили для веб-сайта (верстка / дизайн) </li> <li> Элемент <code> <body> </code> содержит видимое содержимое страницы </li> <li> Элемент <code><br /> <h2> </h2> <p></code> определяет большой заголовок </li> <li> Элемент <code> <p> </code> определяет абзац </li> </ul> <hr/> <h3><span class="ez-toc-section" id="%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B8%D0%BC%D0%BE%D0%B3%D0%BE_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B"></span> Создание содержимого страницы <span class="ez-toc-section-end"></span></h3> <p> Внутри элемента <code> <body> </code> нашего веб-сайта мы будем использовать наш макет<br /> Черновой вариант"<br /> и создайте: </p> <ul> <li> Заголовок </li> <li> Панель навигации </li> <li> Основное содержание </li> <li> Боковое содержимое </li> <li> Нижний колонтитул </li> </ul> <hr/> <h3><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA"></span> Заголовок <span class="ez-toc-section-end"></span></h3> <p> Заголовок обычно располагается вверху веб-сайта (или прямо под верхним<br /> меню навигации).Часто содержит логотип или название веб-сайта: </p> <p>.</p> <p><div> </p> <h2><span class="ez-toc-section" id="%D0%9C%D0%BE%D0%B9_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82-2"></span> Мой веб-сайт <span class="ez-toc-section-end"></span></h2> <p> </p> <p> Веб-сайт<br /> создано мной. </p> <p> </div> </p> <p> Затем мы используем CSS для стилизации заголовка: </p> <p> .header {<br /> отступ: 80 пикселей; / * некоторые отступы * / <br /> text-align: center; / * центрировать текст * / <br /> фон: # 1abc9c;<br /> / * зеленый фон * / <br /> цвет белый; / * белый цвет текста * / <br />} </p> <p> / * Увеличиваем размер шрифта элемента </p> <h2><span class="ez-toc-section" id="i"></span> * / <span class="ez-toc-section-end"></span></h2> <p>.заголовок h2 {<br /> font-size: 40px; <br />} </p> <p> Попробуйте сами »</p> <hr/> <hr/> <h3><span class="ez-toc-section" id="%D0%9F%D0%B0%D0%BD%D0%B5%D0%BB%D1%8C_%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%B8-2"></span> Панель навигации <span class="ez-toc-section-end"></span></h3> <p> Панель навигации содержит список ссылок, которые помогают посетителям перемещаться по<br /> ваш сайт: </p> <p><div> <a href="#"> Ссылка </a> <br /> <a href="#"> Ссылка </a> <br /> <a href="#"> Ссылка </a> <br /> <a href="#"> Ссылка </a> </div> </p> <p> Используйте CSS для стилизации панели навигации: </p> <p> / * Стиль верхней панели навигации * / <br />.навигационная панель {<br /> переполнение: скрыто; / * Скрыть переполнение * / <br /> background-color: # 333;<br /> / * Темный цвет фона * / <br />} </p> <p> / * Стиль ссылок панели навигации * / <br /> .navbar<br /> поплавок {<br />: левый; / * Убедимся, что ссылки остались<br /> рядом * / дисплей <br />: блочный; / * Измените отображение на<br /> блок, по причинам реагирования (см. ниже) * / <br /> цвет: белый; / * Белый цвет текста * / <br /> text-align: center;<br /> / * Центрировать текст * / <br /> отступ: 14 пикселей 20 пикселей; / * Добавляем отступы * / <br /> text-decoration: none;<br /> / * Убрать подчеркивание * / <br />} </p> <p> / *<br /> Ссылка по правому краю * / <br />.navbar a.right {<br /> float: right;<br /> / * Размещаем ссылку вправо * / <br />} </p> <p> / *<br /> Изменить цвет при наведении / наведении указателя мыши * / <br /> .navbar a: hover {<br /> цвет фона: #ddd; / * Цвет серого фона * / <br /> цвет: черный;<br /> / * Черный цвет текста * / <br />} </p> <p> Попробуйте сами »</p> <hr/> <h3><span class="ez-toc-section" id="%D0%A1%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B0%D0%BD%D0%B8%D0%B5"></span> Содержание <span class="ez-toc-section-end"></span></h3> <p> Создайте макет из 2 столбцов, разделенных на «побочное содержимое» и «основное содержимое». </p> <p><div> </p> <div> ... </div> <p> </p> <div >... </div> <p> </div> </p> <p> Мы используем CSS Flexbox для обработки макета: </p> <p> / * Обеспечение правильного размера * / <br /> * {<br /> box-sizing: border-box; <br />} </p> <p> / * Контейнер колонки * / <br /> .row {<br /> display: flex; <br /> flex-wrap: пленка; <br />} </p> <p> / * Создать<br /> два неравных столбца, которые расположены рядом друг с другом * / <br /> / * Боковая панель / левый столбец<br /> * / <br />. Сторона {<br /> изгиб: 30%; / * Устанавливаем ширину боковой панели<br /> * / <br /> цвет фона: # f1f1f1; / * Серый цвет фона<br /> * / <br /> отступ: 20 пикселей; / * Некоторые отступы * / <br />} </p> <p> / * Основной столбец * / <br />.основной {<br /> <br /> гибкость: 70%; / * Устанавливаем ширину основного содержимого * / <br /> background-color: white; / * Белый цвет фона * / <br /> padding: 20px; / * Некоторые отступы * / <br />} </p> <p> Попробуйте сами »</p> <p> Затем добавьте медиа-запросы, чтобы сделать макет адаптивным. Это обеспечит<br /> чтобы ваш сайт хорошо выглядел на всех устройствах (настольных компьютерах, ноутбуках, планшетах и<br /> телефоны). Измените размер окна браузера, чтобы увидеть результат. </p> <p> / * Адаптивный макет - когда экран меньше 700 пикселей в ширину, делаем два<br /> столбцы накладываются друг на друга, а не рядом * / <br /> @media<br /> экран и (максимальная ширина: 700 пикселей) {<br />.ряд {<br /> flex-direction: столбец; <br />} <br />} </p> <p> / *<br /> Адаптивный макет - если ширина экрана меньше 400 пикселей, сделайте<br /> ссылки навигации располагаются друг над другом, а не рядом друг с другом * / <br /> @media screen и (max-width: 400px) {<br /> .navbar a {<br /> float: нет; <br /> ширина: 100%; <br />} <br />} </p> <p> Попробуйте сами »</p> <p> <strong> Совет: </strong> Чтобы создать другой вид макета, просто измените ширину гибкости (но убедитесь, что она составляет 100%).</p> <p> <strong> Совет: </strong> Вам интересно, как работает правило @media? Узнать больше о<br /> это в нашей главе CSS Media Queries. </p> <p> <strong> Совет: </strong> Чтобы узнать больше о модуле гибкой компоновки коробки, прочтите наши<br /> Глава CSS Flexbox. </p> <p> <strong> Что такое размер коробки? </strong> </p> <p> Вы можете легко создать три плавающих бокса рядом. Однако, когда вы добавляете что-то, что увеличивает ширину каждого блока (например, отступы или границы), блок сломается. Свойство <code> box-sizing </code> позволяет нам включать заполнение и границу в общую ширину (и высоту) блока, следя за тем, чтобы заполнение оставалось внутри блока и не ломалось.</p> <p> Вы можете узнать больше о свойстве box-sizing в нашем руководстве CSS Box Sizing Tutorial. </p> <hr/> <h3><span class="ez-toc-section" id="%D0%9D%D0%B8%D0%B6%D0%BD%D0%B8%D0%B9_%D0%BA%D0%BE%D0%BB%D0%BE%D0%BD%D1%82%D0%B8%D1%82%D1%83%D0%BB-2"></span> Нижний колонтитул <span class="ez-toc-section-end"></span></h3> <p> Наконец, добавим нижний колонтитул. </p> <p><div> </p> <h3><span class="ez-toc-section" id="%D0%9D%D0%B8%D0%B6%D0%BD%D0%B8%D0%B9_%D0%BA%D0%BE%D0%BB%D0%BE%D0%BD%D1%82%D0%B8%D1%82%D1%83%D0%BB-3"></span> Нижний колонтитул <span class="ez-toc-section-end"></span></h3> <p> </div> </p> <p> И стиль: </p> <p> .footer {<br /> отступ: 20 пикселей; / * Некоторые отступы * / <br /> text-align: center; / * Текст по центру * / <br /> background: #ddd;<br /> / * Серый фон * / <br />} </p> <p> Попробуйте сами »</p> <p> Поздравляем! Вы создали адаптивный веб-сайт с нуля.</p> <h2><span class="ez-toc-section" id="%D0%91%D0%B5%D1%81%D0%BF%D0%BB%D0%B0%D1%82%D0%BD%D1%8B%D0%B9_%D0%BA%D0%BE%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D0%BE%D1%80_%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2_%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%B2%D0%B0%D0%B9%D1%82%D0%B5_%D0%B1%D0%B5%D1%81%D0%BF%D0%BB%D0%B0%D1%82%D0%BD%D1%8B%D0%B5_%D0%B0%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B5_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D1%8B"></span> Бесплатный конструктор сайтов | Создавайте бесплатные адаптивные веб-сайты <span class="ez-toc-section-end"></span></h2> <p> Слишком долго создание для Интернета означало решение трудоемкой задачи изучения кода или найма разработчика для реализации вашего видения. </p> <p> Но с создателем веб-сайтов Webflow вы можете использовать всю мощь разработчика, не зная кода. </p> <h4><span class="ez-toc-section" id="%D0%A0%D0%B0%D1%81%D0%BA%D1%80%D0%BE%D0%B9%D1%82%D0%B5_%D1%81%D0%B2%D0%BE%D0%B9_%D1%82%D0%B2%D0%BE%D1%80%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D0%BF%D0%BE%D1%82%D0%B5%D0%BD%D1%86%D0%B8%D0%B0%D0%BB_%D0%B2_%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82%D0%B5_-_%D0%B1%D0%B5%D0%B7_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F"></span> Раскройте свой творческий потенциал в Интернете - без программирования <span class="ez-toc-section-end"></span></h4> <blockquote><p> «Если бы у меня не было Webflow, я бы, наверное, не занимался дизайном веб-сайтов.”</p></blockquote> <h5><span class="ez-toc-section" id="-_%D0%90%D0%BD%D0%B4%D1%80%D0%B5%D0%B9_%D0%96%D0%B0%D1%81%D1%81%D0%BE_%D0%B2%D0%BD%D0%B5%D1%88%D1%82%D0%B0%D1%82%D0%BD%D1%8B%D0%B9_%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D0%B5%D1%80"></span> - Андрей Жассо, внештатный дизайнер <span class="ez-toc-section-end"></span></h5> <p> Webflow предоставляет вам инструменты, необходимые для проектирования и создания профессиональных веб-сайтов с помощью интуитивно понятного и эффективного графического интерфейса. Это так же просто, как перетаскивать элементы дизайна на пустой холст, а затем стилизовать их по своему усмотрению. </p> <p> Создатель веб-сайтов </p> <p> Webflow дает вам свободу творчества, позволяя сосредоточиться на дизайне, не беспокоясь о кодировании.</p> <h4><span class="ez-toc-section" id="Webflow_-_%D0%B2%D0%B0%D1%88%D0%B0_%D0%BE%D1%82%D0%BF%D1%80%D0%B0%D0%B2%D0%BD%D0%B0%D1%8F_%D1%82%D0%BE%D1%87%D0%BA%D0%B0_%D0%B8_%D0%BA%D0%BE%D0%BD%D0%B5%D1%87%D0%BD%D0%B0%D1%8F_%D1%82%D0%BE%D1%87%D0%BA%D0%B0_%D0%B2%D0%B5%D0%B1-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D0%B0"></span> Webflow - ваша отправная точка и конечная точка веб-дизайна <span class="ez-toc-section-end"></span></h4> <p> Независимо от того, начинаете ли вы с нуля или хотите использовать шаблон, Webflow поможет вам быстро создать веб-сайт. </p> <p> Выберите один из наших 100+ адаптивных шаблонов HTML5 для своего блога, бизнеса или портфолио. Наши профессионально разработанные шаблоны дадут вам прочную основу для создания веб-сайта, который вам понравится. И вы можете настроить каждый элемент наших шаблонов с помощью Webflow Designer без кода, так что вы получите полный контроль над окончательным внешним видом.Вы никогда больше не захотите использовать один из тех шаблонов для вырезания печенья, которые предлагают другие разработчики веб-сайтов. А с помощью нашей функции предварительного просмотра вы сможете точно увидеть, как ваш веб-сайт будет выглядеть и работать на любом устройстве. </p> <h4><span class="ez-toc-section" id="%D0%9F%D0%B5%D1%80%D0%B5%D1%85%D0%BE%D0%B4%D0%B8%D1%82%D0%B5_%D0%BE%D1%82_%D0%BA%D0%BE%D0%BD%D1%86%D0%B5%D0%BF%D1%86%D0%B8%D0%B8_%D0%BA_%D0%B7%D0%B0%D0%BF%D1%83%D1%81%D0%BA%D1%83_%D0%B1%D1%8B%D1%81%D1%82%D1%80%D0%B5%D0%B5_%D1%87%D0%B5%D0%BC_%D0%BA%D0%BE%D0%B3%D0%B4%D0%B0-%D0%BB%D0%B8%D0%B1%D0%BE"></span> Переходите от концепции к запуску быстрее, чем когда-либо <span class="ez-toc-section-end"></span></h4> <blockquote><p> «Webflow фактически меняет наш рабочий процесс. Раньше нам приходилось… полагаться на инженерное дело ». </p></blockquote> <h5><span class="ez-toc-section" id="-_%D0%94%D1%8D%D0%B2%D0%B8%D0%B4_%D0%93%D0%BE%D0%BC%D0%B5%D1%81_%D0%A0%D0%BE%D1%81%D0%B0%D0%B4%D0%BE_%D0%BA%D1%80%D0%B5%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B9_%D0%B4%D0%B8%D1%80%D0%B5%D0%BA%D1%82%D0%BE%D1%80_Groupon"></span> - Дэвид Гомес Росадо, креативный директор Groupon <span class="ez-toc-section-end"></span></h5> <p> С Webflow вам больше никогда не придется тратить время на создание мокапов.Пока вы создаете дизайн, Webflow генерирует код. HTML5, CSS3 и JavaScript генерируются безошибочно, пока вы работаете над своим дизайном. Ваш веб-сайт не только будет выглядеть именно так, как вы этого хотите, но и будет реагировать на запросы. </p> <p> В любой обстановке, будь то агентство, фрилансер или крупная компания, чем быстрее вы сможете взять концепцию и представить клиенту отзывчивый, визуально привлекательный веб-сайт, тем лучше. Быстрое создание прототипов HTML и CSS в Webflow ускорит этот процесс.И все это время, которое вы сэкономите, освободит вас от команды. </p> <h4><span class="ez-toc-section" id="%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D1%8F%D0%B9%D1%82%D0%B5_%D0%B2%D0%B7%D0%B0%D0%B8%D0%BC%D0%BE%D0%B4%D0%B5%D0%B9%D1%81%D1%82%D0%B2%D0%B8%D1%8F_%D0%B8_%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D1%8E_%D0%B1%D0%B5%D0%B7_%D0%BB%D0%B8%D1%88%D0%BD%D0%B8%D1%85_%D0%BF%D1%80%D0%BE%D0%B1%D0%BB%D0%B5%D0%BC"></span> Добавляйте взаимодействия и анимацию без лишних проблем <span class="ez-toc-section-end"></span></h4> <p> До Webflow создание анимации и взаимодействий предполагало работу с утомительным кодом или подкуп одного из ваших друзей-разработчиков пиццей (или парой сотен долларов), чтобы он сделал это за вас. С Webflow вы можете забыть о борьбе с кодом и оставить эту большую пиццу пепперони себе. </p> <p> Взаимодействие и анимация очень просты.Наши многочисленные триггеры и эффекты открывают мир возможностей дизайна, которые прекрасно работают в браузерах и на мобильных устройствах. Всего несколько щелчков мышью в нашем интуитивно понятном интерфейсе, и вы получите удовольствие от увлекательной анимации и взаимодействия, которые улучшат навигацию, а также создадут веселый и визуально захватывающий опыт для пользователя. </p> <h4><span class="ez-toc-section" id="%D0%9C%D0%B5%D0%BD%D1%8C%D1%88%D0%B5_%D0%B2%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%B8_%D0%BD%D0%B0_%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D1%83_-_%D0%B1%D0%BE%D0%BB%D1%8C%D1%88%D0%B5_%D1%82%D0%B2%D0%BE%D1%80%D1%87%D0%B5%D1%81%D1%82%D0%B2%D0%B0"></span> Меньше времени на разработку - больше творчества <span class="ez-toc-section-end"></span></h4> <p> Ваш рабочий процесс должен течь рекой, а не брызгать из крана. Webflow помогает вам двигаться вперед с помощью простых в использовании готовых компонентов, которые позволяют быстрее разрабатывать и легко стилизовать элементы.</p> <p> Предварительно созданные компоненты </p> <p> Webflow включают навигацию, ползунки, вкладки, формы, лайтбоксы и многое другое. И, конечно же, вы можете настроить каждую деталь этих компонентов, включая типографику, цвета и многое другое. Каждая деталь принадлежит вам. А с помощью нашей функции символов вы можете идеально стилизовать компоненты, а затем повторно использовать их на своем сайте одним нажатием кнопки. </p> <p> Это позволяет вам уделять больше времени тому, что действительно важно, - формированию вашего сайта в соответствии с вашим творческим видением.</p> <h4><span class="ez-toc-section" id="%D0%A3%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82%D0%BE%D0%BC_%D0%B2%D0%B8%D0%B7%D1%83%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5_%D1%83%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5"></span> Управление контентом, визуальное управление <span class="ez-toc-section-end"></span></h4> <p> Если контент - король Интернета, то ни один создатель веб-сайтов не обходится без встроенной системы управления контентом (или CMS). И хотя многие создатели веб-сайтов действительно включают CMS, они часто либо чрезвычайно ограничены (позволяя только вести блог), либо требуют обширных знаний PHP и / или языков баз данных для настройки. </p> <p> Webflow CMS отличается. </p> <p> Каким бы ни был ваш контент - будь то блог, продукты, которые вы хотите продавать, обзоры приложений, биографии членов команды, что угодно - вы можете структурировать и отформатировать его именно так, как вы хотите, даже не думая о коде.Это уровень настраиваемости, который вы не найдете в WordPress, если не являетесь разработчиком. </p> <p> Webflow также является первым конструктором веб-сайтов, который позволяет вам получить доступ к <em> и разработать его с вашим контентом </em>, так что вы можете немедленно проверить свои идеи и выявить крайние случаи. И любые изменения, которые вы вносите в контент на одной странице, автоматически распространяются на ваш сайт. </p> <h4><span class="ez-toc-section" id="%D0%91%D1%83%D0%B4%D1%8C%D1%82%D0%B5_%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D0%B5%D1%80%D0%BE%D0%BC_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2_%D0%B8_%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%BE%D0%BC"></span> Будьте дизайнером веб-сайтов и разработчиком <span class="ez-toc-section-end"></span></h4> <blockquote><p> «До Webflow… я всегда очень зависел от поиска инженера.... просить друзей о помощи и отдавать им часть своей доли, или просто не делать этого вообще. С Webflow эта проблема просто исчезла ". </p></blockquote> <h5><span class="ez-toc-section" id="-_%D0%AD%D0%B9_%D0%94%D0%B6%D0%B5%D0%B9_%D0%A8%D0%B5%D0%B2%D0%BA%D0%B8_%D0%BF%D1%80%D0%BE%D1%84%D0%B5%D1%81%D1%81%D0%B8%D0%BE%D0%BD%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9_%D0%B2%D0%B5%D0%B1-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D0%B5%D1%80"></span> - Эй Джей Шевки, профессиональный веб-дизайнер <span class="ez-toc-section-end"></span></h5> <p> Веб-дизайн и разработка не должны ограничиваться теми, кто умеет программировать. Любой, у кого есть искра творчества, должен иметь инструменты, необходимые для создания всего, что он может вообразить, - и именно поэтому мы создали Webflow. Наш создатель веб-сайтов действительно поможет вам лучше понять код и Интернет, поскольку вы увидите, как выбранный вами стиль влияет на ваш дизайн - в режиме реального времени.</p> <h4><span class="ez-toc-section" id="Webflow_-_%D0%B2%D1%81%D0%B5_%D0%B2%D0%BE%D0%B7%D0%BC%D0%BE%D0%B6%D0%BD%D0%BE%D1%81%D1%82%D0%B8_%D0%BF%D1%80%D0%BE%D1%84%D0%B5%D1%81%D1%81%D0%B8%D0%BE%D0%BD%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B3%D0%BE_%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D0%B0_%D1%83_%D0%B2%D0%B0%D1%81_%D0%BF%D0%BE%D0%B4_%D1%80%D1%83%D0%BA%D0%BE%D0%B9"></span> Webflow - все возможности профессионального дизайна у вас под рукой <span class="ez-toc-section-end"></span></h4> <blockquote><p> «Мы - создатели музыки… мы - мечтатели мечты». </p></blockquote> <h5><span class="ez-toc-section" id="%D0%92%D0%B8%D0%BB%D0%BB%D0%B8_%D0%92%D0%BE%D0%BD%D0%BA%D0%B0_%D1%80%D0%B0%D0%B7%D1%80%D1%83%D1%88%D0%B8%D1%82%D0%B5%D0%BB%D1%8C_%D0%BA%D0%BE%D0%BD%D0%B4%D0%B8%D1%82%D0%B5%D1%80%D1%81%D0%BA%D0%BE%D0%B9_%D0%BF%D1%80%D0%BE%D0%BC%D1%8B%D1%88%D0%BB%D0%B5%D0%BD%D0%BD%D0%BE%D1%81%D1%82%D0%B8"></span> Вилли Вонка, разрушитель кондитерской промышленности <span class="ez-toc-section-end"></span></h5> <p> Подобно тому, как художник может взять краску и кисти и немедленно воплотить свое художественное видение в жизнь на холсте, Webflow предоставляет вам инструменты, необходимые для создания вашего следующего шедевра веб-дизайна. </p> <p> Благодаря простому для понимания интерфейсу, готовым элементам дизайна, анимации и взаимодействиям, а также системе управления визуальным контентом, Webflow является лучшим создателем веб-сайтов для визуального создания веб-сайтов.Он позволяет создавать и запускать веб-сайты быстрее и красивее, чем когда-либо прежде. </p> <p> Webflow позволяет вам быть веб-дизайнером <em> и </em> разработчиком, так что вы можете воплотить в жизнь любые мечты, которые у вас есть, для создания веб-сайта. </p> <h4><span class="ez-toc-section" id="%D0%92%D0%B5%D0%B1-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D0%BD%D0%B5_%D0%B4%D0%BE%D0%BB%D0%B6%D0%B5%D0%BD_%D0%B1%D1%8B%D1%82%D1%8C_%D1%81%D0%BB%D0%BE%D0%B6%D0%BD%D1%8B%D0%BC_%D0%A1_Webflow_%D0%B2%D1%8B_%D0%B3%D0%BE%D1%82%D0%BE%D0%B2%D1%8B_%D0%BA_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B5"></span> Веб-дизайн не должен быть сложным. С Webflow вы готовы к работе. <span class="ez-toc-section-end"></span></h4> <p> Начните сегодня бесплатно. Вы платите только за хостинг собственного домена или расширенные функции, а после обновления вы можете быть уверены в своей 30-дневной гарантии возврата денег.</p> <h5><span class="ez-toc-section" id="%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_Webflow"></span> Что такое Webflow? <span class="ez-toc-section-end"></span></h5> <p> Основанная в 2013 году, Webflow представляет собой гибкий конструктор веб-сайтов, CMS и хостинговую платформу. Webflow, которому доверяют более 300 тысяч профессиональных дизайнеров в ведущих компаниях, таких как Pinterest, IDEO, Razorfish, Autodesk и Salesforce, позволяет легко создавать и запускать отзывчивый, четко запрограммированный и быстро загружающийся веб-сайт, который вы всегда хотели. </p> <h2><span class="ez-toc-section" id="1_%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B2%D0%B0%D1%88%D0%B5%D0%B9_%D0%BF%D0%B5%D1%80%D0%B2%D0%BE%D0%B9_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B"></span> 1. Создание вашей первой страницы <span class="ez-toc-section-end"></span></h2> <p><h3><span class="ez-toc-section" id="%D0%93%D0%BB%D0%B0%D0%B2%D0%B0_1_%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B2%D0%B0%D1%88%D0%B5%D0%B9_%D0%BF%D0%B5%D1%80%D0%B2%D0%BE%D0%B9_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B"></span> Глава 1. Создание вашей первой страницы <span class="ez-toc-section-end"></span></h3> </p> <p> Каждый веб-сайт представляет собой набор веб-страниц, поэтому неудивительно, что ваше путешествие по созданию полноценного сайта начинается <em> здесь </em>, с написание одной веб-страницы.</p> <p> Технически веб-страница - это особый тип документа, написанный на компьютерном языке, который называется <em> HTML </em> (это сокращение от языка гипертекстовой разметки). Веб-страницы написаны для веб-браузеров <em> </em> - таких программ, как Internet Explorer, Google Chrome и Safari. У этих браузеров есть простая, но чрезвычайно важная задача: они читают HTML в документе веб-страницы и отображают идеально отформатированный результат, чтобы вы могли его прочитать. </p> <p> Эта глава познакомит вас с HTML. Вы увидите, как работает простая веб-страница, и узнаете, как создать свою собственную.На данный момент вы будете работать с веб-страницами, хранящимися на вашем компьютере, которые будут видны только вам. Позже, в главе 9, вы научитесь размещать веб-страницы в Интернете, чтобы их мог видеть любой, у кого есть подключение к Интернету. </p> <p><h3><span class="ez-toc-section" id="HTML_%D1%8F%D0%B7%D1%8B%D0%BA_%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82%D0%B0"></span> HTML: язык Интернета <span class="ez-toc-section-end"></span></h3> </p> <p> HTML - самый важный стандарт в веб-дизайне, и единственный, который абсолютно <em> требует </em>, если вы планируете создать веб-страницу. Каждая веб-страница написана в HTML. Неважно, содержит ли ваша страница серию записей в блоге, дюжину изображений вашего домашнего лемура или сильно отформатированный сценарий - скорее всего, если вы просматриваете его в браузере, это HTML-страница.</p> <p> HTML играет ключевую роль на веб-страницах: он сообщает браузерам, как отображать содержимое страницы, используя специальные инструкции, называемые тегами <em> </em>, которые сообщают браузеру, когда начинать абзац, выделять слово курсивом или отображать изображение. Чтобы создавать свои собственные веб-страницы, вам нужно научиться использовать это семейство тегов. </p> <p> HTML - настолько важный стандарт, что вы потратите большую часть этой книги на изучение его функций, излишеств и случайных недостатков. Каждая создаваемая вами веб-страница будет настоящим HTML-документом.</p> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%87%D0%B0%D0%BD%D0%B8%D0%B5"></span> Примечание <span class="ez-toc-section-end"></span></h4> <p> Стандарт HTML не имеет ничего общего с тем, как веб-браузер <em> извлекает </em> страницу в Интернете. Эта задача возложена на другой стандарт, называемый HTTP (протокол передачи гипертекста), который представляет собой коммуникационную технологию, позволяющую двум компьютерам обмениваться данными через Интернет. Если использовать аналогию с телефонным разговором, телефонные провода представляют собой протокол HTTP, а пикантные сплетни, которыми вы обмениваетесь с тетей Мартой, - это документы HTML. </p> <p><h4><span class="ez-toc-section" id="%D0%92%D0%B7%D0%BB%D0%BE%D0%BC_%D0%9E%D1%82%D0%BA%D1%80%D1%8B%D1%82%D0%B8%D0%B5_%D1%84%D0%B0%D0%B9%D0%BB%D0%B0_HTML"></span> Взлом Открытие файла HTML <span class="ez-toc-section-end"></span></h4> </p> <p> Внутри HTML-страница на самом деле не более чем простой текстовый файл.Это означает, что исходный код каждой создаваемой веб-страницы будет полностью состоять из букв, цифр и нескольких специальных символов (например, пробелов, знаков препинания и всего остального, что вы можете заметить на клавиатуре). На рис. 1.1 представлен анализ обычного (и очень простого) HTML-документа. </p> <p> Вот один из секретов написания веб-страниц: вам не нужен действующий веб-сайт, чтобы начать создавать свои собственные веб-страницы. Это потому, что вы можете легко создавать и тестировать страницы, используя только свой компьютер. Фактически, вам даже не нужно подключение к Интернету.Единственные инструменты, которые вам понадобятся, - это базовый текстовый редактор и стандартный веб-браузер. </p> <p> Текстовый редактор позволяет вам создавать или редактировать HTML-файл (в окне, подобном тому, которое вы видите на Рисунке 1-1 внизу). Даже многие профессиональные веб-дизайнеры придерживаются простых инструментов для редактирования текста. Существует множество более изящных инструментов редактирования, разработанных специально для редактирования веб-сайтов, но на самом деле <em> вам не понадобится </em> ни одного из них. И если вы начнете использовать их слишком рано, вы, скорее всего, в конечном итоге утонете в море дополнительных изысков и функций, прежде чем действительно поймете, как работает HTML.</p> <p> Рисунок 1-1. Каждый документ HTML на самом деле является обычным текстовым файлом. Вверху: веб-браузер отображает простой HTML-документ, демонстрируя все его великолепное форматирование. Внизу: но когда вы открываете тот же документ в текстовом редакторе, вы видите весь текст из исходного документа, а также несколько дополнительных фрагментов информации внутри угловых скобок <code> <> </code>. Эти HTML-теги передают информацию о структуре и форматировании документа. </p> <p> Тип используемого текстового редактора зависит от операционной системы вашего компьютера: </p> <ul> <li> <p> Если у вас компьютер Windows, вы используете простой редактор Notepad.Переходим к следующему разделу. </p> </li> <li> <p> Если у вас компьютер Mac, вы используете встроенный редактор TextEdit. Но сначала вам нужно внести коррективы, описанные ниже. </p> </li> </ul> <p> Поклонникам Mac необходимо настроить способ работы TextEdit, потому что программа имеет «представление HTML», которое скрывает теги в файле HTML и вместо этого показывает отформатированную страницу. Такое поведение направлено на упрощение жизни новичков, но представляет серьезную опасность для всех, кто хочет написать настоящую веб-страницу.Чтобы избежать путаницы и убедиться, что вы пишете настоящий, необработанный HTML, вам необходимо отключить просмотр HTML. Вот как это сделать: </p> <ol type="1"> <li> <p> <strong> Выберите TextEdit </strong> → <strong> Настройки </strong>. </p> <p> Откроется окно с вкладками параметров TextEdit (рис. 1-2). </p> <p> Рисунок 1-2. В окне настроек TextEdit есть две вкладки с настройками: «Новый документ» (слева) и «Открыть и сохранить» (справа). </p> </li> <li> <p> <strong> Щелкните «Новый документ», а затем в разделе «Формат» выберите «Обычный текст.</strong> </p> <p> Это указывает TextEdit начинать вас с обычного неформатированного текста и обходиться без панели инструментов форматирования и линейки, которые в противном случае появлялись бы на экране, которые не имеют отношения к созданию файлов HTML. </p> </li> <li> <p> <strong> Нажмите «Открыть и сохранить» и включите первый параметр «Отображать файлы HTML как HTML-код вместо форматированного текста». </strong> </p> <p> Это указывает TextEdit, чтобы вы могли видеть (и редактировать) реальную разметку HTML, теги и все остальное, а не отформатированную версию страницы, как она будет отображаться в веб-браузере.</p> </li> <li> <p> <strong> Закройте окно настроек, а затем закройте TextEdit </strong>. </p> <p> Теперь, когда вы в следующий раз запустите TextEdit, вы начнете в режиме обычного текста, который использует каждый уважающий себя веб-разработчик. </p> </li> </ol> <p> Как вы, несомненно, знаете, веб-браузер - это программа, которая позволяет вам переходить и отображать веб-страницы. Без браузеров Интернет все еще существовал бы, но вы не смогли бы его увидеть. </p> <p> Работа браузера на удивление проста - на самом деле, основная часть его работы состоит из двух задач.Во-первых, он запрашивает веб-страницы, что происходит, когда вы вводите адрес веб-сайта (например, www.google.com) или щелкаете ссылку на веб-странице. Браузер отправляет этот запрос на удаленный компьютер, называемый веб-сервером <em> </em>. Сервер, как правило, намного мощнее домашнего компьютера, поскольку ему необходимо одновременно обрабатывать несколько запросов браузера. Сервер принимает во внимание эти запросы и отправляет обратно содержимое желаемых веб-страниц. </p> <p> Когда браузер получает этот контент, он задействует свой второй навык, и <em> отображает </em> или рисует веб-страницу.Технически это означает, что браузер преобразует простой текст, который он получает от сервера, в отображаемый документ на основе инструкций по форматированию, встроенных в страницу. Конечным результатом является страница с богатой графикой, с разными шрифтами, цветами и ссылками. Рисунок 1-3 иллюстрирует этот процесс. </p> <p> Рисунок 1-3. Веб-браузер предназначен для очень хороших двух вещей: связываться с удаленными компьютерами, чтобы запросить веб-страницы, а затем отображать эти страницы на вашем компьютере. </p> <p> Хотя вы обычно запрашиваете браузер для загрузки страниц из Интернета, вы также можете использовать его для просмотра веб-страницы, хранящейся на вашем компьютере, что особенно удобно, когда вы тренируете свои навыки работы с HTML.Фактически, ваш компьютер уже знает, что файлы, заканчивающиеся на <em> .htm </em> или <em> .html </em>, содержат содержимое веб-страниц. Поэтому, если вы дважды щелкните один из этих файлов, ваш компьютер автоматически запустит веб-браузер. (Вы можете получить тот же результат, перетащив файл веб-страницы в уже открытое окно браузера.) </p> <p> Хотя обычным людям нужен только один веб-браузер, это хорошая идея для обучающихся веб-разработчиков (например, себя), чтобы ознакомиться с наиболее распространенными браузерами (см. рис. 1-4).Это потому, что при разработке своего веб-сайта вам необходимо подготовиться к работе с широкой аудиторией людей с разными браузерами. Чтобы ваши красивые страницы не выглядели странными, когда на них смотрели другие люди, вам следует протестировать свой сайт с помощью различных браузеров, различных размеров экрана и операционных систем. </p> <p> В следующем списке описаны самые популярные браузеры на сегодняшний день: </p> <ul> <li> <p> <strong> Google Chrome </strong> - нынешний король веб-браузеров, несмотря на то, что это самый новый ребенок на рынке.Технически подкованным поклонникам Интернета нравятся его функции, такие как закладки, которые можно синхронизировать на разных компьютерах, и его невероятная скорость. </p> <p> Загрузите Google Chrome на www.google.com/chrome. </p> </li> <li> <p> <strong> Internet Explorer </strong> - самый долговечный браузер и официальный стандарт во многих корпоративных и правительственных средах. Это также браузер, который предустановлен в Windows, поэтому его используют люди, не являющиеся техническими специалистами, если они не хотят (или не знают, как) устанавливать что-то новое.Даже горячие веб-дизайнеры должны проверять, понимает ли Internet Explorer их страницы, потому что даже старые версии IE, такие как IE 8, остаются популярными. </p> <p> Чтобы загрузить самую последнюю версию Internet Explorer, посетите www.microsoft.com/ie. </p> <p> Рисунок 1-4. Статистика использования браузера, которая оценивает процент людей, использующих каждый из основных браузеров, варьируется в зависимости от того, какие сайты вы изучаете и как подсчитываете посетителей, но на момент написания этой статьи это одна разумная оценка. (Чтобы узнать текущую статистику использования браузера, посетите http: // tinyurl.com / stats-browsers.) </li> <li> <p> <strong> Firefox </strong> начал свою жизнь как современный ответ на Internet Explorer. Он по-прежнему впереди всех со своими невероятно гибкими надстройками <em> </em>, крошечными программами, которые другие люди разрабатывают для улучшения Firefox с дополнительными функциями, такими как уведомление веб-почты и эскизы сайтов, которые отображаются на странице результатов поиска. Лучше всего то, что армия программистов-добровольцев постоянно обновляет Firefox. </p> <p> Попробуйте Firefox на www.mozilla.org / firefox. </p> </li> <li> <p> <strong> Safari </strong> - это браузер, разработанный Apple, который поставляется с текущими версиями операционной системы Mac OS. В таких продуктах Apple, как iPhone, iPad и iPod Touch, также используется браузер Safari (хотя его мобильная версия ведет себя немного иначе). Прекрасные люди в Apple создали воплощение Safari для компьютеров с Windows, но с тех пор отказались от него, сделав Safari доступным только для Apple. </p> <p> Откройте Safari по адресу www.apple.com/safari. </p> </li> <li> <p> <strong> Opera </strong> - это упрощенный и простой в установке браузер, который существует уже более десяти лет и служит противоядием от огромных размеров и бессмысленных излишеств Internet Explorer.В течение многих лет Opera сдерживала неприятная деталь: если вы хотели версию без рекламы, вам нужно было заплатить. Сегодня Opera бесплатна и не содержит рекламы, как и другие браузеры из этого списка. У него немного, но преданных последователей, но он занимает отдаленное пятое место в рейтинге веб-браузеров. </p> <p> Посетите Opera на сайте www.opera.com. </p> </li> </ul> <p><h3><span class="ez-toc-section" id="%D0%A3%D1%87%D0%B5%D0%B1%D0%BD%D0%BE%D0%B5_%D0%BF%D0%BE%D1%81%D0%BE%D0%B1%D0%B8%D0%B5_%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D1%84%D0%B0%D0%B9%D0%BB%D0%B0_HTML"></span> Учебное пособие: создание файла HTML <span class="ez-toc-section-end"></span></h3> </p> <p> Теперь, когда вы подготовили свою веб-кухню, вы готовы создать свою собственную веб-страницу. В этом руководстве вы создадите базовую страницу, показанную на рис. 1-1.</p> <h4><span class="ez-toc-section" id="%D0%A1%D0%BE%D0%B2%D0%B5%D1%82"></span> Совет <span class="ez-toc-section-end"></span></h4> <p> Как и все учебные пособия в этой книге, вы найдете решение для этого упражнения на сопутствующем сайте http://prosetech.com/web. Просто загляните в папку с названием <em> Tutorial-1-1 </em> (что означает «Глава 1, первое руководство», если вам интересно). </p> <p> Готовы начать? Вот что нужно сделать: </p> <ol type="1"> <li> <p> <strong> Запустите текстовый редактор </strong>. </p> <p> На компьютере с Windows это Блокнот. Чтобы открыть Блокнот, нажмите кнопку «Пуск», введите «блокнот» и щелкните появившийся значок Блокнота.</p> <p> На Mac это TextEdit. Чтобы запустить его, перейдите в папку «Приложения» и дважды щелкните TextEdit. </p> <p> Когда вы загружаете текстовый редактор, он запускает вас с новым пустым документом, а это именно то, что вам нужно. </p> </li> <li> <p> <strong> Начните писать свой HTML-код </strong>. </p> <p> Эта задача немного сложна, потому что вы еще не знакомы со стандартом HTML. Погодите - до конца этой главы помощь будет готова. На данный момент вы можете использовать следующий очень простой фрагмент HTML.Просто введите его в том виде, в каком он выглядит: текст, косые черты, заостренные скобки и все остальное: </p> <pre> <h2><span class="ez-toc-section" id="United_Popsicle_Workers_Union"></span> United Popsicle Workers Union <span class="ez-toc-section-end"></span></h2> <p> Мы боремся за ваши права. </p> </pre> <p> Технически в этом двухстрочном документе отсутствуют некоторые структурные детали, которые должны иметь уважаемые веб-страницы. Однако любой браузер может прочитать этот фрагмент HTML и правильно интерпретировать то, что вы хотите: две строки форматированного текста, показанные на рис. 1-1 вверху. </p> </li> <li> <p> <strong> Когда вы закончите веб-страницу, выберите Файл </strong> → <strong> Сохранить </strong>.</p> <p> При этом открывается окно «Сохранить» или «Сохранить как», в котором вы вводите сведения о своем новом файле (рис. 1-5). </p> <p> Рисунок 1-5. Независимо от того, используете ли вы Блокнот (показан здесь) или TextEdit, в сохранении файла нет ничего сложного. Просто не забудьте включить «.htm» или «.html» в конце имени файла, чтобы идентифицировать его как документ HTML. </p> </li> <li> <p> <strong> Выберите место для сохранения файла и дайте ему имя </strong> <em> popsicles.htm </em>. </p> <p> Если вы не знаете, где хранить файл, пока можете сохранить его прямо на рабочем столе.</p> <p> При присвоении имени файлу убедитесь, что в конце имени файла указано расширение .htm или .html. Например, используя имя <em> popsicles.htm </em> или <em> popsicles.html </em>, вы гарантируете, что ваш компьютер распознает ваш документ как файл HTML. </p> <p> Примечание для параноиков: нет разницы между файлами .htm и .html. Оба они на 100% одинаковы - текстовые файлы, содержащие HTML-контент. </p> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%87%D0%B0%D0%BD%D0%B8%D0%B5-2"></span> Примечание <span class="ez-toc-section-end"></span></h4> <p> С технической точки зрения вы можете использовать любое расширение файла, какое захотите.Однако использование .htm или .html избавляет от путаницы (вы сразу понимаете, что файл является веб-страницей) и помогает избежать распространенных проблем. Например, использование расширения файла .htm или .html гарантирует, что когда вы дважды щелкните имя файла, ваш компьютер будет знать, что нужно открыть его в веб-браузере, а не в какой-либо другой программе. Также важно использовать расширение .htm или .html, если вы планируете загружать файлы на веб-сервер; колючие серверы могут отказываться выдавать страницы с нестандартными расширениями файлов. </p> </li> <li> <p> <strong> При необходимости измените способ кодирования файла в текстовом редакторе на UTF-8 </strong>.</p> <p> Это стандарт TextEdit, поэтому пользователи Mac могут пропустить этот шаг. Но в Блокноте вам нужно выбрать UTF-8 в списке «Кодировка» внизу окна «Сохранить как». </p> <p> Ваша веб-страница будет работать, даже если вы не сделаете этого шага, но это гарантирует, что у вас не возникнет проблем, если вы используете специальные символы или другой язык на своей странице. </p> </li> <li> <p> <strong> Нажмите «Сохранить», чтобы сделать его официальным </strong>. </p> <p> Если вы используете TextEdit, программа может спросить, действительно ли вы хотите использовать <em>.htm </em> или <em> .html </em> расширение вместо <em> .txt </em>, стандартного текстового файла; нажмите "Использовать .htm". В Блокноте такой шаг не требуется. Однако на самом деле вы не увидите свои HTML-файлы в списке, если не выберете «Все файлы (*. *)» В поле «Сохранить как тип» (в котором изначально выбрано «Текстовые документы (* .txt)»). </p> </li> <li> <p> <strong> Чтобы просмотреть свою работу, откройте файл в браузере (рис. 1-6) </strong>. </p> <p> Если вы используете расширение .htm или .html, открыть страницу обычно так же просто, как дважды щелкнуть имя файла.Или вы можете перетащить файл веб-страницы в открытое окно браузера. </p> <p> Рисунок 1-6. Адресная строка браузера показывает, где на самом деле находится текущая веб-страница. Если в адресе вы видите «http: //», это значит, что он исходит от веб-сервера в Интернете (вверху). Если вы посмотрите на веб-страницу, которая находится на вашем собственном компьютере, вы увидите обычный адрес локального файла (посередине, показывающий расположение файла Windows в Internet Explorer), или вы увидите URL-адрес, который начинается с префикса «file: // / ”(Внизу, где показано расположение файла в Chrome).</p> </li> <li> <p> <strong> По окончании редактирования закройте текстовый редактор </strong>. </p> <p> В следующий раз, когда вы захотите изменить документ, просто запустите текстовый редактор, выберите «Файл» → «Открыть», а затем выберите нужный файл или перетащите его в уже открытое окно текстового редактора. </p> </li> </ol> <h4><span class="ez-toc-section" id="Tip"></span> Tip <span class="ez-toc-section-end"></span></h4> <p> Вот уловка, которая поможет вам открыть HTML-файлы в спешке. Найдите свой файл, затем щелкните его правой кнопкой мыши (на Mac нажмите, удерживая клавишу Control), и выберите «Открыть с помощью». Откроется список программ, которые можно использовать для открытия файла.Щелкните Блокнот (или TextEdit) в списке, чтобы открыть новое окно текстового редактора и открыть HTML-файл одним махом. </p> <p> Если вы оставите окно веб-браузера открытым во время редактирования HTML-файла в текстовом редакторе, браузер сохранит старую версию вашего файла. Чтобы увидеть последние изменения, снова сохраните текстовый файл (выберите «Файл» → «Сохранить»), а затем обновите страницу в браузере (обычно это так же просто, как щелкнуть страницу правой кнопкой мыши и выбрать «Обновить» или «Обновить»). </p> <p><h3><span class="ez-toc-section" id="%D0%9F%D1%80%D0%BE%D1%81%D0%BC%D0%BE%D1%82%D1%80_HTML_%D0%B4%D0%B5%D0%B9%D1%81%D1%82%D0%B2%D1%83%D1%8E%D1%89%D0%B5%D0%B9_%D0%B2%D0%B5%D0%B1-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B"></span> Просмотр HTML действующей веб-страницы <span class="ez-toc-section-end"></span></h3> </p> <p> Большинство текстовых редакторов не позволяют открывать веб-страницы в Интернете.Однако веб-браузеры <em>–</em> дают вам возможность заглянуть в необработанный HTML-код, который скрывается за любой веб-страницей. </p> <p> Если вы используете Internet Explorer, Chrome, Firefox или любой другой браузер, кроме Safari, вы можете использовать ярлык. После того, как вы перейдете на веб-страницу, которую хотите изучить, щелкните правой кнопкой мыши в любом месте страницы и выберите «Просмотр исходного кода» или «Просмотр исходного кода страницы» (точная формулировка зависит от браузера). Появится новое окно, показывающее необработанный HTML-код, лежащий в основе страницы.</p> <p> Если вы используете Safari на Mac, вам нужно перепрыгнуть через лишнюю петлю, чтобы увидеть HTML-код веб-страницы. Сначала включите меню «Разработка», выбрав Safari → «Настройки» → «Дополнительно», а затем установите флажок «Показать меню разработки в строке меню». Как только вы это сделаете, посетите страницу, которую хотите проанализировать, и выберите «Разработка» → «Показать исходный код страницы». </p> <h4><span class="ez-toc-section" id="%D0%A1%D0%BE%D0%B2%D0%B5%D1%82-2"></span> Совет <span class="ez-toc-section-end"></span></h4> <p> Firefox имеет удобную функцию, которая позволяет вам сосредоточиться на <em> части </em> HTML на сложной веб-странице. Просто выделите интересующий вас текст на самой странице, щелкните его правой кнопкой мыши и выберите «Просмотреть источник выделения».</p> <p> Большинство веб-страниц значительно сложнее, чем пример <em> popsicles.htm </em>, показанный на рис. 1-1, поэтому вам нужно пройти через гораздо больше HTML-тегов, когда вы смотрите на разметку веб-страницы. Вы также, вероятно, найдете густую чащу кода JavaScript, набитого вверху страницы, лишенного всех интервалов и почти невозможного для чтения. Но даже если разметка выглядит тарабарщиной, не паникуйте. К тому времени, когда вы дочитаете эту книгу, вы сможете просмотреть груду HTML-кода, чтобы найти интересующие вас фрагменты.Фактически, профессиональные веб-разработчики часто используют технику просмотра исходного кода, чтобы проверить работу своих конкурентов. </p> <p> Теперь, когда вы знаете, как вглядываться в существующие файлы HTML и как создавать свои собственные, следующим шагом будет понимание того, что находится <em> внутри </em> среднего файла HTML. Все вращается вокруг одной концепции - <em> тегов </em>. </p> <p> HTML-теги - это инструкции по форматированию, которые сообщают браузеру, как преобразовать обычный текст во что-то визуально привлекательное. Если бы вы убрали все теги из HTML-документа, полученная страница состояла бы только из простого неформатированного текста.</p> <p> Тег можно узнать по угловым скобкам, двум специальным символам, которые выглядят следующим образом: <code> <> </code>. При создании тега вы вводите код HTML в скобках. Этот код предназначен только для обозревателя; веб-посетители никогда его не видят (если только они не используют команду «Просмотр исходного кода» для просмотра HTML-кода). По сути, код - это инструкция, которая передает браузеру информацию о том, как отформатировать следующий текст. </p> <p> Например, один простой тег - это тег <code> <b> </code>, который означает «полужирный» (по соглашению имена тегов обычно пишутся в нижнем регистре).Когда браузер встречает этот тег, он включает полужирное форматирование, которое влияет на весь текст, следующий за тегом. Вот пример: </p> <pre> Этот текст не полужирный. <b> Этот текст выделен жирным шрифтом. </pre> <p> Сам по себе тег <code> <b> </code> недостаточно хорош; он известен как начальный тег <em> </em>, что означает, что он включает некоторый эффект (в данном случае жирный шрифт). Вы соединяете большинство начальных тегов с соответствующим <em> конечным тегом </em>, который отключает <em> от эффекта </em>.</p> <p> Конечный тег можно легко распознать. Они выглядят так же, как начальные теги, за исключением того, что начинаются с косой черты. Это означает, что они начинаются так <code> </ </code> вместо этого <code> <</code>. Таким образом, конечный тег для полужирного форматирования - <code> </b> </code>. Вот пример: </p> <pre> Это не жирный шрифт. <b> Обратите внимание! </b> Теперь мы вернулись к нормальной жизни. </pre> <p> Какой браузер отображает как: </p> <blockquote> <p> Это не жирный шрифт. <strong> Обратите внимание! </strong> Теперь мы вернулись к нормальной жизни.</p> </blockquote> <p> Этот пример отражает еще один важный принцип браузеров: они всегда обрабатывают теги в том порядке, в котором вы помещаете их в свой HTML. Чтобы получить правильное форматирование полужирным шрифтом, необходимо правильно расположить теги <code> <b> </code> и <code> </b> </code>. </p> <p> Как видите, у браузера довольно простая задача. Он сканирует HTML-документ, ищет теги и включает и выключает различные настройки форматирования. Он берет все остальное (все, что не является тегом) и отображает его в окне браузера.</p> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%87%D0%B0%D0%BD%D0%B8%D0%B5-3"></span> Примечание <span class="ez-toc-section-end"></span></h4> <p> Добавление тегов к обычному тексту известно как <em> разметка </em> документа, а сами теги известны как разметка HTML <em> </em>. Когда вы смотрите на необработанный HTML, вас может заинтересовать содержимое (текст, заключенный между тегами) или разметка (сами теги). </p> <p> Большинство тегов идут парами. Когда вы используете начальный тег (например, <code> <b> </code>), вы должны включать соответствующий конечный тег (<code> </b> </code>). Эта комбинация начального и конечного тегов вместе с текстом между ними составляет HTML <em> элемент </em>.</p> <p> Вот основная идея: пара тегов создает контейнер (см. Рис. 1-7). Вы размещаете контент (например, текст) внутри этого контейнера. Например, когда вы используете теги <code> <b> </code> и <code> </b> </code>, вы создаете контейнер, который применяет полужирное форматирование к тексту внутри контейнера. При создании веб-страниц вы будете использовать разные контейнеры для обертывания разных фрагментов текста. Если вы думаете об элементах таким образом, вы никогда не забудете включить конечный тег. </p> <p> Рисунок 1-7.Чтобы получить жирный текст, вам нужно начать с правильного контейнера. Это элемент <code> <b> </code>. </p> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%87%D0%B0%D0%BD%D0%B8%D0%B5-4"></span> Примечание <span class="ez-toc-section-end"></span></h4> <p> Когда кто-то ссылается на элемент </em> <code> <b> </code> <em>, он имеет в виду весь шебанг - начальный тег, конечный тег и содержимое между ними. Когда кто-то ссылается на тег </em> <code> <b> </code> <em>, он обычно имеет в виду начальный тег, который запускает эффект. </p> <p> Конечно, без исключения жизнь не была бы такой веселой (и компьютерные книги были бы не такими толстыми).Если подойти к делу, на самом деле существует <em> двух типов элементов </em>: </p> <ul> <li> <p> <strong> Контейнерные элементы </strong>, безусловно, являются наиболее распространенным типом элементов. Они применяют форматирование к содержимому, помещенному между начальным и конечным тегами. </p> </li> <li> <p> <strong> Автономные элементы </strong> не включают и не выключают форматирование. Вместо этого они <em> вставляют </em> что-то, например изображение, на страницу. Одним из примеров является элемент <code> <br /> </code>, который вставляет разрыв строки на веб-страницу.Автономные элементы не входят в пары, как элементы-контейнеры, и вы можете услышать, что их называют <em> пустыми элементами </em>, потому что вы не можете поместить в них какой-либо текст. </p> </li> </ul> <p> В этой книге все автономные элементы включают косую черту перед закрывающим <code>> </code>, что-то вроде открывающего и закрывающего тегов в одном лице. Таким образом, вы увидите разрыв строки, записанный как <code> <br /> </code> вместо <code> <br /> </code>. Эта форма, называемая синтаксисом пустых элементов <em> </em>, удобна, поскольку четко отличает элементы контейнера от автономных элементов.Так вы никогда не запутаетесь. </p> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%87%D0%B0%D0%BD%D0%B8%D0%B5-5"></span> Примечание <span class="ez-toc-section-end"></span></h4> <p> В недалеком прошлом веб-разработчики были вынуждены использовать синтаксис пустых элементов, то есть теги, заканчивающиеся косой чертой, потому что это была официальная часть (теперь замененного) языка XHTML. . Сегодня завершающая косая черта является необязательной, поэтому автономные элементы могут использовать тот же синтаксис, что и начальные теги (что означает, что вы можете использовать, например, <code> <br /> </code> или <code> <br /> </code> для вставки разрыва строки). </p> <p> На рис. 1-8 показаны два типа элементов в перспективе.</p> <p> Рисунок 1-8. Вверху: этот фрагмент HTML показывает как элемент контейнера, так и отдельный элемент. Внизу: браузер показывает получившуюся веб-страницу. </p> <p> В предыдущем примере вы применили простой элемент <code> <b> </code>, чтобы получить полужирное форматирование. Вы помещаете текст между тегами <code> <b> </code> и <code> </b> </code>. Однако текст - не единственное, что можно поместить между начальным и конечным тегами. Вы также можете вложить один элемент <em> внутрь </em> другого. Фактически, <em> вложенных </em> элементов - обычная практика при создании веб-страниц.Он позволяет применять к тексту более подробные инструкции по стилю, объединяя все элементы форматирования в один и тот же набор инструкций. Вы также можете вкладывать элементы для создания более сложных компонентов страницы, таких как маркированные списки (см. Структурирование текста). </p> <p> Чтобы увидеть вложение в действии, вам понадобится другой элемент для работы. В этом примере рассмотрим, что произойдет, если вы хотите выделить текст <em> жирным шрифтом, а </em> - курсивом. HTML не содержит ни одного элемента для этой цели, поэтому вам нужно объединить знакомый элемент <code> <b> </code> (чтобы выделить текст полужирным шрифтом) с элементом <code> <i> </code> (чтобы выделить его курсивом).Вот пример: </p> <pre> Это <b><i>word</i> </b> выделено полужирным шрифтом и курсивом. </pre> <p> Когда браузер просматривает этот фрагмент HTML, он создает текст, который выглядит следующим образом: </p> <blockquote> <p> Это слово <strong> <em> </em> </strong> выделено полужирным шрифтом и курсивом. </p> </blockquote> <p> Между прочим, не имеет значения, поменяете ли вы порядок тегов <code> <i> </code> и <code> <b> </code>. Следующий HTML дает точно такой же результат. </p> <pre> Это <i><b>word</b> </i> выделено курсивом и полужирным шрифтом.</pre> <p> Однако вы всегда должны закрывать теги в порядке <em>, обратном </em>, в котором вы их открывали. Другими словами, если вы применяете курсивное форматирование, а затем полужирное форматирование, вы должны сначала отключить полужирное форматирование, а затем курсивное форматирование. Вот пример, который нарушает это правило: </p> <pre> Это <i><b> слово</i> </b> выделено курсивом и полужирным шрифтом. </pre> <p> Браузеры обычно могут разобраться в этом и сделать хорошее предположение о том, чего вы действительно хотите, но это опасная привычка, которая возникает при написании более сложного HTML.</p> <p> Как вы увидите в следующих главах, HTML предоставляет гораздо больше способов вложения элементов. Например, вы можете вложить один элемент в другой, а затем вложить другой элемент в <em>, </em> и так далее до бесконечности. </p> <h4><span class="ez-toc-section" id="Note"></span> Note <span class="ez-toc-section-end"></span></h4> <p> Если вы занимаетесь графическим дизайном, вам, вероятно, не терпится заполучить более мощные HTML-теги для изменения выравнивания, интервалов и шрифтов. К сожалению, в мире Интернета вы не всегда можете контролировать все, что хотите. В главе 2 содержится подробное описание, а в главе 3 представлено лучшее решение, которое называется таблицами стилей <em> </em>.</p> <p><h3><span class="ez-toc-section" id="%D0%9E%D0%B1%D1%89%D0%B8%D0%B5_%D1%81%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D1%8F_%D0%BE_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%85_HTML"></span> Общие сведения о документах HTML <span class="ez-toc-section-end"></span></h3> </p> <p> До сих пор вы рассматривали фрагменты HTML - части полного документа HTML. Это дало вам представление о том, как работает HTML, но вам нужно активизировать свою игру, прежде чем вы сможете покорить Интернет. В этом разделе вы узнаете о структуре, которая отличает фрагмент HTML от официального документа HTML. </p> <p><h4><span class="ez-toc-section" id="%D0%9E%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D1%82%D0%B8%D0%BF%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0"></span> Определение типа документа <span class="ez-toc-section-end"></span></h4> </p> <p> На заре Интернета веб-браузеры были полны причуд.При разработке веб-страниц люди должны были учитывать эти особенности. Например, браузеры могут вычислять поля вокруг плавающих текстовых блоков несколько разными способами, в результате чего страницы в одном браузере выглядят правильно, а в другом - странно. </p> <p> Спустя годы правила HTML (и CSS, стандарт таблиц стилей, о котором вы узнаете в главе 3) были формализованы. Используя эти новые правила, каждый браузер может отображать одну и ту же страницу одинаково. Но это изменение вызвало серьезную головную боль для старых браузеров, таких как Internet Explorer, которые пережили темные века HTML.Он должен был каким-то образом поддерживать новые стандарты, сохраняя при этом возможность правильно отображать существующие веб-страницы, в том числе те, которые основывались на старых особенностях. </p> <p> Интернет-сообщество остановилось на простом решении. При разработке новой современной веб-страницы вы указываете этот факт, добавляя код, называемый определением типа документа <em> </em> (DTD) или <em> doctype </em>, который идет в самом начале вашего HTML-документа (рис. 1-9). </p> <p> Рисунок 1-9. Определение типа документа (DTD) - это первая часть информации в файле HTML.Он сообщает браузеру, какой стандарт разметки вы использовали для написания страницы. </p> <p> Когда браузер обнаруживает doctype, он переключается в стандартный режим <em> </em> и отображает страницу наиболее согласованным и стандартизированным способом. Конечным результатом является то, что страница выглядит практически идентично во всех современных браузерах. </p> <p> Но когда браузер встречает HTML-документ, у которого нет документа, все ставки отключены. Internet Explorer, например, переключается в ужасный режим <em> quirks </em>, где он пытается вести себя так же, как 10 лет назад, с причудами и всем остальным.Это гарантирует, что действительно старые веб-страницы сохранят вид, который они имели при первом создании, даже если они полагаются на старые ошибки браузера, которые уже давно исправлены. К сожалению, разные браузеры по-разному ведут себя при просмотре страницы без документа. Скорее всего, вы получите текст разного размера, несогласованные поля и границы, а также неправильно расположенное содержание. По этой причине веб-страницы без доктайпов - плохая новость, и вам следует избегать их создания. </p> <p> В прошлом веб-дизайнеры использовали разные типы документов для обозначения разных версий разметки HTML (например, XHTML, HTML5 или действительно старый HTML 4.01). Но сегодня веб-разработчики почти всегда используют простой универсальный документ HTML5: </p> <pre> <! DOCTYPE html> </pre> <p> Несмотря на то, что этот тип документа был формализован как часть HTML5, каждый браузер поддерживает его, даже старые версии IE, о которых никогда не слышали. HTML5. Это потому, что универсальный тип документа ничего не говорит о том, какую версию HTML вы предпочитаете. Вместо этого он просто указывает, что язык <em> - это </em> HTML. Этот однострочный документ просто отражает истинную философию HTML - поддерживать старые и новые документы.</p> <p> Для сравнения, вот более многословный doctype для XHTML 1.0, который вы все еще можете встретить на старых веб-страницах: </p> <pre> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> </pre> <p> Даже опытным веб-разработчикам приходилось копировать тип документа XHTML 1.0 с существующей веб-страницы, чтобы избежать неправильного ввода. </p> <p> В этой книге во всех примерах используется doctype HTML5 не только потому, что это текущий стандарт, но и потому, что он подготавливает ваши страницы к будущему.Но то, что вы используете этот тип документа, не означает, что вы можете использовать все функции HTML5. Фактически, вам следует пока избегать большинства из них, если только вы не уверены, что они хорошо поддерживаются <em> всеми </em> браузерами, которые люди используют сегодня. </p> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%87%D0%B0%D0%BD%D0%B8%D0%B5-6"></span> Примечание <span class="ez-toc-section-end"></span></h4> <p> В этой книге вы будете использовать только функции HTML5, которые работают во всех современных браузерах. Но если вам интересно узнать о более экспериментальных частях языка, которые все еще не очень хорошо поддерживаются браузерами, ознакомьтесь с <em> HTML5: отсутствующее руководство </em> (O’Reilly).</p> <p> Теперь вы готовы заполнить остальную часть веб-страницы. </p> <p> Чтобы создать настоящий HTML-документ, вы начинаете с трех элементов контейнера: <code> <html> </code>, <code> <head> </code> и <code> <body> </code>. Эти три элемента работают вместе, чтобы описать базовую структуру вашей страницы: </p> <dl> <dt> <code> <html> </code> </dt> <dd> <p> Этот элемент обертывает все (кроме документа) на вашей веб-странице. </p> </dd> <dt> <code> <head> </code> </dt> <dd> <p> Этот элемент обозначает <em> заголовок </em> часть вашего документа, которая включает некоторую информацию о вашей веб-странице.Первая деталь - это заголовок - откройте свою страницу в браузере, и этот заголовок появится как заголовок на вкладке. При желании раздел <head> может также включать ссылки на таблицы стилей (о которых вы узнаете в главе 3) и файлы JavaScript (глава 14). </p> </dd> <dt> <code> <body> </code> </dt> <dd> <p> Этот элемент содержит основную часть вашей веб-страницы, включая фактическое содержимое, которое вы хотите показать миру. </p> </dd> </dl> <p> Есть только один правильный способ использовать эти три элемента на странице.Вот их правильное расположение с типом документа HTML5 в начале страницы: </p> <pre> <! DOCTYPE html> <html> <head> ... </head> <body> ... </body> </html> </pre> <p> Каждая веб-страница использует эту базовую структуру. Эллипсы (…) показывают, куда вы вставляете дополнительную информацию. Пробелы между линиями не обязательны - они нужны только для того, чтобы вам было легче увидеть структуру элемента. </p> <p> После того, как у вас есть скелет HTML, вам нужно добавить в смесь еще два элемента контейнера.Для каждой веб-страницы требуется элемент <code> <title> </code>, который находится в разделе заголовка страницы, и вам необходимо создать контейнер для текста в разделе <code> <body> </code> страницы. Один универсальный текстовый контейнер - это элемент <code> </p> <p> </code>, который представляет абзац. </p> <p> Вот элементы, которые вам нужно добавить: </p> <dl> <dt> <code> <title> </code> </dt> <dd> <p> Этот элемент устанавливает заголовок для вашей веб-страницы. В названии играет несколько ролей.Сначала веб-браузеры отображают его на вкладке браузера или в верхней части окна браузера. Во-вторых, когда посетитель добавляет вашу страницу в закладки, браузер использует название в качестве метки закладки. В-третьих, когда ваша страница появляется в веб-поиске, поисковая система обычно отображает этот заголовок в качестве первой строки результатов, за которым следует фрагмент контента со страницы. </p> </dd> <dt> <code> </p> <p> </code> </dt> <dd> <p> Обозначает абзац. Веб-браузеры не делают отступы между абзацами, но они добавляют небольшой интервал между последовательными абзацами, чтобы они были разделены.</p> </dd> </dl> <p> Вот веб-страница с этими двумя новыми ингредиентами (выделены жирным шрифтом): </p> <pre> <! DOCTYPE html> <html> <head> <strong> <code> <title> Все, что я знаю о веб-дизайне

    Если вы откроете этот документ в веб-браузере, вы обнаружите, что страница пуста, но отображается заголовок (как показано на рисунке 1-10).

    Рисунок 1-10.Когда браузер отображает веб-страницу, он показывает заголовок страницы на вкладке браузера или в верхней части окна. Но учтите: название не всегда подходит.

    В его нынешнем виде этот HTML-документ является хорошим шаблоном для будущих страниц. Базовая структура на месте; вам просто нужно изменить заголовок и добавить текст. Это задача, за которую вы возьмётесь дальше.

    Учебное пособие: создание полного HTML-документа

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

    Подсказка

    Как и все учебные пособия в этой книге, вы можете найти решение для этого упражнения на сопутствующем сайте http://prosetech.com/web. Просто загляните в папку с именем Tutorial-1-2 (сокращение от «Chapter 1, second tutorial»). По мере того, как вы создаете эту страницу, добавляя список, изображение и заголовки, она проходит несколько итераций.Учебные файлы включают отдельный файл для каждого этапа улучшения.

    Независимо от того, какую страницу вы хотите создать, вы всегда начинаете одинаково:

    1. Запустите текстовый редактор .

      Это Блокнот или TextEdit.

    2. Введите скелет HTML в новый файл .

      Это doctype, корневой элемент и два основных раздела каждой веб-страницы: и .Выглядит это так:

       
      
      
      
      
      
       

      Чтобы сэкономить время в будущем, сохраняйте эту страницу, а затем копируйте и вставляйте этот скелет HTML каждый раз при создании нового файла. Папка с учебником включает файл с именем skeleton.htm , который поможет вам в этом - он содержит doctype и три стандартных элемента HTML-страницы, но не содержит содержимого.

    3. Добавьте заголовок в раздел .

      Добавьте элемент </code> в новую строку между открывающим тегом <code> <head> </code> и закрывающим тегом <code> </head> </code>: </p> <pre> <strong> <code> <title> Hire Me!

    4. Добавьте свой контент в раздел .

      Например, предположим, вы хотите написать простую страницу резюме. Вот очень простой пример:

       
      
      
          Найми меня!   
      
      
         

      Меня зовут Ли Пак.Наймите меня в свою компанию, потому что мой рабочий номер с легкостью .

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

    5. Сохраните HTML-файл как резюме .htm и откройте его в веб-браузере .

      Если ваша страница отображается правильно (см. Рис. 1-11), вы можете быть уверены, что у вас хорошее начало.

    Рисунок 1-11. Добро пожаловать в Интернет. На этой странице не так много полезных функций HTML (и Ли, вероятно, не получится нанять), но она представляет собой одну из самых простых HTML-страниц, которые вы можете создать.

    Используя методы HTML, описанные в следующих разделах, вы можете опираться на этот пример и дать Ли лучшее резюме.Каждый раз, когда вы вносите изменения в документ в текстовом редакторе, обновляйте страницу в веб-браузере, чтобы проверить, все ли вы на правильном пути.

    Когда вы начнете создавать более подробные веб-страницы, вы быстро обнаружите, что создание страницы не так просто, как, скажем, создание страницы в Microsoft Word. Например, вы можете улучшить страницу резюме, создав список навыков. Вот разумная первая попытка:

     
    
    
     Наймите меня! 
    
    
    

    Я Ли Пак.Наймите меня в свою компанию, потому что моя работа вне пределов шепот . Мои навыки включают: * Быстрый набор текста (почти 12 слов в минуту). * Невероятная заточка карандашей. * Изобретательское оправдание. * Ведение переговоров с мировыми офицерами.

    Проблема возникает, когда вы открываете этот, казалось бы, невинный документ в своем веб-браузере (рис. 1-12).

    Рисунок 1-12. HTML игнорирует разрывы строк и последовательные пробелы, поэтому то, что выглядит как аккуратно организованный текст в вашем HTML-файле, может превратиться в беспорядочный текст, когда вы отображаете его в браузере.

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

    Допустим, вы настраиваете свою гипотетическую веб-страницу с идеальным интервалом, отступом и шириной линии для монитора вашего компьютера . Загвоздка в том, что эта страница может не так хорошо выглядеть на чужом мониторе. Например, часть текста может прокручиваться с правой стороны страницы, что затрудняет чтение. А разные мониторы - это только часть проблемы. Современные веб-страницы должны работать на различных типах устройств . Будущий босс Ли Пака может просмотреть резюме Ли на чем угодно, от новейшего широкоэкранного ноутбука до планшетного компьютера или смартфона.

    Чтобы иметь дело с этим диапазоном опций отображения, HTML использует элементы для определения структуры вашего документа. Вместо того, чтобы сообщать браузеру: «Здесь вы переходите к следующей строке, а здесь вы добавляете четыре дополнительных пробела», HTML сообщает браузеру: «Вот два абзаца и маркированный список». Браузер должен отображать страницу, используя инструкции, которые вы включаете в свой HTML.

    Чтобы исправить пример резюме, вам нужно использовать больше элементов абзаца и два новых элемента контейнера:

    Указывает начало маркированного списка, называемого неупорядоченным списком на жаргоне HTML.Список - идеальный способ подробно описать навыки Ли.

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

      . Другими словами, каждый элемент списка (

    • ) должен находиться в элементе списка (
        ).

    Вот исправленная веб-страница (показанная на рис. 1-13), где структурные элементы выделены жирным шрифтом:

     
    
    
     Наймите меня! 
    
    
       

    Я Ли Пак. Наймите меня в свою компанию, потому что моя работа вне пределов шепот .

    Мои навыки включают:

    • Быстрый набор текста (почти 12 слов в минуту).
    • Невероятная заточка карандашей.
    • Придумывание оправданий изобретательности.
    • Ведение переговоров с мирными офицерами.

    Рисунок 1-13. При наличии правильных элементов (как показано в коде на этой странице) браузер понимает структуру вашего HTML-документа и знает, как его отображать.

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

  • ) имеют отступ. Это не влияет на браузер, но упрощает просмотр структуры HTML-документа и оценку того, как браузер будет отображать его.

    Рисунок 1-14 анализирует документ HTML с помощью модели дерева . Древовидная модель - удобный способ познакомиться с анатомией веб-страницы, поскольку она сразу показывает общую структуру страницы. Однако по мере того, как ваши веб-страницы становятся более сложными, они, вероятно, станут слишком сложными для использования древовидной модели.

    Рисунок 1-14. Вот еще один способ взглянуть на созданный вами HTML-код. Модель дерева показывает, как вы вкладываете элементы HTML. Следуя стрелкам, вы увидите, что элемент верхнего уровня содержит элементы и .Внутри элемента находится элемент </code>, а внутри элемента <code> <body> </code> находятся два абзаца и маркированный список с четырьмя элементами. Если вы посмотрите на модель дерева достаточно долго, вы поймете, почему HTML называет все эти элементы «элементами-контейнерами». </p> <p> Если вы мазохист, вам не нужно использовать пробелы. Предыдущий пример в точности эквивалентен следующему гораздо менее читаемому HTML-документу: </p> <pre> <! DOCTYPE html> <html> <head> <title> Hire Me!

    я Ли Парк.Наймите меня для своей компании, потому что моя работа без шума .

    Мои навыки:

    • Быстрый набор текста (почти 12 слов в минуту).
    • Невероятная заточка карандашей.
    • Изобретательность поиск оправданий.
    • Ведение переговоров с мирными офицерами.

    Конечно, человеку почти невозможно написать такой HTML, не допустив ошибки.

    Где все картинки?

    Будь то биржевой график, логотип вашей подземной гаражной группы или подделанная фотография вашей любимой знаменитости, Интернет был бы довольно унылым без изображений. До сих пор вы видели, как поместить текст в документ HTML, но что происходит, когда вам нужно изображение?

    Хотя это может показаться удивительным, вы не можете сохранить изображение в файле HTML. Есть множество веских причин, по которым вы все равно не захотите - ваши файлы веб-страниц станут действительно большими, будет сложно изменять ваши изображения или делать с ними что-то еще, и вам будет дьявольски весело редактировать свои страницы. в текстовом редакторе, потому что данные изображения могут создать беспорядок.Решение состоит в том, чтобы сохранить ваши изображения в виде отдельных файлов, а затем связать с ними ваш HTML-документ. Таким образом, ваш браузер вытягивает изображения и размещает их именно там, где вы хотите, на своей странице.

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

    Хотя вы узнаете все, что когда-либо хотели знать о веб-графике, в главе 4, сейчас стоит рассмотреть простой пример. Чтобы попробовать это, вам понадобится готовое для Интернета изображение. (Наиболее часто поддерживаемые типы файлов изображений - это JPEG, GIF и PNG.) Если у вас нет изображения под рукой, вы можете загрузить образец изображения leepark.jpg из папки Tutorial-1-2. Вот пример элемента , который использует файл leepark.jpg :

      Lee Park Portrait  

    Как и обсуждавшийся ранее элемент
    , является автономным элементом без содержимого. По этой причине имеет смысл использовать синтаксис пустого элемента. и добавьте косую черту перед закрывающей угловой скобкой.

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

    Пример включает два атрибута, разделенных пробелом.Каждый атрибут состоит из двух частей: имени (которое сообщает браузеру, что делает атрибут) и значения (части информации, которую вы предоставляете). Имя первого атрибута - src , что является сокращением от слова «источник»; он сообщает браузеру, где взять нужное изображение. В этом примере значение атрибута src равно leepark.jpg , что является именем файла со снимком в голову Ли Пака.

    Имя второго атрибута - alt , что является сокращением от «альтернативного текста.Он сообщает браузеру, что вы хотите, чтобы он отображал текст, если он не может отображать изображение. Его значение - это текст, который вы хотите отобразить, в данном случае это «Lee Park Portrait».

    Как только вы разберетесь с элементом изображения, вы будете готовы использовать его в HTML-документе. Просто разместите его там, где это имеет смысл, внутри или после существующего абзаца:

     
    
    
     Наймите меня! 
    
    
    

    Я Ли Пак. Наймите меня в свою компанию, потому что моя работа вне пределов шепот . Lee Park Portrait

    Мои навыки включают:

    • Быстрый набор текста (почти 12 слов в минуту).
    • Невероятная заточка карандашей.
    • Изобретательное придумывание оправданий.
    • Ведение переговоров с мирными офицерами.

    На рис. 1-15 показано, где именно заканчивается изображение.

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

    Note

    В главе 4 вы узнаете о многих других приемах веб-графики, в том числе о том, как изменять их размер и обтекать их текстом.

    10 самых важных элементов (и еще несколько)

    Теперь вы достигли точки, когда вы можете создать базовый документ HTML, и у вас уже есть несколько элементов за плечами. Вы знаете основы - все, что вам осталось, - это расширить свои знания, научившись использовать больше элементов.

    HTML имеет относительно небольшой набор элементов. Скорее всего, вы будете использовать менее 25 на регулярной основе. Это ключевая часть успеха HTML, потому что он делает HTML простым языком общего доступа, понятным каждому.

    Примечание

    Вы не можете определять свои собственные элементы и использовать их в документе HTML, потому что веб-браузеры не знают, как их интерпретировать.

    Некоторые элементы, такие как элемент

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

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

    Таблица 1-1. Базовые блочные элементы.

    4

    00

    4

    7

    4914

    00

    4

    7

    4914

    7 9143

    ЭЛЕМЕНТ

    НАИМЕНОВАНИЕ

    ВИД ЭЛЕМЕНТА

    ОПИСАНИЕ

    Контейнер

    Как, вероятно, сказал вам учитель английского языка в средней школе, абзац является основной единицей для организации текста.Когда вы используете более одного элемента абзаца в строке, браузер вставляет пробел между двумя абзацами - чуть больше, чем полная пустая строка.

    ,

    ,

    ,

    ,

    ,

    Заголовок

    Контейнер

    Элементы заголовка - это хороший способ структурировать вашу страницу и выделить заголовки.Они отображают текст большими жирными буквами. Чем меньше число, тем крупнее текст, поэтому

    дает самый большой заголовок. К тому времени, когда вы дойдете до

    , заголовок уменьшится до того же размера, что и обычный текст, и

    , хотя и полужирный, на самом деле меньше обычного текста.


    Горизонтальная линия (или горизонтальная линия на языке HTML)

    Автономный

    Горизонтальная линия может помочь вам отделить один раздел вашей веб-страницы от другого .Линия автоматически соответствует ширине окна браузера. (Или, если вы поместите строку внутри другого элемента, например ячейки в таблице, она займет ширину своего контейнера.)

      ,

    Неупорядоченный список, элемент списка

    Контейнер

    Эти элементы позволяют создавать базовые маркированные списки. Браузер автоматически помещает отдельные элементы списка в отдельные строки и делает отступ для каждого из них.Для быстрого изменения темпа вы можете заменить

      на

        , чтобы получить автоматически пронумерованный список вместо маркированного списка (ol означает «упорядоченный список»).

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

    Таблица 1-2. Основные встроенные элементы.

    00

    42 9142 9143 9143 9146 9142 0

    Полужирный и курсив

    ЭЛЕМЕНТ

    НАИМЕНОВАНИЕ

    ТИП

    ОПИСАНИЕ

    1414

    Контейнер

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


    Разрыв строки

    Автономный

    Иногда все, что вам нужно, - это текст, разделенный простыми переносами строки, а не отдельными абзацами.Благодаря этому последующие строки текста будут ближе друг к другу, чем при использовании абзаца.

    Изображение

    Автономный

    Для отображения изображения внутри веб-страницы используйте этот элемент. Убедитесь, что вы указали атрибут src , чтобы указать имя файла изображения, которое вы хотите отобразить в браузере.

    Якорь

    Контейнер

    Элемент привязки является отправной точкой для создания гиперссылок, позволяющих посетителям веб-сайта переходить с одной страницы на другую.Вы узнаете об этом незаменимом элементе в главе 6.

    Чтобы образец резюме выглядел более респектабельно, вы можете использовать несколько ингредиентов из таблиц 1-1 и 1-2. На рис. 1-16 показана измененная версия веб-страницы, в которую добавлены некоторые новые элементы.

    Рисунок 1-16. Этот HTML-документ, содержащий больше заголовков, списков и горизонтальную линию, добавляет немного больше стиля резюме.

    Вот обновленный HTML с новыми заголовками и горизонтальной линией, выделенными жирным шрифтом:

     
    
    
       Наймите меня! 
    
    
      

    Наймите меня!

    Я Ли Пак.Наймите меня в свою компанию, потому что моя работа вне пределов шепот . Как доказательство моих потрясающих компьютерных навыков и монументальной работы этика, пожалуйста, оцените это электронное резюме.

    Незаменимые навыки

    Мои навыки включают:

    • Быстрый набор текста (почти 12 слов в минуту).
    • Невероятная заточка карандашей.
    • Изобретательное придумывание оправданий.
    • Ведение переговоров с мирными офицерами.

    А еще я знаю HTML!

    Предыдущий опыт работы

    У меня долгая и блестящая карьера в самых разных профессиях. Вот некоторые основные моменты:

    • 2008-2009 - работал машинисткой в ​​ Flying Fingers
    • 2010-2013 - Выполнение передовых веб-дизайнеров в Riverdale Ферма
    • 2014–2015 гг. - отмечен в главе 1 книги Создание веб-сайта: The Отсутствует руководство

    Не беспокойтесь, если в этом примере слишком много разметки, чтобы вы могли сразу ее усвоить.В следующей главе вы получите больше практики по превращению обычного текста в структурированный HTML.

    Проверка страниц на наличие ошибок

    Даже веб-дизайнер с лучшими намерениями может написать плохую разметку и нарушить правила HTML. Хотя браузеры действительно должны отлавливать эти ошибки, практически ни одна из них не справляется. Вместо этого они изо всех сил стараются игнорировать ошибки и отображать некорректные документы.

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

    К счастью, есть способ решить подобные проблемы. Вы можете использовать инструмент проверки , который читает вашу веб-страницу и проверяет ее разметку. Если вы используете профессиональный инструмент веб-дизайна, такой как Dreamweaver, вы можете использовать его встроенное средство проверки ошибок (подробности описаны в главе 5). Если вы создаете страницы вручную в текстовом редакторе, вы можете использовать бесплатный инструмент онлайн-проверки (см. Ниже).

    Вот некоторые потенциальные проблемы, которые может обнаружить валидатор:

    • Отсутствуют обязательные элементы (например, элемент ).</p> </li> <li> <p> Начальный тег контейнера без соответствующего конечного тега. </p> </li> <li> <p> Неправильно вложенные теги. </p> </li> <li> <p> Теги с отсутствующими атрибутами (например, элемент <code> <img> </code> без атрибута <code> src </code>). </p> </li> <li> <p> Элементы или контент в неправильном месте (например, текст, помещенный непосредственно в раздел <code> <head> </code>). </p> </li> </ul> <p> В Интернете можно найти множество инструментов для проверки.Следующие шаги показывают, как использовать популярный валидатор, предоставляемый организацией по стандартизации W3C (официальные владельцы языка HTML). Попробуйте это с помощью файла <em> resume.htm </em>, который вы создали во втором учебном пособии (Учебное пособие: создание полного HTML-документа). Или дайте валидатору повод для жалоб с помощью файла <em> popsicles.htm </em>, который вы создали в первом руководстве (Учебник: Создание файла HTML). Поскольку это фрагмент HTML, а не полный документ HTML, валидатор быстро пожалуется на недостающие биты, такие как требуемые элементы <code> <html> </code>, <code> <head> </code> и <code> <body> </code>.</p> <p> После того, как вы решите, что вы хотите проверить, выполните следующие действия: </p> <ol type="1"> <li> <p> <strong> Убедитесь, что ваш документ имеет тип документа </strong> (Общие сведения о документах HTML). </p> <p> Тип документа сообщает валидатору, какие правила использовать при проверке вашего документа. В этой книге мы придерживаемся универсального документа HTML5 («Базовый скелет»). </p> </li> <li> <p> <strong> В веб-браузере перейдите по адресу </strong> http://validator.w3.org (рис. 1-17). </p> <p> Валидатор W3C предоставляет вам три варианта выбора, представленных тремя вкладками: Проверить по URI (для страницы, которая уже находится в сети), Подтвердить по загрузке файла (для страницы, которая хранится на вашем компьютере) и Проверить с помощью прямого ввода (для разметки вы вводите прямо в предоставленное поле).</p> <p> Рисунок 1-17. На веб-сайте http://validator.w3.org есть три варианта проверки HTML. Вы можете ввести адрес страницы в Интернете, вы можете загрузить свой собственный файл (показанный здесь) или ввести разметку напрямую. </li> <li> <p> <strong> Щелкните нужную вкладку и введите содержимое HTML </strong>. </p> <p> <strong> Проверить по URI </strong> позволяет проверить существующую веб-страницу. Просто введите URL-адрес (это полный Интернет-адрес) страницы в поле «Адрес» (например, www.MySloppySite.com/FlawedPage.html). </p> <p> <strong> Подтвердить загрузкой файла </strong> позволяет загружать любой файл с вашего компьютера. Сначала нажмите кнопку «Обзор» (которая называется «Выбрать файл в Chrome»), чтобы увидеть стандартное диалоговое окно «Открыть». Перейдите к местоположению вашего HTML-файла, выберите его и нажмите «Открыть». Это самый простой способ убедиться, что вы все правильно поняли со страницей <em> resume.htm </em>, которую вы создали ранее. </p> <p> <strong> Проверка прямым вводом </strong> позволяет проверять любую разметку - вам просто нужно ввести ее в предоставленное большое поле.Самый простой способ использовать эту опцию - скопировать разметку из текстового редактора и вставить ее в поле. </p> <p> Перед тем, как продолжить, вы можете щелкнуть «Дополнительные параметры» в любом из окон с вкладками, чтобы установить другие параметры, но вы, вероятно, этого не сделаете. Лучше всего позволить валидатору автоматически определять тип документа; Таким образом, валидатор будет использовать тип документа, указанный на вашей веб-странице. Точно так же оставьте параметр «Кодировка символов» установленным на «обнаруживать автоматически», если вы не написали свою страницу не на английском языке, и у валидатора возникнут проблемы с определением правильного набора символов.</p> </li> <li> <p> <strong> Нажмите кнопку «Проверить» </strong>. </p> <p> После небольшой задержки валидатор сообщает, прошел ли ваш документ проверку валидации или, в случае неудачи, какие ошибки обнаружил валидатор (см. Рисунок 1-18). </p> <p> Валидатор также может предложить несколько безобидных предупреждений для совершенно корректного HTML-документа, включая предупреждение о том, что кодировка символов была определена автоматически, и предупреждение о том, что служба проверки HTML5 считается экспериментальной, незаконченной функцией.</p> </li> </ol> <p> Рисунок 1-18. В этом файле валидатор обнаружил 10 ошибок, связанных с двумя ошибками. Во-первых, на странице отсутствует обязательный элемент <code> <title> </code>. Во-вторых, он закрывает элемент <code> </p> <li> </code> перед закрытием элемента <code> <b> </code>, вложенного внутрь. (Чтобы решить эту проблему, замените <code> </li> <p> </b> </code> на <code> </b> </li> <p> </code>.) Между прочим, этот файл все еще достаточно близок, чтобы исправить, что браузеры могут отображать его правильно.</p> <h2><span class="ez-toc-section" id="%D0%9A%D0%B0%D0%BA_%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D1%82%D1%8C_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82_%D1%81_%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E_HTML_%D0%B8_CSS_%D0%B7%D0%B0_7_%D1%88%D0%B0%D0%B3%D0%BE%D0%B2_%E2%80%A2_%D0%9A%D0%BE%D0%B4_%D0%B4%D0%BB%D1%8F_%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82%D0%B0"></span> Как создать веб-сайт с помощью HTML и CSS за 7 шагов • Код для Интернета <span class="ez-toc-section-end"></span></h2> <p> Часто при создании веб-сайта это может быть утомительно. В этой статье я покажу вам, как подойти к созданию веб-сайта с нуля ... </p> <h3><span class="ez-toc-section" id="%D0%9F%D1%80%D0%BE%D1%81%D1%82%D0%BE_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%87%D0%B0%D0%BD%D0%B8%D0%B5"></span> Просто примечание ... <span class="ez-toc-section-end"></span></h3> <p> Эта статья больше посвящена процессу создания веб-сайта, а не технической стороне вещей. Если вы пришли сюда, потому что хотите научиться программировать веб-сайты, посмотрите статью «Как научиться веб-разработке» или мою серию статей по изучению HTML.</p> <h3><span class="ez-toc-section" id="%D0%9E%D0%BA%D0%BE%D0%BD%D1%87%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9_%D0%BF%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82"></span> Окончательный продукт <span class="ez-toc-section-end"></span></h3> <p> Вот конечный продукт сайта, который я буду создавать сегодня. Взгляните на это и помните, пока мы будем проходить обучение. </p> <p> К сожалению, ваш браузер не поддерживает встроенные видео. </p> <p> Это будет вымышленный сайт о ламе Боберике (иногда у меня возникают самые странные идеи ...) </p> <h3><span class="ez-toc-section" id="1_%D0%A1%D0%BF%D0%BB%D0%B0%D0%BD%D0%B8%D1%80%D1%83%D0%B9%D1%82%D0%B5_%D1%81%D0%B2%D0%BE%D0%B9_%D0%BC%D0%B0%D0%BA%D0%B5%D1%82"></span> 1. Спланируйте свой макет <span class="ez-toc-section-end"></span></h3> <p> Первый шаг любого веб-сайта - всегда знать, что вы хотите от него и (смутно) как вы хотите, чтобы это выглядело.Итак, первым делом нужно сделать набросок - на бумаге или на компьютере, в зависимости от того, что вам будет проще. </p> <p> Помните, <em> <strong> не обязательно хорошо выглядеть. </strong> </em> Вот мой: </p> <p> Как видите, <em> очень грубый </em>. Линии неровные и ровные, но я все еще вижу, как будет выглядеть сайт и какие разделы мне нужны. </p> <p> В этом макете у меня есть заголовок (панель навигации), три раздела и нижний колонтитул. </p> <h3><span class="ez-toc-section" id="2%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%B8%D1%82%D0%B5_%22%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%BD%D1%8B%D0%B9_%D0%BA%D0%BE%D0%B4%22"></span> 2.Установите "шаблонный код" <span class="ez-toc-section-end"></span></h3> <p> Теперь пора получить базовый код, который у вас есть в начале любого веб-сайта (обычно его называют шаблоном <em> </em>). </p> <p> Сделайте это с помощью: </p> <ol> <li> Создание новой папки на вашем компьютере для веб-сайта </li> <li> Создайте новые пустые файлы <code> index.html </code> и <code> style.css </code> внутри </li> <li> Добавьте базовый «шаблонный код» в ваш индекс <code> .html </code> файл: </li> </ol> <pre> <code> <! DOCTYPE html> <html> <head> <title> Лама Боберик

      Просто проверяю, как это работает!

      Наконец, откройте свой index.html в веб-браузере, чтобы проверить, все ли работает:

      Эта статья будет больше об объяснении процесса создания веб-сайта, поэтому я не буду объяснять фактический код в деталь - но вы все равно можете следить за ней, если хотите.

      Если да, то для начала следуйте инструкциям выше!

      3.Создайте элементы в вашем макете

      Теперь пришло время создать элементы макета / сечения, которые вы запланировали на шаге 1!

      Лучший способ сделать это - использовать семантические элементы:

      ,
      ,

      и

      .

      Вот HTML:

        
      
          
               Лама Боберик 
              
          
          
              <заголовок>
                  
              
      <основной> <раздел>
<раздел> <раздел> <нижний колонтитул>

Обратите внимание, что мы даем

s id s, поэтому мы можем обратиться к ним позже.

Если вы перезагрузите страницу, вы увидите, что там ничего нет - это потому, что мы просто создаем разделы страницы, а не сам материал в них.

4. Заполните HTML-контент

Когда у вас есть разделы страницы, самое время их заполнить! Если вы знаете, какой контент вы собираетесь использовать, вставьте его. Если нет, вставьте какой-нибудь фиктивный текст и позже замените его фактическим контентом.

Вот HTML после заполнения некоторого содержания:

  

    
         Лама Боберик 
        
    

    
        <заголовок>
            
            
        
        <основной>
            <раздел>
                

Привет, я лама Боберик.

<раздел>

Обо мне

Я действительно классная лама. Каждый день я просыпаюсь, жую траву, пишу код и снова засыпаю.

Достижения

  • Бакалавр фотогеничного позирования, 2010 г.
  • Сертификат ламанства от Llama Institute, 2014 г.
  • Я написал код для веб-сайта, 2017 г.
<раздел>

Свяжитесь со мной

Вы можете найти меня на:

Или вы можете отправить мне письмо по электронной почте .

<нижний колонтитул> © Авторские права Боберик Лама, 2017

Если вы перезагрузите страницу, вы увидите, что теперь у нас есть контент!

5.Добавьте базовый макет CSS

Когда мы закончили с HTML, пора переходить к CSS! Первая и самая важная часть, на которой нужно сосредоточиться в первую очередь, - это сделать его похожим на наш макет, а затем мы можем сосредоточиться на деталях.

Это означает, что нам нужно сосредоточиться на таких свойствах, как ширина , высота , поле , отступ , положение и отображение . Кроме того, нам нужно убедиться, что изображения имеют правильный размер, чтобы они не стирали страницу.

Вот CSS, который мы добавим в наш style.css :

  body {
    маржа: 0;
    маржа сверху: 50 пикселей;
}

header {
    дисплей: гибкий;
    положение: фиксированное;
    верх: 0;
    слева: 0;
    справа: 0;
    высота: 50 пикселей;
    высота строки: 50 пикселей;
    цвет фона: #eee;
}

header * {
    дисплей: встроенный;
    высота: 50 пикселей;
}

header ul {
    отступ: 0;
}

header li {
    маржа слева: 20 пикселей;
}

раздел {
    высота: 100vh;
    граница: сплошной черный 1px;
    дисплей: гибкий;
    justify-content: center;
    align-items: center;
    выравнивание текста: центр;
}

#hero.profile-img {
    ширина: 300 пикселей;
}

нижний колонтитул {
    выравнивание текста: центр;
    отступ: 50 пикселей;
}
  

Здесь мы добавляем стили только для того, чтобы наш общий макет выглядел похожим, а не отдельный контент. Мы следим за тем, чтобы секции были установлены на 100% высоту области просмотра, чтобы заголовок имел фиксированное положение, позиционировал элементы в заголовке и т. Д. Мы также используем гибкие блоки для центрирования содержимого в наших разделах.

Это результат:

К сожалению, ваш браузер не поддерживает встроенные видео.

6. Добавьте более специфические стили

Когда базовая структура сайта готова, мы можем добавить более специфические стили.

Теперь мы можем сделать наш сайт лучше!

Вот наш CSS:

  body {
    маржа: 0;
    маржа сверху: 50 пикселей;
    семейство шрифтов: без засечек;
}

header {
    дисплей: гибкий;
    положение: фиксированное;
    верх: 0;
    слева: 0;
    справа: 0;
    высота: 50 пикселей;
    высота строки: 50 пикселей;
    цвет фона: #eee;
}

header * {
    дисплей: встроенный;
    высота: 50 пикселей;
}

header ul {
    отступ: 0;
}

header li {
    маржа слева: 20 пикселей;
}

раздел {
    высота: 100vh;
    граница: сплошной черный 1px;
    дисплей: гибкий;
    justify-content: center;
    align-items: center;
    выравнивание текста: центр;
}

#hero.profile-img {
    ширина: 300 пикселей;
    радиус границы: 50%;
}

нижний колонтитул {
    выравнивание текста: центр;
    отступ: 50 пикселей;
}



#hero h2 {
    размер шрифта: 3em;
}

section h3 {
    размер шрифта: 2.5em;
}

section h4 {
    размер шрифта: 1.5em;
}

header a {
    текстовое оформление: нет;
    черный цвет;
}
  

Как видите, мы увеличили заголовок, скруглили изображение (используя радиус границы ) и изменили шрифт. Мы также удалили некоторые стили по умолчанию из ссылок заголовка.

Вот результат:

К сожалению, ваш браузер не поддерживает встроенные видео.

7. Добавьте цвета и фон

Ура, мы на финише! Пришло время добавить последние штрихи к нашему сайту - цвета и фоны!

Это то, что сделает наш сайт действительно потрясающим.

Вот код CSS:

  body {
    маржа: 0;
    маржа сверху: 50 пикселей;
    семейство шрифтов: без засечек;
}

header {
    дисплей: гибкий;
    положение: фиксированное;
    верх: 0;
    слева: 0;
    справа: 0;
    высота: 50 пикселей;
    высота строки: 50 пикселей;
    цвет фона: #eee;
}

header * {
    дисплей: встроенный;
    высота: 50 пикселей;
}

header ul {
    отступ: 0;
}

header li {
    маржа слева: 20 пикселей;
}

раздел {
    высота: 100vh;
    граница: сплошной черный 1px;
    дисплей: гибкий;
    justify-content: center;
    align-items: center;
    выравнивание текста: центр;
    
    размер фона: обложка;
    background-position: center center;
    фон-повтор: без повторения;
    background-attachment: исправлено;
}

#hero.profile-img {
    ширина: 300 пикселей;
    радиус границы: 50%;
}

нижний колонтитул {
    выравнивание текста: центр;
    отступ: 50 пикселей;
}

#hero h2 {
    размер шрифта: 3em;
}

section h3 {
    размер шрифта: 2.5em;
}

section h4 {
    размер шрифта: 1.5em;
}

header a {
    текстовое оформление: нет;
    черный цвет;
}



#hero {
    background-image: linear-gradient (rgba (255,255,255,0.75), rgba (255,255,255,0.75)), url ('https://codetheweb.blog/assets/img/posts/steps-to-creating-a-website/ field.jpg ');
}

#о {
    фоновое изображение: линейный градиент (rgba (255,255,255,0.75), rgba (255,255,255,0.75)), url ('https://codetheweb.blog/assets/img/posts/steps-to-creating-a-website/beach.jpg');
}

#контакт {
    background-image: linear-gradient (rgba (255,255,255,0.75), rgba (255,255,255,0.75)), url ('https://codetheweb.blog/assets/img/posts/steps-to-creating-a-website/ canyon.jpg ');
}
  

Как видите, мы добавили некоторые общие стили фона к элементам раздела , а также добавили фоновое изображение в каждый раздел по отдельности.

Причина линейного градиента (rgba (255,255,255,0,75), rgba (255,255,255,0,75)), перед URL-адресом ('image.jpg') заключается в том, что в противном случае текст трудно читать - поэтому добавляем сверху полупрозрачную белую накладку. Я написал немного больше об этом в своей статье о том, как создать изображение героя на всю страницу.

8. Празднуйте! 🎉

Ура! Наконец-то ваш сайт готов! Теперь покажите это своим друзьям, семье и всему Интернету 😉

Дополнительная литература

Если вы хотите узнать больше о конкретном разделе того, что я показывал сегодня, посмотрите:

  1. Как создать полную -page hero image
  2. Как стилизовать панель навигации с помощью CSS

Заключение

Итак, я надеюсь, вам понравилась эта статья, и, надеюсь, вы кое-что узнали в процессе!

Сегодня я сделал кое-что отличное от обычного, так что поделитесь своими мыслями.Помните, что эта статья не столько о том, как я показываю вам настоящие технические части создания веб-сайта, сколько о том, как провести вас через мыслительный процесс создания веб-сайта.

Если вам понравилась эта статья, будьте отличным человеком и поделитесь новостной рассылкой или подпишитесь на нее, я дам вам бесплатный тако 🌮 (не совсем)

Развлекайтесь, продолжайте кодировать, и я увижу вас в следующий раз, где «Я буду говорить о том, как стилизовать панель навигации (заголовок) с помощью CSS - я покажу вам панель навигации, которую мы создали сегодня, но более подробно.Увидимся позже!

Эту статью предложила Алиса Дубик-Уилсон - спасибо! Если вы также хотите предложить статью, вы можете связаться со мной или рассказать в комментариях.

Как создать код для вашего собственного веб-сайта

Мысль о создании веб-сайта с нуля может быть несколько пугающей для новичков. Но этого не должно быть. Фактически, кодирование базового веб-сайта может быть чрезвычайно простым, если вы знаете несколько тегов HTML.

Здесь я покажу вам, как создать код для вашего собственного веб-сайта, а затем опубликовать его в Интернете.Это тоже не займет много времени. Как вы скоро обнаружите, создать собственный веб-сайт намного проще, чем кажется!

Что такое веб-сайт?

Прежде чем мы создадим собственный веб-сайт, мы должны понять, что на самом деле представляет собой веб-сайт.

Веб-сайт - это просто набор веб-страниц. Веб-страницы обычно связаны между собой, но не всегда. Чтобы создать веб-сайт, вы просто создаете одну или несколько веб-страниц.

Чтобы мир мог его увидеть, веб-сайт (или набор веб-страниц) должен быть размещен на веб-сервере.Этот веб-хостинг обычно осуществляется хостинг-провайдером (также известным как хостинговая компания или веб-хостинг ). Хостинг-провайдер - это просто компания, которая предоставляет своим клиентам веб-хостинг.

Что такое веб-страница?

Веб-страница - это текстовый файл, содержащий комбинацию текста и кода «разметки». Когда документ просматривается в веб-браузере, он отображается (или «обрабатывается»), как задумано. Когда он просматривается в текстовом редакторе (таком как Блокнот), он отображает текст и код разметки.

Следовательно, веб-страница состоит из 2 просмотров:

  • «Визуализированное» представление - это то, что вы видите, когда просматриваете веб-страницу в своем браузере.
  • Представление «Исходный код» - это «закулисный» код, который определяет содержимое и способ отображения страницы.

Вы можете просмотреть исходный код любой веб-страницы в Интернете. Исходный код обычно открывается в новой вкладке.

Для этого воспользуйтесь функцией браузера Просмотр исходного кода страницы .Например, если вы используете Google Chrome, выберите View> Developer> View Source . Если вы используете Firefox, выберите Инструменты > Веб-разработчик> Источник страницы . В зависимости от вашего устройства и браузера вы также можете щелкнуть правой кнопкой мыши в любом месте страницы, чтобы вызвать опцию Просмотр исходного кода .

Существуют также другие варианты просмотра исходного кода страницы, такие как Inspect Element , который позволяет открывать исходный код на боковой панели с выделенным элементом в исходном коде.Разработчики часто используют это при отладке своих веб-сайтов.

Исходный код веб-страницы состоит из тегов HTML. Некоторые теги являются обязательными (все веб-страницы должны их использовать), но большинство тегов являются необязательными. Фактические теги, которые вы используете, будут зависеть от контента, который вы хотите отображать.

Взгляните на следующий код.

Пример кода 1:








Приведенный выше код может быть шаблоном для любой веб-страницы.Если вы просматриваете исходный код любой веб-страницы, вы должны найти эти теги. Возможно, вам придется поискать их, но они должны быть там.

Вы должны увидеть тег html вверху и внизу. Это связано с тем, что все остальные теги HTML должны располагаться между тегами html и . (Единственным исключением является тег , который указывает версию HTML / XHTML, которую использует документ. Мы не будем вдаваться в подробности этого тега, но если вам интересно, вот дополнительная информация ).

Тег body содержит весь контент, отображаемый на странице. Например, если вы хотите отобразить слова «Добро пожаловать на мою веб-страницу», вам нужно будет поместить их между тегами body и / body .

Вот еще пример. На этот раз давайте добавим немного контента.

Пример кода 2:




Привет, мир!

Моя первая веб-страница

Добро пожаловать на мою первую веб-страницу!

Вот новый абзац...


Если вы откроете указанный выше HTML-файл в браузере, он должен выглядеть примерно так:

Как видите, любой текст в окружении h2 и / h2 отображается как заголовок (точнее, заголовок уровня 1). Текст в тегах p отображается как обычный текст абзаца. Вы можете добавить на веб-страницу столько HTML-тегов, сколько захотите.

HTML-тегов намного больше (более 100). Некоторые теги используются для форматирования (например, h2 ), другие теги используются для отображения объектов (таких как изображения, формы, таблицы и т. Д.).

Как использовать этот код?

Пока что я показал вам код, используемый для создания базовой веб-страницы. Я также показал вам, как эта веб-страница выглядит в браузере. Сейчас я покажу вам, как это сделать самому.

Чтобы создать веб-страницу, подобную приведенному выше примеру, выполните следующие действия:

  1. Откройте текстовый редактор (например, «Блокнот» или «Простой текст») или редактор HTML.
  2. Откройте новую (пустую) страницу (например, Файл> Создать... )
  3. Скопируйте код из Пример кода 2 и вставьте его в пустой текстовый файл (или введите его повторно, если хотите)
  4. Сохраните файл как index.html (обратите внимание, где вы его сохранили)

Поздравляем! Вы только что создали свою первую веб-страницу!

Теперь вы можете продолжить и просмотреть свою новую веб-страницу в своем браузере. Для этого можно дважды щелкнуть файл. Если это не сработает, попробуйте открыть новое окно браузера, а затем перетащите в него файл.В противном случае, в зависимости от вашего браузера, вы сможете выбрать Файл> Открыть ...

Добавление другой веб-страницы

Добавить еще одну веб-страницу так же просто, как создать первую. Фактически, вы можете просто сделать копию своей первой, если хотите, а затем изменить ее по своему усмотрению. Например, вы можете создать гиперссылку, чтобы две страницы были связаны. Таким образом, щелкнув ссылку, вы откроете другую страницу.

Итак, давайте создадим еще одну веб-страницу.На этой веб-странице у нас будет гиперссылка, указывающая на нашу первую веб-страницу. Для этого наш код будет выглядеть примерно так.

Пример кода 3:




Привет, мир!

Моя вторая веб-страница

Добро пожаловать на мою вторую веб-страницу!

Вот моя первая веб-страница


Приведенная выше HTML-страница в браузере будет выглядеть так:

Итак, вперед - создайте вторую веб-страницу. На этот раз назовите его, скажем ... page_two.html .

Итак, если вы забыли, как это сделать, вот шаги для создания вашей второй веб-страницы:

  1. Откройте текстовый редактор (например, Блокнот или простой текст)
  2. Откройте новую (пустую) страницу (например, Файл> Создать... )
  3. Скопируйте код из Пример кода 3 и вставьте его в пустой текстовый файл (или введите его повторно, если хотите)
  4. Сохраните файл как page_two.html (сохраните его в том же каталоге, что и предыдущий файл)

Поздравляем! Вы только что создали вторую веб-страницу. Можно сказать, что вы создали свой первый сайт!

Добавление дополнительного контента на вашу веб-страницу

Теперь, когда вы создали свой первый веб-сайт, вы можете добавить столько контента, сколько захотите.Например, вы можете добавить больше текста и отформатировать его, вы можете добавить элементы формы, изображения и многое другое.

Quackit предоставляет множество HTML-кодов, которые вы можете копировать и вставлять на свои собственные веб-страницы. Они доступны в библиотеке кода HTML и на странице примеров HTML.

Не стесняйтесь копировать / вставлять любой из этих HTML-кодов на свою собственную веб-страницу и изменять их по своему усмотрению. Не бойтесь экспериментировать.

Готовы опубликовать свой сайт?

Все, что вы сделали до сих пор, было на вашем локальном компьютере.Единственные люди, которые могут просматривать вашу веб-страницу, - это те, у кого есть доступ к вашему компьютеру.

Чтобы опубликовать свой веб-сайт для всеобщего обозрения, вам необходимо «загрузить» свой веб-сайт на сервер поставщика услуг хостинга веб-сайтов. Для этого вам необходимо открыть учетную запись у провайдера веб-хостинга. Как только вы это сделаете, вы сможете дать свой собственный адрес в зоне «.com» всем, кого вы хотите просмотреть на своем веб-сайте.

Обычно просто открыть учетную запись хостинга. Часто самое сложное - решить, какой план хостинга использовать.Если вы только начинаете, обычно достаточно базового плана хостинга.

Итак, чтобы опубликовать свой сайт, вам просто нужно:

  1. Открыть счет у хостинг-провайдера
  2. Загрузите свои веб-страницы (ваш веб-хостинг объяснит, как это сделать после регистрации)

Это так просто!

Наш партнерский сайт, ZappyHost, предлагает отличные планы хостинга как для новичков, так и для профессионалов. (Полное раскрытие информации: ZappyHost является партнерским сайтом, и я получаю комиссию от продаж любых продуктов).

На данный момент плана Linux Economy должно быть более чем достаточно. Это самый дешевый план, но вы получаете множество функций и достаточно места на диске. Если у вас много фотографий / изображений для вашего веб-сайта, вам может быть лучше выбрать план Deluxe или Premium, так как эти планы предоставляют гораздо больше места на диске.

Если вы предпочитаете сначала делать покупки, ознакомьтесь с моим Руководством по веб-хостингу. В этом руководстве более подробно объясняется, что такое веб-хостинг и как выбрать хостинг-провайдера.

Конструкторы веб-сайтов в Интернете

Я понимаю, что не все хотят тратить время на изучение HTML и т. Д., Чтобы создать свой собственный веб-сайт. Многим людям просто нужно как можно скорее запустить веб-сайт, не вдаваясь в технические подробности!

Если это похоже на вас, этот онлайн-конструктор сайтов от ZappyHost был создан специально для вас! Это инструмент, который позволяет создать веб-сайт за считанные минуты. Просто выберите шаблон, добавьте контент. Это так просто. Конечно, вы можете настроить свой шаблон, загрузив свои собственные изображения или выбрав из тысяч стоковых фотографий.

И получите этот ... хостинг и доменное имя включено абсолютно БЕСПЛАТНО! Если вам нравится это звучание, посмотрите!

(Полное раскрытие информации: ZappyHost является партнерским сайтом, и я получаю комиссию от продажи любых продуктов).

Дополнительные ресурсы

Здесь, в Quackit, вы найдете тысячи страниц полезной информации о создании веб-сайтов. Ниже приведены некоторые из них, которые могут оказаться полезными для создания собственного веб-сайта:

  • Учебное пособие по созданию веб-сайта описывает два основных подхода к созданию веб-сайта (т.е. запрограммируйте сами или воспользуйтесь конструктором сайтов). В этой статье показано, как сэкономить деньги на учетной записи конструктора веб-сайтов, а также получить в процессе бесплатное доменное имя!
  • The Build a Website Tutorial - отличная страница для добавления в закладки. Это основная отправная точка для всех руководств по разработке веб-сайтов.
  • Как уже упоминалось, у нас есть коды HTML для копирования / вставки и примеры HTML, которые можно использовать для копирования и вставки на свои собственные веб-страницы.
  • И вы всегда можете посетить домашнюю страницу Quackit, чтобы быстро взглянуть на то, что вы можете найти на Quackit

Лучший бесплатный конструктор сайтов 2021

Раньше создание веб-сайтов было делом (geddit?) Профессиональных дизайнеров и программистов, но теперь, благодаря бесплатным приложениям для создания веб-сайтов, с этим может справиться каждый.

Мы уже представили лучшее программное обеспечение для создания веб-сайтов, которое включает платные услуги с широчайшим набором функций. Однако есть несколько хороших бесплатных конструкторов сайтов.

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

Мы собрали лучшие из доступных бесплатных конструкторов веб-сайтов, включая как автономное программное обеспечение, так и онлайн-инструменты.

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

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


Топ-3 услуг по созданию веб-сайтов в целом

2. Web.com - серьезный, качественный конструктор сайтов
Web.com предлагает конструктор веб-сайтов, который очень прост в использовании и идеально подходит для новичков, позволяя любому быстро создать свой сайт. Благодаря первоклассной поддержке и минимальным ценам он отлично подходит для тех, кто ищет доступного, но способного партнера. Это 50% скидка в первый месяц, начиная с $ 1,95. Посмотреть сделку

3. Gator - отличный сервис для создания веб-сайтов
Gator Site Builder от Hostgator имеет великолепно дешевый стартовый пакет с бесплатным хостингом и включенное доменное имя, а также бесплатный сертификат SSL.Вы также получаете постоянно доступную поддержку клиентов и преимущества аналитики веб-сайтов: все со скидкой 50%, что означает, что вы платите всего 3,84 доллара в месяц. Посмотреть предложение


Вот лучшие бесплатные конструкторы веб-сайтов 2021 года

Wix делает создать веб-сайт очень легко, но при этом у экспертов есть много возможностей для настройки элементов, если они в этом нуждаются.

1. Wix

Лучший бесплатный конструктор веб-сайтов

Причины для покупки

+ Очень удобный редактор ADI + Но эксперты могут настроить все + Мощный и хорошо оснащенный

Wix - это известный конструктор веб-сайтов, который предлагает бесплатный тарифный план, позволяющий запускать эту услугу, не кладя руку в карман.И вы получаете выгоду от работы одного из самых впечатляющих редакторов веб-сайтов в отрасли.

Этот редактор может быть запущен в режиме ADI (искусственный интеллект дизайна), который имеет очень простой интерфейс, чтобы все было действительно простым и удобным для пользователя. Это отлично подходит для новичков, так как вы можете создать базовый сайт, даже не беспокоясь удаленно (также предоставляется ряд привлекательных шаблонов).

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

Wix настолько отточен, что создание вашего сайта с помощью редактора больше похоже на использование собственного приложения, а не конструктора веб-сайтов, и он также обеспечивает отличную поддержку широкого спектра мультимедиа, а также качественную поддержку клиентов, даже на бесплатный план. Кроме того, недавно был выпущен Wix Turbo, который улучшает производительность и скорость всех веб-сайтов Wix.

Мощные функции ведения блогов дополняют все, и вы получаете действительно высококачественное предложение с этим бесплатным конструктором сайтов.

Прочтите наш обзор Wix здесь.

(Изображение предоставлено: Постоянный контакт)

2. Постоянный контакт

Конструктор веб-сайтов с функцией электронной коммерции

Причины для покупки

+ Простая настройка + Бесплатный уровень + Вариант электронного маркетинга

Причины, по которым следует избегать

-Publishing требует оплаты

Constant Contact предоставляет интеллектуальный конструктор веб-сайтов и платформу для интернет-магазинов, которые можно использовать бесплатно.

Создать веб-сайт легко с помощью функции перетаскивания, что позволяет легко и просто настроить дизайн и добавить необходимые функции.

Настройки автоматически оптимизируются для мобильных платформ и SEO. В пакет входит бесплатная библиотека изображений с более чем 50 000 изображений.

Платформа электронной коммерции позволяет совершать онлайн-платежи через Paypal, Mollie или Stripe. Существуют функции заказа и инвентаризации, которые автоматически обновляют инвентарь с помощью заказов и отправляют уведомление по электронной почте, когда товары заканчиваются.

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

В целом, Constant Contact хорошо справляется с настройкой основ. Бесплатный план - отличный способ настроить свой веб-сайт, но если вы хотите опубликовать веб-сайт, вам нужно будет заплатить.

Прочтите наш обзор Constant Contact здесь.

Если вы хотите создать веб-сайт как можно быстрее, не ищите ничего, кроме Weebly.Он настолько прост в использовании, что у вас будет отличный сайт за считанные минуты.

3. Weebly

Быстрый и простой бесплатный конструктор веб-сайтов

Причины для покупки

+ Мощное бесплатное решение + Автоматическое создание веб-сайтов для новички + Тонны стильных шаблонов

Weebly предлагает вам два способа создания вашего веб-сайта. Оба включают создание его в Интернете, и оба являются максимально быстрыми и безболезненными.

Самым простым вариантом является использование базового конструктора редактора, который поможет вам ответить на ряд вопросов перед автоматическим созданием сайта для вас.Возможности для настройки есть, но здесь основное внимание уделяется быстрым результатам для всех, кто боится создавать веб-сайты.

Доступен более практический подход, если вы решите использовать стандартный редактор. Есть буквально сотни стильных шаблонов на выбор - и, да, они действительно впечатляют, - которые вы можете настроить и адаптировать к своим потребностям с помощью красивого редактора WYSIWYG.

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

Прочтите наш обзор Weebly здесь.

WordPress - инструмент, который выбирают многие владельцы блогов. К нему нужно немного привыкнуть, но как только вы освоите его, вам понравится его гибкость.

4. WordPress

Открытый исходный код и бесплатный конструктор веб-сайтов

Причины для покупки

+ Простота в использовании онлайн-редактор + Множество бесплатных тем

Причины, по которым следует избегать

-Ограниченный диапазон плагинов

Вызывает небольшую путаницу, на самом деле существует две разные версии WordPress.Более сложный вариант можно загрузить с wordpress.org, и вам нужно будет загрузить его в свое веб-пространство и установить с помощью автоматического онлайн-установщика. Затем вы можете настроить шаблоны и использовать надстройки, чтобы сделать сайт своим.

Это путь, по которому идут многие блоггеры, но есть более простой вариант для людей, которые не хотят возиться со сценариями и испачкаться жестким редактированием.

Размещенная версия WordPress позволяет вам создать свой собственный сайт на wordpress.com. Вы можете создать все, от блога или сайта с фотографиями до полноценного интернет-магазина, и есть ряд шаблонов на выбор. Кроме того, у пользователей Mailchimp есть преимущество добавления блока Mailchimp, который, помимо прочего, может расширить ваш список рассылки.

Создаете ли вы статический сайт или сайт в стиле блога с регулярно обновляемым содержанием, онлайн-редактор доставляет удовольствие и позволяет любому создать впечатляющий, профессионально выглядящий сайт. Единственным недостатком является ограниченный набор плагинов и шаблонов по сравнению с настольной версией и другими бесплатными конструкторами веб-сайтов.

Прочтите наш обзор WordPress здесь.

WebSite X5 упрощает создание веб-сайта на вашем компьютере с помощью красивых шаблонов и интуитивно понятного конструктора сайтов.

5. Incomedia WebSite X5

Настольный конструктор веб-сайтов с бесплатной версией

Причины для покупки

+ Простой интерфейс перетаскивания + Гибкие возможности редактирования + Бесплатная версия

Incomedia WebSite X5 претерпел капитальный ремонт в апреле 2019 года с новыми шаблонами, обновленным интерфейсом, новыми платными версиями и многим другим.Главное отметить, что у сервиса теперь есть бесплатная версия для всех (обратите внимание, что бесплатная версия для читателей TechRadar все еще доступна для загрузки). Существуют две платные версии, Evo и Pro, по цене 29,95 евро (27,5 долларов США) и 69,95 евро (64,3 доллара США) соответственно. Это единовременная покупка, и, естественно, обе версии имеют дополнительные и улучшенные функции по сравнению с бесплатной. Существует также демонстрационная версия обеих платных версий, которую вы можете опробовать.

В отличие от WordPress и Wix, WebSite X5 - это конструктор веб-сайтов для настольных ПК, что означает, что вы можете работать над своим сайтом в автономном режиме и иметь больше свободы, чтобы ваш сайт выглядел именно так, как вы хотите.

Есть целый ряд готовых шаблонов на выбор, или вы можете создать свой собственный дизайн с нуля. Затем создайте карту своего сайта, показывая иерархию ваших страниц и то, как они связаны друг с другом - функция, которую вы не найдете в большинстве веб-приложений для создания сайтов. Существует также поддержка электронной коммерции с такими функциями, как страница поиска продукта и оптимизированная проверка.

Как только это будет сделано, вы будете готовы приступить к созданию своих страниц с помощью простого интерфейса веб-сайта X5 с перетаскиванием, который включает инструменты для редактирования как форматированного текста, так и фотографий.

Если вы не хотите быть привязанным к подписке, WebSite X5 предлагает бесплатный конструктор веб-сайтов, которым легко пользоваться.

Прочтите наш обзор Incomedia WebSite X5 здесь.

Бесплатный HTML-редактор CoffeeCup не является конструктором веб-сайтов WYSIWYG, но он обеспечивает предварительный просмотр вашего сайта в реальном времени по мере его создания

6. Бесплатный HTML-редактор CoffeeCup

Бесплатный HTML-редактор для создания веб-сайтов

Причины для купить

+ Впечатляющий набор шаблонов + Интеллектуальные функции, такие как предложения тегов и кодов

Причины, которых следует избегать

-Не все функции доступны бесплатно

Бесплатный HTML-редактор CoffeeCup - одна из умирающих разновидностей программ веб-строительства, которые этого не делают. использовать CMS (систему управления контентом).Хотя Free HTML Editor не в той же лиге, что и Adobe Dreamweaver, он обладает довольно профессиональным ударом. С разделенным экраном кода / предварительным просмотром можно сразу увидеть эффект внесенных вами изменений.

Чтобы помочь вам быстро приступить к работе, в программу встроен ряд шаблонов, а также есть несколько очень хороших функций, таких как теги и предложения кода при вводе.

Для абсолютных новичков программа может показаться немного сложной для начала, но ее стоит придерживаться - при условии, что у вас есть некоторые знания HTML.Есть одна небольшая проблема; ряд функций, таких как проверка орфографии и оптимизация кода, включены только в платную версию программы. В противном случае он может стать простой альтернативой бесплатному конструктору сайтов.

Прочтите наш обзор бесплатного HTML-редактора CoffeeCup здесь.

Если вы раньше использовали WordPress, возможно, вас заинтересует мощь Joomla. Однако его не так просто использовать, поэтому новичкам лучше выбрать более простой вариант, такой как Wix

7.Joomla

Еще один бесплатный конструктор веб-сайтов

Причины для покупки

+ Огромный выбор тем и расширений + Онлайн-конструктор, подходящий для новичков

Причины, которых следует избегать

- Офлайн-программа не очень удобна для пользователя

Joomla - это известное имя в мире CMS. Возможно, он не так популярен, как WordPress, но предлагает те же два варианта: создать сайт с помощью веб-приложения по адресу launch.joomla.org и разместить его на серверах компании или загрузить программное обеспечение с joomla.org и разместите его самостоятельно.

Если вы выберете последний вариант, вы заметите, что интерфейс гораздо менее доступный, чем WordPress. Это не совсем непонятно, но есть много меню и опций, которые нужно проработать, и он не так идеален, как WordPress.

Бесплатный конструктор веб-сайтов Joomla почти такой же сложный, но не требует такого же процесса настройки, что делает его лучшим вариантом для новичков. Его ключевым преимуществом является огромная коллекция тем и расширений, которые предоставляют бесконечные способы настройки внешнего вида и работы вашего сайта.

Вы также можете ознакомиться с другими нашими руководствами по покупке хостинга для веб-сайтов:

Обзор лучших предложений на сегодня

Создайте свой веб-сайт в Mailchimp

Создайте веб-сайт в Mailchimp, чтобы поделиться своим бизнесом со всем миром и оставаться на связи со своей аудиторией. Мы поможем вам создать ваши веб-страницы, опубликовать ваш сайт в домене, отслеживать его производительность и все остальное, что вам нужно для выхода в Интернет.

Из этой статьи вы узнаете, как создать веб-сайт в Mailchimp.

Создать сайт

Чтобы создать веб-сайт, выполните следующие действия.

  1. Щелкните значок Веб-сайт .

  2. Нажмите Веб-сайт .

  3. Введите название своего веб-сайта и нажмите Далее , чтобы выбрать аудиторию.

  4. Используйте раскрывающееся меню, чтобы выбрать аудиторию, и нажмите Изменить мой сайт .

    Если у вас более одной аудитории, вам сначала нужно выбрать ту, которую вы хотите связать со своим веб-сайтом.

Добавьте контент и создайте свой сайт

Когда вы нажимаете кнопку «Редактировать свой сайт», вы переходите в конструктор сайтов Mailchimp. Здесь вы выбираете страницу, с которой хотите работать, и добавляете изображения, текст и другой контент, чтобы поделиться своей историей или чем-то еще, что вы хотите, чтобы посетители знали. При необходимости добавляйте больше страниц и используйте меню «Стили», чтобы выбрать шрифты, цвета и другие элементы, чтобы создать общий внешний вид вашего сайта, соответствующий вашему бренду. Здесь вы также можете управлять настройками баннера cookie на вашем сайте.Пошаговые инструкции по созданию веб-сайта см. В статье «Создайте свой веб-сайт в Mailchimp».

После того, как вы закончите добавление контента и разработку своей страницы, нажмите Preview , чтобы увидеть, как он выглядит, или нажмите Done , чтобы вернуться на страницу управления сайтом. Щелкните Finish Later , чтобы вернуться на панель управления веб-сайтом, где вы можете продолжить настройку своего сайта.

Редактировать доменное имя

Если вы хотите изменить настройки своего веб-сайта, включая доменное имя или предпочтения отслеживания посетителей, вы можете обновить эти данные через панель управления своего веб-сайта.

Чтобы изменить доменное имя вашего веб-сайта, выполните следующие действия.

  1. На панели управления веб-сайта нажмите кнопку Настройки .
  2. В разделе Домен щелкните Изменить .
  3. Введите субдомен, который вы хотите использовать для своего веб-сайта.
  4. Нажмите Сохранить .

Отличная работа! Теперь у вас есть фирменный URL-адрес, которым вы можете поделиться после публикации своего веб-сайта.

Добавить отслеживание сайта

Отслеживание сайта позволяет отслеживать уникальные посещения вашего сайта и новые регистрации.

Чтобы добавить отслеживание на свой веб-сайт, выполните следующие действия.

  1. На панели управления веб-сайта нажмите кнопку Настройки .
  2. В разделе Отслеживание сайта щелкните Изменить .
  3. Установите флажок рядом с параметрами отслеживания, которые вы хотите использовать, и нажмите Сохранить для подтверждения.
    Чтобы узнать больше о наших вариантах отслеживания, ознакомьтесь с разделами «Отслеживание с помощью Mailchimp», «Отслеживание с помощью пикселя Facebook» и «Отслеживание с помощью Google Analytics».

Отличная работа! Затем мы рассмотрим настройки для ваших отдельных веб-страниц.

Изменить настройки URL, SEO и социальных сетей

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

Пошаговые инструкции по изменению настроек страницы см. В разделе «Редактировать URL-адрес страницы», «Настройки SEO и социальных сетей».

Предварительный просмотр и публикация вашего сайта

После того, как вы отредактируете домен, стили, контент, отслеживание и другие настройки, вы будете готовы поделиться своим сайтом со всем миром. Перед публикацией мы рекомендуем вам предварительно просмотреть, как он будет выглядеть на настольных компьютерах и мобильных устройствах.

Чтобы просмотреть и опубликовать свой веб-сайт, выполните следующие действия.

  1. На панели управления веб-сайта наведите указатель мыши на изображение своей домашней страницы и нажмите Предварительный просмотр сайта , чтобы просмотреть свой контент, как он будет отображаться в реальном времени.

    Щелкните значок X в правом верхнем углу окна, чтобы выйти из предварительного просмотра.

  2. Когда будете готовы, нажмите кнопку раскрывающегося списка Изменить сайт и выберите Опубликовать .

  3. Во всплывающем окне просмотрите наши дополнительные условия, затем нажмите Принять условия и опубликовать для подтверждения.

Вы сделали это! Ваш веб-сайт доступен по URL-адресу на вашей панели управления. При необходимости вы можете отменить публикацию своего веб-сайта позже. Ознакомьтесь с Управлением своим сайтом в Mailchimp для получения дополнительной информации о процессе отмены публикации.

Следующие шаги

Ваш веб-сайт запущен и работает. Что теперь? Вот несколько способов максимально использовать эту функцию.

  • Добавьте больше страниц
    Развивайте свой веб-сайт с помощью нового содержания и дополнительных веб-страниц.Регулярно обновляя свой сайт, вы расширяете аудиторию и поощряете повторные посещения. Чтобы узнать, как добавлять веб-страницы и управлять ими, ознакомьтесь с разделом «Управление веб-сайтом в Mailchimp».

  • Добавить всплывающую форму регистрации
    Всплывающая форма регистрации поможет вам связаться с посетителями вашего веб-сайта. Разработайте и настройте его в соответствии с вашим брендом, а также добавьте специальные предложения или скидки, чтобы помочь расширить свою аудиторию и повысить продажи. Чтобы узнать больше, ознакомьтесь с разделом «Добавить всплывающую форму регистрации на свой веб-сайт».

  • Создать магазин
    Добавьте интернет-магазин для продажи ваших товаров. Создание магазина в Mailchimp позволяет добавлять страницы магазина на существующий веб-сайт. Затем вы можете добавлять и продавать столько товаров, сколько захотите. Чтобы узнать больше, ознакомьтесь с разделом «Создайте свой магазин Mailchimp».

  • Назначение встреч
    Добавьте инструменты планирования для развития вашего бизнеса. Если вы предлагаете профессиональные услуги, вы можете использовать Mailchimp Appointments для настройки деталей ваших услуг, включая цены и доступность.Клиенты смогут записаться к вам на прием на вашем сайте. Чтобы узнать больше, ознакомьтесь с разделом «Использовать встречи Mailchimp».

  • Продвигайте свой веб-сайт
    Продвигайте и делитесь своим новым веб-сайтом с помощью маркетинговых кампаний в Mailchimp.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *