DEV Community: Zahir Hadi Athallah

Bisakah Model 64 Juta Parameter Belajar Bernalar? - Membangun Model Bahasa 64M Parameter dari Nol

Zahir Hadi Athallah — Sun, 27 Sep 2026 11:36:04 +0000

Kalau ngomongin model bahasa sekarang, yang kebayang biasanya model dengan ukuran besar. Ratusan juta, miliaran, bahkan puluhan atau ratusan miliar parameter sudah jadi hal yang biasa ketika orang membahas kemampuan reasoning, coding, atau instruction following.

Dari situ saya justru penasaran dengan arah yang sebaliknya.

Bagaimana kalau saya mencoba membuat model bahasa yang sangat kecil, di bawah 100 juta parameter?

Apakah model sekecil itu masih bisa belajar bahasa dengan baik? Bisa mengikuti instruksi? Bisa belajar matematika dasar? Bisa reasoning? Dan apakah reinforcement learning benar-benar bisa membantu model sekecil ini?

Dari pertanyaan itu, saya mulai membangun Klyra-64M.

Klyra adalah proyek riset akademik yang saya kerjakan sebagai mahasiswa Teknik Informatika di Politeknik Negeri Jakarta. Model ini saya bangun dari random initialization, jadi bukan mengambil model bahasa yang sudah pintar lalu di-fine-tune. Benar-benar mulai dari bobot acak, alias from scratch.

Saya mulai dari model yang pada dasarnya belum tahu apa-apa, lalu melatihnya sedikit demi sedikit sampai akhirnya bisa mengikuti instruksi, melakukan reasoning sederhana, dan bahkan saya bawa sampai eksperimen reinforcement learning dan policy distillation.

Di blog ini, kita akan kupas tuntas semuanya.

Mulai Membangun

Hal pertama yang menurut saya penting untuk dijelaskan adalah Klyra benar-benar dimulai dari random weights.

Pada awal training, bobot model benar-benar acak. Jadi model belum tahu struktur bahasa, belum paham bagaimana kalimat dibentuk, belum tahu cara menjawab pertanyaan, apalagi melakukan reasoning.

Setelah melakukan riset dan mencari referensi, saya menemukan repository open-source bernama MiniMind. Repository ini menyediakan implementasi model bahasa kecil beserta arsitektur awal dan pipeline yang cukup enak dipelajari.

Untuk Klyra, saya memakai konfigurasi dasar MiniMind-3 Dense dengan ukuran sekitar 64 juta parameter, lalu saya lanjutkan dengan pipeline training dan eksperimen saya sendiri.

Konfigurasi utamanya kurang lebih seperti ini:

Komponen	Klyra-64M
Parameter	63.912.192
Transformer layers	8
Hidden size	768
Attention heads	8
KV heads	4
Vocabulary	~6.400
Context training	1.024 token

Jadi secara nyata jumlah parameter uniknya sekitar 63,9 juta, lalu saya bulatkan menjadi 64M.

Pretraining

Tahap pertama yang saya lakukan adalah mengajarkan bahasa kepada model.

Untuk tahap pretraining, saya menggunakan:

openbmb/Ultra-FineWeb-L1
konfigurasi CC-MAIN-2025-30

Pada tahap ini, Klyra melihat sekitar 1 miliar token.

Konfigurasi utama yang saya pakai:

Sequence length : 512
Peak LR         : 5e-4
Warmup          : 2%
Scheduler       : Cosine
Weight decay    : 0.1
Precision       : BF16

Hasil akhirnya:

Validation Loss : 2.3649
Perplexity      : 10.643

Tapi buat saya, bagian paling menarik sebenarnya bukan angka loss atau perplexity-nya.

Yang lebih menarik adalah melihat model yang awalnya menghasilkan token acak mulai pelan-pelan membentuk pola bahasa yang masuk akal.

Kurang lebih prosesnya seperti ini:

Random token
    ↓
Mulai mengenali pola kata
    ↓
Mulai membentuk struktur kalimat
    ↓
Bahasa mulai terbentuk

Checkpoint dari tahap pretraining ini saya beri nama Klyra-64M-Base.

Tersedia di Hugging Face:

Klyra-64M-Base

Midtraining

Setelah tahap pretraining, Klyra sudah mulai bisa menghasilkan bahasa. Tapi saya tidak langsung masuk ke instruction tuning atau SFT.

Saya ingin memperkuat knowledge dan memperluas distribusi datanya terlebih dahulu.

Jadi saya melanjutkan training dengan sekitar 2 miliar token tambahan.

Dataset	Token
DCLM-Edu	720M
FineWeb-Edu	480M
Stack-Edu	500M
FineMath	120M
InfiMM-WebMath	80M
Cosmopedia v2	100M
Total	~2B

Kalau digabung dengan pretraining sebelumnya, berarti pada titik ini Klyra sudah melihat sekitar 3 miliar token.

Pada tahap ini saya juga menaikkan context length dari 512 menjadi 1024 token, lalu menurunkan learning rate menjadi:

Peak LR : 1.5e-4

Tujuannya bukan cuma membuat model semakin fasih, tapi juga memberi distribusi data yang lebih beragam. Di dalam campuran datanya ada konten edukasi, web text, coding, matematika, sampai data edukasi sintetis.

Checkpoint hasil tahap ini saya simpan dengan nama Klyra-64M-Midtrain.

Tersedia di Hugging Face:

Klyra-64M-Midtrain

SFT

Setelah midtraining, Klyra masih merupakan base language model.

Base model pada dasarnya belajar memprediksi token berikutnya. Jadi walaupun model sudah mulai paham pola bahasa, belum tentu dia paham bahwa ketika saya memberikan sebuah instruksi, dia harus menjawab seperti seorang assistant.

Misalnya saya memberi:

Explain binary search.

Model belum tentu langsung tahu pola respons yang saya inginkan.

Karena itu saya masuk ke tahap Supervised Fine-Tuning (SFT).

Dataset utama yang saya gunakan adalah HuggingFaceTB/smol-smoltalk.

Dataset ini kemudian saya filter lagi supaya data yang dipakai lebih bersih dan sesuai dengan format training.

Setelah filtering:

Training examples : 226.049
Evaluation        : 992

Training dilakukan selama dua epoch menggunakan assistant-only loss.

Epoch	Validation Loss	Perplexity
1	1.1315	3.100
2	0.9828	2.672

Hasilnya cukup bagus, dan checkpoint ini kemudian saya beri nama Klyra-64M-Instruct.

Di tahap ini perbedaannya mulai terasa. Model yang sebelumnya lebih seperti mesin pelanjut teks mulai memahami pola percakapan:

User
  ↓
Instruction
  ↓
Assistant response

Tapi di sini saya menemukan satu masalah yang lumayan penting.

Bisa menjawab instruksi ternyata belum tentu berarti bisa reasoning.

Reasoning

Saya sempat mencoba pendekatan reasoning yang lebih kompleks, dan ternyata hasilnya tidak terlalu bagus.

Model kecil seperti Klyra cukup sensitif terhadap distribusi training. Kalau saya terlalu agresif memasukkan reasoning data, kemampuan yang sebelumnya sudah terbentuk bisa ikut berubah, bahkan menurun.

Jadi akhirnya saya memilih pendekatan yang lebih sederhana.

Saya membuat tahap Klyra-64M-Reasoning-Fundamentals.

Tujuannya bukan membuat model langsung pintar mendadak atau langsung bisa menyelesaikan soal kompetisi yang rumit. Saya mulai dari hal-hal yang jauh lebih dasar:

penjumlahan,
pengurangan,
unit rate,
reasoning pendek,
logika sederhana,
pengetahuan sains dasar,
algoritma dasar.

Komposisi data training-nya:

18.000 reasoning examples
12.000 general instruction replay
---------------------------------
30.000 total

Kenapa masih ada 12.000 general instruction replay?

Karena saya tidak ingin reasoning training membuat Klyra lupa bagaimana cara menjadi assistant. Dengan kata lain, saya mencoba menjaga supaya model tidak terlalu mudah mengalami catastrophic forgetting.

Jadi sebagian data general instruction sengaja saya putar lagi selama training.

Apakah Reasoning-nya Benar-Benar Muncul?

Setelah training selesai, saya mulai mengetesnya dengan beberapa soal sederhana.

Misalnya:

What is 17 + 28?

Klyra menjawab:

<think>
In the ones place, 7 + 8 = 15; write 5 and carry 1.
In the tens place, 1 + 2 + carry 1 = 4.
So 17 + 28 = 45.
</think>

Final answer: 45.

Saya coba soal unit rate:

If 3 notebooks cost $12,
how much do 5 notebooks cost at the same rate?

Klyra:

$12 ÷ 3 = $4 per item.
5 × $4 = $20.

Final answer: $20.

Kemudian saya coba logika sederhana:

All bloops are razzies.
Some razzies are lazzies.

Does it necessarily follow that some bloops are lazzies?

Jawabannya:

No.

Dengan penjelasan bahwa razzies yang merupakan lazzies tidak harus merupakan bloops.

Untuk model dengan ukuran sekitar 64 juta parameter, hasil seperti ini menurut saya lumayan menarik.

Tapi tentu belum sempurna.

Saya juga mulai melihat keterbatasannya. Reasoning Klyra masih belum stabil. Kadang dua soal dengan konsep yang sangat mirip bisa menghasilkan jawaban yang berbeda hanya karena struktur kalimatnya sedikit berubah.

Jadi saya belum menganggap Klyra sebagai model reasoning yang matang.

Dan justru di situlah eksperimennya mulai terasa menarik.

Bereksperimen dengan Reinforcement Learning

Setelah Reasoning Fundamentals, saya mulai penasaran lagi.

Apakah reinforcement learning bisa memperkuat kemampuan model ini?

Akhirnya saya membuat tiga cabang specialist:

Klyra-64M-Reasoning-Fundamentals
        │
        ├── Reasoning RL
        ├── Instruction-Following RL
        └── General-Capability RL

Saya menggunakan pendekatan GRPO-style training dengan reward yang sebisa mungkin bisa diverifikasi secara programatik.

Reasoning RL

Untuk reasoning, saya membaginya menjadi dua tahap.

Reasoning RL1

Komposisi datanya:

1.400 GSM8K
400 SVAMP
700 RuleTaker depth-1
----------------------
2.500 prompts

Kemudian dilanjutkan ke:

Reasoning RL2

1.200 GSM8K medium
200 SVAMP
600 RuleTaker depth-2/depth-3
-----------------------------
2.000 prompts

Di sini saya mencoba membuat reward berdasarkan jawaban yang bisa diverifikasi.

Jadi model bukan cuma diminta menghasilkan teks reasoning yang kelihatan meyakinkan, tapi reasoning tersebut tetap harus mengarah ke jawaban yang benar.

Instruction-Following RL

Cabang kedua saya fokuskan ke kemampuan mengikuti constraint.

Saya menggunakan sekitar 2.000 verified IFEval/RLVR-style prompts.

Constraint-nya bermacam-macam. Misalnya:

jawab dengan format tertentu,
jangan gunakan kata tertentu,
gunakan JSON,
gunakan jumlah kalimat tertentu,
gunakan kapitalisasi tertentu,
jangan gunakan koma.

Kalau constraint terpenuhi, model mendapatkan reward.

Tujuannya sederhana, saya ingin model kecil ini tidak cuma menjawab, tapi benar-benar bisa mengikuti instruksi dengan lebih disiplin.

General-Capability RL

Cabang ketiga saya gunakan untuk kemampuan umum.

Datanya berasal dari training split beberapa dataset:

Dataset	Prompt
ARC-Easy	700
PIQA	900
OpenBookQA	500
CommonsenseQA	900
Total	3.000

Di sini saya hanya menggunakan training split. Test split tetap saya simpan untuk evaluasi.

Sekarang Saya Punya Tiga Specialist

Setelah itu muncul masalah baru.

Saya punya:

reasoning specialist,
instruction-following specialist,
general-capability specialist.

Tapi tentunya saya tidak ingin berakhir dengan tiga model berbeda.

Saya ingin ketiga kemampuan itu kembali masuk ke satu model 64M.

Dari situ saya mencoba pendekatan Online Policy Distillation (OPD).

Kurang lebih strukturnya seperti ini:

                  Reasoning RL2
                      │
                      │
IF RL ───────────► OPD Student ◄──────── General RL
                      │
                      ▼
                Klyra-64M-RL-OPD

Student-nya sendiri tidak dimulai dari salah satu specialist.

Saya memulai student lagi dari Klyra-64M-Reasoning-Fundamentals.

Lalu student belajar dari trajectory specialist yang berhasil diverifikasi.

Training OPD dilakukan selama 500 steps.

Konfigurasinya:

Batch size     : 4
Peak LR        : 8e-6
Weight decay   : 0.01
Teachers       : 3 specialist policies

Secara teori saya ingin mendapatkan:

Reasoning
+
Instruction Following
+
General Capability

di dalam satu model.

Ternyata hasilnya tidak sesederhana itu, hehe.

Reinforcement Learning Ternyata Tidak Otomatis Membuat Model Lebih Pintar

Setelah RL-OPD selesai, saya melakukan beberapa tes.

Dan ada beberapa hasil yang cukup bikin saya garuk kepala.

Contohnya:

What is the chemical formula for water?

Reasoning-Fundamentals bisa menjawab:

H2O

Tapi RL-OPD pernah menjawab:

The chemical formula for water is water.

Saya juga mencoba:

A store has 36 red pens and twice as many blue pens.
It sells 15 blue pens.
How many blue pens remain?

Jawaban yang benar seharusnya:

36 × 2 = 72
72 - 15 = 57

Tapi model malah menghasilkan:

36 - 15 = 22

Bahkan untuk instruksi sederhana seperti:

Reply with exactly this text and nothing else:
Klyra is good

model RL-OPD juga masih bisa gagal mengikutinya.

Di sini saya mulai melihat sesuatu yang menurut saya lumayan penting.

Reinforcement learning tidak otomatis membuat semua kemampuan model meningkat.

Terutama untuk model sekecil ini.

Kalau kapasitas model terbatas, meningkatkan satu capability bisa saja mengganggu capability yang lain.

Dan menurut saya, justru ini salah satu hasil paling menarik dari seluruh eksperimen.

Lalu Bagaimana Kalau Dilihat dari Benchmark?

Saya kemudian menguji tiga checkpoint utama Klyra menggunakan:

ARC-Easy
PIQA
OpenBookQA
HellaSwag
Social-IQA

Kalau dilihat dari nilai rata-ratanya:

Instruct               : 36.63
Reasoning Fundamentals : 36.92
RL-OPD                 : 36.79

Reasoning Fundamentals meningkatkan mean sekitar +0,29 percentage point dibanding Instruct.

Sedangkan RL-OPD turun sekitar -0,13 percentage point dibanding Reasoning Fundamentals.

Jadi secara benchmark umum, RL-OPD sebenarnya tidak jatuh jauh. Kemampuan umumnya kurang lebih masih bertahan.

Bahkan RL-OPD mencatat skor Klyra tertinggi pada:

PIQA       : 59.36
Social-IQA : 35.98

Tapi secara aggregate score, hasilnya tetap belum mengalahkan Reasoning-Fundamentals.

Karena itu, sampai sekarang checkpoint yang paling saya rekomendasikan masih Klyra-64M-Reasoning-Fundamentals.

Apakah Klyra Model Terbaik di Bawah 100M Parameter?

Jawabannya tentu saja belum.

Saya juga tidak mau membuat klaim yang hasil benchmark-nya memang belum mendukung.

Ada beberapa model sub-100M lain yang melaporkan hasil lebih tinggi pada benchmark yang overlap, misalnya:

Kiyo-65M,
Supra-50M,
cRia-LM-75M,
Rose,
tinctura,
Surjo,
Veyra,
dan beberapa model lainnya.

Tapi ketika membandingkan model-model tersebut, saya menemukan sesuatu yang menurut saya justru lebih menarik.

Klyra dilatih dengan jumlah token yang jauh lebih sedikit.

Saat ini Klyra baru melihat sekitar ~3B cumulative pretraining + midtraining tokens.

Kiyo menurut saya salah satu perbandingan yang paling menarik.

Jumlah parameternya hampir sama:

Klyra : ~63.9M
Kiyo  : ~65.0M

Tapi training exposure-nya:

Klyra : ~3B
Kiyo  : ~80B

Jadi Kiyo sudah melihat sekitar 26x lebih banyak token.

Dari sini saya mulai berpikir kalau bottleneck Klyra saat ini mungkin bukan cuma ukuran model.

Bisa jadi Klyra memang masih undertrained.

Data Itu Ternyata Penting Banget

Awalnya saya cukup banyak memikirkan hal-hal seperti:

parameter count,
architecture,
learning rate,
optimizer,
scheduler.

Dan ya, semuanya memang penting.

Tapi setelah melewati semua eksperimen ini, saya justru semakin merasa kalau data curriculum punya pengaruh yang luar biasa besar.

Contohnya saat Reasoning Fundamentals.

Daripada menggunakan reasoning data 100%, saya mencampurnya dengan:

reasoning data
+
general instruction replay

Hasilnya terasa jauh lebih sehat.

Model bisa mendapat kemampuan reasoning tambahan tanpa langsung kehilangan kemampuan yang sebelumnya sudah terbentuk.

Sebaliknya, ketika specialization terlalu agresif, behavior model bisa berubah cukup cepat.

Untuk model kecil, efek ini menurut saya terasa jauh lebih jelas.

Kapasitasnya terbatas.

Kalau terlalu banyak capability dipaksa masuk tanpa strategi retention yang bagus, kemampuan lain bisa ikut tergeser.

Ini salah satu pelajaran terbesar yang saya dapat dari Klyra.

Kenapa Tidak Langsung Membuat Model 1B atau Lebih Besar?

Karena justru batasan 64M ini adalah bagian dari eksperimennya.

Kalau saya langsung menggunakan model miliaran parameter, tentu kemungkinan besar hasil akhirnya akan jauh lebih kuat.

Tapi pertanyaan yang ingin saya jawab bukan:

"Bagaimana cara membuat model paling pintar?"

Pertanyaannya lebih ke:

"Seberapa jauh model sekecil ini bisa saya dorong?"

Model kecil juga membuat proses eksperimen jauh lebih masuk akal buat saya.

Training lebih murah, inference lebih ringan, benchmark lebih cepat, dan ketika saya mengubah satu bagian pipeline, efeknya lebih mudah kelihatan.

Buat saya, itu yang membuat Klyra menarik sebagai sebuah eksperimen.

Apa Selanjutnya?

Setelah melihat semua hasil ini, saya justru belum terlalu tertarik langsung menambah jumlah parameter.

Saya lebih penasaran dengan satu hal:

Apa yang terjadi kalau Klyra tetap 64M, tapi dilatih jauh lebih lama?

Saat ini Klyra baru melihat sekitar 3B tokens.

Saya ingin mencoba mendorongnya ke jumlah token yang lebih besar, misalnya 5B, 10B, bahkan 20B+ cumulative training tokens, tanpa mengubah ukuran model.

Kalau foundation-nya sudah lebih kuat, baru saya ingin mencoba lagi beberapa eksperimen seperti:

reasoning training yang lebih matang,
reinforcement learning,
reward design yang lebih bagus,
distillation yang lebih seimbang,
coding specialization,
tool use,
longer context,
sampai agentic capability.

Menurut saya, eksperimen seperti itu justru akan jauh lebih menarik daripada langsung memperbesar model.

Jadi, Bisakah Model 64 Juta Parameter Belajar Bernalar?

Setelah semua eksperimen ini, jawaban saya:

Bisa, tapi kemampuannya masih terbatas dan cukup rapuh.

Klyra bisa mempelajari reasoning sederhana.

Ia bisa melakukan beberapa operasi aritmetika, memahami unit rate, menjawab beberapa soal logical deduction, dan pada beberapa soal bahkan menghasilkan reasoning step-by-step yang masuk akal.

Tapi perubahan kecil pada struktur pertanyaan masih bisa membuatnya gagal.

Dari percobaan RL, saya juga belajar kalau reinforcement learning bukan sebuah metode ajaib yang langsung membuat model jadi jauh lebih pintar.

Kadang satu capability naik.

Kadang capability lain justru turun.

Dan buat saya, justru bagian seperti ini yang bikin proyek Klyra seru.

Saya tidak membuat Klyra untuk membuktikan bahwa model 64M bisa menggantikan model miliaran parameter.

Saya membuatnya karena saya ingin tahu, kira-kira :

Seberapa banyak kemampuan yang sebenarnya bisa dibangun di dalam model sekecil ini?

Dan sejauh ini, rasanya saya baru mulai menggaruk permukaannya saja.

Penutup

Kalau ada satu hal yang paling saya rasakan selama mengerjakan Klyra, mungkin ini:

membangun model bahasa dari nol ternyata bukan cuma soal membuat model yang mengerti bahasa dan instruksi kita

Ada banyak hal kecil yang baru terasa ketika benar-benar dijalani sendiri. Mulai dari memilih data, menyusun curriculum, melihat model tiba-tiba lebih pintar di satu sisi tapi malah lupa sesuatu di sisi lain, sampai bengong ketika hasil RL yang secara teori harusnya lebih bagus ternyata jawabannya malah lebih aneh, wkwk.

Tapi justru karena itu proyek ini terasa seru.

Setiap checkpoint punya ceritanya sendiri. Ada yang berhasil, ada yang gagal, dan ada juga eksperimen yang hasil akhirnya tidak sesuai ekspektasi tetapi malah memberi insight baru.

Saya masih ingin melihat seberapa jauh model 64M ini bisa berkembang kalau diberi data yang lebih banyak, training yang lebih matang, dan eksperimen yang lebih rapi.

Mungkin nantinya hasilnya tetap mentok.

Mungkin juga ada sesuatu yang menarik setelah 10B atau 20B token.

Saya sendiri belum tahu.

Dan menurut saya, justru itu bagian terbaiknya.

Klyra-64M hanya proyek iseng semata. Sampai ketemu di eksperimen berikutnya. :)

Bug SQL Injection - Sub bawaslu.go.id - Badan Pengawas Pemilihan Umum

Zahir Hadi Athallah — Mon, 13 Nov 2023 06:46:30 +0000

13 November 2023 mengirim ke email csirt@bawaslu.go.id

HTML Tutorials: Introduction to HTML5 Geolocation #10

Zahir Hadi Athallah — Mon, 26 Jun 2023 07:03:49 +0000

Introduction:

Welcome to Part 10 of our HTML tutorials! In this article, we will explore HTML5 Geolocation, a powerful feature that allows web applications to access the user's location information. With Geolocation, you can create location-based services, personalize content based on user location, and build location-aware applications. Let's dive into the world of HTML5 Geolocation!

What is HTML5 Geolocation?

HTML5 Geolocation provides a way for web applications to retrieve the geographical location of the user's device. It leverages various sources, such as GPS, IP address, and Wi-Fi signals, to determine the user's location. However, it's important to note that the user's permission is required to access their location information.

Retrieving the User's Location:

To retrieve the user's location using Geolocation, we use the navigator.geolocation object, which provides methods and properties for location-based functionality.

Example:

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
} else {
    console.log("Geolocation is not supported by this browser.");
}

function showPosition(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;

    console.log("Latitude: " + latitude);
    console.log("Longitude: " + longitude);
}

In the example above, we check if the browser supports Geolocation using the navigator.geolocation object. If supported, we call the getCurrentPosition() method, which prompts the user for permission and retrieves the current position. The showPosition() function is invoked with a Position object containing the latitude and longitude coordinates.

Handling Geolocation Errors:

There are several possible errors that can occur when retrieving the user's location. To handle these errors, we can provide an error callback function to the getCurrentPosition() method.

Example:

function showError(error) {
    switch (error.code) {
        case error.PERMISSION_DENIED:
            console.log("User denied the request for Geolocation.");
            break;
        case error.POSITION_UNAVAILABLE:
            console.log("Location information is unavailable.");
            break;
        case error.TIMEOUT:
            console.log("The request to get user location timed out.");
            break;
        case error.UNKNOWN_ERROR:
            console.log("An unknown error occurred.");
            break;
    }
}

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
    console.log("Geolocation is not supported by this browser.");
}

In the example above, we provide an error callback function that handles different error codes. We pass this function as the second parameter to the getCurrentPosition() method.

Geolocation Watch:

In addition to retrieving the user's current position, we can also continuously monitor their location using the watchPosition() method.

Example:

var watchID;

function startWatch() {
    watchID = navigator.geolocation.watchPosition(showPosition);
}

function stopWatch() {
    navigator.geolocation.clearWatch(watchID);
}

startWatch(); // Start watching the user's position

In the example above, we use the watchPosition() method to start watching the user's position. We store the watch ID returned by the method, which can later be used to stop watching using the clearWatch() method.

Geolocation API Options:

The Geolocation API provides additional options to customize the location retrieval process. These options include setting the maximum age of cached position data and specifying the desired accuracy level.

Example:

var options = {
    enableHighAccuracy: true,
    maximumAge: 30000,
    timeout: 5000
};

navigator.geolocation.getCurrentPosition(showPosition, showError, options);

In the example above, we define an options object with properties like enableHighAccuracy, maximumAge, and timeout. These properties allow us to control the accuracy of the location, the maximum age of cached data, and the timeout period.

Closing:

HTML5 Geolocation is a powerful feature that enables web applications to access and utilize the user's location information. In this tutorial, we explored how to retrieve the user's location, handle geolocation errors, use the Geolocation Watch feature, and customize the location retrieval process using options. By leveraging Geolocation, you can create location-aware web applications that deliver personalized and location-based experiences to your users. Happy coding!

HTML Tutorials: Introduction to HTML5 Web Storage #9

Zahir Hadi Athallah — Mon, 26 Jun 2023 06:53:07 +0000

Introduction:

Welcome to Part 9 of our HTML tutorials! In this article, we will explore HTML5 Web Storage, a powerful feature that allows web applications to store data locally on the user's device. With Web Storage, you can persist data across sessions, enhance user experiences, and build responsive web applications. Let's dive into the world of HTML5 Web Storage!

What is HTML5 Web Storage?

HTML5 Web Storage provides a way for web applications to store data locally on the user's device. It consists of two mechanisms: localStorage and sessionStorage. Both mechanisms store key-value pairs, but they differ in terms of persistence and scope.

localStorage:

The localStorage mechanism allows you to store data that persists even when the browser is closed and reopened. The data stored in localStorage remains available until explicitly removed by the web application or cleared by the user.

Example:

// Storing data in localStorage
localStorage.setItem("username", "John");
localStorage.setItem("theme", "dark");

// Retrieving data from localStorage
var username = localStorage.getItem("username");
var theme = localStorage.getItem("theme");

console.log("Username: " + username);
console.log("Theme: " + theme);

// Removing data from localStorage
localStorage.removeItem("username");

In the example above, we store the username and theme in localStorage. We can then retrieve the values using getItem() and remove the username using removeItem().

sessionStorage:

The sessionStorage mechanism allows you to store data that is available only within the current browser session. The data stored in sessionStorage is cleared when the browser session ends or is closed.

Example:

// Storing data in sessionStorage
sessionStorage.setItem("token", "abcd1234");
sessionStorage.setItem("isLoggedIn", "true");

// Retrieving data from sessionStorage
var token = sessionStorage.getItem("token");
var isLoggedIn = sessionStorage.getItem("isLoggedIn");

console.log("Token: " + token);
console.log("Is Logged In: " + isLoggedIn);

// Removing data from sessionStorage
sessionStorage.removeItem("token");

In the example above, we store the authentication token and login status in sessionStorage. We can then retrieve the values using getItem() and remove the token using removeItem().

Limitations and Considerations:

Both localStorage and sessionStorage have a maximum storage limit, typically around 5MB per origin.
The data stored in Web Storage is specific to the origin (i.e., domain, protocol, and port). Data from one origin cannot be accessed by another.
The data stored in Web Storage is accessible to JavaScript running within the same origin, so be cautious about storing sensitive information.

Working with Objects:

Web Storage only supports storing data in string format. If you want to store complex data structures like objects or arrays, you need to convert them to a string format using JSON.stringify() when storing and JSON.parse() when retrieving.

Example:

var user = {
    name: "John",
    age: 30
};

localStorage.setItem("user", JSON.stringify(user));

var storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name); // Output: John

In the example above, we convert the user object to a string using JSON.stringify() before storing it in localStorage. When retrieving, we parse the stored value using JSON.parse() to convert it back to an object.

Closing:

HTML5 Web Storage provides a convenient and efficient way to store data locally within web applications. In this tutorial, we explored the localStorage and sessionStorage mechanisms, learned how to store, retrieve, and remove data, and considered the limitations and best practices when working with Web Storage. By leveraging Web Storage, you can create responsive and personalized web experiences for your users. Happy coding!

HTML Tutorials: Introduction to HTML5 Audio and Video #8

Zahir Hadi Athallah — Mon, 26 Jun 2023 06:47:06 +0000

Introduction:

Welcome to Part 8 of our HTML tutorials! In this article, we will explore HTML5 audio and video elements, which allow us to embed and control media content directly in web pages. With HTML5 audio and video, you can enhance user experiences by providing multimedia content without relying on external plugins or players. Let's dive into the world of HTML5 audio and video!

HTML5 Audio Element:

The <audio> element in HTML5 allows us to embed audio content in a web page. We can specify the audio file source using the src attribute and provide alternative content within the element for browsers that do not support the audio element.

Example:

<audio controls>
    <source src="audio/music.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

In the example above, we have added an audio element with the controls attribute, which displays the default audio controls (play, pause, volume) to the user. We have also provided an audio source in the MP3 format, along with alternative content for unsupported browsers.

HTML5 Video Element:

Similarly, the <video> element in HTML5 allows us to embed video content in a web page. We can specify the video file source using the src attribute and provide alternative content within the element for browsers that do not support the video element.

Example:

<video controls>
    <source src="video/video.mp4" type="video/mp4">
    Your browser does not support the video element.
</video>

In the example above, we have added a video element with the controls attribute, enabling the default video controls for the user. We have specified a video source in the MP4 format and provided alternative content for unsupported browsers.

Controlling Audio and Video Playback:

HTML5 audio and video elements come with built-in controls that allow users to play, pause, seek, adjust volume, and more. However, we can also control media playback programmatically using JavaScript.

Example:

var audio = document.getElementById("myAudio");
var video = document.getElementById("myVideo");

function playMedia() {
    audio.play();
    video.play();
}

function pauseMedia() {
    audio.pause();
    video.pause();
}

function seekMedia(seconds) {
    audio.currentTime += seconds;
    video.currentTime += seconds;
}

In the example above, we have obtained references to the audio and video elements using JavaScript. We then define functions to play, pause, and seek the media by adjusting the currentTime property.

Styling Audio and Video Elements:
HTML5 audio and video elements can be styled using CSS to match the design of your web page. You can target the <audio> and <video> elements or their parent containers to apply custom styles.

Example:

audio {
    width: 100%;
}

video {
    width: 100%;
}

In the example above, we use CSS to set the width of the audio and video elements to 100%, making them responsive and fill the available space.

Closing:

HTML5 audio and video elements provide a seamless way to embed multimedia content directly in web pages. In this tutorial, we explored the basics of using <audio> and <video> elements, controlling media playback with JavaScript, and styling the elements using CSS. By harnessing the power of HTML5 audio and video, you can create engaging and interactive multimedia experiences for your users. Happy coding!

HTML Tutorials: Introduction to HTML5 Canvas #7

Zahir Hadi Athallah — Mon, 26 Jun 2023 06:40:15 +0000

Introduction:

Welcome to Part 7 of our HTML tutorials! In this article, we will explore HTML5 Canvas, a powerful feature that allows us to create and manipulate graphics directly in the browser using JavaScript. HTML5 Canvas provides a versatile platform for drawing shapes, images, animations, and interactive elements on a web page. Let's dive into the world of HTML5 Canvas!

What is HTML5 Canvas?

HTML5 Canvas is an element that provides a blank rectangular area on a web page, where you can draw and manipulate graphics using JavaScript. The Canvas API gives you low-level control over individual pixels, allowing you to create dynamic and interactive visualizations.

Setting up the Canvas:

To create a canvas element, use the <canvas> tag. You can set the width and height attributes to define the dimensions of the canvas.

Example:

<canvas id="myCanvas" width="500" height="300"></canvas>

In the example above, we have created a canvas with a width of 500 pixels and a height of 300 pixels. We have assigned it the ID "myCanvas" for later reference in JavaScript.

Drawing on the Canvas:

To draw on the canvas, we use JavaScript and the Canvas API. The API provides methods and properties to create paths, shapes, lines, text, images, and more.

Example:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// Drawing a rectangle
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 200, 100);

// Drawing a circle
ctx.beginPath();
ctx.arc(300, 150, 50, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();

// Drawing text
ctx.font = "24px Arial";
ctx.fillStyle = "black";
ctx.fillText("Hello, Canvas!", 100, 250);

In the example above, we obtain the canvas element and its 2D rendering context (ctx). We then use various methods to draw a rectangle, a circle, and text on the canvas.

Animating the Canvas:

One of the powerful features of HTML5 Canvas is the ability to create animations. By redrawing the canvas repeatedly at different intervals, we can create dynamic and interactive visuals.

Example:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var x = 0;

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw a moving rectangle
    ctx.fillStyle = "blue";
    ctx.fillRect(x, 50, 200, 100);

    x += 1; // Move the rectangle

    requestAnimationFrame(animate);
}

animate();

In the example above, we define an animate function that clears the canvas and draws a moving rectangle. The requestAnimationFrame method is used to repeatedly call the animate function, creating a smooth animation effect.

Interacting with the Canvas:

You can also make the canvas interactive by capturing user input, such as mouse clicks or touch events, and responding accordingly.

Example:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

canvas.addEventListener("mousedown", function(event) {
    var x = event.clientX - canvas.offsetLeft;
    var y = event.clientY - canvas.offsetTop;

    // Draw a circle at the clicked position
    ctx.beginPath();
    ctx.arc(x, y, 10, 0, 2 * Math.PI);
    ctx.fillStyle = "green";
    ctx.fill();
});

In the example above, we add an event listener to the canvas to capture the mousedown event. When the user clicks on the canvas, we calculate the coordinates relative to the canvas and draw a circle at that position.

Closing:

HTML5 Canvas opens up a world of possibilities for creating dynamic and interactive graphics on the web. In this tutorial, we explored the basics of HTML5 Canvas, including setting up the canvas element, drawing shapes, creating animations, and capturing user input. By mastering the Canvas API, you can unleash your creativity and build visually stunning web applications. Happy coding & canvas drawing!

HTML Tutorials: Introduction to HTML5 APIs #6

Zahir Hadi Athallah — Sun, 25 Jun 2023 07:48:55 +0000

Introduction:

Welcome to Part 6 of our HTML tutorials! In this article, we will explore HTML5 APIs (Application Programming Interfaces) and learn how to leverage them to enhance web applications with additional features and functionality. HTML5 APIs provide access to various capabilities of the user's device or browser, allowing developers to create interactive and dynamic web experiences. Let's dive into the world of HTML5 APIs!

What are HTML5 APIs?

HTML5 APIs are sets of functionalities and interfaces that are built into modern web browsers. These APIs provide developers with access to device-specific features and services, allowing them to create powerful and feature-rich web applications. HTML5 APIs cover a wide range of areas, including multimedia, geolocation, storage, notifications, and more.

Geolocation API:

The Geolocation API allows web applications to access the user's geographical location information. This can be useful for location-based services, mapping applications, or personalized experiences.

Example:

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success, error);
} else {
    console.log("Geolocation is not supported by this browser.");
}

function success(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    console.log("Latitude: " + latitude + ", Longitude: " + longitude);
}

function error(error) {
    console.log("Error occurred while retrieving geolocation.");
}

In the example above, we check if the browser supports the Geolocation API. If supported, we retrieve the current position and display the latitude and longitude values.

Storage APIs:

HTML5 provides two storage APIs: localStorage and sessionStorage. These APIs allow web applications to store data locally on the user's device, persisting even after the browser is closed.

Example:

// Storing data in localStorage
localStorage.setItem("username", "John");

// Retrieving data from localStorage
var username = localStorage.getItem("username");
console.log("Username: " + username);

// Removing data from localStorage
localStorage.removeItem("username");

In the example above, we store the username "John" in localStorage, retrieve it, and then remove it.

Notification API:

The Notification API enables web applications to display notifications to the user, similar to native mobile or desktop applications.

Example:

if (Notification.permission === "granted") {
    showNotification();
} else if (Notification.permission !== "denied") {
    Notification.requestPermission().then(function(permission) {
        if (permission === "granted") {
            showNotification();
        }
    });
}

function showNotification() {
    var notification = new Notification("Hello!", { body: "This is a notification." });
}

In the example above, we check the permission status for notifications. If permission is granted, we display a notification. If not, we request permission and display the notification if granted.

Multimedia APIs:

HTML5 includes multimedia APIs, such as the Audio and Video APIs, which provide a programmatic way to control and manipulate audio and video elements on web pages.

Example:

var video = document.getElementById("myVideo");

function playVideo() {
    video.play();
}

function pauseVideo() {
    video.pause();
}

In the example above, we have a video element with the ID "myVideo". We define functions to play and pause the video using JavaScript.

Closing:

HTML5 APIs empower web developers to create rich and interactive web applications by accessing device-specific features and services. In this tutorial, we explored some of the popular HTML5 APIs, including the Geolocation API, Storage APIs, Notification API, and Multimedia APIs. By harnessing the power of HTML5 APIs, you can create compelling user experiences and unlock the full potential of web development. Keep exploring the vast world of HTML5 APIs and experiment with different APIs to build innovative web applications. Happy coding!

HTML Tutorials: Introduction to HTML Forms and Input Validation #5

Zahir Hadi Athallah — Sun, 25 Jun 2023 07:34:55 +0000

Introduction:

Welcome to Part 5 of our HTML tutorials! In this article, we will explore HTML forms and learn how to create interactive web forms for collecting user input. Forms are an essential element of many websites, enabling users to submit data, make selections, and interact with web applications. We will also cover input validation to ensure that the data entered by users meets specific criteria. Let's dive into HTML forms and input validation!

Creating an HTML Form:

To create an HTML form, we use the <form> tag. Within the form, we can add various input elements such as text fields, checkboxes, radio buttons, dropdown lists, and more.

Example:

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <input type="submit" value="Submit">
</form>

In the example above, we have created a simple form with two input fields for name and email, along with a submit button.

Input Types and Attributes:

HTML provides different input types and attributes to control the behavior and validation of form inputs. Some commonly used input types include:

text: For single-line text input.
email: For email address input.
password: For password input (characters are masked).
checkbox: For multiple-choice selection.
radio: For single-choice selection.
select: For dropdown selection.

Example:

<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

<select id="country" name="country">
    <option value="usa">USA</option>
    <option value="uk">UK</option>
    <option value="canada">Canada</option>
</select>

In the example above, we have used radio buttons for gender selection and a dropdown select for country selection.

Input Validation:

Input validation is essential to ensure that users enter data in the correct format and meet specific requirements. HTML provides built-in form validation using attributes such as required, pattern, min, max, and more.

Example:

<label for="age">Age:</label>
<input type="number" id="age" name="age" required min="18" max="99">

<label for="password">Password:</label>
<input type="password" id="password" name="password" required minlength="8">

In the example above, we have added validation to the age input, making it required and specifying minimum and maximum values. For the password input, we have set it as required and defined a minimum length.

Handling Form Submissions:

To handle form submissions, we can use server-side programming languages like PHP, Python, or JavaScript frameworks like Node.js. The form data can be sent to a server for processing and storing.

Example (JavaScript):

<script>
    function handleSubmit(event) {
        event.preventDefault(); // Prevents the form from submitting normally

        // Get form input values
        var name = document.getElementById("name").value;
        var email = document.getElementById("email").value;

        // Perform further processing or data validation

        // Display success message
        alert("Form submitted successfully!");
    }
</script>

<form onsubmit="handleSubmit(event)">
    <!-- Form inputs go here -->
    <input type="submit" value="Submit">
</form>

In the example above, we have added a JavaScript function to handle form submissions. The function prevents the form from submitting normally, retrieves the form input values, and performs further processing or validation.

Closing:

HTML forms are essential for collecting user input and interacting with web applications. In this tutorial, we explored creating HTML forms, using various input types and attributes, implementing input validation, and handling form submissions. By understanding these concepts, you can create interactive and user-friendly web forms that enhance the user experience. Keep experimenting and expanding your knowledge of HTML forms to build robust web applications. Happy coding!

HTML Tutorials: Responsive Web Design with CSS Media Queries #4

Zahir Hadi Athallah — Sun, 25 Jun 2023 07:26:45 +0000

Introduction:

Welcome to Part 4 of our HTML tutorials! In this article, we will delve into responsive web design and learn how to create websites that adapt to different devices and screen sizes. With the increasing variety of devices used to browse the web, it is crucial to ensure that our web pages are accessible and visually appealing across various platforms. CSS media queries allow us to apply different styles based on the characteristics of the user's device. Let's explore responsive web design using CSS media queries!

What is Responsive Web Design?

Responsive web design is an approach to building websites that respond and adapt to different screen sizes and devices. With responsive design, the layout and content of a web page automatically adjust based on the user's device, providing an optimal viewing experience. This is achieved using CSS media queries.

CSS Media Queries:

CSS media queries allow us to apply different styles based on certain conditions, such as the screen width, device orientation, or screen resolution. Media queries consist of a media type and one or more expressions that define the conditions for the styles to be applied.

Example:

@media screen and (max-width: 768px) {
    /* CSS styles for screens up to 768px wide */
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* CSS styles for screens between 768px and 1024px wide */
}

@media screen and (min-width: 1024px) {
    /* CSS styles for screens larger than 1024px wide */
}

Creating a Responsive Layout:

To create a responsive layout, we can use CSS techniques such as fluid grids and flexible images. A common approach is to use CSS frameworks like Bootstrap or Foundation, which provide pre-built responsive components and grid systems.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Web Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6">
                <h2>About Us</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="col-12 col-md-6">
                <img src="image.jpg" alt="Image">
            </div>
        </div>
    </div>
</body>
</html>

In the example above, we use a responsive grid system to create a two-column layout. The col-12 class specifies that the columns should occupy the full width on small screens, and the col-md-6 class specifies that the columns should occupy half the width on medium-sized screens and above.

Handling Images in Responsive Design:

Images play a significant role in web design, and they need to be optimized for different screen sizes. We can use CSS techniques, such as setting the max-width property to ensure images scale proportionally.

Example:

img {
    max-width: 100%;
    height: auto;
}

In the example above, the max-width: 100% ensures that the image scales down to fit the width of its container while maintaining its aspect ratio.

Testing Responsiveness:

To test the responsiveness of your web page, you can use browser developer tools or online responsive design testing tools. These tools allow you to simulate different device sizes and orientations to see how your web page behaves.

Closing:

Responsive web design is essential for creating websites that provide a great user experience across various devices and screen sizes. In this tutorial, we explored CSS media queries, which enable us to apply different styles based on device characteristics. We also learned about creating responsive layouts using grid systems and handling images in responsive design. By implementing responsive techniques, you can ensure that your web pages are accessible and visually appealing to a wide range of users. Happy coding and designing!

HTML Tutorials: Building Interactive Web Pages with JavaScript #3

Zahir Hadi Athallah — Sun, 25 Jun 2023 07:19:00 +0000

Introduction:

Welcome to Part 3 of our HTML tutorials! In this article, we will explore the fundamentals of JavaScript and learn how to add interactivity to our web pages. JavaScript is a versatile programming language that runs in the browser and allows us to create dynamic and interactive web experiences. By combining HTML, CSS, and JavaScript, we can build powerful and engaging web applications. Let's get started!

Introduction to JavaScript:

JavaScript is a scripting language that enables us to add behavior to our web pages. It allows us to manipulate HTML elements, handle events, perform calculations, and much more. JavaScript code is typically embedded within <script> tags in an HTML document.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, <span id="name">Guest</span>!</h1>

    <button onclick="changeName()">Change Name</button>

    <script>
        function changeName() {
            var newName = prompt("Enter your name:");
            document.getElementById("name").textContent = newName;
        }
    </script>
</body>
</html>

In the example above, we have added a JavaScript function changeName() that changes the content of the <span> element when the "Change Name" button is clicked.

Handling Events:

JavaScript allows us to handle various events triggered by user actions, such as clicking a button, hovering over an element, or submitting a form. We can attach event handlers to HTML elements using JavaScript.

Example:

<button onclick="myFunction()">Click Me</button>

<script>
    function myFunction() {
        alert("Button clicked!");
    }
</script>

In the example above, the myFunction() is executed when the button is clicked, displaying an alert message.

Manipulating HTML Elements:

JavaScript provides methods to manipulate HTML elements dynamically. We can change the content, style, attributes, and more of elements using JavaScript.

Example:

<h2 id="demo">Hello!</h2>

<script>
    var element = document.getElementById("demo");
    element.innerHTML = "Hello, JavaScript!";
    element.style.color = "red";
</script>

In the example above, the JavaScript code selects the <h2> element with the ID "demo" and changes its content to "Hello, JavaScript!" and its color to red.

Working with Forms:

JavaScript can validate user input and perform actions based on form submissions. We can access form elements, validate input, and respond to events like form submission.

Example:

<form onsubmit="validateForm()">
    <input type="text" id="name" placeholder="Enter your name">
    <input type="submit" value="Submit">
</form>

<script>
    function validateForm() {
        var name = document.getElementById("name").value;
        if (name === "") {
            alert("Please enter your name.");
            return false;
        }
    }
</script>

In the example above, the JavaScript function validateForm() checks if the name input field is empty. If it is, an alert message is displayed, and the form submission is prevented.

External JavaScript:

While inline JavaScript can be useful, it is often better to separate the JavaScript code into an external file and link it to the HTML document using the <script> tag.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>
<body>
    <!-- HTML content goes here -->
</body>
</html>

In the example above, the JavaScript code is stored in an external file called "script.js" and linked to the HTML page using the <script> tag.

Closing:

JavaScript adds interactivity and dynamic functionality to web pages. In this tutorial, we explored the basics of JavaScript, including handling events, manipulating HTML elements, working with forms, and using external JavaScript files. With JavaScript, you can create engaging user experiences and bring your web pages to life. Keep practicing and experimenting with JavaScript to unlock its full potential. Happy coding!

HTML Tutorials: Enhancing Web Pages with CSS #2

Zahir Hadi Athallah — Sun, 25 Jun 2023 07:11:07 +0000

Introduction:

Welcome to Part 2 of our HTML tutorials! In this article, we will explore the world of CSS (Cascading Style Sheets) and learn how to enhance the visual presentation of our web pages. CSS allows us to apply styles, such as colors, fonts, and layouts, to our HTML elements. By combining HTML with CSS, we can create visually appealing and engaging web pages. Let's dive in!

A. Linking CSS to HTML:

To apply CSS styles to an HTML page, we need to link our CSS file to the HTML document. We do this by using the tag within the section of our HTML file. Here's an example:

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- HTML content goes here -->
</body>
</html>

In the example above, we have linked an external CSS file called "styles.css" to our HTML page. The CSS file contains all the styling instructions for our HTML elements.

B. Applying Styles:

CSS styles can be applied to HTML elements using selectors. Selectors target specific elements on the page and define the styles to be applied. Here are some commonly used CSS selectors:

Element Selector: Selects elements by their HTML tag name. For example, to style all paragraphs, we use the p selector.

p {
    color: blue;
    font-size: 16px;
}

Class Selector: Selects elements based on their assigned class attribute. To apply a class to an HTML element, we use the class attribute. Multiple elements can share the same class. For example, to style all elements with the class "highlight", we use the .highlight selector.

.highlight {
    background-color: yellow;
    font-weight: bold;
}

ID Selector: Selects a single element based on its unique ID attribute. To apply an ID to an HTML element, we use the id attribute. For example, to style an element with the ID "logo", we use the #logo selector.

#logo {
    width: 200px;
    height: 100px;
}

C. Common CSS Properties:

CSS offers a wide range of properties to control the appearance of HTML elements. Here are some commonly used properties:

color: Sets the text color.
background-color: Sets the background color.
font-size: Sets the font size.
font-family: Sets the font family.
padding: Sets the padding (space) inside an element.
margin: Sets the margin (space) outside an element.
border: Sets the border properties.

Example :

h1 {
    color: red;
    font-size: 24px;
}

.container {
    background-color: lightgray;
    padding: 10px;
    margin: 20px;
    border: 1px solid black;
}

D. CSS Box Model:

The CSS Box Model is an important concept to understand. It describes the structure of an HTML element, which consists of content, padding, border, and margin. By adjusting these properties, we can control the spacing and layout of elements on the page.

Example:

.box {
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 1px solid black;
    margin: 10px;
}

E. CSS Layouts:

CSS provides various layout techniques to arrange elements on the page. Some commonly used layout properties are:

display: Controls how elements are displayed (e.g., block, inline, flex).
position: Positions elements on the page (e.g., relative, absolute, fixed).
float: Floats elements to the left or right of their container.
flexbox: Provides flexible box layout capabilities.
grid: Enables grid-based layout.

Example:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

Closing:

CSS is a powerful tool that allows us to style our HTML pages and create visually appealing websites. In this tutorial, we learned how to link CSS to HTML, apply styles using selectors, use common CSS properties, understand the CSS Box Model, and explore CSS layouts. With this knowledge, you can now take your web development skills to the next level and create stunning web pages. Happy coding!

Introduction and HTML Tutorials: Building the Websites #1

Zahir Hadi Athallah — Sun, 25 Jun 2023 06:28:18 +0000

Introduction to HTML

HTML (Hypertext Markup Language) is a markup language used to build web pages. In this article, we will introduce HTML to you and provide basic tutorials on how to use HTML tags to create the structure and basic content of web pages. Additionally, we will provide some simple examples to clarify these concepts.

What is HTML?

HTML is a markup language used to structure and display web pages. HTML web pages consist of elements organized using HTML tags. Each HTML tag provides instructions to the browser on how to display that element to the user.

Basic HTML Tutorials

Basic Structure of an HTML Page

Every HTML page should start with the <html> tag and end with the </html> tag. The content of the web page is typically divided into two main sections: the <head> and the <body>. The <head> section contains metadata about the web page, such as the page title, links to CSS or JavaScript files, etc. The <body> section contains the content that will be displayed on the web page.

Example :

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>Welcome to my web page!</h1>
    <p>This is an example paragraph.</p>
</body>
</html>

Creating Headings and Paragraphs

You can use HTML heading tags (<h1> to <h6>) to mark up headings on your web page. The <p> tag is used to create paragraphs.

Example :

<h1>This is a web page title</h1>
<h2>This is a subheading</h2>

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

Creating Lists

You can create lists using the <ul> (unordered list) tag for unordered lists or the <ol> (ordered list) tag for ordered lists. Each item in the list is placed between <li> tags.

Example :

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

Adding Images

You can display images on web pages using the <img> tag. You need to provide the src attribute, which contains the URL or path to the image you want to display.

Example :

<img src="image.jpg" alt="Image Description">

Creating Links

To create links to other web pages, use the <a> tag. You need to provide the href attribute, which contains the URL or path to the target web page.

Example :

<a href="https://www.example.com">Visit Example Website</a>

Formatting Text

HTML provides tags to format text, such as bold, italic, and underline. You can use the <b> tag for bold, <i> tag for italic, and <u> tag for underline

Example :

<p>This is <b>bold</b> text.</p>
<p>This is <i>italic</i> text.</p>
<p>This is <u>underlined</u> text.</p>

Closing:

HTML is the foundation of web development, and understanding its basics is crucial for anyone interested in building websites. In this article, we introduced HTML and provided tutorials on essential HTML tags and attributes, Happy coding!