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.

Baca Juga
Bagian Penting dalam Pembuatan Template
3 Tag Meta yang HARUS kalian ketahui

Element

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 :

tag <HTML> : berfungsi menyatakan dokumen HTML
tag <HEAD> : berfungsi memberikan informasi tentang dokumen HTML
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 :

src adalah atibut dari tag <image>, sedang “gambarku.jpg” adalah nilai dari atribut src.

Tag-tag HTML yang sering digunakan Pada Element 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”

Pada Element 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 : faizincwds@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=”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…

Belajar Struktur dasar HTML dan contohnya