SlideShare a Scribd company logo
LOG
O




      ВЭБИЙН
       ҮНДЭС
      Багш: Г.Өсөхжаргал
Div тагийн тухай
 Анх html хэл дээр вебсайт бүтээхэд Frame болон Table
  ашиглах хоѐрхон л сонголт байсан.
 Div таг нь 3 дахь боломжийг бий болгож чадсан бөгөөд
  дотроо html хэлний бараг бүх төрлийн шинж
  чанаруудыг өөртөө агуулж ажиллаж чаддаг.
 Div тагийг ихэвчлэн CSS-тэй хослуулан ашиглах нь
  тохиромжтой байдаг.
 Вэб хуудасны байршлын загварыг HTML Table
  элементээр хийж болох ч CSS ашиглан үүнийг шийдэх
  нь илүү хялбар, бас вэб хөтөч хурдтай зурдаг давуу
  талтай
Div тагийн шинж чанарууд
  Class
     Css код доторх .(цэг) тэмдгээр эхэлсэн шинжийг заана.
     Өөр өөр элэментүүдэд ашиглагдаж болох ба CSS-тэй
       хамт хэрэглэгдэнэ.
  Id
     Css код доторх # тэмдгээр эхэлсэн шинжийг заана
     элементүүдийн атрибутын утга давхардах ѐсгүй
  Style
     Элэментийн CSS загварыг бичиж болно.
  Title
     Гарчиг буюу, хулганы заагчаар очиход гарч ирэх
       текстийг бичнэ.
  align
     Байршил заахад хэрэглэх боломжтой
CSS дэх div тагийн шинж
          чанаруудыг
         ажиллуулах
Idselector-
 id- г зөвхөн ганц элемент л ашиглах боломжтой
 байдаг. Хуудасны header, footer, үндсэн цэс
 зэрэг нь ганц байхад л хангалттай байдаг учир
 эдгээрийн харагдах байдлыг тодорхойлохдоо
 id ашиглах нь тохиромжтой.
Бичигдэх хэлбэр: #нэр{property:value}
      id– зарлахдаа # тэмдгээр эхлүүлнэ.
      Жишээ нь:#header{color:yellow;}
HTML-д ашиглах
 <div id=“header”>Энэ бол header хэсэг</div>
Хуваалт хийхдээ анхаарах
                    зүйлс
Вэб   хуудасны     төсөөллийн  (conceptual)
 байршлын загварыг цаасан дээр зурж
 нэрлэнэ.
Байршлын загварыг боловсруулахад эхлээд
 хуудасны ерөнхий хуваалтыг зурна, дараа нь
 хуваалт бүрт нэр оноож
   харьцангуй (relative) болон
   тогтмол (absolute)
  хэмжээг хуваалт бүрт зааж өгнө.
Хуудасны бүтцийг зурсан жишээ
Жишээ 1 – Дараах кодыг хуудасны
         body дотроо бичнэ
<html>
<head>
<title>CSS ашигласан жишээ</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head> <body>
<div id="container">
   <div id="topbar">Хуудасны Толгой, Гарчигийн хэсэг</div>
        <div id="navbar">
               <a href=“main.html">Цэснүүд</a>
               <a href=“about.html">Цэснүүд</a>
               <a href=“contact.html">Цэснүүд</a>
               </div>
        <div id="main">
               <div id="column_left">
               <h1>Гарчиг</h1>
<h2>12 арванхоёрдугаар сар 2011</h2>

<p>КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, </p>
<p>КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, </p>
<p>КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, </p>
<p>КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, </p>
<p>КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, </p>
   </div>
   <div id="column_right">
         <h3>Сайтын Ангилал</h3>
                 Энд хуудасны холбоосуудыг хийж өгөхөд тохиромжтой
   </div>
   <div id="column_right_adsense">
         <h3>Сурталчилгаа, зарлал</h3>
                 Зарлал хийхэд тохиромжтой байрлал
   </div>
   <div class="spacer"></div>
</div>
   <div id="footer">© 2010 Улаанбаатар Дээд Сургууль</div>
</div>
       </body> </html>
Вэб байршлын загварын CSS шинжүүдийг
     дараах жагсаалтаар харуулав.
/* ------ Хуудасны хуваалт ------ */
#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:60px;}
#navbar{width:auto; display:block; height:28px;}
#navbar a{heigth:28px; line-height:28px; padding:0 8px; display:inline;}
#main{width:auto; display:block; padding:10px 0;}
#column_left{width:460px; margin-right:20px; float:left;}
#column_right{width:160px; margin-right:20px; float:left;}
#column_right_adsense{width:120px; float:left;}
.spacer{clear:both; height:10px; display:block;} //класс зарласан байна
#footer{width:auto; display:block; padding:10px 0; font-size:11px;
    color:#666666;}
Жишээ 1 Хуудасны үр дүн
<div> таг дотор байршил зааж өгч болно


    <div align="left">Текст</div>
    <div align="center">Текст</div>
    <div align="right">Текст</div>
Дотоод css ашиглан хуудас
  хууваасан байдал Жишээ 2
<html> <head>
<title>CSS ашиглан хуваалт хийсэн      #header { text-align: center ;
   жишээ</title> <style>                height:100px;
                                        border: 1px solid gray; }
body { font-family:tahoma;
                                       </style></head>
        font-size:0.8cm; }             <body id=“container”>
#container { width: 800px ;              <div id="layout">
margin-left: auto ; margin-right:        <div id="header">Top
   auto; }                               Header</div>
#content { margin-left:200px;            <div id="navbar">
                                         Navigation</div>
 height:300px; padding: 4px ;            <div id="content"> Content
 border: 1px solid gray; }               here</div>
#navbar { float: left; width: 198px;     <div id="footer"> Bottom
                                         Footer</div>
height:308px; border: 1px solid
                                       </div>
   gray; }
                                       </body></html>
#footer { clear: both ;
 border: 1px solid gray; }
Жишээ 2 - Үр дүн
Жишээ 3 – Хуудсыг 4 хэсэгт хуваах
<html> <head> <title>4 хуваалт</title>
<style type="text/css" >
body {width: 100%;height: 100%;padding: 0px;margin: 0px;}
html {width: 100%;height: 100%;padding: 0px;margin: 0px;}
#col1 {float: left;width: 50%;height: 100%;padding: 0px;margin: 0px;}
#col2 {float: right;width: 50%;height: 100%;padding: 0px;margin: 0px;}
#rect1 {background-color: #666666;width: 100%;height: 50%;
         padding: 0px;margin: 0px;}
#rect2 {background-color: #999999;width: 100%;height: 50%;
         padding: 0px;margin: 0px;}
#rect3 {background-color: #999999;width: 100%;height: 50%;
         padding: 0px;margin: 0px;}
#rect4 {background-color: #666666;width: 100%;height: 50%;
         padding: 0px;margin: 0px;}
</style> </head>
<body>
  <div id="col1">   <div id="rect1">rect1</div>
                    <div id="rect3">rect3</div></div>
  <div id="col2">   <div id="rect2">rect2</div>
                    <div id="rect4">rect4</div></div>
</body> </html>
Үр Дүн
Жишээ 4
*{margin: 0; padding: 0;}
body {padding-top: 50px;}
#container {margin: 0 auto; background-color: #cecece;}
#container h1 {background-color: #aaa; color: #000; text-align:
    center;}
#left {float: left; width: 20%; padding: 5px 5px 5px 5px; background-
    color: #cccccc;}
#center {float: left; width: 55%; padding: 5px 5px 5px 5px;
    background-color: #eeeeee; }
#right {float: left; width: 20%; padding: 5px 5px 5px 5px;
    background-color: #cccccc;}
.clear {clear: both; text-align: center; font-size: 12px; color:
    #000000;}
<html>
<head><title>Жишээ 4</title>
<link href="ex5.css" rel="stylesheet" type="text/css" />
</head> <body>
<div id="container">
<h1>Веб хуудасны гарчиг</h1>
<div id="left"> <p>Зүүн тал</p> </div>
<div id="center" align="center">
<p>Голын хэсэг</p> <p>Голын хэсэг</p> <p>Голын хэсэг</p>
<p>Голын хэсэг</p> <p>Голын хэсэг</p> <p>Голын хэсэг</p> </div>
    <div id="right">
       <p>Баруун тал</p>
    </div>
   <p class="clear">хуудасны доод тал</p>
</div>
</body></html>
Div – тагийн CSS дотор бичигдэх
байрлалын зарим шинжүүд

 #div {position:static}-хэвийн байдлаар харагдана

 #div {position:relative}-хэмжээг нь өгч дээш доош, баруун
   зүүн тийш байрлуулах

 #div {position:absolute}-дурын байрлалд байрлуулна

 #div {float:left}-баруун зүүн голд байрлуулна

 #div {clear:both}-шинэ мөрөнд гаргана

More Related Content

What's hot

Sw203 Lecture10 Polymorphism
Sw203 Lecture10 PolymorphismSw203 Lecture10 Polymorphism
Sw203 Lecture10 Polymorphism
Jargalsaikhan Alyeksandr
 
C++ vndsen oilgolt хичээл 1
C++ vndsen oilgolt хичээл 1C++ vndsen oilgolt хичээл 1
C++ vndsen oilgolt хичээл 1
Urantuya Purevtseren
 
9.эрэмбэлэлтийн аргууд
9.эрэмбэлэлтийн аргууд9.эрэмбэлэлтийн аргууд
9.эрэмбэлэлтийн аргуудBayalagmaa Davaanyam
 
Sw203 Lecture6 Inheritance
Sw203 Lecture6 InheritanceSw203 Lecture6 Inheritance
Sw203 Lecture6 Inheritance
Jargalsaikhan Alyeksandr
 
үндсэн функцууд
үндсэн функцуудүндсэн функцууд
үндсэн функцуудOnon Tuul
 
Өгөгдлийн бүтэц 15
Өгөгдлийн бүтэц 15Өгөгдлийн бүтэц 15
Өгөгдлийн бүтэц 15
International Ulaanbaatar University
 
Html кодчлол гэж юу вэ
Html кодчлол гэж юу вэHtml кодчлол гэж юу вэ
Html кодчлол гэж юу вэFLux YT
 
байгууллагын стратеги ба бүтэц
байгууллагын стратеги ба бүтэцбайгууллагын стратеги ба бүтэц
байгууллагын стратеги ба бүтэцErdenezul Purevnanzad
 
Lekts3. tarhaltiin tsuvaa
Lekts3.  tarhaltiin tsuvaaLekts3.  tarhaltiin tsuvaa
Lekts3. tarhaltiin tsuvaa
Anhaa8941
 
U.cs101 алгоритм программчлал-3
U.cs101   алгоритм программчлал-3U.cs101   алгоритм программчлал-3
U.cs101 алгоритм программчлал-3
Badral Khurelbaatar
 
Д.Батцэнгэл Б.Ганбаяр - САНХҮҮГИЙН ХАРЬЦААНД ТУЛГУУРЛАСАН АШИГТ АЖИЛЛАГААНЫ ...
Д.Батцэнгэл  Б.Ганбаяр - САНХҮҮГИЙН ХАРЬЦААНД ТУЛГУУРЛАСАН АШИГТ АЖИЛЛАГААНЫ ...Д.Батцэнгэл  Б.Ганбаяр - САНХҮҮГИЙН ХАРЬЦААНД ТУЛГУУРЛАСАН АШИГТ АЖИЛЛАГААНЫ ...
Д.Батцэнгэл Б.Ганбаяр - САНХҮҮГИЙН ХАРЬЦААНД ТУЛГУУРЛАСАН АШИГТ АЖИЛЛАГААНЫ ...batnasanb
 
Лекц №10 Нэгж бүтээгдэхүүний өртөг тооцох аргууд
Лекц №10 Нэгж бүтээгдэхүүний өртөг тооцох аргуудЛекц №10 Нэгж бүтээгдэхүүний өртөг тооцох аргууд
Лекц №10 Нэгж бүтээгдэхүүний өртөг тооцох аргууд
Хотгойд Шанж Болдбаатар Ууганбаяр
 

What's hot (20)

Sw203 Lecture10 Polymorphism
Sw203 Lecture10 PolymorphismSw203 Lecture10 Polymorphism
Sw203 Lecture10 Polymorphism
 
C++ vndsen oilgolt хичээл 1
C++ vndsen oilgolt хичээл 1C++ vndsen oilgolt хичээл 1
C++ vndsen oilgolt хичээл 1
 
Html хичээл
Html хичээлHtml хичээл
Html хичээл
 
database 10
database 10database 10
database 10
 
Database 6
Database 6Database 6
Database 6
 
9.эрэмбэлэлтийн аргууд
9.эрэмбэлэлтийн аргууд9.эрэмбэлэлтийн аргууд
9.эрэмбэлэлтийн аргууд
 
Sw203 Lecture6 Inheritance
Sw203 Lecture6 InheritanceSw203 Lecture6 Inheritance
Sw203 Lecture6 Inheritance
 
Lecture8 9
Lecture8 9Lecture8 9
Lecture8 9
 
үндсэн функцууд
үндсэн функцуудүндсэн функцууд
үндсэн функцууд
 
Өгөгдлийн бүтэц 15
Өгөгдлийн бүтэц 15Өгөгдлийн бүтэц 15
Өгөгдлийн бүтэц 15
 
Html кодчлол гэж юу вэ
Html кодчлол гэж юу вэHtml кодчлол гэж юу вэ
Html кодчлол гэж юу вэ
 
байгууллагын стратеги ба бүтэц
байгууллагын стратеги ба бүтэцбайгууллагын стратеги ба бүтэц
байгууллагын стратеги ба бүтэц
 
Lekts3. tarhaltiin tsuvaa
Lekts3.  tarhaltiin tsuvaaLekts3.  tarhaltiin tsuvaa
Lekts3. tarhaltiin tsuvaa
 
Lecture 16
Lecture 16Lecture 16
Lecture 16
 
Word2007
Word2007Word2007
Word2007
 
Database 3
Database 3Database 3
Database 3
 
U.cs101 алгоритм программчлал-3
U.cs101   алгоритм программчлал-3U.cs101   алгоритм программчлал-3
U.cs101 алгоритм программчлал-3
 
Magadlaliin onol lekts
Magadlaliin onol lektsMagadlaliin onol lekts
Magadlaliin onol lekts
 
Д.Батцэнгэл Б.Ганбаяр - САНХҮҮГИЙН ХАРЬЦААНД ТУЛГУУРЛАСАН АШИГТ АЖИЛЛАГААНЫ ...
Д.Батцэнгэл  Б.Ганбаяр - САНХҮҮГИЙН ХАРЬЦААНД ТУЛГУУРЛАСАН АШИГТ АЖИЛЛАГААНЫ ...Д.Батцэнгэл  Б.Ганбаяр - САНХҮҮГИЙН ХАРЬЦААНД ТУЛГУУРЛАСАН АШИГТ АЖИЛЛАГААНЫ ...
Д.Батцэнгэл Б.Ганбаяр - САНХҮҮГИЙН ХАРЬЦААНД ТУЛГУУРЛАСАН АШИГТ АЖИЛЛАГААНЫ ...
 
Лекц №10 Нэгж бүтээгдэхүүний өртөг тооцох аргууд
Лекц №10 Нэгж бүтээгдэхүүний өртөг тооцох аргуудЛекц №10 Нэгж бүтээгдэхүүний өртөг тооцох аргууд
Лекц №10 Нэгж бүтээгдэхүүний өртөг тооцох аргууд
 

Viewers also liked

solar power kits UNIVPO
solar power kits UNIVPOsolar power kits UNIVPO
solar power kits UNIVPO
Mark Robinson
 
Nuevas tecnologías digitales que van a pisar bien fuerte
Nuevas tecnologías digitales que van a pisar bien fuerteNuevas tecnologías digitales que van a pisar bien fuerte
Nuevas tecnologías digitales que van a pisar bien fuerte
cdcomputadora12
 
Using ontologies to do integrative systems biology
Using ontologies to do integrative systems biologyUsing ontologies to do integrative systems biology
Using ontologies to do integrative systems biology
Chris Evelo
 
From ELANA Trading: Why Bulgaria?
From ELANA Trading: Why Bulgaria?From ELANA Trading: Why Bulgaria?
From ELANA Trading: Why Bulgaria?
ELANA Group
 
Sansone Westminster Higher Education Forum - Open Access, Open Data - March 2015
Sansone Westminster Higher Education Forum - Open Access, Open Data - March 2015Sansone Westminster Higher Education Forum - Open Access, Open Data - March 2015
Sansone Westminster Higher Education Forum - Open Access, Open Data - March 2015
Susanna-Assunta Sansone
 
The Silent Anthem campaign by BIG Cinemas India
The Silent Anthem campaign by BIG Cinemas India The Silent Anthem campaign by BIG Cinemas India
The Silent Anthem campaign by BIG Cinemas India
archana jhangiani
 
Agile Financial Times Apr09
Agile Financial Times Apr09Agile Financial Times Apr09
Agile Financial Times Apr09
Agile Financial Technologies
 
نصوص متضاربه في الكتاب المقدس
نصوص متضاربه في الكتاب المقدسنصوص متضاربه في الكتاب المقدس
نصوص متضاربه في الكتاب المقدس
abuthamer
 
Daily Newsletter: 15th April, 2011
Daily Newsletter: 15th April, 2011Daily Newsletter: 15th April, 2011
Daily Newsletter: 15th April, 2011
Fullerton Securities
 
Timelines at scale
Timelines at scaleTimelines at scale
Timelines at scale
Viet Nt
 
CIA: FLYING SAUCERS OVER BELGIAN CONGO URANIUM MINES
CIA: FLYING SAUCERS OVER BELGIAN CONGO URANIUM MINESCIA: FLYING SAUCERS OVER BELGIAN CONGO URANIUM MINES
CIA: FLYING SAUCERS OVER BELGIAN CONGO URANIUM MINES
Thierry Debels
 
Grafico diario del dax perfomance index para el 08 02-2013
Grafico diario del dax perfomance index para el 08 02-2013Grafico diario del dax perfomance index para el 08 02-2013
Grafico diario del dax perfomance index para el 08 02-2013
Experiencia Trading
 
Selecting & Installing WordPress Themes
Selecting & Installing WordPress ThemesSelecting & Installing WordPress Themes
Selecting & Installing WordPress Themes
Gizmo Creative Factory, Inc.
 
Snowmasters Portfolio
Snowmasters PortfolioSnowmasters Portfolio
Snowmasters Portfolio
Jessica Rice
 
Cxx.jl の紹介 The Julia C++ interface
Cxx.jl の紹介 The Julia C++ interfaceCxx.jl の紹介 The Julia C++ interface
Cxx.jl の紹介 The Julia C++ interface
Ryuichi YAMAMOTO
 
Day 1 Recap at #CannesLions 2013 / #OgilvyCannes
Day 1 Recap at #CannesLions 2013 / #OgilvyCannes Day 1 Recap at #CannesLions 2013 / #OgilvyCannes
Day 1 Recap at #CannesLions 2013 / #OgilvyCannes
Ogilvy
 
أغرب حفلة زواج جماعي من نوعه !!!
أغرب حفلة زواج جماعي من نوعه !!!أغرب حفلة زواج جماعي من نوعه !!!
أغرب حفلة زواج جماعي من نوعه !!!
hamzakzook
 

Viewers also liked (18)

Web basic 5
Web basic 5Web basic 5
Web basic 5
 
solar power kits UNIVPO
solar power kits UNIVPOsolar power kits UNIVPO
solar power kits UNIVPO
 
Nuevas tecnologías digitales que van a pisar bien fuerte
Nuevas tecnologías digitales que van a pisar bien fuerteNuevas tecnologías digitales que van a pisar bien fuerte
Nuevas tecnologías digitales que van a pisar bien fuerte
 
Using ontologies to do integrative systems biology
Using ontologies to do integrative systems biologyUsing ontologies to do integrative systems biology
Using ontologies to do integrative systems biology
 
From ELANA Trading: Why Bulgaria?
From ELANA Trading: Why Bulgaria?From ELANA Trading: Why Bulgaria?
From ELANA Trading: Why Bulgaria?
 
Sansone Westminster Higher Education Forum - Open Access, Open Data - March 2015
Sansone Westminster Higher Education Forum - Open Access, Open Data - March 2015Sansone Westminster Higher Education Forum - Open Access, Open Data - March 2015
Sansone Westminster Higher Education Forum - Open Access, Open Data - March 2015
 
The Silent Anthem campaign by BIG Cinemas India
The Silent Anthem campaign by BIG Cinemas India The Silent Anthem campaign by BIG Cinemas India
The Silent Anthem campaign by BIG Cinemas India
 
Agile Financial Times Apr09
Agile Financial Times Apr09Agile Financial Times Apr09
Agile Financial Times Apr09
 
نصوص متضاربه في الكتاب المقدس
نصوص متضاربه في الكتاب المقدسنصوص متضاربه في الكتاب المقدس
نصوص متضاربه في الكتاب المقدس
 
Daily Newsletter: 15th April, 2011
Daily Newsletter: 15th April, 2011Daily Newsletter: 15th April, 2011
Daily Newsletter: 15th April, 2011
 
Timelines at scale
Timelines at scaleTimelines at scale
Timelines at scale
 
CIA: FLYING SAUCERS OVER BELGIAN CONGO URANIUM MINES
CIA: FLYING SAUCERS OVER BELGIAN CONGO URANIUM MINESCIA: FLYING SAUCERS OVER BELGIAN CONGO URANIUM MINES
CIA: FLYING SAUCERS OVER BELGIAN CONGO URANIUM MINES
 
Grafico diario del dax perfomance index para el 08 02-2013
Grafico diario del dax perfomance index para el 08 02-2013Grafico diario del dax perfomance index para el 08 02-2013
Grafico diario del dax perfomance index para el 08 02-2013
 
Selecting & Installing WordPress Themes
Selecting & Installing WordPress ThemesSelecting & Installing WordPress Themes
Selecting & Installing WordPress Themes
 
Snowmasters Portfolio
Snowmasters PortfolioSnowmasters Portfolio
Snowmasters Portfolio
 
Cxx.jl の紹介 The Julia C++ interface
Cxx.jl の紹介 The Julia C++ interfaceCxx.jl の紹介 The Julia C++ interface
Cxx.jl の紹介 The Julia C++ interface
 
Day 1 Recap at #CannesLions 2013 / #OgilvyCannes
Day 1 Recap at #CannesLions 2013 / #OgilvyCannes Day 1 Recap at #CannesLions 2013 / #OgilvyCannes
Day 1 Recap at #CannesLions 2013 / #OgilvyCannes
 
أغرب حفلة زواج جماعي من نوعه !!!
أغرب حفلة زواج جماعي من نوعه !!!أغرب حفلة زواج جماعي من نوعه !!!
أغرب حفلة زواج جماعي من نوعه !!!
 

Similar to web basic 9

Web design -_lecture_1
Web design -_lecture_1Web design -_lecture_1
Web design -_lecture_1Soyokos Soyoko
 
Css
CssCss
10 Анги дэвших шалгалт
10 Анги дэвших шалгалт10 Анги дэвших шалгалт
10 Анги дэвших шалгалт
Баярсайхан Л
 
10r angiin jishig bodlogo
10r angiin jishig bodlogo10r angiin jishig bodlogo
10r angiin jishig bodlogo
Баярсайхан Л
 
Html даалгавар
Html даалгаварHtml даалгавар
Html даалгавар
Баярсайхан Л
 
текст хэлбэржүүлэх
текст хэлбэржүүлэхтекст хэлбэржүүлэх
текст хэлбэржүүлэхSainaa Sain
 
Html, css, java script
Html, css, java scriptHtml, css, java script
Html, css, java script
Batzorigt Rentsen
 
Lecture html head
Lecture   html headLecture   html head
Lecture html head
Энхтамир Ш
 

Similar to web basic 9 (20)

Web design -_lecture_1
Web design -_lecture_1Web design -_lecture_1
Web design -_lecture_1
 
Lecture 3. css
Lecture 3. cssLecture 3. css
Lecture 3. css
 
Css
CssCss
Css
 
10 Анги дэвших шалгалт
10 Анги дэвших шалгалт10 Анги дэвших шалгалт
10 Анги дэвших шалгалт
 
10r angiin jishig bodlogo
10r angiin jishig bodlogo10r angiin jishig bodlogo
10r angiin jishig bodlogo
 
Presentation1
Presentation1Presentation1
Presentation1
 
web basic 6
web basic 6web basic 6
web basic 6
 
Html даалгавар
Html даалгаварHtml даалгавар
Html даалгавар
 
Lecture 2. html
Lecture 2. htmlLecture 2. html
Lecture 2. html
 
Lecture 2
Lecture 2Lecture 2
Lecture 2
 
Automatic
AutomaticAutomatic
Automatic
 
хүснэгт
хүснэгтхүснэгт
хүснэгт
 
Lecture 1
Lecture 1Lecture 1
Lecture 1
 
web basic 3
web basic 3web basic 3
web basic 3
 
текст хэлбэржүүлэх
текст хэлбэржүүлэхтекст хэлбэржүүлэх
текст хэлбэржүүлэх
 
Web basic 7
Web basic 7Web basic 7
Web basic 7
 
Html, css, java script
Html, css, java scriptHtml, css, java script
Html, css, java script
 
WEB BASIC 2
WEB BASIC 2WEB BASIC 2
WEB BASIC 2
 
Lecture 3 4
Lecture 3 4Lecture 3 4
Lecture 3 4
 
Lecture html head
Lecture   html headLecture   html head
Lecture html head
 

More from Usukhuu Galaa

Se304
Se304Se304
Se205
Se205Se205
Is320
Is320Is320
Is201
Is201Is201
Rdbms bie daalt
Rdbms bie daaltRdbms bie daalt
Rdbms bie daalt
Usukhuu Galaa
 
Rdbms 300 test
Rdbms 300 testRdbms 300 test
Rdbms 300 test
Usukhuu Galaa
 
DB-2
DB-2DB-2
нийтлэл 1
нийтлэл 1нийтлэл 1
нийтлэл 1
Usukhuu Galaa
 
IT13
IT13IT13
IT14
IT14IT14
IT12
IT12IT12
IT11
IT11IT11
IT10
IT10IT10
IT-9
IT-9IT-9
IT-7
IT-7IT-7
IT-6
IT-6IT-6
IT-5
IT-5IT-5
IT-4
IT-4IT-4
IT-3
IT-3IT-3
IT-2
IT-2IT-2

More from Usukhuu Galaa (20)

Se304
Se304Se304
Se304
 
Se205
Se205Se205
Se205
 
Is320
Is320Is320
Is320
 
Is201
Is201Is201
Is201
 
Rdbms bie daalt
Rdbms bie daaltRdbms bie daalt
Rdbms bie daalt
 
Rdbms 300 test
Rdbms 300 testRdbms 300 test
Rdbms 300 test
 
DB-2
DB-2DB-2
DB-2
 
нийтлэл 1
нийтлэл 1нийтлэл 1
нийтлэл 1
 
IT13
IT13IT13
IT13
 
IT14
IT14IT14
IT14
 
IT12
IT12IT12
IT12
 
IT11
IT11IT11
IT11
 
IT10
IT10IT10
IT10
 
IT-9
IT-9IT-9
IT-9
 
IT-7
IT-7IT-7
IT-7
 
IT-6
IT-6IT-6
IT-6
 
IT-5
IT-5IT-5
IT-5
 
IT-4
IT-4IT-4
IT-4
 
IT-3
IT-3IT-3
IT-3
 
IT-2
IT-2IT-2
IT-2
 

web basic 9

  • 1. LOG O ВЭБИЙН ҮНДЭС Багш: Г.Өсөхжаргал
  • 2. Div тагийн тухай  Анх html хэл дээр вебсайт бүтээхэд Frame болон Table ашиглах хоѐрхон л сонголт байсан.  Div таг нь 3 дахь боломжийг бий болгож чадсан бөгөөд дотроо html хэлний бараг бүх төрлийн шинж чанаруудыг өөртөө агуулж ажиллаж чаддаг.  Div тагийг ихэвчлэн CSS-тэй хослуулан ашиглах нь тохиромжтой байдаг.  Вэб хуудасны байршлын загварыг HTML Table элементээр хийж болох ч CSS ашиглан үүнийг шийдэх нь илүү хялбар, бас вэб хөтөч хурдтай зурдаг давуу талтай
  • 3. Div тагийн шинж чанарууд  Class  Css код доторх .(цэг) тэмдгээр эхэлсэн шинжийг заана.  Өөр өөр элэментүүдэд ашиглагдаж болох ба CSS-тэй хамт хэрэглэгдэнэ.  Id  Css код доторх # тэмдгээр эхэлсэн шинжийг заана  элементүүдийн атрибутын утга давхардах ѐсгүй  Style  Элэментийн CSS загварыг бичиж болно.  Title  Гарчиг буюу, хулганы заагчаар очиход гарч ирэх текстийг бичнэ.  align  Байршил заахад хэрэглэх боломжтой
  • 4. CSS дэх div тагийн шинж чанаруудыг ажиллуулах Idselector- id- г зөвхөн ганц элемент л ашиглах боломжтой байдаг. Хуудасны header, footer, үндсэн цэс зэрэг нь ганц байхад л хангалттай байдаг учир эдгээрийн харагдах байдлыг тодорхойлохдоо id ашиглах нь тохиромжтой. Бичигдэх хэлбэр: #нэр{property:value} id– зарлахдаа # тэмдгээр эхлүүлнэ. Жишээ нь:#header{color:yellow;} HTML-д ашиглах <div id=“header”>Энэ бол header хэсэг</div>
  • 5. Хуваалт хийхдээ анхаарах зүйлс Вэб хуудасны төсөөллийн (conceptual) байршлын загварыг цаасан дээр зурж нэрлэнэ. Байршлын загварыг боловсруулахад эхлээд хуудасны ерөнхий хуваалтыг зурна, дараа нь хуваалт бүрт нэр оноож  харьцангуй (relative) болон  тогтмол (absolute) хэмжээг хуваалт бүрт зааж өгнө.
  • 7. Жишээ 1 – Дараах кодыг хуудасны body дотроо бичнэ <html> <head> <title>CSS ашигласан жишээ</title> <link rel="stylesheet" type="text/css" href="css.css" /> </head> <body> <div id="container"> <div id="topbar">Хуудасны Толгой, Гарчигийн хэсэг</div> <div id="navbar"> <a href=“main.html">Цэснүүд</a> <a href=“about.html">Цэснүүд</a> <a href=“contact.html">Цэснүүд</a> </div> <div id="main"> <div id="column_left"> <h1>Гарчиг</h1>
  • 8. <h2>12 арванхоёрдугаар сар 2011</h2> <p>КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, </p> <p>КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, </p> <p>КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, </p> <p>КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, </p> <p>КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, </p> </div> <div id="column_right"> <h3>Сайтын Ангилал</h3> Энд хуудасны холбоосуудыг хийж өгөхөд тохиромжтой </div> <div id="column_right_adsense"> <h3>Сурталчилгаа, зарлал</h3> Зарлал хийхэд тохиромжтой байрлал </div> <div class="spacer"></div> </div> <div id="footer">© 2010 Улаанбаатар Дээд Сургууль</div> </div> </body> </html>
  • 9. Вэб байршлын загварын CSS шинжүүдийг дараах жагсаалтаар харуулав. /* ------ Хуудасны хуваалт ------ */ #container{width:780px; margin:0 auto;} #topbar{width:auto; display:block; height:60px;} #navbar{width:auto; display:block; height:28px;} #navbar a{heigth:28px; line-height:28px; padding:0 8px; display:inline;} #main{width:auto; display:block; padding:10px 0;} #column_left{width:460px; margin-right:20px; float:left;} #column_right{width:160px; margin-right:20px; float:left;} #column_right_adsense{width:120px; float:left;} .spacer{clear:both; height:10px; display:block;} //класс зарласан байна #footer{width:auto; display:block; padding:10px 0; font-size:11px; color:#666666;}
  • 11. <div> таг дотор байршил зааж өгч болно <div align="left">Текст</div> <div align="center">Текст</div> <div align="right">Текст</div>
  • 12. Дотоод css ашиглан хуудас хууваасан байдал Жишээ 2 <html> <head> <title>CSS ашиглан хуваалт хийсэн #header { text-align: center ; жишээ</title> <style> height:100px; border: 1px solid gray; } body { font-family:tahoma; </style></head> font-size:0.8cm; } <body id=“container”> #container { width: 800px ; <div id="layout"> margin-left: auto ; margin-right: <div id="header">Top auto; } Header</div> #content { margin-left:200px; <div id="navbar"> Navigation</div> height:300px; padding: 4px ; <div id="content"> Content border: 1px solid gray; } here</div> #navbar { float: left; width: 198px; <div id="footer"> Bottom Footer</div> height:308px; border: 1px solid </div> gray; } </body></html> #footer { clear: both ; border: 1px solid gray; }
  • 13. Жишээ 2 - Үр дүн
  • 14. Жишээ 3 – Хуудсыг 4 хэсэгт хуваах <html> <head> <title>4 хуваалт</title> <style type="text/css" > body {width: 100%;height: 100%;padding: 0px;margin: 0px;} html {width: 100%;height: 100%;padding: 0px;margin: 0px;} #col1 {float: left;width: 50%;height: 100%;padding: 0px;margin: 0px;} #col2 {float: right;width: 50%;height: 100%;padding: 0px;margin: 0px;} #rect1 {background-color: #666666;width: 100%;height: 50%; padding: 0px;margin: 0px;} #rect2 {background-color: #999999;width: 100%;height: 50%; padding: 0px;margin: 0px;} #rect3 {background-color: #999999;width: 100%;height: 50%; padding: 0px;margin: 0px;} #rect4 {background-color: #666666;width: 100%;height: 50%; padding: 0px;margin: 0px;} </style> </head>
  • 15. <body> <div id="col1"> <div id="rect1">rect1</div> <div id="rect3">rect3</div></div> <div id="col2"> <div id="rect2">rect2</div> <div id="rect4">rect4</div></div> </body> </html>
  • 17. Жишээ 4 *{margin: 0; padding: 0;} body {padding-top: 50px;} #container {margin: 0 auto; background-color: #cecece;} #container h1 {background-color: #aaa; color: #000; text-align: center;} #left {float: left; width: 20%; padding: 5px 5px 5px 5px; background- color: #cccccc;} #center {float: left; width: 55%; padding: 5px 5px 5px 5px; background-color: #eeeeee; } #right {float: left; width: 20%; padding: 5px 5px 5px 5px; background-color: #cccccc;} .clear {clear: both; text-align: center; font-size: 12px; color: #000000;}
  • 18. <html> <head><title>Жишээ 4</title> <link href="ex5.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <h1>Веб хуудасны гарчиг</h1> <div id="left"> <p>Зүүн тал</p> </div> <div id="center" align="center"> <p>Голын хэсэг</p> <p>Голын хэсэг</p> <p>Голын хэсэг</p> <p>Голын хэсэг</p> <p>Голын хэсэг</p> <p>Голын хэсэг</p> </div> <div id="right"> <p>Баруун тал</p> </div> <p class="clear">хуудасны доод тал</p> </div> </body></html>
  • 19. Div – тагийн CSS дотор бичигдэх байрлалын зарим шинжүүд #div {position:static}-хэвийн байдлаар харагдана #div {position:relative}-хэмжээг нь өгч дээш доош, баруун зүүн тийш байрлуулах #div {position:absolute}-дурын байрлалд байрлуулна #div {float:left}-баруун зүүн голд байрлуулна #div {clear:both}-шинэ мөрөнд гаргана