HTML İLE BASİT WEB SİTESİ – YEMEK TARİFİ SİTESİ YAPMAK !
Selamlar tekrardan hoş geldiniz Ben ATK bugün daha önce yaptığımız etiketlerin birleşimi olan birkaç tane bir şey yapmaya çalışacağım elimden geldiğince Umarım güzel örnek olabilir basit tutacağım Çünkü daha yeni yeni alışıyoruz html’e basit tutacağım daha sonra ileride zorlaşmaya başlarız şimdi ilk olarak bimin İçine geliyorum biliyorsunuz bizim ilk konumuz olan
H1 yani H etiketleri var başlık etiketlerinden bir tane kullanıyorum buraya ne diyeyim çorbalar bu örneği sıklıkla yapalım şimdi bir tane menü tasarlayalım Hatta bu H3 olsun ama onu sty yaparız şu an a çorbalar olsun CSS menü falan da ekleriz zaten öyle bir şey yapacağız noktayı da silelim çorbalar
Bu bizim en büyük başlık etiketimiz de hatırlıyorsanız çorbalarımız buraya geldi şimdi bizim bir tane sıralı listeye ihtiyacımız var o yüzden olu açıyoruz çorbaların ilk elemanı olan mesela neye girelim tarhana olsun tar ha na Tamam Tarhan tarhanam girdik daha sonra E şimdi bakalım Evet Taran burada yazıyor Bunun altına E şöyle bir şey yapabiliriz
Mesela bir tane paragraf etiketi açarız Bir tane de image ekleriz şimdi ilk olarak paragraf etiketini açalım diyelim ki tarhana neyden yapılırmış Bir bakalım Google’dan tarhana neyden yapılır buğday birçok şeyden yapılıyormuş arkadaşlar esas malzeme tahıl mış biz de onu yazalım tarhana esas olarak tahıldan yapılır yapılmaktadır şöyle bir virgül atalım ve ahf verelim bir
Tane Sonra ağımızın içine bakın burada link veriyorum ama paragraf etiketinin içindeyim hala tarif için tıklayınız Neden böyle yaptım a A’nın içine yazmazsam Eğer link gözükmez dolayısıyla bir yere Bayağı da bir uzun bir link oldu bakalım bir doğru almış mıyız acaba linki Tamam linkimiz doğru en son şöyle bir şey oluyor arkadaşlar tarana
Esas olarak Taran yapılmaktadır tarif için tıklayınız deyip gidebiliyoruz daha sonra E şöyle yapalım buraya bir tane image imizi atalım artık paragraf etiketi işimiz bitti buraya geliyorum image SRC diyorum Tabii ki de indirmeden link koyacağım buramı kapattım geliyorum burada görselleri görsellerden bir tane tarana diyor tarana çorbası yazalım böyle güzel bir şey şu güzel
Duruyor Bunu sağ tıkla e şurada çıkmadı Bir saniye büyütelim sağ tık yaptım resim adresini kopyala diyorum link için resim adresini kopyalı diyorduk hatırlıyorsanız daha sonra buraya yapıştırdım şimdi bir bakalım neler olmuş Evet bu resim Tabii büyük geldi bunu CSS le ancak küçültebilen gelsin r’nin içindeyim Bakın arkadaşlar daha burada kapatmadım Burada sadece
Çift tırnağım yani verdiğim Linkin bitti burada halen bakın kapatma işaretim duruyor çift tırnaktan sonra bir boşluk bırakmanızı tavsiye ederim bir boşluk bıraktıktan sonra Wi yazdığın zaman vi genişlik demektir arkadaşlar yani fotoğrafın genişliği fotoğrafın içinde olduğu için fotoğrafın genişliği oluyor burada px yazdığımız şey piksel arkadaşlar Pixel bilgisayarın ölçeklendirme birimidir
Pixel kısaltılmış ve px haline getirilmiş bu 200 tamamen farazi kafamdan attım Dolayısıyla bunu deneyerek yapabilirsiniz Wi deyip yani burada zaten wya bastığınızda bakın şöyle yaparsanız biraz sorun yaşarsınız bakın şey gelmiyor Bunlar falan gelmiyor kendiniz yazmanız gerekiyor ama bir boşluk bırakıp wya bastığınızda tıkladığınızda tamamen hazır halde gelir çift tırnak arasına istediğiniz boyutu yazabilirsiniz
Ben biraz daha büyük yapayım şu an 350 pikel gayet iyi Hatta belki 400 bile olabilir yani buradan genişliğini ayarlayabilirsiniz heiz var Onu da ilerleyen zamanlarda gösteririm He komutuyla yüksekliğini ayarlayabiliyor Ama şu an bize yeterli yüksekliği gayet iyi çünkü tırnak içerisinden sonra olması gerektiğini unutmayın arasına bir tane boşluk koyun
Ve yazacağınız pikel değerinin çi tıras olmasını unutmayın piksel değerinin bilgisayarın bir e boyutlandırma ölçeklendirme birimi olduğunu nasıl bize santimetre metre varsa bilgisayarda da pikel birimleri ve birkaç tane daha RAM birimleri tarzı birimler var Biz şu an pxi kullanıyoruz Bu da bilgisayarın sınıf ölçeklendirme yöntemidir direkt image etiketinin içinde yazabilirsiniz Şimdi bir tane bunu
Yazdık mesela Bun örnek birkaç tane daha devam ettirelim Buradan bir tane daha le yapalım mesela bunun içine de tavuk çorbası diyelim mesela pl tavuk etinin tavuk etinin haşlanmasına ortaya çıkar şöyle Ç de yazalım burada ığ larda e sağı Işık yanmasının sebebi arkadaşlar bizim dilimizi İngilizce seçtik İngilizcede I
Olmadığı için burada Yani bu ne işareti bu i olmalı demek istiyor Ama sorun çıkartmaz aklınızda bulunsun buraya da virgül koyalım a harfimiz açalım şöyle diyelim ki tekrardan tarif için tıklayınız çok Basic bir site buradan Geliyorum tavuk çorbası diyorum tavuk çorbasını buluyorum güzel böyle görsel olursa böyle daha şık bir görsel mesela bunun
Gibi Ama bu çok büyük olur şu mesela gayet hoş hem ilk resmimiz beraber uyumlu olacağını düşünüyorum resim adresini kopyala dedim geldim buraya hemen bunun içine yapıştırdım arimi hem kullan image yaptık orada kullan buraya imine gelelim SRC diyelim biz bunu burada kullanacağız fotoğraf için tarif için tarif yazmamız lazım mantıken fotoğraflar nasıl tarif
Edeceğiz hemen geldim terbiyeli tavuk şeymiş Ben burayı zaten daha önce kullanmıştım güzel bir hemen buraya da linkimizi yerleştirdiğimiz zaman sitemize tekrardan Bir bakalım Evet tavuk Ç Ama bakın çok yakın olmuş tavuk çorbası burada çıkmış güzel şimdi bunun heini sınayacağız Ama ilk önce daha ön bir BR komutunu şu ikisinin arasına kullanalım
Biraz daha açılıyor mu açılmadı maalesef Muhtemelen şeyden dolayı bunların listeleme etiketinde olduğundan dolayı şimdi buranın He değerini düşürelim 300 pikel yapalım he de arkadaşlar vtin V genişlik He uzunluk anlamına geliyor tamamen Yazım mantıkları aynı 300 bence iyi oldu ama bu sefer witi küçük oldu vtin de mesela büyüttüğümüz zaman Yukarıdaki gibi 400 pikel
Yapalım aynı boyutlara gelsin Tabii biraz görüntüde kayma oldu pikselde Bu da normal çünkü resm boyutunu çok küçülttüm bu şekilde tavuk çorbasını da yaptık araya çok yakın oldu ama yani yapacak bir şey yok Onu allla da yani ul listesi de kullanabilir ama böyle değil bence yani Basic bir site için bence
Gayet iyi bir örnek burada tavuk Taran alard tanaya tıklayınca gidiyor burada tavuk çorbasına tavuk çorbasına tıklayınca gidiyor Burada yani Bunu yapmamın sebebi Biz burada arkadaşlar gördüğümüz tüm konuları kullandık bakın paragraf etiketini görmüştük kullandık linkleri görmüştük kullandık sıralı listeleri görmüştük kullandık yani listeleme etiketlerini H etiketlerini görmüştük kullandık yani Gördüğümüz her şeyi bir örnekte
Birleştirmek istedim ben dolayısıyla böyle bir ufak bir örnek yapmak istedim Tabii siz bunu biraz daha uzatıp biraz daha geliştirebilirsiniz tabii ki de öğrendikleriniz bu ufak Herkesin anlayabileceği gibi bir örnekti buradan ne yaptığımızın üstüne geçersek ilk bir tane sıralı liste açtık açtan sonra tabii ki her şey sıralı Listenin içinde
Ilk olarak sıralı Listenin ilk elemanını girdim Tabii Eee ilk elemanını girdikten sonra şöyle de yapabiliriz arkadaşlar yani Ama hiç öyle karıştırmasın Her neyse ben böyle bir yapayım deneyelim bakalım bu lii buradan alayım anlatırken aklıma bir aydınlanma geldi böyle olsa ne olur hiçbir şey değişmiş Ben şu arayı Belki biraz açar diye düşündü
Açm Ama önemli değil Burada ilk etik şeyimizi açtık ilk elemanımız gönderdik bu elemanımız altına taranın neyden yapıldığını işte tarifini için bir link verdik Ve taranın resmini koyduk Bu şekilde menü tarzı bir şey oldu aslında kullanıcıya güzel de hitap ediyor bence çok tatlı oldu y Umarım anlamanıza yardımcı olur
KAYNAK
