Belajar Struktur dasar HTML dan contohnya
Pengertian HTML
HTML merupakan singkatan dari Hypertext Markup Language yaitu suatu bahasa yang digunakan untuk membuat halaman web. Ciri utama yang menandakan bahasa HTML adalah tag dan elemen.
Elemen
Dalam HTML, elemen dikategorikan menjadi dua yaitu :
- HEAD : yang berfungsi memberikan informasi tentang suatu dokumen HTML, seperti judul web page, descripsi situs, keyword dan lain sebagainya.
- BODY : elemen yang digunakan untuk menentukan isi yang akan ditampilkan oleh browser seperti paragrap, list, tabel, dan lain sebagainya
Tag
Dalam HTML tag dinyatakan dengan tanda kurang dari "<" dan diakhiri dengan tanda lebih dari ">". Sebagian besar kode HTML terdapat diantara tag kontainer, artinya selalu ada tag pembuka misalkan <namatag> dan ada tag penutup misalkan </namatag>. Tetapi ada sebagian tag HTML yang tidak menggunakan tag penutup misalkan tag <br>.
Contoh tag container :
<table boder=”1”>
<tr><td>
<td>Contoh tag kontainer</td>
</td></tr>
</table>
Contoh tag tanpa penutup
<image src="gambarku.jpg">
Ada tiga(3) tag utama dalam HTML yaitu :
1. tag <HTML> : berfungsi menyatakan dokumen HTML
2. tag <HEAD> : berfungsi memberikan informasi tentang dokumen HTML
3. tag <BODY> : berfungsi memberikan informasi data yang akan ditampilkan secara umum penulisan HTML adalah sebagai berikut :
<HTML>
<HEAD>
.....
.....
....
</HEAD>
<BODY>
......
......
......
</BODY>
</HTML>
Atribut
Setiap tag terkadang mempunyai atribut tersendiri yang menentukan informasi atau bentuk tampilan dari tag yang digunakan sebagai contoh tag <image> mempunyai atribut "src" sebagai informasi file image yang ingin ditampilkan.
Contoh :
<image src="gambarku.jpg">
src adalah atibut dari tag <image>, sedang “gambarku.jpg” adalah nilai dari atribut src.
Tag-tag HTML yang sering digunakan Pada elemen HEAD
TITLE
Digunakan untuk menentukan judul halaman web
Contoh :
<TITLE>My Web Site</TITLE>
Tulisan diantara tag <title> di atas akan dimunculkan di title bar “My Web Site”
META
Tag meta berfungsi sebagai bagian yang digunakan dalam pencarian, misalkan search engine, seperti bing, yahoo, atau google. Kata-kata yang pertama kali dicari oleh search engine adalah kata-kata yang terdapat di tag <meta>. Dalam tag meta terbagi menjadi beberapa elemen, misalkan untuk keyword, deskripsi web dan lain sebagainya.
Contoh :
memberikan informasi tentang keyword situs :
<meta name="keyword" content=" situs komputer jaringan, teknik informatika, belajar teknik komputer dan informasi ">
memberikan informasi tentang penjelasan situs :
<meta name="description" content=" Dari pada lupa gak bermanfaat, mending ditulis lagi aja supaya nambah berkah ">
Pada Elemen BODY:
Heading
Membuat heading menggunakan tag <h1></h1>, <h2></h2>, <h3></h3>, dan seterusnya.
contoh :
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Paragraf
membuat paragraf menggunakan tag <p></p>
contoh :
<p>
HTML merupakan kepanjangan dari Hipertext MarkUp Language yaitu suatu bahasa yang digunakan untuk membuat Web Page. HTML terdiri dari elemen dan tag.
</p>
Pindah Baris
Untuk pindah baris menggunakan ke baris berikutnya menggunakan tag <br>
contoh :
<p>
Nama : Faizin Ahmad <br>
Alamat : Banjarnegara<br>
e-mail : faizincwds12@gmail.com<br>
</p>
Blockqoute
Tag <BLOCKQOUTE> digunakan untuk menulis kutipan teks. Di browser akan menampilkan tulisan yang menjorok ke dalam.
Contoh :
<h3>Belajar HTML</h3>
<blockqoute>
HTML merupakan kepanjangan dari Hipertext MarkUp Language yaitu suatu bahasa yang digunakan untuk membuat Web Page. HTML terdiri dari elemen dan tag.
</blockqoute>
Center
Tag <center> digunakan untuk menengahkan tulisan di dalam halaman
contoh :
<center>Teks di tengah</center>
Membuat List
Ordered List <ol> : membuat daftar item dengan tiap item dengan menggunakan angka
Unordered List <ul> : membuat daftar item dengan menggunakan tanda bullet.
Contoh :
<p>Jenis-Jenis Olahraga</p>
<ol>
<li> Basket </li>
<li> Sepak Bola </li>
<li> Bulu Tangkis </li>
<li> Volly </li>
</ol>
<p>Menu Hari ini</p>
<ul>
<li> Nasi Putih </li>
<li> Tahu </li>
<li> Tempe </li>
<li> Ayam Bakar </li>
</ul>
Hypertext Link
Hypertext Link, yaitu informasi yang satu dengan yang lainnya dapat berhubungan dalam jaringan. Karena kemajuan teknologi hypertext link bukan lagi hanya menggunakan teks biasa, melainkan sudah bisa dalam bentuk multimedia sehingga disebut Link.
Untuk membuat Link menggunakan tag <a> ... </a>. Tag ini menggunakan atribut HREF yang digunakan untuk menghubungkan dokumen lain, bentuk penulisannya sebagai berikut :
<a href=”http://www.aingpunyasitus.blogspot.com”>Situs Komputer Jaringan</a>
<a href=”dok.html”> Dokumen rahasia</a>
Praktek
Buka notepad dengan cara cepat yaitu tekan logo windows+R kemudian ketikkan notepad.
Sobat bisa menggunakan notepad biasa bawaan dari windows itu sendiri, atau menggunakan notepad kesayangan sobat seperti notepad++ atau dreamweaver atau yang lainnya. Kemudian sobat isi dengan script kode html dibawah ini.
<html>
<head>
<title>My Web Site</title>
<meta name="keywords" content="situs komputer jaringan, teknik informatika, belajar teknik komputer dan informasi">
<meta name="description" content=" Dari pada lupa gak bermanfaat, mending ditulis lagi aja supaya nambah berkah ">
</head>
<body>
<center><h1>My Web Site</h1></center>
<br>
<p>Selamat datang di situs komputer jaringan, beragam informasi yang akan anda dapatkan diantaranya :
<ul>
<li>Informasi tentang Perangkat Komputer</li>
<li>Informasi tentang Pemrogramman web designer</li>
<li>Dan Informasi lainnya</li>
</ul>
</p>
<p>Silahkan anda lihat link-link informasi dibawah ini : </p>
<p><strong>Belajar Web Designer</strong> : Memberikan informasi mengenai pemrogramman web designer
<a href= "http://www.aingpunyaweb.ga"> klik disini </a> untuk melihat informasi selengkapnya <br>
<strong>Situs Anak TKJ</strong> : Memberikan informasi pelajaran sekolah dan TI, khusus untuk pelajar dengan jurusan TKJ <a href= "http://www.aingpunyasitus.blogspot.com"> klik disini </a> untuk melihat informasi selengkapnya <br>
<strong>Perangkat Komputer</strong> : Memberikan informasi tentang Perangkat komputer <a href= "http://www.peribumi45.com"> klik disini </a>untuk melihat informasi selengkapnya<br>
<strong>ICT Centre Jakarta</strong> : Center of ICT Studies Of Jakarta <a href="http://www.ictcentre.net"> klik disini</a> untuk melihat informasi selengkapnya </p>
</body>
</html>
Kemudian simpadn dengan menekan CTRL+S dan Simpan file tersebut dengan nama “praktek1.html”.
Demikian postingan mengenai Belajar Dasar-dasar StrukturHTML. Semoga tulisan di atas mudah untuk dicerna dan dipahami. Jika masih belum paham, sobat bisa tuliskan komentar yang bersangkutan dengan postingan diatas.
Sekian dan Terima kasih…
0 Response to "Belajar Struktur dasar HTML dan contohnya"
Post a Comment