HTML Dərsliyi - SadələrParaqraflar və "DIV". Mətni düzləndirməyi öyrənirik.
Bu bölmədə biz paraqraflar haqqında danışacağıq. Paraqraf aşağıdakı teq vasitəsi ilə verilir:
<p> </p>
Paraqraf vasitəsi ilə biz mətni mərkəzləşdirə bilərik:
<p align="center">mətn</p>
Paraqraf vasitəsi ilə biz mətni sol tərəf üzrə düzləndirə bilərik:
<p align="left">mətn</p>
Və ya mətni sağ tərəf üzrə düzləndirə bilərik:
<p align="right">mətn</p>
Hər iki tərəf üzrə nizamlaya bilərik:
<p align="justify">mətn</p>
İndi paraqrafı bizim sənədə daxil edək və görək nə alınacaq (Bizim nümunədə mən paraqrafı mətnin mərkəzləşdirilməsi ilə istifadə etdim (align="center"), siz isə paraqrafın digər xassələrini də yoxlayın (left, right və justify).
| |
|
|
<html>
<head>
<title>Menim ilk addimim</title>
</head>
<body text="#336699" bgcolor="#000000">
<p align="center">
Salam, bu menim ilk sehifemdir.
<br>
<font color="#CC0000"> Xosh gelmisiniz</font> :) </p>
</body>
</html> |
Bizim HTML və paraqrafa qayıdaq. Yadda saxlayın: Heç vaxt sənəddə aşağıdakı tip konstruksiyadan istifadə etməyin: <p></p>Heç bir elementdən ibarət olmayan boş <p> elementləri brouzerlər tərəfindən iqnor olunmur. Bunu yaddan çıxarmayın. Fikir verin ki, əgər mətndə paraqrafdan istifadə edilməyibsə, onda mətn susmaya görə sol tərəfdən düzlənmiş yazılır. Həmçinin onu da yadda saxlayın ki, paraqrafda yeni sətrə keçid olan <br> teqindən istifadə olunmur, yəni burada keçid susmaya görə yazılır. Əgər sizə bu keçid heç cür lazım deyilsə, onda nə etməli? <p align="center"> teqinə oxşar teq var: <center> mətn </center>
| |
|
|
<html>
<head>
<title>Menim ilk addimim</title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
Salam, bu menim ilk sehifemdir.
<br>
<font color="#CC0000">Xosh gelmisiniz</font> :) </center>
</body>
</html> |
Həmçinin, oxucumuz hirslənə bilər ki, "Bəs digər uyğunlaşma tipləri? Siz alternativ mərkəzləşmədən danışdınız." Narahat olmayın, sadəcə olaraq mən sizə hamısını danışa bilmədim :) <center> teqi yaxşıdır, lakin o HTML-in digər variantlarından mövcuddur (onlardan da çox olar, bu dünyada hər şey inkişaf edir, HTML də bunlardan kənarda qalmır). Hələ ki, bu teqi heç kim götürməyib, onu istifadə etmək olar, lakin çox da arzu olunan deyil. Bəs necə etməli? Yaxşısı budur <div></div> teqlərindən istifadə etməli, onun "align" atributunun aşağıdakı 4 xassəsi var: <div align="center"> mətn </div>
<div align="left"> mətn </div>
<div align="right"> mətn </div>
<div align="justify"> mətn </div>
| |
|
|
<html>
<head>
<title>Menim ilk addimim</title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
Salam, bu menim ilk sehifemdir.
<br>
<font color="#CC0000">Xoş gəlmisiniz</font> :) </div>
<p align="justify">
Men hele teze-teze virtual dunya ile tanish olmusham, lakin artiq ozume ev sehifesi duzeltmek isteyirem. Menim dostlarim ve tanishlarim menim shekillerime baxmaq ve menim haqqimda oxumaq uchun bura baxa bilerler, oz urek sozlerini qonaq kitabima yaza bilerler. Ola biler ki, kim ise tesadufen bu sehifeye daxil olsun ve menim daha bir virtual dostum artsin. :)
</p>
</body>
</html> |
Burada sizin üçün elə-belə, çıxış mətni yazmışam, yəqin ki, siz öz mətninizi fikirləşərsiniz. Lakin biz hər şeydən əvvəl <div> və <p> haqqında söhbəti sona çatdıraq. Paraqraf daxilində digər paraqraflar saxlamır, həmçinin də <div></div>. Yəni növbəti konstruksiya düzgün deyil və bu cür sənəd yaratmaq düzgün deyil: <p align="right">
<p>mətn</p>
<p>mətn</p>
<p>mətn</p>
</p>və <p align="right">
<div>mətn</div>
<p>mətn</p>
<div>mətn</div>
</p>Lakin <div> öz daxilində paraqraflar saxlaya bilir. Onun köməkliyi ilə biz onları məsələn, sağ tərəf üzrə düzləndirə bilərik. <div align="right">
<p>1-ci abzasın teqi</p>
<p>2-ci abzasın teqi</p>
<p>3-cü abzasın teqi</p>
</div>Əlbəttə ki, <p> və <div> özlərində təkcə elementlərin uyğunlaşmasını saxlamırlar. Lakin burda biz yalnız uyğunlaşmadan danışdığımız üçün <div> və <p>-nin digər xassələrindən danışmayacağıq, onlar haqqında növbəti mövzularda danışılacaq. Yəni bu bir az çətin mövzudur və buna hələ ki, siz hazır deyilsiniz.
Başlıqlar nədir və hərflərə necə ölçü verməli. Bu bölmədə biz mətnləri başlıqların köməyi ilə nişanlamağı və <font></font> teqinin daha yeni funksiyasını öyrənəcəyik. Başlıqlardan başlayaq. Başlıqların 6 növü mövcuddur:
<H1> mətn </H1>
<H2> mətn </H2>
<H3> mətn </H3>
<H4> mətn </H4>
<H5> mətn </H5>
<H6> mətn </H6>Demək burda H1 ən böyük, H6 ən kiçiyidir. Başlıqları əlavə edərək siz ziyarətçiyə sayta rahat bələd olmağa imkan verirsiniz. Başlıqların köməkliyi ilə siz mətnin strukturunu təyin edirsiniz. İndi isə başlıqlardan sənədimizdə istifadə edək. Mənə elə gəlir ki, "Salam, bu menim ilk sehifemdir" sözünü nişanlasaq yaxşı olardı:
| |
|
|
<html>
<head>
<title>Menim ilk addimim</title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
<H3>Salam, bu menim ilk sehifemdir.</H3>
<br>
<font color="#CC0000">Xosh gelmisiniz</font> :) </div>
<p align="justify">
Men hele teze-teze virtual dunya ile tanish olmusham, lakin artiq ozume ev sehifesi duzeltmek isteyirem. Menim dostlarim ve tanishlarim menim shekillerime baxmaq ve menim haqqimda oxumaq uchun bura baxa bilerler, oz urek sozlerini qonaq kitabima yaza bilerler. Ola biler ki, kim ise tesadufen bu sehifeye daxil olsun ve menim daha bir virtual dostum artsin. :)
</p>
</body>
</html> |
Nümunə üçün mən başlığın 3-cü mərhələsindən (<h3></h3>) istifadə etdim:) Baxın nə alındı. Gördüyünüz kimi başlıqlar təkcə iri şriftlə görsənmirlər, həmçinin də yağlı nişanlanırlar. Həm də bağlanan </hx> teqindən sonra avtomatik olaraq digər yeni sətrə keçid baş verir.
Başlıqlar mətnin müəyyən hissəsini nişanlamaq üçündür (sətirlər, frazalar). Əgər siz mətnin böyük hissəsini və ya bir sözü başlıqların köməyi ilə yeni sətirlərə keçmədən nişanlamaq istəyirsinizsə, onda nə etməli? Başlıqlarla bu alınmayacaq, ona görə də <font></font> teqini yada salaq:
<font size="+4"> mətn </font>
<font size="+3"> mətn </font>
<font size="+2"> mətn </font>
<font size="+1"> mətn </font>
<font size="+0"> mətn </font>
<font size="-1"> mətn </font>
<font size="-2"> mətn </font>
Həmişəki kimi yeni bilikləri praktikada tətbiq edirik. Gəlin "menim daha bir virtual dostum" sözünü nişanlayaq.
| |
|
|
<html>
<head>
<title>Menim ilk addimim </title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
<H3>Salam, bu menim ilk sehifemdir.</H3>
<br>
<font color="#CC0000"> Xosh gelmisiniz</font> :) </div>
<p align="justify">
Men hele teze-teze virtual dunya ile tanish olmusham, lakin artiq ozume ev sehifesi duzeltmek isteyirem. Menim dostlarim ve tanishlarim menim shekillerime baxmaq ve menim haqqimda oxumaq uchun bura baxa bilerler, oz urek sozlerini qonaq kitabima yaza bilerler. Ola biler ki, kim ise tesadufen bu sehifeye daxil olsun ve<font size="+1"> menim daha bir virtual dostum </font>artsin. :)
</p>
</body>
</html> |
Növbəti addıma keçməmişdən qabaq onu da qeyd etmək istəyirəm ki, dizaynerlərdə qiqantomiya adlı xəstəlik mövcuddur. Onun nişanları: Mətnlərin hədsiz böyük ölçüsü, xırda və yaraşıqlı düymələrin əvəzinə ekranın yarısı boyda düymələr və bütün hallarda gombul (yağlı) mətn. Ona görə də yada salıram: Standart size (susmaya görə) = "+0".
İstifadəçilərinizin gözlərinə heyfiniz gəlsin.
| 
Ana səhifə | AzNetin ən yaxşı əyləncə saytı 
