HTML Örnekler
ETİKET ve KULLANIMI ETİKETİN ÇALIŞMASI
BAŞLIK ETİKETLERİ:

Hx, x: 1-6, sayı büyüdükçe yazı küçülür. Başlık etiketleri hizalama parametreleri ile kullanılabilir (örneğin: align)

<h1>Web Tasarımının Temelleri - Dersteki Örnekler</h1>
<h2>Web Tasarımının Temelleri - Dersteki Örnekler</h2>
<h3>Web Tasarımının Temelleri - Dersteki Örnekler</h3>
<h4>Web Tasarımının Temelleri - Dersteki Örnekler</h4>
<h5>Web Tasarımının Temelleri - Dersteki Örnekler</h5>
<h6>Web Tasarımının Temelleri - Dersteki Örnekler</h6>

Web Tasarımının Temelleri - Dersteki Örnekler

Web Tasarımının Temelleri - Dersteki Örnekler

Web Tasarımının Temelleri - Dersteki Örnekler

Web Tasarımının Temelleri - Dersteki Örnekler

Web Tasarımının Temelleri - Dersteki Örnekler
Web Tasarımının Temelleri - Dersteki Örnekler
LİSTELEME ETİKETLERİ: 1-SIRALI LİSTE

Ordered List (ol) - sıralı liste
type: A,a,I,i,1
start: default olarak zaten 1
List Item (li) - maddeleme için kullanılır

Bilgisayar Bölüm Dersleri:
<ol type="A" start="5">
<li>Tasarım
<ol type="1">
<li>Grafik Tasarım
<li>Web Tasarım
<li>Mobil
</ol>
<li>Ağ Temelleri
<li>Sunucu Sistemleri
<li>Açık Kaynak İşletim Sistemleri
</ol>

 

Bilgisayar Bölüm Dersleri:
  1. Tasarım
    1. Grafik Tasarım
    2. Web Tasarım
    3. Mobil
  2. Ağ Temelleri
  3. Sunucu Sistemleri
  4. Açık Kaynak İşletim Sistemleri
LİSTELEME ETİKETLERİ: 2-SIRASIZ LİSTE

Unordered List (ul) - sırasız liste
type:
1- circle=çember
2- disc=daire
3- square=kare -->

Elektronik Bölüm Dersleri:
<ul type="square">
<li>Temel Elektronik
<li>Devre Dersleri
<ol type="a">
<li>Alternatif Akım Devreleri
<li>Doğru Akım Devreleri
<li>Lojik Devreler
</ol>
<li>Güç Elektroniği
<li>Sayısal Analiz
</ul>
</p>

 

Elektronik Bölüm Dersleri:
  • Temel Elektronik
  • Devre Dersleri
    1. Alternatif Akım Devreleri
    2. Doğru Akım Devreleri
    3. Lojik Devreler
  • Güç Elektroniği
  • Sayısal Analiz

METİN DÜZENLEME ETİKETLERİ-1

B veya STRONG etiketi bold (koyu yazar)
Yazının bu kısmı <b>koyu(bold)</b> görünecek.

U etiketi underline (altı çizili) yazmaya yarar
<u>Altı çizili yazı</u> için u etiketi kullanırız.

I etiketi italic (eğik) yazmaya yarar
Yazıda <i>eğik kısım</i> böyle görünür.

DEL etiketi ile üstü çizili yazılır
<del>üstü çizili yazı örneği</del>

abbr ile istenen ifadeye açıklama yazılabilir
<abbr title="Bir tek dileğim var mutlu ol yeter">İbrahim Tatlıses</abbr>

paragraf için p etiketi kullanılabilir
<p>bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf.
</p>

address etiketi ile adres tanımlanır
<address>Şehitler mah. xyz cad. No:45 turgutlu - manisa</address>

pre etiketi ile yazılan boşluklar dikakte alınır
<pre>ali veli can 1 3 5</pre>

<del><i>Web <b>tasarımının</b> temelleri</i></del><br>

üst karakter için SUP, alt karakter için SUB etiketi
Suyun formülü H<sub>2</sub>O <br>
Formül: x<sup>2</sup>+y<sup>3</sup>

hr etiketi düz çizgi için kullanılır <hr>

Yazının bu kısmı koyu(bold) görünecek.
Altı çizili yazı için u etiketi kullanırız.
Yazıda eğik kısım böyle görünür.
üstü çizili yazı örneği
İbrahim Tatlıses

bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf. bu kısım paragraf.

Şehitler mah. xyz cad. No:45 turgutlu - manisa
ali       veli             can  1   3       5
Web tasarımının temelleri
Suyun formülü H2O
Formül: x2+y3
METİN DÜZENLEME ETİKETLERİ-2

font : face, size ve color

aqua=buz mavisi, fuchsia=fuşya, maroon=bordo, teal=turkuaz,
silver=gümüş, navy=lacivert, lime=cırtlak yeşil
olive=zeytin yeşili, purple=mor

<font face="Tahoma" size="3" color="#eda145">Turgutlu meslek yüksekokulu</font>

<font size="6" color="fuchsia">Manisa Celal Bayar Üniversitesi</font>


Turgutlu meslek yüksekokulu
Manisa Celal Bayar Üniversitesi
TABLO ETİKETLERİ-1

Table etiketi ile tablo oluşturulur.
TR: satır oluşturulur
TD: sütun oluşturulur
border: çerçeve kalınlığı - table içine....
cellspacing: tablo kenarları ve hücreler arası boşluk - table içine...
cellpadding: hücre içeriği ile hücre kenarları arasındaki boşluk

width: genişlik
height: yükseklik
colspan:aynı satırdaki sütunları birleştirir - td içine yazılır
rowspan: aynı sütundaki hücreleri birleştirir - td içine yazılır

<table border="1">
<tr>
<td width="200" bgcolor="red">elma</td>
<td bgcolor="orange">portakal</td>
<td height="150">armut</td>
</tr>

<tr>
<td bgcolor="green">karpuz</td>
<td height="125">üzüm</td>
<td bgcolor="orange">mandalina</td>
</tr>

</table>

 

 

elma portakal armut
karpuz üzüm mandalina
TABLO ETİKETLERİ-2

<table border="1" cellpadding="10" cellspacing="20">
<tr>
<td colspan="2"> Elektronik - Bilgisayar</td>
<td bgcolor="yellow"> Makine</td>
</tr>

<tr>
<td>Devre Analizi</td>
<td rowspan="2">Grafik Animasyon</td>
<td>Statik</td>
</tr>

<tr>
<td bgcolor="blue">Lojik Devreler</td>
<td>AutoCat</td>
</tr>
</table>

Elektronik - Bilgisayar Makine
Devre Analizi Grafik Animasyon Statik
Lojik Devreler AutoCat
TABLO ETİKETLERİ-3

thead: tabloya başlık
th: yazıları başlık gibi gösterebiliriz
caption: tabloya açıklama

<table border="1">
<thead>Ders Dağılımları</thead>
<caption align="bottom">Tablo 1.1 Bölümlere Göre Ders Dağılımları</caption>

<tr>
<th>Elektronik</th>
<th>Bilgisayar</th>
<th>Makine</th>
<th>El Sanatları</th>
</tr>

<tbody>
<tr>
<td>Devre Analizi</td>
<td>Ağ Temelleri</td>
<td>AutoCat</td>
<td>Geleneksel El Sanatları</td>
</tr>

<tr>
<td>Lojik Devreler</td>
<td>Veritabanı</td>
<td>Statik</td>
<td>Minyatür</td>
</tr>
</tbody>
</table>

Ders Dağılımları
Tablo 1.1 Bölümlere Göre Ders Dağılımları
Elektronik Bilgisayar Makine El Sanatları
Devre Analizi Ağ Temelleri AutoCat Geleneksel El Sanatları
Lojik Devreler Veritabanı Statik Minyatür
FORM ETİKETLERİ-1

form etiketi: form oluşturmak için kullanılır
action: değer link - formun değerlendirileceği sayfa
method: post-get get ile girilen değerler sayfaya eklenip gönderiliyor
post ile girilen direkt yönlendiriliyor

input ile giriş yapılıyor - radio buton, checkbox, text, şifre, mesaj
size: (text/password) karakter sayısı
maxlength: (text/password) maksimum karakter sayısı
checked: seçimin işaretli gelmesi/gelmemesi (ON/OFF)


<input type="button" value="Amaçsız Buton">
<input type="submit" value="Gönder">
<input type="reset" value="Temizle">

FORM ETİKETLERİ-2

<form action="www.a.com" method="post">

ADI: <input type="text" name="username" size="10"> <br>
SOYADI: <input type="text" name="lastname"> <br>
Kardeş Sayısı: <input type="number" min="0" name="kardes"> <br>
ŞİFRE: <input type="password" name="pass" maxlength="8"> <br><br><br>

Aldığınız Dersler:
<br> <input type="checkbox" name="kutu1" checked="on"> Grafik <br>
<input type="checkbox" name="kutu2">Sunucu <br>
<input type="checkbox" name="kutu3">Veritabanı<br><br><br>

Cinsiyetiniz:<br>
<input type="radio" name="kutu" value="1">Erkek <br>
<input type="radio" name="kutu" value="2" checked="on">Kız <br><br><br>
<!-- radio'da name aynı value farklı -->

Bize Yazın: <br> <textarea name="mesaj" rows="10" cols="15">Mesajınız...
</textarea> <br><br><br>
<!-- row: satır - col: sütun -->

<select>
<option>Aylar</option>
<option>Ocak</option>
<option>Şubat</option>
<option>...</option>
<option>Aralık</option>
</select>
<br><br><br>

<select name="menu" multiple size="10">
<option selected="" value="none">Hiçbiri</option>

<optgroup label="Çorbalar">
<option value="c1">Tarhana</option>
<option value="c2">Kremalı Mantar</option>
<option value="c3">İşkembe</option>
</optgroup>

<optgroup label="Yemekler">
<option value="y1">Kuru fasulye</option>
<option value="y2">Tavuk sote</option>
<option value="y3">Musakka</option>
</optgroup>
</select></form>

ADI:
SOYADI:
Kardeş Sayısı:
ŞİFRE:


Aldığınız Dersler:
Grafik
Sunucu
Veritabanı


Cinsiyetiniz:
Erkek
Kız


Bize Yazın:






FORM ETİKETLERİ-3

<table border="1">
<tbody>
<tr><td> <fieldset> <legend>Kişisel Bilgiler</legend>

<table>
<tr><td>Ad Soyad</td><td><input type="text"></td></tr>
<tr><td>Doğum Tarihi</td><td><input type="text"></td></tr>
</table> </fieldset> </td>

<td> <fieldset>
<legend>Mesaj Alanı</legend>
<textarea name="mesaj" rows="10" cols="15">Mesajınız...
</textarea> </fieldset> </td>
</tr>
</tbody>
</table>

Kişisel Bilgiler
Ad Soyad
Doğum Tarihi
Mesaj Alanı
LİNK ETİKETLERİ-1-SAYFA İÇİ BAĞLANTI

<a href="#1">Temel Kavramlar</a>
<a href="#2">Başlık Etiketleri</a>
<a href="#3">Listeleme Etiketleri</a>

---------------------

<a name="1">-----Temel Kavramlar-----</a>
<a name="2">-----Başlık Etiketleri-----</a>
<a name="3">----- Listeleme Etiketleri -----</a>

 

Temel Kavramlar
Başlık Etiketleri
Listeleme Etiketleri

-----Temel Kavramlar-----
-----Başlık Etiketleri-----
----- Listeleme Etiketleri -----
LİNK ETİKETLERİ-2-SAYFA DIŞI BAĞLANTI

target= "_blank" - yeni bir pencerede
"_self" - aynı pencerede"
"_top" - aynı pencerede en üstten itibaren
"frame-adı" - istenen framede açılır

Ders Notları İçin <a href="http://www.aliosmangokcan.com" target="_blank"> TIKLAYIN</a>

Ders Notları İçin TIKLAYIN
LİNK ETİKETLERİ-3-MAIL ADRESİNE BAĞLANTI

mail için mailto ifadesi kullanılır
mail göndermek için <a href="mailto:mail@aliosmangokcan.com"> TIKLAYIN</a>

mail göndermek için TIKLAYIN
MEDYA ETİKETLERİ:

RESİM EKLEME:

<img src="logo.jpg" width="440" height="100" border="2" title="Turgutlu Meslek Yüksek Okulu">

MÜZİK EKLEME:

<bgsound src="a.midi" loop="3">

VİDEO EKLEME

<img dynsrc="video.avi" src="ikon.jpeg" loop="infinite" width="100" height="90">

KAYAN YAZI ETİKETLERİ
<marquee>Standart kayan yazı</marquee> Standart kayan yazı
<marquee bgcolor="yellow">Sarı şeritte kayan yazı</marquee> Sarı şeritte kayan yazı
<marquee bgcolor="blue" width="400">400px mavi şeritte kayan yazı</marquee> 400px mavi şeritte kayan yazı
<marquee behavior="alternate" bgcolor="gray" scrollamount="112">
Sağa sola çarpan kayan yazı</marquee>
Sağa sola çarpan kayan yazı
<marquee direction="right" bgcolor="#a1b2c3">Sağa doğru kayan yazı</marquee> Sağa doğru kayan yazı
<marquee direction="up" height="100" width="440" bgcolor="#faa357">
Yukarı doğru kayan yazı</marquee>
Yukarı doğru kayan yazı
HEAD İÇİNE YAZILAN ETİKETLER

<title>Buraya sitenin başlığı gelir</title>

<meta name="author" content="Ali Osman">
<!--yukarıda sitenin yazarını tanımladık -->

<meta name="copyright" content="&copy; 2019 Ali Osman">
<!-- Sitenin telif haklarını tanımladık -->

<meta name="description" content="Ali Osman Gökcan Kişisel Web Sitesi">

<meta name="keywords" content="Ali Osman, Ali Osman Hoca, Ali Osman Gökcan, Öğr.Gör.Ali Osman, Celal Bayar Ali Osman Hoca, MCBÜ Ali Osman Gökcan">
<!-- keywords ile sitenin anahtar kelimeleri belirlendi -->

<meta http-equiv="content-type" content="text/html";
charset="utf-8">
<!--Yukarıda yazdığımız kod sayfamı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="refresh" content="1111; URL=http://www.aliosmangokcan.com">
<!-- Refresh ile sayfamız açıldıktan 1111 saniye sonra belirtilen adresi otomatik olarak açacaktır. -->

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 parametreler aşağıdaki soldaki kısımda açıklamalarıyla birlikte verilmiştir.
© 2019 Öğr.Gör.Ali Osman GÖKCAN