Cara Mudah Belajar HTML Dasar untuk Pemula

Tutorial ini dibuat semata mata untuk bahan mengajar saya di HSTKI, untuk siswa siswi yang masih awam tentang HTML dan CSS, Well saya sebenernya ga jago jago amat mainan HTML atau pun CSS untuk buat Tutorial kek gini, tapi saya masih punya ilmu untuk berbagi,namun sebenarnya juga saya masih belajar di HTML dan CSS, dan apa salah nya untuk belajar sambil mengajar haha... dah deh perkenalannya ga usah panjang panjang. segini juga cukup.

Requirement :

- Notepad , Notepad ++ / Brackets Sprint ( Recomended )

- Browser Navigator ( Mozilla Firefox Recomended)

- Siap Mental

- Ga takut sama deretan script

- Punya Waktu

- Belajar karena Allah ( kata guru Agama )

Getting Started :

- Buka Notepad/Bracketsnya.

- Ketikan pada Notepad nya seperti ini :

<html>

<head>

</head>

<body>

</body>

</html>

- Save Notepad tersebut dengan format ( .html ) / ( .htm)

- Jangan lupa format save nya all files yah.

- Setelah itu buka file html yang sudah di save di direktori hasil save nya.

- Buka file html nya make Notepad

- Sebagai pengenalan html adalah :

HTML adalah Hyper Text Markup Languange . markup languange adalah bahasa dimana kamu menambahkan intruksi teks, intruksi itu akan memberitahukan kepada komputer bagaimana untuk menampilkan lampiran oleh instruktur tersebut.

Lesson 1. Pengertian Tag , content dan End Tag.

Dalam HTML, Tag merupakan hal yang tidak bisa dipisahkan dari HTML Karena ini merupakan inti utama HTML intruksi terhadap bahasa Markup.

Contoh :

- Untuk contoh adalah tag <p> yang diisi kontent “ Ini adalah Content” lalu ditutup oleh end tag </p>

- Contoh lainya pada html dasar adalah tag <body> yang di tutup oleh </body> , <head> yang ditutup </head>

- Beberapa end tag tidak seperti </head> , jenis end tag lain yaitu seperti <br/> <hr/>

End tag yang berada pada akhir tag. Menandai bahwa tag seperti itu adalah tag solo yang artinya adalah perintah yang tidak di awali oleh tag, seperti <p> yang ditutup </p>.

Things to Know :

1. <DOCUTYPE.... : spesifik HTML Document DTD

2. <html></html> : spesifik untuk sebuah file html.

3. <head></head> : spesifik untuk membuat header dari html.

4. <meta></meta> : spesifik untuk memuat meta data dari file dokumen html.

5. <title></title> : spesifik untuk membuat title dari html.

6. <body></body> : spesifik untuk membuat body dari html.

7. <p></p> : intruksi untuk membuat paragraf.

8. <br/> : untuk membuat [ENTER] atau ganti ke line baru.

9. <hr/> : untuk membuat line Horizontal.

Diharapkan Pengertian tentang tag , content , dan end tag bisa dimengerti sehingga untuk lesson lesson kedepan langsung bisa mengintruksikan tanpa kembali lagi ke pelajaran awal.

Pelajaran di lanjut dengan membuat file sederhana dari HTML...

Lanjut ke Lesson 2.Untuk mulai belajar BASIC TEXT FORMATING

Lesson 2. Basic Text Formating.

Sebelumnya sudah di intruksikan untuk membat kerangka html , nah sekarang mari kita mulai ketingkat selanjutnya karena tadi hanya permulaan atau pengenalan tentang HTML.

Lets Started!!

- Oke , buka kembali file html yang tadi sudah di buat yah.

- Sekarang ketikan pada notepad dari file html tadi seperti ini :

<html>

<head>

<title>Cleo - html lesson</title>

</head>

<body>

Ini adalah Pembelajaran tentang HTML , Lets Have Fun!!

</body>

</html>

- Lalu Save dan buka ke browser kalian.

- Sudah dijelaskan tadi bahwa tag <title> adalah untuk membuat title pada browser nah dalam kasus ini “cleo – html lesson” yang di tuliskan dalam tag <title></title> adalah title dari dari file html yang sudah kita tulis tadi.

- Dan pada tag <body> kita menuliskan “ini adalah pembelajaran tentang HTML, Lets Have Fun!!” dan muncul pada body browser. Ini adalah fungsi dari tag <body>

Ya walaupun tanpa tag body pun kata kata itu akan muncul juga. Tapi untuk merapihkan sesuai konten jadi maka di buat pada tag body.

- Oke Selanjutnya adalah membuat comment.

- Sebelumnya comment itu digunakan untuk memberitahu atau membuat pengingat ya seperti pada comment comment yang lain.

- Untuk membuatnya adalah pertama buat dulu tag comment

-

- Selanjutnya adalah membuat paragraf <p>, heading element <h1> sampai <h6>

- Ketikan pada <body>

<p>ini adalah Paragraf</p>

<h1>Heading1</h1><h2>Heading2</h2><h3>Heading3</h3><h4>Heading4 </h4><h5>Heading5</h5><h6>Heading6</h6>

Seperti ini :

- Lalu akan muncul pada browser seperti ini :

- Dari hasil tersebut sudah di ketahui bahwa Heading 1 memiliki text lebih besar dari pada heading2 sampai heading6. (h1,h2,h3,h4,h5)

- Selanjutnya adalah membuat basic teks formating tag.

- Ketikan pada notepad masih tetap pada tag <body> intruksi seperti ini :

<q>Quote</q>

<s>Strike</s>

<i>Italic</i>

<u>Underline</u>

<blockquote>BLOCKQUOTE</blockquote>

Things to Know :

<ol></ol> : spesifik untuk membuat onordered list (bulleted)

<ul></ul> : spesifik untuk membuat ordered list (numbered)

<li></li> : spesifik untuk membuat element list

<dl></dl> : spesifik untuk membuat uncategoried list (whatever i dont know much)

<q></q> : spesifik untuk membuat Quotes [ “_” ]

<s></s> : spesifik untuk membuat text Strike [ Strike ]

<b></b> : spesifik untuk membuat text Bold [ Bold ]

<i></i> : spesifik untuk membuat text Italic [ Italic ]

<u></u> : spesifik untuk membuat text Underline [ underline ]

<blockquote></blockquote> : spesifik untuk membuat text dalam Block Quote.

- Sekarang kita masuk ke penerapan Basic Text Formating. Kita akan mulai dengan intruski numbered, dan bulleted.

- Intruksikan pada file html kalian seperti ini :

<ol>

<li>Huffy</li>

<li>Serotta</li>

</ol>

<ul>

<li>JavaScript</li></ul>

- Dalam browser kalian akan nampak seperti ini.

- Pemformatan list untuk unordered list dan ordered list

Ordered lists :

type="1" = 1, 2, 3 …

type="a" = a, b, c …

type="A" = A, B, C …

type="i" = i, ii, iii … (Huruf Romawi Kecil)

type="I" = I, II, III … (Huruf Romawi Besar)

Unordered lists :

type="disc" = disc

type="circle" = circle

type="square" = square

- Untuk membuatnya silahkan tambahkan perintah diatas di bagian <ul> atau <ol>

- Seperti ini :

- Maka Bulleted list , sama Numbering List nya / Unordered , ma Ordered nya akan berganti sesuai dengan intruksi tambahan diatas , seperti ini :

<li>Huffy</li>

<li>Serotta</li>

</ol>

<li>JavaScript</li></ul>

<ul>

- Selanjutnya adalah basic text formating tentang <dl><dt><dd>

- Buat kembali intruksi seperti ini :

<h1>FLAT CHEST IS JUSTICE</h1>

<dl>

<dt>Kawaii</dt>

<dd>Segala yang manis manis yang moe moe yang adem adem yang bikin seger<dd>

<dd>terkadang yang manis pun tak sesuai dengan harapan!!</dd>

</dl>

- Maka akan terlihat pada browser seperti ini :

- Sebagai tambahan intruksi silahkan tambahkan intruksi sbg berikut kedalam html body:

<big> Enlarges text</big>.

<small> Makes text smaller.</small>

<em>Emphasises text.</em>

<strong>Emphasises text, with more emphasis than the em tag.</strong>

<sub>Subscripts text.</sub>

<sup>Superscripts text.</sup>

<del>Specifies enclosed text as deleted.</del>

<ins>Specifies enclosed text as inserted.</ins>

<code>Specifies enclosed text as computer code.</code>

<samp>Specifies enclosed text as sample computer code.</samp>

<kbd>Specifies enclosed text as keyboard text.</kbd>

<var> Specifies enclosed text as a variable.</var>

<cite>Specifies enclosed text as a citation.</cite>

- Maka akan nampak pada browser seperti ini :

- Maaf kalo gambarnya tidak jelas mending dicoba langsung ajah deh.

Things to know :

<big></big> = membuat text lebih besar

<small></small> = membuat text lebih kecil

<em></em> = membuat text miring

<strong></strong> = membuat text lebih tebal

<sub></sub> = membuat text subscript

<sup></sup> = membuat text superscript

<del></del> = menampilkan lampiran text tercoret

<ins></ins> = menampilkan lampiran text bergaris bawah

<code></code> = membuat text seperti text pada komputer.

<samp></samp> = membuat text seperti text pada sample komputer

<kbd></kbd> = membuat text seperti yang ada di keyboard

<var></var> = membuat text seperti variable

<cite></cite> = membuat text seperti pada surat pujian.

- Selanjutnya adalah bagian text Unicode, ini adalah sedikit dari daftar text Unicode pada html.

- Jika ingin lihat lebih banyak silahkan lihat di bagian accessories window , program bernama Character Map.

Sepertinya pengertian tentang Basic Text Formating cukup sampai disini . walaupun masih banyak hal tentang Basic Text Formating yang belum disampaikan tapi ya bagaimana lagi , baru tahu itu saja sih mungkin kalo ingat ingat lagi bisa di bahas di lesson lesson selanjutnya.

Lesson 3. Understanding Anchor Hyperlink

Di lesson ini kita akan membahas apa itu anchor hyperlink,hyperlik atau biasa kita sebut dengan link atau url, digunakan untuk memberi perintah untuk menuju pada suatu alamat pada html atau page html.

Pada dasar nya sebuah link atau alamat terdiri dari protocol, server,path,dan page.

Untuk lebih jelas nya tengok pada gambar dibawah ini :

Dan pada kali ini di html akan kita pelajari tentang anchor hyperlink yang dalam html adalah tag <a></a> digunakan untuk membuka suatu alamat referensi luar atau dalam pada satu documents html ,pada anchor pun sering kita gunakan dalam suatu navigasi website atau blog.

Oke sekarang mulai praktek nya soalnya kalau teori mulu apa gunanya...

- Buka notepad nya :

- Dan ketikan perintah seperti ini :

<html>

<head>

<title>Cleo – lesson 3 Hyperlink</title>

</head>

<body>

<p> ini adalah lesson untuk mempelajari tentang hyperlink</p>

<p>pertama ini adalah anchor hyperlink yang biasa</p>

<p>contoh link anchor yang digunakan untuk menuju ke document html lagi atau menuju ke page.</p>

<a href="http://www.url.com/">website url</a>

<p>contoh link anchor yang digunakan untuk menuju ke suatu alamat website</p>

</body>

</html>

- Lalu save dan buka maka dibrowser akan nampak seperti ini :

- Pada anchor link html adalah perintah anchor untuk membuka suatu documents html pada directory yang sama.

- Pada anchor link website url adalah perintah anchor untuk membuka suatu alamat website.

- Pada anchorpun memliki element atribut tambahan berikut adalah element tambahan untuk tag anchor.

Attribute Anchor Elements tag <a></a> Target

_blank Untuk membuka link pada tab baru / window baru

_parent Membuka link pada frame induk

_self Membuka link pada frame yang sama

_top Membuka link pada window yang sama

Jika kamu pengen dengan versi gambarnya bisa kamu download versi PDFnya DISINI

Title : Cara Mudah Belajar HTML Dasar untuk Pemula
Description : T utorial ini dibuat semata mata untuk bahan mengajar saya di HSTKI, untuk siswa siswi yang masih awam tentang HTML dan CSS, Well saya s...

Cara Mudah Belajar HTML Dasar untuk Pemula

Requirement :

Getting Started :

Lesson 2. Basic Text Formating.

Things to Know :

1 Response to "Cara Mudah Belajar HTML Dasar untuk Pemula"