Помогни ни да направим Uroci.net по - богат! Добави урок

Обикновен урок по HTML - Как се прави сайт?

Disrespect   трудност:    видян: 23758

Здравейте. Днес ще ви покажа как се прави сайт с HTML много лесно.

Като за начало ще започнем с тага <!DOCTYPE HTML> и след това почваме. Заглавието на страницата почва с това кодче <title>Пишете името</title> , да знаете че винаги когато пишете код , трябва да има един таг който започва " < > " и след като напишем кода трябва да сложил затварящия таг който е " </ > " . След това ще спожил още един таг " <head> " в който ще сложил горната част на сайта.

След това може да сложим " <link REL="SHORTCUT ICON" href="Тук пишете URL , или правите една нова папка " images " и там слагате логото и винаги трябва да е " images/Името.png "> " това е за Иконката до името на сайта. Много важен код е , който може да ни е много полезен той е " <meta http-equiv="content-type" content="text/html; charset=windows-1251" /> " без него страничката няма да ни е нормална , текста ще е маймуница! След това може да добавите и лого на сайта , може да е снимка а може и да е текст , за урока съм избрал текст , но ще покажа как става и с снимка! Значи след като започнем трябва да сложим и още два кода който са " <div id="page"> <div id="title"> " и след това кода за снимка е " <img src="URL"> , и за текста е <h1> като заглавие за сайта , и в края трябва да сложите задължително </h1> , под него може да сложите и вашето мото което става с този код " <p>Моята първа HTML страница , и накрая затваряте тага с този код " </p> " , когато вече сме го написи , в края трябва да сложим и този код " </div> ". Готово вече сме готови в горната част на страницата , в края вече трябва да сложим този код </head> . След това почваме тялото на сайта което ще го направим чрез още един код " <body> " , но аз винаги слагам <div id="body"> ,
след него може да сложим цвят или по точно да кажа фоновия цвят който става с едно лесно кодче " <body bgcolor="Цвета , мога да добавя че има много цветове който може да добавим и с име например " Red ( червен ) , Blue ( син ) и Green ( зелен ) , има и друг начин чрез един лесен код , кодевете може да намерите в този сайт " http://www.w3schools.com/html/html_colors.asp " и само копирате кода например трябва да стане нещо такова " <body bgcolor="green"> или <body bgcolor="#B0B0B0">. Следващата стъпка е за менюто , то не трябва да е нещо трудно. Ще започнем като напишем един код като за начало отгоре сложете " <div id="nav"> " и след това слагате <ul> и след този код , трябва да сложим кода за менюто който е " <li><a href="Тук насочвате на къде искате да води името на менюто аз за например слагам index.html" class="active">Тук слагате името което е , аз за например ще сложа " Начало. "</a></li> , може да го сложите по средата на вашата страничка с още един код който го слагате в началото на кода " <center> тук пишете кода за менюто и тук затваряте </center> , но трябва след това да сложим и затварящия таг </ul> , след това може да сложим и една черта , за да може да се очертае къде е менюто и така, чертата се слага с тага <hr> , но за него съм обесил по долу. Следващата стъпка е текста, ще сложим едно заглавие , да кажеш че кода и той е лесен като го напишем с " <h2>Таговете почват от H1 до H5 , както най - големия е H1 " и тук пишете заглавието и в края пак затваряте тага с " <h2 ". Ето че за да започнете на друг ред трябва да напишете " </br> " защото в противоположен случай ще се смесят и всичко ще е на един ред. След това може да напишете текст който искате като най - лесен таг почваме с " <p>Тук пишете какво си желаете и така текста става под заглавието , след това пак трябва да го затворим </p>. След това може да сложил пак кода <hr> това е черта която е по целият сайт под това имам предвид че е вертикална черта с черен цвят , вие може да си я смалите с кода " <hr size="1 , 2 , 3 - вие избирате един от 3-те" след това пишете и цвят само ако желаете " color="цвета" , и стигаме до там че да сложил колко да е дълга може да сложите този код " width="50%" това е половината , вие може да си я смалите или уголемите до 100% , не трябва да забравяте че винаги в края трябва да сложите и " % ".

 

След това ще ви покажа един код с който може пак да напишете текст но може да смените и цвета , като пред всеки таг добавите един код за цвят , шрифт и големина , кода винаги трябва да започва с <font color="Тук е цвета , както споменах по горе може да е и с име , може и с код" ето че дойде време да сложил и стил който може да смените шрифта на текста с ето този код " face="и тук слагате шрифта който може да е " Verdana , AvantGarde Normal , Trebuchet MC " и много други , ето че е време да зададем и големината на текста с ето този код " size="и тук пишете колко да е голям , аз ви предпочитам 2 , защото не е никак голям и никак малък. Като цяло кода трябва да изглежда така " <font color="blue" face="verdana">. След това може да сложите една снимка без значение каква , ето и кода за нея <img src="от тук слагате линка към кодчето">. Като за край , ще ви покажа още няколко тага. 1-вият таг е <center>От тук кода вече е по средатата на страницата</center> , 2-рия код е за одебеляване на текста и той почва ето така <b>Пак пишете тук текст и вече той е Bold</b> , 3-тия код ще е за подчертан текст , който когато напишете текст , той ще е наклонен ето го и кода <u>Тук пак пишете текст</u> , 4-тия е за за подчертан текст който е <i> и тук пак кодчето </i> , 5-тото ще е за много полезен код , който надявам се че ще ви помогне. Кода е за Textshadow , попринцип кода става с CSS но има начин и за HTML. Ето така почваме <span style="text-shadow: 1px 1px 1px #Цвят;">и тук текста.</span> ! Да добавя че в края трябва да сложите и тези кодa" </body> ".

Като цяло трябва да се получи така.
Демо на сайта : http://www.mega-pictures.com/uploads/images/93825.png
Демо на кодировка : http://www.mega-pictures.com/uploads/images/65469.png
Свали : http://dox.bg/files/dw?a=9aeb6620b9
Урока е Авторски.



Коментари (2)

killer6 на 22.08 2012 в 16:01ч.
като за начало е добре само че няма да е лошо да обясняваш по подробно и за логото изображението не винаги е PNG може да JPEG които се записва JPG имнoгo различни Фрмати .След това не им казвай за неща които стават по лесно с CSS отколкото с HTML за да го стилизират по лесно като голиемина и цвят на текста става много по лесно с CSS ! НО ВСЕ ПАК СИ СЕ СПРАВИЛ МНОГО ДОБРЕ
Disrespect на 31.08 2012 в 16:36ч.
Здравей killer6.

Това беше урок, само за HTML! Знам че повечето неща стават с CSS, но аз реших просто ей така да го направя с HTML, защото това беше първият ми урок, надявам се да съм ви бил полезен.

Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: Национален Бизнес | Bomba.bg | IT Новини | Диплома.бг | TRAVEL туризъм | Реферати | AmAm.bg | Иде.ли | Курсови работи | Фото Форум | Spodeli.net | Фото-Култ | Atol.bg | Elmaz.com | MobileBulgaria.com | Казанлък.Com