YazilimYazin: Aralık 2019

Html Dersleri | Title,ol,ul,li

SüperBill Aralık 21, 2019

Merhabalar Html Derslerine Kaldığımız Yerden Devam Ediyoruz. Şimdi Listeleme elamanları ve sayfamızın ismini nasıl verebileceğimiz hakkında konuşacağız Hadi başlayalım.

Öncelikle Eski Linkleri Şöyle bırakalım başlangıç yapmak isteyenler olur diye

Eski Yazılar

Sonrasında Sayfamıza Nasıl isim veririz görelim. Sayfamıza isim vermek öncemli olabiliyor daha doğrusu ismi olmayan birşey nasıl anlaşılacak değilmi :d bu yüzden title tagimiz bize yardımcı olacak title etiketimiz <head></head> İçine Yazılır deneyip daha detaylı görelim

Title : Sayfaya Başlığını belirtmemiz için kullanılır.

Başlangıç Taglarımızı Şöyle yazalım.

<html>

<head>

Title etiketi buraya gelicek

</head>

</html>

Evet Gördüğünüz Gibi html’de bu şekilde title kullanbiliriz.

<html>

<head>

<title>Sayfa İsmi</title>

</head>

</html>

Tabi Etiketimizi Kapatmazsak çalışmayabilir.

Title Etiketinin Mantığını anladığımıza göre artık liste elamanlarına geçebiliriz. Tabi Burada sadece bahsetme , nasıl kullanılır sorularını çözüyoruz detaylı öğrenmek için eğitim videoları veya kurslarına katılabilirsiniz.

<Li> Tagı

Baştan başlamak gerekirse ol tagimiz ile başlıyalım. Li ile başlamamız gerekiyor çünkü li liste oluşturmak için kullanılan bir elaman li olmadan olmaz anlıyacağınız şimdi li her tag’da olduğu açılıp kapanması ve içinde liste elamanımızı yazmamız gerekiyor kullanımı şöyle ;

<html>

<head>

<title>Sayfa İsmi</title>

</head>

<body>

<li>Liste</li>

</body>

</html>

<ol> Tagı

Artık li öğrendiğimize göre Ol geçelim. Değer verip liste yapbileceğiniz bir elaman yani bir alfabe harfiyle veya sayı ile listeyi başlatabilir ve sıralaya bilirsiniz.

<html>

<head>

<title>Sayfa İsmi</title>

</head>

<body>

</ol>

</body>

</html>

Dediğimiz Gibi Sadec e sayı değil harfde atıya biliyorsunuz bunu type ile ile yapabiliyorsunuz.

<html>

<head>

<title>Sayfa İsmi</title>

</head>

<body>

</ol>

</body>

</html>

Ol İle işimiz Bu kadardı tavsiye edebileceğim şey type hep denemeniz ve ol ile iç içe ne kadar liste yapabilirsiniz deneyin işte bir örnek

<ul> Tagı

Gelelim ul’ye artık sayı ve harf falan yerine nokta ve kare’li liste yapabiliyoruz.

Bilmemiz Gerekenler :

Circle : Daire Boş

Square : kare dolu

Evet bilmemiz gereken etiketler bunlardı şimdi bunları nasıl kullanabiliriz bir bakalım.

<html>

<head>

<title>Sayfa İsmi</title>

</head>

<body>

<li>Deneme</li>

</ul>

<li>Deneme</li>

</ul>

</body>

</html>

Ul type kullanımı da bu şekildeydi eğer type yazmazsanız içi dolu daire yapar.

Bahsedeceklerim Bu kadar Sonra Tekrar Görüşmek üzere hoşçakalın.

Html Dersleri | Table,Tr,Td,Th

SüperBill Aralık 14, 2019

SüperBill

Html Derslerine kaldığımız yerden devam ediyoruz. Aslında Kaldığımız Derken Şu an bir başlangıç yapıyoruz da diye biliriz.

Evet Başlıktan da anlaşıldığı gibi konumuz table yani tablo yapma , html de tablo nasıl yapılır ,tablo nasıl yazılır göstermeye çalışalım. Öncelikle diğer yazılarımızı okuduysanız zaten temel kodları bilirsiniz bu yüzden onlara fazla değinerek zamnınızdan çalmak istemem eğer bilmiyor yeni başlamış iseniz onlarıda bi okumanızı tavsiye ederim.

Diğer Yazılarımız:

| Html Dersleri

Tablo oluşturmak için tablonun mantığını anlamamız gerekiyor tablo satır ve sütünlardan oluşan bir yapı bu yüzden bizimde satır ve sütünları oluşturmak için taglarımız (Etiketlerimiz) var. Satır için tr Kullanırken Sütün içinde td kullanırız bunları detaylı inceleyeceğiz ama ondan önce şu basic kodlarımızı yazalım.

<html>

<head></head>

<body>

<table></table>

</body>

</html>

Evet Gördüğünüz gibi tablo oluşturmak için taglarımızı yazdık ve artık tablonun toblo halini alması için satır ve sütünlarını oluşturmamız gerekiyor

Tekrar açıklamak gerekirse:

Table: Bu tagımız adı üstünde tabloyu açmak için kullanılan bir tag

Tr: Satırları Oluşturmak İçin gereken bir kod

Td: Sütünları oluşturmak için gereken kod

Evet taglarımızı tanıdığımıza göre artık deneme kısmına geçebiliriz eğer elinizde bir kod uygulaması var ise onu kullanabilirsiniz yok ise direk not defterini açıp yazabilirsiniz.

<html>

<head></head>

<body>

<table bgcolor=red align="center">

<!--Satırı Oluşturuyoruz -- >

<tr>

<td bgcolor=white>1.Sütün</td> <td bgcolor="white">2.Sütün</td>

</tr>

</table>

</body>

</html>

Çıkan Sonuç :

Aradaki siyah kodlara şimdilik takılmanıza gerek yok ama ben ginede belirteyim biz onları renk ve tablonun duruş yerlerini belirtmek için yazdık yoksa tablomuz belli olmazdı. Evet gördüğünüz gibi basit bir tablo çıkmış olduk

Tr td çok karıştırılabilir bu yüzden çok fazla deneme yapın kod yazın araştırın kesinlikle faydası olacaktır.

Table , Tr ve td’nin mantığını anladığımıza göre artık gelelim son tagimize kullanması bazı yerler için faydalı olabiliyor öğrenmekte fayda var.

Th : Başlık anlamına geliyor yani mesela kalem ile ilgili bir tablo oluşturdunuz ve başlığa kalem dediniz ve altına pembe kalem , kırmızı kalem vs şeyler yazdığınızı düşünün kısaca kalın ve ortalı

Mantığı anlamak için ufak bir örnekti bu şimdi birde kod kısmında görelim.

<table align="center" border=1px>

<tr>

<th bgcolor="red"> Kalem </th>

</tr>

<tr><td>Pembe Kalem</td>

</tr>

<tr><td>Pembe Kalem</td>

</tr>

<tr><td>Pembe Kalem</td>

</tr>

</table>

Sonuç :

Evet Gördüğünüz Gibi Başlığımız kalın ve ortalı oldu bugünlük “table, tr, td, th” Bahsetmiş olduk şimdilik hoşçakalın. 😊

CSS HAKKINDA | NEDİR NE İŞE YARAR ?

SüperBill Aralık 12, 2019

SüperBill

Css Hakkında Konuşalım.

Cascading style sheet (Css) nedir? Css aslında html ile yazdığımız sayfalara şekil vermek için kullanılan bir işaretleme dilidir.

Merhabalar ben super_bil css hakkında tüm bildiklerimi yazıya dökmek isterim tabi okurmak isterseniz, aslında bakarsanız tasarım açısından iyi olan sitelerin tamamında css kullanılmıştır. Css’i size şöyle açıklayabilirim bir ev yaptığınızı düşünün html ile beton demir vs şeyleri yaparken css ile evin boyasını içini dışındaki tasarımları yapabilirsiniz.

Evet css ucu bucağı yok denilebilir yapılabileceklerin sınırı yok bu yüzden önemli bir işaretleme dili öğrenilmesi kolaydır ama öğrenmek için bir yol izlemeniz önemli olabilir. Html5 öğrendikten sonra css3 başlayın css aslında bir başlangıç noktası olabilir, php asp gibi yollara kapı açar neyse biz bu yazımızda başlangıç kısmını geçtikten sonra ufak örneklerle nasıl başlayabileceğinizdn bahsedeciğiz.

Şimdi dediğimiz gibi css için html bilgisine gerek vardır. Çünkü css’i html’in içinden veya dışından kontrol etmek için kullanırız.

| Html’le alakalı detaylı konumuz

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Basit Html kodlarımız bu şekildeydi şimdi bizim css’i bu sayfaya tanımlamamız için gereken bazı taglere ihtiyacımız var tanımlamanın 3 şekli var.

Dışdan tanımlama
Sayfadan tanımlama
Koda özel tanımlama

Evet gördüğünüz gibi 3 şekilde tanımlayabiliyoruz bunları teker teker anlatalım hepsinin bir kullanım amacı olabiliyor.

1.Dıştan Tanımlama

Genellikle En çok kullanılan bu yöntem kod yazarken farklı bir sayfadan kodlarınızı yazmanızı sağlar. Şimdi örnekle daha iyi anlamanızı sağlıyalım öncelikle başta gösterdiğimiz html kodları yazalım sonra head tag’inin altına link vermemiz gerekiyor.

<head>

</head>

Evet kodumuz budur bu şekilde yazmamız gerekiyor tabi bu şekilde bitmiyor. Html sayfamızın olduğu dosyanın içine bir css dosyası açmanız gerekiyor. Ben adına style.css dedim

Dosya yerlerine html aşina olmamız gerekmekte J Bu şekilde dosyamızın içine kodlarımızı yazıp deneme yapabiliriz.

2. Sayfadan Tanımlama

Bu sefer işimiz biraz daha kolaylaşıyor gine head taginin içine <styles></styles> kodlarını ekliyoruz ve içine kodlarımızı rahat bir şekilde yazıp sayfamızı tasarlıyoruz ama şöyle bir sıkıntı çıkıyor farklı bir sayfada açılan css doyasını istediğiniz gibi başka html dosyalarına uyarlayabilirsiniz, velain bu şekilde tag’larla yapılan stil ve işlemi sadece bu sayfa için uygulanır.

<head>

<style>

Font-size:20px;

Color:skyblue;

}

</style>

</head>

3.Koddan tanımlama

ve geldik sonuncu tanımlama yöntemine bu yöntem herhangi bir tag’e uygulanabilir aynı html nasıl tag’e özellik veriyorsak aynı yöntemle bu sefer style tanımlıyoruz.

<p style=”color:red; font-size:20px;”>bilisimcidersim</p>

Sonuç

Evet tanımlamaları öğrendiğimize göre artık css ile ilk başlangıcımızı yapabiliriz.

Dipnot: Css yazmak için bilmeniz gereken bir diğer önemli husus şudur ki “p{font-size:20px;}” buradaki “p tag’imiz” “süslü parantez kalıp” “içindeki ise kodumuz” “iki noktadan sonrası ise vereceğimiz değer.”

Evet html sayfamızı oluşturduk ve bir id tanımladık (id ve class ayrı makale yayınlayacağım yakında) diyelim ve id’imizin adı tablo olsun.

/* css başlangıç */

#tablo {

Width: 200px;

Height:200px;

Border: solid 1px blue;

Background-color:red;

}

Benden bu kadar daha sonra yeniden görüşelim olurmu :D şimdilik hoşcakal.

Onur Doğan

Selam Blog sayfama hoş geldiniz öğrendiğim bilgileri sizlere aktarabilmek için bu siteyi kurdum bazen kendim için bazen sadece yazmak için

Umarım keyif alırsınız ve size bir şeyler katabilirim keyifli okumalar.