<Bir olayın hem sorunu hem de çözümü yine kendisinde saklı olabilir mi?> Kodlarla ilgilenmeye başladıysanız bu sorunun cevabını yaşayarak rahatlıkla öğrebilirsiniz.
HTML DERSLERİ 2 ÖRNEKLER
Bu bölümde, yeni etiketleri bir konu üzerinden öğreneceğiz. Bir önceki yazıda bahsettiğimiz head <h1> ve paragraf <p> kullanımını hatırlarsak; head (h1,…, h6) sitenin üst başlığını, paragraf da altına metin eklememize yardımcı olan etiketlerdi. Bakalım HTML dünyasında daha neler var?
YAZI STİLLERİ
Etiketleri öğreneceğimiz konu örneğin; şehirler olsun. Burada yazı stillerinin etiketlerini şehirlerde inceleyelim…
YAZI STİLLERİ
Yazı stilleri:
<b> yazıyı kalın </b>
<small> küçük </small>
<del> üstü çizili </del>
<i> italik </i>
<q> tırnak işaretli </q>
<tt> daktilo </tt> stilinde yazar.
STYLE ETİKETİ
Etiket içerisindeki tüm kelimelere aynı stili uygulamak için “style” etiketini inceleyelim…
HTML DERSLERİ 2 <style=” “>
Style: Burada başlığa renk katması için <h1> tagın içerisinde kullandık. Eğer paragrafı da renkli yapmak isteseydik o zaman <p style=”color:… ;”> şeklinde olurdu.
Stil için ayrı bir etiket açmayıp, hangi etikete style uygulanacaksa onun içerisine yazıyoruz. Şehirlerin yazı stili için <b> tagını seçtik, üst kısımda daha anlaşılır olması için etiketi her defasında açıp / kapatarak aynı işlemi yaptık. Aslında alt kısımda kısa yolu var. Eğer kelimelerimize uygulamak istediğimiz stil hepsi için aynı ise <b> tagını bir kez açıp keliemleri, şehirleri ya da yazmak istediğiniz yazıları yazdıktan sonra </b> tagı ile kapatabiliriz.
Eğer style her bir şehir için farklıysa o zaman her tagın içerisine tekrar style yazmak gerekir. Peki paragrafın yazı boyutunu büyütmek isteseydik? O zaman, <p style=”font-size=50px” > ‘ı kullanmamamız gerekir.
Yine aynı örnek üzerinden giderek “border“ı inceleyelim…
HTML DERSLERİ 2 <style=”border”>
Adı kadar yaptığı işte de havalı olan border stiline geçtik. Border, yazdığımız yazıyı çerçeveliyor. Kenarlık olarak anılan border’ın yanına yazdığımız rakam, bu kenarlığın ne kadar kalınlıkta olmasını istiyorsak ona göre daha kalın veya daha ince olmasını sağlıyor. Solid ise çizgi anlamında, bu çerçevenin düz çizgi şeklinde olmasını istediğimizi ve rengini de yanına yazarak belirtmiş olduk.
Örnekte border style‘in içerisinde yer alıyor. Bir önceki örnekte “color” ile yerini değiştirdik. Bu şekilde belirlemiş olduğumuz şehirlere kenarlık eklenmiş oldu.
LİSTELER
<ul> Sırasız Liste
Konuyu biraz daha ileri taşırsak, bu şehirleri liste halinde nasıl yazacağımızı inceleyelim…
HTML DERSLERİ 2 <ul>/<li>
ul: açılımı unordered list yani sırasız liste. Eğer liste herhangi bir düzen içerisinde olmayacaksa <ul> tagını kullanabiliriz. Sırasız olacağını belirttikten sonra <li> yazarak listeyi başlatabiliriz. Ayrıca listeye style ekleyerek görselleştirmek isterseniz; style listenin hepsine uygulamak için <ul style=” “> yapabilir, birbirinden farklı stiller olacaksa <li style=” “> şeklinde yazabiliriz. (Not: Yeni öğrenilen konuya bir öncekini eklemek konuyu daha iyi pekiştirmenize yardımcı olacaktır.)
Ayrıca <ul> listeleri için de stiller vardır. Sırasız da olsa işaretler önemli tabi… Burada yapmamız gereken tek şey, stili seçmek <ul style=”list-style-type:disc;“> Burada <ul> da style olduğunu bildirip listede kullanacağımız stil tipini yazıyoruz.
Stil tipleri şu şekildedir:
Stil tipi (varsayılan)disc; “●” içi dolu daire
2. Stil tipi circle; “○” içi boş daire
3. Stil tipi square; “■” içi dolu kare
4. Stil tipi none; işaret olmamasını sağlar.
<ol> Sıralı Liste
HTML DERSLERİ 2 <ol>/<li>
ol: açılımı ordered list yani sıralı liste. <ol> tagını yazdığımızda <li> tagı otomatik numara alarak kendisini sıraya dizer. Fark ettiniz mi? <li> tagı <ul> ya da <ol> tagından sonra geldi. Aslında sadece direkt olarak <li> de yazabiliriz. Ama o zaman ilk yaptığımız örneklerle arasındaki tek fark <br> yerine <li> kullanmış olacaktık ki ikisi de aynı sonucu verirdi. Hatta bazı yerlerde <li> için ul / ol tagının çocuğu ifadesi geçer. <ol> listeleri için de stiller vardır. Nasıl sıralandığı da önemli… Burada yapılması gereken daha kısa <ol type=”1″> direkt listede kullanacağımız stil tipini yazıyoruz.
Stil tipi (varsayılan) ” 1 “; Numaralı sıralanır.
2. Stil tipi ” A ” / ” a “; Büyük ya da küçük harfle yazılmasına bağlı olarak alfabetik sıralanır.
3. Stil tipi ” I ” / ” i “; Büyük yada küçük harfle yazılmasına bağlı olarak Roman rakamları ile sıralanır.
Ve son örnek, eğer bu şehirlerin ilçelerini de liste halinde yazmak isteseydik nasıl yazardık?
HTML DERSLERİ 2 Liste İçinde Liste Yapımı
Normal sıralı bir liste yapar gibi <ol> tagı ile başladık. Listemizin ilk sırasına <li> ile Ankara’yı yazdıktan sonra onu kapatmıyoruz ki içerisinde bir liste daha oluşturmaya başlamak için. Ankara’ya ait ilçeler bunun içerisinde listeleneceği için tekrar <ol> tagını yazarız. Şimdi sıra geldi bu ilçeleri <li> ile yazmaya, burada da tip olarak “a” stilini seçtik ve listeyi bu şekilde sıraladı. Listeleme işimiz bittiğinde, önce ilk baştaki </ol> tagını sonra Ankara için açtığımız </li> tagını kapatıyoruz. Tagları kapatmayı unutmayın. İlerde iç içe liste çok işinize yaracak. Bundan sonra yazılacak olan şehirleri mantığı yine aynı sadece İstanbul listesinin ilçelerini yazalım. Liste tipi olarak “i” stili kullandık. Bu şekilde çoğaltabiliriz.
<Bölüm Sonu>
HTML DERSLERİ 2 Yeni etiketlerle dolu bir bölüm oldu. Deneme, yanılma ile örnekleri uygulayabilirsiniz. Ya da hangisi kolay geldiyse onunla da başlayabilirsiniz. Çalışma için henüz bir program edinmediyseniz eğer; w3schools web sitesinde ‘try’ butonuna bastığınızda oradaki kodlarla çalışmanıza fırsat veriliyor. Bu şekilde hem el alışkanlığı kazanırsınız hem de istediğini yerde istediğiniz zaman HTML çalışabilirsiniz.
Hangi konuda olursa olsun bir amaç için yola çıktıysanız eğer kararınız yolunuzdaki ışık, azminiz de bu yolda yürüme gücünüz olur. Pes etmeyin! Keyifli çalışmalar….
Yeni haber ve gelişmelerden geri kalmayın.
Büşra OkurSon güncelleme: 20 Kasım 2020
3 428
Paylaş
Facebook Twitter LinkedIn Reddit WhatsApp Telegram
Paylaş
Facebook Twitter LinkedIn Reddit WhatsApp Telegram E-Posta ile paylaş Yazdır
Büşra Okur
Web sitesi
Sonrakini Oku
Oyun - 2.Kat
12 Ekim 2021
Civilization 6 Türkçe Yama Yapılışı – Sorunsuz
TeknoKültür
12 Ekim 2021
10 Dakikada Telegram Botu Nasıl Yapılır?
TeknoKültür
12 Ekim 2021
Porsche Elektrikli Araba Adımı Attı : TAYCAN
TeknoKültür
28 Ocak 2019
ÇOKLU KAMERA KULLANIMI TELEFONLARA NE KAZANDIRIYOR?
12 Ekim 2021
Civilization 6 Türkçe Yama Yapılışı – Sorunsuz
12 Ekim 2021
10 Dakikada Telegram Botu Nasıl Yapılır?
12 Ekim 2021
Porsche Elektrikli Araba Adımı Attı : TAYCAN
28 Ocak 2019
ÇOKLU KAMERA KULLANIMI TELEFONLARA NE KAZANDIRIYOR?
Yorum
3 Yorum
fastcomet review dedi ki:
25 Ekim 2021, 11:42
What’s up to all, it’s in fact a good for me
to pay a visit this web site, it contains valuable Information.
Cevapla
website Hosting review dedi ki:
24 Temmuz 2021, 10:28
Hello, its fastidious post about media print, we all be aware of media
is a wonderful source of information.
Cevapla
webhostingservice dedi ki:
1 Haziran 2021, 15:31
First of all I would like to say excellent blog! I had a quick question which I’d like to
ask if you don’t mind. I was interested to know how you center yourself and clear your mind prior to writing.
I’ve had a hard time clearing my thoughts in getting my ideas out there.
I do enjoy writing however it just seems like the first 10 to 15 minutes tend to be lost just trying to figure out how to begin. Any ideas or tips?