Html Metin ve Görsel Düzenleme Etiketleri

Web Tasarımı Ünite -4

Haziran 9, 2024

Html Metin ve Görsel Düzenleme Etiketleri

İstanbul Üniversitesi Açık ve Uzaktan Eğitim Fakültesi (Auzef) Açık Öğretim Fakültesi Bölüm : Web Tasarımı ve Kodlama 1. Sınıf Web Tasarımı Bahar Dönemi Ünite 4 : Html Metin ve Görsel Düzenleme Etiketleri

Web Tasarımı – Ünite 4: Html Metin ve Görsel Düzenleme Etiketleri

Giriş

HTML (HyperText Markup Language), web sayfalarının temel yapı taşlarını oluşturan bir işaretleme dilidir. Bu dil, metinleri, görselleri ve diğer içerik öğelerini tanımlamak için çeşitli etiketler kullanır. Bu makalede, HTML’nin metin ve görsel düzenleme etiketlerine odaklanarak, bu etiketlerin nasıl kullanıldığı ve web tasarımındaki önemleri üzerinde durulacaktır.

HTML’de Metin Düzenleme Etiketleri

HTML, metinlerin biçimlendirilmesi ve düzenlenmesi için çeşitli etiketler sunar. Başlık etiketleri (<h1> – <h6>), paragraf etiketi (<p>), vurgulama etiketleri (<b>, <i>, <u>) ve liste etiketleri (<ul>, <ol>, <li>) bu etiketler arasında yer alır. Başlık etiketleri, metinleri hiyerarşik bir düzende sunar ve SEO (Arama Motoru Optimizasyonu) açısından önemlidir.

Başlık Etiketleri

HTML’de başlık etiketleri (<h1> – <h6>), metin içeriğinin başlıklarını tanımlamak için kullanılır. <h1> en önemli başlığı, <h6> ise en az önemli başlığı temsil eder. Bu etiketler, sayfa yapısının düzenli ve anlaşılır olmasını sağlar.

Paragraf ve Vurgulama Etiketleri

Paragraf etiketi (<p>), metin bloklarını düzenlemek için kullanılır. Vurgulama etiketleri ise metni kalın (<b>), italik (<i>) veya altı çizili (<u>) yaparak belirli bölümleri öne çıkarır. Bu etiketler, metnin daha okunabilir ve dikkat çekici olmasına yardımcı olur.

Liste Etiketleri

HTML’de liste oluşturmak için iki ana etiket kullanılır: sıralı liste (<ol>) ve sırasız liste (<ul>). Her iki liste tipi de liste öğelerini (<li>) kullanarak oluşturulur. Sıralı listeler numaralandırılmış öğeler içerirken, sırasız listeler madde işaretleri kullanır.

HTML’de Görsel Düzenleme Etiketleri

Görseller, web sayfalarının görsel çekiciliğini artıran önemli unsurlardır. HTML’de görselleri eklemek ve düzenlemek için <img> etiketi kullanılır. Bu etiket, src (kaynak), alt (alternatif metin) ve align (hizalama) gibi çeşitli parametrelerle birlikte kullanılarak görsellerin sayfa içindeki konumu ve özellikleri belirlenir.

Görsel Ekleme ve Düzenleme

<img> etiketi, bir web sayfasına görsel eklemek için kullanılır. Bu etiketin src parametresi, görselin dosya yolunu belirtir. Alt parametresi, görselin yüklenememesi durumunda görüntülenecek alternatif metni tanımlar. Align parametresi ise görselin metin ile hizalanmasını sağlar.

Bağlantılar ve Görseller

HTML’de görseller, bağlantılarla birlikte kullanılarak etkileşimli hale getirilebilir. <a> etiketi ile birlikte kullanılan <img> etiketi, tıklandığında başka bir sayfaya yönlendiren görseller oluşturur. Bu, kullanıcı deneyimini zenginleştirir ve navigasyonu kolaylaştırır.

Alt ve Üst İndis Etiketleri

Alt indis (<sub>) ve üst indis (<sup>) etiketleri, metinlerin alt veya üst kısmına küçük metinler eklemek için kullanılır. Bu etiketler, özellikle kimya ve matematik gibi alanlarda formüllerin doğru bir şekilde gösterilmesi için önemlidir.

Sonuç

HTML’nin metin ve görsel düzenleme etiketleri, web sayfalarının estetik ve işlevsel açıdan zenginleştirilmesini sağlar. Başlıklar, paragraflar, listeler ve görseller gibi temel öğeler, kullanıcı deneyimini artırır ve içeriğin anlaşılabilirliğini sağlar. Bu etiketlerin doğru ve etkili kullanımı, profesyonel ve kullanıcı dostu web sayfaları oluşturmanın anahtarıdır.

Html Metin ve Görsel Düzenleme Etiketleri

Web Tasarımı – Ünite 4: Html Metin ve Görsel Düzenleme Etiketleri

1- Bir web sayfası web tarayıcıda görüntülendiğinde içerikte yer alan metin ve görsellerin biçimlendirilmesi ve düzenlenmesini sağlayan etiketler HTML ile yazılan kodlar içerisinde hangi ana etiket yapısı altında tanımlanır?

A) <head>
B) <body>
C) <title>
D) <h>
E) <meta>

Cevap: B) <body>

Açıklama: HTML’de metin ve görsellerin biçimlendirilmesi ve düzenlenmesi, <body> etiketi içinde yapılır. Bu etiket, sayfanın görünür içeriğini tanımlar.

2- <h1> etiketi ile metin içi başlık kaç punto ile yazılmış olur?

A) 8
B) 10
C) 16
D) 24
E) 36

Cevap: D) 24

Açıklama: <h1> etiketi, genellikle büyük başlıklar için kullanılır ve varsayılan olarak 24 punto ile görüntülenir.

3- Sıralı liste yapısı oluşturmak için aşağıdaki etiketlerden hangisi öncelikle kullanılmalıdır?

A) <ul>
B) <ol>
C) <li>
D) <list>
E) <al>

Cevap: B) <ol>

Açıklama: Sıralı liste oluşturmak için HTML’de <ol> (ordered list) etiketi kullanılır. Bu etiket, numaralı listeler oluşturur.

4- <a href=”www.google.com”>Buraya Tıklayınız</a> HTML ile yazılmış kod bloğu ne işe yarar?

A) Ekrana Google arama motorunun adını yazar
B) Kodun yazıldığı web sayfası tarayıcıda görüntülendiğinde ekrana arama çubuğu getirir.
C) http://www.google.com linkine bağlantı oluşturulur.
D) http://www.google.com arama motorunda “Buraya Tıklayınız” kelime grubunu arar.
E) Hazırlanan web sayfasının Google arama motorunda görüntülenmesini sağlar.

Cevap: C) http://www.google.com linkine bağlantı oluşturulur.

Açıklama: Bu HTML kodu, tıklandığında kullanıcıyı http://www.google.com adresine yönlendiren bir bağlantı (link) oluşturur.

5-

Yukarıda yer alan klasör yapısına göre aşağıdakilerden hangisi “baglanti.html” dosyasında yazılan ve bu dosyadan iuKapi.jpg görsel dosyasına bağlantı oluşturulmasını sağlayan etiket kullanımıdır?

A) <a href=”altSayfalar/iuKapi.jpg”> tıklayınız</a>
B) <a href=”sayfalar/iuKapi.jpg”> tıklayınız</a>
C) <a href=”WebSayfasi/iuKapi.jpg”> tıklayınız</a>
D) <a href=”../sayfalar/iuKapi.jpg”> tıklayınız</a>
E) <a href=”iuKapi.jpg”> tıklayınız</a>

Cevap: E) <a href=”iuKapi.jpg”> tıklayınız</a>

Açıklama: Verilen klasör yapısına göre, “baglanti.html” dosyası ve “iuKapi.jpg” dosyası aynı dizinde bulunmaktadır. Bu durumda, bağlantı oluşturmak için sadece dosya adı kullanılır. Bu nedenle doğru cevap E) <a href=”iuKapi.jpg”> tıklayınız</a> olacaktır.

6- Bağlantı etiketi içerisinde kullanılan “target” etiketinin aşağıdaki hangi parametre değeri, kullanıcı ekranda ilgili bağlantıya tıkladığında bağlantı sağlanacak sayfayı ayrı sekmede açılmasını sağlar?

A) “_parent”
B) “_new”
C) “_top”
D) “_blank”
E) “_self”

Cevap: D) “_blank”

Açıklama: “_blank” parametresi, bağlantının yeni bir sekmede açılmasını sağlar.

7- Bir dosya transferi için ilgili bağlantıya yönlendirme yapılmak isteniyorsa bu sefer parametre değerinin başına “_________” eklenip devamında dosya transfer bağlantısı belirtilmelidir. Boşluğa hangisi gelmelidir?

A) ftp:
B) title:
C) big:
D) htp:
E) tag:

Cevap: A) ftp:

Açıklama: FTP protokolü ile dosya transferi yapmak için bağlantı adresinin başına “ftp:” eklenmelidir.

8- Alt indis gösterimi için hangi etiket kullanılmalıdır?

A) <h>
B) <br/>
C) <sub>
D) <sup>
E) <font>

Cevap: C) <sub>

Açıklama: <sub> etiketi, metni alt indis (subscript) olarak görüntüler.

9- Bir görselin sayfa içerisindeki konumunu belirlemek için <img> etiketi içerisinde kullanılan parametre hangisidir?

A) “href”
B) “size”
C) “target”
D) “align”
E) “font”

Cevap: D) “align”

Açıklama: <img> etiketi içindeki “align” parametresi, görselin sayfa içerisindeki hizalamasını belirler.

10- Aşağıdakilerden hangisi yazı tipini belirlemek için <font> etiketi içerisinde kullanılan parametredir?

A) “size”
B) “face”
C) “align”
D) “text”
E) “color”

Cevap: B) “face”

Açıklama: “face” parametresi, <font> etiketi içinde yazı tipini (font) belirlemek için kullanılır.

Web Tasarım ve Kodlama

Html Metin ve Görsel Düzenleme Etiketleri

Auzef Web Tasarımı ve Kodlama 1. Sınıf Bahar Dönemi Ünite Soruları ve Deneme Sınavları, 2024 Sınav Soruları

Web Tasarımı Ünite -4

#1. Bir görselin sayfa içerisindeki konumunu belirlemek için <img> etiketi içerisinde kullanılan parametre hangisidir?

#2. Bağlantı etiketi içerisinde kullanılan “target” etiketinin aşağıdaki hangi parametre değeri, kullanıcı ekranda ilgili bağlantıya tıkladığında bağlantı sağlanacak sayfayı ayrı sekmede açılmasını sağlar?

#3. Yukarıda yer alan klasör yapısına göre aşağıdakilerden hangisi “baglanti.html” dosyasında yazılan ve bu dosyadan iuKapi.jpg görsel dosyasına bağlantı oluşturulmasını sağlayan etiket kullanımıdır?

#4. Aşağıdakilerden hangisi yazı tipini belirlemek için <font> etiketi içerisinde kullanılan parametredir?

#5. HTML ile yazılmış kod bloğu ne işe yarar?

#6. Sıralı liste yapısı oluşturmak için aşağıdaki etiketlerden hangisi öncelikle kullanılmalıdır?

#7. Alt indis gösterimi için hangi etiket kullanılmalıdır?

#8. Bir web sayfası web tarayıcıda görüntülendiğinde içerikte yer alan metin ve görsellerin biçimlendirilmesi ve düzenlenmesini sağlayan etiketler HTML ile yazılan kodlar içerisinde hangi ana etiket yapısı altında tanımlanır?

#9. Bir dosya transferi için ilgili bağlantıya yönlendirme yapılmak isteniyorsa bu sefer parametre değerinin başına “——-” eklenip devamında dosya transfer bağlantısı belirtilmelidir. Boşluğa hangisi gelmelidir?

#10. <h1> etiketi ile metin içi başlık kaç punto ile yazılmış olur?

SONUÇ

Html Metin ve Görsel Düzenleme Etiketleri

Web Tasarımı – Ünite 4: Html Metin ve Görsel Düzenleme Etiketleri

Giriş

HTML’de Metin Düzenleme Etiketleri

Başlık Etiketleri

Paragraf ve Vurgulama Etiketleri

Liste Etiketleri

HTML’de Görsel Düzenleme Etiketleri

Görsel Ekleme ve Düzenleme

Bağlantılar ve Görseller

Alt ve Üst İndis Etiketleri

Sonuç

Html Metin ve Görsel Düzenleme Etiketleri

Web Tasarımı – Ünite 4: Html Metin ve Görsel Düzenleme Etiketleri

1- Bir web sayfası web tarayıcıda görüntülendiğinde içerikte yer alan metin ve görsellerin biçimlendirilmesi ve düzenlenmesini sağlayan etiketler HTML ile yazılan kodlar içerisinde hangi ana etiket yapısı altında tanımlanır?

2- <h1> etiketi ile metin içi başlık kaç punto ile yazılmış olur?

3- Sıralı liste yapısı oluşturmak için aşağıdaki etiketlerden hangisi öncelikle kullanılmalıdır?

4- <a href=”www.google.com”>Buraya Tıklayınız</a> HTML ile yazılmış kod bloğu ne işe yarar?

5-

Yukarıda yer alan klasör yapısına göre aşağıdakilerden hangisi “baglanti.html” dosyasında yazılan ve bu dosyadan iuKapi.jpg görsel dosyasına bağlantı oluşturulmasını sağlayan etiket kullanımıdır?

6- Bağlantı etiketi içerisinde kullanılan “target” etiketinin aşağıdaki hangi parametre değeri, kullanıcı ekranda ilgili bağlantıya tıkladığında bağlantı sağlanacak sayfayı ayrı sekmede açılmasını sağlar?

7- Bir dosya transferi için ilgili bağlantıya yönlendirme yapılmak isteniyorsa bu sefer parametre değerinin başına “_________” eklenip devamında dosya transfer bağlantısı belirtilmelidir. Boşluğa hangisi gelmelidir?

8- Alt indis gösterimi için hangi etiket kullanılmalıdır?

9- Bir görselin sayfa içerisindeki konumunu belirlemek için <img> etiketi içerisinde kullanılan parametre hangisidir?

10- Aşağıdakilerden hangisi yazı tipini belirlemek için <font> etiketi içerisinde kullanılan parametredir?

Editor