График дизайн: June 2013

Wednesday, June 5, 2013

Зураг

<Img> êîä÷ëîë áà Src øèíæ ÷àíàð

HTML íü <img> êîä÷ëîëîîð çóðàã îðóóëäàã. Ýíý êîä÷ëîë íü ãàíöààðàà õýðýãëýãääýã. Çóðãàà äýëãýöýíä õàðóóëàõûí òóëä src øèíæ ÷àíàðûã õýðýãëýõ ¸ñòîé. Src- Source ¿ãèéí òîâ÷ëîë. Scr øèíæ ÷àíàðò çóðãèéí ôàéëûí çàìûã çààæ ºã÷ õýðýãëýäýã.

gif, jpg, bmp õºäºëãººíò áîëîí õºäºëãººíã¿é á¿õ òºðëèéí çóðãèéí ôàéë àâ÷ ÷àäíà.

Alt øèíæ ÷àíàð

Ýíý øèíæ ÷àíàð íü äýëãýöýí äýýð ãàðñàí çóðàã äýýð õóëãàíû çààã÷èéã áàéðëóóëàõàä ãàðàõ òàéëáàðûã îðóóëàõàä õýðýãëýíý.

Ýíý æèøýýãýýð ººðèéíõºº âýá õóóäñàíä õýðõýí õºäºëãººíò çóðàã ãàðãàõûã ¿çýõ áîëíî.

<html>

<body>

<p> Ýíý çóðàã áàéíà. <img src="04.jpg" width="60" height="50"></p>

<p> Ýíý õºäºëãººíò çóðàã áàéíà. <img src="heart.gif" width="48" height="48"> </p>

<p>Õºäºëãººíò áîëîí õºäºëãººíã¿é çóðãèéã âýá õóóäñàíä äàõü êîä õîîðîíäîî ÿìàð ÷ ÿëãààã¿é.

</p>

</body>

</html>

Çóðãèéí çàìûã çààæ ºã÷ õàðóóëæ áîëîõîîñ ãàäíà èíòåðíýòýý õóóäàñíààñ ñ¿ëæýýãýýð çààæ ºã÷ õàðóóëæ áàñ áîëäîã. Ìºí çóðãèéã ôîí çóðàã áóþó äýâñãýð çóðàã áîëãîí òàâüæ áîëíî. Òóõàéí çóðàã õýðýâ æèæèã çóðàã áîëîí èíòåðíýò õóóäàñ õàðóóëàã÷ ïðîãðàì ººðºº àâòîìàòààð õóâèëàí îëøðóóëæ õàðóóëíà.

Çóðàãàíä ìºí òåêñò øèã çýðýãö¿¿ëýëòèéã õèéæ áîëíî. Alt øèíæ ÷àíàðàà àøèãëàí çóðàãàí äýýðýý õóëãàíû çààã÷àà áàéðëóóëàõàä òàéëáàð ãàð÷ áàéõààð õèéæ áîëíî.

Çóðãààðàà õîëáîîñ õèéæ àøèãëàæ áîëíî. Çóðàã äýýðýý õóëãàíû çààã÷ààð áàéðëóóëàõàä ãàð õýëáýðòýé áîëîíãóóò íü íýã òîâøèõîä õîëáîîñ õèéãäñýí õóóäàñ íýýãäýíý.

<html>

</head>

<body>

<p> Õîëáîëò õèéõ çóðàã <a href=zurag.html> <img border="6" src="3.gif" width="44"

height="50"></a></p>

</body>

</html>

Çóðãèéã á¿õýëä íü õîëáîëò áîëãîõîîñ ãàäíà çóðãèéí õýñãèéã òàñàëæ õîëáîëò õèéæ áîëíî. Èíãýæ õèéõýä shape øèíæ ÷àíàðò ÿìàð õýñãýýð õîëáîëò õèéõèéã çààíà. Coîrds øèíæ ÷àíàðò êîîðäèíàòûã çààæ ºãíº. Alt øèíæ ÷àíàðò çóðàã äýýð ãàðàõ òàéëáàðûã çààíà.

Æèøýý íü:

<html>

</head>

<body>

<p> Ýíý çóðãèéí õýñãýýñ õîëáîëò õèéãäýíý.</p>

</body>

</html>

HTML форм

HTML форм

HTML формыг хэрэглэгчээс янз бүрийн мэдээлэл авахад ашигладаг. Формын элементүүд гэж байх ба энэ нь text fields, textarea fields, drop-down menus, radio buttons. Checkboxes зэрэг утга авна. Элемент бүр өөр өөрийн онцлогтой. Форм нь <form> гэсэн кодчлолтой хамт <input> кодчлол хамт хэрэглэгддэг. Мөн type гэсэн шинж чанартай, үүгээрээ өгөгдлийн хэлбэрийг зааж өгдөг. Type=”text” гэсэн утга авбал хэрэглэгчээс утга оруулах болможтой болох ба үсэг, тоо. тэмдэгтүүдээс тогтсон өгөгдөлд зориулагдсан байдаг.

<Html>

<body>

<form>

Нэр: <input type=”text” name=”НЭР”></br>

Овог: <input type=”text” name=”ОВОГ”></br>

</form>

</body>

</html>

Энэ кодчлолын үр дүнд дараах хэлбэртэй гарна.

Энэ формд гараас оруулах тэмдэгтийн хэмжээ 20 тэмдэгтээр хязгаарлагддаг.

Харин type=”radio” гэсэн утга авбал хэрэглэгч олон сонголтуудаас зөвхөн ганцыг сонгоход зориулагдсан форм гарна.

Жишээ нь:

<Html>

<body>

<form>

<input type=”radio” name=”Хүйс”> Эрэгтэй </br>

<input type=”radio” name=”Хүйс”> Эмэгтэй

</form>

</body>

</html>

Энэ кодчлолын үр дүнд дараах хэлбэртэй гарна.

Type=”checkbox” гэсэн утга авбал хэрэглэгчээс нэг болон хэд хэдэн сонголтуудыг зэрэг авахад зориулагдсан форм гарна.

Жишээ нь:

<Html>

<body>

<form>

<h4> Өөрийн чадах зүйлээ сонгоно уу. </h4>

<input type=”checkbox” name=”Принтер”> Принтер ашиглаж чадна </br>

<input type=”checkbox” name=”Канон”> Канон ашиглаж чадна </br>

<input type=”checkbox” name=”Сүлжээ”> Сүлжээний орчинд ажиллаж чадна </br>

<input type=”checkbox” name=”Компьютер”> Компьютер дээр сайн ажиллана. </br>

<input type=”checkbox” name=”Факс”> Факс явуулж, хүлээн авч чадна

</form>

</body>

</html>

Энэ кодчлолын үр дүнд дараах хэлбэртэй гарна.

Type=”submit” гэсэн утга авбал товч үүсэх ба хэрэглэгч уг товч дээр товшиход, формын агуулгы өөр файл руу илгээдэг. Action шинж чанар нь илгээх файлын нэрийг тодорхойлдог.

Жишээ нь:

<Html>

<body>

<form>

Нэр: <input type=”text” name=”нэр”></br>

</form>

</body>

</html>

Ямар нэгэн тэкст бичээд “орох” товч дээр дарвал танд html_form_action.asp файлыг нээж Нэр гээд таны оруулсан нэрийг бичсэн байх болно. Энэ нь хэрэглэгчийн нэрээр заагдсан файлд нээх үйлдлийг гүйцэтгэдэг.

За бүгдээрээ дараагийн жишээгээр сонголт хийх формыг үүсгэж үзэцгээе.

Гэхдээ энэ нь нэг төрлийн тэмдэглэгээ авах жагсаалт байх болно.

<Html>

<body>

<form>

<option value=”Carina”> Toyota Carina

<option value=”markII”> Toyota markII

<option value=”crown”> Toyota crown

<option value=”Land cruiser”> Toyota Land cruiser

</form>

</body>

</html>

Эндээс аль нэг машиныг нь сонгох сонголтын форм үүсгэсэн байна.

Харин одоо бүгдээрээ хэрхэн товч үүсгэж болохыг жишээгээр үзэцгээе.

<Html>

<body>

<form>

</form>

</body>

</html>

Товч үүсгэсэн жишээ.

За бүгдээрээ дээр үзсэн формуудаа хэрхэн ашиглах талаар үзэцгээе.

<Html>

<body>

<form>

Нэр: <input type=”text” name=”нэр”value=”Bat”></br>

Овог <input type=”text” name=”овог”value=”Dorj”> </br>

</form>

</body>

</html>

Жагсаалт үүсгэх

Заримдаа мэдээллийг жагсаалт хэлбэрээр гаргах шаардлага тулгардаг. Жагсаалт тоогоор дугаарлагдан эрэмбэлэгдсэн байж болно. Эсвэл дугаарлагдаагүй байж болно.

Тоогоор дугаарлагдсан жагсаалт үүсгэхийн тулд эхлээд <ol> гэсэн битүү таагийг бичих хэрэгтэй. Дараа нь энэ тааг дотроо <li> гэсэн задгай таагийг оруулж, ардаас нь эрэмбэлэх элементээ бичиж өгнө. Хэрэв N тооны элементийг эрэмбэлэх бол N удаа <li> таагийг оруулна. Ж.нь:

<body>

Хамгийн их ашиг олсон бүх цаг үеийн 10 шилдэг кино:

<ol>

<li>Титаник (Titanic)

<li>Бөгжний эзэн: Хаан эргэн ирсэн нь (The Lord of the Rings: The Return of the King)

<li>Карибын тэнгисийн дээрэмчид: Өөд болоочийн авдар (Pirates of the Caribbean: Dead Man's Chest)

<li>Харанхуйн хөлөг баатар (The Dark Knight)

<li>Харри Поттэр ба шидэт чулуу (Harry Potter and the Sorcerer's Stone)

<li>Карибын тэнгисийн дээрэмчид: Ертөнцийн хязгаарт ((Pirates of the Caribbean: At World's' End)

<li>Харри Поттэр ба Феникс шувуу (Harry Potter and the Order of the Phoenix)

<li>Бөгжний эзэн: Хос цамхаг (The Lord of the Rings: The Two Towers)

<li>Оддын дайн - 1: Далд заналхийлэл (Star Wars: Episode I - The Phantom Menace)

<li>Шрек 2 (Shrek 2)

</ol>

</body>

Дугааргүй жагсаалт үүсгэхийн тулд эхлээд <ul> гэсэн битүү таагийг бичих хэрэгтэй. Дараа нь энэ тааг дотроо <li> гэсэн задгай таагийг оруулж, ардаас нь жагсаалтын элементээ бичиж өгнө. Хэрэв N тооны элементийг жагсаах бол N удаа <li> таагийг оруулна. Ж.нь:

<body>

Хамгийн их ашиг олсон бүх цаг үеийн 10 шилдэг кино:

<ul>

<li>Титаник (Titanic)

<li>Бөгжний эзэн: Хаан эргэн ирсэн нь (The Lord of the Rings: The Return of the King)

<li>Карибын тэнгисийн дээрэмчид: Өөд болоочийн авдар (Pirates of the Caribbean: Dead Man's Chest)

<li>Харанхуйн хөлөг баатар (The Dark Knight)

<li>Харри Поттэр ба шидэт чулуу (Harry Potter and the Sorcerer's Stone)

<li>Карибын тэнгисийн дээрэмчид: Ертөнцийн хязгаарт ((Pirates of the Caribbean: At World's' End)

<li>Харри Поттэр ба Феникс шувуу (Harry Potter and the Order of the Phoenix)

<li>Бөгжний эзэн: Хос цамхаг (The Lord of the Rings: The Two Towers)

<li>Оддын дайн - 1: Далд заналхийлэл (Star Wars: Episode I - The Phantom Menace)

<li>Шрек 2 (Shrek 2)

</ul>

</body>

Нэг жагсаалт дотор өөр нэг жагсаалт орсон байж болно. Тухайлбал:

<body>

<ol>

<li>Монгол:

<ul>

<li>Улаанбаатар

<li>Хөвсгөл

<li>Говь

<li>Үлэг гүрвэл

<li>Наадам

</ul>

<li>Хятад:

<ul>

<li>Бээжин

<li>Цагаан хэрэм

<li>Хайнань

<li>Зуны олимп 2008

</ul>

<li>Орос:

<ul>

<li>Москва

<li>Санкт-Петербург

<li>Байгаль нуур

<li>Сибирь

<li>Путин

</ul>

</ol>

</body>