Хуудсыг мужид хуваах

HTML код

<body>

<header> Толгой хэсгийн муж </header>

<div class="container">

<nav>

Цэсний хэсгийн муж

</nav>

<section>

Мэдээний хэсгийн муж 1

</section>

<section>

Мэдээний хэсгийн муж 2

</section>

<section>

Мэдээний хэсгийн муж 3

</section>

</div>

<footer> Хөлний хэсгийн муж, бэхжүүлсэн </footer>

</body>

CSS код

<style>                                     /* дотоод хэлбэрийн CSS */

body {                                      /* хуудасны их биеийн үндсэн хэлбэр тодорхойлох */

  margin-bottom: 80px;             /* доод талаас авах үндсэн зай*/

  font-family:Verdana;              /* үндсэн текстийн фонт */

  text-align: center;  }               /* үндсэн текстийн зэрэгцүүлэлт */

header {                                   /* толгой мужийн хэлбэр тодорхойлох*/

  position: relative;                   /* мужийн байрлал тодорхойлох (харьцангуй) */

  height: 70px;                          /* мужийн өндөр */

  background-color: #E4FFFE; /* мужийн дэвсгэр өнгө */

  border: solid blue 3px;                       /* мужийн хүрээний өнгө */

  border-radius: 10px;  }                      /* мужийн өнцөг */

.container {                              /* үндсэн мэдээний хэсгийн хэлбэр тодорхойлох */

  position: relative;                 

  border: solid red 3px;         

  border-radius: 10px;           

  height: 700px;              }

nav {                                        /* цэсний мужийн хэлбэр тодорхойлох */

  position: absolute;

  margin-left: 5px;                    /* зүүн захын зай */

  margin-top: 5px;                    /* мужийн дээд талын обьект хүртэлх захын зай */

  width: 200px;                        /* мужийн өргөн */

  height: 400px;                                    /* мужийн өндөр */

  border: solid green 3px;

  border-radius: 10px;  }

section {                                  /* мэдээний хэсгийн хэлбэр тодорхойлох */

            /* Жич: Мужийн байрлал заагаагүй үед үндсэн тохиргоо нь статик байна */

  margin-left: 210px;             

  margin-top: 10px;

  height: 100px;

  border: solid yellow 3px;

  border-radius: 10px;  }

footer {                                                /* хөлний мужийн хэлбэр тодорхойлох */

  position: fixed;       /* мужийн байрлал (бэхжүүлсэн буюу ямар ч үед байрнаасаа хөдлөхгүй) */

  bottom: 0;

  left: 0;

  right:0;

  height: 70px;

  background-color: white;

  border: solid green 3px;  }

</style>

Box sizing

HTML код

<body>

<div class="one"> өргөн ба өндөр + муж доторх зай + хүрээ = элементийн бодит хэмжээ </div>

<div class="two"> өргөн ба өндөр + муж доторх зай + хүрээ = элементийн бодит хэмжээ </div>

</body>

CSS код

<style>                                                 /* Дотоод хэлбэрийн CSS */

.one {                                       /* one нэртэй класс зарлаж байна */

  width: 500px;                        /* мужийн өргөн */

  margin: 20px auto;                 /* мужийн гадна талын зай */

  border: solid yellow 5px;  }   /* мужийн хүрээ, түүний өнгө, хэмжээ */

.two {                                       /* two нэртэй класс зарлаж байна */

  width: 500px;                        /* мужийн өргөн */

  margin: 20px auto;                 /* мужийн гадна талын зай */

  padding: 50px;                                   /* мужийн хүрээ болон доторх обьект хоорондын зай */

  border: solid blue 5px;           }         /* мужийн хүрээ, түүний өнгө, хэмжээ */

</style>

HTML5 хуудасны бүтэц

<!DOCTYPE html>                              <! HTML5, Баримтын зарлалт >

<html lang="en">                                

<head>

<meta charset="utf-8">                        <! HTML5, Encoding зарлалт >

<title>HTML5</title>

<style>                                     /* дотоод хэлбэрийн CSS эхлэл */

body {                                      /* вэбийн ерөнхий хэлбэр тодорхойлох */

    font-family: Verdana;

    font-size: 0.9em; }

header, footer {                                    /* хуудасны толгой болон хөл мужийн хэлбэр тодорхойлох */

    padding: 10px;

    color: white;

    background-color: black; }              

section {                                  /* ерөнхий мэдээний мужийн хэлбэр тодорхойлох */

    margin: 5px;

    padding: 10px;

    background-color: lightgrey; }

article {                                                /* мэдээ оруулах мужийн хэлбэр */

    margin: 5px;

    padding: 10px;

    background-color: white; }

nav ul {                                                /* хуудасны цэс мужийн хэлбэр */

    padding: 0; }

nav ul li {                                 /* цэсний текстийн хэлбэр */

    display: inline;

    margin: 5px; }

</style>                                    <! дотоод хэлбэрийн CSS төгсгөл >

</head>

<body>

<header>                                  <! толгойн муж тодорхойлох header таг >

<h1>Mongol News</h1>

</header>

<nav>                                      <! цэсний муж тодорхойлох nav таг >

<ul>

  <li>Мэдээ</li>

  <li>Боловсрол</li>

  <li>Нийгэм</li>

</ul>

</nav>

<section>                                 <! мэдээний ерөнхий муж тодорхойлох section таг >

<h2>Мэдээний хэсэг</h2> 

<article>                                   <! мэдээ тодорхойлох article таг >

<h2>Мэдээ</h2>

  <p>Hyper Text Markup Language буюу HTML нь вэбийн үндсэн суурь хэл юм. 1990 онд анхны хувилбар гарснаас хойш өдгөө 5 дахь шинэчилсэн хувилбар нь (2008) одоо ч хөгжүүлэгдсээр байна.</p>

</article>

<article>

<h2>Мэдээлэл</h2>

  <p>Hyper Text Markup Language буюу HTML нь вэбийн үндсэн суурь хэл юм. 1990 онд анхны хувилбар гарснаас хойш өдгөө 5 дахь шинэчилсэн хувилбар нь (2008) одоо ч хөгжүүлэгдсээр байна.</p>

</article>

</section>

<footer>                                               <! хөлний муж тодорхойлох footer таг >

<p>&copy; 2014 Mongol News</p>

</footer>

</body>

</html>

HTML4 хуудасны бүтэц

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">       <! HTML4, Баримтын зарлалт>

<html>

<head>                                                 <! толгой хэсгийн эхлэл >

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">            <! Encoding зарлалт >

<title> HTML4 </title>                         <! хуудасны гарчиг >

<style>                                     /* дотоод хэлбэрийн CSS эхлэл */

body {                                      /* вэбийн ерөнхий хэлбэр тодорхойлох */

    font-family: Verdana;                       /* үндсэн текстийн фонт */

    font-size: 0.9em;  }              /* үндсэн текстийн хэмжээ */

div#header, div#footer {          /* хуудасны толгой болон хөл хэсгийн хэлбэр тодорхойлох id */

    padding: 10px;                     /* дотор талын зай */

    color: white;                         /* дотор обьектын өнгө */

    background-color: black; }   /* хэсгийн дэвсгэр өнгө */

div#content {                           /* хуудасны мэдээний хэсгийн хэлбэр тодорхойлох id */

    margin: 5px;                         /* гадна талын зай */

    padding: 10px;

    background-color: lightgrey; }

div.article {                              /* хуудасны мэдээ оруулах хэсгийн хэлбэр тодорхойлох класс */

    margin: 5px;

    padding: 10px;

    background-color: white; }

div#menu ul {                          /* хуудасны цэсний хэсгийн хэлбэр тодорхойлох id */

    padding: 0; }

div#menu ul li {                       /* цэсний текстийн хэсгийн хэлбэр тодорхойлох id */

    display: inline;                    

    margin: 5px; }

</style>                                    /* дотоод хэлбэрийн CSS төгсгөл */

</head>                                    /* толгой хэсгийн төгсгөл */

<body>                                    <! их бие хэсгийн эхлэл >

<div id="header">                    <! толгой хэсгийн div таг, header id-тай холбогдсон>

<h1>Mongol News</h1>         <! толгой хэсгийн гарчиг >

</div>                                      <! хэсгийн төгсгөл >

<div id="menu">                      <! цэсний хэсгийн div таг, menu id-тай холбогдсон>

<ul>                                         <! жагсаалт буюу цэсний текст тодорхойлох >

  <li>Мэдээ</li>                      

  <li>Боловсрол</li>

  <li>Нийгэм</li>

</ul>

</div>

<div id="content">                   <! Мэдээний хэсгийн div таг, content id-тай холбогдсон>

<h2>Мэдээний хэсэг</h2>

<div class="article">                <! Мэдээ хэсгийн div таг, article class-тай холбогдсон>

<h2>Мэдээ</h2>

  <p> Hyper Text Markup Language буюу HTML нь вэбийн үндсэн суурь хэл юм. 1990 онд анхны хувилбар гарснаас хойш өдгөө 5 дахь шинэчилсэн хувилбар нь (2008) одоо ч хөгжүүлэгдсээр байна.</p>                                   <! мэдээний текст>

</div>

<div class="article">                <! мэдээлэл хэсгийн div таг, article class-тай холбогдсон>

<h2>Мэдээлэл</h2>

  <p>Hyper Text Markup Language буюу HTML нь вэбийн үндсэн суурь хэл юм. 1990 онд анхны хувилбар гарснаас хойш өдгөө 5 дахь шинэчилсэн хувилбар нь (2008) одоо ч хөгжүүлэгдсээр байна.</p>

</div>

</div>

<div id="footer">                     <! hөлний хэсгийн div таг, footer id-тай холбогдсон>

<p>&copy; 2018 Mongol News</p>    <! хөлний хэсгийн текст >

</div>

</body>                                   <! их биеийн төгсгөл >

</html>

Хурдан бичгийн Typer программын суулгац

Дараах холбоосоор татан авна уу

http://share.hiub.mn/download.htm?id=4nv8rsrmlrm2j8isgtqbhdkvm9&fbclid=IwAR1wAt54cuvENcJgr0CiQxZZJEfJb0uKtNf6eTh3TVdCpeylmB5b5BRiSfE

Hot patotoes программын суулгац

Суулгацыг дараах холбоосоор татан авна уу

https://drive.google.com/file/d/1C07ioUlDBFkT_lpDL8kGjSOC8hTIvygI/view?usp=sharing

Dreamweaver программын хичээл

Хичээлийг дараах холбоосоор татан авч үзнэ ү

https://drive.google.com/file/d/1ejM7FVtkq5NkaK-YLf9lqnG1xi5DGbq7/view?usp=sharing