Dersler·Gençler · Başlangıç

HTML ve CSS ile İlk Web Sayfanı Oluştur

İngilizce ders adı: HTML & CSS: Build Your First Web Page

Sıfırdan bir web sayfası yaparak HTML yapısını ve CSS stilini öğren. İngilizce terimlerle Türkçe kelime desteğiyle kodlamaya başla.

Bu derste, HTML ve CSS kullanarak kendi web sayfanızı nasıl oluşturacağınızı öğreneceksiniz. Temel kodlama terimlerini anlayacak, sayfa yapısı oluşturacak ve sayfanızı stilize etmeyi keşfedeceksiniz.

Bu derste ne öğreneceksiniz

HTML ve CSS'in ne olduğunu ve nasıl çalıştığını anlar.
Web sayfanız için bağlantılar, listeler ve düzen oluşturur.
CSS sınıflarını kullanarak sayfanızı profesyonelce tasarlar.

Yaklaşık 30 dakika

Key Coding Terms

Before we start coding, learn these important words. You'll see them in every web development tutorial.

English	Türkçe
tagAn HTML tag tells the browser what to display.	etiketBir HTML etiketi, tarayıcıya ekranda ne göstereceğini söyler.
elementA paragraph element holds text on the page.	öğeBir paragraf elemanı, sayfadaki metni tutar.
attributeThe src attribute tells the image where to load from.	özelliksrc özniteliği, görselin nereden yükleneceğini söyler.
headingUse a heading to title each section.	başlıkHer bölüme ad vermek için bir başlık kullan.
paragraphWrap your text in a paragraph tag.	paragrafMetnini bir paragraf etiketinin içine al.
styleCSS styles control how elements look.	stilCSS stilleri, elemanların nasıl görüneceğini kontrol eder.
propertycolor is a CSS property.	özellik

What is HTML?

HTML stands for HyperText Markup Language. It is the skeleton of every website. HTML uses tags to tell the browser what to show. Tags come in pairs: <h1>This is a heading</h1> <p>This is a paragraph</p> The opening tag <h1> starts the element. The closing tag </h1> ends it. Common HTML tags: • <h1> to <h6> — headings (h1 is the biggest) • <p> — paragraph of text • <a> — a link to another page • <img> — an image • <div> — a container to group elements • <ul> / <li> — a bullet list

Challenge 1: Create a Page Structure

Challenge 2: Links and Lists

What is CSS?

CSS stands for Cascading Style Sheets. If HTML is the skeleton, CSS is the clothing. CSS controls how things look: colours, sizes, fonts, spacing, layout. CSS has a simple pattern: selector { property: value; } For example: h1 { color: blue; font-size: 32px; } This says: "Find every <h1> and make it blue, 32 pixels big." CSS goes inside a <style> tag in the <head> of your HTML, or in a separate .css file.

Challenge 3: Style Your Page

Challenge 4: CSS Classes and Layout

Knowledge Check: HTML & CSS

Now actually practise it

Reading a lesson is the easy half. A free account unlocks the parts that make it stick — listen to every word in a British accent, and use it in a live conversation with James. Your progress is saved and the words come back for review before you forget them.

Create a free account Find your level

← All lessons