Valters Celmiņš
© 2006 - 2011
Apmācība mājas lapu izveidē izmantojot xHTML 1.0 un CSS 2.1 valodas

Nobeigums un kopsavilkums

Lai arī mājas lapa vēl nav 100% pabeigta, šeit pienāk apmācības beigas! Un tas ir ar nolūku...

Esmu izstāstījis pašus pamatus jeb ievadu tajā, kā veidot mājas lapas. No šī brīža sāksies īstā mācīšanās. Kā jau pamanījāt, mājas lapas būvēšana vairāk līdzinās puzles stelēsanai: ir daudzi it kā vienādi puzles gabaliņi, bet, kad tos saliek pareizās kārtībā, veidojas bilde! HTML un CSS nav nekas vairāk kā tagu un īpašību kombinēšana visdažādākajos veidos. Lai izveidotu labu mājas lapu, nav vajdzīgas kādas superīgas tehnoloģijas, gudras programmēšanas valodas vai ģeniāla galva. Tā visa ir vienkārša "rotaļāšanās" ar to, kas jums ir dots, mēģinot panākt vēlamo rezultātu... tieši tā pat, kā bērni to dara rotaļājoties - viņi spēs izveidot jebko no jebkā! Atveriet fantāziju un izdomu!

Kas tika izveidots?

Sekojošās apmācības laikā tika izveidota mājas lapa ar divām sadaļām, kuras vizuāli (vairāk vai mazāk) izskatās šādi:

Izejas kods mājas lapai ir sekojošs:

INDEX.HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Pirmā mājas lapa</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div id="container">
      <div id="top">
        <span id="mainTitle">Mana pirmā mājas lapa</span>
      </div>
      <div id="menu">
        <ul>
          <li>
            <a href="index.html">Galvenā lapa</a>
          </li>
          <li>
            <a href="foto.html">Fotogalerija</a>
          </li>
          <li>
            <a href="#">Kontaktinformācija</a>
          </li>
          <li>
            <a href="#">Kaut kāda cita sadaļa</a>
          </li
      </div>
      <div id="text">
        <h1>Virsraksts tēmai</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula, risus at sollicitudin 
venenatis, sem augue ullamcorper orci, ac egestas nunc ligula a dolor. Morbi semper congue turpis a placerat. 
Etiam porta tristique dolor nec aliquam. Sed eget vestibulum arcu. Pellentesque varius orci tempus tortor 
elementum hendrerit. Vivamus et lacinia arcu. Vestibulum mauris nisl, pharetra aliquet ultricies id, convallis eu 
sapien. Fusce malesuada egestas orci vel congue. Sed vestibulum egestas dignissim. Nam orci ante, mollis vulputate 
adipiscing blandit, commodo adipiscing neque. Nulla nunc nisi, ultricies at ullamcorper non, aliquet a eros. 
Vivamus pulvinar odio massa. Fusce tincidunt mauris in ipsum pulvinar nec sagittis nulla bibendum. Proin ornare 
eleifend velit, eget vehicula magna congue ut. Nunc sit amet massa sapien, eu lobortis purus. Mauris gravida 
ullamcorper blandit. Integer a justo leo, et luctus sem. Nam odio turpis, molestie eu dignissim ac, adipiscing non 
quam. Aliquam erat volutpat.</p>
        <p>Vivamus quis turpis nisi. Nam accumsan luctus nunc, et congue arcu gravida blandit. Aenean augue magna, 
varius condimentum faucibus quis, commodo vel lacus. Sed et odio lectus, at vulputate risus. Nam hendrerit 
accumsan sapien, vel facilisis velit hendrerit vitae. Praesent vestibulum venenatis tellus, eget porttitor dui 
porttitor et. Cras aliquam dui quis ante tristique sed tincidunt dolor vulputate. Duis porttitor nisi a lacus 
fermentum accumsan. Vestibulum egestas euismod nisl non tristique. Praesent convallis blandit mi, nec egestas 
metus molestie at. Pellentesque odio orci, scelerisque sit amet euismod in, blandit nec tortor. Morbi pharetra 
libero at metus eleifend elementum. Ut lectus velit, dictum nec pretium congue, egestas non neque. Nunc vitae 
neque purus, et rhoncus dui. Donec quis ornare tellus. Nam ultricies est justo. Suspendisse urna sem, bibendum ut 
pharetra nec, ultricies a sapien. Proin et leo urna.</p>
      </div>
      <div id="add">
      
      </div>
      <div id="footer">
      
      </div>
    </div>
  </body>
</html>
FOTO.HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Pirmā mājas lapa</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div id="container">
      <div id="top">
        <span id="mainTitle">Mana pirmā mājas lapa</span>
      </div>
      <div id="menu">
        <ul>
          <li>
            <a href="index.html">Galvenā lapa</a>
          </li>
          <li>
            <a href="foto.html">Fotogalerija</a>
          </li>
          <li>
            <a href="#">Kontaktinformācija</a>
          </li>
          <li>
            <a href="#">Kaut kāda cita sadaļa</a>
          </li
      </div>
      <div id="text">
        <h1>Fotogalerija</h1>
          <table>
            <tr>
              <td>
                <a href="images/test1_full.jpg" target="_blank">
                  <img src="images/test1_small.jpg" alt="" />
                </a>
              </td>
              <td>
                <a href="images/test2_full.jpg" target="_blank">
                  <img src="images/test2_small.jpg" alt="" />
                </a>
              </td>
              <td>
                <a href="images/test3_full.jpg" target="_blank">
                  <img src="images/test3_small.jpg" alt="" />
                </a>
              </td>
            </tr>
            <tr>
              <td>
                <a href="images/test4_full.jpg" target="_blank">
                  <img src="images/test4_small.jpg" alt="" />
                </a>
              </td>
              <td>
                <a href="images/test5_full.jpg" target="_blank">
                  <img src="images/test5_small.jpg" alt="" />
                </a>
              </td>
              <td>
                <a href="images/test6_full.jpg" target="_blank">
                  <img src="images/test6_small.jpg" alt="" />
                </a>
              </td>
            </tr>
          </table>
      </div>
      <div id="add">
      </div>
      <div id="footer">
      </div>
    </div>
  </body>
</html>
STYLE.CSS
*
{
 margin: 0; padding: 0;
 font: 12px/120% Verdana, "DejaVu Sans", sans-serif;
}

body
{
 background: url('design/back.jpg') repeat;
}

div#container
{
 width: 900px;
 border-width: 0 1px;
 border-style: solid;
 border-color: black;
 background-color: white;
 margin: 0 auto;
}

div#top
{
 width: 100%;
 height: 146px;
 background-image: url('design/top.jpg');
}

div#menu
{
 width: 100%;
 height: 24px;
 border-width: 1px 0;
 border-style: solid;
 border-color: black;
 background: url('design/unactive.jpg') repeat-x;
}

div#text
{
 width: 700px;
 padding: 10px;
 float: left;
}

div#add
{
 width: 179px;
 height: 500px;
 border-left: 1px solid black;
 float: right;
}

div#footer
{
 width: 100%;
 height: 20px;
 border-top: 1px solid black;
 background-color: #D8EDCE;
 clear: both;
}

#menu ul
{
 list-style-type: none;
}

#menu ul li
{
 display: block;
 float: left;
}

#menu ul li a
{
 display: block;
 font-size: 14px;
 text-decoration: none;
 font-weight: bold;
 color: black;
 border-right: 1px solid black;
 padding: 3px 40px;
}


#menu ul li a:hover
{
 background: url('design/active.jpg') repeat-x;
 color: #333;
}

#top span#mainTitle
{
 font-size: 36px;
 color: #060;
 font-style: italic;
 font-family: Verdana, "DejaVu Sans", sans-serif;
 display: block;
 width: 220px;
 position: relative;
   top: 40px;
   left: 150px;
}

#text h1
{
 font-size: 16px;
 font-weight: bold;
 font-style: italic;
 color: #060;
 border-bottom: 2px solid #060;
 padding: 10px 0 5px;
}

#text p
{
 text-indent: 1.27cm;
 text-align: justify;
 padding: 5px 0;
}

table
{
 border-collapse: seperate;
 border-spacing: 5px;
}

td
{
 border: 1px solid #999;
 width: 224px;
}

Vēl mājas lapas tapšanā tika izmantoti 16 attēli, no kuriem 4 attēli domāti dizainam, bet 12 fotogalerijai. Kopējais attēlu izmērs ir tikai nedaudz virs 2 megabaitiem (2188KB jeb 2,1MB).
Tie pieejami jau sakārtotā veidā pa mapītēm šeit ZIP formātā (MD5 neticīgajiem: BEBC6A9BB57CAEE6E1EBC69D5E7008A6).

Ko darīt tālāk?

HTML un CSS ir prakses un teniņa jautājums. Zināt nenozīmē prast! tāda mājas lapiņa, kādu es šeit demonstrēju mācību nolūkos,ir samērā pliekana. Kārtīgas lapas dizainā ir krietni sarežģītākas, plašākas, detalizētākas un ... smukākas! Tā kā HTML un CSS nav nekas vairāk par dažādu kodu kombināciju veidošanu, tad to arī dariet - mēģiniek, kombinējiet un eksperimentējiet, lai redzētu, kas sanāk.

Nākamais skolis uz augšu būtu lietotāja gala programmēšanas valoda JavaScript. Šī valoda parasti iet roku rokā ar HTML un CSS, tomēr tā jau ir programmēšanas, nevis skriptošanas vaoda, un tā jau ir laktiņa augstāk!

Pēc tam jau sākas galējais mājas lapu izstrādes process - servera gala programmēšanas valodas, datu bāzes un vēl visvisādi brīnumi. Tādi vārdi kā PHP, MySQL, Ruby On Rails, ASP .NET, MS SQL, Python... tie ir tikai daži rīki un programmēšanas valodas no visa klāsta, kas tiek izmantots mājas lapās!

Izskatam šeit ir nozīme. Arī attēlu projekciju tehnoloģijās ir daudz ko darīt. Viena no pēdējo laiku populārākajiem reklāmu, kustīgu attēlu, spēlīšu un visdažādāko vizuālo aplikāciju veidošanas rīkiem ir Adobe Flash! Flešs spēlītes... mmm, kuras gan tās nezina, kaitinošie reklāmu banneri - tas viss ir Flash darbiņš.


Kā jau jūtat, mājas lapu veidošana ir izvērtusies par ko daudz vairāk kā HTML un CSS! Un tomēr - HTML ir pamatu pamats jebkam, kas atrodas internetā! Nav neviena mājas lapu izstrādātāja, kas kaut daļēji nepārzina HTML/CSS un nav ar to strādājis kaut vienu reizi! Bez tā nevar iztikt un no tā nevar aizmukt.

VEIKSMI TĀLĀKĀ MĀCĪBU PROCESĀ!