Enviar búsqueda
Cargar
web basic 9
•
2 recomendaciones
•
1,511 vistas
Usukhuu Galaa
Seguir
Denunciar
Compartir
Denunciar
Compartir
1 de 19
Recomendados
си хэлний ойлголт
си хэлний ойлголт
badral_0430
Html даалгавар
Html даалгавар
Баярсайхан Л
Web design lecture 2
Web design lecture 2
Chantsaldulam Ganbadrakh
Programchlaliin c hel
Programchlaliin c hel
E-Gazarchin Online University
Database 1
Database 1
Usukhuu Galaa
C++ vndsen oilgolt хичээл 1
C++ vndsen oilgolt хичээл 1
Urantuya Purevtseren
Өгөгдлийн бүтэц 15
Өгөгдлийн бүтэц 15
International Ulaanbaatar University
Веб технологи
Веб технологи
Bilguun Ochirbat
Recomendados
си хэлний ойлголт
си хэлний ойлголт
badral_0430
Html даалгавар
Html даалгавар
Баярсайхан Л
Web design lecture 2
Web design lecture 2
Chantsaldulam Ganbadrakh
Programchlaliin c hel
Programchlaliin c hel
E-Gazarchin Online University
Database 1
Database 1
Usukhuu Galaa
C++ vndsen oilgolt хичээл 1
C++ vndsen oilgolt хичээл 1
Urantuya Purevtseren
Өгөгдлийн бүтэц 15
Өгөгдлийн бүтэц 15
International Ulaanbaatar University
Веб технологи
Веб технологи
Bilguun Ochirbat
бодит тоо
бодит тоо
Khishighuu Myanganbuu
си хэлний хичээлүүд 11 р анги
си хэлний хичээлүүд 11 р анги
enhsaran_tsahim
Excel
Excel
Gantsetseg Lkhagvasuren
Ogogdliin sangiin zohion baiguulalt lekts
Ogogdliin sangiin zohion baiguulalt lekts
Алдарболд Э.
Database 5
Database 5
Usukhuu Galaa
өгөгдлийн сан үүсгэх
өгөгдлийн сан үүсгэх
Tsoomoo Myagmar
өгөгдлийн сан
өгөгдлийн сан
Onon Tuul
Sw203 Lecture8 Interface
Sw203 Lecture8 Interface
Jargalsaikhan Alyeksandr
массив
массив
Khishighuu Myanganbuu
Web design -_lecture_1
Web design -_lecture_1
Soyokos Soyoko
9.эрэмбэлэлтийн аргууд
9.эрэмбэлэлтийн аргууд
Bayalagmaa Davaanyam
давталттай алгоритм
давталттай алгоритм
Enkh Gvnj
Excel 2 heseg
Excel 2 heseg
Computer lesson
алгоритмын бодлогууд
алгоритмын бодлогууд
Renchindorj Monkhzul
өгөгдлийн сангийн системийн үндэс
өгөгдлийн сангийн системийн үндэс
Бямбаа Авирмэд
Лекц №2 Word программын тухай
Лекц №2 Word программын тухай
E-Gazarchin Online University
боловсрол гэж юу вэ
боловсрол гэж юу вэ
Turu Turuu
Lecture 3. css
Lecture 3. css
Khangal Jargal
U.cs101 алгоритм программчлал-7
U.cs101 алгоритм программчлал-7
Badral Khurelbaatar
Java lecture5
Java lecture5
Onobold Odgerel
Web basic 5
Web basic 5
Usukhuu Galaa
solar power kits UNIVPO
solar power kits UNIVPO
Mark Robinson
Más contenido relacionado
La actualidad más candente
бодит тоо
бодит тоо
Khishighuu Myanganbuu
си хэлний хичээлүүд 11 р анги
си хэлний хичээлүүд 11 р анги
enhsaran_tsahim
Excel
Excel
Gantsetseg Lkhagvasuren
Ogogdliin sangiin zohion baiguulalt lekts
Ogogdliin sangiin zohion baiguulalt lekts
Алдарболд Э.
Database 5
Database 5
Usukhuu Galaa
өгөгдлийн сан үүсгэх
өгөгдлийн сан үүсгэх
Tsoomoo Myagmar
өгөгдлийн сан
өгөгдлийн сан
Onon Tuul
Sw203 Lecture8 Interface
Sw203 Lecture8 Interface
Jargalsaikhan Alyeksandr
массив
массив
Khishighuu Myanganbuu
Web design -_lecture_1
Web design -_lecture_1
Soyokos Soyoko
9.эрэмбэлэлтийн аргууд
9.эрэмбэлэлтийн аргууд
Bayalagmaa Davaanyam
давталттай алгоритм
давталттай алгоритм
Enkh Gvnj
Excel 2 heseg
Excel 2 heseg
Computer lesson
алгоритмын бодлогууд
алгоритмын бодлогууд
Renchindorj Monkhzul
өгөгдлийн сангийн системийн үндэс
өгөгдлийн сангийн системийн үндэс
Бямбаа Авирмэд
Лекц №2 Word программын тухай
Лекц №2 Word программын тухай
E-Gazarchin Online University
боловсрол гэж юу вэ
боловсрол гэж юу вэ
Turu Turuu
Lecture 3. css
Lecture 3. css
Khangal Jargal
U.cs101 алгоритм программчлал-7
U.cs101 алгоритм программчлал-7
Badral Khurelbaatar
Java lecture5
Java lecture5
Onobold Odgerel
La actualidad más candente
(20)
бодит тоо
бодит тоо
си хэлний хичээлүүд 11 р анги
си хэлний хичээлүүд 11 р анги
Excel
Excel
Ogogdliin sangiin zohion baiguulalt lekts
Ogogdliin sangiin zohion baiguulalt lekts
Database 5
Database 5
өгөгдлийн сан үүсгэх
өгөгдлийн сан үүсгэх
өгөгдлийн сан
өгөгдлийн сан
Sw203 Lecture8 Interface
Sw203 Lecture8 Interface
массив
массив
Web design -_lecture_1
Web design -_lecture_1
9.эрэмбэлэлтийн аргууд
9.эрэмбэлэлтийн аргууд
давталттай алгоритм
давталттай алгоритм
Excel 2 heseg
Excel 2 heseg
алгоритмын бодлогууд
алгоритмын бодлогууд
өгөгдлийн сангийн системийн үндэс
өгөгдлийн сангийн системийн үндэс
Лекц №2 Word программын тухай
Лекц №2 Word программын тухай
боловсрол гэж юу вэ
боловсрол гэж юу вэ
Lecture 3. css
Lecture 3. css
U.cs101 алгоритм программчлал-7
U.cs101 алгоритм программчлал-7
Java lecture5
Java lecture5
Destacado
Web basic 5
Web basic 5
Usukhuu Galaa
solar 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 fuerte
cdcomputadora12
Using 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?
ELANA Group
Sansone 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
archana jhangiani
Agile Financial Times Apr09
Agile Financial Times Apr09
Agile Financial Technologies
نصوص متضاربه في الكتاب المقدس
نصوص متضاربه في الكتاب المقدس
abuthamer
Daily Newsletter: 15th April, 2011
Daily Newsletter: 15th April, 2011
Fullerton Securities
Timelines at scale
Timelines at scale
Viet Nt
CIA: 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-2013
Experiencia Trading
Selecting & Installing WordPress Themes
Selecting & Installing WordPress Themes
Gizmo Creative Factory, Inc.
Snowmasters Portfolio
Snowmasters Portfolio
Jessica Rice
Cxx.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
Ogilvy
أغرب حفلة زواج جماعي من نوعه !!!
أغرب حفلة زواج جماعي من نوعه !!!
hamzakzook
Destacado
(18)
Web basic 5
Web basic 5
solar 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 fuerte
Using ontologies to do integrative systems biology
Using ontologies to do integrative systems biology
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 2015
The Silent Anthem campaign by BIG Cinemas India
The Silent Anthem campaign by BIG Cinemas India
Agile Financial Times Apr09
Agile Financial Times Apr09
نصوص متضاربه في الكتاب المقدس
نصوص متضاربه في الكتاب المقدس
Daily Newsletter: 15th April, 2011
Daily Newsletter: 15th April, 2011
Timelines at scale
Timelines at scale
CIA: 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-2013
Selecting & Installing WordPress Themes
Selecting & Installing WordPress Themes
Snowmasters Portfolio
Snowmasters Portfolio
Cxx.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
أغرب حفلة زواج جماعي من نوعه !!!
أغرب حفلة زواج جماعي من نوعه !!!
Similar a web basic 9
Css
Css
TileubekTiky
10 Анги дэвших шалгалт
10 Анги дэвших шалгалт
Баярсайхан Л
10r angiin jishig bodlogo
10r angiin jishig bodlogo
Баярсайхан Л
Presentation1
Presentation1
Sainaa Sain
web basic 6
web basic 6
Usukhuu Galaa
Lecture 2. html
Lecture 2. html
Khangal Jargal
Lecture 2
Lecture 2
ulziibaatar
Automatic
Automatic
Enhmandah Hemeelee
хүснэгт
хүснэгт
Sainaa Sain
Html хичээл
Html хичээл
Баярсайхан Л
Lecture 1
Lecture 1
ulziibaatar
web basic 3
web basic 3
Usukhuu Galaa
текст хэлбэржүүлэх
текст хэлбэржүүлэх
Sainaa Sain
Web basic 7
Web basic 7
Usukhuu Galaa
Html, css, java script
Html, css, java script
Batzorigt Rentsen
WEB BASIC 2
WEB BASIC 2
Usukhuu Galaa
Html кодчлол гэж юу вэ
Html кодчлол гэж юу вэ
FLux YT
Html хэлний хичээл
Html хэлний хичээл
Otgonzaya Maagshin
Lecture 3 4
Lecture 3 4
ulziibaatar
Lecture html head
Lecture html head
Энхтамир Ш
Similar a web basic 9
(20)
Css
Css
10 Анги дэвших шалгалт
10 Анги дэвших шалгалт
10r angiin jishig bodlogo
10r angiin jishig bodlogo
Presentation1
Presentation1
web basic 6
web basic 6
Lecture 2. html
Lecture 2. html
Lecture 2
Lecture 2
Automatic
Automatic
хүснэгт
хүснэгт
Html хичээл
Html хичээл
Lecture 1
Lecture 1
web basic 3
web basic 3
текст хэлбэржүүлэх
текст хэлбэржүүлэх
Web basic 7
Web basic 7
Html, css, java script
Html, css, java script
WEB BASIC 2
WEB BASIC 2
Html кодчлол гэж юу вэ
Html кодчлол гэж юу вэ
Html хэлний хичээл
Html хэлний хичээл
Lecture 3 4
Lecture 3 4
Lecture html head
Lecture html head
Más de Usukhuu Galaa
Se304
Se304
Usukhuu Galaa
Se205
Se205
Usukhuu Galaa
Is320
Is320
Usukhuu Galaa
Is201
Is201
Usukhuu Galaa
Rdbms bie daalt
Rdbms bie daalt
Usukhuu Galaa
Rdbms 300 test
Rdbms 300 test
Usukhuu Galaa
DB-2
DB-2
Usukhuu Galaa
нийтлэл 1
нийтлэл 1
Usukhuu Galaa
IT13
IT13
Usukhuu Galaa
IT14
IT14
Usukhuu Galaa
IT12
IT12
Usukhuu Galaa
IT11
IT11
Usukhuu Galaa
IT10
IT10
Usukhuu Galaa
IT-9
IT-9
Usukhuu Galaa
IT-7
IT-7
Usukhuu Galaa
IT-6
IT-6
Usukhuu Galaa
IT-5
IT-5
Usukhuu Galaa
IT-4
IT-4
Usukhuu Galaa
IT-3
IT-3
Usukhuu Galaa
IT-2
IT-2
Usukhuu Galaa
Más de Usukhuu Galaa
(20)
Se304
Se304
Se205
Se205
Is320
Is320
Is201
Is201
Rdbms bie daalt
Rdbms bie daalt
Rdbms 300 test
Rdbms 300 test
DB-2
DB-2
нийтлэл 1
нийтлэл 1
IT13
IT13
IT14
IT14
IT12
IT12
IT11
IT11
IT10
IT10
IT-9
IT-9
IT-7
IT-7
IT-6
IT-6
IT-5
IT-5
IT-4
IT-4
IT-3
IT-3
IT-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) хэмжээг хуваалт бүрт зааж өгнө.
6.
Хуудасны бүтцийг зурсан
жишээ
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;}
10.
Жишээ 1 Хуудасны
үр дүн
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>
16.
Үр Дүн
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}-шинэ мөрөнд гаргана