HTML. Doç. Dr. İsmail Rakıp Karaş Dersin Course Page: 2. Bölüm

Ebat: px

Şu sayfadan göstermeyi başlat:

Download "HTML. Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Dersin Course Page: www.ismailkaras.com/228. 2. Bölüm"

Nilüfer Batuk
8 yıl önce
İzleme sayısı:

1 HTML 2. Bölüm Doç. Dr. İsmail Rakıp Karaş (Son Güncelleme: ) Dersin Course Page:

2 HTML ile Metin Biçimlendirme / Styles - Formatting HTML etiketlerinin yarısından fazlası metin biçimlendirme komutlarıdır. HTML sayfada metin biçimlendirmesi dediğimiz zaman, metnin Internet alanımızı ziyaret eden kişinin bilgisayar ekranında hangi tür harfle (Arial, Times, Verdana, Helvetica, vd.), bu harfin normal türüyle mi, ya da siyah (bold) veya italik tarzıyla mı, hangi büyüklükte (12 punto, 18 punto, 24 punto), ve ne renk gösterileceğini, sayfanın ya da içinde bulunduğu tablo hücresinin sağına mı, soluna mı, ortasına mı bloklanacağını kasdediyoruz. More than half of the all HTML tags are formatting tags. Formatting tags means the font name, font size, normal/bold/it alic etc, or allignment and others.

3 Paragraf Başı Yapmak / Bir Alt Satıra Geçmek Pharagraph / Indent Paragrafları belirten etiket <p> dir. Bitiş etiketi de vardır. Paragraf bittiğinde </p> ile kapatılmalıdır. Bu etiket kullanıldığında paragraf başı yapılır ve paragraflar arasında boşluk oluşur. Sadece bir alt satıra geçmeyi sağlayan etiketi ise <br> dir. Bu etiketin bitiş etiketi yoktur. Tek başına kullanılır. Pharagraph tag is <p>. Has beginning and ending tag: </p>. This tag provides a paragraph indentation. A pharagraph is an object. Every objects, also pharagraphs has own attributes. To understand, apply in a word processor program. To shift to next line, <br> tag should be used. This tag has no ending tag. It is used stand alone.

4 <p> </p> Örnek/Exp: (Aşağıdaki kodları bir HTM dosya oluşturarak tarayıcınızda çalıştırınız ve deneyiniz.) <html> <head> <title>ali Yıldız ın SayfasıAntenler</title> <meta name="description" content="ali Yıldız, Ali Yildiz, Ali, Yildiz"> <meta http-equiv="content-type" content="text/html; charset=windows-1254"> </head> <body> <p>web Sayfama Hoşgeldiniz</p> <p>bu sayfada benimle ilgili bilgiler bulacaksınız.</p> </body> </html>

5 <br> Örnek/Exp: (Aşağıdaki kodları bir HTM dosya oluşturarak tarayıcınızda çalıştırınız ve deneyiniz.) <html> <head> <title>ali Yıldız ın SayfasıAntenler</title> <meta name="description" content= Ali Yıldız, Ali Yildiz, Ali, Yildiz"> <meta http-equiv="content-type" content="text/html; charset=windows-1254"> </head> <body> Web Sayfama Hoşgeldiniz <br> Bu sayfada benimle ilgili bilgiler bulacaksınız. </body> </html>

6 Bold / Italik / Üstü çizgili / Altı çizgili Bold / Italik / Strikeout/ Underline Metinleri bold (kalın) yapmak için kullanılan etiket <b> dir. Bitiş etiketi de vardır. Metin bittiğinde </b> ile kapatılmalıdır. Benzer şekilde italik (eğik) yapmak için kullanılan etiket ise <i> dir. Metin bittiğinde </i> ile kapatılmalıdır. <b> Defines bold text <i> Defines italic text <s> Defines strikeout text <u> Defines underline text Aynı şekilde üstü çizgili metin için <s> Altı çizgili metin için <u> kullanılır.

7 <b>, <i>, <s>, <u> Örnek / Exp: (Aşağıdaki kodları bir HTM dosya oluşturarak tarayıcınızda çalıştırınız ve deneyiniz.) <html> <head> <title>ali Yıldız ın SayfasıAntenler</title> <meta name="description" content= Ali Yıldız, Ali Yildiz, Ali, Yildiz"> <meta http-equiv="content-type" content="text/html; charset=windows-1254"> </head> <body> Web <b>sayfama</b> Hoşgeldiniz Bu sayfada <i>benimle</i> ilgili <s>bilgiler</s> <u>bulacaksınız</u>. </body> </html>

8 Font Metinlerin font özellikleri için kullanılır. Etiketi <font> dur. </font> ile kapatılmalıdır. <font face="arial"> Web Sayfama Hoşgeldiniz </font> Burada bir farklılık dikkatinizi çekmeli. Başlangıç etiketinden sonra bir takım özellikler/öznitelikler belirttik. Bu özellikler (attributes) çok sayıda olabilir: <font face="arial" size="16" color="#00ff00"> Web Sayfama Hoşgeldiniz </font> The <font> tag specifies the font face, font size, and font color of text. <font face="arial"> Web Sayfama Hoşgeldiniz </font> Font tag has attributes <font face="arial" size="16" color="#00ff00"> Web Sayfama Hoşgeldiniz </font>

9 <font> Örnek: (Aşağıdaki kodları bir HTM dosya oluşturarak tarayıcınızda çalıştırınız ve deneyiniz.) <html> <head> <title>ali Yıldız ın Sayfası</title> <meta name="description" content= Ali Yıldız, Ali Yildiz, Ali, Yildiz"> <meta http-equiv="content-type" content="text/html; charset=windows-1254"> </head> <body> <font face="arial"> Web Sayfama Hoşgeldiniz </font> <font face="times New Roman"> Bu sayfada benimle ilgili bilgiler bulacaksınız. </font> </body> </html>

10 Öznitelik Değerlerinin İfadesi / Usage of Attributes Öznitelik değerleri her zaman alıntı sembolü çif tırnak ya da tek tırnak işareti ile kapatılmalıdır. Örn: "değer" 'değer' img src= "resim/ilk.jpg" Çift tırnak işaretinin (") daha yaygın bir kullanımı vardır, fakat tek tırnak (') işareti de kullanılabilir. Not: Bazen, öznitelik değeri kendi içinde tırnak kullanmayı gerektirebilir, bu durumda tek tırnak işareti kullanılır: Attributes provide additional information about HTML elements. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value" If there is an attribute in an attribute single quotation mark should be used. name='john "ShotGun" Nelson'

11 Başlıklar / Headings Metinlerin boyutlarını <font> etiketinin size özelliği ile detaylı belirlemek mümkün olmakla birlikte, HTML bize başlık boyutları için daha pratik bir yöntem sunar. Bu yöntemle H1 birinci, yani en büyük, H6 sonuncu, yani en küçük olmak üzere altı ayrı büyüklükte başlık kullanma imkanımız vardır. Ana başlık ve alt başlıklar için yazı boyutu derecelendirmesi yapmak açısından bu etiketler tercih edilebilir. Dikkat: Bu altı derecenin yazı boyutları tarayıcıdan tarayıcıya farklılık gösterebilir. Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading. Headings Are Important. Use HTML headings for headings only. Don't use headings to make text BIG or bold. Search engines use your headings to index the structure and content of your web pages. Since users may skim your pages by its headings, it is important to use headings to show the document structure. H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.

12 <H..> Örnek / Exp: (Aşağıdaki kodları bir HTM dosya oluşturarak tarayıcınızda çalıştırınız ve deneyiniz.) <html> <body> <h1>this is heading 1</h1> <h2>this is heading 2</h2> <h3>this is heading 3</h3> <h4>this is heading 4</h4> <h5>this is heading 5</h5> <h6>this is heading 6</h6> </body> </html>

13 HTML Comments Kod içi notlar şu şekilde yazılır: <html> <body>  <p>this is a regular paragraph</p> </body> </html> Not: Not ekleyebilmek için açılış parantezinden hemen sonra ünlem işareti konulur.

14 HTML Text Formatting Subscript / Superscript <html> <body> This is<sub> subscript</sub> and <sup>superscript</sup> </body> </html>

15 Diğer bazı etiketler / Some other Formatting Tags <small> ve <big> etiketleri yazı boyutunda bir miktar küçültme yada büyüme yapar (Yaklaşık yarım punto) Defines smaller or bigger text Örn: <font size="4" > This is some text! <big> This is some text! </big> </font> <font size="4" > This is some text! <small> This is some text! </small> </font> <HR> Sayfaya yatay bir çizgi ekler / Defines a horizontal line <TT>..</TT>: Teleks Metni etiketi, işaretlediği metnin eşit genişlikte fontlarla (Courier gibi) gösterilmesini sağlar. The <tt> tag defines teletype text.

Benzer belgeler

Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU

Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU Elbistan MYO 2016-2017 Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU Web Sayfasını Kayıt Etmek : Share point designer ya da Notepad de oluşturduğumuz HTML kodunu kaydetmek için File Save As komutunu seçiniz. Kayıt