WEB TASARIM
WEB TASARIM WEB MASTER? WEB EDİTÖR?
WEB MASTER Webmaster'lar, web teknolojileri ile ilgilenen ve onları üreten, web sitesi ve web uygulamaları geliştiren kişilerdir. Sitenin daha çok programlaması ile ilgilidirler. Sitenin tasarımı ile web tasarımcılar ilgilenirler. Site içerikleri ile ise site yöneticileri ilgilenirler. Webmasterlar php veya asp gibi bir programlama dilinin yanı sıra mysql, mssql gibi veritabanlarının en az bir tanesine hakim olmak zorundadır.
WEB EDITÖRLÜĞÜ Hazır şablon veya hazır sayfalar üzerinde değişiklik yapıp, sistemi çalışır vaziyette tutma işidir.
BİR WEB SİTESİNİN YAPISI WWW. ISTANBUL. EDU. TR ANA SAYFA (index. html, index. asp, index. php, default…. AKADEMİK FAKÜLTELER BÖLÜMLER ÖĞRENCİ NOKTA E-POSTA
Bir Web sitesi 1 adet ANA SAYFA ve buna bağlı alt sayfalardan oluşur. Sayfalar üzerindeki linklerle diğer sayfalara geçiş yapılır.
HAZIRLANAN WEB SİTESİNİ YAYINLAMAK İÇİN 1. 2. DOMAIN (web sitesi adı) HOSTING (sayfaların tutulduğu yer) hizmeti almalıyız
DOMAIN NEDİR? Alan adı demektir. www. istanbul. edu. tr İnternet üzerinde kullanılan domain ( alanadı ) 'ler IP ( İnternet Protokol ) numaralarına ulaşmak için kullanılan bir isimlendirme sistemidir. İnternet üzerinden makineler birbirlerini IP dediğimiz numaralar sayesinde bulabilmektedir. 85. 102. 165. 168
HOSTİNG NEDİR? Hazırladığınız web sayfalarının yüklendiği ve 7/24 barındırma (depo vazifesi görülmesine) HOSTİNG denir. Siteyi oluşturan tüm sayfalar, resimler ve diğer öğeler 7/24 açık tutulan SERVER adı verilen bir bilgisayarlardaki bir klasör içinde tutulur. Türkticaret. net Bee. net Websahibim. com vs…
WEB PROGRAMLAMA DİLLERİ HTML AJAX ASP. Net / ASP STATİK İÇERİK PHP C# PERL JAVA DİNAMİK İÇERİK
HTML NEDİR? Zengin Metin İşaret Dili (İngilizce Hyper Text Markup Language, ks. HTML) günümüzde İnternet üzerinde veri paylaşımı için kullanılan en yaygın metin tabanlı dildir. HTML, bir programlama dili olarak tanımlanamaz. Zira HTML kodlarıyla kendi başına çalışan bir program yazılamaz. Ancak bu dili yorumlayabilen programlar(internet explorer, chrome, firefox gibi tarayıcılar ) aracılığıyla çalışabilen programlar yazılabilir.
HTML NEDİR? Programlama dili denilememesinin nedeni tam olarak budur. Temel gereği yazı, görüntü, video gibi değişik verileri ve bunları içeren sayfaları birbirine basitçe bağlamak, buna ek olarak söz konusu sayfaların web tarayıcısı yazılımları tarafından düzgün olarak görüntülenmesi için gerekli kuralları belirlemektir.
ÖRNEK HTML KODU <html> <head> <title>WEB TASARIM</title> </head> <body> <h 1>deneme</h 1> <h 2>deneme 2 </h 2> <p>örnek <a href=http: //www. istanbul. edu. tr>linke tıklayınız</a></p> </body> </html>
HTML SAYFA TASARIMI İÇİN GEREKENLER NOT DEFTERİ MICROSOFT WORD ADOBE DREAMWEAVER MICROSOFT FRONTPAGE MICROSOFT VISUAL STUDIO Ve internette ücretsiz yüzlerce program…. . Resim düzenleme programları Reklam tasarımı için animasyon programları(flash, swishmax……)
NOT DEFTERİNDE HTML KODU YAZARKEN…. Not defterinde gerekli kodları yazdıktan sonra. . Dosya- Farklı kaydet seçiniz…. Kayıt Türü “Tüm dosyalar” Dosya Adı dosyaadi. html (. html eklemelisiniz) Bir sonraki sayfadaki resmi inceleyiniz lütfen….
dosyaadi. html olmalı Kayıt türü: Tüm dosyalar olmalı
ÖRNEK UYGULAMA <html> <head> <title>WEB TASARIM</title> </head> <body> <a href=http: //www. istanbul. edu. tr>İSTANBUL ÜNİVERSİTESİ</a> </body> </html>
DERS-2 HTML, bir programlama dili değildir. Zira HTML kodlarıyla kendi başına çalışan bir program yazılamaz. HTML Kodları, Sadece uygun tarayıcı programlarla anlamlı hale gelir. (internet explorer, firefox, chrome, safari…. ) HTML Kodları, yazı, görüntü, video gibi değişik verileri ve bunları içeren sayfaları birbirine basitçe bağlar, HTML kodları ile oluşturulan bir sayfa içinde (yazılar hariç) resim, müzik, görüntü gibi görsel öğeler bulunmaz. Sadece bu öğelerin bulunduğu kaynakların adresleri vardır.
WEB SİTESİ/SAYFASINDA DİKKAT EDİLECEKLER Sayfa veya site içinde yer alacak tüm öğeler aynı klasör içinde bulunmalıdır. Dosya ve klasörlerinizin bulunacağı SERVER bilgisayarlar İNGİLİZCE dili ile çalıştığı için bazı kurallar uymalıyız. Dosya ve klasör isimleri BÜYÜK harf içermez Dosya ve klasör isimleri ö, ç, ş, ğ, ü, ı gibi TÜRKÇE harfler içeremez. Dosya ve klasör isimlerinde BOŞLUK(space), ? ()/&+$@#£ gibi özel karakterler içeremez. Dosya ve klasör isimlerinde _(alt tire) işareti boşluk yerine kullanılır.
HTML SAYFASıNıN YAPıSı Bir html sayfası 2 bölümden oluşur. Baş Gövde Baş bölümü etiketi: <head> </head> Gövde bölümü etiketi: <body> </body> <html> <head> </head> <body> </html> BAŞ GÖVDE HTML SAYFASI BAŞLANGIÇ VE BİTİŞ
HEAD (BAŞ) BÖLÜMÜ) <head> ve </head> etiketleri arasına yazılan kısımdır. Bu kısımda yazılanlar sayfa içeriğinde görünmezler! Baş bölümü içerisine genellikle şu öğeler yerleştirilir: Dokümanın başlığı CSS kodları Java. Script kodları
GÖVDE BÖLÜMÜ <body> </body> etiketleri arasına yazılan kısımdır. Bu bölümde yazılanlar sayfa içeriğinde görünürler. Bundan sonraki derslerde öğreneceğiniz tüm metin, resim ve bağlantı kodlarını gövde bölümüne yazmalısınız.
HTML SAYFASı <html> <head> </head> <body> İSTANBUL ÜNİVERSİTESİ İLETİŞİM FAKÜLTESİ GAZETECİLİK BÖLÜMÜ </body> </html>
TEMEL ETİKETLER BAŞLIK ETİKETİ HTML'de başlık yapımında kullanılan 6 tane etiket vardır: <h 1></h 1> <h 2></h 2> <h 3></h 3> <h 4></h 4> <h 5></h 5> <h 6></h 6>
ÖRNEK KULLANIM <html> <head> </head> <body> <h 1> İSTANBUL </h 1> <h 2> ÜNİVERSİTESİ</h 2> <h 3> İLETİŞİM </h 3> <h 4> FAKÜLTESİ </h 4> <h 5> GAZETECİLİK</h 5> <h 6> BÖLÜMÜ</h 6> </body> </html>
PARAGRAF ETİKETİ Paragraf oluşturmak için <p> </p> etiketlerini kullanıyoruz. <html> <head> </head> <body> istanbul üniversitesi iletişim fakültesi <p> Gazetecilik 2. sınıf </p> </body> </html>
SATıR SONU HTML'de bir satırın sonunun neresi olduğunu satır sonu etiketini kullanarak belirtmek zorundayız. Aksi takdirde, Not Defterinde Enter tuşuyla oluşturduğumuz satır sonlarının HTML açısından hiçbir geçerliliği yoktur. Biz ne kadar Enter'e basıp yeni satırlar oluştursak da web sayfamızda bu satırların hepsi yana görünür. <html> <head> </head> <body> istanbul üniversitesi iletişim fakültesi Gazetecilik 2. sınıf </body> </html>
SATıR SONU ETİKETİ Satır sonu için kullanılır. </br> yoktur. <html> <head> </head> <body> istanbul üniversitesi iletişim fakültesi Gazetecilik 2. sınıf </body> </html>
RESIM EKLEMEK Web sayfalarımıza resim ekleyebilmek için de bir etiket kullanıyoruz. Bu etiket, resim etiketi olan <img> dir. Resim etiketinin src özelliğine sayfada görüntülenmesini istediğimiz resim dosyasının konumu ve ismini yazarız. Önce HTML dosyamızın bulunduğu klasöre 1(bir) adet resim kopyalayalım. (örnek: manzara. jpg) <img src=“manzara. jpg"> Sayfanızın açılışını kolaylaştırmak için resimleriniz “jpg veya gif” formatında olmalıdır.
ÖRNEK KULLANıM <html> <head> </head> <body> istanbul üniversitesi iletişim fakültesi Gazetecilik 2. sınıf <img src=“resim. jpg"> eklenecek resmin adı </body> </html>
LINK (BAĞLANTı)ETİKETİ İnternette gezinirken fareyle tıkladığımızda da bazen başka bir web sayfası açılır ya da siteden bir dosya indirmeye başlarız. İşte bu öğelere bağlantı diyoruz. Bağlantı etiketi <a> ve </a> dır. <a href=“http: //www. istanbul. edu. tr/iletisim"> İletişim Fakültesi </a> için tıklayın.
ÖRNEK KULLANıM <html> <head> </head> <body> istanbul üniversitesi iletişim fakültesi Gazetecilik 2. sınıf <img src=“manzara. jpg"> <a href=“http: //www. istanbul. edu. tr/iletisim"> İletişim Fakültesi </a> için tıklayın. </body> </html>
RESİM(NESNE) BOYUTLANDIRMAK <img src=“manzara. jpg"> kodu ile eklediğiniz resim, sayfanın üzerinde kendi orijinal boyutlarında görünür. Resim veya nesneyi istediğiniz boyutlarda sayfa üzerine yerleştirmek için “img” kodunun kod bloğunun arasına Width=…… ve height=……. Kodları eklenir. <img src=“manzara. jpg” width=100 height=100>
UYGULAMA Html sayfanızda 3 satır yazı olacak. 1 - “ istanbul üniversitesi” yazısını tıklayınca ilgili site açılacak <p> 2 - “iletişim fakültesi” yazısını tıklayınca ilgili site açılacak 3 - “youtube” yazısını tıklayınca ilgili site açılacak 4 - sayfanıza 1 adet resim ekleyeceksiniz. Boyutları 300 x 250 pixel olmacak 5 -Bu resmi tıklayınca “GOOGLE” açılsın.
HTML SAYFA BAŞLıĞı (TıTLE) HTML sayfasının görünen başlığıdır. HEAD bölümün yazılır. <title> sayfa başlığı </title> olarak kullanılır. <html> <head> <title> …: : WEB TASARIM DERSİ: : …</title> </head> <body> <a href=“http: //www. istanbul. edu. tr/iletisim"> İletişim Fakültesi </a> için tıklayın. </body> </html>
METİN BİÇİMLEME ETİKETLERİ METNİ KOYU YAPMAK METNİ İTALİK YAPMAK <b> Koyu yazılacak metin </b> <i> italik yapılacak metin </i> METİN BİÇİMLEME (RENK, BOYUT) <font> </font>: Yazı biçimlerinin verildiği tagdır. <font> tagının bir takım parametreleri vardır. color: renk kodlarıyla yazının rengini belirlenebilir. face : face parametresi yazının hangi yazı biçimini kullanacağını gösterir. (helvetica , arial , verdana. . . )gibi size : Font büyüklüğünü belirler. Bu parametreye - 7 arası rakamlar girilir (1 en küçük , 7 en büyük). 1
ÖRNEK KULLANıM <html> <head> <title> İLETİŞİM FAKÜLTESİ </title> </head> <body> <font size="3" color="blue">İSTANBUL ÜNİVERSİTESİ </font> <font size="5" color=“red">İLETİŞİM FAKÜLTESİ </font> <b>GAZETECİLİK BÖLÜMÜ </b> </body> </html>
RENK KODLARı Fontlar konusunda, metnin rengini belirlerken <font color=". . . "> etiketini kullanmıştık. color komutunun karşısına rengin ingilizce karşılığını yazabiliriz. Fakat bunun daha karmaşık olan bir başka yolu vardı; o da 16'lık sayı düzeninde renk kodu girmek. FFEEDD, 00000 F, 000000 gibi 16'lık sayı sisteminde toplam 16 rakam var bunlar; 0123456789 ABCDEF [10'un karşılığı A. . . 15'in karşılığı F'dir. ]
Etikette kullandığımız color=#xxxxxx ifadesi ise RGB (red-green-blue, kırmızı-yeşil -mavi) renklerinin karışım oranlarını belirtir. Bu renklerden herbirinin alacağı değer 00 ile FF aralığında olabilir (FF maksimum, 00 minimum karışımı verir). #000000=black(siyah) #008000=green(yeşil) #FF 0000=red(kırmızı) #FFFF 00=yellow(sarı) #FFFFFF=white(beyaz Renk kodlarını yazarken daima kullanmayı unutmayın ! # işaretini
METIN VE PARAGRAF HIZALAMA Paragrafı, yazıyı ve genel olarak nesneleri hizalamak için “align” özelliği kullanılır. Center, left, right, justify seçenekleri vardır. ÖRNEK KULLANIM <p align=“center”> İSTANBUL ÜNİVERSİTESİ </p>
<BODY> TAKıSıNıN PARAMETRELERI <body bgcolor=“ffff 00” background=“resim. jpg” text=“ffffff” link=“ 0000 ff” > Arka plan rengini ayarlar. Background Arka plana bir resmin duvar kağıdı olarak döşenmesini sağlar. Text Metnin rengini belirler. Linklerin renklerini belirler. bgcolor