1 September 2015

Asas HTML bagi beginners dalam blogger

Tuesday, September 01, 2015 | 0Comments |
As'salam semua... Sekian lama blog x up-to-date , 2 tahun lebih kot >.<  hilang sekejap :P
Tahun ni nak tukar selera sikit bila update blog pasnih. pasnih kita belajar pasal tutorial je memanjanggg untuk bloggers ni. Nak bantu korang yang lebih-lebih lagi beginners kat dunia blogging nih. So, apa lagi ? :/// jom mula dengan yang basic things kat blogger ni.

APA ITU HTML?

HTML bermaksud HyperText Markup Language . Ia adalah bahasa komputer yang digunakan untuk membuat dokumen di web. Dokumen-dokumen ini adalah fail teks yang mengandungi kandungan anda (teks, imej, video, dan lain-lain ) dan tag HTML yang digunakan untuk menyusun kandungan tersebut. Browsers read the HTML page and the HTML tags tell them what to show. Tags tidak muncul kat browser. Semua tag bermula dengan tanda kurung sudut kiri/kurang daripada log seperti < dan berakhir dengan kurungan sudut kanan / lebih besar daripada log seperti >. Untuk membina sebuah halaman HTML asas yang anda perlukan editor teks , editor teks yang mudah termasuk TextEdit , TextWrangler , SimpleText , TextPad atau NotePad . Anda boleh mendapatkan lebih banyak versi canggih seperti Adobe Dreamweaver tetapi ia tidak perlu. Ulang lagi.. TIDAK PERLU :D Jangan gunakan Microsoft Word !! HTML tidak sensitif kat MW ni, tetapi ia adalah amalan biasa untuk menggunakan huruf kecil.

LAGI TENTANG TAGS

Terdapat dua jenis tags: bekas dan kosong. Tag bekas membaluti teks atau imej dan mesti terdiri daripada pembuka dan penutup tag seperti < html> ... < / html >. Tag penutup mempunyai tanda palang hadapan '/ 'memberitahu pelayar bahawa tag ini telah berakhir .

Tag kosong berdiri sendiri seperti <br> untuk satu baris atau < hr > untuk memerintah mendatar. Tag kosong tidak memerlukan tag penutup kerana mereka tidak 'membungkus' apa-apa.

BAGAIMANA NAK SET UP PAGE HTML

Mari kita lihat pada template HTML yang sangat asas untuk memulakan dengannya.

<html>
<head>
<title>SITE TITLE</title>
</head>
<body>
CONTENT PLACED HERE
</body>
</html>
Ingat: Apabila kita membuka tag, jangan lupa untuk menutup tag dengan simbol '/' ini. Dokumen HTML dibahagikan kepada dua bahagian utama - kepala dan badan. Untuk < html> tag memberitahu browser bahawa ini adalah satu dokumen HTML. <Head> tag termasuk maklumat mengenai dokumen anda seperti tag tajuk <title> yang muncul dalam bar tajuk browser dan juga author , kata kunci , penerangan dan lain-lain. Lembaran gaya ini juga muncul di sini tetapi kita akan menutup tetapi dalam post yang akan datang . Akhir sekali, <body> tag memegang semua laman anda seperti kandungan : teks, imej, grafik, dan lain-lain

MENCIPTA PAGE HTML SENDIRI

Buka teks editor anda dan paste kod berikut ke dalam dokumen baru

<html>
<head>
<title>MY FIRST WEBPAGE</title>
</head>
<body>
Learning HTML
Hello!
This is my first web page.
I'm learning about -
HTML Basics and Tags
Headings
Paragraphs
Line Breaks
Horizontal Rule
HTML BASICS by ignorance
</body>
</html>
Simpan fail sebagai example.html ke desktop anda. Buka fail dalam browser web anda untuk melihat bagaimana ia menukarkan tag itu. Memang nampak membosankan sekarang ini, tetapi ia adalah satu permulaan yang kita boleh bina lebih daripada siri ini.

TEXT FORMATTING

Kita boleh menambah tag kepada teks untuk memberikan struktur yang lebih 'molek'. Hari ini kita akan meliputi tajuk, perenggan, line breaks dan horizontal rule tetapi saya akan bercakap tentang hal ini in the future .

HEADINGS

Terdapat 6 tahap headings dalam HTML , ini menentukan tahap kepentingan . Sebagai contoh di blog , tajuk blog anda mungkin tag h1 manakala tajuk post anda boleh menjadi h2 atau tag h3.

<h1>Level 1 Heading</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading</h6>

PERENGGAN

Perenggan ini kita dah biasa dah.. sejak zaman sekolah rendah lagi. Perenggan ini untuk memisahkan bahagian-bahagian tertentu dalam teks dalam blog. Perenggan ini lebih detail lagi untuk memberi ruang supaya senang untuk dibaca dah tidak bercampur aduk dengan isi-isi yang lain.
<p> Ini ialah perenggan </p> <p> and this is a second perenggan </p>

LINE BREAKS

Untuk menambah satu baris tunggal kita menggunakan <br>. Ini adalah tag kosong , bermakna ia tidak menjerut sebarang kod atau perlu ditutup. Ia mewujudkan ruang kosong dan menghantar kod berikut ke baris seterusnya .

HORIZONTAL RULE

Untuk membuat garis mendatar di seluruh laman web anda, kita menggunakan <hr >.

MENAMBAH FORMAT TEKS KE HALAMAN

Buka example.html dekat editor teks anda tadi dan masukkan beberapa format teks.

<html>
<head>
<title>MY FIRST WEBPAGE</title>
</head>
<body>
<h1>Learning HTML</h1>
<p>Hello!</p>
<p>This is my first webpage.</p>
<p>I'm learning about - <br>
HTML Basics and Tags<br>
Headings<br>
Paragraphs<br>
Line Breaks<br>
Horizontal Rule</p>
<br>
<hr>
<p>HTML BASICS by ignorance.</p>
</body>
</html>

Jadi itulah asas-asas mutlak HTML dan mungkin bahagian yang paling membosankan! I know blahblah..  I’ll be covering more in future posts including CSS, different techniques, how this relates to Blogger and how Bloggers Template structure works, but if you have any questions please let me know.

Sekian saja kelas malam ini bersama cikgu terabai . sedihh aiihh . Dahh.. tidur sana :P


No comments:

Post a Comment

Everyday in every way, think what you need and tell what you think ...

Bumble Bee Tuna

Started since 23/24 Jul 2011