Posted by : Admin web11 Minggu, 23 Juni 2013

tag_html

Salam web11...

Sebelum teman-teman membaca artikel ini, apakah teman-teman sudah membaca artikel kami sebelumnya yaitu dasar-dasar membuat html bagian 1. Bilamana teman-teman belum membacanya, alangkah baiknya teman-teman membacanya terlebih dahulu dan bila teman-teman sudah membaca artikel tersebut. Maka mari kita lanjutkan ke materi berikutnya tentang dasar-dasar cara membuat html bagian 2. Tidak perlu berlama-lama, lansung saja kita mulai.

11. Mendefiniskan bagian dokumen pada script html.

  • Teori 
<div> Mendefinisikan divisi atau bagian pada dokumen html.

  • Praktek 
Ketikkan script dibawah ini pada text editor, Setelah  itu simpan dengan nama div.html pada folder belajar tag html yang telah kita buat. kemudian buka file div.html tersebut menggunakan browser teman-teman dan lihat hasilnya.

<html>
<head>
<title>Design-web11</title>
<body>
<p>ini adalah sebuah teks.</p>
<div style="color:#0000FF">
<h3>Ini adalah judul elemen div</h3>
<p>Ini adalah teks elemen div</p>
</div>
<p>Ini adalah sebuah teks.</p>
</body>
</head>
</html>

12. Mengatur ukuran huruf  pada script html.

  • Teori 
<font> Mengganti jenis, ukuran, warna huruf yang akan digunakan untuk teks.

  • Praktek 
Ketikkan script dibawah ini pada text editor, Setelah  itu simpan dengan nama font.html pada folder belajar tag html yang telah kita buat. kemudian buka file font.html tersebut menggunakan browser teman-teman dan lihat hasilnya.

<html>
<head>
<title>Design-web11</title>
<body>
<font size="3" color="red">Ini adalah sebuah teks!</font>
<font size="2" color="blue">Ini adalah sebuah teks!</font>
<font face="verdana" color="green">Ini adalah sebuah teks!</font>
</body>
</head>
</html>

13. Membuat form input  pada script html.

  • Teori 
<form> Mendefinisikan input form

  • Praktek 
Ketikkan script dibawah ini pada text editor, Setelah  itu simpan dengan nama form.html pada folder belajar tag html yang telah kita buat. kemudian buka file form.html tersebut menggunakan browser teman-teman dan lihat hasilnya.

<html>
<head>
<title>Design-web11</title>
<body>
<form action="demo_form.html">
First Name :<input type="text" name="FirstName" value="mickey"><br>
Last Name :<input type="text" name="LastName" value="mouse"><br>
<Input type="submit" value="submit">
<p>Klik tombol "submit" maka data akan dikirimkan ke halaman "demo_form.html".</p>
<p>Untuk materi ini akan berhubungan dengan script php, yang nanti akan teman-teman pelajari pada tutorial php</p>
</body>
</head>
</html>

14. Merubah ukuran font pada script html.

  • Teori 
<h1>...<h6> Ukuran font.

  • Praktek 
Ketikkan script dibawah ini pada text editor, Setelah  itu simpan dengan nama h.html pada folder belajar tag html yang telah kita buat. kemudian buka file h.html tersebut menggunakan browser teman-teman dan lihat hasilnya.

<html>
<head>
<title>Design-web11</title>
<body>
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<h3>Ini adalah heading 3</h3>
<h4>Ini adalah heading 4</h4>
<h5>Ini adalah heading 5</h5>
<h6>Ini adalah heading 6</h6>
</body>
</head>
</html>

15. Membuat garis horizontal pada script html.

  • Teori 
<hr> Membuat garis horizontal.

  • Praktek 
Ketikkan script dibawah ini pada text editor, Setelah  itu simpan dengan nama hr.html pada folder belajar tag html yang telah kita buat. kemudian buka file hr.html tersebut menggunakan browser teman-teman dan lihat hasilnya.

<html>
<head>
<title>Design-web11</title>
<body>
<h1>HTML</h1>
<p>Hyper Text Markup Language</p>
<hr>
<h1>CSS</h1>
<p>Cascading Style Sheets</p>
</body>
</head>
</html>

16. Membuat teks miring pada script html.

  • Teori 
<i>Membuat teks miring.

  • Praktek 
Ketikkan script dibawah ini pada text editor, Setelah  itu simpan dengan nama i.html pada folder belajar tag html yang telah kita buat. kemudian buka file i.html tersebut menggunakan browser teman-teman dan lihat hasilnya.

<html>
<head>
<title>Design-web11</title>
<body>
<p>Design-web11<i>mencoba</i> membantu anda belajar bahasa html</p>
</body>
</head>
</html>

17. Menyisipkan gambar pada script html.

  • Teori 
<img> image, imagemap atau animation.

  • Praktek 
Ketikkan script dibawah ini pada text editor, Setelah  itu simpan dengan nama image.html pada folder belajar tag html yang telah kita buat. kemudian buka file image.html tersebut menggunakan browser teman-teman dan lihat hasilnya.

<html>
<head>
<title>Design-web11</title>
<body>
<image src="smiley.gif" alt="smiley face" height="42" width="42">
<p>Tentukan gambar dan lokasi dimana gambar disimpan pada script src yang ingin kamu tampilkan </p>
</body>
</head>
</html>

18. Mendefinisikan perintah input pada script html.

  • Teori 
<input> Mendefinisikan field input pada form.

  • Praktek 
Ketikkan script dibawah ini pada text editor, Setelah  itu simpan dengan nama input.html pada folder belajar tag html yang telah kita buat. kemudian buka file input.html tersebut menggunakan browser teman-teman dan lihat hasilnya.

<html>
<head>
<title>Design-web11</title>
<body>
<form action="demo_action.html">
First Name :<Input type="text" name="fname"><br>
Last Name :<Input type="text" name="lname"><br>
<Input type="Submit" value="submit">
<p>Untuk materi ini akan berhubungan dengan script php, yang nanti akan teman-teman pelajari pada tutorial php.</p>
</body>
</head>
</html>

19. Membuat bullet point pada script html.

  • Teori 
<li> Membuat bullet point atau baris baru pada list <berpasangan dengan tag <dir>,<menu>,<ol> dan <ul>.

  • Praktek 
Ketikkan script dibawah ini pada text editor, Setelah  itu simpan dengan nama bulletpoint.html pada folder belajar tag html yang telah kita buat. kemudian buka file bulletpoint.html tersebut menggunakan browser teman-teman dan lihat hasilnya.

<html>
<head>
<title>Design-web11</title>
<body>
<ol>
<li>cofee</li>
<li>milk</li>
<li>tea</li>
</ol>
<ul>
<li>cofee</li>
<li>milk</li>
<li>tea</li>
</ul>
</body>
</head>
</html>

20. Mendefinisikan awal dan akhir list pada script html.

  • Teori 
<ol> Mendefinisikan awal dan akhir list.

  • Praktek 
Ketikkan script dibawah ini pada text editor, Setelah  itu simpan dengan nama ol.html pada folder belajar tag html yang telah kita buat. kemudian buka file ol.html tersebut menggunakan browser teman-teman dan lihat hasilnya.

<html>
<head>
<title>Design-web11</title>
<body>
<ol>
<li>cofee</li>
<li>milk</li>
<li>tea</li>
</ol>
<ol start="50">
<li>cofee</li>
<li>milk</li>
<li>tea</li>
</ol>
</body>
</head>
</html>

Dan akhirnya artikel dasar-dasar membuat html bagian 2 sudah selesai. Bagaimana teman-teman masih sanggup melanjutkan ke materi berikutnya? Bila teman-teman sudah siap, kita lanjutkan ke bagian terakhir dalam hal mempelajari tag-tag html pada artikel dasar-dasar membuat html bagian 3. ( Kritik dan saran dari pembaca sangat kami harapkan untuk meningkatkan kualitas dari artikel yang kami buat ).

Leave a Reply

Subscribe to Posts | Subscribe to Comments

- Copyright © Design Web11 -Metrominimalist- Powered by Blogger - Designed by Johanes Djogan -