Dreamweaver’da web sayfalarına flash resim yani slayt gösterimi eklemeye ne dersiniz? Gelin birlikte yapalım o zaman.

Insert > Media > Image Viewer

Yukarıdaki menüye tıkladığımızda şu şekilde bir pencere açılacak:

Flash’ın adını yazarak kaydedelim.

Sayfaya flash geldiğinde flash’ın büyüklüğünü resimlerimizin büyüklüğüne göre ayarlayabiliriz.

Flash tıklayıp etkin hale getirdiğimizde sağ tarafta Flash element bölümü açılacaktır.

1- Flash sayfasının rengi
2- Açılan resimlere link istersek üzerine gelip tıkladığımızda yeni bir pencereden link verebiliriz
3- Link verdiğimiz yerlerin nasıl açılacağını buradan ayarlayabiliriz.
4- Flash’a burada tıklayarak resim ekleyebiliriz.
5- Yes olursa ileri-geri-durdurma botonlarıgörünür, No olursa görünmez.
6- Yes olursa resim gösterimi sürekli devam eder, No olursa son resimde resim gösterimi durur.
7- Resim değişimi olurken verilen animasyonları değiştirir.
8- Resim değişme süresi

Flash sayfasına resim alma, img1.jpg, img2.jpg.. yazan yeri tıkladığımızda kırmızı daire içine aldığım yeri açtığımızda:

Yeni bir pencere açılacak. Burda img1.jpg… yazılarını silelim.

“+” ya basarak resim ekleyebiliriz.

Animasyon değiştirme

Resimlere link verme

Sayfadaki son görünümü

Gelen aramalar :

• dreamweaver slayt ekleme
• dreamweaver slayt yapımı
• dreamweaver da slayt yapma
• web slayt
• web sitesinde slayt nasıl yapılır

The post Dreamweaver da nasıl slayt yapılır first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

Bu tip uygulumlar genellikle gelişmiş web sitelerinde birden fazla kategorilere göre link vermek bilgi vermek gibi Konularda çokça işimize yaramakta.Bunun en canlı örneğini sanal kurs.net ana sayfada Son Eklenen Dersler, En Çok Okunanlar, En Çok Yorumlananlar adlı bölümde görmek mümkün.Bizde dersimizde farklı bir web sitesi için En Son Kayıt olan Mezunlar, En Son Kayıt olan Kullanıcılar ve Ziyaretçi Defterinden son Mesajlar diye bir tab panel oluşturacağız.

Tab Panel uygulaması Dreamweaver üst menü de Spry sekmesinde bulunmaktadır.

Buradan Spry Tab Panel’e tıkladığımızda Tab Panelimiz otomatik olarak web sayfamızda istediğimiz yere yerleşecektir.

İlk eklediğimizde tab panel otomatik olarak seçili olacaktır. Seçili olduğunda Properties panelinde tablar arasında geçiş yapabilir. Varsayılan Paneli değiştirebilir. Paneldeki tab sayısını artırabilir yada azaltabilir, tabların sırasını değiştirebiliriz. Tablar arasında geçiş yapmak için sayfa üzerinde tabın sağ kısmının üzerien fareyi getirdiğimizde bir göz simgesi çıkıcaktır. Bu göze tıkladığımızda o tab ve içeriği değiştirilebilir duruma gelir. Properties panelinden Panels kısmında bulunan artı işaretine tıkladığınızda tab sayısının arttığını göreceksiniz.

Gelelim tabların isimlerini ve içeriklerini değiştirmeye. Mesela Tab 1 i değiştirelim. Bunun için Panel seçili durumda iken Properties panelinden Tab 1 i seçiyoruz. Hangi tab ı seçersek sayfada o tab ın başlığı ve içeriği değiştirilebilir durumda olacaktır.

Aynı şekilde Properties Panelinden diğer tabları seçerek, başlık ve içeriklerini değiştirelim ve kaydedelim. Sayfayı kaydederken gerekli css ve js dosyalarının oluşturulup kaydedildiğini gösteren bir uyarı ile karşılaşırız. Ok diyerek bunlarıda kaydediyoruz ve sayfamızı hotsumuza atarken bu dosyaları unutmuyoruz. Yoksa tab panelimiz çalışmaz. Tab panelin css kodlarına müdahale ederek görselliği zenginleştirebilir ve istediğimiz görünüme sokarız. İşte Panelimizin son hali:

Gelen aramalar :

• tab menü nedir

The post Dreamweaver Sekmeli Tab Menü first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

Dersimizin 1. bölümünde Photoshop’ta sitemizi tasarlamıştık. Şimdi de bu tasarımı Dreamweaver’da kullanmada.

Sitemizi tasarlayıp Photoshop’ta kaydetmiştik ve elimizde images adlı bir klasör ve sitemiz.html oluşmuştu. Sitemiz.html bizi fazla alakadar etmiyor. images klasörü içerisindeki parçaladığımız resimleri sitemizde uygun yerlere koyacağız.

Şimdi Dreamweaver?ı açıyoruz, sıfırdan başlıyoruz. Layout Table ile 800?e 600lük bir alan hazırlıyoruz. Arka plan rengimizi kırmızının tonlarından bir tanesini seçtim. Şimdi resimleri üzerine yerleştirme zamanı geldi.

Şimdi tek yapmamız gereken ölçülerle Layout Table oluşturmak. En önde 190 piksellik bir kare vardı. Oraya logomuzu koyacaktık. Öncelikle onun için bir tablo oluşturalım.

Şimdi de arka plan için üst tarafta oluşturduğumuz bölümü yapalım. Onun da yüksekliği 90 pikseldi. Aşağıda göründüğü gibi çizelim.

Şimdi arka plan belirlemek için Standard görünüme geçiyoruz.

Properties bölümünde bulunan Bg bölümünden resmimizi buluyoruz.

Resmi bölerken üst bölümdeki geçişi 2 piksellik bir resim olarak kaydetmiştim. Resim kendisini devam edeceği için bu resmi seçiyoruz.

Sitemiz şu hâli aldı. Oluşan çizgiler de çizdiğimiz tabloların kılavuz çizgileri. Siteyi kaydettiğimizde bu çizgiler gözükmeyecek.

Butonlarımız vardı. Draw layout cell ile butonların büyüklüğü kadar bölümler oluşturuyoruz. İstersek bu alanı tek bir bölme olarak hazırlayıp öyle de butonları yerleştirebiliriz.

Alanı seçip Common menüsünde Image seçeneği ile ekliyoruz. Diğer seçenekleri de kullanabiliriz ama dersin içeriği bakımından yüzeysel olarak anlatıyorum.

Resmi ekledikten sonra butonları seçip Properties bölümünden bağlantıyı sağlıyoruz.

Üstteki butonlara isim verdikten sonra kabaca sitemiz bitmiş oluyor. Şimdi metinlerin bulunacağı bölümü yapmaya başlıyoruz.

Şimdi şöyle bir detay verelim. Layout bölümünde ?Layout Table? ve ?Draw Layout Cell?i inceleyelim. Sitemizin temelini buradan oluşturuyoruz. Layout Table ile sitemizdeki tabloları oluşturuyoruz. Draw Layout Cell ile de yazı alanımızı oluşturuyoruz. Her ikisini de gerektiği yerde kullanabiliyoruz. Layout Table?ın içerisine Layout Table tekrar çizebiliyoruz. Ama Draw Layout Cell içerisine Layout Table veya Draw Layout Cell çizemiyoruz. Bu mantığı oturttuktan sonra alanımızı çizelim.

Şimdi Photoshop ile tasarladığımız klasörden gerekli parçaları buluyoruz. Soldaki menü için anlatmak gerekirse, 3 parçadan oluşmaktadır. Bir tane gelişigüzel bir Layout Table çiziyoruz. Genişliğimiz 200 pikseldi. Gölgelendirme verdiğimiz için 200 pikselden biraz daha büyük olmayacaktır. Resmimizin üzerine geldiğimizde bir bilgilendirme kutusu çıkıp resmin boyutlarını görmemize yardımcı olacaktır. Resmimiz gördüğünüz gibi 205 piksel genişliğinde ve 9 piksel uzunluğundaymış.

Üstte ve altta bulunan oval köşeli bölüm için bir tane uygun boyutlarda Layout Table çizip arka plana gerekli resmi koyacağız. Ama önce dediğimiz gibi menü uzunluğunda bir Layout Table çiziyoruz. Resmimiz 205 piksel genişliğindeydi. Bu Layout Table da 205 piksel genişliğinde olmalı. Yüksekliği de şimdilik önemli değil. Gelişi güzel bir uzunlukta bırakıyoruz.

Deminki resmimizi yerleştireceğiz. Bir tane daha Layout Table çizeceğiz. 9 piksel uzunluğunda, table?ın içerisine ve en üstüne sabitlemeliyiz.

Tablomuzu oluşturduktan sonra Standart görünüme geçip arka planımızı bu bölgeye atıyoruz. Aşağıdaki Properties bölümünden yapıyoruz. Ardından aynı işlemi aşağıdaki bölüm için de yapıyoruz. Bu resmimizin uzunluğu da 15 pikselmiş. Onun için tablomuzun alt tarafına 15 piksel uzunluğunda bir tablo çizip bu resmimizi yine arka plan olarak atıyoruz. Bu işlemden sonra işimiz bitti gibi.

Ön izleme yaparak yerleştirdiğimiz şekilde bulunduğunu görebiliriz. Şimdi Layout bölümüne gelerek ortada bulunan alanı yapıyoruz. Bu bölgeye yazı yazacağımız için bu bölgeyi Draw Layout cell ile yapacağız. Arada kalan bölgeyi tamamen Draw Layout cell ile oluşturup arka planı belirlediğimiz 2-3 piksel olarak kaydettiğimiz aradaki bölümü arka plan olarak atıyoruz buraya.

Gördüğümüz gibi 3 piksellik bir resim ile tüm bölümü oluşturmuş olduk. Bu sayede sitemiz hem hantallıktan kurtulmuş, hem de güzel bir görünüme kavuşmuş olacaktır. Ortadaki bölümü Draw Layout cell ile yaptığımız için yazı yazdığımız zaman biraz fazla menü olursa bölüm kendini otomatik olarak uzatacaktır. Arka plan resmimiz de kendini otomatik olarak uzayan bölgeyle beraber uzamaya devam edecektir. Şimdi Aynı şekilde orta bölgedeki yazılarımızın olacağı bölümü de oluşturuyoruz?

Sitemiz kullanılabilir bir durumda. Size sadece içerisini doldurmak kalıyor.

Mesela bir ayakkabı firmasının sitesi olarak tasarlamış olalım? Sitemizin içeriğini yerleştirdikten sonra işimiz bitmiş oluyor.

Tasarım aşamasındayken transparan çalışmıştık. Şimdi de bu transparan çalışmamızın kolaylıkları sayesinde sitenin görünümünde değişiklikler yapalım?

Gerisi sizin yaratıcılığınıza kalmış bir şey. Başarılar dilerim?

(Unutmayın: Bu dersi tablolarla anlattım. Yeni başlayanlar “Tablolarla anlatılmış, daha kolaydır, divlerle hiç uğraşmayayim” gibi bir düşünceye kapılmasın. 1. dersin başında da bahsettiğim gibi bu 2 ay önce hazırlamış olduğum bir ders. O zamanlar divlerle pek aram olmadığı için tablolarla hazırlamıştım. Kesinlikle divlerle çalışmanızı öneririm. Div mantığını kavradığınız zaman bu tip siteleri yapmanız çok daha basit olabiliyor.)

The post Photoshop ile yaptığımız bir tasarımı Dreamweaver'a nasıl aktarırız first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

Bu derste sizlere Photoshop ile tasarlanan bir siteyi nasıl kullanılabilir duruma getireceğimizi anlatmaya çalışacağım. Takıldığınız noktalarda elimden geldiğince yardımcı olmaya çalışırım. Bu ders Sanalkurs 8. Sayı’da yayınlanmıştır. Dersi yaklaşık 2 aydan daha önce hazırlamış olduğumdan değişmiş bazı şeylerin eski olduğunu göreceksinizdir. Mesela siteyi ben 800 x 600 tasarlamışım. Halbuki artık bu boyutlar tercih edilmeyen boyutlardır. Şu anda genel olarak 1000 genişliğinde siteler tasarlanıyor ve çok daha verimli olduğu kanısındayım ben. Unutmadan belirteyim. Dersi Photoshop ve Dreamweaver CS3’te anlattım. Photoshop CS4 kullananlar fazla zorlanmayabilir belki ama Dreamweaver CS kullanan ve başlangıç aşamasında olanlar biraz zorlanabilir. Ama temel mantığı kaptığınız zaman pek sorun olacağını sanmıyorum.

Ders biraz kapsamlı ve uzun olduğundan 2’ye böldüm. 1. Bölümde Photoshop’ta tasarımı, 2. Bölümde de Dreamweaver’da kullanımını anlatacağım. Fazla uzatmadan derse geçelim…

Ctrl+N ile yeni bir çalışma sayfası açıyoruz. Sitemizin boyutunu belirliyoruz. Genelde siteler 800 x 600 boyutlarıyla yapılır. Uzunluğu bazen 600?den fazla olur ama genişliği genelde 800 pikseldir. Arka planımız beyaz ya da belirlediğiniz herhangi bir renk olabilir. Ama şeffaf (transparent) olmasını ben daima öneririm. Nedeni ise sitemizde arka plan rengimizi değiştirdiğimiz zaman şeffaf bölgelerin o rengi alabilmesi olarak açıklayabilirim. Transparan özelliği size yeri geldiğinde çok yarar sağlayabilir. Yine de sizin tercihinize kalmış bir şeydir elbette.

Eğer Photoshopta cetvelimiz açık değil ise Ctrl+R ile cetvelimizi açık konuma getiriyoruz. Photoshop?un özellikle site tasarım konularında işimize yarayan bir özelliği de budur. İlerideki aşamalarda bu cetvel sayesinde referans noktalarını belirleyeceğiz.

Rectangular marquee tool ile işe başlıyoruz. Bildiğiniz gibi üst menüden gerekli ayarlamaları yapıyoruz. İstediğimiz ilk önce sitemizde üst taraftan bir alan yaparak başlayalım. Unutmayın ki tasarıma daima arka planları yaparak başlamanız yararınıza olur. 800?e 90 piksellik bir alanımız olsun ve bu alan renk geçişli olsun. Üst menüden gerekli ayarlamaları yapıyoruz.

Çalışmamıza tıkladığımız zaman belirlediğimiz ölçüde alanı çalışmamızda seçili hâle getirecektir. Bu alanı istediğimiz yere taşıyabiliriz.

Gradient Tool ile istediğimiz renk geçişini gerçekleştiriyoruz. Gri renkten siyah renge geçiş yapalım.

Alanımız seçili hâlde iken üstteki cetvele tıklayıp sürüklemek suretiyle kılavuz çizgisi atıyoruz. Bu aşama dreamweaver?a aktaracağımız zaman resimleri bölmemizde çok kolaylık sağlayacak. Atadığımız çizgi mavi bir şekilde çalışmamızın dışına taşacak ama merak etmeyin bu çizgi sadece kılavuz çizgisi ve çalışmamızda bu çizgi gözükmeyecek.

Şimdi de sitemizin logosunu koyacağımız bir yer yapalım. 190?a 190lık bir kare oluşturalım Marquee Tool ile.

Yeni bir katman oluşturup alanımızı belirleyip içerisini belirlediğimiz bir renk ile dolduruyoruz. Ben siyahı tercih ettim.

Şimdi de Marquee Tool ile çerçevesi yapalım alanımızın. Rectangular Marquee Tool?u seçtiğimiz zaman yukarıdaki seçeneklerden ?Intersect with selection? seçeneğini seçerek seçeceğimiz alan ile seçeceğimiz alanın ortak bölgesini seçili hâle getirelim.. Çerçevemiz 5 piksellik olması için şimdi oluşturacağımız kare 180?e 180 olmalıdır. Biraz daha estetik katmak için Feather?ını da 5 piksel verelim. Bu sayede köşeleri keskin olmak yerine yuvarlak olacaktır.

Alanımızı seçtik. Kenarları ovalleştirmek tasarımımızı doğrudan etkilemiş oluyor.

Seçtiğimiz alanı beyaz renk ile boyuyoruz. Daha sonra buraya logomuzu
yerleştireceğiz.

Şimdi 40 piksel uzunluğunda butonlarımızı yine Marquee tool ile yerleştirip üzerine isimlerini yazalım. Blending Options ile de butonlara gölge verelim.

Şimdi de sol tarafta menülerimizin bulunacağı alanı yapalım. 200?e 100?lük marquee tool ile alan belirliyoruz. Bu menünün uzunluğunu yeterince uzun yapmalıyız. Şimdiki aşamada sadece görünümü belirliyoruz. Uzunluğunu dreamweaver ile ayarlayacağız. Bu alanı daha rahat kullanabilmemiz için kılavuz çizgilerle de belirliyoruz. Ardından Rounded Rectangle Tool ile köşeleri yuvarlak bir dikdörtgeni seçtiğimiz alana oturtuyoruz. Aynı işlemi yazılarımızın gösterileceği yer için de yapıyoruz.

Aşağıda boş kalan kısımları Crop Tool ile kesiyoruz. Slice tool ile gerekli yerlerini ayırıyoruz. Burada dikkat etmeniz gereken şey ise kullandığınız gölgelendirmeler ile kesmek ve gerekli olduğu kadar kesmektir. Unutmamanız gerekiyor ki siz bunu dreamweaver?da yerleştirirken zorlanmamanız gereken her şeyi yapmalısınız. Zamanla bu bilinci kendinizde otomatik olarak oturduğunu göreceksiniz. Ardından çalışmamız son hâlini alıyor.

Şimdi çalışmamızı File / Save for Web ile kaydediyoruz.

İşte geldik işin en önemli noktasına. Dikkat ederseniz renklerimiz büyük ölçüde kaybolmuş gibi duruyor. Bunun nedeni çalışmamızı bölmüş olmamız. Aslında renkleri normal ama öyle gösteriliyor. Bu pencereden üzerine tıkladığınız yerlerin normal hâle geldiğini göreceksiniz. Seçili olup olmama durumu diyebiliriz. Ayrıca demin bahsetmediğimiz bir şeyden bahsetmek istiyorum. Bölme yaptığımız zaman kılavuz çizgilerimizi gerektiği kadar kullanmamız gerekiyor. Tekrarlanan resimleri daima 2-3 piksellik resimler hâline getirerek kullanmak sitenin hantallığını engellemek bakımından çok önemlidir. Unutmayın, sitenizin tasarımını burada ne kadar akılcı bölerseniz işinizi o kadar kolaylaştırırsınız ve sorunsuz halledersiniz.

Sağ taraftaki menüden gerekli ayarlamaları yapıyoruz. Transparan çalıştığımız için jpeg olarak kaydetmemiz yanlış olur. O yüzden png-24?ü seçiyoruz. Eğer transparan çalışma yapmasaydınız bile yine size jpeg olarak kaydetmenizi önermezdim. Çünkü jpeg olarak kaydettiğiniz zaman grafiklerde az da olsa değişiklik oluyor. Düz renklerde bile piksellerde bozulma görüyorsunuz. Bunun olmaması için de transparan olmayan çalışmalarınızda da png ya da gif ile çalışmanızı öneririm şahsen. Yine sizin tercihinize kalmış bir şey.

Sitemiz.html olarak kaydettiğimizde nereye kaydettiysek oraya html ve images klasörünü görebiliyoruz. Böldüğümüz resimler images klasörü içerisinde bulunuyor.

Dersimizin 1. bölümü burada sona eriyor. 2. Bölümde görüşmek üzere…

The post Photoshop ile yaptığımız bir tasarımı Dreamweaver'a nasıl aktarırız first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

Öncelikle bu benim ilk dersim, yanlışlarım hatalarım varsa mazur görün. Yorumları okuyacağım.

Herkesin merak ettiği bir konu da Dreamweaver’da div’leri yan yana sıralamaktır. Bu derste bunun basit bir yöntemini ele alacağız.

Ben ilk başta yan yana sıralayacağım div’lerin dışına başka bir div eklemeyi tercih ettim ve içindeki bölmeleri yan yana sıraladım.

Evvela, 2 div açalım; birisi dıştaki div olan dis_bolme, diğeri de dış div’in içinde yer alan bölüm olan ic.bolme,

<style type="text/css">
#dis_bolme {
width: 500px;
height:250px;
background-color: #666
}
.ic_bolme{
	float:left;
	width:150px;
	height:150px;
	border:#CCC solid 1px;
	background-color: #F00;
	margin-right: 10px;
	margin-left: 4px;
</style>

Bölmelerin arasında 2px lik boşluk olduğunun anlamına gelir.

margin-right: 2px;

Bu komutumuz ise bölmelerin soldan sağa doğru dizildiğini belirtir.

float:left;

Şimdi ise Div id lerimizi yazıyoruz.

<div id="dis_bolme">
<div class="ic_bolme">Bölme1</div>
<div class="ic_bolme">Bölme2</div>
<div class="ic_bolme">Bölme3</div>
</div>

Evet arkadaşlar görünüm böyle olacaktır;

Div’lerinizi yukarıdan aşşağıya Dizmek istiyorsanız, Float seçeneği “none” yapmalısınız;

float:none;

Yaptığımız yan boşluk Margin “left” yerine “bottom” yaptık aşağılardan boşluk vermek için. İsterseniz Margin komutunu “Left” olarak da ayarlıyabilirsiniz.

margin-bottom: 4px;

Bu şekilde yaparsanız bölmelerin altından 4’er px lik boşluk olacaktır.
Görünüm şöyle olacaktır;

Gelen aramalar :

• html div kullanımı
• dreamweaver div kullanımı
• dreamweaver div
• div kullanımı html
• dreamweaver da div kullanımı

The post Dreamweaver da Div leri Yan Yana Sıralama first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

Yazıların üzerine gelince değişen resim yapımını anlatalım.

İlk önce resimdeki tablo gibi bir tablo yapıyoruz.Ben resimlerimi ve yazılarımı tabloya ekleyeceğim sizde div’e felan ekleyebilirsiniz.

<table width=”252″ border=”1″>

  <tr>
    <td width="137">Dreamveaver</td>
    <td width="188" colspan="2" rowspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td>Fireworks</td>
  </tr>
  <tr>
    <td>JavaScript</td>
  </tr>
  <tr>
    <td>Asp.Net</td>
  </tr>
  <tr>
    <td>SanalKurs.Net</td>
  </tr>
</table>

Şimdi resimdeki gibi <td width=”188″ colspan=”2″ rowspan=”5″>&nbsp;</td> hücremize resmimizi ekliyoruz ve resmimize bir isim veriyoruz.Ben name=”mmn” verdim.

İlk yazımızı seçiyoruz ve Tag Inspector panelinden Behaviors bölümüne geçiyoruz.Add Behaviors’a tıklıyoruz Swap Image seçeneğini seçiyoruz.Karşımıza resimdeki gibi bir pencere gelecektir. Dreamveaver yazısının üzerine gelince hangi resmin geleceğini belirledik.Her yazıya bu şekilde ayrı ayrı swap image uyguladık ve işimiz bitti.

Çalışmamızı kaydedebiliriz.

Gelen aramalar :

• siteye değişen resim ekleme

The post Dreamweaver da yazıların üzerine gelince değişen resim yapımı first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

Bir önceki dersimizde ne görmüştük arkadaşlar ve aynı zamanda ilk dersimizdi okuma fırsatı bulamayanlar bu derse başlamadan ona göz atarsa daha keyifli olur derslerin takibi arkadaşlar.

Bir Önceki Dersimiz: Temel Html ve Html Sayfa Bölümleri Ders1

Devamında bugünkü dersimiz ise html yazılar ve yazıalrı biçimlendirme ile başlıkları görecez nedir bu biçimlendirme derseniz

• Başlıklar
• Kalın Yazılar (Bold)
• İtalik (Yatık Yazılar)
• Altı Çizili Yazılar

Bu dersimizde yukardaki örnekleri ele alıp uygulama yapacağız arkadaşlar sizlerde farklı örneklerle bol bol uygulama yapmanızı tavsiye ederim.

Başlıklar

Html kodlarda başlık etiketi arkadaşlar sayfa içerisinde kullanacağınız yazıların boyutlarını belirlemek için kullanabileceğimiz kodlar.

Başlık Değerleri standart olarak 1 den 6ya kadar farklı değerle istediğimiz büyüklükte başlığı seçebiliriz yalnız ve yalnız dikkat etmeniz gereken yazı editörlerinde rakam büyüdükçe yazı karakteri her zamn büyür 12 olan bir karakteri 18 yaparsanız mutlaka karakter büyür html başlık değerlerinde ise aksine rakam büyüdükçe karakter küçülür arkadaşlar.

1 den 6 ya kadar başlık değerlerimizin olduğunu belirttik bu durumda 1 en büyük başlık 6 ise en küçük başlık olacağı muhtemeldir şimdi başlıkları html kodlamada kullanımını görelim arkadaşlar.

Html Başlık Kodlarının Kullanımı

<h1> barış özcan H1 Başlık</h1>
<h2> barış özcan H2 Başlık</h2>
<h3> barış özcan H3 Başlık</h3>
<h4> barış özcan H4 Başlık</h4>
<h5> barış özcan H5 Başlık</h5>
<h6> barış özcan H6 Başlık</h6>

Evet arkadaşlar şimdi uygulama zamanı açıyoruz not defrerimizi ve yukardaki başlık kodlarını kopyala yapıştır yapmadan yazıyoruz ve farklı kaydet diyerek dosya adına basliklar.html adını verip masaüstüne kaydediyoruz hata olmadığı sürece aşağıdaki görüntüyü almalısınız.

Html Başlıklar

Başlıklar Nerede Kullanılır?

Bu tamamen size kalmış arkadaşlar bir ipucu vermek gerekirse yukarda kırmızı ile yer alan Başlıklar Nerede Kullanılır? yazısı aslında bir başlıktır bu şekilde istediğinizi yapabilirsiniz.

Html Kalın (Bold) Yazmak

Html tümüyle eylem bekleyen bir dildir arkadaşlar siz belirtmedikçe brşey yapmaz siz tek tek belirtmek zorundasınız yazınızın bir kısmı yada hepsini kalın (bold) yazmak isterseniz bunun için <br>Yazılar</b> etiketini kullanacağız arkadaşlar

Html İtalik (Yatık) Yazmak

Yazılarınıı yatık (italik) yazmak içinde arkadaşlar ihtiyacımız olan etiket <i>Yazılar</i> olarak kullanabiliriz.

Html Altı Çizili Yazılar Yazmak

Yazılarınızda altı çizili kısım yada tümünü yapmak isterseniz yukardaki kodlara benzer şekilde <u>Yazılar</u> kullanabiliriz.

Html Üzeri Çizili Yazılar

Pek kullanışlı olmasada bilmenizde fayda var bir yazının üzerini çizmek için <s>Yazılar</s> etiketini kullanabiliriz.

Html Satır Atlama

Normal yazı yazarken satır sonuna gelip entere basıp alt satıra insekte htmlde bu faydası olmaz onun için satır atlanacak yere <br> kullanacaz.

Paragraf Oluşturma

Paragraf oluşturmak için <p>Yazılar</p> kodları arasında kalan yazılar paragraf şeklinde görüntülenir </p> etiketi kapandıktan sonra yazılacak yazılar satır başından görüntülenmeye devam eder arkadaşlar.

Biçimlendirmelerin Uygulaması

Yukarda anlatmış olduğum etiketlerin html kodlarda uygulaması sizlerde boş bir not defteri açıp verdiğim kodları aynen farklı örneklerlede deneyerek bolca uygulayın.

<b>barış özcan Koyu Yazı</b>    <br>
<u>barış özcanAltı Çizili</u>  <br>
<i>barış özcanYatık Yazı</i>   <br>
<s>barış özcanÜstü Çizili</s>  <br>
<b><u><i>barış özcanKoyu Altı Çizili ve Yatık Yazı</i></u></b>

Kodlarımızı yazdıktan sonra farklı kaydet diyerek bicimler.html olarak masaüstüne kaydedin arkadaşlar hata olmadığı sürece aşağıdaki resimdeki görüntüyü alırsınız.

The post web tasarım html dersleri -2 başlıklar first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.