HTML kodum hatalı mı?

Kirik Kalp

Picopat
Katılım
5 Nisan 2020
Mesajlar
590
Çözümler
2
HTML:
<!DOCTYPE html>
<html>
<head>
    <title>MİLİTUMDEREX-Eğlenceli Discord sunucusu!</title>
</head>
<head><style type="text/css"></style></head>
<head>
    p {

    font-size: 120%;


    color: dimgray;


    }

     a {
   
    text-decoration: none;


}

a:link, a:visited, a:hover a:active {


background-color: green;


color: white;


padding: 10px 25px;


text-align: center;


texr-decoration: none;


display: inline-black;


}
</head>
<body>
</body>
</html>
Kodda hata mı var? Bir türlü istediğim şekilde olmuyor.
1611305743505.png
 
Son düzenleyen: Moderatör:

Apaçi Atcı

Hectopat
Katılım
25 Kasım 2018
Mesajlar
9.660
Makaleler
2
Çözümler
18
Yer
Evde HTML çalışıyor
Hocam çok fazla <head> etiketi kullanmışsınız. Direkt tek <head> etiketine yazmayı deneyin. <style> etkiketini </style> ile kapatmamayı deneyin.
 

brssakbss

Picopat
Katılım
19 Nisan 2020
Mesajlar
186
Bu daha doğru olur sanırım.

Kod:
<!DOCTYPE html>
<html>
    <head>
        <title>MİLİTUMDEREX-Eğlenceli Discord sunucusu!</title>
        <style>
            p {

font-size: 120%;


color: dimgray;


}

 a {

text-decoration: none;


}

a:link, a:visited, a:hover a:active {


background-color: green;


color: white;


padding: 10px 25px;


text-align: center;


text-decoration: none;


display: inline-black;


}
        </style>
    </head>
    <body>
        
    </body>
</html>
 

Black-Tim

Kilopat
Katılım
19 Mart 2015
Mesajlar
1.264
Makaleler
2
Çözümler
7
Yer
Sakarya
HTML içerisine CSS kodları eklemişsiniz. Onları style.css den çekmeniz site verimliliği ve SEO açısından daha doğru.
Fakat tek bir sayfa HTML yapacaksanız problem değil.
 
KS
Kirik Kalp

Kirik Kalp

Picopat
Katılım
5 Nisan 2020
Mesajlar
590
Çözümler
2
HTML içerisine CSS kodları eklemişsiniz. Onları style.css den çekmeniz site verimliliği ve SEO açısından daha doğru.
Fakat tek bir sayfa HTML yapacaksanız problem değil.
Ne demek istiyorsunuz?
html:
display: inline-block;
HTML:
<!DOCTYPE html>
<html>
<head><style type="text/css">
    <div class="yuvarla">
<a href="https://discord.gg/svheBDcjY6">Katıl!</a>
</div>
    .yuvarla {
width: 100px;
height: 100px;
line-height: 100px;
text-decoration: none;
text-align: center;
font-size: 25px;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
letter-spacing: -.065em;
box-shadow: 2px 2px 7px rgba(0,0,0,.2);
border-radius: 50%;
-webkit-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
box-shadow: 2px 2px 7px rgba(0,0,0,.2);
border-width: 4px;
border-style: solid;
background-color: rgba(252,227,1,1);
border-color: rgba(153,38,0,.2);
}
.yuvarla:hover {
box-shadow: 0px 0px 7px 2px rgba(0,0,0,.5);
border-color: rgba(153,38,0,.5);
}
.yuvarla a{
color: rgba(153,38,0,1);
 
}

<title>MILITUMDEREX-Eglenceli Discord sunucusu!</title>
</head>
<body>

</body>
</html>
Peki bunda nasıl bir sıkıntı var? Bunda hiç bir şey gözükmüyor.
 
Son düzenleme:

Black-Tim

Kilopat
Katılım
19 Mart 2015
Mesajlar
1.264
Makaleler
2
Çözümler
7
Yer
Sakarya
Bu link anlamanız için daha güzel olur, örnekleri de var.
Diyelim ki bir yazıya arka plan, yazı rengi vs vereceksiniz. Bunu HTML içerisine kod olarak yazmanız yerine CSS dosyasından çağırabilirsiniz.

HTML Kodları:
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<h1>İçerik başlığı</h1>
<p>İçerik yazısı</p>

</body>
</html>

CSS Kodları:
body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

Örnek olarak verdiğim kodlar, H1 başlığı diyelim CSS kodunda mavi olarak yazıldığı için direk mavi rengi çekecek.
İçerik yazısı da CSS de kırmızı olduğu için yazılar kırmızı renkte yazacak.
 
Son düzenleme:

tasarimci

Picopat
Katılım
31 Ekim 2020
Mesajlar
272
Ne demek istiyorsunuz?

HTML:
<!DOCTYPE html>
<html>
<head><style type="text/css">
    <div class="yuvarla">
<a href="https://discord.gg/svheBDcjY6">Katıl!</a>
</div>
    .yuvarla {
width: 100px;
height: 100px;
line-height: 100px;
text-decoration: none;
text-align: center;
font-size: 25px;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
letter-spacing: -.065em;
box-shadow: 2px 2px 7px rgba(0,0,0,.2);
border-radius: 50%;
-webkit-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
box-shadow: 2px 2px 7px rgba(0,0,0,.2);
border-width: 4px;
border-style: solid;
background-color: rgba(252,227,1,1);
border-color: rgba(153,38,0,.2);
}
.yuvarla:hover {
box-shadow: 0px 0px 7px 2px rgba(0,0,0,.5);
border-color: rgba(153,38,0,.5);
}
.yuvarla a{
color: rgba(153,38,0,1);

}

<title>MILITUMDEREX-Eglenceli Discord sunucusu!</title>
</head>
<body>

</body>
</html>
Peki bunda nasıl bir sıkıntı var? Bunda hiç bir şey gözükmüyor.

Daha fazla çalışman gerekiyor. Konuyu tam anlamamışsın sanırım. Farklı bir kaynaktan tekrardan dene istersen.

düzenlenmiş hali.:
<!DOCTYPE html>
<html>
<head>
    <div class="yuvarla">
<a href="https://discord.gg/svheBDcjY6">Katıl!</a>
</div>
<style>
    .yuvarla {
width: 100px;
height: 100px;
line-height: 100px;
text-decoration: none;
text-align: center;
font-size: 25px;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
letter-spacing: -.065em;
box-shadow: 2px 2px 7px rgba(0,0,0,.2);
border-radius: 50%;
-webkit-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
box-shadow: 2px 2px 7px rgba(0,0,0,.2);
border-width: 4px;
border-style: solid;
background-color: rgba(252,227,1,1);
border-color: rgba(153,38,0,.2);
}
.yuvarla:hover {
box-shadow: 0px 0px 7px 2px rgba(0,0,0,.5);
border-color: rgba(153,38,0,.5);
}
.yuvarla a{
color: rgba(153,38,0,1);

}
</style>
<title>MILITUMDEREX-Eglenceli Discord sunucusu!</title>
</head>
<body>

</body>
</html>


Bu arada <div></div> gibi kodlar genellikle <body></body> arasında kullanılır.

doğru kullanımı bu şekilde.:
<!DOCTYPE html>
<html>
<head>
<title>MILITUMDEREX-Eglenceli Discord sunucusu!</title>
<style>
    .yuvarla {
width: 100px;
height: 100px;
line-height: 100px;
text-decoration: none;
text-align: center;
font-size: 25px;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
letter-spacing: -.065em;
box-shadow: 2px 2px 7px rgba(0,0,0,.2);
border-radius: 50%;
-webkit-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
box-shadow: 2px 2px 7px rgba(0,0,0,.2);
border-width: 4px;
border-style: solid;
background-color: rgba(252,227,1,1);
border-color: rgba(153,38,0,.2);
}
.yuvarla:hover {
box-shadow: 0px 0px 7px 2px rgba(0,0,0,.5);
border-color: rgba(153,38,0,.5);
}
.yuvarla a{
color: rgba(153,38,0,1);
 
}
</style>

</head>
<body>
    <div class="yuvarla">
        <a href="https://discord.gg/svheBDcjY6">Katıl!</a>
        </div>
</body>
</html>
 
Yukarı