WEB TASARIMININ TEMELLERİ 2 ÖĞR. GÖR WEB TASARIMININ TEMELLERİ 2 ÖĞR. GÖR. FERDİ DOĞAN BİLGİSAYAR TEKNOLOJİLERİ

Hyper Text Marqup Language HTML Hyper Text Marqup Language

Zengin Metin İşaret Dili (İngilizce Hyper Text Markup Language, ks Zengin Metin İşaret Dili (İngilizce Hyper Text Markup Language, ks. HTML) günümüzde İnternet üzerinde veri paylaşımı için kullanılan en yaygın metin tabanlı dildir. Dilin son sürümü HTML5'tir. HTML, bir programlama dili olarak tanımlanamaz. Zira HTML kodlarıyla kendi başına çalışan bir program yazılamaz. Ancak bu dili yorumlayabilen programlar aracılığıyla çalışabilen programlar yazılabilir. Programlama dili denilememesinin nedeni tam olarak budur. Temel gereği yazı, görüntü, video gibi değişik verileri ve bunları içeren sayfaları birbirine basitçe bağlamak, buna ek olarak söz konusu sayfaların web tarayıcısı yazılımları tarafından düzgün olarak görüntülenmesi için gerekli kuralları belirlemektir. HTML, W3C tarafından standartlaştırılmaktadır. Html, "etiket" ismi verilen çeşitli başlıklardan oluşur. Aşağıdaki örnek bu etiketler kullanılarak yazılmıştır. Web kavramı, CERN'de bir bilgisayar programcısı olan Tim Berners-Lee'nin HTML adlı bilgisayar metin dilini bulup geliştirmesiyle başlamıştır.

1989 yılında HTML ( Hyper Text Markup Language) işaretleme dili geliştirilmiştir. Tim Berners-Lee aynı zamanda WWW, HTTP ve URL’ yide geliştiren mucittir. Tüm keşifleri 1989-1991 yılları arasında olmuştur. HTML internet üzerinden web sayfaları oluşturmak için kullanılan bir dildir. HTTP protokolu ile HTML olarak hazırlanmış sayfalar çağırılır. HTML dosyaları sunucu bilgisayar içerisinde .html yada .htm olarak tutulur. HTML ile oluşturulmuş sayfalarda yazılan kodlar “c “ yada “pascal” gibi herhangi bir derleyiciye gerek kalmadan direk çalıştırılır. HTML ilk olarak 1.0 versiyonu ile çıkmıştır. Bu süreç HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0, HTML 4.01 versiyonları çıkmıştır. Her bir versiyon ile yeni özellikler eklenmiş ve kullanım ve uygulama alanları gelişmiştir

HTML’nin Tanımı HTML tarayıcı (browser) ‘lardan görülebilecek web sayfaları düzenlemeye yarayan bir işaretleme dilidir. HTML : Hyper Text Markup Language † ( Hareketli-Metin İşaretleme Dili ) … HTML basitçe, browserlarla görebileceğimiz, internet dokümanları oluşturmaya yarayan bir çeşit dildir. … Dosya uzantısı .htm veya .html olmalıdır. … HTML, programlama dilleri (pascal, basic,..) gibi bir programlama mantığı taşımadığından öğrenilmesi gayet kolay bir dildir. … Dilden ziyade kabaca metinleri ya da verileri biçimlendirmek, düzenlemek için kullandığımız komutlar dizisi diyebiliriz.

HTML’ DE her şey metin tabanlı ve bir HTML dokümanı oluşturmak için ihtiyacınız olan şey bir editördür. Hatta sizde herhangi bir HTML editörü bulunmuyorsa bu işi Windows'un Notepad'i ile dahi halledebilirsiniz. … Piyasada iki tip editör bulunuyor. Birisi metin tabanlı, kod yazmayı gerektiren fakat bunun yanı sıra rutin bazı işlemleri kolaylaştıran editörler (HomeSite, HotDog ...) … Diğeri WYSIWYG (What You See Is What You Get / Ne görürsen onu alırsın) tarzı denen kısaca görsel, kodlamayla uğraştırmayı gerektirmeyen editörler. (FrontPage, Dreamweaver, NetObjects Fusion ...).

WEB Tasarımı Sayfa Hazırlarken Dikkat Edilecek Noktalar Sayfa adında ya da sayfada yer alan herhangi bir resim ya da animasyonlar kaydedilirken asla Türkçe ve özel karakterler (ğ,ü,ş,İ ,?,\ vs.) kullanılmaz. Sabit diskinizde öncelikle WEB sayfanıza ait dokümanları kaydedeceğiniz bir dizin ve bu dizin içerisinde resimleri ya da animasyonlarınızı kaydedeceğiniz bir alt dizin oluşturunuz. Sunucu bilgisayarına bu bilgiler atılırken (upload) aynı dizinleri bu alanda oluşturmak gerektiği asla unutulmamalıdır. WEB sitenizi yaptığınızda, mutlaka ana sayfanızı index.html veya default.html olarak adlandırılması gerekmektedir. Birçok WEB sunucu için varsayılan sayfa index.html'dir. Bazı sunucular da varsayılan sayfanın default.html olarak adlandırılmasını ister.

Görsel Tasarım Günümüzde içeriği tayin ederken sayfamızın amacı uzun uzun bilgi vermekse, “Nasıl olsa kimse okumuyor!” diye bu bilgileri kırpmak, gerçekten o bilgiye ihtiyacı olan kişilere haksızlık olur. Sayfamızın bir hareket noktası, bir geçiş noktası olduğunu tahmin ediyorsak, kimseyi fazla oyalamaya, istemediklerini bildiğimiz bilgileri zorla vermeye de hakkımız yoktur. Yale Tıp Fakültesi’nin, ekrana bakan kişinin göz hareketlerini belirleyen cihazlarla donattığı bilgisayarların başına oturttuğu 12 bin kişiyle yaptığı araştırma bir bilgisayar ekranının görsel taranma çizgisinin, (1) soldan üst köşeden sağ üst köşeye, (2) sağ üst köşeden sağ alt köşeye doğru genel tarama (3) yeniden sol üstten itibaren okuma ve (4) üst orta noktadan aşağı doğru okumayı sürdürme tarzında olduğunu gösteriyor. Buna göre, izleyici WEB sayfasında önce büyük şekil kitlesini ve renkleri görmekte, ön plandaki unsurlarla arka plandaki unsurlar arasındaki kontrastın farkına varmaktadır. İzleyici ancak daha sonra, varsa grafik unsurların verdiği bilgiyi almakta, üçüncü olarak da okumaya başlamaktadır. Okuma tahmin edilebileceği gibi, en büyük kitleden benzetme yoluyla başlamakta ve daha sonra kelimelere inmektedir.

Bu belirleme, bize, WEB sayfasının bütünü itibariyle mükemmel bir grafik dengesine sahip olması gerektiğini gösteriyor. Salt metinden ibaret gri bir sayfa itici ve sıkıcı iken, büyük ve geniş grafikler, büyük ve kara lekeler halindeki harfler özellikle içerik arayan daha rafine izleyiciye “içi boş” izlenimini verecektir. Grafik sanatçı, bu noktada sayfanın beklenen “müşterisi”nin varsayılan ilgi odağını, grafikle metni dengeleyerek bulmak zorundadır. Bu dengede oran ve uygunluk, sadece sayfanın hedef kitlesi ya da başka bir deyişle sayfanın içeriği dikkate alınarak bulunabilir. Yazıyı soldan sağa doğru okumaya alışmış toplumlarda, görsel dikkatin ekranda da soldan sağa doğru gitmesi doğaldır. Bu nedenle WEB sayfalarında da ekranın üst yarısı, görsel odak noktası olmalıdır. Bu alanın mümkün olduğu kadar yumuşak, pastel renklerle doldurulması; sert, aşırı yoğun çarpıcı renklerden kaçınılması gerekir. Bu tür renkler ancak çok fazla dikkat çekmek istediğimiz, bir ya da iki unsur için saklanmalıdır. Yazılar mutlaka arkalarındaki zeminle çarpıcı bir kontrast oluşturmalıdır. Dramatik ve karmaşık grafikler, mutlaka grafik sanatçıları tarafından yapılmalıdır.

Metinleri daha belirgin hale getirecek noktalar, kutular, yatay ve dikey çizgiler, çoğu zaman görsel bütünlük sağlamak yerine sayfanın tümüne yama hissi verir. Bütün görsel tasarımlarda olduğu gibi, WEB sayfası tasarımında da tutarlılık şarttır. Grafik unsurlarla “stil” oluşturmaya kalkmak, grafikçilerin işidir. Bir WEB alanının başından sonuna tutarlı bir şekilde izlenen grafik uygulama, sonunda izleyicide WEB alanının sahibi kurum hakkında bir yorum uyandırır. Bu nedenle sırf süsleme amacıyla, sayfaların orasına burasına çizgi ya da fotoğraf unsurları konulmamalıdır. Özellikle çizgi grafiklerin üç boyutlu görünmesini sağlamak gerektiği inancı, günümüzde hemen hemen bütün WEB tasarımına egemen olmuş ve hemen hemen her grafik unsurun bir tarafına gölgeler yerleştirilmiş bulunuyor. Gölge, bir görsel öge olarak kullanılacaksa, sayfanın tümünün bir bütün olduğu unutulmamalıdır. Bir unsurun gölgesi sağa aşağı, diğerininki sola yukarı düşemez.

Ana sayfa izleyicinin bizim WEB alanımıza daldığı noktadır Ana sayfa izleyicinin bizim WEB alanımıza daldığı noktadır. Bu nedenle sayfada bir davet unsuru olması şarttır. Bu sayfanın az ve öz unsur içermesi de giderek yaygın bir tarz olmaya başladı. Bir gazete veya derginin WEB alanı, yayınladığı organın kapak sayfasına benzeyebilir. Ama bir üretim firması, ana sayfasında hiç değilse belli başlı mal gruplarının bağlantıları olmalıdır. Çoğu internet’e modemle bağlanan izleyiciler için, küçük grafiklerin geniş alanlar işgal etmesini sağlayan, başlıklardan ve beyaz alanlardan yararlanan, buna karşılık görsel etkisi son derece yüksek sayfalar yapılması mümkündür.

HTML’de Etiket (Tag) Kullanımı TAG (Etiket) :  HTML dosyalarında normal metin ile Web tarayıcısına yollanacak olan özel komutları birbirinden ayırmak için kullanılan işaretler ve komut dizileridir. Normal metinden bu takıları ayırmak için “büyüktür” ve “küçüktür” işaretleri kullanılır. “<“ (küçüktür), “>”(büyüktür) şeklinde görünen komutlara etiket (tag) adı verilir. Kullanılan çoğu etikette başlangıç ve bitiş  etiketleri vardır. Örneğin bir yazıyı koyu yazmak için kullanılan komut <b>’dir ve sonunda </b> etiketinin kullanılması gerekir. Kullanılan çoğu etiketin kapatma etiketi bulunduğu gibi sadece başlangıç etiketi olan kodlarda vardır.  Örneğin <br> etiketinin </br> şeklinde bir sonlandırma etiketi yoktur.

HTML’nin Temel Yapısı HTML de kullanılan etiketler belirli bir düzene göre yazılır. Her HTML dokümanı <HTML> ile başlar ve </HTML> ile biter. Bir HTML dokümanı iki ana kısımdan oluşmaktadır:<head> . . . </head> etiketi arasında yer alan Başlık bölümü; <body>. . . </body> etiketleri arasında yer alan Gövde Bölümü. Başlık bölümü içine <title>. . . </title> etiketi konur. Eğer hazırlanan sayfa Türkçe içerikli ise Türkçe karakterlerin (ç, ğ, ı, , ş, ö, ü) düzgün görünmesi için Başlık kısmı içerisine aşağıdaki meta etiketi eklenir. 
 <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-9">

Title etiketi ile başlığı belirttikten sonra Başlık bölümü kapatılır ve ana kısım olan Gövde'ye geçilir. Sayfamızda görüntülemek istediğimiz bütün bilgileri Gövde kısmına koyarız.

Masaüstünde boş bir alanda sağ tuşa basın Bir not defteri açın ve html kodlarımızı yazmaya başlayalım.

Yazdığımız kodları web dosyası olarak kaydetemek için DOSYA menüsünden FARKLI KAYDET tıklıyoruz. Kayıt penceresinde dosya adını türkçe karakter kullanmadan, boşluk kullanmadan yazıyor ve sonuna .html diye yazıp masaüstüne kaydediyoruz. Örnek: deneme.html

Basit bir Web Sayfasında Hangi Etiketler Bulunur? <html> <head> </head> <body> </body> </html> Her web sayfası bu satırla başlar ve </html> ile biter. Web sayfasının başlığı,arama motorlarında bulunması gibi etiketlerin yazıldığı yerdir. Web sayfasında görüntülenmesini istediklerinizi <body> tagının içine yazmalısınız.

Bir etiket içerisinde varsayılan olarak gelen değeri değiştirmek için bazı parametreler kullanılır. Aşağıdaki örnekte tablo etiketinin içindeki border ifadesi parametredir ve tabloya kenarlık verilir. Parametreler her zaman başlangıç etiketi içerisinde ve “” içerisinde yer almaktadır. 
 <table  border=“1">

Etiketler iç içe geçebilirler ama dikkat edilmesi gereken nokta ilk açılan etiketin en sonda kapatılmasıdır. Aşağıda yanlış ve doğru uyguluma örneği verilmiştir. 
 <b><u>Bu örnek yanlıştır  </b></u> <b><u>Bu örnek doğrudur </u></b> Kullanım biçimi: <tag_1> <tag_2> ...... </tag_2> </tag_1>

Title etiketi ile başlığı belirttikten sonra Başlık bölümü kapatılır ve ana kısım olan Gövde'ye geçilir. Sayfamızda görüntülemek istediğimiz bütün bilgileri Gövde kısmına koyarız. 

Bir etiket içerisinde varsayılan olarak gelen değeri değiştirmek için bazı parametreler kullanılır. Aşağıdaki örnekte tablo etiketinin içindeki border ifadesi parametredir ve tabloya kenarlık verilir. Parametreler her zaman başlangıç etiketi içerisinde ve “” içerisinde yer almaktadır. 
 <table  border=“1"> Kullanım biçimi: <tag_adi parametre_adi ="deger"> Örnek: <body bgcolor="blue">

<html> <head> <title> Sayfanın Başlığı </title> </head> <body> Sayfanızın tüm içeriği: resim, yazı, video, vb. </body> </html> HTML, HEAD, TITLE Etiketi Bu etiketler bir HTML dokümanında olmazsa olmaz diye tabir edilebilecek etiketlerdir. HEAD etiketi içerisine yazılan diğer etiketler arasında en bilineni TITLE etiketidir. TITLE etiketi dışında bazı etiketlerde HEAD etiketi altında kullanılmaktadır.

Boşluk Bırakma: HTML tarayıcıları, HTML belgenizdeki imler arasında bulunan boşlukları yok sayar. HTML kodunuzun daha açık seçik görünmesi için bu özelliği lehinizde kullanıp fazladan boşluklar ve satırbaşları ekleyebilirsiniz. Belge biçimlendirirken bıraktığınız satırbaşları ve boşlukları sayamazsınız. Satırbaşları ve paragraflar için <P> , <BR> gibi imleri kullanmalısınız. Ancak paragraflar arasında boşluk bırakmak için birden fazla <P> imi kullanırsanız bu fazla imler yok sayılırlar. Paragraflar arasında boşluk bırakmak için başka yöntemler vardır. Block Level imleri otomatik satırbaşları içerirler. Örneğin H1, BR, UL ya da TABLE imleri kullanıldığında peşlerinden otomatik olarak birer satırbaşı gelir ve yeni bir paragraf imi kullanmanız gerekmez. Boşluk bırakmak için   kullanılır. Her bir   1 boşluk anlamına gelir.         4 tane boşluk anlamına gelir.

<html> <head> <title> Sayfanın Başlığı </title> </head> <body> ADIYAMAN ÜNİVERSİTESİ KAHTA MESLEK YÜKSEKOKULU </body> </html>

Burada 6 karakter boşluk bırakır. <html> <head> <title> Sayfanın Başlığı </title> </head> <body> ADIYAMAN ÜNİVERSİTESİ        KAHTA MESLEK YÜKSEKOKULU </body> </html> Burada 6 karakter boşluk bırakır.

META tagı ve Sayfayı tanımlama

<HEAD> HTML belgesinin ilk bölümüdür. WEB sayfası ile ilgili temel özellikler, sayfa başlığı, yazı karakterler kümesi, link özellikleri burada tanımlanır. Head etiketinin yorum aralığında <meta> etiketi yer alır. Bu etiket siteyi tarayıcıya ve arama motorlarına tanıtır. Meta etiketinde kullanılan HTML belgesinin ilk bölümüdür. Kullanılacak parametreler Görevi name Author, description ve keywords özellikleri tanımlanır. http-equiv Refresh, expires, content ve content-style-type özellikleri tanımlanır. Size Yazının boyu belirlenir.

<META NAME="author" CONTENT=«FERDİ DOĞAN"> WEB sayfası ile ilgili temel özellikler, sayfa başlığı, yazı karakterler kümesi, link özellikleri burada tanımlanır. Head etiketinin yorum aralığında <meta> etiketi yer alır. Bu etiket siteyi tarayıcıya ve arama motorlarına tanıtır. Meta etiketinde kullanılan parametreler şöyledir <META NAME="author" CONTENT=«FERDİ DOĞAN"> Kodu sayfanın tasarımcı kimliğini gösterir. <META NAME="Description" CONTENT="Sayfanızın kısa tanıtımını buraya yapın."> Kodu sayfanın kısa tanımı yapılmak için kullanılır. <META NAME="keywords" CONTENT="Sitenizi arama motorlarında bulduracak siteniz ile ilgili kelimeleri buraya yazın."> Kodu sayfanın hangi kelimeleri içerdiğini gösterir.Burası arama motorları için çok önemlidir.

<META http-equiv="refresh" CONTENT="5"; URL="http://www. adiyaman Refresh ile sayfamız açıldıktan 5 saniye sonra belirtilen adresi otomatik olarak açacaktır. <META http-equiv="expires" CONTENT="Wed, 25 Feb 2007 12:00:00 GMT"> Expires GMT saat sistemine göre belirtilen saat ve tarihte sayfanın dosyası silinecektir.

<html> <head> <META NAME="author" CONTENT=«FERDİ DOĞAN"> <META NAME="Description" CONTENT="Sayfanızın kısa tanıtımını buraya yapın."> <META NAME="keywords" CONTENT="Sitenizi arama motorlarında bulduracak siteniz ile ilgili kelimeleri buraya yazın."> </head> <body> ADIYAMAN ÜNİVERSİTESİ KAHTA MESLEK YÜKSEKOKULU </body> </html>

<META http-equiv="Content-Language" CONTENT="tr"> <META http-equiv="Content-Type" CONTENT="text/html" charset="windows-1254"> Kodu sayfanızda ne tür bir metnin olduğunu (text/html yazmakla metnin düz yazı ve html belgesi olduğunu) ve karakterlerinin hangi kodlama (windows-1254 yazmakla) ile yapıldığını gösterir. <META http-equiv="Content-Language" CONTENT="tr"> Kodu sayfanızın dilinin Türkçe (istenirse değiştirilebilir.) olduğunu gösterir. <META http-equiv=”content-style-type” CONTENT=”text/css”> Content-type­style belgemizde kullanılan CSS dosyamızın bir metin dosyası olduğunu belirtir.

<META NAME="copyright" CONTENT="© 2015 FERDİ DOĞAN"> Kodu sayfanın telif hakkının kime ait olduğunu gösterir. <META NAME="GENERATOR" CONTENT=«not defteri"> Kodu sayfanın hangi editörle yapıldığını gösterir. <META NAME="ROBOTS" CONTENT="ALL, FOLLOW, INDEX"> Kodu sayfanızı tüm arama motorlarının veritabanına kaydolabilme hakkının verilmiş olduğunu gösterir. <META NAME="RATING" CONTENT="GENERAL"> Kodu sitenizin hangi kategoride, sınıfta olduğunu gösterir. GENERAL yazmakla bütün kategoride olduğu belirtilmiş olur.

SAYFAYA BAŞLIK EKLEME

<TITLE> <HTML> <HEAD> Head bölümü içine yazılan title bölümüne sayfanın başlığı yazılır, tarayıcının sol üst bölümünde bulunan başlık çubuğunda görüntülenir. <HTML> <HEAD> <TITLE> Kahta MYO </TITLE> </HEAD> <BODY> bu bizim ilk sitemiz </BODY> </HTML> Not: Kahta MYO yazısını yerine farklı şeyler yazarak yeniden deneyiniz.

METİN BİÇİMLENDİRME

Başlık imleri <h1>...<h6> <HTML> <HEAD> <title>Kahta MYO Bilgisayar</title> </head> <body> <h1>Başlık 1</h1> <h2>Başlık 2</h2> <h3>Başlık 3</h3> <h4>Başlık 4</h4> <h5>Başlık 5</h5> <h6>Başlık 6</h6> </body> </html> Not: H1,h2,h3,h4,h5,h6 tagları içerisindeki yazıları değiştirin kendi adınızı, ve arkadaşlarınızın adını yazarak tekrar deneyin.

<p> imi, </p> ile sonlandırılmak zorunda değildir. Body tagları arasına yazılan ve metin biçimlendirme olarak nitelendirilen tagları gösterelim. <center>....</center> Aradaki metinleri sayfaya göre ortalar. <b>....</b> Aradaki metni koyu (bold) yazar <i>....</i> Aradaki metni eğik (italic) yazar. <u>....</u> Aradaki metni altı çizili (underline) olarak yazar. <h1>....<h6> Başlık (heading) imi. h1 en büyük, h6 en küçük. <p>....</p> Aradaki metin paragraf özelliği kazanır. Sonlandırıldığında, takip eden metin bir satır boşluk bırakılarak ve satır başına yazılır. <p> imi, </p> ile sonlandırılmak zorunda değildir.

Kalın, İtalik, Alt Çizgili Yazı içerisinde belirlenmiş bir kelime yada ifadenin kalın, italik ya da alt çizgili yazılması istendiğinde kullanılan etiketlerdir. Kalın (Bold) yazı <b>bold yazı yani kalın yazı olacak</b> <em> Vurgulanmış yazı</em> <strong> Kalın yazı</strong> Eğik (İtalik) yazı <i>eğik yazı olacak bu yazı</i> Altı çizgili (underline) yazı <u>yazının altı çizili olacak</u> Üstü çizili <strike>üstü cizili yazi</strike>

Kalın, italik, altı çizili, üstü çizili taglarını kullanarak ad soyad, öğrenci no, okuduğunuz bölüm ve sınıfınızı html sayfasında yazdıracak tagları yazınız.

Paragraf Etiketi Paragraf etiketi Web sayfasındaki paragrafları tanımlamak için kullanılır. HTML dili otomatik olarak paragraf etiketlerinin öncesinde ve sonrasında bir satır atlar. Paragraf etiketinin varsayılan olan metni “sola” dayalı olarak yazar. Eğer istenirse align parametre özellikleri değiştirilerek metnin “ortalı” yada “sağa” dayalı olarak yazılabilir. Paragraf etiketi için <p> etiketi sonlandırmalı olarak kullanılır. Sola dayalı olması için: <p>Yazınızı buraya yazacaksınız</p> Ortada olması için: <p align=center>Yazınızı buraya yazacaksınız</p> Sağa dayalı olması için: <p align=right>Yazınızı buraya yazacaksınız</p> Birde <br>tagı vardır ki o da bir alt satıra inilmesini sağlar. <br> yazılan yerde bir alt satıra geçilir

<html> <head> <title>University of Adiyaman</title> </head> <body> <h1><center>Sayfama Hoşgeldiniz </center></h1> <p>HTML imleri ile,</p> Yazıları <b>koyu</b> <i>italik </i> ve <u>altı çizili</u> olarak yazabiliyorum </body> </html> Not: Bu dersle ilgili düşüncelerinizi farklı yazı biçimleri kullanarak yazınız. Bazı metinleri kalın bazı metinleri italik, bazılarını italik ve kalın vb şekillerde yapınız.

<html> <head> <title>br tagı</title> </head> <body> kadir oğuz Muzaffer <br>ferdi<br> doğan<br> bilgisayar<br> bölümü</body> </html> Not: Üniversiteniz adı, Yüksekokulunuz adı, Bölüm adı, kendi adınız soyadınızı alt alta gelecek şekilde yazarak bir uygulama yapınız.

Font Etiketi Font etiketi ile varsayılan olarak belirlenmiş metin rengi, boyutu yada yazı tipi özelliği değiştirilebilir. Bunun için kullanılan etiket <font>..</font> tur.  Font etiketi başlangıç seviyesinde ki kullanıcılar için kullanılırken ileri seviyelerde bu işlem stiller(CSS) ile yapılmaktadır. <font> ............... </font> <font size="3" face="Arial" color="red">ADIYAMAN ÜNİVERSİTESİ</font> Font iminin kullanımı; <font face=.... size=.... color=....> </font> face= yazı tipinin adı (arial, tahoma, verdana, ...) size= yazının büyüklüğü (1-7 arası) color= yazının rengi (red, green gibi renklerin ingilizce karşılığı ya da RGB renk değeri yani “#121212” gibi) Bunlara font iminin öznitelikleri deniyor.

<html> <head> <title>Kahta Bölümler</title> </head> <body> <font face="tahoma" size="3" color="#f00000">Bilgisayar Teknolojileri</font> <br> <font face="verdana" size="4" color="#00ff00">Bankacılık ve Sigortacılık</font> <font face="arial" size="5" color="#00ffff">Bitkisel Hayvansal Üretim</font> <font face="comic sans ms" size="5" color="#ff0000">Muhasebe</font> </body> </html>

Not: farklı tiplerde boyutlarda ve renklerde metin biçimlendirmesi yapılabilir. Örnek olarak farklı bir yapı deneyin.

Etikette kullandığımız color=#xxxxxx ifadesi ise RGB (red-green-blue,kırmızı-yeşil-mavi) renklerinin karışım oranlarını belirtir. Bu renklerden herbirinin alacağı değer 00 ile FF aralığında olabilir (FF maksimum, 00 minimum karışımı verir). #000000 siyah … #FF0000 kırmızı … #00FF00 yeşil … #0000FF mavi … #FFFFFF beyaz. Renk kodlarını yazarken daima # işaretini kullanmayı unutmayın !

<BASEFONT SIZE=5> Varsayılan yazı boyutunu seçmek BASEFONT imiyle gövde metninin tamamı için varsayılan boyutu seçebilirsiniz. Daha sonra metnin belli kısımlarında bu boyutu değiştirmek için FONT imini ya da BIG ve SMALL imlerini kullanabilirsiniz. Her HTML belgesinde bir tane BASEFONT imi kullanılır. BASEFONT imine atanacak değerler 1-7 arasındaki değerlerdir. 3 değeri, tarayıcının varsayılan değeridir (12 punto). 1 ile 7 arasındaki değerler sırasıyla 8,10,12,14,18,24,36 punto değerlerine karşılık gelir (tabi tarayıcı normal ayarı 12 ise). Tarayıcı ayarına göre bu büyüklük değerleri ötelenebilir. Kullanımı: <BASEFONT SIZE=5>

<BIG><BIG>büyütülecek metin</BIG></BIG> BIG ve SMALL imleri ardarda kullanıldıklarında gittikçe artan etkiye sahiptirler: <BIG><BIG>büyütülecek metin</BIG></BIG> <small><small>küçültülecek metin</small></small> eğer <small> yada <big> tagları kapatılmazsa sonraki metinlerde aynı büyüklükte devam eder.

Varsayılan rengi seçmek <BODY TEXT= “#5A83FE”> Metin için varsayılan rengi, BODY imine TEXT özniteliğini ekleyerek seçebilirsiniz <BODY TEXT= “#5A83FE”> bundan sonra metnin belli kısımlarının rengini FONT iminde COLOR özniteliğini kullanarak değiştirebilirsiniz. <FONT COLOR= “red”> rengi değişecek metin </FONT>

<body bgcolor=#aaff55> <body bgcolor=#0044cc> Bu renklerle yalnızca metinleri değil sayfamızın artalananını da renklendirebiliriz. … Bunun için <body bgcolor=#xxxxxx> etiketini kullanıyoruz. Daha doğrusu sayfamızın gövdesini belirtmek için yazdığımız <body> etiketini, <body bgcolor=#xxxxxx> şeklinde değiştiriyoruz. <body bgcolor=#aaff55> <body bgcolor=#0044cc> <body bgcolor=#f406a2> Renklerini deneyelim

[x<SUB>a</SUB>+Y]<SUP>m</SUP> Üstindis oluşturmak için <SUP>, Altindis oluşturmak için <SUB> imleri kullanılır. Bu imlerin kapama imleri de vardır. Tarayıcılar alt ve üstindislerin boyutlarını otomatik olarak biraz düşürürler. Yine de siz biraz daha düşürmek isterseniz bu imlerin içinde FONT imiyle küçültme yapabilirsiniz. Örneğin yazmak için: [x<SUB>a</SUB>+Y]<SUP>m</SUP> ya da örneğin altindis olan a’yı biraz daha küçültmek için: [x<FONT SIZE=-1><SUB>a</SUB></FONT>+y]<SUP>m</SUP> yazabiliriz.

<tt>daktilo yazısı</tt> Eşaralıklı yazıtipi: Courier yazıtipindeki gibi daktilo yazısı oluşturmak için <TT>...</TT> ; veya <CODE>...</CODE> imlerini kullanabilirsiniz. <tt>daktilo yazısı</tt> <code> bilgisayar kodu</code> Yorum eklemek: Yalnızca kodunuzda yer alacak, tarayıcıdaki görüntüye hiçbir etkisi olmayacak yorum satırları eklemek için: <!--yorum metni--> şeklinde bir satır ekleyebilirsiniz. Yorum metinleri kodu inceleyenler için kolaylık ya da hatırlatma amacı taşırlar.

RESİM İŞLEMLERİ

Sayfaya resim yerleştirmek Resim seçiminde, seçtiğimiz resmin gif yada jpg formatında olması zorunluluğu dışında herhangi bir kısıtlama yok. (telif hakları kanunu dışında tabi) … Resim ekleme işi gayet kolay. Yapmamız gereken browser'a sayfaya koyacağı resmin nerede olduğunu göstermekten ibaret. Her ne kadar şart olmasa da resmin pixel cinsinden en ve boy uzunluğunu belirtmeniz sizin faydanıza olacaktır. Kullanacağımız etiket şu şekilde olacak; … <img src="resmin bulunduğu yer ve adı" width="x" height="y"> … Burada x resmin enini y ise boyunu belirtiyor. Bu bilgileri, resmi herhangi bir grafik editörüyle açarak öğrenebilirsiniz. <img src="resim/kedi.gif" width="65" height="91">

<IMG SRC=“resim.jpg” BORDER=n ALT=“kahta myo bir goruntu”> resim.jpg, resim dosyasının sunucudaki konumudur. BORDER özniteliği kullanılmayabilir. Piksel cinsinden kenarlık değeri girmek için kullanılır. ALT özniteliği, fare resmin üzerine getirildiğinde ya da resim yüklenemediğinde görüntülenecek alternatif metin girmek için kullanılır. Resmin bulunduğu klasör belirtmek için; Bu şekilde ardarda ../ ifadesiyle istediğimiz kadar üst dizine geçebiliriz. … Eğer iki üste geçeceksek ../../ ifadesi işimizi görecektir.

<IMG SRC=“ornek.jpg” WIDTH=400 HEIGHT=320 ALT= “deneme yazısı”> Resim için boyut belirtmek: Web sayfası tarayıcı tarafından yüklenirken HTML kodunda yer alan resminiz yüklenmeden onu takip eden metin yüklenmez. Fakat resim için boyut belirtirseniz tarayıcı resim için yer ayırıp metin yüklemeye devam edebilir. Böylece sayfa daha hızlı yüklenmiş olur. Boyut belirtmek için HEIGHT ve WIDTH özniteliklerine piksel cinsinden değerler atanır: <IMG SRC=“ornek.jpg” WIDTH=400 HEIGHT=320 ALT= “deneme yazısı”>

<title>resimler</title> </head> <body> <html> <head> <title>resimler</title> </head> <body> bir resim <br> <img src="resim.jpg" hight="150" width="200" alt="resmin üzerine gelince çıkan yazı"> </body> </html> Not: Sayfaya birkaç tane yan yana ve alt alta resimler koyun ve her bir resmin altına tanımlayıcı birşeyler yazınız.

<html> <head> <title>resimler</title> </head> <body> bir resim <br> <img src="resim.jpg" border="2" hight="150" width="200" alt="resmin üzerine gelince çıkan yazı"> </body> </html>

Resimlerin çevresine metin yerleştirmek: Bunun için ALIGN özniteliği kullanılır (yalnızca left ve right değerleri ile). Left değeri resmi sola, metni onun sağına; Right değeri resmi sağa, metni onun soluna yerleştirir. <img src="resim.jpg" hspace="50" vspace="50" border="2" hight="150" width="200" alt="resmin üzerine gelince çıkan yazı">

<title>resimler</title> </head> <body> <html> <head> <title>resimler</title> </head> <body> bir resim <br> <img src="resim.jpg" align="left" border="2" hight="150" width="200" alt="resmin üzerine gelince çıkan yazı"> buraya yazmış olduğumuz metin nasıl göründüğüne bakalım. Buna göre metnin resmin neresinde yer alacağını buna göre belirleyelim </body> </html> Not: Bir album oluşturarak albümde yer alan resimlerin yanlarına resim hakkında bişeyler yazın. En az 5 resim için uygulayın

Resmin çevresine boşluk eklemek: <img src="resim.jpg" hspace="50" vspace="50" align="left" border="2" hight="150" width="200" alt="resmin üzerine gelince çıkan yazı"> Burada resmin sağına ve soluna 40’ar piksellik HorizontalSPACE (Yatay Boşluk), alt ve üstüne ise 10’ar piksellik VerticalSPACE (Dikey Boşluk) eklenmiştir. HSPACE ve VSPACE boş piksel sayısıdır.

Resimlerin Kullanımı Hatırlatmalar: Web sayfasının hızlı açılmasını sağlamak için düşük dosya boyutlu resimler kullanılmalı. GIF ya da JPG formatındaki sıkıştırılmış resimler tercih edilmeli. Web için yüksek çözünürlük gerekmemektedir. 72 piksel/inch değeri yeterlidir. Photoshop’ta resim boyutlarını küçültmenin yolu: Image>Image Size ile açılan pencerede yeni boyutlar girmek. Tarayıcıların tanıdığı renkleri kullanmak için Color kutusunda “Only Web Colors” seçeneği işaretlenmeli, ya da “swatches” paleti kullanılamlıdır. Resmi sonradan tarayıcı güvenli renklere dönüştürmek için: Image>Mode>Indexed Color komutunu vermelidir.

<hr width=100> Çizginin genişliğini ayarlamak için kullanılır. HR Etiketi HR etiketi sonlandırma etiketi bulunmayan tagdır.  Sonlandırma etiketi bulunmayan taglar <hr /> şeklinde de yazılabilir.   HR Etiketi’nin Parametreleri <hr width=100> Çizginin genişliğini ayarlamak için kullanılır. <hr size=20> Çizginin kalınlığını ayarlamak için kullanılır. <hr color=#ff0000> Çizginin rengini ayarlamak için kullanılır. <hr align=right> , left, center  Çizginin sayfadaki yatay konumunun sola, sağa veya ortaya hizalanmasını sağlar.

<html> <title> HR Etiketi </title> <body> <hr> <hr color=red> ( color Renk verir) <hr color=blue size=5> (size Kalınlık verir) <hr color=green width=500> </body> </html>

<PRE> Sayfadaki Öğeleri Ortalamak: Sayfada ortalamak istediğiniz tüm öğeleri <CENTER> ve </CENTER> imlerinin arasına alarak ortalayabilirsiniz. <center> metni ortala</center> <center> <img src= > </center> <PRE> Yazılan metni yazıldığı gibi görmek için kullanılır. <pre> Merhaba nasılsın </pre>

KAYAN YAZI, KAYAN RESİM

Kayan yazı <html> <head>  <title>Kayan Yazı örneği </title>  </head>  <body>  <marquee>Bilgisayar Programcılığı</marquee>  </body>  </html>

YAZIYI SAĞA SOLA ÇARPTIRMAK Ama yazımız sağdan sola doğru kayıyor. Bunu istersek sağa sola çarptırabiliriz. Bunun için behavior=”alternate” kullanacağız. Bu kodumuz sağa sola çarptırmak için gerekli olan koddur. <MARQUEE BEHAVIOR=tip BGCOLOR=renk DIRECTION=yön HEIGHT=n HSPACE=n LOOP=n SCROLLAMOUNT=n SCROLLDELAY=n VSPACE=n WIDTH=n> <html> <head> <titl>Kayan Yazı </title> </head> <body> <marquee behavior="alternate"> Kahta MYO </marquee> </body> </html>

BEHAVIOR=tip: Metnin ekranda nasıl hareket edeceğini belirten bu ek SCROLL, SLIDE, ALTERNATE değerlerinden birini alabilir. Ek kullanılmadığında SCROLL değeri varsayılan olarak kabul edilir ve yazı, sınırın bir köşesinden belirerek diğer köşeden kayarak kaybolur. SLIDE eki ise yazının bir köşeden başlayarak diğer köşede donmasını sağlar. Metnin iki köşe arasında gidip gelmesi ise ALTERNATE ekiyle gerçekleştirilebilir. <marguee direction=right>,up,down : Sağdan, yukarıdan ve aşağıdan başlayarak kayması sağlanır  <marquee behavior=alternate> : Yazılar kaydırılırken ekrandan kaybolmadan bir uçtan diğerine gider  HSPACE=n: Kayan yazının sınırlara ne oranda yaklaşacağını belirler. Bu ek özellikle arka plana bir renk verildiğinde daha da belirginleşir. <marquee bgcolor=ff00ff> : Kayan yazıların arka plan rengini belirler. <marquee height=10 width=250> : Yazının kayacağı alanın yüksekliği ve genişliği ayarlanabilir. <marquee loop=3> : Yazının kaç kez kayacağı belirlenir. Daha sonra da yazı durur. <marquee scrolldelay=1> : Kaydırma hızını ayarlar. yazının her bir hareketi arasında kaç milisaniye bekleyeceğini belirlerN değerine ‘ -1′ veya ‘ INFINITE’ verildiğinde hareket sınırsız olarak tekrarlanır. Tip olarak ‘ SLIDE’ kullanıldığında bu işlem tek bir kez gerçekleşeceğinden LOOP ekini kullanmaya gerek yoktur.

<marquee behavior="alternate" bgColor="red"> renkli bir şerit üzerinde kayma</marquee> kayan yazının arkaplanını değiştirmiş olduk <marquee direction="up" bgColor="red"> Adıyaman </marquee> yukarıya doğru hareket ettirme <marquee direction="up" bgColor="red" width="100" heigth="800">A Uni Kahta MYO </marquee> arka plan renkli ve yukarı hareket eden yazı <marquee width="950" height="100" bgcolor="red">  <img src="es1.jpg" width="100px" heigth="800px">  </marquee> bir resmi kaydirma

 <marquee direction="up" width="800" height="400" bgcolor="red"> <img src="es1.jpg" width="100px" heigth="800px"> <img src="es2.jpg" width="100px" heigth="800px"> <img src="es3.jpg" width="100px" heigth="800px">  </marquee> çoklu resim yukarı doğru kaydırma

LİSTELER

Listeler HTML bize üç tip liste hazırlama imkanı veriyor. Bunlar; 1. Sıralı listeler (ordered list) 2. Sırasız listeler (unordered list) 3. Tanımlama listeleri (definition list) Sıralı listeler rakam veya harf yada her ikisini içiçe kullanarak liste oluşturmamızı sağlar. Sırasız listeler rakam/harf yerine madde imleri koyarak liste oluşturmamızı sağlar. Tanımlama listeleri ise bir listeden çok kalabalık metinlerde okumayı kolaylaştırmaya yardımcı olabilecek bir araçtır.

Sıralı listeler Liste içine alınacak metinler <ol>...</ol> imleri arasına alınarak yazılır. Bu imler listenin başladığını ve bittiğini belirtir. Listenin maddelerinin başına ise <li> (list item) imini getiriyoruz. Bu imte tıpkı <br> imi gibi sonlandırılmıyor. <ol> imine parametreler ekleyebiliyoruz. Bunlarla listemizin rakamla mı harfle mi başlayacağını (type) yada hangi rakam/harfle başlayacağını (start) belirtebiliyoruz. Compact değeri ise listenin mümkün olan minimum satır aralığına sahip olmasını sağlıyor. Bundan sonraki örneklerimizde sayfa kodunun yalnız body (gövde) bölümünü yazıp diğer kısımlarının yazılmış olduğunu varsayacağız.

Listeleri buradaki örnekte olduğu gibi iç içe hazırlamak ta mümkün. … Dikkat edeceğimiz nokta, işe etiketi ile başlayıp liste maddelerinin her birisinin başına etiketini getirmek ve listelemeyi bitirmek istediğimiz yerde etiketini yazmak. … Liste içinde yeni bir liste oluşturmak istediğimizde listelenecek maddeden sonra tekrar etiketini yazıyoruz ve bahsedilen kuralları aynen uyguluyoruz. … Type parametresinde kullanabileceğimiz değerler şunlar olabilir; sayılar,harfler (küçük/büyük) ve romen rakamları (i,ii,iii gibi)

<title> Sıralı liste </title> <body> <html> <title> Sıralı liste </title> <body> <h2>Numaralandırılmış bir liste:</h2> <ol> <li>Domates</li> <li>Biber</li> <li>Patlıcan</li> </ol> </body> </html> Not: Bu dönem aldığınız dersleri sıralı şekilde listeleyiniz

Sırasız Listeler <h4>Sırasız liste</h4> Bu tip listede de mantık aynı. Fark, listeleme yaparken maddelerin başına harf, rakam gibi unsurlar yerine küçük yuvarlaklar, kareler kullanabilmemiz. <ol> imi yerine <ul> imini kullanıyoruz, maddeler için kullandığımız <li> imi burada da geçerli. <ol> için parametreler ise şöyle; type için disc (içi dolu daire), circle (içi boş daire), square (içi dolu kare). Compact özniteliği sırasız listelerde de kullanılabiliyor. <h4>Sırasız liste</h4> <ul type=disc> <li>Domates</li> <li>Biber </li> <li>Patlıcan</li> </ul>

Tanımlama listeleri Bu listelemede kullanılan imler şöyle; <dl>...</dl> , <dd>...</dd> , <dt>...</dt>. Listenin maddelerini belirtmek için kullandığımız <li> iminin yerini burada <dd> ve <dt> imleri alıyor. Aynı şekilde <ol>...</ol> veya <ul>...</ul> imleri arasına aldığımız listeyi bu sefer <dl>... </dl> arasına yazıyoruz. Yine parametre olarak <dl> imi içinde compact ifadesini kullanabiliriz (zorunlu değil).

<html> <title> Sıralı liste </title> <body> <font face="verdana" size="4" color="red">Derslik Dağılımı: </font> <dl compact> <dt><font size="4" color="blue">1. Kat:</font> <dd><font size="3" color="black">1. katta sırasıyla 101.. 103 arasındaki derslikler bulunmaktadır. ve 3 adet bilgisayar laboratuarı </font> <dt><font size="4" color="blue">2. Kat:</font> <dd><font size="3" color="black">2. katta ise 201-212 derslikleri yer almakta</font> <dt><font size="4" color="blue">Zemin</font> <dd><font size="3" color="black">Tarımsal araştırma lab. öğrenci işleri kütüphane bulunmakta</font> </dl> </body> </html>

LİNK-BAĞLANTI-KÖPRÜ OLUŞTURMA

Link-Köprü oluşturma <a href="....">...</a> HTML’nin en önemli unsurlardan birisi bağlantılardır (linkler). Bağlantılar sayesinde hazırladığımız birçok sayfayı birbirleriyle ilişkili hale getirebiliriz. Bir tıklama bizi istediğimiz yere götürecektir. HTML'de metinlere ve resimlere bağlantı kazandırmak mümkündür. Bu yolla ses, grafik dosyaları, sıkıştırılmış dosyalar, internet adresleri gibi yerlere bağlantı yapmak mümkündür. Hatta yapacağımız bağlantı sayfa içinde, yani dahili bir bağlantı da olabilir. Şimdi yapmak istediğimiz bağlantıya göre kullanacağımız komutları inceleyim: <a href="....">...</a>

Bu komutla oluşturduğumuz bağlantı ile yeni bir sayfa açabilir, kullanıcıyı farklı bir internet adresine yönlendirebilir, kullanıcının kendisine sunduğunuz bir dosyaya ulaşmasını sağlayabilirsiniz. Yani bu tanıma göre bildiğimiz bağlantıları oluşturmak mümkündür. Şimdi aşağıdaki örnekleri birlikte inceleyelim, fakat öncelikle bir kuralı belirtelim; <a>...</a> imi arasına yazdığımız yazılar bağlantı özelliğine sahip olacaktır, yazının bağlantı olduğu eğer aksi belirtilmemişse browser tarafından altı çizili ve mavi renkli gösterilir. <a href="meyve.gif"> buraya tıklandığında meyve resmi açılacak </a>

<a href="word.docx"> Word dosyasını aç </a> Bağlantı kurulan bir resim değil bir dosya ya da bir sayfa yada bir video şeklinde de olabilirdir. Yine benzer bir yapıyla bir word dokumanını internet üzerinden link vererek açabiliriz. <a href="word.docx"> Word dosyasını aç </a> <a href="dersler.zip"> sıkıştırılmış bir dosya </a>

<a href="sayfa2.htm"> 2.sayfaya gitmek için tıklayın </a> En çok kullanılacak olan köprü biçimi sayfalar arası gerçekleştirilen köprü şeklidir. <a href="sayfa2.htm"> 2.sayfaya gitmek için tıklayın </a> Burada sayfa2 adindaki html dosyası açılacaktır. Ancak sayfa2 adındaki html dosyası ile bu kodların yazıldığı html dosyası aynı klasör içerisinde yer almalıdır. İnternet üzerindeki bir web adresine gitmek için ise <a href="http://www.adiyaman.edu.tr/"> Adıyaman üniversitesi </a> Bu örnekte bir internet adresi verdik.

<a href="mailto: yavuzsun@mail.com"> mail atın </a> Buradaki linke tıklandığında kullanıcının ilgili mail programı açılacak ve mail'in send to (kime) kısmına verdiğimiz mail adresi otomatik olarak yazılacaktır. Metinlere bağlantı vermeyi öğrendik, sayfadaki resimlere link vermek için resmi yerleştirmek için kullandığımız: <img src="..." width="x" height="y"> imini <a href>...</a> iminin arasına alıyoruz. İşte örnek; <a href="sayfa1.htm"><img src="resim.gif" border="0"></a> resim.gif tıklanacak resmi, sayfa1.htm resme tıklandığında açılacak sayfayı gösteriyor. "Border" komutu ise resimde bağlantı özelliği olduğunu belirten çerçeveyi kontrol ediyor, 0 (sıfır) değeri bu çerçeveyi tamamen yok eder. Bu komutu değişik sayılarla deneyebilirsiniz.

<a href="..." target="..." ></a> Target özniteliği: Son olarak bağlantının açılacağı pencereyi belirtmek için kullanılan "target" özniteliğini öğrenelim; Kullanımı: <a href="..." target="..." ></a> target="_blank": Bağlantı yeni bir pencerede açılır. target="_self" : Bağlantı aynı pencere içerisinde açılır. target="_top" : Bağlantı aynı pencere içerisinde en üstten itibaren açılır. target="_parent": Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur. target= "çerçeve adı": Frame komutu ile çerçeve oluşturulmuşsa bağlantının adı verilen çerçevede açılmasını sağlar.

Önümüzdeki hafta herkes kişisel bir site hazırlayıp getirecek.

TABLOLAR

Tablolar <table>...</table> Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz HTML'nin en önemli yapıtaşlarındandır. Sayfada gözüksün ya da gözükmesin tabloları bir iskelet gibi kullanabilir, böylece şu ana kadar öğrendiklerinizle yapamayacağınız gerçek düzenlemeyi yapabilirsiniz. Tablolar satır ve sütunlardan oluşur. Tabloya genel bir başlık atayabiliriz. Her sütun için de kendi başlığını oluşturmak mümkündür. Üstteki tablo başlığının altında veya tablonun sona erdiği satırdan sonraki satıra açıklama (thead/caption) koyabiliriz. Ayrıca tablo hücrelerini yanındaki veya altındaki hücrelerle birleştirebiliriz:

<td> hücre <td> Tablo oluşturma <table> ile başlar </table> ile sona erer. Tablolar içerisinde satır oluşturmak için <tr> …</tr> Sutun oluşturmak için ise <td>…</td> kullanılır. Border tabloda kenarlık vermek için kullanılır. Kenarlık verilmezse tablo olup olmadığı belli olmaz <tr> <td> hücre <td>

1 satır 2 hücre 2 satır her satırda 1 hücre 2 satır ve her satırda 2 hücre

Profesyonel bir sitede tablolarda border kullanılmaz Profesyonel bir sitede tablolarda border kullanılmaz. Border=0 olarak verilir. Ancak burada öğrenirken tabloları görebilmek için border=1 veriyoruz. <table bgcolor=#aacc33> şeklinde tablo için arka plan rengi verilebilir <td bgcolor=#ff0044> şeklinde ise sadece bir hücre içindeki arkaplan rengi değiştirilebilir. <table background=resim.jpg> ile tablo için arkaplan resmi yerleştirilebilir. <table cellspacing=0> tablo içeriisndeki hücreler arası mesafeyi belirler <table cellpadding=0> hücre içerisindeki metnin hücre duvarına olan uzaklığını belirler. <tablle background=”arkaplanresmi.jpg”> arkaplan resmi belirler

<table bgcolor=#aaff00 cellpadding=0 cellspacing=0 border=1> <tr> <td bgcolor=#ff44aa width=100 hight=50> bir hucre</td> <td > iki hucre</td> <td> uc hucre</td> <td> dort hucre</td> </tr> </table>

<th>Başlık</th> <th>Başka Başlık</th> Tablolarda Başlıklar Başlıklar <th> etiketi ile belirtilir. <table border="1"> <tr> <th>Başlık</th> <th>Başka Başlık</th> </tr> <td>Satır 1, Hücre 1</td> <td>Satır 1, Hücre 2</td> <td>Satır 2, Hücre 1</td> <td>Satır 2, Hücre 2</td> </table>

<td></td> Bir Tabloda Boş Hücreler Veri içermeyen hücreler bir çok tarayıcıda görüntülenmezler. <table border="1"> <tr> <td>Satır 1, Hücre 1</td> <td>Satır 1, Hücre 2</td> </tr> <td>Satır 2, Hücre 1</td> <td></td> </table>

<td> </td> Boş hücre etrafındaki iç kenarlıkların görünmediğine dikkat edin. (Mozilla Firefox bunu görüntüler). Bundan kurtulmak için, ( ) özel karakterlerini boş hücre içine ekleyerek kenarlıkların görüntülenmesini sağlayabilirsiniz. <table border="1"> <tr> <td>Satır 1, Hücre 1</td> <td>Satır 1, Hücre 2</td> </tr> <td>Satır 2, Hücre 1</td> <td> </td> </table>

Tablolarda satır ve sütun birleştirme Colspan etiketi tablo içerisindeki aynı satırda yer alan hücreleri birleştirmek amacıyla kullanabileceğimiz bir etikettir. 2 satır 3 sütun (hücre) hücre içeren bir tabloda 1 satırda yer alan sütunlar (hücreleri) tek sütun yapabiliriz. Birleştirilecek olan hücreler hangi satırda ise o hücrenin başlangıcında td tagı içerisine colspan=3 yazılarak 3 hücre birleştirilmiş olur Rowspan etiketi ise tabloda aynı sutunda bulunan hücreleri bireştirmek için kullanılır. İlk hangi satırda başlıyor ise o satırın td bloguna yazılır.

<html> <head> <title>hücre birleştirme</title> </head> <body> <table border=”1″> <tr align=”center”> <td colspan=”3″ width=”200″>1</td> </tr> <tr align=”center”> <td width=”50″>2</td> <td width=”100″>3</td> <td width=”50″>4</td> </tr> </table> </body> </html>

<html> <head> <title>sutun birleştirme</title> </head> <body> <table width=200 border=1> <tr align=center> <td rowspan=2 width=100>1</td> <td width=80>2</td> <td width=50>3</td> </tr> <td width=80>4</td> <td width=50>5</td> </table> </body>