-OquzHan- Admin
Mesaj Sayısı : 120 Reputation : 3 Doğum tarihi : 04/02/99 Kayıt tarihi : 29/09/10 Yaş : 25 Nerden : Adanaaa
Cüzdan Altın: 5000 Para: 6291
| Konu: Site Kurmak İçin C.tesi Ekim 02, 2010 6:21 pm | |
| Anlatmadan Önce Bazı Görsellerde ve Videolarda Bizim-Mekan.TurkForumPro.com Yazıyor.Sebebi Eski Formumuz Bizim-Mekandı Bizde Formun Uzantısını İsmini Tasarımını ve Logosunu Değiştirdik.Bu Teknik Arıza Sonucu Özür Dileriz ve En Kısa Zamanda Giderilecektir.Şimdi Konuya Geçelim: Bedava Site Kurmak Onu Tasarlamak , Düzenlemek ve Tasarlamak İçin Herşeyi Anlatacağım Hem Görselli Hemde Videolu Olarak AnlatacağımAnlatmaya başlamadan önce uzun bir sayfa bilgisi vereceğim uzun olduğu için kod kutusunde vereceğim bilgiler: - Kod:
-
yi bir tasarım bilgisi için eğitim almanın gerektiği ortadayken, buraya sıkıştırılmış bu bilgilerle çok başarılı olunamayacağı düşünülebilir. Doğrudur da... Ama yeterli olmasa da bilgiden kimseye zarar gelmez...
Bir çoğunuzun bu bilgilere farkında olmasanız da sahip olduğunu düşünüyorum. Gereken bir kez daha gözden geçirmek, sorgulamak...
Kolay gelsin...
Nasıl bir site yapmak istediğinize karar verin
İlk ayrım, kişisel mi, yoksa bir firma için mi olduğunun belirlenmesidir. Site bir "imaj" oluşturur. Bakanlar, içerik kadar biçimden de etkilenerek sizi kafasında önceden oluşturduğu katogorilerden birine sokar.
Bu durum kişisel siteler için çok önemli olmayabilir. Nedeni, tek bir kişinin "önemli" olmasında değil, Kişilerde birbirinden farklı bir çok eğilim olmasındadır. Yani çılgın bir müzik sitesi yaparsanız, kimse sizin "sadece" çılgın bir müsizyen olduğunuzu düşünmez. Bilirler ki aslında bir çok yönünüz daha vardır.
Ama firma siteleri için durum biraz daha farklıdır. Onlar "oturmuş" ve "kesin bir kişilik" sergilemek zorundadırlar... Bu durumda, sitesini hazırlayacağınız firmanın: sizin üzerinizdeki imajını firma sahiplerinin gözündeki imajı başkalarına ulaştırmaya çalıştığınız imajı oturup düşünmeniz gerekir.
Kim için yapmak istediğinizi net olarak belirleyin.
Net ortamında herkes sizi ziyaret edebilse de, bir firma için site hazırlıyorsanız, müşteri/izleyici kitlesinin ortak noktalarını belirlemeniz, kime sesleneceğinize karar vermeniz gerekir. Bu durumu örnekleyelim:
Çok özel ve çok pahalı bir şey üreten bir firmanın sitesi ise, (takı tasarımı yapan ve her birinden sadece bir tane üreten bir sanatçı diyelim) size ulaşacak müşteriler, iyi bilgisayarları, daha iyi bağlantıları olanlanlardır. Konu ile öyle ilgilidirler ki, bir jpeg resmin gelmesini dakikalarca bekleyebilirler... Türkçenin kullanımı olmazsa olmaz bir koşuldur ama elektronik aletler için metal kutu üreten bir firmanın sitesinde sizi rahatsız etmeyen bir cümle kuruluşu, edebiyat dergisi iddiasındaki bir sitede gözünüze batar. Bu sitede yazdıklarınızı 40 kez gözden geçirmeniz gerekir. Fenerbahçe için bir site hazırlıyorsanız, sarı lacivert uygun mu diye düşünmenizin anlamı yoktur, gelenler zaten başka renk görmek istemez... Alışveriş sitesinde ise herkesin zamanı değerlidir. Kimsenin sizin onmouseover show'unuzu izlemeye niyeti yoktur...
Kullanacağınız yazı ve resimleri hazırlayın
Tasarımın temelinde konuya hakim olmak yatar. İlk yapacağınız işin yazı ve resimleri toparlamak olmasının nedeni, sadece kullanacağınız malzemenin elinizin altında olması değildir. Bunları toplarken, konuya hakimiyetiniz artar, aklınızdan farklı tasarım biçimleri geçer ve en sona kalan genel olarak en iyisidir...
Biçimle (yani tasarımla) içeriğin (yani elinizdeki malzemenin ve ne anlatmak istediğinizin) yakın ilişkisi vardır.
Sadece 3-4 resim kullanacağınız bir sitenin görsel yapısı ile 30-40 resim kullanmak zorunda olduğunuz sitenin yapısı farklılık gösterir. Kullanacaklarınızı baştan hazırlarsanız, ne yapacağınıza daha kolay karar verebilirsiniz.
Site haritası çıkarın
Site haritası, herşey bittikten sonra, gelen net gezginlerinin siteninin içeriğine hızla göz atmalarına yarar... Onların işini kolaylaştırmayı ayrıca düşünürsünüz ama önce kendi işinizi kolaylaştırmanız gerekir.
Kağıt üzerinde hazırlanacak taslaklarda, konu başlıkları, bağlantı sayfaların belirtilmesi, işinizi kolaylaştıracaktır.
Benzer siteleri inceleyin
Yapmak istediğiniz siteye "konu" olarak benzer siteleri inceleyin. Başkalarının ne tür çözümler bulduğuna bakın. Yararlanacağınız örnekler (çalacağınız değil) bulabilirsiniz. Daha da önemlisi, nelerden kaçınmanız gerektiğini anlayabilirsiniz...
Dikkat etmeniz gereken, bu incelemeden hemen sonra çalışmaya başlamamak... İstemeden bile olsa, etkilenmek hoş olmaz. Bırakın üstünden bir gece geçsin. Sizde bir sentez oluşsun...
Yanılmaktan korkmayın
Özellikle ilk sitelerinizi hazırlarken, başkasının her yaptığı, nedense sizinkilerden daha güzel gelir... Olabilir de...
Ama yapmaya başlamaz ve başladığınızı bitirmezseniz, bunun ne kadar doğru bir ihtimal olduğunu asla bilemezsiniz.
Başkalarının fikrini alın
Bu işte iyi olduğunuzu düşünüyor bile olsanız, başkalarına belirli aralıklarla yaptıklarınızı gösterin. Gözünüzden kaçan birşey olabilir. Mesela, 4 yaşındaki kızınız bile ileri ve geri okların ikisinin de aynı yöne baktığını sizden önce farkedebilir...
Daha da önemlisi, hazırladığınız sitenin sahibi, bütün planlarınızı değiştirmek zorunda kalacağınız bir isteğini belirtmeyi unutmuş olabilir. En sondan en başa dönmektense, aradan başa dönmek iyidir.
İlk yaptıklarınızı atacak kadar cesur olun
İster kendiniz için hazırlayın ister başkası için, içinize sinmediğini hissedince, bırakın... Yeniden başlayın. Birinin yanında maaşla çalışıyorsanız bu öneriye kulak vermek güç olabilir...
Siz yine de elinizden geldiğince bunu uygulamaya çalışın.
Sonuçta kendi bildiğinizden şaşmayın
Yukarıdaki önerileri uyguladığınız konusunda içiniz rahatsa, gerisine boşverin...
İşini yaptığınız firma beğenmiyorsa, gidip başkasını bulsun, beğenmeyenler sitenizi ziyaret etmesin...
Herkesi birden memnun etmenin yolu yoktur. Unutmayın!
Şimdi Bedava Site Kurma Derslerine Başlayalım.... İlk olarak videolu anlatımdan başlayalım site kurmak için videolu anlatım Videoyu izleyemiyenler Videodada izlediğimiz üzere nasıl bedava site kuracağımızı öğrenmiş olduk eğer anlamadıysanzı birde görsel anlatımımıza bakın <1.ADIM> Sitemize yani "www.bedava-sitem.com"a gireceğiz ve "Kayda git" butonuna basarak sitemizi kuracağızResimdede gördüğünüz üzere sitemize girip "Kayda git" butonuna basacağız<2.ADIM>İlgili alanları doldurarak "kaydı yolla" butonuna basacağız ve sitemizi oluşturacağızResimde gördüğünüz üzere ilgili alanları doldurun ve kaydı yolla diyin<3.ADIM> Sitemiz oldu HAYIRLI OLSUN<4.ADIM>Sitemize giriyoruzSite ismini ve şifrenizi yazın ve sitenize girin<5.ADIM>Sitemizin Tasarımını değiştirecez.Sitemize girdikten sonra "Tasarım ayarları" yazan butona tıklayacağız<6.ADIM>HTML Yani iceblue red ve butterfly tasarımını yapmayı göstereceğim.Tasarımlardan iceblueyi seçin.Seçtikten sonra tema sitesi bulmamız gerekiyor benim size tavsiyem htmlsablonkod.tr.gg adresi siteye girin üst menüde iceblue yazar ona tıklayın gelen resimlerden birini beğenin sonra altında yazan kodu kopyalayın.Kopyaladıktan sonra tasarım ayarlarında gelişmiş yazan yer var ona tıklayın.Orada "Tasarımın üzerindeki yaz" diye bir yer vardır kodu oraya yapıştırın.Anlamazsanız görselden yapınKodu Kopyalayın Ve Buraya yapıştırın sonrada kaydete basın sitenizin teması değişecektir. ANLAMAYANLAR İÇİN HTML TEMA UYGULAMASI VİDEOLU ANLATIM KOYDUM...
Videoyu İzleyemeyenler Şimdi HTML Tasarımını Öğrettim ama bazılar CSS Tema yani Değişik stil istiyorlar Onu anlatıorum şimdide <6.ADIM<CSS Tema en baş dediğim site yani htmlsablonkod.tr.gg adresine gidin üst menüde css desing der tıklayın. Ordan beğendiğinizi Seçin Ve o orda beklesin biz bedava-sitemde tasarım ayarlarına dönelim orda stil tema seçerken CSS Desing-pek sevilmeyen yazar onu tıklayıp kaydet diyin.anlamazsanız görsellden bakınŞimdi önceden icebluedeyken gelişmiş ayarlardan tasrımın üzerindeki yazı yeri vardı şimdi bakın oraya tasarımın üzerindeki yazı altındaki yazı ve CSS Kodu yeri geldi.htmlsablonkod.tr.gg adresinde seçtiğimiz kodları aynen şu şekil yapacağızBunları yaptıktan sonra tasarım aşaması bitiyor. Bazı Kişiler css'nin ne olduğunu bilmediği ve nasıl kunlanılldığı bilmediği için bir anlatım hazırladım.Bu anlatım porfesyonel türündedirr belki anlayamaya bilirsiniz,Metin uzun olduğu için kutuda yazdım.İşte CSS nedir?: - Kod:
-
Css Nedir? HTML bize metin biçimlendirme alanında çok geniş olanaklar sunar. CSS, uzun yazılışıyla Cascading Style Sheets, veya Türkçesiyle Stil şablonları ise bunu bir adım daha öteye götürür, bize sayfalarımız için global şablonlar hazırlama olanağı verdiği gibi, tek bir harfin stilini; yani renk, font, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki bu esnekliğidir. Bir web sayfası içerisinde zaten estetik kuralları gereği yüzlerce renk ve font kullanmayız. Genelde birbiriyle uyumlu birkaç renk ve birkaç font kullanırız ki, bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün web sayfamızda kullanabiliriz.Bu şekilde güncelleme yaparken de onlarca sayfayı değiştirmekten kurtuluruz. CSS kodları HTML kodlarının içine yazılırlar. Türüne göre body veya head bölümlerinde yer alabilirler. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML belgesi içerisinde çağırılabilirler. Hemen hemen her konuda olduğu gibi CSS konusunda da Microsoft Internet Explorer ve Netscape farklı yorumlar ortaya koyarlar. Bu noktada her iki browser'ın da aynı/benzer yorumlayacağı kodlar yazmak en uygunudur.
LİNK ÖZELLİKLERİ a :Linkin, sayfa açıldığında tıklanmadan veya ümleç üzerine getirilmeden önceki durumudur. a:hover :Linkin imleç üzerine getirildiğindeki durumudur. a:active :Linkin tıklandığı andaki durumudur. a:visited :Linkin tıklandıktan sonraki durumudur.
BİÇİMLENDİRME: color:Linkin rengini belirler. background-color:Linkin zemin rengini belirler. background-image:Linkin zeminine resim ekler(Bu animated-gif de olabilir.) text-decoration:Linkin altının,üstünün vs. çizgili olup olmayacağını belirler. font-weight:Yazının kalınlık veya inceliğini belirler. border:Linkin etrafına kenarlık ekler. display:Linki içeren hücre , satır vb. istenilen alanın seçilmesini sağlar.
LİSTE ÖZELLİKLERİ disk:Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar. circle : Liste biçiminin çember şeklinde olmasını sağlar. square : Liste biçiminin kare olmasını sağlar. decimal : Liste biçiminin rakamlardan oluşmasını sağlar. lower-roman : Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar. upper-roman : Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar. lower-alpha : Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar. upper-alpha : Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar. none : Listenin simgesiz olmasını sağlar. inside : Listenin ikinci satırının en soldan başlamasını sağlar. Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar. list-style-image : Liste biçiminin resim olmasını sağlar.
KATMAN ÖZELLİKLERİ position:Katmanın yerinin belirlenmesini sağlar. absolute:Katmanın yerinin pencere esas alınarak belirlenmesini sağlar. relative: Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar. static:Katmanın yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar. top:Katmanın üstten ne kadar aşağıda olması gerektiğini belirler. left:Katmanın soldan ne kadar içeride olması gerektiğini belirler. width:Katmanın genişliğinin ne kadar olacağını belirler. height:Katmanın yüksekliğinin ne kadar olacağını belirler. overflow:Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler. auto:Otomatik olarak belirlenir. scroll:Kaydırma çubuğu ekleyerek görünmesini sağlar. visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin görünmesini sağlar. hidden:Sığmayan yerleri gizler. visibility:Katmanın görünebilirlik ayarını yapar. visible : Katmanın görünür olmasını sağlar. hidden:Katmanı gizler. z-index : Katmanların alttan üste doğru hangi sıra ile gösterileceğini belirler.1 değeri katmanın en altta olacağını belirtir.
FONT ÖZELLİKLERİ font-family:Yazı türünü belirler.(Arial , Verdana gibi.) font-style:Yazının normal veya sağa eğik olmasını sağlar. font-variant:Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar. font-weight:Yazının kalınlık-inceliğini belirler. font-size:Yazının büyüklüğünü belirler.
TEXT ÖZELLİKLERİ word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler. letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler. text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler. underline : Kelimenin altının (Satır altından) çizili olmasını sağlar. overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar. line-through : Kelimenin ortasından çizili olmasını sağlar. blink : Kelimenin yanıp sönmesini sağlar.(Netscape için) vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler. text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar. capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar. uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar. lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar. none : Kelimelerin orjinal metindeki gibi olmasını sağlar. text-align: Metnin dikey olarak nasıl hizalanacağını belirler. left : Metni sola yaslar. right : Metni sağa yaslar. center : Metni ortalar. justify : Metni iki yana yaslar. text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler. line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.) first-line : Metnin ilk satırının biçimlendirilmesini sağlar. first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar.
İMLEÇ ÖZELLİKLERİ crosshair:İmlecin artı işareti şeklinde olmasını sağlar. auto:İmlecin metinde dikey çizgi ,boş alanda normal ok şeklinde olmasını sağlar. default:İmlecin hem metinde hem de boş alanda normal ok şeklinde olmasını sağlar. hand:İmlecin linkte olduğu gibi el şeklinde olmasını sağlar. move:İmlecin taşıma işareti şeklinde olmasını sağlar. ne-resize:İmlecin sağa yatık normal ok olmasını sağlar. nw-resize:İmlecin sola yatık normal ok olmasını sağlar. se-resize:İmlecin yukardan aşağı doğru ve sağa yatık normal ok olmasını sağlar. sw-resize:İmlecin yukardan aşağı doğru ve sola yatık normal ok olmasını sağlar. n-resize:İmlecin aşağıdan yukarıya doğru ince ok şeklinde olmasını sağlar. s-resize:İmlecin yukardan aşağı doğru ince ok şeklinde olmasını sağlar. w-resize:İmlecin sola doğru ince ok şeklinde olmasını sağlar. e-resize:İmlecin sağa doğru ince ok şeklinde olmasını sağlar. text:İmlecin hem metinde hem de boş alanda metinde olduğu gibi görünmesini sağlar. wait:İmlecin meşgul animasyonuna dönüşmesini sağlar. help:İmlecin yardım-soru işaretine dönüşmesini sağlar
ZEMİN ÖZELLİKLERİ background-color: Zeminin rengini belirler. #color : Renk adı. transparent: Zeminin saydam olmasını sağlar. background-image: Zemine resim yerleştirilmesini sağlar. url : Zemine yerleştirilen resmin adresi. background-repeat: Zemine yerleştirilen resmin nasıl yayılacağını belirler. repeat : Resmin bütün zemine yayılmasını sağlar. repeat-x : Resmin sol-üstten sağ-üste doğru yayılmasını sağlar. repeat-y : Resmin sol-üstten sol-alta doğru yayılmasını sağlar. no-repeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar. background-attachment: Zemindeki resmin , sayfa kaydırma çubuğuyla hareket ettirildiğindeki durumunu belirler. scroll : Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar. fixed: Sayfa kaydırılsa da zeminin sabit kalmasını sağlar background-position: Zemindeki resmin istenilen şekilde yerleştirilmesini sağlar. top : Resmi yukarı yerleştirir. center : Resmi ortalar. bottom : Resmi aşağı yerleştirir. left : Resmi sola yerleştirir. right: Resmi sağa yerleştirir. ...px : Resmin soldan istenilen ölçüde içerde olmasını sağlar.
TABLO ÖZELLİKLERİ margin : Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler. margin-top : Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler. margin-right : Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler. margin-bottom : Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler. margin-left : Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler.
padding : Tablo kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler. padding-top : Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler. padding-right : Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler. padding-bottom : Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler. padding-left : Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
border : Tablonun kenarlarının şekillendirilmesini sağlar.
border-top : Tablonun üst kenarının şekillendirilmesini sağlar. border-left : Tablonun sol kenarının şekillendirilmesini sağlar. border-bottom : Tablonun alt kenarının şekillendirilmesini sağlar. border-right : Tablonun sağ kenarının şekillendirilmesini sağlar.
border-width : Tablonun kenarlarının kalınlığını belirler. border-top-width : Tablonun üst kenarının kalınlığını belirler. border-right-width : Tablonun sağ kenarının kalınlığını belirler. border-bottom-width : Tablonun alt kenarının kalınlığını belirler. border-left-width : Tablonun sol kenarının kalınlığını belirler.
border-style : Tablonun kenarlık türünü belirler. border-top-style : Tablonun üst kenarlık türünü belirler. border-right-style : Tablonun sağ kenarlık türünü belirler. border-bottom-style : Tablonun alt kenarlık türünü belirler. border-left-style : Tablonun sol kenarlık türünü belirler.
border-color : Tablonun kenarlarının rengini belirler. border-top-color : Tablonun üst kenarının rengini belirler. border-right-color : Tablonun sağ kenarının rengini belirler. border-bottom-color : Tablonun alt kenarının rengini belirler. border-left-color : Tablonun sol kenarının rengini belirler.
color : Tabloda geçen metnin rengini belirler.
width : Tablonon genişliğini belirler.
height : Tablonun yüksekliğini belirler.
NOT : Başlık "TABLO" olarak verildi Ancak bu nitelikler başta TD , TR , TH vs. olmak üzere hemen her etiket için kullanılabilir.CSS' yi özel kılan da zaten bu...
KAYDIRMA ÇUBUĞU ÖZELLİKLERİ scrollbar-face-color :Kaydırma çubuğunun yüzey rengi , aynı zamanda zemini de etkiliyor. scrollbar-base-color :Kaydırma çubuğununun sol ve üst kenarlıklarını çizgi halinde kaplıyor. scrollbar-shadow-color :Sağ ve alt kenarlıkların gölge rengi. scrollbar-highlight-color :Sol ve üst kenarlıkların gölge rengi,aynı zamanda zemini de etkiliyor. scrollbar-arrow-color :Yön oklarının rengi
Kaydırma çubuğu, sadece Internet Explorer'da geçerlidir.
-Derlenmiştir.
stersen özellik isimlerini eğik yapabilirsin, mesela:
scrollbar-shadow-color :Sağ ve alt kenarlıkların gölge rengi. scrollbar-highlight-color :Sol ve üst kenarlıkların gölge rengi,aynı zamanda zemini de etkiliyor. scrollbar-arrow-color :Yön oklarının rengi Sıra geldi ekstra sitene HTML Javascript vb. Kodu eklemeye HTML Kodları genelde google chorome opera gibi tarayıcı programıyla çözülür onu ilerki konularda anlatacağım. Şimdi gelelim HTML Java nedir neye yarar genelde bu kodlar sitenize ekstra şeyler mesela haber döviz spor yada hava durumu gibi HTML Kodları oolur.Bunlar nasıl yapılır anlatayım şimdiBen size ilk HTML Nedir Onları Anlatayım Hypertext Markup Language (HTML ) belgelerin birbirlerine nasıl bağlanacaklarını ve belge içindeki metin ve resimlerin nasıl yerleşeceklerini belirleyen ve etiket (tag ) denilen kod parçalarından oluşan bir sistemdir. Belgeleri birbirlerine bağlamak için kullanılan Hypertextler oldukça güçlüdürler. Internet üzerinde yaşayan World Wide Web (Kısaca WWW ya da Web ), HTML sisteminin arkasında etkileşimli, çok platformlu, multimedia ve client/server uygulamaları yaratmak için kullanılır.
Web, formatlı metinler, ses ve resimlerden oluşan "yaşayan" belgelerden oluşur. Bu belgeler Webspace denen alanları oluşturur. Bir webspace tipik olarak,home page etrafında biriken linkli sayfalardan oluşur. Bu linkler webspace içinden bir iç adres ya da dış kaynaklı bir adres olabilir. Bir home page ise bilgi paylaşımını sağlamak için kullanılan bir sanal buluşma ortamı durumundadır.
Aslında HTML bir programlama dili değildir. Programlama dili, bir seri prosedür ve açıklamadan oluşur ve genelde dış bir veriye ulaşmayı amaçlar. Bir HTML belgesi ise, başlı başına verinin kendisidir. HTML veriler içine yerleştirilen "tag" parçaları, metnin, dolayısıyla belgenin, okuyan tarayıcı (browser )tarafından verileri nasıl işleyeneceğini belirler.
Geleneksel yayıncılıkta, yazar içeriği editöre verir ve editör bu içeriği düzenleyerek, basım için hazırlar. En son işlem olarak belge basılır. Bu işlem Web ve HTML yardımı ile yazar ve editör aynı kişidir ve oluşturulan belgeler Web server üzerinden yayınlanır. Bir başka fark, yapılan iş okuyuculara dağıtılmaz,okuyucular tarafından ziyaret edilir. Yaratılan belgeler okuyucunun tarayıcısında, bilgisayarın ortamına göre ve yaratıcının istediği şekilde görüntülenir.
Teknik olarak HTML, Standard Generalized Markup Language (SGML ) Document Type Definition (DTD ) olarak tanımlanır. SGML ilk olarak IBM tarafından 1960ların sonlarında, değişik bilgisayar ortamlarında belge taşıma sorununa çözüm olarak GML (General Markup Language ) olarak geliştirilmiştir. Zaman içinde GML, SGML olarak International Standards Organization (ISO ) tarafından standart haline getirildi. (Referans numarası: ISO8879:1986 )
Bir SGML belgesi üç ana parçaadan oluşur. İlk parça, tag ile normal metni birbirlerinden ayırmak için hangi karakter setinin kullanılacağını tanımlar. İkinci parça, etiketlerin uygun olarak kullanılacağı belge tipini tanımlar. Üçüncü parça ise, belgenin asıl metnini ve işaret etiketlerini içerir. Bu üç parçanın hepsiaynı fiziksel dosya içinde olmak zorundadırlar. Bütün HTML tarayıcıları aynı SGML karakter setini ve belge tipini kabul ederler, böylece kullanıcı yalnız metin içeriğini düşünür.
Bütün HTML etiketleri "<" ve ">" işaretleri arasına yazılır. Bazıları tek olarak kullanılır, <P> gibi, bazıları ise açma-kapama olarak kullanılırlar,>B>Dikkat! >/B>gibi.
Dikkat etmeniz gereken nokta: Bütün başlama kodları "<" ve ">" işaretleri arasında, bitirme kodları da "</" ve ">" işaretleri arasında olmalıdır. Bunların eksik yazılması, sayfanın biçimsiz görünmesine neden olur
Örnek: Kod Alanı:
<TITLE> Ornek Web Sayfasi </TITLE> <option>Seçiminizi Yapın: </option>
HTML kodlarını görebilmek için Internet Explorerda View menüsünden Source (Görünüm/Kaynak ) menüsünü tıklayın. Acılan Txt dosyasında (Not Defteri ) HTLM kodlarını görebilirsiniz. Dosya/Farklı Kaydet.. menüsünden .htm veya .html uzantılı olarak HTML dosyası yaratabilirsiniz. Şimdi çoğu kişi bunları anlayamıya bilir ben bunların ne olduğunu napayım bunlar nasıl kunlanılır onu anlat bana derler
Şimdi Size HTML Kodu Nasıl Kunlanılır Anlatayım
Şimdi diyelim siz bir html kodu buldunuz mesela bir hava durumu kodu buldunuz bunu nasıl uygulayacağım dersiniz.Bir sayfa açın mesela Ana Sayfa orda metin yazma yeri vardır.Köprü açma renk değiştirme boy değiştirme gibi.Orada Kaynak diye bir yer vardır metin yazma yerinin sol üst köşesinde eğer bulamazsanız görsele bakın. Gördüğünüz üzere kaynak yazan yere tıklayın ve kodu oraya yapıştırın.Kaynak'a tıkladığınızda boy renk tip değiştirme bloke edilir çünkü kaynka html yani kod bölümüdür boy renk tip gibi şeylerin kodu yazılır.Neysa kodu yapıştırın sonra kaydet diyin ve sitenize gelin yenile yada F5 yapın ve istediğiniz gelecektir.HTML KODU ARIYORSANIZ TIKLAYINBazı kişiler meraklı olduğundan HTML kodu nasıl yapılır merak ediyordur.Bende Tam olarak HTML kodu yapımını bilmiyorum ama kendi bildiğim derece anlatacağım size.İlk olarak HTML Kodu yapımı değildi alımını anlatacağım size.Kodu almak için tarayıcı olarak google chorme,Mozilla Firefox yada Opera gibi özel tarayıcı programları gerek. Google Chorme indirmek için TIKLAYINMozilla Firefox indirme için TIKLAYINOpera indirmek için TIKLAYINŞimdi programları indirdik sonra bir site açın mesela kr0waz.yetkin-forum.com 'u açın sonra en yukarıdaki mekan burası logosuna sağ klik yapın.Orada en alt tarafta "Öğeyi Denetle" diğe bir buton var ona tıklayın.Eğer göremezseniz görseldekini yapın Resimdede gördüğünüz gibi "öğeyi denetle"ye tıklayın. Tıkladıktan sonra alt tarafta karmaşık kodlar çıkacaktır aynı şu görsel gibi. Ordaki kodların herbirine mauseyi doğrulttuğunuzda o kod nerenin ise sayfada ora açık mavi bir renkte gözükecektir aynı görseldeki gibi. Gördüğünüz gibi kdo nerenin ise ora açık mavi renkte yanar eğer aradığınız yer oraysa o yere sağ tıklayın ve şöyle yazar "Copy and HTML" yazar ona tıklayın ve artık o yerin kodu elinizdedir... EĞER ANLATTIM KONU İŞİNİZE YARADIYSA ANKETİ ONA GÖRE OYLAYIN | |
|
-OquzHan- Admin
Mesaj Sayısı : 120 Reputation : 3 Doğum tarihi : 04/02/99 Kayıt tarihi : 29/09/10 Yaş : 25 Nerden : Adanaaa
Cüzdan Altın: 5000 Para: 6291
| Konu: Geri: Site Kurmak İçin Çarş. Ekim 06, 2010 1:10 am | |
| Yakında tk ve cs site kurmasını ve ücretli hosting domainlerini anlataağım..... | |
|