METN VE GRNM DZENLEME ETKETLER 3 HAFTA WEB
METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERİ 3. HAFTA WEB TASARIMININ TEMELLERİ Öğr. Gör. Mevlüt İNAN
METİN DÜZENLEME ETİKETLERİ HTML dilinde en sık kullanılan etiketler genellikle başlıklar, paragraflar ve satır atlama etiketleridir. q HX> </HX> BAŞLIK ETİKETLERİ Sayfa içinde kullanılabilecek başlıklara ait yazı büyüklüklerini tanımlar. X değeri 1 -6 arasında bir değer alabilir. X değeri artırıldıkça sayfa gözükecek başlığın yazı büyüklüğü de gitgide azalmaktadır. En büyük başlık yazı büyüklüğü <h 1> en küçüğü de <h 6>'dır.
METİN DÜZENLEME ETİKETLERİ Genel Kullanım şekli olarak; <h 1>Başlık Etiketi 1</h 1> <h 2>Başlık Etiketi 2</h 2> <h 3>Başlık Etiketi 3</h 3> <h 4>Başlık Etiketi 4</h 4> <h 5>Başlık Etiketi 5</h 5> <h 6>Başlık Etiketi 6</h 6> şeklinde kullanır. Html Kod veya veya <H 1>Başlık Etiketi 1</H 1> <H 2>Başlık Etiketi 2</H 2> <H 3>Başlık Etiketi 3</H 3> <H 4>Başlık Etiketi 3</H 4> <H 5>Başlık Etiketi 3</H 5> <H 6>Başlık Etiketi 3</H 6>
METİN DÜZENLEME ETİKETLERİ Html Çıktı Yukarıda verilen Html kodunda başlık etiketlerinin içerisine align ve style parametrelerinin kullanıldığını görmekteyiz. Bu parametrelerden; align: Kullanılan nesnenin hizalanması işlevini yerine getirir. align parametresinin alabileceği değerler aşağıdaki tabloda listelenmiştir.
METİN DÜZENLEME ETİKETLERİ style: Kullanılan başlık etiketine ait CSS kodlarını yazabileceğimiz parametredir. Bu parametre ile yazı tipi, yazı büyüklüğü, yazı rengi, arka plan rengi, çerçeve kalınlığı, çerçeve rengi, hizalama, öteleme, nesneyi ovalleştirme, arka plan resmi ekleme vb. birçok işlemi yapabileceğimiz bir parametredir. CSS konusu başlı başına bir ders nitelliğindedir. Biz derslerimizde çoğunlukla en sık kullanılan parametre ve değerlerinden bahsedeceğiz. Örnek verecek olursak; <h 1 style="font-size: 16 px; color: #ff 0000; text-align: center">Başlık 1</h 1> Kodunu çalıştırdığımızda 16 px büyüklüğünde kırmızı renkli, hizalanış itibariyle ortaya noktaya alınan bir "Başlık 1" yazısı ekrana yazdırmış oluruz.
<B> </B> ETİKETİ q <B> </B> BAŞLIK ETİKETİ Arada yazılan metni daha koyu olarak veya daha kalın(Bold) olarak oluşturma <b> etiketinin kullanımı yoluyla gerçekleştirilebilir. Kısaca yazıyı kalınlaştıran bir etikettir. İlerleyen kısımlarda göreceğimiz <strong> etiketi de yazıyı kalınlaştırıp daha koyu hale getirir. Genel kullanım şekli; <b>. . </b> veya <B>. . . </B> Html Kod <b>Bu metni tamamen kalınlaştırır. !</b> Html Çıktı
<I> </I> ETİKETİ q <I> </I> BAŞLIK ETİKETİ • Arada yazılan metni italik(eğik-Italic) olarak oluşturma <i> etiketinin kullanımı yoluyla gerçekleştirilebilir. Kısaca yazıyı eğikleştiren bir etikettir. • Genel kullanım şekli; • <i>. . </i> veya <I>. . . </I> • Html Kod • <I>Bu metni italik(eğik) yapar. !</I> • Html Çıktı
<U> </U> ETİKETİ q <U> </U> BAŞLIK ETİKETİ • Etiketler arasına yazılan ifadenin altını çizmek(Underline) için <u> kullanılan bir etikettir. • Genel kullanım şekli; • <u>. . </u> veya <U>. . . </U> • Html Kod • <U>Bu metnin altını çizer. !</U> • Html Çıktı
<P> </P> ETİKETİ q <P> </P> BAŞLIK ETİKETİ Paragraf(Paragraph) oluşturmak için kullanılan <p> etiketi araya bir satır boşluk koyarak paragraf başı metin oluşturulmasını sağlar. Html Kod <body> <p>Sevgili Öğrenciler</p> <p align="justify">Yüzüncü Yıl Üniversitesi Başkale Meslek Yüksek Okulu eğitim ve öğretim yılına sizlerle başlamanın gururunu yaşayacaktır. Yüksek Okulumuzun temel amacı, ülkemizin sanayi ve hizmet sektöründe çalışma olanağı bulacak, sorumluluk duygusu ve etik değerlere sahip, donanımlı, bilgili, hevesli, araştırıcı, sorgulayıcı ve çağdaş eğitimi almış; bilgisayar ve bilgi teknolojileriyle donanmış, çalıştığı iş yerinde farklılık yaratabilen, verimliliği arttıran, mesleki ve teknik alanda meslek elemanı yetiştirmektir. </p> <p>Sevgili öğrenciler, bu amaç doğrultusunda üniversite ve yüksekokul yönetimiyle birlikte sizlerin de büyük çaba göstereceğinize inanarak yüksekokulumuzun hayatınıza, başarı, mutluluk ve huzur getirmesini diliyorum. </p> </body>
<P> </P> ETİKETİ Html Çıktı
<BR> ETİKETİ q<BR> BAŞLIK ETİKETİ Bir alt satıra geçmek için kullanılan Html etiketi olan , enter tuşu gibi çalışır. Bu etiketin yukarıda bahsedilen diğer etiketler gibi </br> ile kapatılmaz. İki kullanım şekli vardır. Bunlar sırasıyla; İlk kullanım şekli : veya <BR> İkinci kullanım şekli : <br /> veya <BR /> Html Kod <p>Bu bir<br /> paragraf ve satır atlama örneği. . </p> Html Çıktı
<BR> ETİKETİ <BR> ile <BR /> arasında aslında işlev olarak fark yoktur. Tek fark şudur. XHTML’in daha gelişmiş ve daha işlevsel olan bir sürümüdür. XHTML Standartları belli ve uyulması gereken şartları ön koşul koyarak anlaşılır kod yazmayı ve tüm platformlarda düzgün bir şekilde ön izlenen web sayfalarının gösterilmesini sağlar. XHTML'de açık etiket(tag) kalmamalıdır. Bu nedenle XHTML'de bu etiketler kapatılmalıdır.
<FONT> ETİKETİ q<FONT> </FONT> BAŞLIK ETİKETİ Metinlere renk, büyüklük, tip gibi özelliklerin değiştirilmesini sağlayan bir etikettir. Temel olarak 3 parametre alır. Bu parametrelerin aynı anda kullanılma zorunlulukları yoktur. Bu parametreleri tablo şeklinde gösterirsek;
<FONT> ETİKETİ Genel kullanımı <FONT>. . . . </FONT> şu şekildedir. Ayrıca size parametresin -2, +4 vb. ifadelerde yazılabilir. Bu durumda yazının font büyüklüğü neyse verilen size değerine göre büyür veya küçülür. Örneğin : <font size="-2">Font büyüklüğü varsayılan değerinden 2 azaltılır. </font> <font size="+2">Font büyüklüğü varsayılan değerinden 2 artırılır. </font>
<FONT> ETİKETİ En sık kullanılan ve hemen bütün tarayıcıların desteklediği 16 renk
<FONT> ETİKETİ Html Kod Html Çıktı
<FONT> ETİKETİ Font büyüklüğünü maksimum 7 olarak girilmeli. Yediden büyük sayılar girildiğinde varsayılan olarak size parametresinin değeri 7 olarak atanır. Ayrıca font büyüklüğünü 1'den küçük olarak girdiğinizde de bu sefer varsayılan olarak size parametresinin değeri 1 olarak ayarlanır.
GÖRÜNÜM DÜZENLEME ETİKETLERİ q <HR> ETİKETİ Sayfaya yatay çizgiyi oluşturan bir etikettir. Bu etiket </hr> olarak kapatılmaz. Temel olarak 3 parametre alır. Bu parametrelerin aynı anda kullanılma zorunlulukları yoktur. Bu parametreleri tablo şeklinde gösterirsek;
<HR> ETİKETİ Genel kullanımı <hr size=“ 3” width=” 200” align=“center”> şeklinde kullanılır. HTML Kod : HTML Çıktı
SORULARINIZ
METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERİ KAYNAKÇA q q q http: //www. htmldersleri. org/index. php? getir=html_primary http: //www. belgeler. org/hpm/html-php-mysql-giris_html-tags. html http: //www. webmastersitesi. com/html/109838 -html-metin-duzenleme-etiketleri. htm https: //gelecegiyazanlar. turkcell. com. tr/konu/web-programlama/egitim/html-101/entemel-html-etiket-ve-anlamlari http: //www. tizag. com/html. T/htmlbold. php http: //webtasarimiveprogramlama. weebly. com/2 -ders---metin-ve-goumlruumlnuumlm -duumlzenleme-etiketleri. html https: //www. w 3. org/wiki/HTML/Elements/br https: //ig. cc. metu. edu. tr/html/ http: //html. sitesi. web. tr/basit-kodlar. html http: //www. koddunyasi. net/makale_detay. aspx? makale_ID=29&m_KTG_ID=10&m_KT G=HTML http: //www. w 3 schools. com/tags/att_hr_noshade. asp
- Slides: 21