HTML Notları İNTERNET SİTESİ SAYFASI OLUŞTURMAK İÇİN: 1- Başlat-Programlar-Donatıları’ı seçin 2- Not defterini seçin 3- Oluşturduğunuz not defterini açın 4- “Dosya menüsü”nden “farklı kaydet” seçeneğini seçin 5- Dosyanıza isim verin. Mesela merhaba.html 6- “Kayıt türü” yazan yeri “tüm dosyalar” olarak seçin 7- Kaydedin. Masaüstünde (örnekteki isim için) merhaba.html diye bir internet sayfası oluşacaktır.
HTML KOMUT YAZIM KURALLARI 1- Sayfaya kodlamaya başlarken ilk satıra <html> komutu yazılmalıdır. Yani html komutu açılmalıdır. Sayfanın en sonunda ise </hmtl> yazılarak html komutu kapatılmalıdır. 2- Bütün komutlar “<” ve “>” işaretleri arasına yazılmalıdır. 3- Açılan her komut “/” işareti ile kapatılmak zorundadır. Ör : <html> </html> gibi 4- Komut yazarken büyük veya küçük harfle yazılması önemli değildir. Ancak komutlar yazarken İngilizce karakterler kullanılmalıdır. <TİTLE> yerine ya <title> ya da <TITLE> yazılmalıdır. 5- Bir web sayfası 2 ana bölümden oluşmaktadır: A) <HEAD> : Sayfa Başlığı, Sayfayı tasarlayan kişi burada tanımlanır. Kullanılma zorunluluğu yoktur. B) <BODY> : Sayfamızın içeriğini oluşturduğumuz kısımdır. Kullanılma zorunluluğu vardır.
KOMUTLAR 1- <HTML> </HTML> Bütün HTML dosyaları <HTML> kodu ile başlar </HTML> kodu ile biter. Yani Web sayfası ile ilgili tüm deyimler bu iki kodun arasında kalmalıdır. Web Sayfaları 2 bölümden oluşur: 1-<HEAD> </HEAD> Web sayfası ile ilgili temel özellikler, Sayfa Başlığı, Sayfayı tasarlayan kişi burada tanımlanır. Kullanılma zorunluluğu yoktur. Örneğin başlık yazmak için yapmamız gereken:
<TITLE> </TITLE> Sayfaya başlık verilecek başlık belirtilir.. Tarayıcı <TITLE> ve
</TITLE> arasında yazılan metni pencere başlığı olarak kabul eder. Bu deyimler <HEAD> </HEAD> deyimleri arasına yeralır. 2-<BODY> </BODY> Web sayfasında yer alacak asıl bilgiler HTML formatındaki dosyanın <BODY> deyimi belirlenen kısma yazılır. İşlem </BODY> deyimi ile biter. Bu iki deyim arasında herhangi bir metin web sayfasında ekranda aynen görülür. Ekrana yansımasını istediğimiz Her Türlü veriyi bu alan içerisine ekleriz ya da kodlarız. <HTML> <HEAD> <TITLE>Okulumuz </TITLE> </HEAD> <BODY> TOKİ Mehmet Akif Ersoy Ortaokulu </BODY> </HTML>
2- <BR> Bir metin yazılırken bir alt satıra geçmek için kullanılır. Bu deyim kullanılmazsa tüm yazılanlar yan yana yazılır. Yani <BR> deyimi Enter tuşunun görevini görür.
3- <P> Metin yazarken paragraf oluşturmak için kullanılır. <BR> komutuna göre satırlar arasındaki boşluk daha fazladır. 4- <CENTER> </CENTER> Bir veya daha fazla satırı sayfa içinde ortalamak için kullanılır. <HTML> <HEAD> <TITLE> Okulumuz </TITLE> </HEAD> <BODY> TOKİ Mehmet Akif Ersoy Ortaokulu Web Tasarımı<BR> <CENTER> ARDAHAN </CENTER> </BODY> 5-</HTML> <H?> </H?> Bu deyim Web sayfasında yazılacak olan metnin puntosunda (boyutunda) değişiklik yapmak için kullanılır. ? İşareti yerine 15 arası bir rakam gelir. . Sayı değeri büyüdükçe punto küçülür.Örneğin,<H1> büyük puntolu yazı yazmak için kullanılır</H1> ile bitirilir. <HTML> <HEAD> <TITLE>Web Sayfam</TITLE> </HEAD> <BODY> <h1> H1 ile yazılmış yazı</h1> <h2> H2 ile yazılmış yazı</h2> <h5> H5 ile yazılmış yazı</h5> </BODY> </HTML>
1
6- <FONT> </FONT>: Yazdığımız yazının font tipini, rengini ve font büyüklüğünü ayarlamak için kullanılır. Kullanımı şu şekildedir:
<FONT SIZE=”sayı” COLOR=”renk” FACE=”yazı tipi”> </FONT> SIZE: Yazı büyüklüğünü (12,14 gibi) FACE: Yazı tipini (Arial,Thoma gibi) COLOR: Yazının Rengi (Red,Blue gibi)
<FONT SIZE=”16” COLOR=”yellow” FACE=”arial”> ARDAHAN</FONT> Font komutu ile birlikte aşağıdaki etiketleri kullanarak sayfanızdaki metinleri biçimlendirebilirsiniz. <b>..</b>
Kalın yazı yazdırır.
8- KAYAN YAZI YAZMA
<marquee direction=”kayma yönü”>Kayacak Yazı</marquee> Direction= Yazımızın kayma yönünü belirler. UP(yukarı), DOWN (aşağı) LEFT (sol) ve RIGHT (sağ) olarak 4 değer alır. Örneğin;
<marquee direction=”right>Bilişim Teknolojilei </marquee>
SAYFAYA RESİM EKLEME <IMG> </IMG> : Resim eklemek için kullanılır. Kullanım şekli şu şekildedir: <img src="resim dosyanızın adı" border="çerçeve kalınlığı" alt=”açıklama”>
<i>..</i> İtalik(eğik) yazı yazdırır.
Parametreler:
<u>..</u>
ALT: Resme açıklama vermemizi sağlar. Fareyi resmin üstüne getirdiğimizde, alt değişkeninde yazılan açıklama ekranda çıkar.
Altı çizili yazı yazdırır.
NOT: Bu 3 komut yanyana kullanılabilir. Örneğin bir yazıyı hem kalın hem de eğik yazdırmak için; <b> <i> Bilişim Teknolojileri </b> </i>
Not: Metin biçimlendirirken başladığınız etiketi kapatmayı unutmayın. !!! 7- SAYFADA BAĞLANTI OLUŞTURMA <A> </A> : HTML'nin temeli olan bu komutlarla bağlantı (link) yapılır. <a href="hedef bağlantı"> Bağlantı yapılacak metin </a> Biçiminde kullanılır. <HTML> <HEAD> <TITLE>WebSayfam</TITLE> </HEAD> <BODY> <a href=”http://www.google.com”>Google için tıkla</a> <br> <a href=”http://ardahanmehmetakifersoyortaokulu.meb.k12.tr” target”blank”>Okulumuz için tıkla </a> </BODY> </HTML>
SRC: Resim dosyasının kaynağını belirtir. BORDER: Görünecek resmin çerçeve kalınlığını belirler. Örneğin: <img src="resim.jpg" border="1" alt=”tıkla”> DİKKAT!!!: Web sayfalarınıza eklediğiniz resimler ile kaydettiğimiz html dosyamız aynı klasör içinde bulunmalıdır.
SAYFAYA TABLO EKLEME <TABLE> </TABLE> : Tablo oluşturmak için kullanılır. <table> etiketinden sonra daima <tr> gelir. Her satır tanımlandığında <tr>, her hücre tanımlandığında da <td> etiketi
kullanılır. <TABLE border="1" width="200" height="400" align="left"> </TABLE>
Tablo Parametreleri: Border : Çerçevenin kalınlığını belirler. border="0" dersek tabloda çerçeve bulunmaz, bu miktarı arttırdıkça çerçevenin kalınlığı da artar. Align : Hücredeki elemanın yatay konumunu belirler ve "right, left, center" opsiyonları ile kullanılır. 2
Width: Tablonun genişlik değerini belirler. Height: Tablonun yükseklik değerini belirler. Tablo oluşturmak için kullanılır. <table> etiketinden sonra daima <tr> gelir. Her satır tanımlandığında <tr>, her hücre tanımlandığında da <td> etiketi kullanılır. ÖRNEK: <table border=“2“> <tr>
<td> 1.hücre </td> <td> 2. hücre </td>
</tr> <tr>
<td> 3. hücre </td> <td> 4. hücre </td>
</tr> </table> Yukarıdaki kodlar tamamlandığında aşağıdaki gibi bir tablo oluşacaktır… 1. hücre 2. hücre 3. hücre 4. hücre
Colspan : Sütunları birleştirmek için kullanılır. Rowspan: Satırları birleştirmek için kullanılır.
HTML’de Müzik Ekleme Html sayfamız açıldığı zaman arka planda otomatik olarak müzik çaldırmak için <body> </body> etiketlerinin arasında herhangi bir yere aşağıdaki komutu yazmamız yeterlidir. <embed src=”müzikdosyası.mp3″ hidden=”true” autostart=”true” loop=”true”> src= Müzik dosyasının yolunu belirttiğimiz bölüm. autostart= Html sayfamız yüklendiği zaman müziğin otomatik olarak çalmasını sağladığımız bölüm. Değeri true olursa müzik otomatik olarak başlayacaktır. loop= Müziğin kaç kere çalacağını belirteceğimiz bölüm. True veya -1 değerini yazarsak sayfamız açık kaldığı sürece müzik sürekli çalacaktır. False değerini yazarsak müzik dosyası bir kere çalacaktır.
HTML’de Video Ekleme <embed src="videoadı.wmv" width=" " height=" " autostart="true yada false"></embed> embed src ile video dosyamızın yolunu belirtiyoruz. Width ve height bölümünde eklediğimiz videonun genişlik ve yükseklik değerlerini belirliyoruz. Autostart bölümünde ise videonun web sitemiz açıldığında başlayacağını veya kapalı bir şekilde geleceğini belirleyebiliriz. Eğer autostart bölümüne true değerini yazarsak web sitemize girildiğinde video kendiliğinden başlayacaktır.False değerini yazarsak video kapalı bir şekilde karşımıza gelecektir. Ses-Video Örneği <embed src="sarki.mp3" hidden="true" autostart="true" loop="true"> <embed src="Game.wmv" width="800" height="600 " autostart="false"></embed> 3
EKSTRA
4