Facebook

Header Ads

Web Yazılımı - Ders v1.0 - Mossarb

Technology Nisan 24, 2022

 Merhaba Dostlar;

Bugün ilk dersimizde sizlere Web Yazılımı Yani Website  Kodlamayı Göstereceğim.

İlk önce Kod Yazmak için Gerekli Programı İndirelim.

(Derslerimizde Visual Studio Code Uygulamasını Kullanacağız.)

Programlar:

Visual Studio Code (Önerilir)

Notepad ++

Visual Studio

Phase


Dersimize Visual Studio Code Kullanarak Devam Edeceğiz.

Programı Kolayca Kurunuz.

Sonra Yeni Bir Dosya Oluşturunuz Dosyanın Adını "index.html" yapın.

İlk Olarak " ! " (ünlem) işareti koyarak Enter tuşuna basınız.

Sonra Ekrana

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
</body>
</html>


Bu Yazılar Gelecektir işte bunlar Websitemizi Oluşturur.

html lang="en" yazan yeri html lang="tr" olarak değiştirin.

title başlık demektir ve bu sayfamızın başlığını belirtir.

Document yazan yeri silip istediğiniz şeyi yazabilirsiniz.

<body>

Bu Kelime Sayfamızın İçeriğinin olduğu kısmı belirtir, tüm kod ve yazılar buraya gelecektir.

<head>

Bu Kelimenin türkçe karşılığı Kafa'dır yani bu (<head></head>) kelimeler arasında yazılan kodlar sayfamızda gözükmez ama bu olmazsa olmazdır.

Şimdi <body> </body> Kodları Arasına Kodlarımızı Yazalım ve Websitemizi Oluşturalım.

İlk önce 

<div class="header">

    </div>

Bir div oluşturalım ve ona bir sınıf verelim class="header"

sınıf adını istediğiniz gibi değiştirebilirsiniz.

Şimdi ise bu div'e bir şekil verelim ve bunun içinde Css kodlama dilini  kullanmamız gerekiyor bunu kullanmak için hiçbir özel ek ve dosyaya gerek yok sadece

<style>
        /* Buraya CSS Kodları Gelecektir. */
    </style>

style komutu ile CSS kodlaması yapabilirsiniz.

Şimdi ise CSS Kodlarımızı Yazalım.

İlk Önce Sayfamızın Arka Planına Bir Resim Koyalım ve Tam Ölçeklendirelim.

body {
            background-image: url('https://blogger.googleusercontent.com/img/a/AVvXsEjREwodImHzzb_YGFzgAw8_JV-O2QThYnLPdrJ15EAelOn6ippdWVyy3-kb32Zx75Cf8C2bVubykg9mlCA-h5o_vZDufAuiooEZ8uamELTeofqlSa_KlpXDSXHxe5oclO2alfy2tcC1zlRb10FcrhnliwXCIy9epk6AZhHFx3NY-o8l2DZGGKPm4TOD=s16000');
            background-repeat: no-repeat;
            background-size: cover;
        }

Şimdi ise header olarak adlandırdığımız div sınıfınına arka plan ayarlayalım ve biraz boyutunu değiştirelim.

.header {
            background-color: rgb(224, 224, 224);
            background-color: rgba(224, 224, 224, 0.226);
            color: black;
            backdrop-filter: blur(40px);
            border: none;
            border-radius: 20px;
            position: absolute;
            bottom: 5px;
            left: 7px;
            width: 1350px;
            height: 60px;
        }

background-color ilk satırında rengini yaptık 2. satırında ise o renge opaklık verdik.

color satırında üstüne yazılacak yazıların rengini belirledik.

backdrop-filter satırında arka plana bir bulanıklılık efekti verdik.

border satırında kenar çizgisi none yani yok dedik.

border-radius satırında header adında ki div'e kenarlarını yuvarlak yaptık.

position ile pozisyonunu belirledik isterseniz onu fixed yaparak sabit kalmasını sağlayabilirsiniz.

bottom - left aşağıdan 5px soldan 7px uzak olsun dedik.

width ile yatay olarak boyutunu belirledik.

height ile yükseklik olarak boyutunu belirledik.

ve sonuç olarak bir ekran görüntüsü,


1. Ders Bitti.

2. Derse Git

Yorum Gönder

0 Yorumlar