İmrahor.Net - Paylaşımla Gelen Dostluk  

Geri git   İmrahor.Net - Paylaşımla Gelen Dostluk Webmaster Dünyası Webmaster Genel Konular HTML HTML Dersleri

Yeni Konu aç  Cevapla
Konu: HTML Dersleri  
Paylaş LinkBack Seçenekler Stil
Alt 02-19-2017, 05:18   #1
Admin
 dangeraus1 - ait Kullanıcı Resmi (Avatar)
Nerden: İstanbul
Mesajlar: 5.227
Konular: 2852
REP Puanı : 1710
@dangeraus1
yeni HTML Dersleri

<html>
<head>
<title>Burada Explorer başlığında görünecek yazı yer alır</title>
</head>
<body>
Sitenizde olması gereken herşey burada yeralır
</body>
</html>

--

Şimdi de Kodların Ne Anlma Geldiğini İnceleyelim

<HTML> </HTML>

Web sayfasında kodlar <html> kodu ile başlar </html> kodu ile biter. Diğer tüm kodlar bu iki kod arasında yer alır.



<HEAD> </HEAD>

<head> kodu ile başlar, </head> kodu ile biter. Sitenin adının yer aldığı Title'lın, Meta Tag denilen arama motorlarında bulunmanızı kolaylaştıran yazıların yazıldığı yerdir.



<TITLE> </TITLE>

<title> kodu ile başlar, </title> kodu ile biter. Her sitenin bir adı olması gerekir. Örneğin;
<title> PcTeknikZone </title>
Bu isim insanların sitenizi bulmasında yardımcı olur. Çünkü sitenizi ararken ismiyle ararlar...
(Ayrıca şunu belirtmekte fayda görüyorum ki; title kodu içine yazdıklarınız web sayfası tarayıcınızın başlığı olarak gözükür. Örneğin internet explorer da en üstte başlık kısmında yer alan yazı yani "::PC TekniK ZonE Forum ::" gibi..



<BODY> </BODY>

<body> kodu ile başlar, </body> kodu ile biter. Burası web sayfanızda olmasını istediğiniz yazı ve resimlerin bulunduğu bölümdür.



Kullanıcı Kişisel İmzası BİLGİ PAYLAŞTIKÇA DEĞER KAZANIR
dangeraus1 isimli Üye şimdilik offline konumundadır  
Alıntı ile Cevapla
Alt 02-19-2017, 05:25   #2
Admin
 dangeraus1 - ait Kullanıcı Resmi (Avatar)
Nerden: İstanbul
Mesajlar: 5.227
Konular: 2852
REP Puanı : 1710
@dangeraus1
Standart ---> HTML Dersleri

Şimdi bir deneme yapalım...

Bu kodları deneyebileceğimiz en kolay yer NOT DEFTERİdir. Şimdi;

Programlar>Donatılar>Not defteri ni açın ve aşağıdaki örneği yazın.

<html>
<head>
<title> ilk sayfam </title>
</head>
<body> HTML kodlarını öğreniyorum. </body>
</html>

ipucu: bu kodlar arasında tek boşluktan fazlasını space yada enter tusları ile yapamazsınız. Bunun için kodlar kullanılır. Bu kodları şimdilik kafanızın karışmaması için kullanmayacağız.

Bu dökümanı; ulaşımda kolaylık sağlaması için, masaüstüne yeni bir klasör açarak index ismiyle kaydedin ve kapatın. Tekrar bu dökümanı açın. Hiçbir değişiklik olmadığını göreceksiniz. Çünkü henüz bu dökümanı htm ye çevirmedik. Bu işlemi gerçekleştirmek için Dosya menüsünden farklı kaydet seçeneğini tıklayın ve index.htm yada index.html ismiyle aynı klasöre kaydedin. Şimdi de yeni kaydettiğiniz sayfayı açarak gözlem yapın. Artık bir web sayfası görünümünde olduğunu fark edeceksiniz.

Yazi Tipi, Rengi Ve Büyüklüğü İçin Ayarlamalar



Kullanıcı Kişisel İmzası BİLGİ PAYLAŞTIKÇA DEĞER KAZANIR
dangeraus1 isimli Üye şimdilik offline konumundadır  
Alıntı ile Cevapla
Alt 02-19-2017, 05:25   #3
Admin
 dangeraus1 - ait Kullanıcı Resmi (Avatar)
Nerden: İstanbul
Mesajlar: 5.227
Konular: 2852
REP Puanı : 1710
@dangeraus1
Standart

<FONT> </FONT>

Sayfada yazıların yazıldığı kodlar <font> kodu ile başlar, </font> kodu ile biter. Bu kodların içinde kullanılan komutlar şunlardır:
SIZE : Yazının büyüklük ayarlaması için kullanılan komuttur.
FACE : Yazı tipinin ayarlanması için kullanılan komuttur.
COLOR : Yazının renk ayarlaması için kullanılan komuttur.

Bir denem ile bunları kavrayalım:

<html>
<head>
<title> ilk sayfam </title>
</head>
<body>
<font size=”4” face=”verdana” color=”blue”> HTML kodlarını öğreniyorum. </font>
</body>
</html>

Görüldüğü gibi komutlar; “<font “ dan hemen sonra, yani “<font” kodunu “ >” ile tamamlamadan önce yazılıyor. Yapmak istediğimiz ayarlar çift tırnak yani “ “ arasında yazılıyor ve komuta = işareti ile atanıyor. Ayarlamalar bittikten sonra > işaretimizi yazabiliriz. Bu işlemden sonra yazmak istediğimiz yazıyı yazıp, </font> komutu ile kapatmalıyız. Renk ayarlarında rengin ismini yazabileceğiniz gibi hexadecimal kodunu yazarak ta daha ince ayarlamaları yapabilirsiniz.



Kullanıcı Kişisel İmzası BİLGİ PAYLAŞTIKÇA DEĞER KAZANIR
dangeraus1 isimli Üye şimdilik offline konumundadır  
Alıntı ile Cevapla
Alt 02-19-2017, 05:26   #4
Admin
 dangeraus1 - ait Kullanıcı Resmi (Avatar)
Nerden: İstanbul
Mesajlar: 5.227
Konular: 2852
REP Puanı : 1710
@dangeraus1
Standart ---> HTML Dersleri

Satırbaşı ve Paragraf Ayarları

--------------------------------------------------------------------------------



Satırbaşı yapmak

<br>

Klavyede yazarken alt satıra inmek için enter tuşunu kullanıyorsunuz. Ama web sayfası hazırlarken bu işe yaramaz. Alt satıra inmek istediğinizi sizin kod yazarak belirtmeniz gerekir. <br> yazdığınız zaman, yazınızı satırbaşı yapmadan yazmış olsanız bile, yazınız web sayfanızda satırbaşı yapılmış olarak görünür. Bu komutu "/" işareti ile kapatmak zorunlu değildir.



paragraf yapmak

<p>

Paragraf yapmak için kullanılır. Paragraf, Hem satırbaşı hem de bir satır boşluk olması demektir. Bu komutu "/" işareti ile kapatmak zorunlu değildir.

Yazının sola dayalı olması için:
<p>Yazınızı buraya yazacaksınız</p>

Yazının ortada olması için:
<p align=center>Yazınızı buraya yazacaksınız</p>

Yazının sağa dayalı olması için:
<p align=right>Yazınızı buraya yazacaksınız</p>

Yazı Stili Ayarları



Kullanıcı Kişisel İmzası BİLGİ PAYLAŞTIKÇA DEĞER KAZANIR
dangeraus1 isimli Üye şimdilik offline konumundadır  
Alıntı ile Cevapla
Alt 02-19-2017, 05:26   #5
Admin
 dangeraus1 - ait Kullanıcı Resmi (Avatar)
Nerden: İstanbul
Mesajlar: 5.227
Konular: 2852
REP Puanı : 1710
@dangeraus1
Standart

Kalın (Bold) yazı

<b>Yazınızı buraya yazacaksınız</b>




Eğik (İtalik) yazı

<i>Yazınızı buraya yazacaksınız</i>




Altı çizgili (underline) yazı

<u>Yazınızı buraya yazacaksınız</u>




Ama dikkat etmeniz gereken bir şey var. Biliyorsunuz, link verilen kelimelerin de altı çizgili oluyor. Yani altı çizgili bir kelime gördüğümüzde aklımıza gelen şey başka bir sayfaya gidecek olmamız... Siz link vermediğiniz kelimeleri altı çizgili yaparsanız, insanları yanıltmış olacaksınız. Onun için dikkat edin ...


Peki... Hem kalın hem eğik yazmak istersek ne yapacağız?
O zaman her iki kodu da peş peşe kullanacağız.
<b><i> Yazınızı buraya yazacaksınız</i></b>
Yani ne kadar özellik vermek istiyorsak onların hepsini kod olarak peş peşe yazabiliriz. Ama kodları kapatmayı hiçbir zaman unutmayın.



Kullanıcı Kişisel İmzası BİLGİ PAYLAŞTIKÇA DEĞER KAZANIR
dangeraus1 isimli Üye şimdilik offline konumundadır  
Alıntı ile Cevapla
Alt 02-19-2017, 05:27   #6
Admin
 dangeraus1 - ait Kullanıcı Resmi (Avatar)
Nerden: İstanbul
Mesajlar: 5.227
Konular: 2852
REP Puanı : 1710
@dangeraus1
Standart ---> HTML Dersleri

Sayfaya resim eklemek

--------------------------------------------------------------------------------



Resimleri sayfamıza yerleştirmeye yarayan etiketimiz img src="resmin adı" etiketidir. Tırnak işaretlerinin arasına koyacağımız resmin adını yazarız. Şimdi bunu bir örnekle gösterelim:

<html>
<head>
<title>Sayfada Resim </title>
</head>
<body>
<img src="cicek.jpg">
</body>
</html>


Resmin ortaya hizalanması

<img src="cicek.jpg align="center">



Resmin sağa hizalanması

<img src="cicek.jpg" align="right">


Resmimizin boyutlarını da belirleyebiliriz.
Bunun için resmin genişliğini ve yüksekliğini yazmamız gerekir. "width=230 height=252" etiketlerini kodumuza ekleriz.

<img src="cicek.jpg" width=230 height=252>



Resmin üzerine gelince görünen yazı

Mouse'umuzu yani faremizi sayfamızdaki bir resmin ya da grafik unsurun üstüne getirdiğimizde görünen açıklama metni koyabiliriz. Bu metinde resmin adı, sitemiz hakkında bilgi bulunabilir.
<img src="cicek.jpg" width=230 height=252 alt="web siteme hoş geldiniz ">

hatırlatma: Resimlerimiz ile .htm dosyalarımız aynı klasörde olmalı. Yoksa resimlerimiz gözükmez. Onun yerine bir çarpı işareti görmekte pek hoş olmaz...



Kullanıcı Kişisel İmzası BİLGİ PAYLAŞTIKÇA DEĞER KAZANIR
dangeraus1 isimli Üye şimdilik offline konumundadır  
Alıntı ile Cevapla
Cevapla

Bookmarks

Seçenekler
Stil

Yetkileriniz
Sizin Yeni Konu Acma Yetkiniz var yok
You may not post replies
You may not post attachments
You may not edit your posts

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-KodlarıKapalı
Trackbacks are Açık
Pingbacks are Açık
Refbacks are Açık


Şu Anki Saat: 12:40

Forum Yasal Uyarı Sosyal Medya
Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.6.0

Kuruluş : 2012
imrahor.net Her Hakkı Saklıdır

İmrahor.Net
Developer : dangeraus1

Telif Ve Gizlilik Politikası

facebook twitter google+


Sitemap
5, 6, 3, 4, 7, 33, 9, 42, 14, 15, 16, 17, 18, 20, 21, 22, 24, 25, 26, 27, 28, 29, 30, 90, 32, 182, 41, 34, 37, 36, 194, 43, 44, 51, 50, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 102, 103, 105, 106, 107, 108, 109, 110, 111, 112, 214, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 186, 181, 183, 184, 185, 187, 188, 189, 190, 191, 193, 195, 196, 201, 202, 215, 245, 203, 205, 204, 206, 207, 209, 210, 230, 266, 211, 212, 213, 232, 233, 216, 219, 236, 221, 220, 217, 218, 240, 272, 253, 235, 259, 222, 223, 224, 276, 225, 226, 227, 228, 229, 231, 234, 241, 237, 238, 257, 239, 244, 246, 247, 248, 275, 249, 250, 258, 260, 251, 252, 254, 255, 256, 274, 265, 268, 262, 261, 287, 264, 271, 267, 269, 288, 279, 291, 270, 273, 290, 278, 289, 292,