Създаване на HTML уеб сайт от нулата в Notepad
Ако даден сайт се състои от една или повече страници, а в близко бъдеще няма да бъде изпълнен с много съдържание, или да се превърне в комплекс функционален (онлайн магазин, каталог, форум и т.н.). След това създаде сайт по-добре на HTML в Notepad.
- Ще ви е необходим готов сайт дизайн собствената си продукция или да се изтеглят от уеб PSD източник. Тя трябва да бъде прекъснато за оформление HTML в.
- Notebook, а именно бележник ++. Тя може да бъде изтеглена от официалния сайт.
- index.html файл. Тя може да бъде създаден във всяка удобна папка на вашия компютър. Но това е по-добре да се разпределят отделна папка за вашия сайт и да го бъде домакин там. Имам папка C: \ сайт \ index.html
- век на файла: \ сайт \ style.css. Този стил на файлове, защо имате нужда от него, ще стане ясно по-късно.
- сайт \ изображения \: папката гр. В тази папка трябва да поставите всички изображения, необходими за бъдещето на сайта.
За удобство, което направих архив с изображения и конфекция празен файл index.html и style.css. Изтеглете и разархивирайте файла в желаната папка за вас.
За сайта работи, необходими за мрежова уеб сървъра. Сървър при достъп домейн или сайт папка без да посочва конкретен файл ще го потърсите index.html или index.php, ако не намерите папката показва списък от файлове.
Тъй като ние имаме един прост HTML страница, ние не трябва да инсталирате на сървъра на нашия компютър, както е език за маркиране разбира всеки браузър. Все пак, ако се наложи да използвате PHP, лесно браузър не е достатъчно.
Сега трябва да отворите файла с индекс и стила в Notepad ++
Структурата на документа за HTML
Копирайте кода във файла index.html
Сега го отворите в браузъра, трябва да получите това:
С една дума да опиша това, което тези тагове. Ако искате да разберете подробности за GOOGL-и, както казват на информация за този изглед тема.
Казва на браузъра на какъв стандарт, който искате да покажете страницата:
HTML маркер показва, който започва и завършва с HTML документ
се изисква Head таг за поставяне на служебната информация, след което свържете стиловете и скриптове, поставени мета информация на страницата. Посетителите на сайта не могат да видят съдържанието на този маркер.
Body етикет съдържа оформлението на страницата, съдържанието на този маркер да видят посетителите.
Разпределение или да създадете уеб сайт HTML
По време на оформлението на сайта ще се срещне с тагове и атрибути, които описват в тази статия е невъзможно. Ето защо, аз препоръчвам да използвате htmlbook.ru сайт. Също така аз препоръчвам да проучи всяко етикет и стил CSS, който да се запознаем.
Така че ние ще наложи:
Предистория и основната рамка сайт
Замяна на съдържанието на файла index.html до следното:
Style.css и добавете следния код:
Подновяване на страницата на сайта в браузъра (F5), трябва да се получи това:
глава сайт
Добавяне на DIV таг с идентификатор основен следния код:
Какво ще се случи след това:
И добави в CSS файла линия:
В горното меню на сайта
Какво ще ни HTML уеб сайт е навигационно меню, което се показва в оформлението добавите index.html след:
Какво щеше да се случи по този начин:
И във файла style.css:
Менюто на лявата и съдържанието
Това е време да се направи меню вляво и блок съдържание. За да направите това, копирайте кода и внимателно проучване какво се случва. След блок:
index.html файл ще изглежда така:
И в края на копието на CSS файл:
Ако всичко е направено правилно, за да получите един сайт като този по-долу:
мазе сайт
Сега целият файл index.html изглежда така:
Файлът с CSS добавите кода на дъното:
Сега целият файл style.css, както следва:
И на самия сайт като този:
Други страници на сайта и линкове менюто
Резултатът е един сайт, но нищо не се случва, когато щракнете върху връзката на менюто. Така че ние трябва да излезе с името на страницата, за да ги регистрират в менюто URL и да се създаде страници с тези имена.
Името на тази страница трябва да е уникална и се състои от Латинска simvolv. Аз просто преведени елементите от менюто за транслитерация.
- о-nas.html - За Нас
- assortiment.html - Асортимент
- otzivi.html - Отзиви
- zabronirovat-stolik.html - Онлайн резервация
- Наши-klienty.html - Наши клиенти
- kontakty.html - Контакти
Същото трябва да се направи с менюто от лявата страна.
- Кофе-ayrish.html - ирландски Кафе
- Кофе-amerikano.html - American Кафе
- Кофе-glyase.html - Кафе Glace
- Кофе-dippio.html - Кафе смахната
- Кофе-kapuchino.html - Кафе Капучино
- Кофе-кон-panna.html - Кафе Con Panna
- Кофе-koretto.html - Кафе Корита
- Кофе-latte.html - Кафе Latte
- Кофе-lungo.html - Кафе Lungo
Сега отворете index.html в Notepad ++ и добавяне на необходимите връзки меню, съответстващи че ще се окажат по този начин:
Сега натиснете "Save" и след това "File> Save As" и запазете за всеки референтен файл със съответното име на папката с файловете на сайта. Тук е моят резултат:
Всичко сайт е готов. Остава само да променя съдържанието на всяка страница.
На този сайт, въпреки своята простота има много голям недостатък. Какво бихте променили елемент от менюто или елемент от дизайна е необходимостта да се направи това във всеки сайт. Когато повече от 10 страници, започва ужасно объркване в работата му. Така че създаването на HTML сайт в тетрадка, за да се препоръча само за много малки сайтове или една страница LandingPage. А за пълнофункционалните сайтове развиват CMS (те не са толкова трудно, колкото звучи).