| Önceki başlık :: Sonraki başlık |
| Yazar |
Mesaj |
polibo06
Site Yöneticisi
Kayıt: Nov 01, 2006
Mesajlar: 2412
Konum: izmirimi özledim
|
 Tarih: 2007-08-06, 23:04:04 Mesaj konusu: Sayfa düzeni [Metinler İçin] |
 |
|
Metinlerimizi istediğimiz gibi ayarlamayı öğrendik ancak son derste bahsettiğim gibi sayfaya yerleştirmeden bahsetmedik. İşte şimdi yazılarımızı sayfamızda istediğimiz gibi düzenlemeyi anlatmaya çalışacağım
Tabi sayfa düzeninde en önemli husus bir alt satıra geçmektir.tıpkı word ta enter tuşuna basmak gibi düşünebiliriz
Bu söylediğimiz işlevi <br> komutuyla gerçekleştirmekteyiz ancak bu komuta özel bir hussus bulunmaktadır oda bu komutun bitimi yoktur ( </br>)
sadece başına gelen cümleyi bir alt satırda yazdırmaya yarar....Hemen kendi kodumuzu yazalım ve deneyelim
| Kod:
|
<html>
<head>
<title>polibo06</title>
</head>
<body>
bu yazı polibo06 tarafından Netopsiyon üyeleri için <br> özel olarak hazırlanmaktadır.<br> emeğe saygı
</body>
<html>
|
tek tek açıklama gereği duymuyorum resimde eklemiyecem bi zahmet note defterine yapıştırın ve önizleme yapın.... :)
En son polibo06 tarafından 2007-08-07, 20:42:12 tarihinde değiştirildi, toplam 3 kere değiştirildi |
|
| Başa dön |
|
 |
Bu Site Google Adsense ile Gelir Elde Ediyor
|
| Tarih: 2024-11-23, 09:46:15 Mesaj konusu: Forum Arası Reklamlar |
|
|
|
|
| Başa dön |
|
|
gokhan87
Mesaj: 300+
Kayıt: Oct 20, 2006
Mesajlar: 348
|
| Tarih: 2007-08-06, 23:16:53 Mesaj konusu: |
|
|
| paylaşım güzel basitten zora doğru bir anlatıma başlamışsın emeğine sağlık hasdi bakalım ;) |
|
| Başa dön |
|
|
polibo06
Site Yöneticisi
Kayıt: Nov 01, 2006
Mesajlar: 2412
Konum: izmirimi özledim
|
| Tarih: 2007-08-07, 19:22:05 Mesaj konusu: |
|
|
| gokhan87net :
|
|
paylaşım güzel basitten zora doğru bir anlatıma başlamışsın emeğine sağlık hasdi bakalım ;)
|
teşekkür ederim gökhan
arkadaşlar br komutu oldukça önemli olduğu için bir kaç daha örnek yapılması iyi olur diye düşünüyorum....Gelin hep beraber netopsiyondaki bir kaç nicki yazalım
| Kod:
|
<html>
<head>
<title>PoLiBo06</title>
</head>
<body>
<br>ali osman<br>seyranlı<br>saho<br>sercan<br>melih23<br>tabi ki<p><br>polibo06</p>
</body>
</html>
|
NOT 1= arkadaşlar kodlara baktığımızda hepsi yan yana yazılmasına rağmen html olarak kaydedip tarayıcı ile açınca hepsinin alt alta geldiğini göreceksiniz.
NOT2= <br> komutunun hiç biri sonlandırılmadığına dikkat ediniz.Bu komut istisnadır ve bitiş komutu yoktur bunun dışındaki tüm html kodlarının kapatılmasını gerektiğini biliniz.Aksi halde sayfanız hata verecektir
NOT3= <br> ve <p> komutları birbirine çok karıştırılır.İkisninde aynı özelliklere sahip olduğu söylenilmektedir eğer kodları önizlmesini yaparsanız arasındaki farkı görecek ve anlıyacaksınızdır.(<p> komutu sadece polibo06 yazısında kullanıldığına dikkat ediniz) |
|
| Başa dön |
|
|
polibo06
Site Yöneticisi
Kayıt: Nov 01, 2006
Mesajlar: 2412
Konum: izmirimi özledim
|
| Tarih: 2007-08-09, 00:12:09 Mesaj konusu: |
|
|
| Alıntı:
|
Bu Başlığımızı takip etmek isteyen kişiler <br> komutunun mantığını çok iyi kavramalaı çünkü sonuna kadar aynı mantığı kullanacaz.Word da yazı yazarken entere kullanamadan yazabilirmisiniz?yada yazdığınızı kim anlıyacak? beğenilecek mi? aynı soruları ben size soruyorum cevabınıza göre <br> komutunu öğrenmeye karar verin derim...Öğrenmek istiyorsanız sık sık kendi kendinize kod yazın...Şimdiye kadar öğrendiğimiz kadarı oldukça basit.kendi kendinize yapabilirsiniz ancak bundan sonra zorlaşacaktır o yüzden kodları usanmadan teker teker el ile yazınız....
|
SIRALI LİSTELER
Yazılarımızı listelemek...sık sık kullandığımız bir yöntemdir.Çünkü sayfa düzenine inanılmaz bir katkısı vardır.En basit örneği Vbulletinin google arşiv eklentisi sıralı liste kullanır. Html ile yapacağınız sitede site haritası sıralı listler ile yapılır vs. vs. vs... önemini anlatmaya gerek yok sanırım...
Sırsalı listeler o kadar zor değildir basit ama karışık bir işlemi vardır.Mantığı ise <br> mantığı ile aynıdır...
<ol> komutu sıralı listenin başladığını belirtir.Tabi bittiği anda </ol> komutu ile sonlandırılır.Bu komutlar tarayıcıya sıralaması gerketiğini söyler.Ancak bu bizim için yeterli mi? tabiki değil...nasıl sıralaması gerektiğini söylememiz gerekiyor.<li> komutunu kullanıyoruz. li komutu aynı br gibi çalışıyor. Kendisinden sonra yazılan cümleyi yada kelimeyi bir alt satırda göstermesini ister tarayıcıdan....Aynı mantık ile çalıştığından br gibi sonlandırılmaz.
Peki br varken li komutunu neden kullanıyoruz?
Aynı mantık ama çalışma farklı BR komutu imleci direk aşağı çeker ancak li sadece listelerde işlev görür bu yüzden li(LİST İTEM) listelemek için kullanılır.
| Kod:
|
<html>
<head>
<title>polibo06</title>
<body>
<ol type="1">
<li>Kimya
<ol type="1">
<li>İnorganik
<li>Analitik
</ol>
<li>Fizik
<ol type="1">
<li>Dinamik
<li>Statik
</ol>
<li>Matematik
<ol type="1">
<li>Sayılar
<li>Diğer
<ol type="1">
<li>Türev
<li>İntegral
</ol>
</ol>
</ol>
</body>
</html>
|
|
|
| Başa dön |
|
|
polibo06
Site Yöneticisi
Kayıt: Nov 01, 2006
Mesajlar: 2412
Konum: izmirimi özledim
|
| Tarih: 2007-08-09, 19:59:16 Mesaj konusu: |
|
|
| Kod:
|
<html>
<head>
<title>polibo06</title>
<body>
<ol type="1">
<li>Kimya
<ol type="1">
<li>İnorganik
<li>Analitik
</ol>
<li>Fizik
<ol type="1">
<li>Dinamik
<li>Statik
</ol>
<li>Matematik
<ol type="1">
<li>Sayılar
<li>Diğer
<ol type="1">
<li>Türev
<li>İntegral
</ol>
</ol>
</ol>
</body>
</html>
|
yazmış olduğumuz kodu analiz edelim...analiz ederken öğrenelim ;) Bunu yaparken kodları htmlye çevirip önizleme yaptığınızı varsayıyorum.
ana gövdemizden(html,head,body) artık bahsetmiyeceğim direk body komutu arasındaki yerleri açıklayacağım...
<ol type="1">
komutu ile tarayıcıya...."bundan sonraki tüm yazıları liste şeklinde göster" dedik...bunu yaparkende 1-2-3 diye sıralamasını istedik....nasıl mı?
<ol> listelemesini belirtir...<type ="1"> ise 1 den başlayarak sıralamasını istemektedir...
<ol type="1">
<li>Kimya
komutunu beraber incelersek...listele ve 1 den başla dedik...<li> br komutu gibi aşağı indirmektedir dedik imleci...imlec aşağı indi.listeli yazmalıdır. hemen başına 1 ekledi ve kimya yaızısını yazdı...dikkat ederseniz iç içe liste hazırladım bunun sebebi kodlar ile oynayarak değişik örnekler sunmak.şimdi type="1" komutu ile biraz oynayarak değişiklik yapalım...sonuçu gördüğünüzde bu özelliği çok iyi anlıyacaksınız
| Kod:
|
<html>
<head>
<title>polibo06</title>
<body>
<ol type="1">
<li>Kimya
<ol type="a">
<li>İnorganik
<li>Analitik
</ol>
<li>Fizik
<ol type="1">
<li>Dinamik
<li>Statik
</ol>
<li>Matematik
<ol type="1">
<li>Sayılar
<li>Diğer
<ol type="1">
<li>Türev
<li>İntegral
</ol>
</ol>
</ol>
</body>
</html>
|
kimyadan sonra gelen type="1" kısımını type="a" yaptık...lütfen farklılığı inceleyin...
| Kod:
|
<html>
<head>
<title>polibo06</title>
<body>
<ol type="1">
<li>Kimya
<ol type="a">
<li>İnorganik
<li>Analitik
</ol>
<li>Fizik
<ol type="1">
<li>Dinamik
<li>Statik
</ol>
<li>Matematik
<ol type="1">
<li>Sayılar
<li>Diğer
<ol type="I">
<li>Türev
<li>İntegral
</ol>
</ol>
</ol>
</body>
</html>
|
diğer yazısından sonra gelen type="1" kısmını type="I" yaptık...lütfen sonucu inceleyin....
eğer sonuçları incelediyseniz sıralı listelerde 1-2-3-4-5-6 gibi
a-b-c-d-e-f gibi
yada
I-II-III gibi sıralama yapacağımızı görmüş olduk....
arkadaşlar bazı bilgileri yazmayıp denemenizi istiuyorum veya ekran görüntüsü eklemiyorum bunun nedeni uğraşmanızdır
aklınıza takılan yerleri lütfen sorunuz |
|
| Başa dön |
|
|
polibo06
Site Yöneticisi
Kayıt: Nov 01, 2006
Mesajlar: 2412
Konum: izmirimi özledim
|
| Tarih: 2007-08-12, 18:44:44 Mesaj konusu: |
|
|
SIRASIZ LİSTELER
Bu tip listelerde de mantık aynı. Fark; listeleme yaparken maddelerin başına harf, rakam gibi unsurlar yerine küçük yuvarlaklar, kareler kullanabilmemiz. <ol> etiketi yerine <ul> etiketini kullanıyoruz, liste maddeleri için kullandığımız <li> etiketi burada da geçerli. <ol> için kullanılabilecek parametreler ise şöyle; type için disc (içi dolu daire), circle (içi boş daire), square (içi dolu kare). Compact parametresi sırasız listelerde de kullanılabiliyor.
| Kod:
|
<html>
<head>
<title>polibo06</title>
<body>
<ul type="disc">
<li>Kimya
<ul type="square">
<li>İnorganik
<li>Analitik
</ul>
<li>Fizik
<ul type="square">
<li>Dinamik
<li>Statik
</ul>
<li>Matematik
<ul type="square">
<li>Sayılar
<li>Diğer
<ul type="circle">
<li>Türev
<li>İntegral
</ul>
</ul>
</ul>
</body>
</html>
|
|
|
| Başa dön |
|
|
RdR
Mesaj: 50+
Kayıt: Nov 08, 2006
Mesajlar: 82
|
| Tarih: 2007-08-12, 21:52:33 Mesaj konusu: |
|
|
ßu ßir Gerçektirki ne Kadar ßilirsende Mutlaka Dahada Öğreneceklerin Vardır...
ßen Htmlde ßilgim Çok İYi Ama Listelemeler de Sadece < li> yi ßiliyordum
Çok Güzel anlatımda olmuş Çok Tşk Ederim..
ßilende ßilmeyende ßütün Arkadaşlar Mutlaka ßurayı Takip Etsinler cünkü Daha Önceki Gördüklerinizden Daha Değişik ßilgiler Ve Daha Güzel ßilgiler...
polibo06 Tşk Ederim Takip Edecem İnsallah Seninle ßirlikte J a v a s c r i p t Yazacağız ;) |
|
| Başa dön |
|
|
melik
Mesaj: 500+
Kayıt: Sep 06, 2005
Mesajlar: 944
Konum: Elazığ/Kovancılar
|
| Tarih: 2007-08-12, 22:01:09 Mesaj konusu: |
|
|
<br> kodunun yükseklik ayarını yapmak için ise şunu kullanabilirsiniz arkadaşlar
<br style="LINE-HEIGHT: 11px">
php olarak
<br style=\"LINE-HEIGHT: 11px\">
tabi 11 i isteğinize göre değişebilirsiniz.. |
|
| Başa dön |
|
|
Bu Site Google Adsense ile Gelir Elde Ediyor
|
| Tarih: 2024-11-23, 09:46:15 Mesaj konusu: Forum Arası Reklamlar |
|
|
|
|
| Başa dön |
|
|
polibo06
Site Yöneticisi
Kayıt: Nov 01, 2006
Mesajlar: 2412
Konum: izmirimi özledim
|
| Tarih: 2007-08-13, 00:42:37 Mesaj konusu: |
|
|
| Rdr dşüncelerin ve sözlerin için teşekür ederim....melik seninde eklemenden dolayı teşekür ederim onu söylemeyi unutmuştum ancak....metin biçimlendirmede bahsettiğim gibi de yapılabilinir. |
|
| Başa dön |
|
|
polibo06
Site Yöneticisi
Kayıt: Nov 01, 2006
Mesajlar: 2412
Konum: izmirimi özledim
|
| Tarih: 2007-08-13, 15:21:08 Mesaj konusu: |
|
|
Tanımlama Listeleri
Tanımlama listeleri amacı maddelerin açıklamasını yazmaktır.Bunu pek kullanılmayabilir.Farklı yollar ilede yapılabilinir ancak bilmenizde yarar olduğunu düşündüğüm çin sizler ile paylaşmak istiyorum.
tanımlama listelerinde kullanacağımız üç komut vardır bunlar
komutu ile tanımlama yazısının başladığını ve bittiğini belirtir...
| Kod:
|
|
li yerine dd------ol yerine dt komutlarını kullanacaz
|
| Kod:
|
<html>
<head>
<title>polibo06</title>
<body>
<font face="verdana" size="4" color="red">Neler öğrendik?</font>
<dl compact>
<dt><font size="3" color="blue">HTML nedir?</font>
<dd><font size="2" color="black">HTML (HyperText MarkupLanguage-Hareketli-Metin İşaretleme Dili) basitçe, browserlarla görebileceğimiz, internet dökümanları oluşturmaya yarayanbir çeşit dildir...</font>
<dt><font size="3" color="blue">HTML'de Temel Unsurlar</font>
<dd><font size="2" color="black">Bu dilde binary veyahexadecimal kodlar yok. Herşey metin tabanlı ve bir HTML dökümanıoluşturmak için ihtiyacınız olan şey bir editör.Piyasada iki tip editörbulunuyor. Birisi metin tabanlı, kod yazmayı gerektiren...</font>
<dt><font size="3" color="blue">Listeler</font>
<dd><font size="2" color="black">Sıralı listeler rakamveya harf yada her ikisini içiçe kullanarak liste oluşturmamızı, sırasızlisteler rakam/harf yerine madde imleri koyarak listeoluşturmamızı sağlar...</font>
</dl>
</body>
</html>
|
|
|
| Başa dön |
|
|
polibo06
Site Yöneticisi
Kayıt: Nov 01, 2006
Mesajlar: 2412
Konum: izmirimi özledim
|
| Tarih: 2007-08-14, 17:00:21 Mesaj konusu: |
|
|
Şimdiye kadar anlatmaya çalıştığım kısımlarda yazıları biçimlendirdik ve sayfa düzenine göre ayarlamaya çalıştık.Şİmdi bu başlığın son konusu yazıları sayfanın sağından başlatamak..sayfayı ortalamak, sola dayalı yazmak ve başlangıç ve bitişi aynı hizada olacak şekilde yazmak...
sağa dayalı yazmak
| Alıntı:
|
|
<p align="left">saga dayalı</p>
|
sola dayalı
| Kod:
|
|
<p align="right">sola dayali</p>
|
ortalamak
| Kod:
|
|
<p align="center">merkezde</p>
|
başlangıç ve bitişi aynı hizada yazmak
| Kod:
|
|
<p align="justify">alt alta</p>
|
bu şekilde metinlerin sayfa düzeni kısmı tamamlamış bulunmaktayız.Daha iyi kavramak için sık sık örnek yapmaya çalışınız. |
|
| Başa dön |
|
|
AndersNystrom
Mesaj: 200+
Kayıt: Dec 06, 2005
Mesajlar: 231
|
| Tarih: 2008-02-15, 14:31:13 Mesaj konusu: |
|
|
| Peki sayfayı dikey ortalamak için? |
|
| Başa dön |
|
|
polibo06
Site Yöneticisi
Kayıt: Nov 01, 2006
Mesajlar: 2412
Konum: izmirimi özledim
|
| Tarih: 2008-02-16, 00:51:57 Mesaj konusu: |
|
|
| Kod:
|
|
<p align="center">merkezde</p>
|
orada yazmışım zaten.... merkezde yazısını istediğin kadar uzatabilirsin...yazılar hep ortada olacaktır |
|
| Başa dön |
|
|
solhanli
Mesaj: 100+
Kayıt: Jul 07, 2005
Mesajlar: 105
Konum: Bingöl
|
| Tarih: 2008-02-16, 00:54:53 Mesaj konusu: |
|
|
| AndersNystrom :
|
|
Peki sayfayı dikey ortalamak için?
|
Sayfaların içeriğini dikey ortalamak için "valign=middle" kodu kullanılır.
Ayrıca, içeriğin üstte olması için "valign=top", altta olması için de "valign=bottom" kodları kullanılır.
Örnek: <p valign=middle>hede hödö</p> |
|
| Başa dön |
|
|
|
Arama
Rütbeliler
Profil
Giriş
