HTML özeti

NOT:
Bu bilgiler çalışma sonucu kendimce çıkarttığım notlardır. HTML i öğrenmeye yeni başladım yani çok bi bilgim yok açıkçası, bu yüzden buradaki bilgiler 100% doğru olmayabilir.O yüzden bu bilgilerden yararlanan arkadaşların kendilerininde bunları araştırmalarında yarar vardır.Çünkü yanlış öğrenilen bazı bilgilerin telafisi çok zor olabiliyor...
Özet boyunca muhakkak imla hataları çıkar (türkçem kötü), artık onları hoşgörürsünüz.Ben yeni şeyler öğrendiğim sürece buraya bişeyler yazmaya çalışacağım.Umarım birilerine yardımcı olurum.

HTML (hyper-text make up language)

HTML sıradan metin belgelerine eklendiğinde onları Web sayfalarına çeviren komutlardan oluşur. Birçok web kullanıcısı, Web düzenleyicilerinin yetenekleriyle sınırlı kalmamak için HTML kodlarının nasıl kullanıldığını öğrenmeyi tercih eder.Şimdi HTML in nasıl kullanılacağı gösterilecektir.

ETİKETLER:
HTML kodlarına etiket denir.Etiketler genellikle çiftler halinde bulunur; bir açma kısmı bir de kapama kısmı bulunur.örneğin aşağıda görülen etiket "leyla" sözcüğünü etkiler.

<B>LEYLA</B> * (B harfi kalın yazılmasını[bold] sağlar)

burada <B> etiketi açar </B> etiketi kapatır.

Not: Etiketler büyük yada küçük harflarle yazılabilir veya etiketler arasında hiç boşluk [space] bırakılmayabilir bunlar sadece programın okunabilirliği (readabilty) açısından önemlidir.
Not: *(........vs) yorumdur kodlarla bir alakası yoktur.

ZORUNLU KODLAR:

Her kaynak belgede bulunması gereken(Bu cümleyi kaynak kitabımdan aldım,yani daha değişik kullanım şekilleri vardır belki) bazı etiketler vardır.Bir belgenin en üstünde aşağıdaki etiketler yer almak zorundadır.

*(Bu kodları herhangi bir text editöründen yazabilirsiniz)[word,wordpad....]

<HTML>
<HEAD>

<TITLE> sayfa başlığı </TITLE> * ("sayfa başlığı" yerine herhangi bir başlık koyun)

</HEAD>
<BODY>
Merhaba,sayfama hoşgeldiniz. Adım melih, 20 yaşındayım,istanbulda yaşıyorum.
</BODY>
</HTML>

Bu kodları yazdıktan sonra farklı kaydedip .html uzantısı getirerek kaydedin.Daha sonra bu dosyayı açın .Yazdığımız kaynak belge için ürettiğimiz web sayfasını göreceksiniz.

ÖZEL METİN EFEKTLERİ:

Bu bölümde Web sayfasındaki metinlerin görünüşlerini değiştiren bazı temel etiketleri açıklamaya çalışacağım.

METNİ PARÇAYA BÖLMEK:

Bilgisayar ekranında çok uzun metin bloklarını okumak zordur. O yüzden web sayfamızı hazırlarken yazacağımız uzun metinleri bölmek okuyucu için daha iyidir.

<HTML>
<HEAD>

<TITLE>YAYINLARIMIZ</TITLE>

</HEAD>
<BODY>
Yayınlarımızı, TÜBİTAK kitap Satiş Bürosu ile kitabevlerinden edinebilirsiniz.

Bize yazmak isterseniz:Popüler Bilim kitapları
Atatürk Bulv.
No:221 06100
Kavaklıdere
Ankara
</BODY>
</HTML>

Not:Burada <P> yeni bir paragrafa geçileceğini (bir satır boşluk bırakılarak) [paragraph],
<BR> ise yeni bir satıra geçileceğini [break] belirtir.
Not:Yukarıda da belirttiğim gibi BODY etiketi kısmındaki bölümü boşluk bırakarak da yazabilirdik bu sadece okunabilirliği etkiler yani;

<HTML>
<HEAD>

<TITLE>YAYINLARIMIZ</TITLE>

</HEAD>
<BODY>
Yayınlarımızı, TÜBİTAK kitap Satiş Bürosu ile kitabevlerinden edinebilirsiniz.
<P>Bize yazmak isterseniz
<P>TÜBİTAK Popüler Bilim kitapları
<BR>Atatürk Bulv.
<BR>No:22106100
<BR>Kavaklıdere
<BR>Ankara
</BODY>
</HTML>

Bu html in web sayfası olarak görünümleri şöyle olur:

Yayınlarımızı, TÜBİTAK kitap Satiş Bürosu ile kitabevlerinden edinebilirsiniz

Bize yazmak isterseniz:

TÜBİTAK Popüler Bilim kitapları
Atatürk Bulv.
No:22106100
Kavaklıdere
Ankara

METİNLERİ VURGULAMAK:

Sayfanızdaki önemli sözcüklerin metnin geri kalanı içinde göze çarpması için kalın (bold) yada italik (italic) biçimleri kullanabiliriz.
Text editörümüzde sözcükleri kalın yada italik hale getiren düğmeler yada menüler olabilir. Ancak tarayıcılar Web sayfalarını görüntülerken, bu araçlarla yaratılmış bütün özel efektleri göz ardı ederler.Yalnızca HTML ile verilmiş olan komutları dikkate alırlar.
Tarayıcının bir metin parçasını kalın biçimde görüntülemesini sağlamak için metnin başina <B>, sonuna da </B> yazın; örneğin <B> TÜBİTAK</B>.
Tarayıcının bir metin parçasını italik biçimde görüntülemesini sağlamak için metnin başina <I>,sonuna da </I>yazın; örneğin <I> TÜBİTAK </I>.

HARF BOYUTU:
Bir sözcüğü harflerin boyutunu değiştirerek de vurgulayabiliriz. Yazıtipi boyutları dadenilen ve aralarında yedi ayrı seçim yapabileceğiniz harf boyutu vardır. Bunların en küçüğü 1, en büyüğü ise 7 dir.

yazı tipi boyutu bir
yazı tipi boyutu iki
yazı tipi boyutu üç
yazı tipi boyutu dört
yazı tipi boyutu beş
yazı tipi boyutu altı
yazı tipi boyutu yedi

Metnin bir bölümünün yazıtipi boyutunu 6 yapmak için başına <FONT SIZE="6">, sonuna da </FONT> yazarsanız. Farklı bir yazı tipi boyutu belirtmek için 6 yerine başka bir sayı girersiniz.

ARA BAŞLIKLAR:
Bir Web sayfasında, metnin farklı bölümlerini ara başlıklarla belirlemek iyi bir fikirdir. Bu başlıklar, ilgi duydukları bilgilere çabucak ulaşmaları için site ziyaretçilerine yardımcı olur.
Altı adet başlık tipi vardır. Bunların en büyüğü 1. düzey, en küçüğü ise 6. düzeydir. 1,2 ve 3. düzeyler genellikle ana başlıklar için kullanılır.

MELİH'İN ANA SAYFASI ----------->1. DÜZEY

BEN KİMİM -------------------------------------------------------------->2.DÜZEY
Merhaba ben Melih, 20 yaşındayım. İstanbulda oturuyom

İŞİM:--------------------------------------------------------------------------------->3. DÜZEY
öğrenciyim.

Bir metni birinci düzeyde bir başlığa çevirmek için metnin başına <H1>, sonuna da </H1> yazın.Diğer başlık düzeyleri için, 1 yerine başka sayılar yerleştirerek aynı etiketi kullanın.

HANGİ ETİKET:
Hem başlık etiketleri hem de <FONT SIZE> etiketletleri metinlerin boyutunu değiştirmeye yarar. ancak bunlar birbirine karıştırılmamalıdır. Başlık etiketi yanlızca bölüm başlığı olarak kullanılır ve hemen ardından bir satır boşluk bırakılmasını sağlar;ama <FONT SIZE> etiketi sadece metnin boyutunu değiştirir. Metnin yeriyle ilgili bir değişiklikte bulunmaz(bu etiketin ardından boşluk bırakılmaz.)

ETİKETLERİ BİRLEŞTİRMEK:

Bir metnin başına ve sonuna birden fazla etiket koyarken, etiketleri doğru sırada aşağıdaki gi doğru sırda yerleştirmek önemlidir.

<H1><I> AYŞE </I></H1> DOGRU
*(BLOKLAR KESİŞMEMELİDİR)
<H1><I> AYŞE </H1></I> YANLIŞ

NOT:Bu bilgiler çalışma sonucu kendimce çıkarttığım notlardır.Yani 100% doğru olmayabilir.O yüzden bu bilgilerden yararlanan arkadaşların kendilerininde bunları araştırmalarında yarar vardır.Çünkü yanlış öğrenilen bazı bilgilerin telafisi çok zor olabiliyor...

to be continued

_____________________________

kkslyyldz

Yüzbaşı

852 Mesaj

Tüm Başarılarını Gör

_____________________________

here I am on the road again
there I am up on the stage
here I go playin' star again
there I go turn the page

_____________________________

HTML( Hyper Text Mark up Language)

RENKLER:

Tarayıcılar, başka bir komula karşılaşmadıkları sürece, metinleri gri veya beyaz arkaplan üzerine siyah renkle gösterir. Web sitenizin daha çekici olması için arka plan ve metinler için daha farklı renkler belirtebilirsiniz.

Renk kodları:

FF0000----------------------------------KIRMIZI
EEEE00----------------------------------SARI
00FF00----------------------------------YEŞİL
0000FF----------------------------------LACİVERT
B3DCF5---------------------------------AÇIK MAVİ
800080----------------------------------MOR
FFFFFF----------------------------------BEYAZ
000000----------------------------------SİYAH

NOT:Web kullanıcıların çogu 8 yada 16 bitlik görüntü kartları kullanır.8bitlik kartlar 256 renk,16 bitlik kartlar 65.536 renk renk gösterebilir.Yukarıdaki kodlardan bu sayılardan çok daha fazla renk üretilebilir.Eğer kullanıcının görüntü kartı seçilen rengi gösteremiyorsa bu renge yaklaşık olan en yakın renk kullanılır.

ÖRNEK:

<HTML>
<HEAD>
<TITLE> HTML nedir?</TITLE>
</HEAD>
<BODY BGCOLOR="#B3DCF5">
<CENTER><H1>HTML</H1></CENTER>
Tarayıcıızda bir web sayfasındaki komutları göremezsiniz.HTML tarayıcınıza üzerindeki kodlar sayesinde o web sayfasının nasıl görüntülenmesi gerektiğini bildirir.
</BODY>
</HEAD>
</HTML>

Bu belge mavi fon üzerinde görüntülenecektir.

METİN RENGİ:
<BODY> etiketine bazı bilgileri ekleyerek, bir sayfadaki metinlerin tamamının rengini değiştirebilirsiniz. Örneğin tarayıcının sayfadaki tüm metinlerikırmızı renkte göstermesini sağlamak için <BODY> etiketinin açma kısmına TEXT="#FF0000" komutunu ekleyebilirsiniz: <BODY TEXT="#FF0000">.Etiketin kapama kısmı aynı kalır.

Şimdi sarı fon üzerine kırmızı yazı yazmak için kullanacaımız HTML in <BODY> kodunu yazalım: <BODY BGCOLOR="#EEEE00" TEXT COLOR="#FF0000">

BİLGİLERİ ORGANİZE ETMEK:

Bir Web sayfasındaki bilgileri organize etmek için çeşitli araçlardan yaralanırız.Bunlar çizgiler ve listelerdir.Listeler üçe ayrılır.

Numaralı listeler:
Listeleyeceğimiz öğelerin başına <OL>, sonuna</OL> yazın.Daha sonra listenin her öğesinin sonuna <LI> yazın.

<OL> <LI>Yük. mat<LI>müh. mek<LI>elektomanyetik<LI>devre teorisi<LI>ölçme</OL> şeklinde olabilir.

Numarasız Listeler:

burada <OL> ve </OL> yerine <UL> ve </UL> gelir.

METNİ HİZALAMAK:
Metni hizalamak için metnin öncesinde yer alan <P> yada <H> arabaşlık etiketlerine ek bilgi yerleştirmemiz gerekir.
metni sola hizalamak için; <P ALIGN="LEFT"> sağa hizalamak için RIGHT yazarız.
tarayıcıdan metni sayfanın ortasına yerleştirmemiz de istenebilir o zaman ise metnin başına <CENTER>, sonuna ise </CENTER> yazarız.

YATAY ÇİZGİLER:

Temel olarak <HR> komutuyla Web sayfamıza çizgi çekebiliriz.
Eğer sayfa genişliğinin belli bir oranında çizgi çekmek istiyorsak: <HR WIDTH="?%> *(? yerine bi sayı getiriyoruz)
Eğer daha kalın bir çizgi istersek: <HR SIZE=?> komutunu kullanırız.
Sağa veya sola dayalı bir çizgi çekmek istersek: <HR ALIGN="LEFT"> yada RIGHT yazarız.

WEB SAYFALARINA RESİM YERLEŞTİRMEK:

SAYFAYA RESİM GÖMMEK:

Diyelim ki bir Web sayfasına "melih.jpg" isimlii bir resim gömmek istiyoruz. Kaynak belgemizi oluşturuyoruz ve resmi koyacağımız kısma <IMG SRC="melih.jpg"> yazıyoruz.(tabiki bu kaynak belgemiz ve resmimiz aynı dosyadaysa)

ALTERNATİF METİN:
Bu resimin üzerine geldiğimde çıkan açıklayıcı yazıdır.
<IMG SRC="melih.jpg" ALT="BENİM RESMİM">

RESMİN BOYUTUNU AYARLAMAK:
Resmin boyutunu ayarlamak için gereken komutlar;
<IMG WIDTH=180 HEIGTH=140 SRC="melih.jpg"> *(genişliği 180, boyu 140 pixel olan resim)

RESİMLERİN YERLERİNİ AYARLAMAK:
Tarayıcıdan bir resmi sağa veya sola hizalamasını sağlamak için gömme etiketine şu komutlar eklenir.

<IMG WIDTH=160 HEIGHT=140 SRC="melih.jpg" ALIGH="LEFT">

Tarayıcının resmi sayfanın ortasına koymak istersek;

<CENTER><IMG WIDTH=180 HEIGHT=160 SRC="melih.jpg"></CENTER>,
olur.

ARKA PLAN:
Bir sayfaya desenli bir arkaplan eklemek için <BODY> etiketine bazı kodlar eklememiz gerekir.Sayfanıza bir arkaplan koymak için " tile.gif" adlı bir döşeme çizimini kullanmak istediğinizi varsayalım.<BODY> etiketine BACKGROUND>="tile.gif" kodunu ekleriz.Etiket şöyle görünecektir; <BODY BGCOLOR="#FFF8E0" BACKGROUND="tile.gif">

not:
Dikkat ettiyseniz bir renk belirledik bunun sebebi tarayıcıları resimleri göstermeyen kullanıcıların belirtilen renkkte görmesi için.

to be continued

_____________________________

H.Kaan ATASOY
-----------------------------

-----------------------------
Atasoyhk Danışmanlık

Benzer içerikler