HTML KODLARI HTML Dokümanındaki ilk etiket <html>’dir.

Slides:



Advertisements
Benzer bir sunumlar
HTML.
Advertisements

Resimler.
HTML e GİRİŞ Temel HTML etiketleri.
HTML
Bilgi ve İletişim Teknolojileri Dersi
ŞAHİN AKDAĞ.
HTML’e Devam Uygulama.
HTML (HyperText Markup Language)
HTML’ ye Giriş Uzm. Murat YAZICI.
BLOG KULLANIM REHBERİ.  Giriş yapmadan blog üzerine bilgi ekleyemeyeceğinizi unutmayın. Açılan sayfada ilk önce kullanıcı adınızı ve şifrenizi girin.
HTML Ders Notları.
RESİM FOTOĞRAF İŞLEME YAZILIMLARI.
Web Tasarımı Öğr.Gör. Hüseyin DURAN.
Temel Bilgisayar Bilimleri Dersi
Kelime İşlemci Programı
HTML’ye GİRİŞ Dr. Devkan Kaleci
Stil Sayfaları HTML dosyaları oluştururken her satır ve paragraf için gerekli biçimleri ilgili yerlerde her seferinde belirtmemiz gerekir. Bazı durumlarda.
Tablosuz Tasarım Div ler.
ÖĞRENME FAALİYETİ 3. PARAGRAF DÜZENLEME.
HTML’E GİRİŞ.
CSS CSS- Cascading Style Sheets: Stil şablonları HTML'e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir web teknolojisidir.
ÖDEVLER 1-Listeleme etiketleri 2-Color 3-Sayfa içinde bağlantı oluşturma Hilal BAYIR 2344 TUZLA TEKN İ K OKULLARI.
BDEM105 Ünite 5: Word
Kutu Modeli Özellikleri
Temel HTML Eğitimi Erman Yükseltürk.
HTML (HYPER TEXT MARKUP LANGUAGE) TEMEL ETİKETLERİ
İNTERNET PROGRAMCILIĞI I BTP 207 Ders 6. Metinleri biçimlendirmek için kullanılır. Özellikleri ve aldıkları değerler:  Color: Metnin rengini belirler.
CSS Birimleri.
WINDOWS TEMEL İŞLEMLER
Font Özellikleri Web sayfamızdaki metinlerin font ailesini, boyutunu, kalınlık ayarlarını, büyük-küçük harf olmasını ve stilini değiştirmek için kullanılır.
SOSYAL BİLGİLER ÖĞRETMENLİĞİ BİLGİSAYAR 2 NOT 2
HTML HYPER TEXT MARKUP LANGUAGE Burcu Yılmaz – İ brahim Mert Bilişim Teknolojileri Ö ğ retmeni.
CSS – Stil Şablonları (Cascading style Sheet)
Bilgisayarda Ofis Programları
İNTERNET PROGRAMLAMA - 1
İNTERNET PROGRAMCILIĞI I
HTML :Hyper Text Markup Language explorer, firefox, opera herhangi bir derleyiciye ihtiyaç duymadan çalışabilir metin biçimlendirme resim ekleme ve biçimlendirme.
1 İNTERNET PROGRAMLAMA - 1 Bağlantılar Öğr.Gör. Serkan KORKMAZ Harran Üniversitesi Birecik Meslek Yüksekokulu.
İNTERNET PROGRAMLAMA - 1
İNTERNET PROGRAMLAMA - 1
STiL ŞABLONU (CSS) TEMELLERİ
POWER POİNT SUNU HAZIRLAMAK
BİÇİMLENDİRME İŞLEMLERİ
İLERİ HTML.
İNTERNET PROGRAMCILIĞI I
İNTERNET PROGRAMLAMA - 1
Tablo Özellikleri Tablo oluştururken kullandığımız , , ve etiketlerine şu ana kadar gördüğümüz özellikleri uygulayarak görsel açıdan.
HTML (Hyper Text Markup Language) İnternet dökümanları oluşturmaya yarayan işaretleme dilidir.
WEB TASARIMININ TEMELLERİ
WEB TASARIMININ TEMELLERİ
HTML HYPER TEXT MARKUP LANGUAGE Ayşe AK İ DA Ğ I Bilişim Teknolojileri Ö ğ retmeni.
WEB SİTESİ YAPIYORUM HTML
WORD WORD UYGULAMA.
Yrd. Doç. Dr. Doğan AYDOĞAN
KELİME İŞLEMCİ PROGRAMI
CSS NEDİR.
2-Hafta Temel İşlemler * Html Komutlarının Yapısı * Açıklamalar
Dr. Erkan TANYILDIZI Ders Notları
İnternet Programlama-I HTML-TABLOLAR. HTML TABLOLARI HTML DİLİNDE TABLO OLUŞTURMAK İÇİN TAGI KULLANILIR. İYİ BİLİNMESİ GEREKEN KONULARDAN BİRİDİR ÇÜNKÜ.
HTML Bu sunu PowerPoint'in yeni yeteneklerini gösterir ve en iyi Slayt Gösterisi'nde görüntülenebilir. Bu slaytlar, PowerPoint 2010'da oluşturacağınız.
Temel Bilgisayar Bilimleri Dersi
BİTİRME ÖDEVİNİN BAŞLIĞI Öğrencinin Numarası, Adı Soyadı
HTML Dili ’ nin Genel Özellikleri. HTML Nedir? İşaretleme dili (HyperText Markup Language) Belirteçler (tags) W3 konsorsiyumu (Tim Berners-Lee) W3 konsorsiyumu.
MS WORD Kullanımı OFFICE DÜĞMESİ HIZLI ERİŞİM ARAÇ ÇUBUĞU MENÜLER
BİTİRME ÖDEVİNİN BAŞLIĞI Öğrencinin Numarası, Adı Soyadı
HTML HTML Stilleri.
WEB TASARIMI STİL ŞABLONLARI (CSS KULLANIMI) SAVAŞ TUNÇER.
WEB TASARIMI – HTML BİLGİSİ SAVAŞ TUNÇER
WEB TASARIMI HTML LİSTELER VE FRAMELER SAVAŞ TUNÇER.
İST1111 BİLGİSAYAR UYGULAMALARI HTML
Sunum transkripti:

HTML KODLARI HTML Dokümanındaki ilk etiket <html>’dir. <head> ve </head> etiketleri arasında kalan kısım başlık bilgilerini içerir. <title> ve </title> etiketleri arasında kalan kısım dökümanınızın başlık bilgilerini içerir. <body> ve </body> etiketleri arasında kalan kısım, tarayıcı penceresinde görüntülenecek olan kısımı içerir.

Body Etiketi Özellikleri <BODY> etiketleri ile tanımlanan <BODY> bölümüne sayfamızda görünmesini istediğimiz bilgileri yazarız. <BODY> etiketi birçok özelliğe sahiptir. Bunların çok sık kullanılanları; BACKGROUND BGCOLOR TEXT LINK VLINK ALINK

Body Etiketi Özellikleri BACKGROUND Sayfamızın arka planında gözükmesini istediğimiz resmi belirtmede kullanırız. Arka plan resmi kaynak dosyası olarak *.gif veya *.jpg dosyalarını kullanırız. Arka plan resmi web sayfasını doldurmaz, döşenir.

Body Etiketi Özellikleri <BODY BACKGROUND= “resim.gif” ></BODY> Örnek: <HTML> <HEAD> <TITLE> Arka Plan Resmi</TITLE></HEAD> <BODY BACKGROUND=“resimler/artalan.gif”> <!--Diskette bulunan bir resim artalan olarak görüntüleniyor... --> <B> Web Tasarımı</B> </BODY> </HTML>

Body Etiketi Özellikleri BGCOLOR Sayfamızın arka plan rengini belirtmede kullanırız. Bu özelliğe vereceğimiz değerler renk adı olabileceği gibi rengin hexadecimal RGB renk kodu da olabilir.

Body Etiketi Özellikleri <BODY BGCOLOR =”renk”>…..</BODY> Aşağıda HTML 3.2 nin desteklediği 16 renk adı yer almaktadır.

Body Etiketi Özellikleri <BODY BGCOLOR =”renk”>…..</BODY> Not: Bazı Web Browser lar yukarıdakilerin haricinde renk adlarını da destekler. Mesela Internet Explorer lightgreen, darkgreen vs. gibi renkleri de destekler. Ama herkesin aynı Browser dan sayfa isteminde bulunmayacağını göz önüne alarak yukarıdaki renk isimlerini ya da hexadecimal renk kodunu kullanmak daha sorunsuz olacaktır.

Body Etiketi Özellikleri <BODY BGCOLOR =”renk”>…..</BODY> Örnek: Daha önce hazırladığımız bir html sayfasının <BODY> etiketini <BODY bgcolor=”yellow”> ya da <BODY bgcolor=”#FFFF00”> olarak değiştirelim. Arka plan renginin sarı olduğunu görürüz. Not: Bir <BODY> etiketinde BACKGROUND ve BGCOLOR özelliklerinin her ikisine de değer atandığında BACKGROUND resmi gösterilecektir.

Body Etiketi Özellikleri Diğer <BODY> Özelikleri TEXT:Metin rengi LINK: Ziyaret edilmemiş link rengi VLINK: Ziyaret edilen link rengi (vizited link) ALINK: Kullanıcı Mouse ile linke tıkladığında Mouse basılı iken gözükecek olan renktir. BGPROPERTIES: Bu özelliğe fixed değeri atandığında arka plan resmi sabit olup kaydırma çubuğu ile arka plan resmi hareket etmeyecektir.

Diğer Body Özellikleri Diğer <BODY> Özelikleri <HTML> <HEAD> <TITLE>Diğer Body Özellikleri</TITLE></HEAD> <BODY background="bg.jpg" bgcolor="gray" text="white" link="yellow" vlink="aqua" alink="red" bgproperties="fixed"> <H1 align="center">WEB SAYFAMA HOŞ GELDİNİZ</H1> <HR> <H2>Web Sayfası</H2> <HR> Fırat Üniversitesinin Sayfasına Gitmek İçin <A href="http://www.firat.edu.tr” target=“_blank”>Tıklayınız</A> <BR> Karadeniz Teknik Üniversitesinin Sayfasına Gitmek İçin <A href=“http://www.ktu.edu.tr“ target=“_blank”>Tıklayınız</A> <BR> Arama motoru <A href="http://www.google.com.tr“ target=“_blank”>Google</A> <BR> </BODY> </HTML>

Diğer Body Özellikleri Diğer <BODY> Özelikleri SONUÇ

<HR> Etiketi <HR WIDTH=”uzunluk” COLOR=”renk” SIZE=”yükseklik” NOSHADE> En yalın hali <HR> son etiketi yoktur. Web sayfasına belli bir uzunlukta,renkte ve boyutta yatay bir çizgi çizmek için kullanılır.  WIDTH : Sayfada bulunan yatay çizginin uzunluğunu piksel veya % olarak burada belirlenir. Piksel ekrandaki nokta sayısı ile ilgilidir. % ise ekrandaki bir satırı kaplama oranıdır. Örneğin 80% bir satırın %80 ni kaplayacak şekilde bir yatay çizgiyi işaret eder. SIZE : Çizginin kalınlığı. 1-5 arası değerler kullanılır. COLOR : Çizginin rengi. NOSHADE : Yukarıdaki 3 durumda da çizginin bir gölgesi vardır. Bu parametre kullanılırsa yatay çizginin gölgesi ortadan kalkar.

<HR> Etiketi Örnek <HTML> <HEAD><TITLE>HR Örneği</TITLE></HEAD> <BODY BGCOLOR=#66CCFF> <HR> <HR WIDTH=75% NOSHADE> <HR COLOR=#FF6600 WIDTH=200 SIZE=3 NOSHADE> <HR COLOR=Red WIDTH=100 SIZE=3> <HR COLOR=Yellow WIDTH=300 SIZE=3 NOSHADE> </CENTER> </BODY> </HTML>

Metin Biçimleme

Belge Biçim Etiketleri (Document Formatting Tags)

Belge Biçim Etiketleri HTML çok sayıda biçimlendirme etiketi sunar. Bu etiketlerle belgede; başlık oluşturur, metni kalın, italik, altçizgili yapar, madde imlerini oluşturur ve yatay çizgiler oluşturabilirsiniz. Bunlardan bazıları aşağıdaki tablodadır.

Belge Biçim Etiketleri İLK ETİKET SON ETİKET AÇIKLAMA <H1>...<H2> </H1>...</H2> Header Tags: Başlık etiketleridir. 1 numaralısı en geniş olanıdır. Varsayılan hizalama (align) sol (left) olup istersek değiştirebiliriz. <STRONG> </STRONG> Strong Emphasis: Güçlü Vurgu Ediketidir. Genellikle Bold kalın metin olarak gözükür. <EM> </EM> Emphasis: Vurgu Etiketi. Genellikle italik gözükür. <B> </B> Bold: Kalın yazı <I> </I> Italic: İtalik yazı <U> </U> Underline: Altçizgili yazı <SUP>  </SUP> Bu iki deyim arasına yazılan metin üst indis olarak işlem görür. <SUB> </SUB> Bu iki deyim arasına yazılan metin alt indis olarak işlem görür.

Belge Biçim Etiketleri İLK ETİKET SON ETİKET AÇIKLAMA <PRE> </PRE> Preformatted: Metni Courier fontu gibi her bir karakteri aynı genişlikte gösterir. Bu tip fontlara font-pitch denir. Web sayfasında yazılan kelimelerin arasında yalnız bir boşluk vardır. Ayrıca bir alt satıra geçerken <BR> deyiminin kullanılması gerektiği daha önce bahsedilmişti. Web sayfasında yazdığınız metnin NodPad e yazdığınız formatta görünmesi için bu deyim kullanılır. <P> </P> Paragraph: Paragraf etiketi. Kapatma etiketi kullanılmaya bilir. Align değeri varsayılan olarak left olup bu etiket bloğundan önce ve sonra bir satır boş bırakılır. <DIV> </DIV> Division: Bölüm Etiketi. Sayfada yeni bir bölüm açmada kullanılır. Align özelliğinin varsayılan değeri left olup P etiketinde olduğu gibi bloktan önce ve sonra boş satır yoktur.

Belge Biçim Etiketleri İLK ETİKET SON ETİKET AÇIKLAMA <CENTER> </CENTER> Arada yazılan metni ortalamada kullanılır. Bunun yerine <DIV align=”center”> </DIV> de kullanılabilir. <BR> yok Line Break: Satır kırma etiketi. <HR> Horizontal Rule: Yatay çizgi etiketi <BASEFONT> Sayfanın genel metin büyüklüğünü ve rengini değiştirmede kullanılır. size, color özellikleri vardır. <FONT> </FONT> Bir metin bloğunun büyüklüğünü, rengini ve biçimini ayarlamada kullanılır. <BIG> </BIG> Kullanıldığı alanda geçerli olan fontun büyüklüğünün 1 derece büyüğünü yazmada kullanılır <SMALL> </SMALL>

Metin Biçimleme Başlık etiketlerinden başlıyoruz. Notepad'i açıyor ve şu kodları yazıyoruz :

Metin Biçimleme Dosyayı “sayfa2.htm” olarak kaydedin. Kaydettiğimiz dosyayı açtığımızda :

Metin Biçimleme Sayfanın işleyişine baktığımızda, önce her zaman yapmamız gerektiği gibi <html>, <head>, <title> etiketlerini yerleştirdik. Sayfa başlığı olarak "Başlık Etiketleri"ni seçtik ve sayfanın gövde <body> kısmına istediğimiz metinleri yazdık ve bu metinleri <h1>'den <h6>'ya kadar olan biçimlendirme etiketlerinin arasına aldık. Browser metin biçimleme etiketleri olan <h1>...<h6> etiketleri arasındaki kelimelere belirli büyüklükler verdi.

Metin Biçimleme Diğer etiketleri toplu olarak kullanarak yeni bir HTML dosyası oluşturalım. Kodlar şu şekilde olsun:

Metin Biçimleme Dosyayı “sayfa3.htm” olarak kaydedin. Kaydettiğimiz dosyayı açtığımızda :

Metin Biçimleme Başladığınız etiketi sonlandırmayı sakın unutmayın ! Bir html dökümanını açtığımızda ve ekran üzerinde farenin sağ tuşuna tıklayıp , kaynağı görüntüle / view source 'u seçtiğimizde Internet Explorer için Notepad, Netscape için kendi Source Viewer'ı açılacak ve bize o sayfanın kodunu gösterecektir.

Metin Biçimleme

Metin Biçimlendirme Etiketlerinin Kullanımı Örnek: <HTML> <HEAD> <TITLE>Metin Biçimleri </TITLE> </HEAD> <BODY> <H1>Metin Biçimleri (005_text.htm)</H1> <STRONG>Güçlü Vurgu STRONG (Strong Emphasis) Metni</STRONG> <BR> <B>Kalın B (Bold) Gibi Gözüküyor.</B> <!--Bir sonraki etiket yatay çizgi oluşturur.--> <HR> <EM>Vurgu EM (Emphasis) Metni</EM> <BR><I>İtalik I (Italic) Gibi Gözüküyor.</I>

Örneğin devamı… <PRE> Bu Metin PRE (Preformatted) Etiketi Kullanılarak Yazılan Metindir. Başka Bir Satır ve biraz boşluk<BR> </PRE> <HR> Birkaç Metin Yazalım. <BR>Bu Satırdan Önce Bir BR etiketi Var. <P>Bu Satırdan Önce P Etiketi Var.</P> Birkaç Metin Daha <DIV>Bu Satırdan Önce DIV Etiketi Var.</DIV> Bu Kadar Metin Yeter. </BODY> </HTML>

Metin Biçimlendirme Etiketlerinin Kullanımı

Fontlar

Fontlar <BASEFONT> Etiketi Sayfada başlık olmayan metnin varsayılan fontuna işaret eder. <BASEFONT> un varsayılan font büyüklüğü 3 tür. Örnek: <BASEFONT size=”5” color=”red”> yukarıdaki etiketten sonra sayfada metin büyüklüğü 5 ve rengi de kırmızı olacaktır. (Aksi belirtilmedikçe)

Fontlar <FONT> Etiketi Bu etiketler arasında bulunan metnin font ayarlarının yapıldığı etikettir. Bu etiketin bazı özellikleri;Font etiketinin kullanımı : <font face="..." size="..." color="...">...</font> face= yazıtipinin adı (arial, tahoma, verdana, ...) size= yazının büyüklüğü (1-7 arası) color= yazının rengi (red, green gibi renklerin ingilizce karşılığı yada RGB renk değeri) Bunlara font etiketinin parametreleri diyoruz.

Fontlar Eğer kullanmak istediğiniz font bilgisayarınızda yüklü değilse font etiketi ile biçimlemek istediğiniz metin browser'ın varsayılan fontu ile gösterilecektir. Bu yüzden önce sisteminizde yüklü olan fontları inceleyin (Başlat/Ayarlar/Denetim Masası/Yazıtipleri). Buradan yazıtiplerini açarak inceleyebilir ve beğendiklerinizi kullanabilirsiniz.

Fontlar Şimdi font etiketinin kullanımını bir örnekle inceleyelim :

Fontlar Her zamankinden farklı olarak ve ilk defa sayfamızda renk kullandık. Örnekte de gördüğünüz gibi bu işi renk kodlarıyla yaptık.

Fontlar Aslında renkli yazmanın bir yolu daha var o da renk kodu yerine rengin ingilizce adını yazmak (color="red" gibi). Kırmızı-red Mavi-blue Siyah-black Sarı-yellow Lacivert-navy Yeşil-green

Fontlar <BIG> ve <SMALL> Etiketleri ve Bağlı Fontlar Önceki örnekte <FONT> etiketi ile fontun büyüklüğünü ayarlamıştık font un size özelliğine +n veya –n değerlerini atayarak mevcut fontun n fazlası veya n eksiği olarak ayarlayabiliriz. <BIG> ve <SMALL> etiketleri de bağlı etiketlerdir. Bu etiketlerle da sırası ile mevcut fontun bir derece büyüğünü ve bir derece küçüğünü yazmak mümkündür. Yani <BIG> ile <FONT size=”+1”> ve <SMALL> ile <FONT size=”-1”> aynı kullanıma sahiptir.

Fontlar <BIG> ve <SMALL> Etiketleri ve Bağlı Fontlar Örnek: <HTML> <HEAD><TITLE>Bağlı Fontlar</TITLE></HEAD> <BODY> <P>Bu normal BODY metnidir.</P> <P><FONT size="+1">Bu size="+1" olan metindir.</FONT></P> <P><BIG>Bu metin BIG etiketi ile yazılmıştır.</BIG></P> <p><FONT size="+2">Bu size="+2" olan metindir.</FONT></p> <P><BIG><BIG>Bu metin iki tane BIG etiketi ile yazılmıştır.</BIG></BIG></P> <P><FONT size="-1">Bu size="-1" olan metindir.</FONT></P> <P><SMALL>Bu metin SMALL etiketi ile yazılmıştır.</SMALL></P> <p><FONT size="-2">Bu size="+2" olan metindir.</FONT></p> <P><SMALL><SMALL>Bu metin iki tane SMALL etiketi ile yazılmıştır.</SMALL></SMALL></P> </BODY> </HTML>

Birden Fazla Boşluk Bırakabilme Normalde HTML kodları içindeki 2 kelime arasında 10 tane de boşluk bıraksanız bunlardan sadece 1 tanesi dikkate alınır. Eğer birden fazla boşluk bırakmak istiyorsanız   özel karakterlerini kullanınız. En Çok Kullanılan Özel Karakterler