Html5 Css 01

www.ilkaddimlar.
com Təlimçi: Rəşad Əliyev; 050 648 2737
HTML və CSS
Dərs 1:
Giriş
İlk Addımlar tədris portalı rashad@aliev.info

Rəşad Əliyev 050 648 2737
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737
HTML kursu
 HTML nə üçündür?
 Kimlər üçündür?
 Nələr əldə edəcəksiz
 Sonra nə öyrənməli?
Kursun materialları
 Modullar
 Tapşırıqlar
Nə öyrənəcəksiz:
 HTML-ın əsasları
 CSS
 Əlavə imkanlar
 Saytların İnternetdə yerləşdirilməsi
Giriş:
 XML, HTML, XHTML haqqında ümumi məlumat.
 Web server, web sayt, web səhifə nədir?
 HTML-i yaratmaq üçün istifadə edilən proqramlar
(Notepad++, EmEditor)
 HTML dili haqqında. Sənədin strukturu.
 <!DOCTYPE> nə üçün lazımdır
 Teq nədir? HTML sənəddə teqlərin quruluşu.
 Mətnin formatlanması. Block və inline elementlər.
 Şərhlərin istifadəsi
Tarixi
1994 Mart 1995
HTML 2.0 hazırlıq HTML 3 + CSS
W3 Consortium (W3C)
www.W3.org
2014 Yanvar 1997

HTML 5.0 HTML 3.2
Iş gedir
1991
CERN
HTML Dekabr 1997
22 yanvar 2008 HTML 4.0 + CSS 2.0
W3C rəsmi elan
"HTML 5 - hazırlanır"
1986
ISO-8879 2000 24 dekabr 1999
SGML XHTML 1.0 HTML 4.01
Brauzerlər
 Internet Explorer
 Firefox
 Chrome
 Mozilla
 Safari
 Opera
 Netscape
 AOL
http://www.w3schools.com/browsers/browsers_stats.asp
Əsas anlayışlar
 Web-sayt
 Web-server
 Web-ünvan
 Web-səhifə
*.html *.html *.html
...
Necə işləyir
1 HTML
WWW 2 PHP
CGI
Veb-server
3 ASP
4 ...
2 4
1 3
HTML
5 index.html
jpg, gif, swf,
avi, mpg …
HTML sənədi nədə düzəltməli?

 Notepad
 EmEditor
 Dreamweaver
 Notepad++
 Sublime Text
Adi HTML səhifə

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
Teq(tag)
<head>
<title>HTML səhifə</title>
</head>
<body>
<h1>Mənim ilk HTML sənədim</h1>
<hr>
<p>Birazdan biz bu qəribə simvolların nə etdiyini
öyrənəcəyik.</p>
</body>
</html>
HTML sənədin strukturu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional // EN"
"http://www.w3.org/TR/html4/loose.dtd"> Sənədin tipini təyin edən
<html> Sənədin əvvəli
<head> Başlığın əvvəli
Burada işçi məlumatlar yerləşdirilir.
</head> Başlığın sonu
<body> Sənədin gövdəsinin əvvəli
Burada sənədin görünən hissəsi yerləşdirilir.
</body> Sənədin gövdəsinin sonu
</html> Sənədin sonu
http://www.w3.org/TR/REC-html40/
Elements: Name – tag;
Sənədin başlığı
<html>
<head>
<title> Sənədin başlığı </title>

</head>
<body>
...sənədin gövdəsi...
</body>
</html>
Sənədin gövdəsi
<html>
<head> Qeydlər
...İşçi məlumatlar...
</head>
<body>
<hr> <!–- horizontal liniya -->
<p>Nə isə mətn. Bunlar saytda hansısa
məlumatlar ola bilər. Birinci abzas(paraqraf)
</p>
<p> İkinci abzas(paraqraf). Bunlar saytda
hansısa məlumatlar ola bilər.
</p> <!–- abzas -->
</body>
</html>
Elementlər necə olur?

Blok(block elements)
Strukturlaşmış format
Sətir(inline elements)
Vasitəsiz formatlaşma
Məntiqi formatlaşma (phrase elements)
Arzuolunmaz (deprecated)
Köhnəlmiş (obsolete)
Yeni (new)
Element
<title> M ə z m u n</title>
Açılan teq Bağlanan teq
Sətir elementin içində blok element olmaz!

Block və Inline elementlər

<div>Birinci div</div><div>Ikinci div</div>
<div>Üçüncü div</div>
<span>Birinci span</span><span>Ikinci span</span>

<span>Üçüncü span</span>
Strukturlaşmış mətn
<h1>Birinci dərəcəli başlıq</h1><p>P elementi abzasdır. Onun içində blok elementlər
<b>ola bilməz </b>. (P elementi də daxil olmaaqla).
Fontun stilini təqin edən elementlər:
<b>bold,</b>
<i>italic,</i>
<u>underline,</u>və s</p ><p>İkinci abzas</p>
Başlıqlar
<h1>Başlıq 1</h1>
<h2>Başlıq 2</h2>
<h3>Başlıq 3</h3>
<h4>Başlıq 4</h4>
<h5>Başlıq 5</h5>
<h6>Başlıq 6</h6>
Blok element
Horizontal xətt
<h1>Horizontal xətt</h1>
<hr>
<p>
Burda yeni abzas üçün mətn olacaq.
Blok element
Abzas
<P>
Burda yeni abzas üçün mətn
olacaq. Burda yeni abzas
üçün mətn olacaq. Burda
yeni abzas üçün mətn
üçün mətn olacaq.
</P>
<P>
Burda yeni abzas üçün mətn
üçün mətn olacaq.
Brouzerlər mətni necə göstərir

Səhifəni yaxşılaşdırırıq
<p>
Dərsə gedən bir uşaq
Çıxdı buz üstə qoçaq;
Sürüşdü birdən-birə,
Düşdü üz üstə yerə.
</p>
<p>Dərsə gedən bir uşaq

<p>Çıxdı buz üstə qoçaq;
<p>Sürüşdü birdən-birə,
<p>Düşdü üz üstə yerə.
Sətrin məcburi bölünməsi

<p>Dərsə gedən bir uşaq,
<br>Çıxdı buz üstə qoçaq;
<br>Sürüşdü birdən-birə,
<br>Düşdü üz üstə yerə.
Sənədin son görünüşü

<!– Kodun məsafələrlə formatlaşması -->
<html>
<head>
<title>Mənim ilk sənədim</title>
</head>
<body>
<hr>
<h2>Uşaq və buz</h2>
<p> Mirzə Ələkbər Sabir
<p>
Dərsə gedən bir uşaq
<br>Çıxdı buz üstə qoçaq;
<br>Sürüşdü birdən-birə,
<br> Düşdü üz üstə yerə.
<hr>
</body>
</html>
Laboratoriya işi
1 Lab_1 qovluğunda, index.html faylını açın
2 Səhifəni normal formaya salın

Elementlərin atributları
Atribut Atribut Atribut
<hr align="right" size="3" width="450" >
Teq Atributun qiyməti
Atributun adı
Atributlar bashlayan teqde olur, space ilə ayrılrlar

W3c-de bax
Atributları istifadə edirik

<h1 align="center"> .. </h1>
<p align="right"> .. </p>
<p align="justify"> .. </p>
<h2 align="left"> .. </h2>
<hr size="3">
<hr noshade>
<hr align="right" width="450">
<hr size="3" width="50%" align="center">
Blok sitat yaradırıq
<blockquote>
They went in single file, running like hounds on a
strong scent, and an eager light was in their eyes.
Nearly due west the broad swath of the marching Orcs
tramped its ugly slot; the sweet grass of Rohan had
been bruised and blackened as they passed.</blockquote>
Yazılan kimi formatlaşma

<pre>
Burda –
nə istəyiram,
necə istəyirəm yazıram.
Yazdıqlarım da eləcə çıxacaq

</pre>
ADDRESS elementi – Əlaqə vasitəsi

(Block element)
<p>Mənim ünvanım:<address>Bakı,
Azərbaycan, Xəzər Universiteti, Xəzər
İnternet İnstitutu, Telefon: 050 648
2737</address>
HTML-də Rənglər
Diapazon: 00 - FF (0 - 255)
16-lıq say sistemi:
#00FF00 – green (yaşıl)
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F #FF0000 – red (qırmızı)
#0000FF – blue (göy)
#FFFFFF – white (ağ)
#000000 – black (qara)
#FFFF00 – yellow (sarı)
#FFD700 - gold (qızılı)
#FFCC00 - tangerine (madarin)
#E49B0F - gamboge (qızılqül)
#FDE910 – lemon (limonu)
Fontun qarnituru
Serif (Times New Roman)
Sans-serif (Arial, Verdana, Tahoma)
Monospace (Courier)
Cursive
Fantasy
<font face="Arial,Verdana,sans-serif">
Mətn hansı fontda göstəriləcək?
</font>
http://en.wikipedia.org/wiki/Font_family_%28HTML%29#Generic_font_families
Mətnin formatlanması
<i> - italic </i>
<b> - bold </b>
<u> - underline </u>
<strike> - strike </strike>
<tt> - monospaced </tt>
<big> - big font </big>
<small> - small font </small>
<sup> - up text </sup>
<sub> - down text </sub>
Məntiqi formatlaşma
<em> - vacib franqlemtlərin yanakı seçilməsi
<strong> - Xüsusi vacib elementlərin yağlı seçilməsi
<ins> - fraqmentin açıq olaraq altıxətli seçilməsi üçün istifadə edilir. Bu mətnin yazılandan
sonra qeyd edilməsini göstərmək üçün istifadə edilir.
<del> - fraqmentin açıq olaraq silinmiş seçilməsi üçün istifadə edilir. Bu mətnin yazılandan
sonra silinməsini göstərmək üçün istifadə edilir.
<cite> - Sitatların yanakı seçilməsi üçün
<code> - Proqram kodunun fraqmentlə kimi qeyd edir
<kbd> - klaviaturadan daxil olunmuş mətn
<var> - Dəyişənlərin adları
<samp> - Bir neçə simvolun qeyd edilməsi üçün
<dfn> - qeyd edilmiş terminin təyini
<abbr title="Nə isə söz"> - abbreviatura
<acronym title="Nə isə söz"> - akronim
<q lang=“az"> - Dırnaq işarələrinin təyini
Məntiqi formatlaşma
Sınmayan məsafə
" " Düz dırnaq "
& & Ampersand &
< < “kiçik” işarəsi <
> > “böyük” işarəsi >
© © Copyright ©
® ® Registered ®
™ Trade Mark ™
Ə Böyük Ə hərifi Ə
ə Kiçik ə hərifi Ə
Yekun
 HTML sənəd hipertexti nişanlamaq üçün olan
elementlərdən ibarətdir və hipersənəd adlanır
 Element açılan və bağlanan teqlərdən ibarətdir. Bəzi
elementlərin bağlanan teqləri yoxdur.
 Atributlar açılan teqlərin daxilində yazılır. Onlar özləri bu
struktura malikdir “ad=qiyməti”. Bəzi atributların qiymətləri
yoxdur.
 Elementlər block və inline olurlar. Inline(sətir) elementlər
mətnin məntiqi formatlaşmasına təsir edirlər.

Html5 Css 01

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Html5 Css 01

Uploaded by

Copyright:

Available Formats

www.ilkaddimlar.

com Təlimçi: Rəşad Əliyev; 050 648 2737

İlk Addımlar tədris portalı rashad@aliev.info

2014 Yanvar 1997

*.html *.html *.html

HTML sənədi nədə düzəltməli?

Adi HTML səhifə

HTML sənədin strukturu

<head> Başlığın əvvəli

Burada işçi məlumatlar yerləşdirilir.

</head> Başlığın sonu

<body> Sənədin gövdəsinin əvvəli

Burada sənədin görünən hissəsi yerləşdirilir.

</body> Sənədin gövdəsinin sonu

</html> Sənədin sonu

<title> Sənədin başlığı </title>

Elementlər necə olur?

Açılan teq Bağlanan teq

Sətir elementin içində blok element olmaz!

Block və Inline elementlər

<span>Birinci span</span><span>Ikinci span</span>

Brouzerlər mətni necə göstərir

<p>Dərsə gedən bir uşaq

Sətrin məcburi bölünməsi

Sənədin son görünüşü

1 Lab_1 qovluğunda, index.html faylını açın

2 Səhifəni normal formaya salın

<hr align="right" size="3" width="450" >

Teq Atributun qiyməti

Atributlar bashlayan teqde olur, space ilə ayrılrlar

Atributları istifadə edirik

Blok sitat yaradırıq

Yazılan kimi formatlaşma

Yazdıqlarım da eləcə çıxacaq

ADDRESS elementi – Əlaqə vasitəsi

You might also like

.html .html *.html