HTML kodum hatalı mı?

Kirik Kalp · 22 Ocak 2021

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.

Apaçi Atcı · 22 Ocak 2021

Hocam çok fazla <head> etiketi kullanmışsınız. Direkt tek <head> etiketine yazmayı deneyin. <style> etkiketini </style> ile kapatmamayı deneyin.

brssakbss · 22 Ocak 2021

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>

tasarimci · 22 Ocak 2021

Style kapanmadan yazman gerekiyor. Yaptıkların şu an CSS olarak değil HTML olarak algılanıyor.

Abdullah BİLEN · 22 Ocak 2021

Kirik Kalp dedi:
Texr-decoration: None;

text-decoration: none;

Olarak yazılması lazın ufak bir yazım hatası var.

Black-Tim · 22 Ocak 2021

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.

tasarimci · 22 Ocak 2021

brssakbss dedi:
display: inline-black;

html:

display: inline-block;

Kirik Kalp · 22 Ocak 2021

Black-Tim dedi:
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?

tasarimci dedi:
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.

Black-Tim · 22 Ocak 2021

How to add CSS

www.w3schools.com

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.

tasarimci · 22 Ocak 2021

Kirik Kalp dedi:

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>

HTML kodum hatalı mı?

Kirik Kalp

Picopat

Apaçi Atcı

Hectopat

brssakbss

Picopat

tasarimci

Picopat

Abdullah BİLEN

Hectopat

Black-Tim

Kilopat

tasarimci

Picopat

Kirik Kalp

Picopat

Black-Tim

Kilopat

How to add CSS

tasarimci

Picopat

Benzer konular

Yeni konular

Yeni mesajlar