BMH-104 Web ve İnternet
Teknolojileri
Bölüm-2 Temel HTML ve CSS
Referans : W3School
Free Site Kurulumu: [Link]
Dr. Musa ATAŞ
Bilgi kaynakları
• Bu bölümdeki örnekler çoğunlukla aşağıdaki siteden alınmıştır.
• [Link]
• Nette html dersleri veren birçok faydalı web sitesi bulunmaktadır,
Google arama motorunda ‘html tutorials’ veya ‘html dersleri’
şeklinde aratabilirsiniz.
• Editör olarak dreamveawer veya ücretiz olarak indirilebilen
Notepad++ kullanılabilir.
İlk Örneğimiz
• Dreamviewer veya Notepad++ editörünü kullanarak uzantısı html olan bir sayfa açıyoruz [Link] gibi ve
aşağıdaki kodu yazıyoruz. Bu dosyayı herhangi bir browserda açtığımızda aşağıdaki çıktının görünmesi lazım.
<!DOCTYPE html>
<html>
<head>
<title>Sayfa Başlığı Buraya</title>
</head>
<body>
<h1>Birinci Satır</h1>
<p>İlk paragraf</p>
</body>
</html>
HTML Dokümanları
• Bütün HTML dökümanları <!DOCTYPE html> ile başlamalıdır.
• HTML dökümanı <html> etiketi (tag) ile başlayıp </html> etiketi ile
sonlandırılmalıdır.
• Browserda görünen kısımlar <body> ile </body> arasında yer alır.
HTML Unsurları (elementleri)
• HTML komutları genellikle <tag>content</tag> şeklinde yazılırlar. Her
tag (etiket) in sonunda / işareti ile etiketin bittiği belirtilmelidir.
• <br> etiketi müstesnadır. <br> etiketi bir satır aşağıya inmeye yarar.
Ancak yazdığınız kodun XML parser tarafından sorunsuz bir şekilde
parse edilmesini istiyorsanız bütün etiketleri sonuna / getirerek
sonlandırınız.
• Etiketler genellikle küçük harflerle yazılırlar ama zorunlu değildir.
(XHTML için zorunludur)
• Nested (içiçe) etiketler olabilir.
Attributes (Nitelikler)
• lang: dil seçimi yapmanızı sağlar
<!DOCTYPE html>
<html lang="en-US">
<body>
• title : başlık bilgisi
• href: <a> etiketinde linki belirtmek için kullanılır.
• src, width, height, alt: <image> etiket için imgenin bulunduğu adresi ve
imgenin genişlik ve yüksekliğini belirtir. alt niteliği ise imgenin üzerine
Mouse ile gelindiğinde görünmesi istenen text bilgiyi belirtir. Görme özürlü
olanlar içinse sesli mesajı devreye alıp text to speech yapar.
• nitelik değeri nitelik belirleyicisinden sonra gelen = den sonra yazılır.
Problem yaşamak istemiyorsanız yazacağınız değeri her zaman çift tırnak
veya tek tırnak arasına alınız.
• <p title=‘Merhaba " JAVA" Dili'> ekrana Merhaba " JAVA" Dili yazısını yazar.
• Burada sadece birkaç nitelik belirleyicisi örnek olması için verilmiştir. Tüm
nitelik listesine [Link] adresinden
ulaşabilirsiniz.
HTML Stili
• Bütün HTML elementleri varsayılan (default) değer olarak arka plan
rengi beyaz, font rengi siyah ve büyüklüğü 12 punto olarak
ayarlanmıştır.
• <body> etiketindeki style niteliği ile bu değerler değiştirilebilir
<body style="background-color:lightgrey">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
• Text color: <h1 style="color:blue">This is a heading</h1>
• Text font: <h1 style="font-family:verdana">This is a heading</h1>
• Text size: <h1 style="font-size:300%">This is a heading</h1>
• Text alignment: <h1 style="text-align:center">Centered Heading</h1>
HTML Formatları
• bold ve strong : her ikisi de yazıyı kalın yapar.
• <p><b>This text is bold</b>.</p>
• <p><strong>This text is strong</strong>.</p>
• italic ve emhpasized formatı: her ikisi de yazıyı eğik yapar.
• <p><i>This text is italic</i>.</p>
• <p><em>This text is emphasized</em>.</p>
• small: text içinde istenilen kelime küçük yazılır.
• <h2>HTML <small>Small</small> Formatting</h2>
• marked: arka rengi sarı olarak vurgu yapar.
• <h2>HTML <mark>Marked</mark> Formatting</h2>
• deleted : istenilen textin üstünü çizili yapar.
• <p>My favorite color is <del>blue</del> red.</p>
• inserted: istenen textin altını çizer.
• <p>My favorite <ins>color</ins> is red.</p>
• subscript: istenen texti altsimge olarak gösterir.
• <p>This is <sub>subscripted</sub> text.</p>
• superscipt: istenen texti üstsimge olarak gösterir.
• <p>This is <sup>superscripted</sup> text.</p>
HTML Computer Code
• Bazen bir programlama dili ile editörde yazılmış kodun web sayfasında
olduğu gibi görünmesini isteriz bu durumda <code> etiketi işimizi
görecektir.
<p>Coding Example:</p>
<pre>
<code>
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
}
</code>
</pre>
• Yukarıdaki örnek istediğimiz gibi çıktı vermez bu durumu düzeltmek
için <code> ‘dan sonra <pre> etiketi kullanılır.
HTML Comments (Açıklama Satırı)
• Örnek
• <!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
• Veya istemediğimiz bir html satırını pasif yapmak için de
• <!-- Do not display this at the moment
<img border="0" src="pic_mountain.jpg" alt="Mountain">
-->
HTML Başlıkları
• HTML başlıkları <h1> ile <h6> etiketleri arasında tanımlıdırlar. h1 en
büyük font h6 en küçük font büyüklüğüne sahiptir.
• Örnek
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
HTML Paragraf
• HTML de paragraf için <p> etiketi kullanılır.
• Örnek
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Styles-CSS
• Örnek
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Syntax (yazım biçimi)
• element { property:value ; property:value }
Burada element HTML etiketi, property CSS özelliği ve value kelimesi ise
CSS değeridir.
• inline CSS: <h1 style="color:blue">This is a Blue Heading</h1>
• internal CSS: <head> bloğunda tanımlanır ve tüm sayfayı etkiler.
Örnek bir önceki sayfa.
• external CSS: yine <head> bloğunda ama herhangi bir css dosyasının
adresini yazarak tanımlanır.
• <head>
<link rel="stylesheet" href="[Link]">
</head>
CSS Syntax (yazım biçimi) -devam
• CSS font: color , font-family ve font-size dan meydana gelmiştir.
<head>
<style>
h1 {
color:blue;
font-family:verdana;
font-size:300%;
}
p {
color:red;
font-family:courier;
font-size:160%;
}
</style>
</head>
• id:
<style>
p#p01 {
color: blue;
}
</style>
<p id="p01">I am different.</p>
CSS Syntax (yazım biçimi) -devam
• CSS class:
<!DOCTYPE html>
<html>
<head>
<style>
[Link] {
color:red;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p class="error">I am different.</p>
<p>This is a paragraph.</p>
<p class="error">I am different too.</p>
</body>
</html>
HTML Linkleri
• HTML linki <a> etiketi ile tanımlanır.
• Örnek
• <a href="[Link] is a link</a>
HTML links
<!DOCTYPE html>
<html> <head> <style>
a:link {
color:#000000; background-color:transparent; text-decoration:none;
}a:visited {
color:#000000; background-color:transparent; text-decoration:none;
} a:hover {
color:#ff0000; background-color:transparent; text-decoration:underline;
} a:active {
color:#ff0000; background-color:transparent; text-decoration:underline;
}</style>
</head>
<body>
<p>You can change the default colors of links</p>
<a href="html_images.asp" target="_blank">HTML Images</a>
</body>
</html>
HTML links
target:
<a href="[Link] target="_blank">Visit W3Schools!</a>
Target Value Description
_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same frame as it was clicked (this is default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the window
framename Opens the linked document in a named frame
HTML Images (İmgeler)
• HTML de bir görüntü <img> etiketi (tag) ile belirtilir. İmg etiketinin
çeşitli attribute (özellikleri) bulunmaktadır. Bunlar src (dosya kaynağı),
alt (alternatif text), size (width ve height) dirler.
• Örnek
• <img src="[Link]" alt="[Link]" width="104" height=
"142">
HTML Images (İmgeler) de style kullanımının etkisi
• <!DOCTYPE html>
<html>
<head>
<style>
img { width:100%; }
</style>
</head>
<body>
<img src="[Link]" alt="HTML5
Icon" style="width:128px;height:128px">
<img src="[Link]" alt="HTML5
Icon" width="128" height="128">
</body>
</html>
HTML Images (İmgeler) link olarak kullanımı
<!DOCTYPE html>
<html>
<body>
<p>The image is a link. You can click on it.</p>
<a href="[Link]">
<img src="[Link]" alt="HTML tutorial"
style="width:42px;height:42px;border:0">
</a>
<p>
We have added "border:0" to prevent IE9 (and earlier)
from displaying a border around the image.
</p>
</body>
</html>
HTML Images (İmgeler) map olarak kullanımı
<!DOCTYPE html>
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="[Link]" alt="Planets" usemap="#planetmap"
style="width:145px;height:126px">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun"
href="[Link]">
<area shape="circle" coords="90,58,3" alt="Mercury"
href="[Link]">
<area shape="circle" coords="124,58,8" alt="Venus" [Link]
href="[Link]"> sp?filename=tryhtml_images_map
</map>
</body>
</html>
HTML Tables (Tablo yapma)
<html>
<head>
</head>
<body>
<table style="width:100%">
<tr>
<td>Elcezeri</td>
<td>Software</td>
<td>Diyarbakır</td>
</tr>
<tr>
<td>Elcezeri</td>
<td>Sibernetik</td>
<td>Siirt</td>
</tr>
</table>
</body>
</html>
Daha geniş bilgi ve tablolarda CSS kullanımı için
[Link] adresine bakınız.
Tablo alt etiketleri
• <tr> : yeni bir satır açar
• <td> : yeni bir sutun açar
• <th> : en üstte sütun etiketlerini yazmada kullanılır <td> ye benzer.
• <table style=‘width=100%’> : genişliği web sayfa kadar olan tablo
• <table border=‘1’> : çerçeve kalınlığı bir pixel olan ve ızgaraları iki çizgi halinde
görüntülenen tablo.
• <caption>tabloya bir başlık yazılacak</caption> , <table> etiketiinden sonra <tr>
den önce gelir.
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style> :ızgara ve çerçeve kalınlıkları 1 pixel olan tablo
Tablo ile ilgili örnekler
• 3x3 lük içi boş tablo (matrix) ızgara rengi yeşil, arka plan rengi siyah
olacak.
• 3x3 lük içi sayılarla dolu matrix, arka plan rengi siyah, çizgiler kırmızı,
yazılar mavi olacak.
• 3x3 lük magic number matrisi özellikler yukarıdakinin aynısı.
HTML Listeleri
• Numarasız liste: (unordered list) <ul> etiketi
ile başlar </ul> ile biter. Alt kısımdaki liste Numaralı Liste devamı:
elemanları <li> ile başlar ve </li> ile biterler. type="1"
Mesela; type="A"
<ul style="list-style-type:disc"> type="a"
<li> KNN </li> type="I"
<li> Yapay Sinir Ağları </li> type="i"
</ul>
Nitelikleri:
style="list-style-type:disc"
style="list-style-type:circle"
style="list-style-type:square"
style="list-style-type:none"
• Numaralı Liste: (ordered list) <ol>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Listeleri
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
HTML Listeleri (Nested Lists)
<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
<!DOCTYPE html> <body>
<html> <h2>Horizontal List</h2>
<head> <ul id="menu">
<style> <li><a href="/html/[Link]">HTML</a></li>
ul#menu { <li><a href="/css/[Link]">CSS</a></li>
padding: 0; <li><a href="/js/[Link]">JavaScript</a></li>
} <li><a href="/php/[Link]">PHP</a></li>
ul#menu li { </ul>
display: inline; </body>
} </html>
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
}
</style></head>
HTML Block Elements
<!DOCTYPE html>
<html>
<body>
<div style="background-color:black; color:white; padding:20px;">
<h2>London</h2>
<p>OCL or OpenCezLib stands for Open Cezeri Library (yet another matrix library).
This library provides rapid coding as matlab ease of use. If you want to know how
can use library please try to utilise test examples at
OpenCezeriLibrary\test\test.</p>
<p>It is originally developed at Siirt University El-Cezeri laboratory by Dr. Musa
Ataş, in order to establish generic framework , reusable components and software
tools for machine vision, machine learning, AI and robotic applications. Currently, it
holds following main concepts..</p>
</div>
</body>
</html>
HTML Classes (HTML Sınıfları)
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color:black;
color:#50ff50;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Ankara</h2>
<p>Ankara is the capital city of Turkey.</p>
</div>
</body>
</html>
HTML Layouts
<!DOCTYPE html><html> #footer { <div id="section">
<head> background-color:black; <h2>London</h2><p>
<style> color:white; London is the capital city of England. It is the
#header { most populous city in the United Kingdom,
clear:both;
background-color:black; with a metropolitan area of over 13 million
text-align:center; inhabitants.
color:white;
text-align:center;
padding:5px; </p><p>
padding:5px; } Standing on the River Thames, London has been
}#nav { </style> a major settlement for two millennia,
line-height:30px; </head> its history going back to its founding by the
Romans, who named it Londinium.
background-color:#eeeeee; <body>
</p></div>
height:300px; <div id="header">
width:100px;
<div id="footer">
<h1>City Gallery</h1>
float:left; Copyright © [Link]
</div>
padding:5px; </div>
<div id="nav">
} </body>
#section {
London<br>
</html>
width:350px; Paris<br>
float:left; Tokyo<br>
padding:10px; </div>
}