Kalian Member Baru, Yuk Perkenalan Dahulu. 1 Member 1 Thread.
Selamat datang di Forum Atlanta~Halo, kalian masih menjadi tamu ya di forum ini ? Kenapa masih jadi tamu ayok ikutan kita gabung di forum ini.
Banyak loh tutorial yang dapat kamu dapatkan di sini, kalian juga bisa tanya-tanya tentang masalah blog/forum kok di sini.
Langsung aja yok daftar kalau kalian belum daftar di sini Register, Kalau sudah punya IDnya langsung aja ya Login

You are not connected. Please login or register

 

Dasar HTML part 1

Oops! Sepertinya ada sedikit kesalahan ...

[#22124]

Atlanta telah memblok tamu untuk melihat konten yang ada, silahkan mendaftar untuk dapat melihat isi konten kami.


Need Help?

Message (Halaman 1 dari 1)

#1
 on 19/10/2013, 10:56

Owner of Atlanta


Owner of Atlanta
:: 1-HTML DASAR ::

OBJEKTIF:
Setelah mempelajari materi ini diharapkan anda dapat memahami strukturdasar dari dokumen HTML.
MATERI:
Struktur dasar dokumen HTML(Tag, Element, Attribute), Element HTML,Element HEAD, Element TITLE, Element BODY.


STRUKTUR DASAR DOKUMEN HTML
HTML merupakan singkatan dari HyperTextMarkup Language adalah script untuk menyusundokumen-dokumen Web. Dokumen HTML disimpan dalam format teks regulerdan mengandung tag-tagyang memerintahkan web browser untuk mengeksekusi perintah-perintahyang dispesifikasikan.

Struktur dasar dokumen HTML adalah sebagai berikut:
Code:
<html>
<head>
<title>Disini JudulDokumen HTML</title>
</head>
<body>
      Disini penulisan informasiWeb
</body>
</html>
Daristruktur dasar HTML di atas dapat dijelaskan sebagai berikut:

a. Tag
Adalah teks khusus (markup)berupa dua karakter "<"dan ">", sebagai contoh <body>adalah tag dengan nama body.
Secara umum tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup(ditambahkan karakter "/"setelah karakter "<"),sebagai contoh <body>ini adalah tag pembuka isi dokumen HTML, dan </body>ini adalah tag penutup isi dokumen HTML.

b. Element
Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagaicontoh untuk menampilkan judul dokumen HTML pada webbrowser digunakan elementtitle, dimana:

<title> ini adalah tag pembuka judul dokumenHTML
Disini Judul Dokumen HTMLini adalah isi judul dokumen HTML
</title> ini adalah tag penutup judul dokumen HTML

Tag-tag yang ditulis secara berpasangan pada suatu elementHTML, tidak boleh saling tumpang tindih dengan pasangan tag-tag lainnya.
Contoh penulisan tag-tag yang benar
Code:

<p>
   <b>
      ................
  </b>
</p>
Contoh penulisan tag-tag yang salah

Code:
<p>
   <b>
      ................
 </p>
</b>
c. Attribute
Attribute mendefinisikan property dari suatu element HTML, yang terdiriatas nama dan nilai. Penulisannya adalah sebagai berikut:

Code:
<TAG
 nama-attr="nilai-attr"
 nama-attr="nilai-attr"
 .................
>
  .................

</TAG>
Secara umum nilai attribute harus beradadalam tandapetik satu atau dua. Sebagai contoh, untuk membuat warna teks menjadikuning dan latarbelakang halaman web menjadi hitam, penulisannya adalah<bodybgcolor="black" text="yellow">

d.Element HTML
Menyatakan pada browser bahwa dokumen Web yang digunakanadalah HTML.

Sintaks:
Code:
<html>
..........
</html>
e. Element HEAD
Merupakan kepala dari dokumen HTML. Tag <head>dantag </head> terletak di antara tag<html> dan tag</html>.

Sintaks:
Code:
<head>
...........
</head>
f. Element TITLE
Merupakan judul dari dokumen HTML yang ditampilkan pada judul jendelabrowser. Tag <title> dan tag </title>terletak di antaratag <head> dan tag </head>.

Sintaks:
Code:
<title>
.........
</title>
g. Element BODY
Element ini untuk menampilkan isi dokumen HTML. Tag<body>dan tag </body> terletak di bawah tag<head> dan tag</head>.
Element BODY mempunyai attribute-attribute yang menspesifikasikankhususnya warna dan latarbelakang dokumen yang akan ditampilkan padabrowser.

Sintaks:
Code:
<bodytext="v" bgcolor="w" background="uri" link="x" alink="y"vlink="z">
..............
</body>
Attribute text memberikanwarna pada teks, bgcolormemberikan warna pada latarbelakang dokumen HTML, backgroundmemberikan latarbelakang dokumen HTML dalam bentuk gambar, link memberikannilai warna untuk link, alinkmemberikan warna untuk link yang sedang aktif, vlink memberikanwarna untuk link yang telah dikunjungi.
Jika attribute bgcolor dan background keduanya dispesifikasikanmaka attribute background yang akan digunakan, akan tetapijikanilai attribute background (gambar) tidak ditemukan pada dokumen HTMLmaka attribute bgcolor yang akan digunakan.
LATIHAN

Gunakanteks editor misalkan "Notepad" untuk menyunting danmenyimpan script latihan di bawah ini. Untuk melihat hasilnyabukalah file tersebut dengan menggunakan web browser atau gunakaneditor yang telah tersedia pada modul ini dengan mengklik menu Editor.Latihan 1:
Menampilkan teks:




Nama file: latihan1_1.html

Code:
<html>
<head>
<title>Latihan1-1</title>
</head>
<body>
       Belajarbahasa pemrograman web ternyata mudah juga :)
</body>
</html>
Tugas tambahan:
Gantilah teks tersebut dengan teks lainnya.


Latihan 2:
Merubah warna teks menjadi merah:

                     Belajar bahasa pemrogramanweb ternyata mudah juga Senyum

Nama file: latihan1_2.html

Code:
<html>
<head>
<title>Latihan1-2</title>
</head>
<body text="red">
       Belajarbahasa pemrograman web ternyata mudah juga :)
</body>
</html>
Tugas tambahan:
Cobalah untuk warna: maroon, black, yellow, white, lime, green, blue,red, olive, navy, purple, teal, gray, silver, fuchsia, aqua.

Latihan 3:
Merubah warna background menjadi hitam.
                     
Nama file: latihan1_3.html

Code:
<html>
<head>
<title>Latihan1-3</title>
</head>
<body text="red" bgcolor="black">
       Belajarbahasa pemrograman web ternyata mudah juga :)
</body>
</html>
Tugas tambahan:
Cobalahuntuk warna: maroon, black, yellow, white, lime, green, blue, red,olive, navy, purple, teal, gray, silver, fuchsia, aqua.

Latihan 4:
Merubah background dengan suatu gambar.

Nama file: latihan1_4.html

Code:
<html>
<head>
<title>Latihan1-4</title>
</head>
<body text="red" bgcolor="aqua"background="./images/image027.jpg">
       Belajarbahasa pemrograman web ternyata mudah juga :)
</body>
</html>
catatan:
./images/ = nama direktori file gambar disimpan
image027.jpg = nama file gambar

Tugas tambahan:
Cobalahuntuk file gambar: image050.jpg, image052.jpg, image058.jpg dan image060.jpg.

Source:http://hans.polinpdg.ac.id/html/html_1/

#2
 on 20/10/2013, 12:24

Level 2

Level 2
wah gitu ya gan Senyum
itu tuh ane yang kena, yang ini :

seharus nya :
Code:

<html><head> ..... </heads><html>
ane buat
Code:

<html><head> ..... </html></head>
makasih gan Senang

tambahin lagi gan, kalau untuk notepad, cara buka nya simpan dengan format :

Nama File : apa nama fila nya.html
save as : All File
Unicode : ANSI

#3
 on 20/10/2013, 13:44

Retired Staff


Retired Staff
Maaf gan ane baru kembali Senang Kemarin UTS dan punya banyak urusan di forum sendiri hehehe.

Btw untuk yg code ini:

Code:
<p>
<b>
....
</p>
</b>
Itu sebenarnya bisa ditulis dengan rata kok gan Senyum

Misalnya:

Code:
<p><b> .... </p></b>
Maaf kalo salah dan Correct Me If I Wrong Wink

#4
 on 20/10/2013, 23:12

Owner of Atlanta


Owner of Atlanta
Itu penulisan yang salah ggan :p
Kan kalo tag yang di buka duluan terakhir di tutup

Emang bner bleh gitu/lurus tapi tag yg di buka dduluann tutupnyya belakangan
<B><p>... .m<p><b>

#5
 on 22/10/2013, 16:19

Level 2

Level 2
btw, ane mau nanya Senyum

Code:
<b>
<p>......
</p>
</b>
itu fungsi nya untuk apa ya?

#6
 on 23/10/2013, 20:48

Retired Staff


Retired Staff
@Zeref:

Untuk membuat teks menjadi bold. Misal:

ini contohnya

dan btw, @Gan tommy:

Hehehehehe sori gan, lupa ane wek Soalnya sekarang sudah kagak pake forumotion lagi, pake zetaboards.Jadi sekarang ane jarang main-main sama coding, yah karena fitur zetaboards banyak dan pakainya lebih mudah daripada forumotion Wink

Sponsored content
#7
 


Message (Halaman 1 dari 1)

Share This Topic !

URL :
BBcode :
HTML :

Permissions in this forum:
Anda tidak dapat menjawab topik

Total Posts Total Threads Total Members Newest Member29 November 2014 Date of Establishment of the Forum

Total 0 user online :: 0 Terdaftar, 0 Tersembunyi dan 0 Tamu

Total 0 user online :: 0 Terdaftar, 0 Tersembunyi dan 0 Tamu (Lihat list online)


User yang sedang berada di forum ini: Tidak ada