Tampilkan postingan dengan label Belajar HTML. Tampilkan semua postingan
Dasar-dasar membuat html bagian 2
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.
<div> Mendefinisikan divisi atau bagian pada dokumen html.
11. Mendefiniskan bagian dokumen pada script html.
- Teori
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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 ).
Tag :
Belajar HTML
Latihan membuat web html
Salam Web11...
Setelah kita sama-sama belajar mengenai tag-tag html pada artikel kami yaitu Dasar-dasar membuat html bagian 1, Dasar-dasar membuat html bagian 2 dan Dasar-dasar membuat html bagian 3. Saatnya kita mulai sedikit merefresh materi-materi yang sudah kami berikan dengan cara latihan membuat web html sederhana pada artikel ini.Contoh latihan :
- Ini adalah script html.
<html>
<head>
<title> Design-web11</title>
<body text=#000000 bgcolor=##0009>
<h1 align=center>Design-web11</h1>
<hr size=5 width=50% align=center>
</hr>
</head>
</html>
- Hasil
- Penjelasan
- Tulisan Design-web11 berwarna hitam dikarenakan pada tag body atribute text diberi nilai=#000000 yang berarti seluruh text akan berwarna hitam.
- tulisan Design-web11 berukuran besar dikarenakan terdapat tag <h1> / heading dan posisi tulisan berada ditengah dikarenakan terdapat atribute align diberi nilai=center.
- Membuat garis horisontal menggunakan tag <hr> diberikan tebal garis dengan nilai 5 dan panjang garis dengan nilai 50% dari ukuran monitor ( panjang garis adalah 1/2 dari layar monitor ).
Latihan html :
Penjelasan :
Ini adalah latihan membuat web html dasar dalam mempelajari script html. pada latihan kali ini teman-teman diharuskan membuat judul, membuat garis horisontal, membuat tabel, membuat daftar list dan menyisipkan gambar. Dan bila teman-teman mengalami kesulitan, jangan khawatir kami akan menyediakan scipt html latihan diatas yang bisa teman-teman download pada link dibawah ini. Selamat Mencoba.....
Link Jawaban : Latihan html.
Tag :
Belajar HTML
Dasar-dasar membuat html bagian 3
Salam Web11...
Akhirnya kita masuk ke dalam pembahasan terakhir mengenai tag-tag html. ini adalah lanjutan materi dari artikel kami Dasar-dasar membuat html bagian 1 dan Dasar-dasar membuat html bagian 2. Apakah teman-teman sudah membacanya? saya sarankan bila teman-teman belum membacanya, teman-teman mengunjungi terlebih dahulu artikel yang kami sebutkan tadi. Okee, kita lanjutkan pembahasan untuk Dasar-dasar membuat html bagian 3.21. Membuat paragraph baru pada script html.
- Teori
<p> Ganti Paragraph.
- Praktek
Ketikkan script dibawah ini pada text editor, setelah itu simpan dengan nama paragraph.html pada folder belajar tag html yag telah kita buat. Kemudian buka file paragraph.html tersebut menggunakan browser teman-teman dan lihat hasilnya.
<html>
<head>
<title>Design-web11</title>
<body>
<p>Ini adalah sebuah paragraph</p>
<p>Ini adalah paragraph kedua</p>
<p>Ini adalah paragraph ketiga</p>
</body>
</head>
</html>
22. Membuat teks dengan ukuran yang sama pada script html.
- Teori
<pre> Membuat tulisan dengan ukuran yang sama.
- Praktek
Ketikkan script dibawah ini pada text editor, setelah itu simpan dengan nama pre.html pada folder belajar tag html yag telah kita buat. Kemudian buka file pre.html tersebut menggunakan browser teman-teman dan lihat hasilnya.
<html>
<head>
<title>Design-web11</title>
<body>
<pre> Perintah ini akan menampilkan apa yang kita ketik pada text editor / natural </pre>
</body>
</head>
</html>
23. Mendefinisikan awal script pada script html.
- Teori
<script> Mendefinisikan awal script.
- Praktek
Ketikkan script dibawah ini pada text editor, setelah itu simpan dengan nama script.html pada folder belajar tag html yag telah kita buat. Kemudian buka file script.html tersebut menggunakan browser teman-teman dan lihat hasilnya.
<html>
<head>
<title>Design-web11</title>
<body>
<script>
document.write("Hallo Dunia")
</script>
</body>
</head>
</html>
24. Membuat table pada script html.
- Teori
<table> Membuat tabel.
- Praktek
Ketikkan script dibawah ini pada text editor, setelah itu simpan dengan nama tabel.html pada folder belajar tag html yag telah kita buat. Kemudian buka file tabel.html tersebut menggunakan browser teman-teman dan lihat hasilnya.
<html>
<head>
<title>Design-web11</title>
<body>
<table border="1">
<tr>
<th>Month</th>
<th>Saving</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</body>
</head>
</html>
25. Membuat Kolom tabel pada script html.
- Teori
<td> Membuat kolom tabel.
- Praktek
Ketikkan script dibawah ini pada text editor, setelah itu simpan dengan nama kolom.html pada folder belajar tag html yag telah kita buat. Kemudian buka file kolom.html tersebut menggunakan browser teman-teman dan lihat hasilnya.
<html>
<head>
<title>Design-web11</title>
<body>
<table border="1">
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
</body>
</head>
</html>
26. Membuat Baris tabel pada script html.
- Teori
<tr> Membuat baris tabel.
- Praktek
Ketikkan script dibawah ini pada text editor, setelah itu simpan dengan nama baris.html pada folder belajar tag html yag telah kita buat. Kemudian buka file baris.html tersebut menggunakan browser teman-teman dan lihat hasilnya.
<html>
<head>
<title>Design-web11</title>
<body>
<table border="1">
<tr>
<th>Month</th>
<th>Saving</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</body>
</head>
</html>
27. Membuat teks garis bawah pada script html.
- Teori
<u> Membuat teks garis bawah.
- Praktek
Ketikkan script dibawah ini pada text editor, setelah itu simpan dengan nama garisbawah.html pada folder belajar tag html yag telah kita buat. Kemudian buka file garisbawah.html tersebut menggunakan browser teman-teman dan lihat hasilnya.
<html>
<head>
<title>Design-web11</title>
<body>
<p>Ini adalah sebuah <u>paragraph</u></p>
</body>
</head>
</html>
Selesai lah sudah pembahasan dari kami mengenai tag-tag html. pembahasan ini terdiri dari 3 artikel yaitu dasar-dasar membuat html bagian 1, dasar-dasar membuat html bagian 2 dan dasar-dasar membuat html bagian 3. semoga dari semua materi yang kami berikan dapat membantu teman-teman dalam memulai belajar script html. dan untuk artikel selanjutnya, kita akan lanjut ke artikel latihan html. ( Kritik dan saran dari pembaca sangat kami harapkan untuk meningkatkan kualitas dari artikel yang kami buat ).
Tag :
Belajar HTML
