Temel düzeyde Web tasarım, en genel bir anlatım ile metin ve ses, resim gibi çoklu ortam öğelerinin basit ve belirli bir biçimlendirme ile bir araya getirilmesi olarak açıklanabilir. Bu en basit ve alt düzey biçimlendirmede, yani temel Web tasarım sürecinde tasarımcılar tarafından kullanılan araç HTML (Hyper Text Markup Language – Hiper Metin İşaretleme Dili) adı verilen bir dilidir.

HTML için kullanılan tanımlama, onun programlama dili değil işaretleme dili olduğudur. Bir diğer deyişle bu işaretleme dili Web tasarım sürecinde belirli tasarım öğelerinin Web sayfası üzerine yerleşimi ve biçimsel bir yapının oluşturulmasını sağlayan bir araç olarak nitelendirilebilir. Bu nedenledir ki programlama dillerinin aksine, HTML ile Web tasarımında kullanılan ifadelere komut değil, “Etiket (Tag)” adı verilmektedir.

Notepad yazılımını başlatmak için [Başlat] [Tüm Programlar] [Donatılar] [Notepad] adımlarının takip edilmesi gerekmektedir.

Notepad ile oluşturulan Web sayfasını kaydetmek için “Dosya” menüsü altında yer alan “Kaydet” komutu seçilerek [Dosya_Adı.htm] veya [Dosya_Adı.html] ifadelerini kullanılmaktadır.

Notepad++, C++ dili ile geliştirilmiştir. Windows İşletim Sistemi ile birlikte gelen Notepad uygulamasının
oldukça gelişmiş özelliklere sahip bir türevi olan Notepad++, C, Java, HTML gibi birbirinden farklı özelliklere sahip çeşitli dilleri tanıyabilme ve bu çerçevede kodlama sırasında kullanıcıya/tasarımcıya önemli ölçüde kolaylık ve destek sağlayabilen bir yazılımdır. Notepad++, Windows İşletim Sistemi üzerinde yer alan Notepad’ in sade arayüzünün aksine, oldukça çeşitli ve geniş, ancak aynı zamanda karmaşık olmayan çok sayıda menü, komut, kısayol ve araç çubukları üzerinde simgelerine sahiptir. 

Notepad++’ ın öne çıkan özelliklerinden bazıları şu şekilde sıralanabilir:

• Kullanılan kelimeleri, komutları otomatik tamamlamayabilme ve ilgili komutun kullanımına ilişkin ipucu sağlama
• Çoklu dil desteğine sahip olma
• Yazım kurallarını vurgulama
• Aynı anda çoklu belgeler ile çalışabilme
• Blok veya normal parantezler için renklendirme
• Kullanıcı tanımlı söz dizimi renklendirme
• Makro kaydedebilme ve oynatma

Notepad++ ile tasarım gerçekleştirmek için öncelikle [Dosya] menüsü altında yer alan [Yeni] komutu seçilir. İşlemler yapıldıktan sonra ise sıra oluşturulan tasarımın çalıştırılmasına, bir diğer deyişle Web tarayıcı üzerinden görüntülenmesine gelmiştir. Bunun için Notepad++ menülerinden birisi olan [Çalıştır] seçilerek, tasarımın hangi Web tarayıcı üzerinde çalıştırılması isteniyorsa bu menü altında yer alan ilgili komut seçilerek işlem tamamlanır.

Görsel tasarım araçlarına sahip editörlerden biri olan CoffeeCup, basit HTML etiketleri ile Web siteleri yaratmanın çok daha ötesinde, gelişmiş düzeyde dinamik HTML içerik geliştirmeye, stil sayfaları oluşturmaya, Javascript kodları yazmaya ve daha birçok Web tasarım işlemini ortaya koymaya yardımcı araç ve şablonlar içeren görsel tasarım editörüdür.

Web tasarımı alanında kişilerin kullanabileceği ücretsiz web tasarım araçları şunlardır: CoffeeCup Free HTML Editor, Notepad++, PageBreeze, Firebug, Bluefish Editor, Brackets, KompoZer, OpenBEXI, GIMP, BlueGriffon.

CoffeeCup ile yeni bir Web sayfası/sitesi tasarlamaya başlamak için öncelikle “File” menüsünden “New HTML File” komutu seçilebilir. Bunun yanı sıra aynı menüden stil sayfaları (CSS) ve tasarım şablonları (Themes) oluşturulabilir. 

Page Style (Sayfa Stili) bölümü ile bu bölümde yer alan etiketler ve bu etiketlere ait parametreler yardımı
ile sayfanın özellikle renk düzeni ve dolaşım (navigasyon) sırasındaki ayarları belirlenmektedir. Her bir renk ayarı fare ile seçilebileceği gibi ilgili metin kutularına doğrudan 16’lı sayı sisteminde renk değerleri verilerek de yapılabilmektedir. 

CoffeCup web tasarım aracı ile tasarımcının belirleyebileceği genel parametreler şöyledir:

1. Page Text – Metin rengi
2. Links – Bağlantıların rengi
3. Visited Links – Ziyaret edilen bağlantıların rengi
4. Active Links – Aktif bağlantı rengi
5. Hover Links – Sayfada gezinme sırasında fare bağlantı üzerine geldiğinde bağlantının alacağı renk

CoffeeCup ile sayfaya metin ekleme işlemi şu şekilde gerçekleştirilmektedir:

1. <body></body> etiketlerinin arasına doğrudan istenen metin yazılır.
2. Metne istenen biçimsel özellikleri uygulayabilmek için öncelikle metin fare ile seçili hale getirilir. Ardından CofeeCup ekranında sol tarafta yer alan sütunda [Code] sekmesi (Tab) seçilerek tüm HTML etiketleri görüntülenir.
3. Girilen metni biçimlendirmek üzere istenen HTML etiketleri bulunarak fare ile çift tıklanır (Bu örnekte metnin koyu ve italik yazılmasını sağlayacak <b> ve <i> etiketleri kullanılacaktır.)

CofeeCup editörü ile link ekleme işlemi aşağıdaki adımlar takip edilerek gerçekleştirilebilmektedir:

1. CofeeCup editörü ile çalışırken Web sayfasına bağlantı (link) eklenmesi işleminde öncelikle imleç sayfa üzerinde istenen yere konumlandırılır.
2. Bağlantı eklerken yine iki farklı yol kullanılabilir. Bunlardan birincisi [Insert] menüsü altında yer alan [Link] ifadesinin seçilmesi; bir diğeri ise [HTML] araç çubuğu üzerinde yer alan (Links] simgesine tıklanmasıdır. Her iki teknik bağlantı ekleme amacıyla aynı sonucu verecektir.

HTML-Kit ile tasarıma başlamak için izlenmesi gereken adımlar şu şekildedir:

HTML-Kit ile yeni bir Web sayfası veya sitesi tasarlamaya başlamak için program çalıştıktan sonra menü çubuğunda yer alan “File” menüsünden “New Document” seçilip yeni bir boş sayfa oluşturulabilmektedir. Bir diğer yöntem ise “File” menüsünden “New page from Wizard” ile hazır eklentilerden “Default” klasörü altından “blank.htm” sayfası açılıp örnek uygulama yapılabilir.

CofeeCup Web editörü, hazırlanan Web sayfalarının tanımlanan bir Web sunucusuna yüklenmesini sağlayan FTP aracına sahiptir. Bu şekliyle tasarımın sonunda veya herhangi bir ara değerlendirme/deneme aşamasında sayfalar İnternet üzerindeki sunucuya yüklenerek, kullanıcı gözüyle gerçek çalışma ortamında pilot denemesi yapılabilir. CofeeCup FTP aracını kullanabilmek için başlangıçta bazı ayarların programa girilmesi gerekmektedir. Bu nedenle sunucu ayarlarını yapabilmek için kullanıcı adı, parola sunucu adresi gibi bilgilerin gibi bir takım teknik bilgilere sahip olunması gerekir. Bu temel bilgilerin tasarımcı tarafından bilindiği varsayılarak CofeeCup FTP sunucu ayarları şu şekilde gerçekleştirilmektedir.

Hazırlanan sayfanın internet ortamında yayımlanması için internet hizmeti veren bir Web sunucusuna
(Web server) üzerine aktarılması (Upload) gerekmektedir. Dosya aktarımı yapabilmek için öncelikle bu sunucuya FTP (File Transfer Protocol) hizmeti için bağlanılmalıdır. Yerel bilgisayarımız ile internet erişimimiz vasıtasıyla sunucuya bağlandıktan sonra bize tanımlanan kullanıcı adı ve şifremiz ile giriş yaparak aktif olan hedefteki sunucuya dosyalarımızı aktarabiliriz. HTML-Kit ile hazırladığımız web sayfalarını yayımcı sunucuya aktarmak için menü çubuğu içerisinde yer alan “Workspace” alt menüsü içerisinde bulunan “Upload” alanını tıklayarak dosya aktarım işlemini gerçekleştirebiliriz. İlk defa bir sunucuya dosya aktarımı yapacak isek FTP sunucuna ilişkin bilgileri HTML-Kit içerisine girmemiz gerekecektir. Bunun içinde yine “Workspace” menüsü içerisinde yer alan [Add Folder/FTP Server] alanına girip hedef sunucunun ip numarasını, bize tahsis edilen kullanıcı adı ve şifreyi ilgili alanlara girerek dosya aktarımı için sunucuya bağlantı yapılabilmektedir.