WEB TASARIMINDA HTML DİLİ

Transkript

1 WEB TASARIMINDA HTML DİLİ Html dili web sayfası oluşturmak için kullanılır. Bir html sayfası oluşturmak için oluşturulmak istenen klasörde mause sağ tıklanır ve yeni seçeneğinin altında metin belgesi seçeneği seçilir, oluşan dosya ya sağ tıklanıp açılan pencereden yeniden adlandır seçeneği seçilir ve dosyamız.html uzantılı olacak şekilde yeniden isimlendirilir. Eğer dosya uzantıları görünür durumda değil ise denetim masasından klasör seçeneklerinden görünüm sekmesi seçilir ve bilinen dosya türleri için uzantıları gizle tık işareti kaldırılır. Html türü bir web sayfasında aşağıdaki kodların mutlaka olması gerekir. <!DOCTYPE HTML> <html> <head> Sayfamız hakkındaki bilgileri buraya gireceğiz </head> <body> Sayfamızdaki Yazıları, resimleri, kodları vb. bu kısma gireceğiz. </body> </html> DOCTYPE: Sayfamızın hangi html sürümü ile kodlandığını belirtir. Html dilinin son sürümü Html5 sürümdür. Bu komut sayfanın en başında kullanılır. Belgemizdeki kodların Html5 sürümüne göre kodlandığını belirtmek için DOCTYPE komutu aşağıdaki gibi kullanılır. <!DOCTYPE html> html etiketi : html dilinin kurallarına göre DOCTYPE komutu dışında sayfamızın içerisinde her şey html etiketleri arasında kullanılmalıdır. Kullanımı aşağıdaki gibidir. <html> etiketin açılış kodu </html> etiketin kapanış kodu head etiketi : Head kelime olarak kafa anlamına gelir. Eğer html sayfamızı insana benzetirsek head etiketi sayfamızın baş kısmıdır. Sayfamız ile ilgili bilgileri taşır. <head> etiketin açılış kodu </head> etiketin kapanış kodu body etiketi : body kelime olarak vücut anlamına gelir. Eğer html sayfamızı insana benzetirsek body etiketi sayfamızın gövde kısmıdır. Sayfamızda kullanılacak işlemler; yazılar, resimler vb. bu kısımda yer alır. <body> etiketin açılış kodu </body> etiketin kapanış kodu title etiketi : title etiketleri arasına yazılacak yazı sayfamızın başlık bilgisini içerir ve sayfamızı yorumlayan tarayıcımızın(internet Explorer, chrome, firefox, opera vb.) en üstündeki sekme kısmında bu bilgi görünür. Head etiketleri arasında kullanılmalıdır. Kullanımı aşağıdaki gibidir. <title>sayfa Başlığı</title> meta etiketi : head etiketleri arasında kullanılır. meta etiketleri sayfamıza bir takım ayarlar yapmamızı sağlar. Örneğin aşağıdaki kod tarayıcıya(chrome, firefox, internet Explorer vb.) sayfamızda utf-8 karakter yapısının kullanılacağını belirtir. Utf-8 karakter yapısı içerisinde Türkçenin de bulunduğu bazı dilleri kapsar. Bu sayede sayfamızda ç, ğ, ö, ü, ı, ş gibi Türkçe karakterleri kullanabiliriz. Head etiketleri arasında kullanılmalıdır. <meta>charset= utf-8 </meta>

2  etiketi :  etiketleri arasına yazılacak yazı sayfamızı yorumlayan tarayıcımızda(internet Explorer, chrome, firefox, opera vb.) görüntülenmez.  font etiketi : font etiketi yazımızın türünü, rengini, büyüklüğünü ayarlamamızı sağlar. <font size="12" face="tahoma" color="blue">bu yazı mavi, 12 punto büyüklüğünde ve tahoma tipinde görüntülenir.</font> b ve strong etiketleri : b veya strong etiketleri arasına yazılacak yazı sayfamızı yorumlayan tarayıcımızda(internet Explorer, chrome, firefox, opera vb.) kalın harflerle yazılmış olarak görünür. <b>bu metin tarayıcımızda kalın olarak görüntülenir.</b> br etiketi : br etiketinden sonraki yazılar, tarayıcımızda(internet Explorer, chrome, firefox, opera vb.) alt satırda görüntülenir. Kullanımı aşağıdaki gibidir. <br> bu etiket bir satır aşağı yazdırır. i etiketi : i etiketleri arasına yazılacak yazı sayfamızı yorumlayan tarayıcımızda(internet Explorer, chrome, firefox, opera vb.) eğik yazılmış olarak görünür. <i>bu yazı eğik görünür.</i> u etiketi : u etiketi arasında kalan metne altı çizili özellik ekler <u>bu metin tarayıcımızda altı çizili görüntülenir.</u> p etiketi : <p> etiketi ir paragraf taılar. <p>bu yazı ir paragraftır.</p> img etiketi : img etiketi sayfamıza resim ekler <img img src="resimlerim/elma.png" align= left alt="örnek" width="30" height="30" border= 1 hspace= 5px vspace= 5px title= elma ></img> iframe etiketi : iframe etiketleri sayfamızda bir çerçeve açar ve bu çerçeve içerisinde başka sayfalar görüntülenebilir. Belge içinde belge oluşur. <iframe src="sayfalarim/iletisim.html" align= left width="30" height="30" name= cerceve > </iframe> ol, ul, li etiketleri ol etiketi : sıralı liste tanımlar <ol type= 1,A,a,I,i > <li>kahve</li> <li>çay</li> <li>süt</li> </ol>

3 ul etiketi : sırasız liste tanımlar <ul type= square, circle, disc > <li>kahve</li> <li>çay</li> <li>süt</li> </ul> table etiketi : table etiketi belgemizde tablo oluşturur <table bgcolor= red background= resimlerim/a.jpg border= 1px height= 300px width= 300px align= center > <tr> <td>html Dersleri</td> <td>120 Saat</td> </tr> </table> tr etiketi : tr etiketi tablomuzda satır oluşturur <tr> </tr> td etiketi : td etiketi satırımızda hücre oluşturur <tr> <td height= 20px width= 50px >1. hücre</td> <td width= 60px >2. hücre </td> <tr> <td colspan= 2 >bu komut yan yana 2 hücreyi birleştirir</td> <td rowspan= 2 >bu komut alt alta 2 hücreyi birleştirir</td </tr> style etiketi : style etiketi belgemizi şekillendirir ve biçimlendirir. <head> <style type= text/css > <link href= css/stil_sayfam1.css rel= stylesheet ></link> </style> </head> <body> <p class= baslik >Bilişim</p> </body> link etiketi : input etiketi belge ile harici kaynak arasındaki ilişkiyi tanımlar. <link href= css/css.css rel= stylesheet ></link> input etiketi : input etiketi kullanıcının veri girişi yapabileceği alan tanımlar. <form action="demo.php"> İsim: <input type="text" name=" giriskutusununismi "></input><br> <input type="submit" value="gönder"></input> </form>

4 div etiketi : div etiketi belgemizde bir bölüm sektör, kutu tanımlar <div style="color:blue"> <p>html paragrafı</p> </div> embed etiketi : embed etiketi sayfamıza etkileşimli içerikler ekler <embed src="merhaba.swf"> </embed> video etiketi : video etiketi belgemize video eklememizi sağlar. <video width="320" height="240" controls="controls"> <source src="buff.mp4" type="video/mp4"></ source > <source src="buff.ogg" type="video/ogg"></ source > </video> audio etiketi : audio etiketi belgemize ses dosyası eklememizi sağlar. <audio controls="controls"> <source src="buff.ogg" type="audio/ogg"></ source > <source src="buff.mp3" type="audio/mp3"></ source > </audio> button etiketi : button etiketi belgemize düğme eklememizi sağlar.yazı yada resim olarak eklenebilir. <button type="buton, reset, submit">butoncuk</button> script etiketi : script etiketi istemci tarafında çalıştırılacak bir script tanımlar. JavaScript gibi. script etiketi içerisinde script ifadeleri olabileceği gibi src özelliği ile harici bir script dosyası çağırılabilir. <script> document.write("merhaba Dünya!") </script>

5 WEB TASARIMINDA CSS DİLİ CSS dili html ile oluşturulmuş web sayfalarını şekillendirmek ve biçimlendirmek için kullanılır. Bir css sayfası oluşturmak için oluşturulmak istenen klasörde mause sağ tıklanır ve yeni seçeneğinin altında metin belgesi seçeneği seçilir, oluşan dosya ya sağ tıklanıp açılan pencereden yeniden adlandır seçeneği seçilir ve dosyamız.css uzantılı olacak şekilde yeniden isimlendirilir. Eğer dosya uzantıları görünür durumda değil ise denetim masasından klasör seçeneklerinden görünüm sekmesi seçilir ve bilinen dosya türleri için uzantıları gizle tık işareti kaldırılır..css uzantılı bir sayfa ve bunun html sayfasından çağırılışı aşağıdaki gibidir..css uzantılı sayfa:.stil_a { font: tahoma, comic sans ms red 12px bold ; background: #fff.stil_b { font: times new roman,arial blue 18px italic;background:url(resimlerim/1.png) no-repeat.html uzantılı sayfa: <!DOCTYPE HTML> <html> <head> <link href= css/css.css rel= stylesheet ></link> </head> <body class= stil_a > /* body etiketi arasında kullanacağınız tüm yazılar özellikle belirtilmemişse css sayfasında belirlediğiniz stil_a kurallarına göre şekillendirilir.*/ <p clas= stil_b >buraya yazacağınız yazı css sayfasında belirlediğiniz stil_b kurallarına göre şekillendirilir.</p> </body> </html> CSS Kodları ve kullanımları Font özellikleri: Font özellikleri sayfalarımızdaki metinlerin font ailesini, kalınlık ayarlarını,boyutunu, büyük-küçük harf olmasını ve stilini değiştirmemizi sağlar. Fontun alt parametreleri ve kullanımları aşağıdaki gibidir. 1. color 2. font-family 3. font-size 4. font-weight 5. font-style 6. font-variant 7. font

6 1. color: (color) etileriizi regii taılaaız içi kullaılır..stil1{ color:#f00; /* renk kodları aşağıdaki gibi de kullanılabilir. Aqua, black, blue, fuchsia, gray, gren, lime, maron, navy, olive, purple, red, silver, teal, white, yellow #00FF00 yeşil, #0000ff avi, ff0000 kırızı v. Daha fazla renk kodu için yandaki bağlantıyı inceleyebilirsiniz. */ 2. font-family: (font-family) metinlerimizin rengini tanımlamamız için kullanılır..stil2{ font-family: Courier New", Courier, "Lucida Console", Monaco, monospace; /* aşağıdaki font aileleri de kullanılabilir. "Times New Roman", Times, Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif "Comic Sans MS", cursive, Impact, Charcoal, Tahoma, Geneva, "Lucida Sans Unicode", "Lucida Grande", sans-serif */ 3. font-size: (font-size) metinlerimizin rengini tanımlamamız için kullanılır..stil3{ font-size: 12px; /* pixel cinsinden px değeri yazıldığı gibi xx-small x-small small medium large x-large xx-large gibi değerlerde alabilir. */ 4. font-weight: Fontun kalınlık incelik durumunu belirler..stil4{ font-weight: bolder; /* 100(ince)-900(kalın)arasında bir değer alabildiği gibi bold, bolder ve normal değerlerini de alır. */ 5. font-style: Fotu eğikitaliktik olup olaaasıı elirler..stil5{ font-style: italic; /* oblique değerini de alabilir. Yine yazıyı italic yapar. normal değeri verilirse eğik yazı iptal edilir. */

7 6. line-height: iki satır arasıdaki uzaklığı elirtir...stil6{ line-height: 10px; 7. font: Yukardı alatıla fot özelliklerii tek sefer de taılaak içi kullaılır..stil7{ font: bold italic Verdana, Helvetica, Arial, sans-serif #ff00cc; Zemin (Background) özellikleri: Background alt parametreleri ve kullanımları aşağıdaki gibidir. 1. background-color 2. background-image 3. background-repeat 4. background-attachment 5. background-position 6. background 1. background-color: Eleetleri zeiie ir rek ataak içi kullaılır..stil8{ background-color: skyblue; 2. background-image: Elementlerin zeiie resi ekleek içi kullaılır..stil9{ background-image: url(/resimlerim/resim2.gif); 3. background-repeat: background-image ile zeie eklee resi tekrarı ile özellikleri elirler..stil10{ background-image: url(/resimlerim/resim2.gif); background-repeat: no-repeat; 4. background-attachment: zeie eklee resi sayfa ile sroll etesii veya sayfaı zeii de çakılı kalasıı sağlar..stil11{ background-image: url(/resimlerim/resim2.gif); background-attachment: fixed;

8 5. background-position: background-position özelliği background-image ile elirlee resi aşlagıç oktasıı elirler..stil11{ /* En kolay kullanım şekli; Yatay değerler için: left,center,right Dikey değerler için: top, center, bottom Yüzde değerleri ve uzunluk değerleri de kullanılır. Yüzde değerler ve uzunluk değerleri verildiğinde ilk değer yatay içindir sonra gelen dikey değerdir. Örneğin %10 %60 değeri bir zemin resmi için verilmiş ise %10 değeri yataydaki değeri %60 ise dikey olarak değerini gösterir. 5px 10px gibi değerler verilmişse resmin sol üstden 5px sağa ve 10px aşağıdan başlayacağını belirler. Eğer yanlızca yatay değer verilmiş ise, dikey değer %50 olarak kabul edilecektir. Yüzde değerler ve uzunluk değerleri eksi değerler alabilir. */ background-image: url(deneme.gif); background-repeat: no-repeat; background-position: 10% 50%; 6. background: Bu özellik )eiakgroud ile ilgili tü özellikleri ir arada kullaıı sağlar..stil12{ background: url(/resimlerim/resim2.gif) no-repeat #0fc top left; list-style özellikleri: Liste özelliği ilk olarak listelee aaçlı kullaılsa da şidilerde eü yapııda kullaıı revaçtadır. List-style alt parametreleri ve kullanımları aşağıdaki gibidir. 1. list-style-type 2. list-style-image 3. list-style-position 4. display 5. list-style 1. list-style-type: list-style-type özelliği list-ite işaretii tipii elirler..stil13{ list-style-type: lower-roman; /* küçük roman rakamları ile listeleme yapar */ /* disc, square, decimal, circle, upper-roman gibi değerlerde alabilir. */ 2. list-style-image: disk, daire, kare v işaretler yerie resi koyak içi kullaılır..stil14{ list-style-image: url(resimlerim/3.gif); 3. list-style-position: işaretleri etii içideiside veya solda dışıdaoutside ı olaağıı elirler..stil15{ list-style-position: outside;

9 4. display: elementlere aşağıdaki üç değerden birini atamak için kullanılır: block: elementden önce ve sonra bir satır bırakır. inline : elementden önce ve sonra bir satır bırakmaz. none: element görüntülenmez. Elementi gizler..stil16{ display: none; Kenarlık (border) özellikleri: Kearlıkorder, içerik alaı ve paddig etrafıdaki ir veya daha fazla çizgiye deir. 1. boder-style 2. border-width 3. border-color 4. border 1. border-style: border-style özelliği kearlık stilii elirleeizi sağlar.ör: dottedoktalı, douleçift v..stil17{ border-style:dotted dashed solid double; /* burada üst kenalık dotted, sağ dashed, alt solid, sol double verilmiştir */ border-style: double; /* tüm kenarlıklar(üst, sağ, alt, sol) çift olur. */ 2. border-width: kearlık kalılığıı elirleek içi border-width değeri kullaılır..stil18{ Border-width:1px; 3. border-color: kearlık regii elirleek içi kullaılır..stil19{ Border-color:green; /* Tek değer tüm kenarlık renklerini belirler, her kenar için ayrı renk de tanımlanabilir */ 4. border: yukarıda sıraladığımız özellikleri tek sefer de tanımlamak için kullanılır..stil20{ Border:gren solid 2px; margin özellikleri: Margi özelliği eleeti etrafıdaki oşluk olarak taılaır. margin-top margin-right margin-bottom margin-left magrin 1. magrin-top: eleeti üst kear oşluğuu elliir değer kadar veya yüzde olarak elirler..stil21{ magrin-top: 2px;

10 2. magrin-right: eleeti sağ kear oşluğuu elliir değer kadar veya yüzde olarak elirler..stil22{ magrin-right: 50%; 3. magrin-bottom: eleeti alt kear oşluğuu elliir değer kadar veya yüzde olarak elirler..stil23{ magrin-bottom: 50%; 4. magrin-left: eleeti sol kear oşluğuu elliir değer kadar veya yüzde olarak elirler..stil24{ magrin-left: 30px; 5. magrin:.stil25{ magrin: 30px 20px 20px 50px; /* sırası ile üst, sağ, alt ve sol boşluk belirtirler. */ magrin: 20px 50px; magrin: auto; /* bu şekilde girilir ise element ortalanır anlamına gelir.*/ padding özellikleri: Paddig içerik alaı ile kearlık arasıdaki aladır. /* bu şekilde girilir ise sırası ile üst 20, sağ, 50, alt 20 sol 50 anlamına gelir.*/ padding-top padding -right padding -bottom padding -left padding 1. padding-top: içerik alaı ile üst kearlık arasıdakiesafeyi elirler..stil26{ padding-top: 0.25in; 2. padding-right: içerik alaı ile üst kearlık arasıdakiesafeyi elirler..stil27{ padding-right: 5px; 3. padding-bottom: içerik alaı ile üst kearlık arasıdakiesafeyi elirler..stil28{ padding-bottom: 50%;

11 4. padding-left: içerik alaı ile üst kearlık arasıdakiesafeyi elirler..stil29{ padding-left: 30px; 5. padding:.stil30{ padding: 30px 20px 20px 50px; /* sırası ile üst, sağ, alt ve sol, iç boşluk belirtirler. */ Kutu modeli özellikleri: Width Height Float Clear 1. width: Eleetleri aşlagıçtaki geişlik değeri auto yai kedi asıl geişliğidir. Öreği ir resi geişliği gii Yüzde değeri ebveyn elementi kıstas alarak uygulaır..stil31{ width: 300px; 2. height: Eleetleri aşlagıçtaki yükseklik değeri auto yai kedi asıl geişliğidir. Öreği ir resi yüksekliği gii Yüzde değeri ebveyn elementi kıstas alarak uygulaır..stil32{ height: 0.25in; 3. float: float özelliği ir eleetiig, tale, div vd. kouunu elirleeksağa veya sola içi kullaılır. Siz ir elemente flaot=left değeri verirseiz diğer eleetler o eleeti sağıda akar. Bu HTML, deki resieimg) uygulanan alig= left ve alig= right ile özdeş ir özelliktir..stil33{ float: left; 4. clear: Resi ve eti eleetleri diğer eleetlere göre flotig eleet olarak taılaır. clear özelliği floating uygulaaya eleete köşe taıı yapar. left değeri uyguladığı eleeti floatig eleeti ir alt solua atar, right özelliği ezer şekilde sağa atar, none özelliği eleeti aşlagıç değerii geri döndürür.stil34{ clear: left; 5. text-indent: Paragrafları ilk üleleri solda içeriye kaydırılası içi kullaıla ir özelliktir..stil35{ text-indent: 10px;

12 5. text-align: Bir eleti diğerlerie göre hizasıı erlileek içi kullaılır. Sadee etiler içi kullaılaz, diğer eleetler içide kullaılır..stil36{ text-align: left; 6. vertical-align: Bir eleeti içeriğii dikey hizalaası içi kullaılır..stil37{ vertical-align: middle; /* baseline : Orta(metin içeriğine göre), top : Yukarı(elemente göre), text-top: Yukarı (Metin içeriğine göre), middle : Orta (Elemente göre), bottom : Alt (Elemente göre), text-bottom : Alt(Metin içeriğine göre) */ 7. line-heigh: Bir eleeti içeriğii dikey hizalaası içi kullaılır..stil38{ line-height: 20px; /* Satırlar arasındaki yüksekliği belirler. normal, pixel veya yüzdedeğerlerin den birini alabilir. */ Link özellikleri: a:; a:hover ; /*Linkin imleç üzerine getirildiğindeki durumudur.*/ a:active ; /*Linkin tıklandığı andaki durumudur. */ a:visited ; /*Linkin tıklandıktan sonraki durumudur. */ 1. a: Linkin, sayfa açıldığında tıklanmadan veya ümleç üzerine getirilmeden önceki durumudur a:link { color:#bf0000; 2. a;hover: Linkin imleç üzerine getirildiğindeki durumudur. a:hover { text-decoration:none; /* linklerin altı çizgili olarak gelir bunları kaldırmak için kullanılır.*/ 3. a;active: Linkin tıklandığı andaki durumudur. a:active{ background-color:#bf00bf; /* linklerin arkasına renk atar.. */ 3. a;visited: Linkin tıklandıktan sonraki durumudur. a:visited{ text-decoration:none;