Masa Üstü Yayıncılık

10.04.2010 - 21:24

HTML nedir?
HTML ' de temel unsurlar
İlk sayfam
Metin biçimleme
Fontlar
Listeler
Renkler
Resimler
Bağlantılar
Tablolar
Çerçeveler

Linkback: https://www.buyuknet.com/masa-ustu-yayincilik-t22039.0.html

10.04.2010 - 22:29

Bunu yapmak için de bir HTML sayfası oluşturacağız ve bunu beğendiğimiz bir tarayıcı ile açıp, bakacağız. Bu suretle Web tasarımının metinle ilgili araçlarını, metin şekillendirmek etiketlerini tanımış olacağız. Daha sonra HTML sayfa tasarımında kullanacağımız elemanları, stil sayfaları, tablo, ve çerçeve, grafik ve çoklu-ortam (multimedia) unsurlarını tanıyacağız.
Etiketler (Tag)

HTML komutları içeren ve tayarıcıların tanıyabildiği dosya, aslında içinde ASCII karakterlerden başka unsur olmayan, düz yazı dosyalarıdır. Tarayıcıya, sayfayı ekranda oluştururken vermesini istediğimiz biçimle ilgili komutları bir dizi özel işaretleme etiketlerini kullanarak veririz. Başka bir deyişle, tarayıcı bir paragrafın, cümlenin, satırın, kelimenin ya da harfin önünde, onun ekranda nasıl gösterileceğine ilişkin etiketi görür ve bu etiketin gerektiği işlemi icra eder.

Siz, Web sayfasının mimarı olarak, Server´a koyacağınız HTML metninin içinde, bir anlamda, "Netscape veya Internet Explorer: Buraya bir etiket koyuyorum. Bu etiket, büyük başlık etiketidir. Ben sana bu etiketin kapsadığı kelimelerin bittiğini söyleyinceye kadar, vereceğim bütün kelimeleri büyük başlık olarak sun!" demiş oluyorsunuz. Dolayısyla, HTML´de ilke, önünde etiketi olmayan herhangi metne yer vermemektir. Önünde etiketi olmayan herhangi bir metin parçası, tarayıcı tarafından temel paragraf olarak nitelenir.

HTML, içinde kontrol kodu olmayan metin dosyasıdır. Bu, söz gelimi WordPerfect veya Microsoft Word ile yazdığınız ve uzatması ".wp" veya ".doc" olan bir isimle ve WordPerfect veya Word biçiminde kaydettirdiğiniz bir belge, HTML etiketleri içerse bile, HTML dosyası sayılamaz. Çünkü kelime-işlem programınız, bu dosyanın içinde kendi kontrol kodlarını koymuştur. Böyle bir dosyanın adındaki uzantıyı silerek, yerine ".htm" uzantısını verin ve tarayıcınıza açtırmaya kalkın!

Düz Yazı Dosyası ve HTML

Düz yazı biçiminde kaydedilmemiş bir metni tarayıcıya açtırma denemesini, burada birlikte yapalım. Yandaki paragrafı içeren bir metni, örneğin HTML.DOC adıyla, Word dosyası olarak kaydedelim ve sabit diskte bu dosyayı bulup, adını "HTML.HTM" olarak değiştirelim. Bilgisayarlarımızda, ".htm" uzatması ile bağlantılı tarayıcı Netscape Navigator veya Internet Explorer olarak. Adını değiştirdiğimiz bu dosyayı iki kere tıkladığımızda, sistemin varsaydığı tarayıcı açılacak ve karşımıza şuna benzer bir tablo çıkacaktır:

Bu kargaşanın nedeni, tarayıcı programın, uzantısı ".htm" veya ".html" olan bir dosyayı, içinde kontrol kodu olmayan, düz yazı dosyası sanması ve Word belgesindeki kontrol kodlarını da metin olarak ekranda göstermesidir. Belgemizin içinde hiç bir HTML etiketi yer almadığı için de, tarayıcımız bu yazıyı, düz paragraf olarak gösteriyor. Aynı yazıyı, bu kez Word programına düz yazı olarak kaydettirelim. Word bu dosyaya, "HTML.txt" adını verecektir. Şimdi de bu dosyanın adını "HTML.htm" olarak değiştirelim ve iki kere tıklayalım. Tarayıcıda karşımıza şöyle bir görüntü çıkacaktır:

Bu dosyanın içinde kelime işlemcinin kontrol kodları bulunmadığı ve dosyada metnin dışında başka bir unsur olmadığı için, tarayıcı metni yorumlamakta güçlük çekmeyecektir. Ne var ki, kelime-işlemci metni ASCII olarak kaydederken, metnin Türkçe karakterlerini en yakın ASCII koduna çevirdiği için, yazıdaki Türkçe harfleri kaybetmiş olduk.

Aynı paragrafı HTML dosyası olarak (ilerde değineceğimiz bir programın yardımıyla) ve sayfanın kodlama dili olarak Türkçe?yi seçerek kaydettiğimiz zaman, tarayıcımız, sayfayı hem kolayca açıp ekranda gösterebiliyor; hem de Türkçe karakterlerin kodları, tarayıcı tarafından tanınabiliyor:

HTML düz yazı olduğuna göre, bir HTML dosyası oluşturmak için, tabii HTML kodlarını kendiniz yazacaksanız, herhangi bir kelime-işlem yazılımını kullanabilirsiniz, ama kaydettirirken "Sadece metin olarak," "Text only," "ASCII dosyası," "ANSI Dosyası" gibi, programın kendi kontrol kodlarını koymayacağı bir biçim seçmek zorundasınız.

Büyük Harf, Küçük Harf?

Oluşturacağınız Web sayfaları, ilerde bu görevi devralacak başkaları tarafından düzeltilebilir, değiştirilebilir, kısmen kullanılabilir. İyi bir mimarın planlarının başka bütün mimarlar tarafından hiç tereddütsüz anlaşılabileceği gibi, sizin sayfalarınızın da başka Web alan yöneticileri ya da sayfa tasarımcıları tarafından kolaylıkla okunabilmesi şarttır. Nasıl bir yöntem izlerseniz izleyin; ama bir alanda yer alan bütün sayfalarınızda aynı yöntemi izleyin: kodlarınız ya tümüyle büyük harf olsun, ya da tümüyle küçük harf. HTML tarayıcıların okuduğu ama gereğini yerine getirmediği yorum/açıklama tarzındaki etiketleri kullanarak, sayfalarınızın bölümlerinin insan gözüyle okunulup anlaşılabilmesini sağlayın.

HTML Dosyasının Bölümleri

HTML dosyasının bir tarayıcı tarafından tanınması, yorumlanması ve gereğinin ekranda yapılabilmesi için, belgenin bir HTML belgesi olduğunun bildirilmesi şarttır. Bu bildirimi dosyanın tümünün etiketi anlamına gelen <HTML> etiketi, bir HTML belgesinin ilk kelimesi olarak yazılır. Tarayıcıya, HTML dosyasının bittiği de </HTML> etiketiyle bildirilir.

10.04.2010 - 22:37

HTML (Hyper Text Markup Language) web sayfalarının hazırlanmasında kullanılan dildir. Bir web sayfası resim gibi değildir. Sayfanın arkasında ilk bakışta anlamakta zorlanacağımız komutlar bulunmaktadır. Bu komutlar sayfa içinde bulunan herşeyin nasıl gösterileceğini kullanılan browsere anlatmak için kullanılır. Yani sayfada bulunan resim, flash, yazı gibi materyallerin yanyana anlaşılır görünmesi için HTML kullanmak zorundayız.
Amatör veya profesyonel olarak web tasarım ile uğraşanlar HTML ile mutlaka tanışmışlardır. HTML yazma işini bizim yerimize yapan programlar (Frontpage, Dreamweaver, Namo v.b.) var ve birazda HTML bilgisi ile kolaylıkla kendi sitelerimizi yapabiliriz.

HTML üç kısımdan oluşur. Bunlar;

   1. 1. <html> ; Ana bloktur.Tüm html dosyaları "<html> </html>" arasında yer alır.


   2. 2. <head> ; Tanımlamalar yani kullanıcının browserde görmediği bölümdür. Bu kısımda site ile ilgili açıklamalar, arama motorları için anahtar kelimeler, site başlığı, CSS ve javasciptler gibi bölümler bulunur.


   3. 3. <body> ; Sayfa üzerinde görülecek herşeyin yazıldığı bölümdür. Yani sayfa içeriğinin başlangıç ve bitiş bloğu denebilir.

HTML komutlarının yazılışı;
Html komutları onu yorumlayan browserin anlaması için etiketler kullanılarak yazılır. Bu etiket
" < komut1 > yazı < / komut1 > " şeklindedir. Mesela yazıları kalın yazmak için;

merhaba

kullanılır.Burada < > işaretleri arasındaki "b" bold (kalın) yazı için kullanılan bir html komutudur. Aynı şekilde bu yazıyı kalın ve kırmızı renkte yapmak istersek;

<font color="red"> Merhaba </font>

yazmamız gerekir. Burada dikkat etmemiz gereken nokta font etiketinin içinde bulunan color="red" bölümüdür. Eğer bir yazıya herhangi bir özellik vermek istersek font etiketini kullanıp içerisinde özellikleri belirtmeliyiz. Merhaba yazısının fontunu verdana yapmak istersek
<font color="red" face="verdana"> yazmamız gerekirdi.

Şimdi basit bir html dosyasının yapısını ve en çok kullanılan HTML etiketlerini açıklayalım.

*******************************************************************

<html> //html dosyasının başladığını belirtir.
<head> //tanımlamaların başladığı yerdir.

<title>Sayfa başlığı</title> //browserin üst çubuğunda görünen site başlığı
<META content="Bu bir web sayfasıdır" name=description> //site hakkında açıklama

</head> //tanımlamaların bittiği yerdir.

<body> //sitenin içerik kısmı

<font face="tahoma" size="3" color="blue"> okuduğunuz bu cümle 3 punto, mavi renkte ve tahoma fontuyla yazılmıştır. Ayrıca altta bir tane resim bulunmaktadır. </font>
<img src="resim_adi.gif">

</body> //içeriğin bittiği anlamındadır.

</html> //html dosyasının bittiğini belirtir.

*******************************************************************

Basit html etiketleri;

*
; Satır sonu komutu.Alt satıra geçmek için kullanılır.
* ; Yazıyı bold (kalın) yapmak için kullanılır. ile biter
* ; Yazıyı italik (eğik) yapmak için kullanılır. ile biter
* ; Altı çizgili yazı yazmak için kullanılır. ile biter
* <h1> ; Başlık etiketi. 1 rakamı büyüdükçe yazı küçülür. </h1> ile biter
* <a> ; Link vermek için kullnılır. [/url] ile biter, kullanımı;
Tıklayın şeklindedir. Ekrana sadece "Tıklayın" yazısı çıkar ve tıklayınca www.buyuknet.com adresine gider.

* <img>; Resim eklemek için kullanılır.Kullanımı;
<img src="dosya_adi.gif"> şeklindedir.

* <center>; Nesneyi ortalamak için kullanılır.Kullanımı;
<center>buraya yazı yada resim ekleyebiliriz.</center>

03.01.2016 - 19:17

paylaşım için çok teşekkürler çok yardımcı oldun.