HTML Sayfası içinde html kodlarını nasıl gösterebilirim?

Katılım
16 Eylül 2020
Mesajlar
146
Reaksiyon skoru
41
CSS kodlarını unutmamak için kendim bakabileceğim bir sayfa yapıcam fakat html kodlarını sayfa içerisinde nasıl gösterebilirim? <p></p> veya herhangi bir tag içerisinde yazdığımda onları sayfa içinde normal bir kodmuş gibi gösteriyor ben onları yazı gibi göstermesini istiyorum.

mesela;

html dosyasına başka bir css dosyasını entegre etmek için <link rel="stylesheet" href="..."> kodu kullanılır

*<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Merhaba!</p>
</body>
</html>


burda ki tagları kendi sayfa içi yapısı gibi görüyo öyle olmasını istemiyorum.
 
En İyi Cevap
CSS kodlarını unutmamak için kendim bakabileceğim bir sayfa yapıcam fakat html kodlarını sayfa içerisinde nasıl gösterebilirim? <p></p> veya herhangi bir tag içerisinde yazdığımda onları sayfa içinde normal bir kodmuş gibi gösteriyor ben onları yazı gibi göstermesini istiyorum.

mesela;

html dosyasına başka bir css dosyasını entegre etmek için <link rel="stylesheet" href="..."> kodu kullanılır

*<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Merhaba!</p>
</body>
</html>


burda ki tagları kendi sayfa içi yapısı gibi görüyo öyle olmasını istemiyorum.
Bir yazı alanı oluşturmalısın. Editör içerisinde şayet text area create etmeden kod girişi yaparsan (direkt olarak body içerisine...
"<" bunu "&lt;" yada "&60;" ile değiştirerek ve ">" bunu "&gt;" yada "&62;" ile değiştirerek dener misin
Mesajlar otomatik olarak birleştirildi:

Oldu mu ?
şimdi deniyorum bir dakika
Mesajlar otomatik olarak birleştirildi:

"<" bunu "&lt;" yada "&60;" ile değiştirerek ve ">" bunu "&gt;" yada "&62;" ile değiştirerek dener misin
Mesajlar otomatik olarak birleştirildi:

Oldu mu ?
evet işe yaradı teşekkür ederim ama hepsine aynı şeyi yazmak biraz zorlayabilir daha kolay bi yöntemi olmalı bence ama şu anlık bulamadım tekrardan teşekkürler yardımınız için :))
 
  • Beğen
Reaksiyonlar: mmx1
CSS kodlarını unutmamak için kendim bakabileceğim bir sayfa yapıcam fakat html kodlarını sayfa içerisinde nasıl gösterebilirim? <p></p> veya herhangi bir tag içerisinde yazdığımda onları sayfa içinde normal bir kodmuş gibi gösteriyor ben onları yazı gibi göstermesini istiyorum.

mesela;

html dosyasına başka bir css dosyasını entegre etmek için <link rel="stylesheet" href="..."> kodu kullanılır

*<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Merhaba!</p>
</body>
</html>


burda ki tagları kendi sayfa içi yapısı gibi görüyo öyle olmasını istemiyorum.
Bir yazı alanı oluşturmalısın. Editör içerisinde şayet text area create etmeden kod girişi yaparsan (direkt olarak body içerisine yazılan kod) sayfa içinde sayfa olarak algılanabilir hatta sitenin çalışmamasına dahi yol açabilir. En basiti bir div içerisine tablo oluşturup, kodları text olarak rahatlıkla share edebilirsin.

Örneğin;
HTML:
<div class="col-sm-9 icerik">


    <h1>Tüm Kodlar</h1>


       HTML programlama dilinde kullanılan tüm kodlar aşağıda listelenmiştir:<br><br>


<table class="table table-striped">
<thead>
<tr><th>Kod</th>
<th>Açıklama</th>
<th>XHTML</th>
</tr></thead>
<tbody><tr>
<td>&lt;!--...--&gt;</td>
<td>Açıklama eklemek.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;!DOCTYPE&gt;&nbsp;</td>
<td>Dosya türünü yazmak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;a&gt;</td>
<td>Bağlantı vermek.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;abbr&gt;</td>
<td>Kısaltma.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;acronym&gt;</td>
<td>Kısaltmayı açıklamak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;address&gt;</td>
<td>Adres vermek.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;area&gt;</td>
<td>Resim üzerinde alan belirtmek.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;b&gt;</td>
<td>Kalın yazmak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;base&gt;</td>
<td>Tüm bağlantılar için ana yolu bildirme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;bdo&gt;</td>
<td>Yazı yönünü bildirme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;big&gt;</td>
<td>Büyük yazmak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;blockquote&gt;</td>
<td>Alıntı yapmak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;body&gt;</td>
<td>İçeriğe başlangıcı bildirmek.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;br&gt;</td>
<td>Satır atlamak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;button&gt;</td>
<td>Buton eklemek.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;caption&gt;</td>
<td>Tablo başlığı belirtme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;center&gt;</td>
<td>Hizayı ortalar.</td>
<td>Yok</td>
</tr>
<tr>
<td>&lt;cite&gt;</td>
<td>Alıntı yapmak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;code&gt;</td>
<td>Bilgisayar kodu şeklinde yazmak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;col&gt;</td>
<td>Tablo sütununu belirtme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;colgroup&gt;</td>
<td>Tablo sütun gruplarını belirtme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;dd&gt;</td>
<td>Açıklama eklemek.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;del&gt;</td>
<td>Üstü çizili yazı yazmak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;div&gt;</td>
<td>Dosyada alan belirtme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;dfn&gt;</td>
<td>Bir terim açıklamak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;dl&gt;</td>
<td>Terimler listesi.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;dt&gt;</td>
<td>Terim açıklamak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;em&gt;</td>
<td>Vurgulu yazı.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;fieldset&gt;</td>
<td>Alan belirleme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;form&gt;</td>
<td>Form kullanma.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;frame&gt;</td>
<td>Alt pencere açmak (frame)</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;frameset&gt;</td>
<td>Alt pencereleri tanımlamaya başlamak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;h1&gt; to &lt;h6&gt;</td>
<td>Başlık (1-6 arası)</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;head&gt;</td>
<td>Dosya bilgilerini açıklama bölümü.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;hr&gt;</td>
<td>Yatay çizgi çekmek.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;html&gt;</td>
<td>HTML'ye başlamak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;i&gt;</td>
<td>Sağa yatık yazmak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;img&gt;</td>
<td>Resim eklemek.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;input&gt;</td>
<td>Form nesnesi eklemek.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;ins&gt;</td>
<td>Vurgu yapmak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;kbd&gt;</td>
<td>Kelime yazdırma.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;label&gt;</td>
<td>Etiket belirleme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;legend&gt;</td>
<td>Bir alan için başlık belirleme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;li&gt;</td>
<td>Listeleme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;link&gt;</td>
<td>Dosyaya bağlantı verme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;map&gt;</td>
<td>Resim tanımlama.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;meta&gt;</td>
<td>Dosya bilgisi tanımlama.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;noscript&gt;</td>
<td>Script desteği yoksa yapılacaklar.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;object&gt;</td>
<td>Bir obje ekleme (flash vs.)</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;ol&gt;</td>
<td>Numaralandırılmış liste ekleme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;optgroup&gt;</td>
<td>Seçim grubu.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;option&gt;</td>
<td>Sürükle-bırak seçim listesi.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;p&gt;</td>
<td>Paragraf.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;param&gt;</td>
<td>Parametre bildirme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;pre&gt;</td>
<td>Formatlı yazı ekleme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;q&gt;</td>
<td>Küçük alıntılar için.</td>


</tbody></table><br><br>


    
<ul class="pager withspace">
  <li class="previous"><a href="script-kullanmak.html"><i class="glyphicon glyphicon-triangle-left"></i> Script Kullanmak</a></li>
  <li class="next"><a href="tum-fonksiyonlar.html"> Tüm Fonksiyonlar <i class="glyphicon glyphicon-triangle-right"></i></a></li>
</ul>


    </div>


Görüntü aşağıdaki gibi olacaktır;

1628503694589.png




Kodlar alıntıdır.
Kaynak: https://html.sitesi.web.tr/tum-kodlar.html
 
En İyi Cevap
Bir yazı alanı oluşturmalısın. Editör içerisinde şayet text area create etmeden kod girişi yaparsan (direkt olarak body içerisine yazılan kod) sayfa içinde sayfa olarak algılanabilir hatta sitenin çalışmamasına dahi yol açabilir. En basiti bir div içerisine tablo oluşturup, kodları text olarak rahatlıkla share edebilirsin.

Örneğin;
HTML:
<div class="col-sm-9 icerik">


    <h1>Tüm Kodlar</h1>


       HTML programlama dilinde kullanılan tüm kodlar aşağıda listelenmiştir:<br><br>


<table class="table table-striped">
<thead>
<tr><th>Kod</th>
<th>Açıklama</th>
<th>XHTML</th>
</tr></thead>
<tbody><tr>
<td>&lt;!--...--&gt;</td>
<td>Açıklama eklemek.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;!DOCTYPE&gt;&nbsp;</td>
<td>Dosya türünü yazmak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;a&gt;</td>
<td>Bağlantı vermek.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;abbr&gt;</td>
<td>Kısaltma.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;acronym&gt;</td>
<td>Kısaltmayı açıklamak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;address&gt;</td>
<td>Adres vermek.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;area&gt;</td>
<td>Resim üzerinde alan belirtmek.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;b&gt;</td>
<td>Kalın yazmak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;base&gt;</td>
<td>Tüm bağlantılar için ana yolu bildirme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;bdo&gt;</td>
<td>Yazı yönünü bildirme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;big&gt;</td>
<td>Büyük yazmak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;blockquote&gt;</td>
<td>Alıntı yapmak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;body&gt;</td>
<td>İçeriğe başlangıcı bildirmek.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;br&gt;</td>
<td>Satır atlamak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;button&gt;</td>
<td>Buton eklemek.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;caption&gt;</td>
<td>Tablo başlığı belirtme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;center&gt;</td>
<td>Hizayı ortalar.</td>
<td>Yok</td>
</tr>
<tr>
<td>&lt;cite&gt;</td>
<td>Alıntı yapmak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;code&gt;</td>
<td>Bilgisayar kodu şeklinde yazmak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;col&gt;</td>
<td>Tablo sütununu belirtme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;colgroup&gt;</td>
<td>Tablo sütun gruplarını belirtme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;dd&gt;</td>
<td>Açıklama eklemek.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;del&gt;</td>
<td>Üstü çizili yazı yazmak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;div&gt;</td>
<td>Dosyada alan belirtme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;dfn&gt;</td>
<td>Bir terim açıklamak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;dl&gt;</td>
<td>Terimler listesi.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;dt&gt;</td>
<td>Terim açıklamak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;em&gt;</td>
<td>Vurgulu yazı.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;fieldset&gt;</td>
<td>Alan belirleme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;form&gt;</td>
<td>Form kullanma.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;frame&gt;</td>
<td>Alt pencere açmak (frame)</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;frameset&gt;</td>
<td>Alt pencereleri tanımlamaya başlamak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;h1&gt; to &lt;h6&gt;</td>
<td>Başlık (1-6 arası)</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;head&gt;</td>
<td>Dosya bilgilerini açıklama bölümü.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;hr&gt;</td>
<td>Yatay çizgi çekmek.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;html&gt;</td>
<td>HTML'ye başlamak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;i&gt;</td>
<td>Sağa yatık yazmak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;img&gt;</td>
<td>Resim eklemek.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;input&gt;</td>
<td>Form nesnesi eklemek.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;ins&gt;</td>
<td>Vurgu yapmak.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;kbd&gt;</td>
<td>Kelime yazdırma.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;label&gt;</td>
<td>Etiket belirleme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;legend&gt;</td>
<td>Bir alan için başlık belirleme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;li&gt;</td>
<td>Listeleme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;link&gt;</td>
<td>Dosyaya bağlantı verme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;map&gt;</td>
<td>Resim tanımlama.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;meta&gt;</td>
<td>Dosya bilgisi tanımlama.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;noscript&gt;</td>
<td>Script desteği yoksa yapılacaklar.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;object&gt;</td>
<td>Bir obje ekleme (flash vs.)</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;ol&gt;</td>
<td>Numaralandırılmış liste ekleme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;optgroup&gt;</td>
<td>Seçim grubu.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;option&gt;</td>
<td>Sürükle-bırak seçim listesi.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;p&gt;</td>
<td>Paragraf.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;param&gt;</td>
<td>Parametre bildirme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;pre&gt;</td>
<td>Formatlı yazı ekleme.</td>
<td>Var</td>
</tr>
<tr>
<td>&lt;q&gt;</td>
<td>Küçük alıntılar için.</td>


</tbody></table><br><br>


   
<ul class="pager withspace">
  <li class="previous"><a href="script-kullanmak.html"><i class="glyphicon glyphicon-triangle-left"></i> Script Kullanmak</a></li>
  <li class="next"><a href="tum-fonksiyonlar.html"> Tüm Fonksiyonlar <i class="glyphicon glyphicon-triangle-right"></i></a></li>
</ul>


    </div>


Görüntü aşağıdaki gibi olacaktır;

Alıntıyı görüntüle



Kodlar alıntıdır.
Kaynak: https://html.sitesi.web.tr/tum-kodlar.html
teşekkürler ama aklımda ki sayfa tasarımıyla uyuşmuyor ama yine de bu yöntem için de teşekkürler :)
 
Alıntıyı görüntüle

kaba taslak bu solda dersler sağda onların nasıl çalıştığına dair örnekler ve kodları (kırmızılar active olmaları)
Grid bir yapımı olacak? Örneğin; sol taraftaki menüden #1 seçilince sağ tarafında bir panel açılacak ve panelde tablodaki bilgiler gösterilecek. #2 tıklandığında 2 içerisinde girilen bilgiler. #3,#4 vb. şeklinde ilerleyecek?

Tüm sayfa yapısı bu görselden ibaret mi olacak? Yani bu görselde yer alan center table mıdır? Sayfa içerisinde mi gösterim yapılacak?
Mesajlar otomatik olarak birleştirildi:

HTML:
<div class="header">
  <h1>Senin için Örnek Çalışma</h1>
</div>

<div class="row">

<div class="col-3 menu">
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Asp.NET</li>
    <li>pyhton</li>
  </ul>
</div>

<div class="col-9">

  <h1>Senin İçin Örnek Çalışma</h1>

 <p>Bu alana CSS ile birlikte açılır tablo koymalısın. Soldan seçtikçe sağda tablo açsın yada girilmiş dinamik bir text gösterilsin.
    Akerdeon yapı da iş görür. Bu yapının ismi grid yapı. İnternette çok fazla örneği bulunuyor. </p>

  <p> Kod satırlarını inceledikçe anlayacaksın zaten :)
    Şimdiden kolay gelsin.</p>


Yukarıdaki kodu yapıştır bir html body içine. Sonra aç. Sanırım senin istediğin grid yapı buna benziyor.
 
Son düzenleme:
Grid bir yapımı olacak? Örneğin; sol taraftaki menüden #1 seçilince sağ tarafında bir panel açılacak ve panelde tablodaki bilgiler gösterilecek. #2 tıklandığında 2 içerisinde girilen bilgiler. #3,#4 vb. şeklinde ilerleyecek?

Tüm sayfa yapısı bu görselden ibaret mi olacak? Yani bu görselde yer alan center table mıdır? Sayfa içerisinde mi gösterim yapılacak?
Mesajlar otomatik olarak birleştirildi:

HTML:
<div class="header">
  <h1>Senin için Örnek Çalışma</h1>
</div>

<div class="row">

<div class="col-3 menu">
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Asp.NET</li>
    <li>pyhton</li>
  </ul>
</div>

<div class="col-9">

  <h1>Senin İçin Örnek Çalışma</h1>

 <p>Bu alana CSS ile birlikte açılır tablo koymalısın. Soldan seçtikçe sağda tablo açsın yada girilmiş dinamik bir text gösterilsin.
    Akerdeon yapı da iş görür. Bu yapının ismi grid yapı. İnternette çok fazla örneği bulunuyor. </p>

  <p> Kod satırlarını inceledikçe anlayacaksın zaten :)
    Şimdiden kolay gelsin.</p>


Yukarıdaki kodu yapıştır bir html body içine. Sonra aç. Sanırım senin istediğin grid yapı buna benziyor.
ben şu an zaten bootstrap ve cssle birlikte yapıyorum tek takıldığım nokta o kodları text halinde yazdırmaktı onu da çözdüm

1628505640339.png
 
Geri
Top