HTML'DE KULLANILAN ETİKETLER VE KULLANILIŞ ŞEKİLLERİ
Başlık Etiketleri - h1,h2,h3,h4,h5,h6
h1 - h2 - h3 - h4 - h5 - h6 etiketleri ile yazıya başlık yazılır. Bu yazının başlığı da h1 etiketi ile yazılmıştır.
paragraf etiketi - p
p etiketi sayfaya yazı eklememizi sağlar.
P etiketi block seviyesinde bir etikettir. Bu yüzden yazılan yazılar yan yana değil, alt alta gelir.
pre etiketi
pre etiketi de, p etiketi gibi sayfaya yazı eklemeyi sağlar. İki etiketin arasındaki fark, p etiketinde
ne kadar tab ile ya da başka bir şekilde yazının yeri değişirse değişsin, yazı en baştan başlar.
Ancak pre etiketini kullandığımızda yazının sayfa içindeki konumunu değiştirebiliriz.
Örneğin bu yazı pre etiketi içinde yazılmıştır.
strong ve em etiketleri
Herhangi bir yazı içinde, bir yerin kalın veya eğik(italik) yazılmasını istiyorsak, bu etiketleri kullanırız. Bir yazı içinde hem eğik hem de kalın yazı kullanmak istiyorsak, etiketleri içiçe kullanmamız gerekir.
br etiketi
Bir yazıda
bir alt satıra geçmek için
br etiketi kullanılır.
html dosyası içinde boşluk burakmak
Html dosyası içinde kodlama yaparken space tuşu ile boşluk bıraktığımızda ya da enter tuşu ile aşağı indiğimizde, yaptığımız işlemler sayfaya bu şekilde yansımaz.
Sayfada bir alt satıra geçmek için br etiketini kullanmamız gerekirken;
boşluk bırakabilmemiz için de shift+6 ile yapılan & ve nbsp; yazmamız gerekir. Kaç tane boşluk bırakmak istiyorsak o kadar & + nbsp; yazmamız gerekir.
Sayfaya Resim Eklemek - img etiketi
Bir sayfaya ya da bir yazıya resim eklemek için img etiketi kullanılır. img src="dosyanın bulunduğu klasör/resim.jpg" şeklinde yazılarak kullanılır. Bu etiket kullanılrken yanında başka ek parametreler de kullanılabilir. Bunlar:
- width etiketi --> resmin genişligini belirlemek için kullanılır. witdh="400" gibi
- height etiketi --> resmin yüksekliğini belirlemek için kullanılır. height="300" gibi
- align etiketi --> resmin sağa ya da sola yaslanmasını, ya da ortada olmasını belirlemek için kullanılır. align="left" align="center" align="bottom" gibi
- border etiketi --> resmin çevresinde bir çerçeve eklemek için kullanılır. Değeri pixel olarak verilebilir. border="2" gibi
- alt etiketi --> sayfaya eklediğimiz resim eğer sayfada görünmezse, kullanıcıya burada resim olduğunu bildirmek için kullanılır. alt="burada bir x resmi var" gibi
- title etiketi -> mouse ile resim üzerinde gelindiğinde görünecek olan yazıyı bu parametre ile belirleriz. title="x resmi" gibi
Resimleri img etiketi ile eklersek her resim yan yana gelecektir.
Not:Resimleri alt alta eklemek istersek img etiketini "figure" etiketinin içinde kullanmamız gerekir. figure etiketini açarak içine img src="x resmi.jpg" şeklinde yazabiliriz. Resmin altına bir isim ya da açıklama yazmak istersek, onu da figcaption etiketi ile yazabiliriz.
Liste etiketleri
Liste etiketleri sayfaya yazıları liste şeklinde eklememizi sağlar. Listeler sıralı ya da sırasız şekilde olabilir.
Sırasız Liste
- Sırasız liste yapmak istersek ul (unorderedlist-sırasız liste) etiketini açmamız gerekir.
- Açtığımız ul etiketinin içine de li etiketi ile yazılarımızı ekleyebiliriz.
- Açtığımız listenin ikonlarını da istediğimiz şekilde değiştirebiliriz.
- Liste ikonlarını type="disc" type="circle" ya da type="square" olarak değiştirebiliriz.
Sıralı Liste
- Sıralı liste yapmak istersek ol (orderedlist- sıralı liste) etiketini açmamız gerekir.
- Sırasız listelerde olduğu gibi, sıralı listelerde de yazılarımı li etiketinin içinde yazarız.
- Sıralı listenin sırasının nereden başlayacağını da biz belirleyebiliriz.
- Bunun için yapmamız gereken, start="kaçtan başlamak istiyorsak" şeklinde bir parametre eklemek.
- Örneğin; start="5" dersek, sıralı listenin ilk başındaki sıra 5 olacaktır.
Link Verme
-
Bir web sitesine link verme
Bir web sitesine link vermek istersek, a etiketini kullanmamız gerekir.
a etiketinin içinde href="http://siteninadresi" şeklinde sayfalara link verebiliriz. Örneğin; Google.com a link vermek istersek yapmamız gereken;
Google.com
Eğer sayfayı yeni bir sekmede açmak istersek a etiketinin içinde target="_blank" parametresini kullanmamız gerekir.
Google.com
Burada önemli olan nokta, verdiğimiz linki yazarken http:// protokolünü (ya da başka bir protokolü ftp vs.)mutlaka yazmak gerekir. -
Bir web sayfasına link verme
Bir web sayfasına link vermek için yine a etiketini kullanırız. a href="index.html" şeklinde link verebiliriz. Örneğin;
Üye Kayıt Sayfası İçin Tıklayınız. -
Bir dosyaya link verme
Bir dosyaya link vermek istersek yine a etiketini kullanırız.
a href="dosya.rar" etiketi ile dosyaya link verebiliriz.Örneğin;
Oğuz Atay Kitaplarındaki Karakterlerin Analizi -
Mail linki verme
Bir mail adresine link vermek istiyorsak a etiketinin içinde "mailto:" parametresini kullanırız.
a href="mailto:ceo@google.com" şeklinde mail adresine link verebiliriz. Bu linke tıklandığında, eğer kullanıcının bilgisayarında yüklü bir mail programı var ise, (outlook gibi), kullanıcıyı direkt olarak oraya yönlendirir.Örneğin; Bana buradan ulaşabilirsiniz. -
Resimlere Link Verme
Bir resime link vermek istersek a etikini kullanmamız gerekir.
a href="img/resim.jpg" şeklinde link verebiliriz.Örneğin;
Türkiye Normalleşti -
Sayfa içinde başka bir yere link verme
Bunun için a etiketinini # parametresi ile beraber kullanırız. Bunu kullanabilmemiz için gitmek istediğimiz sayfaya bir id belirtmemiz gerekir.
Örneğin; sayfanın üstündeki liste etiketinin anlatıldığı sayfaya bir id atayalım.
id="liste" olsun. Daha sonra a href="#liste" diyerek bu sayfaya link vermiş olalım.
Liste etiketinin anlatıldığı yere gider
Tablo Oluşturma Etiketleri
Html ile tablo oluştururken ilk olarak table etiketini açmamız gerekir. Daha sonra da tr ve td etiketlerini kullanırız. tr etiketleri satırları belirlerken, td etiketleri ile de satır içinde yer alan öğeleri yazarız. Eğer ilk kullandığımız tr etiketinin içindeki td etiketlerinin yerine th etiketi kullanırsak, burada yazdığımız yazılar kalın yazılmış olur. (başlık olarak kullanılabilir.)
Örneğin;
| A Grubu | B Grubu | C Grubu | D Grubu |
|---|---|---|---|
| Almanya | Fransa | İngiltere | Japonya |
| İspanya | Portekiz | Arjantin | Uruguay |
| Belçika | İsveç | Brezilya | İtalya |
| Hollanda | Danimarka | Türkiye | Kolombiya |
Eğer yazıların tablo halini almasısı istersek border parametresini kullanmamız gerekir. table etiketinin içinde border="x" ve align parametresini kullanarak yazıları tablo haline getirebiliriz.
| A Grubu | B Grubu | C Grubu | D Grubu |
|---|---|---|---|
| Almanya | Fransa | İngiltere | Japonya |
| İspanya | Portekiz | Arjantin | Uruguay |
| Belçika | İsveç | Brezilya | İtalya |
| Hollanda | Danimarka | Türkiye | Kolombiya |
Ayrıca tablo içindeki boşlukları ayarlamak istersek, bunları da cellpadding ve cellspacing parametreleri ile yapabiliriz.Örneğin;
| A Grubu | B Grubu | C Grubu | D Grubu |
|---|---|---|---|
| Almanya | Fransa | İngiltere | Japonya |
| İspanya | Portekiz | Arjantin | Uruguay |
| Belçika | İsveç | Brezilya | İtalya |
| Hollanda | Danimarka | Türkiye | Kolombiya |
| A Grubu | B Grubu | C Grubu | D Grubu |
|---|---|---|---|
| Almanya | Fransa | İngiltere | Japonya |
| İspanya | Portekiz | Arjantin | Uruguay |
| Belçika | İsveç | Brezilya | İtalya |
| Hollanda | Danimarka | Türkiye | Kolombiya |
Sayfaya Flash dosyası ekleme
Sayfaya flash dosyasını ekleyebilmek için embed etiketini kullanırız.
embed src="flashdosyası.swf" yazarak sayfaya flash dosyasını ekleyebiliriz.Örneğin;
Sayfayı başka bir sayfaya yönlendirme - iframe etiketi
Bu etiketi kullanarak başka bir web sayfasını ya da başka bir web sitesini sayfamıza yönlendirebiliriz. Böylece bizim sayfamızı açan kullanıcı, bizim yönlendirdiğimiz siteye ya da web sayfasına ulaşmış olur.
iframe src="sayfa.html" veye iframe sec="http://site" şeklinde sayfayı yönlendirebiliriz.
iframe etiketinin yanında width ve height parametreleri ile sayfanın genişlik ve yükseklik ölçülerini de belirleyebiliriz.Ayrıca frameborder parametresi ile de, sayfanın kenarlık ölçüsünün olup olmayacağını belirleyebiliriz.
Form Etiketi
Web sayfasında bir form oluştururken kullanmamız gereken etikettir.
form etiketi tek başına bir anlam ifade etmez. İçinde parametreler kullanmamaız gerekir.
Bu parametrelerden bazıları şunlardır;
- type: bu parametre ile girilecek girdinin tipi belirlenir. Yazı girilecekse type="text", şifre girilecekse type="password" vs. şeklinde belirlenir.
- text: Girdiye bir yazı girilecekse text parametresi kullanılır. type="text" şeklinde kullanılır.
- password: Eğer giriş yapılacak girdi şifre olacaksa password kullanılır. type="password" şeklinde kullanılır.
- checkbox: eğer işaret kutusu şeklinde bir girdi alınacaksa bu parametre kullanılır. type="checkbox" olarak kullanılır.
- radio: eğer yalnızca bir seçime izin veren bir girdi isteniyorsa radio parametresi kullanılır. type="radio" şeklinde kullanılır. radio kullanılırken dikkat edilmesi gereken nokta; girilen bütün girdilerin name değerlerinin aynı olması gerekir.
- submit: Gönder butonu şeklinde bir girdi parametresi yapılacaksa submit kullanılır. type="submit" şeklinde kullanılır.
- reset: Temizle botunu gibi bir parametre için kullanılması gereken parametredir. type="reset" şeklinde kullanılır.
- name parametresi: formun adını bu parametrede kaydederiz. name="isim" şeklinde kullanılır.
- id parametresi: forma bir id vereceksek bu parametreyi kullanırız. id="id-ismi" şeklinde kullanılır.
- method parametresi: form ile alınan bilgilerin bilgi sistemine gönderilmesinde kullanılan parametredir. method olarak "get" ya da "post" kullanılır. method="get" i kullandığımızda girilen bilgiler url kısmında aktif bir şekilde görünürken, method="post" u kullanırsak bu bilgiler adres çubuğunda görünmeyecektir.
- action parametresi: formdaki bilgileri bir veri deposuna göndereceksek bu parametreyi kullanmamız gerekir. Örneğin: action"gonder.asp" gibi.
Girdi Tipleri
input etiketi
Bir forma veri girişi yaparken kullanmamız gereken etikettir. Bu etiket de form etiketi gibi birkaç parametre ile kullanılır. Bu parametreler şunlardır;
- type: girdinin tipinin belirlendiği yerdir. type="text" gibi
- name: girdinin adının yazıldığı yerdir. name="ad" gibi
- id: girdinin id'sinin yazıldığı yerdir. id="ad" gibi. Not: name ismi ile id isminin aynı olmasında bir sorun yoktur.
- value: girdinin aktif değeridir. Başka bir deyişle girdi sayfası açıldığında o kutucuk üstünde kendiliğinden yer alacak değerdir. value="Emre" gibi
- placeholder: girdinin pasif değeridir. Yani sayfa acıldığında girdi yerinde yer alacak silik yazıdır. placeholder="Adınızı giriniz." gibi
- maxlength: girdinin alabileceği maksimum değerdir. maxlength="10" gibi.
- disabled parametresi:Girdi yerindeki kutucuğa giriş yapmayı engelleyen parametredir. disabled="disabled" şeklinde kullanılır.
- checked parametresi: Girdi yeri eğer bir checkbox alanı ise ve sayfayı açtığımızda o alanın seçili bir şekilde gelmesini istiyorsak bu parametreyi kullanırız. checked="checked" şeklinde kullanılır.
label etiketi
form içindeki girdi sayfalarından önce bir başlık ya da bir yazı yazmak istiyorsak label etiketini kullanmalıyız.Örneğin;
textarea etiketi
Sayfa içinde bir yazı alanı oluşturulmasını sağlar.Bu etiket ile kullanılan parametrelerin bazıları şunlardır;
- name: yazı alanının adını oluşturur. name="mesaj" gibi
- id: yazı alanına bir id atanacaksa bu yazılır. id="mesaj" gibi
- colomns ve rows: yazı alanının satır ve sütun genişliklerini ayarlar. colomns="10" rows="5" gibi
Dosya seçme alanı yapma
Dosya seçme alanı yaparken type olarak file parametresini kullanırız.input type="file" şeklinde kullanılır.Örneğin;
select etiketi - Açılır Menü Yapma
Açılır menü yaparken select etiketini kullanırız. select etiketinin içine option etiketleri açarak seçenekleri burada belirleriz.Örneğin;
Select etiketini uygularken kullanılan parametreler vardır. Bunlardan bazıları;
- selected: selected parametresini kullandığımızda sayfa ilk açıldığında biz o seçeneği seçili olarak görürüz. Örneğin biz istanbul seçeneğinin seçili olarak gelmesini istiyorsak option etiketinin içinde selected="selected" yazmalıyız.
- disabled: seçeneklerden birisinin seçilmesine izin vermek istemiyorsal disabled parametresini kullanırız. Örneğin; Samsun seçeneğinin kullanıcı tarafından seçilmesini istemiyorsal, option etiketinin içine disabled="disabled" yazmalıyız. ya da
Açılır menüdeki seçenekleri gruplandırmak - optgroup etiketi
Açılır menü içindeki seçenekleri gruplamak için optgroup etiketini kullanmamız gerekir.Bunun için her grubu ayrı bir isim ile isimlendirmemiz gerekir.
Örneğin; optgroup label="matematik" gibi.
Oluşturulan Formu Bölümlere Ayırma - fieldset ve legend etiketleri
Oluşturduğumuz formun içindeki yazıları bölümlendirme yaparak parçalara ayırabiliriz. Bunun için fieldset ve legend etiketlerini kullanırız. fieldset etiketi yazının içinde bulunduğu parçayı safyada görünüm olarak bölmeye yarar. legend etiketi de bölünen parçaların üzerlerindeki başlıkları yazmayı sağlar. Burada legend etiketi bir nevi label etiketi görevi görür.Örneğin;
Sayfaya takvim ekleme
Web sayfasına takvim eklemek için date type parametresini kullanırız. input type="date" diyerek sayfamıza takvim ekleyebiliriz.Örneğin;
Not:Bu eklenti google chrome tarayıcı ile çalışır ancak, diğer tarayıcılar ile uyumlu olmayabilir.
Sayfaya renk kodunun rengini yazdırma
Renk kodu yazılan bir rengin sayfada görünmesini istiyorsak color parametresini kullanırız. input type="color" diyerek girdinin tipini belirleriz. value="ffffff" vs. şeklinde rengin kodunu yazarak da, o rengin ekranda görüntülenmesini sağlarız. Örneğin;
Sayfaya mail adresi ekleme
Sayfaya mail adresi için girdi yeri eklemek istersek email parametresini kullanmamız gerekir. Bu girdi yerinin diğer girdi yerlerinden farkı, mail adresi girilmeyince(abc@d.com gibi) uyarı vermesidir. input type="mail" name="email" diyerek sayfaya mail girdi yeri eklemiş oluruz.Örneğin;
Sayfaya arama alanı ekleme
Sayfaya arama alanı eklemek için search parametresini kullanırız. Kutucuğun içine yazı yazmaba başlayınca kutucuğun yanında bir çarpı işareti çıkmasını sağlar. input type="search" name="search" şeklinde kullanmamız gerekir. Örneğin;
Not: Bu eklenti google chrome tarayıcısı ile çalışır, diğer tarayıcılar ile uyumlu olmayabilir.
Sayfaya url alanı eklemek
Bu parametrenin çalışma mantığı da email parametresi ile aynıdır. Girilen girdilerin yalnızca url şeklinde yazılmasına izin verir. başında http:// şeklinde bir protokol olması gerekir. input type="url" şeklinde kullanılır.Örneğin;
Sayfaya sayı butonu ekleme
Sayfaya başlangıç ve bitiş değerleri belli olan bir sayı butonu eklemek için number parametresi kullanılır. input type="number" min="5" max="20" value="10" şeklinde yazarsak, minimum değeri 5, maksimum değeri 20 olan ve sayfa açıldığında ilk değeri 10 olan bir sayı butonu oluştururuz.Örneğin;
Sayfaya aralıklı sayı doğrusu ekleme
Sayfaya aralıklı sayı doğrusu eklemek için range parametresini kullanmamız gerekir. number parametresinde olduğu gibi, bu parametre kullanılırken de min max ve value değerleri yazılmalıdır. Bu parametrede diğerinden farklı olarak artış miktarı da belirlenebilir. step parametresini kullanarak artışın kaçar kaçar olacağını da belirleyebiliriz.Örneğin;
Not: label etiketini kullanarak başına ve sonuna da değerleri yazabiliriz.
Form içindeki yazıya girişi engelleme
Bir form içindeki yazıya ya da değere giriş yapmaya izin vermek istemiyorsak ya da sadece görünmesini istiyorsak readonly parametresini kullanırız. input type="text" value="yazı" readonly diyerek, yazıya değer girilmesini engellemiş oluruz.
Not: readonly parametresi kullanıldığında giriş yapmayı engeller ancak içeriğin kopyalanmasını engellemez.
Örneğin;
Doldurulması zorunlu giriş alanı yapmma
Doldurulması zorunlu alan yapılırken required parametresi kullanılır. input type="text" name="tc-kimlik-no" required şeklinde kullanılır.Örneğin;
İmleci istenen form yerine götürme
Sayfa açıldığında imleç, formda bizim istediğimiz yerde olsun istiyorsak, bunun için autofocus parametresini kullanmamız gerekir. Form içinde hangi girdi yerinden başlansın istiyorsak, o input yerine autofocus eklememiz gerekir.Örneğin; bir formda sayfayı açtığımızda biz imlecin ilk olarak soyad bölümüne gitmesini istiyorsak;
Form içine veri yükleme
Form içine veri geçmişi yüklemek istersek, form içinde bir datalist oluşturmamız gerekir. Bunun için de datalist parametresinden yararlanmamız gerekir. Önce datalist id="veriler" diyerek bir select açılır menüsü yapar gibi seçenekleri beilrlemeliyiz.(option etiketi ile) Daha sonra input type="text" list="veriler(datalistin adı)" diyerek verileri form içine yükleyebiliriz.Örneğin;
div etiketi
Div etiketi içine her türlü içeriğin girilebileceği bir etikettir. div etiketinin amacı, sayfa yapısının bloklara bölünerek, daha rahat bir tasarım yapılmasını sağlamaktır. Genellikle div etiketini bloklar halinde göstermek için CSS ile biçimlendirilir. div etiketi ile sayfa düzeni oluşturulurken genellikle CSS kullanılır.
Not:div etiketlerinin içlerine yeni div etiketleri de açılabilir.
header etiketi
Sayfanın üst tarafında, başlık kısımlarının oluşturulduğu bölümdür. h1,h2 gibi başlık etiketletri, bu etiket içinde kullanılır. Örneğin;
Örnek Başlık
Örnek Alt Başlık
hgroup etiketi
h1,h2,h3 vs. gibi başlık etiketlerini bu etiket içinde gruplandırabiliriz.
Sayfanın içindeki içeriği, sayfadayken değiştirme
Sayfanın içindeki içeriği, sayfa aktifken değiştirmek için contenteditable parametresini kullanırız. Bu parametrenin iki tür kullanımı vardır:
- contenteditable="true" şeklinde kullanırsak sayfa içindeki içeriği değiştirmeye izin verir.
- contenteditable="false" şeklinde kullanırsak sayfa içindeki içeriği değiştirmeye izin vermez.
Örneğin;
nav etiketi
Sayfanın üst kısmındaki menü navigasyon yeri için kullanılan etikettir. Menü çubuğunda kullanılacak etiketler ve parametreler bu etiket içinde kullanılır.
section etiketi
Sayfa içindeki yer alan her bir bölüm için kullanılan etikettir. Bu sectionlar içinde article etiketi ile makaleler, yazılar vs. eklenebilir.Örneğin;
Buraya bir makale ve yazı gelecek.
Buraya bir makale ve yazı gelecek.
Buraya bir makale ve yazı gelecek.
Buraya bir makale ve yazı gelecek.
aside etiketi
Sayfanın yan kısmında yer alan yazılar veya diğer içerikler için kullanılan etikettir. Bu etiketin içinde section etiketi, article etiketi ve nav etiketi gibi etiketler de kullanılabilir.
footer etiketi
Sayfanın en alt kısmı için kullanılan bir etikettir. Sayfanın alt kısmında kullanılacak bütün etiketler, bu etiket içinde yazılır. Bu etiketin içinde nav etiketi vs. kullanılabilir.Örneğin;
Sayfaya başlıklı yazı ekleme - details etiketi
Sayfaya bir yazı eklerken details etiketini kullanabiliriz. details etiketi ile eklediğimiz yazılar sayfaya görünür halde durmaz, yalnızca yazının başlıkları sayfada yer alır. Mouse ile yazının başlığının üstüne gelip tıkladığımızda yazı açılır. Yazının safya ilk açıldığında direkt olarak açık gelmesini istersek, details open parametresini kullanmamız gerekir. Ayrıca yazının başlıklarını eklemek için de summary etiketini kullanmamız gerekir.Örneğin;
Sahasında Getafe ile 2-2 berabere kalan Katalan ekibi, şampiyonluk yolunda ağır bir yara aldu. Getafe'nin golü 90. dakikada Lafita'dan geldi.
Barcelona'nın puan kaybettiği haftada deplasmanda Levante ile karşılaşan Atletico Madrid, sahadan 2-0 mağlup ayrıldı ve büyük bir avantajı kaçırmış oldu. Madrid ekibinde temsilcimiz Arda Turan, ikinci yarıda oyuna dahil oldu.
Barcelona ve Atletico Madrid'in puan kaybettiği haftada Valencia'yı yenerek, şampiyonluk yolunda büyük avantaj sağlamayı düşünen Real Madrid Valencia engeline takıldı. Sahasında iki kez yenik duruma düşen Madrid ekibine beraberliği getiren gol 90+2. dakikada Ronaldo'dan geldi.
Geçen hafta şampiyonluğunu ilan ederek 19. şampiyonluğuna ulaşan Fenerbahçe, Manisa'da Akhisar Belediyespor'a 3-1 mağlup oldu. Sarı-lacivertli ekibin tek golü Mehmet Topal'dan geldi.
Barcelona Şokta!
Atletico'ya Levante Darbesi
Bir Kayıp da Real'den
Şampiyon Rehavete Kapıldı: 3-1
Tarih etiketi - time
Eğer bir yazının içinde tarih kullanıyorsak, tarayıcının bunu tarih olarak algılaması için, tarih yazan yeri time etiketi içinde belirtmemiz gerekir. Örneğim;
Bu yazı tarihinde yazılmıştır.
Not: Normalde yazının içinde tarihi yazarken time etiketini kullanmasak da, tarihi yazabiliriz. Ancak tarayıcı bunu tarih olarak algılamayabilir. Bu yüzden tarihleri yazarken time etiketini kullanmalıyız.
Vurgulama etiketi - mark
Sayfa içinde bir yerde vurgulama yapmak istiyorsak mark etiketini kullanırız. Örneğin;
Bu yazının bazı yerlerinde vurgu yapılmıştır.
Not: mark etiketi renk ile vurgu yapmayı sağlarken, strong etiketi yazının kalın yazılmasını sağlamaktadır.Yüzde etiketi - meter ve progress
Bir sayfada bir yüklemenin ilerlemesini vs. için kullanılan etikettir. Yüzde olarak ilerlemeyi gösterir. min="0" max="100" value="35" şeklinde parametreler ile beraber kullanılır. Örneğin;
- meter etiketi -->
- progress etiketi -->
Sayfaya Video Ekleme
Sayfaya video eklemek için video etiketini kullanmamız gerekir. Ayrıca bu etiketin yanında witdh(genislik), height(yukseklik), controls, loop ve poster gibi parametreler de kullanılır.
- witdh: videonun genişlik ölçüsünü ayarlarken kullanılır. video witdh="400" gibi
- height: videonun yükseklik ölçüsünü ayarlarken kullanılır. video height="400" gibi
- controls: sayfa açıldığında videonun yanında başla,durdur vs. tuşlarının olmasını sağlar. video controls="controls" gibi
- loop: video bitince tekrar edip etmeyeceğini(başa dönüp dönmeyeceğini) belirlemek için kullanılır. video loop="loop" gibi
- autoplay: sayfa açıldığında videonun direkt olarak başlamasını istersek autoplay parametresini kullanmamız gerekir. video autoplay şeklinde kullanılır.
- poster: videonun açılmadan önce sayfadaki kapak resmini belirlemek için kullanılır. video poster="img/poster-resmi.jpg" gibi
Tarayıcılar için video uzantıları
Sayfaya video koyarken video etiketinin içinde videoyu çağırmak için source etiketini kullanırız. source etiketinin yanında da src ve typr parametrelerini kullanırız. source src="video.mp4" type="video/mp4" gibi.
Her tarayıcının videoları açarken kullandığı uzantı şekli farklıdır.
- Mozilla için: video.ogv type="video/ogg"
- Google Chrome ve Internet Explorer için: video.mp4 type="video/mp4"
- Opera için: video.webm type="video/webm"
Tarayıcınız çok eski, lütfen güncelleyiniz ya da yeni bir tarayıcı yükleyiniz..
Örneğin;
Sayfaya Ses Ekleme
Sayfaya ses eklemek için audio etiketini kullanırız. Kullanılış mantığı genel olarak video etiketi ile aynıdır. Bu etiketin yanında da yine bazı parametreler kullanılır. audio controls="controls" şeklinde parametreler eklenebilir. Örneğim;
Tarayıcılar için ses uzantıları
- Mozilla için: audio.ogg type="audio/ogg" veya type="audio/mp3"
- Google Chrome ve Internet Explorer için: audio.mp3 type="audio/mp3"
ya da
Hiç yorum yok:
Yorum Gönder