Dasar-Dasar HTML
DASAR- DASAR HTML
Oleh : Radarbolang
Assalamualaikum....
ALOO teman-teman semuanya,, setelah
sekian lama RaBol gak muncul ke permukaan
sekarang Rabol balik lagi. OKE OKE ... Santai..santai..
sekarang Rabol balik lagi. OKE OKE ... Santai..santai..
Pada artikel ini RaBol akan memperkenalkan seputar HTML dan
CSS..
ada yang sudah pernah dengar? belajar? atau malah sudah Pro?..mm yang Pro sepertinya tidak perlu disebut :D
ada yang sudah pernah dengar? belajar? atau malah sudah Pro?..mm yang Pro sepertinya tidak perlu disebut :D
Dalam dunia web, pengetahuan tentang HTML dan CSS merupakan
modal yang paling utama, sehingga kita perlu belajar dan memperdalam materi
tersebut.
Baiklah pertama-tama RaBol akan membahas HTML terlebih dahulu...
1. Dasar- Dasar Html
Apa itu HTML?
HTML atau singkatan dari Hypertext MarkUp
Language merupakan sebuah bahasa sederhana
yang digunakan untuk mendeskripsikan halaman web.
Software yang digunakan untuk menuliskan HTML ini adalah sebagai berikut :
Software yang digunakan untuk menuliskan HTML ini adalah sebagai berikut :
- Text Editor. contoh : Notepad, Notepadd++
- Web Browser, guna untuk menampilkan dokumen web yang dibuat. Contoh : Chrome, Firefox, dan masih banyak lagi.
2. Tag-tag HTML
Dalam bahasa pemrograman kita mengenal Code, maka pada HTML
kita mengenal dengan yang namanya Tag. Dan Tag HTML tidak bersifat case senstivie, maksudnya ialah penulisan kode dengan huruf besar atau kecil tidak berpengaruh atau bermasalah.
misalnya :
<body> sama dengan <BODY>
misalnya :
<body> sama dengan <BODY>
Contoh tag html adalah <head>,
<title>,<html>,<body>,<img>, dan lain-lain.
Bentuk umum penulisan tag HTML adalah
<ELEMEN ATRIBUT = VALUE>
Dimana:
ELEMEN : nama tag HTML
ATRIBUT : atribut HTML
VALUE : nilai atribut HTML
Contoh :
<body bgcolor= yellow>
3. STRUKTUR Dokumen HTML
Dokumen html bisa dibagi menjadi 3 bagian utama yaitu :
Html, Head, dan Body.
berikut struktur dokumen HTML:
<html>
<head>
</head>
<body>
</body>
</html>
SUSUNAN HTML
Berikut Format dasar HTML:
- <HTML>
Setiap dokumen
HTML harus diawali dan diakhiri dengan
tag HTML, <html> dan ditutup tag </html>
Tag HTML memberitahu browser bahwa yang di dalam kedua tag tersebut adalah
dokumen HTML.
- <HEAD>
Bagian header dari dokumen HTML diapit oleh tag
<head></head>.
Dibagian ini biasanya dimuat tag <title> yang
menampilkan judul dari halaman web.
<head>
<title>judul</title>
</head>
- <BODY>
Tag <body> digunakan untuk menampilkan text, image
link, dan semua yang akan ditampilkan pada web page.
Coba contoh berikut!
<html>
<head>
<title>Welcome
to my html </title>
</head>
<body bgcolor=”blue”>
<p>Halaman web pertama saya</p>
</body>
</html>
HR,CENTER, BOLD(B),ITALIC(I), UNDERLINE (U), SMALL dan BIG
Pada dokumen HTML untuk membuat garis mendatar/horizontal
dapat menggunakan tag HR, Tag HR memiliki atribut seperti WIDTH untuk mengatur
panjang garis, SIZE untuk mengatur ketebalan garis, ALIGN untuk mengatur
aligment, dan NOSHADE untuk menghilangkan efek bayangan.
Coba contoh berikut !
<html>
<head>
<title>
Judulnya disini</title>
</head>
<body>
MIKROTIK
<hr>
Dari
ane aje
<hr
width=”5%” size=”5” align=”center”
noshade>
<hr
width=”10%” size=”10” align=”center”
noshade>
<hr
width=”20%” size=”20” align=”center”
noshade>
<hr
width=”500%” size=”20” align=”center”
noshade>
<b>Mikrotik </b> merupakan
alat yang digunakan untuk manage jaringan, seperti : <b><i>membagi
bandwit, membuat user manager,dll.</b></i><br>
<small> di bawah ini
merupakan </small>/<br>
<big>cara
memblok situs menggunakan mikrotik</big><br>
</body>
</html>
Setelah teman-teman memahami dasar-dasarnya seperti di atas,
sekarang temen-temen bisa langsung coba script sederhana di bawah ini, silahkan
di copy dan praktekkan
<html>
<head>
<title>Biografi saya</title>
</head>
<body bgcolor=”azure”>
<h1 align="center">BIOGRAFI SAYA</h1>
<font color=”#fff0123” face=”verdana” size=”5”><br>
<b> Nama</b> : <i> Ahmadi </i>
<p><b>Alamat </b> : Kalideres</p>
<p><b> Tanggal Lahir</b></font> :
<font face=”arial” color=”#000fff” size=”7”>12 Mei 2000
</font></p>
<font color="#ffffff" face=”verdana” size=”5”>
<p><b> Hobi</b> : memasuki peluang
</p>
<p><b> Cita-cita</b> : Sopir(Sopir
Komputer) </p>
</font>
</body>
</html>
Untuk menjalankanya, silahkan teman-teman pada Notepad++ di menu Run dan
klik Launch in firefox atau mozilla atau browser yang kalian suka.
Sekian itu dulu, semoga bermanfaat
Selamat mencoba dan jangan lelah untuk mencoba
Komentar
Posting Komentar