Atlanta - Indonesia Web Support » Ruang Belajar » Belajar HTML » View new contentGuidelines

Yuk DAFTAR SEKARANG juga, banyak TUTORIAL MENARIK buat kalian para forumer @2018
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

Started by   -

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)

tommycoo
#1
Dasar HTML part 1 Empty 19/10/2013, 10:56

Owner of Atlanta

tommycoo

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/

Zeref999
#2
Dasar HTML part 1 Empty 20/10/2013, 12:24

Level 2
Zeref999

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

Kitsune
#3
Dasar HTML part 1 Empty 20/10/2013, 13:44

Retired Staff

Kitsune

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

tommycoo
#4
Dasar HTML part 1 Empty 20/10/2013, 23:12

Owner of Atlanta

tommycoo

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>

Zeref999
#5
Dasar HTML part 1 Empty 22/10/2013, 16:19

Level 2
Zeref999

Level 2
btw, ane mau nanya Senyum

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

Kitsune
#6
Dasar HTML part 1 Empty 23/10/2013, 20:48

Retired Staff

Kitsune

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
Dasar HTML part 1 Empty 


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
Aktif TopikTop 20 Poster's TodayTop 20 Poster's

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


User yang sedang berada di forum ini: Tidak ada

AdministratorStaff ManagerStaffGrapich DesignReviewerRetired & Respected

IndonesiaTelah DibacaContact UsPrivacy PolicyHelpReport Abuse

Community Forum Powered by Forumotion

Licensed to: Atlanta