HTML Dersleri 3

Merhaba Arkadaşlar ,

Bugün de metin ve görünüm düzenleme kodlarını göstereceğiz.Bu amaçla sitemizin teması renkler birbirleriyle uyuşmalıdır.Yani kırmızı çok içeren sitede lacivert yakışmaz ve bu da sitemize gelen ziyaretçilerin azalmasına neden olur.Ziyaretçilerimizin azalma tek temadan kaynaklanmaz içerik ve sitemizin yavaş açılırsa bu olaydan da ziyaretçilerimizi kaybederiz.Her neyse bu önemliydi hatırlatmak amaçlıydı.Şimdi dersimize başlayalım arkadaşlar...

Metin Düzenleme Etiketleri  

Html etiketleri kullanılarak metinler üzerinde görsel düzenlemeler yapılabilir. Bir metnin rengi, şekli, boyutu vs. üzerindeki değişiklik ve düzenlemelerin html etiketlerini kullanarak nasıl yapılacağına bakalım.


<HX>

<HX> etiketleri, dokümana başlık eklemek için kullanılan etiketlerdir. <hx> etiketindeki “x” ifadesi, 1’den 6’ya kadar değer almaktadır. Sayı azaldıkça yazı büyüklüğünde artış olmaktadır. Buradaki <h1>…</h1> en büyük başlığı, <h6>…</h6> ise en küçük başlığı gösterir.

Önizleme sağ taraftadır.









<HX> ile kullanılacak parametrelerden birisi “align” parametresidir. Align parametresi, Left (sola hizala), right (sağa hizala), center (ortala), justify (iki yanayasla) değerlerini alabilir.

<h1 align=”center”>  Maviindir Web Tasarım </h1> şeklinde yazıldığında “Maviindir Web Tasarım” yazısı sayfaya ortalanmış bir şekilde yazılacaktır.
_________________________________________________________________________________

<B>

İstenilen metni kalın (bold) olarak yazmak için kullanılır.

Kullanımı: <B>…</B> şeklindedir.

Örnek: 

 Maviindir Web Tasarım

_________________________________________________________________________________

 <U>

İstenilen metni Altı çizili (underline) olarak yazmak için kullanılır.

Kullanımı : <U>…</U> şeklindedir.

Örnek:

Maviindir Web Tasarım

_________________________________________________________________________________

<I>  

İstenilen metni eğik(italik) olarak yazmak için kullanılır. Kullanımı: <I>…</I> şeklindedir.  

Örnek: 

Maviindir Web Tasarım

_________________________________________________________________________________

<BR>  

Enter tuşu görevini görür. Bir alt satıra geçmek için kullanılır. Bu etiket kapatılmaz.

Örnek: 

Maviindir Web Tasarım , Mavi Tekno ve Mavi Yazılım Teknoloji ve İnternetle İle İlgili Her Şey Maviindir'de...

_________________________________________________________________________________

<P>  

Paragraf oluşturmak için kullanılan etikettir. Kullanıldığı yerde yazıyı kesip bir satır boşluk bırakarak, metne satır başından devam edilmesini sağlar.

_________________________________________________________________________________

<FONT>  

<FONT> etiketi, kullanıldığı yerdeki metinlerin renk, boyut, yazı tipi gibi özelliklerini değiştirmek için kullanılır. Size, color ve face parametreleri ile kullanılabilir.
 
Size: Yazının büyüklüğünü belirlemek için kullanılır(1-7 arası değerler alır.).

Örnek:

<FONT SIZE ="1">Maviindir Web Tasarım</FONT>
<FONT SIZE ="4"> Maviindir Web Tasarım</FONT>
<FONT SIZE ="7"> Maviindir Web Tasarım</FONT>

Yukarıdaki kodlar yazılıp kaydedildiğinde tarayıcıdaki görüntü aşağıdaki gibi olacaktır.

Size parametresine -1, +2 gibi değerler verilerek de metnin büyüklüğü verilen değer kadar arttırılıp eksiltilebilir (Burada font büyüklüğü 1 eksiltilip, 2 arttırılmıştır.).

Color : Yazı tipi etiketi içerisinde metnin rengini değiştirmek için kullanılır. Kullanmak istediğiniz rengi, ismi veya kodu ile belirterek metin üzerinde renk değişikliği yapabilirsiniz.

Örnek :

<FONT size="5" COLOR="aqua">Maviindir Web Tasarım</FONT>
<FONT size="5" COLOR="#FF0000">Maviindir Web Tasarım</FONT>

Yukarıdaki kodlar yazılıp kaydedildiğinde tarayıcıdaki görüntü aşağıdaki gibi olacaktır.

Face : Yazı tipi karakter biçiminde değişiklik yapmak için kullanılır.

Örneğin Face=" Times New Roman" parametresi kullanıldığında yazı tipi Times New Roman olacaktır.

<font face="Algerian" size="7" color="purple">Maviindir Web Tasarım</font>

Burada yazı tipi olarak “Algerian” yazı tipi kullanılmıştır. Yukarıdaki kodlar yazılıp kaydedildiğinde tarayıcıdaki görüntü aşağıdaki gibi olacaktır.

_________________________________________________________________________________

Görünüm Düzenleme Etiketleri 

<HR>

<HR> etiketi sayfaya yatay çizgi çizmek için kullanılan etikettir. Bu etiket diğer etiketlerden farklı olarak kapatılmaz. Size, width ve align parametreleri mevcuttur.
Size, çizilen çizginin kalınlığını belirlemek için kullanılır. Width, çizginin sayfadaki uzunluğunu belirlemek için kullanılır. Align, çizginin sayfada yer alacağı konumunu (sağa hizalı, sola hizalı, ortalanmış) belirlemek için kullanılır.  


Örnek :

<hr size=“6” width=”200” align=“center”>

Umarım İşinize Yaramıştır.Bir sonra ki dersimizde görüşmek üzere...

HTML Dersleri 2

Merhaba Arkadaşlar ,

Şimdi ki anlatımımız ise body komutudur.Body Komutu en çok ilgileneceğimiz kısımdır.Burada sayfanızın yazıları , resimleri , videoları ve daha bir çok sayfa ile ilgili bilgilerinizi yani Html belgesinin tüm içeriğinin yer aldığı bölümdür. Bu bölümde yer alan içeriğin tümü tarayıcıda görüntülenir. Body etiketi ile birlikte kullanılabilecek parametreler ve görevleri aşağıda gösterilmiştir.

Bgcolor : Hazırlamış olduğunuz web sayfasının arka plân rengini belirlemek için kullanılır.

Kullanımı; <body bgcolor=”blue”>…</body>

Mesela üstteki kullanım örneğimizde sayfamızın arkası tamamı mavi renk olucaktır.

Background : Bu parametre arka plânda kullanılmak istenilen resmi belirlemek için kullanılır.

Kullanımı; <body background=”resim.jpg”>….</body>

Üstte ki background kullanımımız da resim arka planımızda görüntülenecektir.

Link : Web sayfanızda kullanacağınız linklerin rengini belirlemek için kullanılır.
Alink : Web sayfanızdaki herhangi bir Linke tıklandığı zaman oluşacak rengin ne olacağını belirlemek için kullanılır.
Vlink : Web sayfanızdaki önceden ziyaret edilmiş linklerin renginin hangi renk olacağını belirlemek için kullanılır.

_________________________________________________________________________________

<TITLE> :

Sayfanın tarayıcıdaki başlığının ne olacağını belirlemek için kullanılır.
Title etiketleri <Head>….</Head> etiketleri arasında yer alır.

Kullanımı; <title> görüntülenmesini istediğiniz başlık </title>

Örnek :

Kodumuz aynı yanda ki gibi görünücektir.










_________________________________________________________________________________

 Listeleme Etiketleri :

 <OL>  : 

Sıralı liste oluşturmak için kullanılır. Kelime işlemci programındaki numaralandırma işlemi ile aynıdır. Listeleme işlemi harf, rakam veya roma rakamı şeklinde yapılabilir. Belirteceğiniz parametreler yardımı ile de istediğiniz harf, rakam veya roma rakamından başlayarak sıralı listenizi oluşturabilirsiniz. <ol> etiketi, <li> etiketi ile birlikte kullanılmalıdır.

Örnek 1:
Burada <ol> etiketini kullanarak listeleme işlemine başlıyoruz. <li> etiketini kullanarak da listeleyeceğimiz elemanların isimlerini yazıyoruz.

Type parametresi kullanarak listenin rakamla mı harfle mi başlayacağını belirleyebiliriz.  

_________________________________________________________________________________

“A” harfi yerine küçük “a” harfi yazılırsa sıralama a, b, c, …. şeklinde küçük harflerle olacaktır.

_________________________________________________________________________________

“I” harfi yerine küçük”i” harfi yazılırsa, sıralama i, ii, iii,…. şeklinde küçük roma rakamları ile yapılacaktır. 

Gördüğünüz gibi yan tarafta da önizlemesidir.

_________________________________________________________________________________

Sıralamanın  her zaman “1” den veya “A” dan başlamasını istemeyebiliriz. Bu tür durumlarda Start parametresi kullanılır. Start parametresinin her zaman sayı olması gerekmektedir. Örneğin sıralamayı “C” harfinden başlatmak istiyorsak start değerine “C” yazmak yerine “3” yazmak zorundayız.

_________________________________________________________________________________

<UL> :

<ul> etiketi madde işaretleri şeklinde listeleme yapmak için kullanılır. 

_________________________________________________________________________________

Type parametresi ile kullanacağınız madde işaretinin şeklini belirleyebilirsiniz. Type ile kullanılan parametreler disc (içi dolu daire), circle (içi boş daire) ve square (içi dolu kare)’dir.

_________________________________________________________________________________

 <LI>  

Liste oluşturmak için liste elemanlarını belirtmede kullanılan etikettir.  Sıralamanın hangi şekilde olacağını ise <ol> ve <ul> etiketleri belirler.

Umarım işinize yaramıştır , anlamışınızdır.Bir sonra ki dersimizde görüşmek üzere...

HTML Dersleri 1

Merhaba Arkadaşlar ,

Bir çok arkadaşlarımız bilgisayar bölümü olan web tasarım alanındadır onlara kolaylıkla öğretmek amaçlı bu dersleri hizmetinize sunduk.Tabi ki tek öğrenciler değil ya kendinize site açtıysanız.Sitenizi rahatlıkla ve iyi bir şekilde kod yazmanızı ve  web tasarımcılıkla ilgili bilgiler için sizlere de hazırladık.





Html dersimize nihayetinde başlıyoruz ilk olarak bize yardımcı olacak  Adobe Dreamweaver   30 günlük deneme süresi vardır ama bunu daha sonra alırsınız.HTML bir çeşit koddur web tasarımın genelinde hatta tamamında HTML kodları vardır.Bir çok çeşit komutlar vardır.Bunları sırasıyla öğreniceksiniz belki biraz zor gelebilir ama sanığınız gibi değil.Biz sizlere özel ve sade anlatımımızlan her adımı teker teker anlatacağız.Her neyse şimdi dersimize başlayalım ilk olarak başlangıç ve tanımlamalarını anlatalım.

HTML' de Gerekli Önlemler

Html komutları etiketlerden (tag) oluşur. Html komutları yazılırken aşağıdaki kurallara dikkat edilmesi gerekir;

• Html komutları “<” ve “>” işaretleri arasına yazılır. Burada yer alan“< >” etiketleme yapmak için kullanılan işarettir. <etiketadi>……</etiketadi>, <tag>…..</tag> 
• Html etiketleri yazılırken Türkçe karakterler kullanılmamalıdır.(ş, ç, ö, ü, ı, ğ)
• Html komutları büyük küçük harf duyarlı değildir. Başka bir deyişle tümü büyük harflerle açılmış olan bir etiket tümü küçük harflerle yazılan aynı etiket ile kapatılabilir.<body>….</BODY> veya <Html>….</html>
• Açılan bir etiket kapatılmalıdır. İlk açılan etiket en son kapatılır ve etiketi kapatma sırasında “/” işareti unutulmamalıdır.  

Örnek Kod :

<html>
<head>
</head>
<body>
</body>
</html>

HTML : Bu komutlarda kodların yazıldığını gösteren etikettir.Hiçbir parametresi yoktur.

HEAD : Bu komutlarda sitenizin bilgileri bulunur yani arama motorları tarafından ne aranırsa çıkar gibi yazar adları gibi yani hazırlayacağımız sayfa ile ilgili bilgilerin bulunduğu sayfa başlığı (title), link özellikleri, siteyi tarayıcıya ve arama motorlarına tanıtmak amacıyla kullanılan Meta etiketleri bölümdür.

Kullanılacak parametreler :

• name : Author, description ve keywords özellikleri tanımlanır. 
• http-equiv : Refresh, expires, content ve content-style-type özellikleri..
• Size : Yazının boyutu belirlernir.

NAME: Sayfanın yazarı, sayfanın yayın tarihi gibi bilgileri içerir.  

• <meta name="author" content="özgü">
• <meta name="description" content="sayfanın tanımını yazınız">
• <meta name ="description" content ="Bu sayfa web tasarımı dersi modülleri için hazırlanmıştır. ">
• <meta name="keywords" content="siteniz arama motorlarında hangi anahtar kelimelerle tanımlansın istiyorsanız buraya yazınız.">  Şekillerinde yazılır. 

HTTP-EQUIV: İçinde yer aldığı sayfanın, web server tarafından ziyaretçiye gönderilmesinde oluşturulacak karşılık başlığı bölümünde yer alacak bilgiler içerir.

Sıklıkla kullanılan meta etiketleri ve açıklamaları :   

• <meta http-equiv=Content-Type content="text/htm; charset=windows1254">
• <meta http-equiv=Content-Type content="text/htm; charset=iso-8859-9">
• <meta http-equiv=Content-Type content="text/htm; charset=utf-8">  

Bu etiketler Türkçe karakter sorununu ortadan kaldırmak ve Türkçe karakter desteği sağlamak için kullanılır.
________________________________________________________________________________

• <meta http-equiv="expires" content ="Tarih">  

Güncelleme için kullanılır. İnternette açılan bir sayfa bilgisayara kaydedilir. Bu sayfa tekrar açılamak istendiğinde, bilgisayardaki kayıtlı sayfa açılır. Bu etiket ile belirtilen tarihten sonra bu sayfa açılmak istenirse sayfanın tekrardan serverdan yüklenmesi sağlanır.  

 

• <meta http-equiv="expires" content ="Wed, 29 Dec 2011 15:21:59 GMT">  
• <meta http-equiv="refresh" content="5; url=anasayfa.htm">  

Sayfanın belirtilen süre sonra yenilenmesini sağlar.Eğer URL boş bırakılırsa aynı sayfa tekrarlanır.  

________________________________________________________________________________ 

• <meta name="robots" content="all veya none">  

Hazırladığımız sayfanın arama motorlarının robotları tarafından taranmasına izin vermek veya engellemek için kullanılır. İzin için all, engelleme için none kullanılır.   

Meta etiketi ile tanımlanan bilgiler kullanıcı tarafından görüntülenmez. 

Head Etiketleri Bitti Bu İşlem Bu Kadar..Umarım anlamışsınızdır.Bir sonra ki dersimizde görüşmek üzere... 

HTML ve HTML5

HTML zengin bir metin dilidir. İngilizce açılımı ( Hyper Text Markup Language )’ dir. İnternet üzerinde veri paylaşımı için kullanılan en yaygın metin tabanlı dildir. Ve son sürümü de HTML5’ tir. Gelin bir de HTML ve HTML5 arasıdaki farklılıklara bakalım.



HTML, bir programlama dili değildir öncelikle. Programlama dili olarak da tanımlanamaz. Çünkü HTML kodlarıyla baştan aşağıya bir program yazılamaz. Ancak HTML dilini yorumlayabilen programlar aracılığıyla çalışabilen programlar yazılabilir. HTML, web tarayıcısı yazılımları tarafından düzgün şekilde görüntülenmesi için gereken kurallarda yazı, görüntü, video gibi değişik verileri ve bunları birbirine basit yoldan bağlar. HTML, Dünya Çapında Ağ Birliği ( W3C ) tarafından standartlaştırılmıştır. Son sürümü olan HTML5 Internet Explorer, Mozilla Firefox ve Opera tarayıcılarının güncel sürümmerli tarafından kısmen de olsa desteklenmektedirler. Ama Google Chrome da ve Safari tarayıcıların da çok daha iyi bir şekilde çalışmaktadır.



Günümüzdeki HTML 4.1 sürümü, css desteğiyle düzenli ve sağlam bir yapıda kodlanırsa kodlansın yine de fazladan yazılan kodların işlevselliğ bozduğu da bilinmekteydi. Html5 de bu ihtiyaçları karşılamak için geliştirilmeye başlanmıştır. Şu an deneme aşamasındaki HTML5’ i youtube sunuma çıkartmıştır. Ses ve film etiketleri vs. daha bir çok yönleriyle birlikte kullanılması geren HTML5, sadece bir biçim dili olması dışında web uygulamaları oluşturmamızı da sağlayacaktır. Üstelik CSS3 ve Javascript ile birleştirmek daha da güçlü, sağlam ve uyumlu uygulamalar yapmamıza imkan sağlayacaktır. Bu sayede de yüksek ihtimalle uygun şekilde kullanılabilecektir. HTML’ in son sürümü olan HTML5 ‘ deki yeni elementlerin bir kaçı şunlardır;



< canvas > sayfada bir tuval alanı oluşturmamızı sağlar ve tuvale javascript ile çizim yapılabilir. < audio > sayfa da ses oynatıcı bir modül ekler. < video > video oynatıcı bir modül ekler. < progress > işlem süreci göstergesi ekler. < caption > başlık olarak düşünülen metinleri düzenler. < header > sitenin başlık ve açıklama içeriğini alır. < nav > menüleri ve bir takım zaruri işlevleriiçine alır. < footer > sitelerin en alt kısmını içine alır. < section > sitelerin ana içerikte ayrı yazılan kısımdır.

ana içerikte ayrı yazılan kısımdır. < article > makale, deneme tarzı yazıları kapsar. < embed > dışarıdan eklenen componentler için kullanılır. < details > detay bilgisi içerir. < summary > yazının başlığını belirler. < time > tarih ve saat verilerini kapsar. < mark > yazı içerisinde özellikle üstünde durulan kelimeleri belirler. < figcaption > figure elementinin başlığını belirler. < figure > çeşitli medya içeriği gruplarını belirler. < hgroup > başlık grubunu belirtir. H1, H3 gibi başlık elementleri burada tanımlanır. < datalist > düzenlenebilir elementlere otomatik tamamlama özelliği verilmesini sağlar.



HTML5’ te de desteklenmeyen HTML elementleri de şunlarıdır: < acronym >, < applet >, < basefont >, < big >, < center >, < dir >, < font >, < frame >, < frameset >, < noframes >, < s >, < strike >, < tt >, < u >, < xmp >

HTML Nedir

Merhaba Arkadaşlar,


Bu Makalemde Sizlere HTML Dili Hakkında Genel Bilgi Vereceğim,


Daha Sonra PHP,XHTML,ASP V.b Diller Hakkında da Bilgi Vereceğim Ama Öncelikle


HTML Yani Bana Göre En Basit Programlama Dilinden Başlayacağız HTML Taglarından Bahsetmeyi Düşünüyorum Bu Dersimizde ,


Sizin Daha Fazla Vaktinizi Almadan ve daha fazla kendimi yormadan size HTML'den Bahsetmeye Başlıyorum.






HTML Hyper Text Markue Language ' nin Kısaltmasıdır . Türkçesi Sanırım Şu Anlama Gelmektedir ,


Haraketli İşaret Yazı Dili Gibi Bir şey şu anda aklıma gelmediği için bunu söyledim ama buna benzer birşeydir ,


HTML Versiyonları Vardır Örneğin xhtml , html5, htm v.b bunlar HTML Dilinin Dalları Yani Versiyonları Örneğin V 1.0 , v 1.1 Ve buna benzer bir şey fakat bunun yerine html , xhtml gibi değişmektedir HTML Kod Yazmak İstiyorsanız Önce Bu Bilgileri Okumalısınız HTML Dilini Yazanı ,


Nasıl Profesyonelleşirim v.b Soruların Cevabını Google'den Bulabilirsiniz ,


Ama İsterseniz Bunlarla İlgili Bir Makale'de Yazarım ,


HTML Diline Hangi Kodlarla Başlanır Nasıl Yazılır ?


HTML <kod>içerik</kod>


örneğin HTML Diline Başlarken


<html>


Kodlar


</html>


Şeklinde Başlar Bir Sayfanın Temel Kodlarını Yazacağım ve Diğer Makale'de Bunları Kullanmayı Öğreteceğim ,


<html>


<head>


<title>


Sayfa Başlığı


</title>


</head>


<body>


Sayfa İçerisindeki İçerik


</body>


</html>


Şeklinde Olacaktır .


Merak Ettiğiniz Ve ya Sormak İstediğiniz Sorular Olursa Bana


trqbyztl@gmail.com adresinden bana mail atarsanız ,


size her türlü yardımda bulunabilirim ,


makalemi okuduğunuz için teşekkürler !