https://departments.moe.gov.sa/ExternalSaudiSchools/Documents/arabic.
pdf
https://thequranblog.files.wordpress.com/2010/06/arabia1pbiana-yadiaka.pdf
Makalah Perancangan Website
BAB I
PENDAHULUAN
1.1 LATAR BELAKANG
Perancangan halaman atau web design adalah istilah umum yang digunakan untuk mencakup
bagaimana isi web konten ditampilkan, (biasanya berupa hypertext atau hypermedia) yang dikirimkan
ke pengguna akhir melalui World Wide Web, dengan menggunakan sebuah browser web atau
perangkat lunak berbasis web. Tujuan dari web design adalah untuk membuat website sekumpulan
konten online termasuk dokumen dan aplikasi yang berada pada server web / server. Sebuah website
dapat berupa sekumpulan teks, gambar, suara dan konten lainnya, serta dapat bersifat interaktif
ataupun statis.
Elemen-elemen seperti teks, forms, images (GIFs, JPEGs, Portable Network Graphics) dan video dapat
diletakkan didalam halaman menggunakan tag-tag HTML/XHTML/XML. Browser terkadang juga
memerlukan Plug-ins seperti Adobe Flash, QuickTime, Java, dan sebagainya untuk menampilkan
beberapa media yang diletakkan didalam halaman web menggunakan tag-tag HTML/XHTML.
Halaman web dan situs web dapat berupa halaman statis, atau dapat diprogram secara
dinamis sehingga menghasilkan halaman web dengan konten atau tampilan visual yang diinginkan,
tergantung pada berbagai faktor, seperti masukan dari pengguna akhir, masukan dari Webmaster,
atau perubahan dalam lingkungan komputasi (seperti situs yang terkait dengan database yang telah
diubah).
Desainerweb (webdesigner) adalah orang yang memiliki keahlian menciptakan konten
presentasi (biasanya hypertext atau hypermedia) yang dikirimkan ke pengguna-akhir melalui World
Wide Web, menggunakan Webbrowser atau perangkat lunak Web-enabled lain
seperti televisiinternet, Microblogging, RSS, dan sebagainya.
Dengan berkembangnya spesialisasi dalam desain komunikasi dan bidang teknologi informasi,
ada kecenderungan kuat untuk menarik garis yang jelas antara web design khusus untuk halaman
web dan pengembangan web secara keseluruhan dari semua layanan berbasis web.
1.2 MASALAH
1. Apa itu webside?
2. Bagaimana langkah-langka dalam mendesain halaman web untuk pembelajaran bahasa arab ?
3. Tag-tag apa saja yang digunakan untuk membuat halaman web?
4. Bagaimana bentuk halaman web?
1.3 TUJUAN
Karya ilmiah ini bertujuan untuk menambah wawasan baik kepada para pembaca maupun bagi
penyusun karya tersebut, hal ini dapat juga membantu khususnya bagi mahasiswa Program Studi D-
III Statistika, agar nantinya dalam membuat rencana pelaksanaan pembelajaran dapat menerapkan
model pembelajaran kooperatif yang sesuai dengan tingkat perkembangan siswa dan materi
pembelajaran.serta dapat meningkatkan wawasan bagi seluruh mahasiswa.
Selain itu karya ilmiah ini bertujuan untuk mengembangkan mahasiswa agar mampu membuat
halaman webside pribadinya, dan mampu mendesain web tersebut agar lebih indah di pandang.
Tujuan bagi mahasiswa terhadap makalah ini adalah:
1. Mahasiswa mampu mengetahui pengertian dari webside.
2. Mahasiswa mampu mengetahui langkah-langkah dalam mendesain halaman web.
3. Mahasiswa mampu mengetahui tag-tag yang digunakan dalam membuat halaman web.
4. Mahasiswa mampu membuat halaman web pribaedinya masing-masing.
1.4 MANFAAT
Adapun manfaat dalam penulisan makalah ini adalah agar pembaca dapat memahami dan mengerti
isi materi dalam karya ilmiah ini secara rinci dan terarah.
Manfaat yang lain adalah: mampu membuat halaman web pribaedinya masing-masing lalu di simpan
dalam warnet melalui web server agar bias di lihat oleh pengunjung.
BAB II
PEMBAHASAN
A. Pengenalan Perancangan Web
Perancangan web adalah istilah umum yang digunakan untuk mencakup bagaimana isi
web konten ditampilkan, (biasanya berupa hypertext atau hypermedia) yang dikirimkan ke pengguna
akhir melalui World Wide Web, dengan menggunakan sebuah browser web atau perangkat lunak
berbasis web. Tujuan dari web design adalah untuk membuat websitesekumpulan
konten online termasuk dokumen dan aplikasi yang berada pada server web / server. Sebuah
website dapat berupa sekumpulan teks, gambar, suara dan konten lainnya, serta dapat bersifat
interaktif ataupun statis.
B. Langkah-Langkah Mendesain Halaman Web
Untuk membangun sebuah website, diperlukan suatu langkah-langkah persiapan yang secara
umum dibagi dalam lima tahap, yakni:
1. Merumuskan tujuan membuat website
Berdasarkan isi maupun tujuan, suatu website biasanya dapat digolongkan menjadi seperti
berikut ini:
a. Website marketing, berfungsi sebagai media presentasi dan pemasaran.
b. Website customer service, berfungsi sebagai media untuk melayani konsumen.
c. Website e-Commerce, berfungsi sebagai media transaksi on-line.
d. Website informasi/berita, berfungsi sebagai media informasi berita
2. Menentukan isi website
Faktor yang paling penting dalam suatu website adalah isi dari website itu sendiri. Hal tersebut
berkaitan dengan manfaat yang akan diperoleh pengunjung dari sebuah website.
3. Menentukan target pengunjung
Meskipun suatu website mempunyai sifat terbuka dalam arti sebuah website bebas dikunjungi
oleh semua orang, namun alangkah baiknya apabila dalam pembuatan website perlu dilakukan
gambaran target yang akan dituju oleh sebuah website. Alasan ini lebih didasarkan pada
penggunaan hardware dan aplikasi browser yang berbeda dengan setiap pengunjung.
4. Menentukan struktur website
Struktur website diperlukan untuk memberikan kemudahan dalam mengelola
suatu website. Tentunya struktur tersebut harus disesuaikan dengan isi dari website. Dengan
memiliki struktur yang terorganisasi dengan baik, suatu website akan memberikan kemudahan dalam
navigasi, editing dan pemeliharaan website tersebut.
5. Desain website
Faktor keindahan desain tampilan dari suatu website merupakan salah satu faktor yang paling
penting dalam menetukan keberhasilan suatu website, selain faktor kecepatan loading. Suatu situs
yang baik memiliki suatu kesatuan desain bisa dikatakan memiliki kesamaan tema dalam halaman-
halaman webnya. Hal ini penting dalam segi estetika maupun segi navigasi. Kesamaan desain yang
biasanya dipertahankan antara lain kesamaan jenis font yang digunakan, warna, tombol navigasi
(menu), letak menu dan sebagainya. Adapun hal-hal yang penting untuk diketahui seorang web
designer adalah sebagai berikut:
a. Prinsip-Prinsip Dasar Desain
Untuk membangun suatu website yang baik, seorang web designersebaiknya
memperhatikan prinsip-prinsip yang ada, terlepas ia mempunyai bakat seni atau tidak. Adapun
prinsip-prinsip yang harus diperhatikan antara lain (komputek, 2001) :
a) Unik. Yang dimaksud dengan unik dalam mendesain suatu website adalah kesadaran
seorang designer untuk tidak meniru atau menggunakan karya orang lain.
b) Komposisi. Untuk memperindah tampilan halaman web, seorang web designerharus betul-betul
memahami komposisi, baik bentuk maupun warna yang akan digunakan dalam website yang
dibuatnya.
c) Simple. Banyak dari seorang web designer yang memegang prinsip-prinsip “ Keep it Simple”. Hal
ini ditujukan agar tampilan website terlihat rapi, bersih dan informatif.
d) Semiotik. Arti semiotik adalah ilmu yang mempelajari tentang tanda-tanda. Dalam hal ini
diharapkan pengunjung dapat dengan dengan mudah dan cepat mengerti ketika melihat tanda dan
gambar yang ada dalam suatu website.
e) Ergonomis. Ergonomis dalam mendesain website adalah kepunyaan yang akan didapatkan
pengunjung dalam membaca dan kecepatan yang akan diperoleh pengunjung dalam mencari
informasi.
f) Fokus. Fokus adalah hierarki prioritas dari pesan yang akan disampaikan. Dengan adanya fokus
tersebut, diharapkan pengunjung dapat memahami dan menentukan pesan mana yang lebih dahulu
harus dibaca atau dilihat.
Konsistensi. Konsistensi adalah pemilihan bentuk atau style yang digunakan pada elemen-elemen
perancangan web dan digunakan pada semua halaman website Websiteyang konsiten akan
memberikan identitas tersendiri dan mampu memperlihatkan visi serta misi dari website tersebut.
a. Elemen-elemen desain
Desain grafis khususnya dalam halaman-halaman web terdiri dari beberapa elemen
sebagai berikut (Ariesto Hadi Sutopo,2002):
a. Teks adalah bagian yang paling utama untuk menampilkan informasi
b. Grafik atau Image merupakan elemen yang dapat membantu menjelaskan informasi. Dengan
penggunaan grafik maupun image orang lebih mudah memahami suatu pesan.
c. Animasi merupakan sarana untuk menampilkan informasi dengan baik, disamping animasi
merupakan daya tarik yang mudah diingat pengunjung.
d. Video dapat merupakan hasil suatu rekaman dengan kamera video maupun hasil pengolahan
dengan komputer.
e. Suara melengkapi desain web, memberikan efek khusus pada suatu tampilan animasi serta
memberikan kenyaman bagi pengunjung yang mendengarkannya
f. Interaktive link dapat menggunakan button yang berupa teks, simbol, grafik, maupun image,
yang berfungsi untuk memudahkan pengunjung dalam menyelusuri suatu website.
b. Konsep Desain
Pada intinya konsep mendesain tampilan website sangat berkaitan dengan desain gra-
fis , dan pada dasarnya mengikut prinsip desain grafis secara umum. Oleh karena itu alangkah
baiknya jika dalam mendesain halaman tampilan website juga memperhatikan prinsip desain.
Prinsip-prinsip desain tersebut adalah:
1. Komunikatif. Prinsip komunikatif berhubungan dengan corporate identity, isi pesan serta audiens.
2. Estetis. Fungsi dari estetis ini adalah memberikan suatu keindahan, sehingga lebih menarik
minat pengunjung untuk lebih menggali informasi yang ditawarkan dari suatu website.
3. Ekonomis. Desain web harus memperhatiakan faktor ekonomis dalam arti ukuran file yang
digunakan. Hal tersebut berkaitan erat dengan kecepatan akses yang ditawarkan suatu website.
Untuk mendapatkan desain yang komunikatif, estetis dan ekonomis hendaknya seorang
web designer perlu memperhatikan pedoman-pedoman yang ada untuk membuat tata letak suatu
tampilan, yaitu dalam mengatur elemen-elemen layout. Pedoman yang dimaksud adalah:
1. Kesatuan. Elemen-elemen layout dari halaman harus ditempatkan sedemikian rupa sehingga
merupakan kesatuan informasi pada satu halaman atau beberapa halaman.
2. Balance. Elemen-elemen layout dari halaman harus ditempatkan sedemikian rupa sehingga
terdapat keseimbangan secara keseluruhan.
3. Kontras. Diperlukan untuk menonjolkan bagian yang dianggap lebih penting dari bagian
lainnya. Kontras dapat dinyatakan dengan membedakan ukuran serta warna dari elemen-
elemen layout.
4. Kontinyuitas. Informasi lebih dimengerti oleh pengguna bila mempunyai aliran-aliran yang baik,
sedikit gangguan yang menghambatnya. Suatu aliran informasi dapat dikatakan kontinyu dan
harmonis bila tampilannya mencerminkan kesinambungan dari satu bagian ke bagian lain.
Kontinuitas dapat dibuat dengan membuat halaman-halaman mempunyai gaya, bentuk atau warna
yang memberikan pengguna merasakan kesinambunagn dengan halaman lainnya.
Bermacam-macam langkah yang digunakan untuk membuat layout dari suatu website. Berikut ini
merupakan proses yang secara umum banyak dilakukan dalam pembuatan layout.
a. Membuat sketsa desain. Seorang desainer bisa saja menuangkan ide dalam
pembuatan interface dengan terlebih dahulu membuat sketsa di atas kertas. Namun untuk
kebanyakan orang, langkah ini biasanya dilewatkan dan langsung pada langkah
pembuatan layout desain dengan menggunakan software.
b. Membuat layout desain. Banyak software yang dapat digunakan membuat layout. Salah satu
diantaranya adalah Macromedia, proses ini dikerjakan setelah pembuatan sketsa desain. Namun
terkadang pembuatan layout merupakan proses yang pertama kali dikerjakan.
c. Membagi gambar menjadi potongan-potongan kecil. Proses ini diperlukan untuk meng-
optimize waktu download.
d. Membuat animasi. Animasi diperlukan untuk menghidupkan atau menjadikan website lebih
interaktif.
A. Tag-Tag Yang Digunakan Untuk Membuat Halaman Web
1. Jenis-Jenis Tag Pada HTML
NO JENIS TAG DESKRIPSI
1 <TITLE> Untuk memberi judul dokumen
2 <BASE> Untuk menentukan baris url sebuah dokumen
3 <LINK> Untuk membuat relasi antar dokumem HTML
4 <META> Untuk mendefinisikan informasi-informasi diluar html
5 <HR> Untuk membuat garis batas horizontal dengan atribut
6 <PRE> Untuk membuat tampilan html pada broser sama dengan
tampilan pada text editor
7 <TEXTARE><CITE> Untuk membuat sebuah kotak text multibaris
8 <CITE> Untuk menandai suatu ketikan
9 <CODE> Untuk menampilkan kode program
10 <DFN> Untuk menandai sebuah sub definisi daftar definisi
11 <B> Untuk menebalkan huruf
12 <I> Untuk memiringkan huruf
13 <U> Untuk garis bawah text
14 <TT> Untuk huruf masin ketik
15 <STRIKE> Untuk garis horizontal pada tengah huruf
16 <BIG> Untuk memperbesar tampilan huruf
17 <SMALL> Untuk memperkecil tampilan huruf
18 <KBD> Untuk menandai suatu text yang dimasukan oleh user
melalui keyboard
19 <STRONG> Untuk menandai bagian terpenting dari suatu text
20 <VAR> Untuk menampilkan nama variabel
21 <EM> Untuk menandai suatu text yang ditentukan penulis
22 <SUB> Untuk karakter subscript
23 <SUP> Untukkarakter supercript
24 <BLOCKUOTE> Untuk menandai suatu bagian khususkan dokumen
25 <FONT> Untuk mengatur jenis, ukuran,dan warna huruf
26 <TH> Untuk membuat judul coloum atau baris
27 <TD> Untuk membuat coloum tabel
28 <FORM> Untuk membuat sebuah form
29 <TEBLE> Untuk mendefinisikan sebuah tabel
30 <TR> Untuk membuat garis tabel
31 <SELECT> Untuk membuat sebuah daftar pilihan
32 <H> Untuk merupakan sekumpulan kata yang menjadi judul
atau subjudul dalam suatu dokumen
33 <DIV> Untuk membagi dokumen html dalam hierarki yang
terstuktur
34 <SAMP> Untuk menandai suatu text yang dimadsudkan sebagai
contoh
35 <INPUT> Untuk membuat dokumen yang digunakan untuk meminta
informasi dari user
2. Struktur dasar HTML
<HTML>
<HEAD>
<TITLE> isikan text </TITLE>
</HEAD>
<BODY>
isikan text sesuai keinginan
</BODY>
</HTML>
3. Tag-Tag Pada Halaman Homepage
<html>
<head>
<title>Home</title>
</head>
<body bgcolor="white">
<table bgcolor="wind4" width=950 height=800 align=center border=2>
<tr>
<td>
<table background="amin.jpg" width=950 height=230 align=center border=0>
<tr><td>
<div align="center">
<font color="red" size="6"><b>
<marquee scrolldelay="100" style="Arial" width="850">Selamat Datang Di Website
zainal_abidin_stk10</marquee></b></font></div>
</tr>
</td>
</table>
<table background="wind5.jpg"width=950 height=35 align=right border=0>
<tr>
<td>
<table background="wind.5.jpg" width=86 height=37 align=left border=0>
<tr>
<td><A Href="Bagian I.html" Target="_top">
<font color="Blue"><b><center><font face="arial" size=4>Home</font></b></font>
</td></A>
</tr>
</table>
<table background="wind5.jpg"width=86 height=37 align=left border=0>
<tr>
<td><A Href="Bagian I_2.html" Target="_top">
<font color="red"><b><center><font face="arial" size=4>Profil</font></b></font>
</tr>
</td></A>
</table>
<table background="wind5.jpg"width=86 height=37 align=left border=0>
<tr>
<td><A Href="About.html" Target="_top">
<font color="silver"><b><center><font face="arial" size=4>About</font></b></font>
</tr>
</td></A>
</table>
</tr>
</td>
</table>
<table background="wind6.jpg" width=950 height=500 align=top border=0>
<tr><td width=250>
<table background="wind4.jpg" border=2><tr><td width=260 height=45><A Href="Bagian I.html"
Target="_top">
<center><font face="arial" size="4" color="blue"><b>Home</b></font></td></A></tr></table>
<table background="wind6.jpg" border=2><tr><td width=260 height=45> <A Href="Bagian I_2.html"
Target="_top">
<center><font face="arial" size="4"color="aqua"><b>Profile</b></font></td></A></tr></table>
<table background="wind4.jpg" border=2><tr><td width=260 height=45><A Href="About.html"
Target="_top"<center><font face="arial" size="4"
color="purple"><b>About</b></font></td></tr></table>
<table background="wind6.jpg" border=2><tr><td width=260 height=300><center>
<img src="JI.GIF" width=150 height=150> <p>
<A href="coki.html" target="_blank">
<img src="bo.jpg" height=100 width=100></A>
<p><A href="sapi.html" target="_blank"><img src="kai.jpg" height=100 width=100></A></p>
<p><A href="ode.html" target="_blank"><img src="satu.jpg" height=100 width=100></A></p>
</td></tr></table>
<table background="wind6.jpg" border=2><tr><td width=260 height=935 ALIGN=left VALIGN=top>
<form method="post" action="mailto:[email protected]">
Category Pilihan Website ini :
<select multiple name="ini" size="4">
<option value="Artikel" selected>Artikel</option>
<option value="Profile">Profile</option>
<option value="About">About</option>
<option value="Foto">Foto</option>
<option value="Biodata">Biodata</option>
<option value="Permainan" >permainan</option>
</select><p></P>
<input type="submit" value="Send">
</form>
<Pre>
</pre>
<form method="post" action="mailto:[email protected]">
Pilih Pendapat Anda tentang Website ini :
<input type="checkbox" name="ini" value="Bagus">Bagus<p></p>
<input type="checkbox" name="ini" value="Sedang">Sedang<p></P
<input type="checkbox" name="ini" value="Biasa">Biasa<p></p>
<input type="checkbox" name="ini" value="Jelek">Jelek<p></p>
<input type="submit" value="OK">
<P>
<H2 Align="center"><object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,40,0" width="150" border="0" height="150">
<param name="movie" value="anaclock.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#4883F9">
<embed src="anaclock.swf"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-
flash" name="obj1" width="150" height="150">
</object><br>
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,40,0" width="150" border="0" height="40">
<param name="movie" value="digiclock.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#4883F9">
<embed src="digiclock.swf"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-
flash" name="obj1" width="150" height="40">
</object></H2>
</form>
</td></tr></table>
</td><td width=600>
<table background="wind6.jpg" border=0><tr><td width=700 height=450 Align=center
valign=top><font face="French Script MT" size="7" color="red"><center><b><marquee>"Rumah-
rumah ALLAH"</marquee></b></font>
<p></p>
<center>
<img src="1.jpg" width=400 height=400>
<br>
<></b></font></div>
</td></tr></table>
<table width=550 height=950 align=center><tr><td align=justify valign=TOP>
<font face="arial" size=6>Rumah-rumah ALLAH yang biasa
disebut dengan mesjid merupakan tempat beribadah bagi umat islam,dengan menjalankan segala
perintahnya yaitu dengan menunaikan shalat sebagaimana yang diwajibkan. Barang siapa yang
memilihara masjid maka insya allah,allah akan memeliharanya pula dalam surganya. Oleh karena itu
marilah kita bersama-sama menjaga rumah allah tersebut agar kita semua masuk dalam surganya.
</font>
</font></td></tr></table>
<center><font face="arial" size=3 color="blue">Halaman <A Href="Bagian I.html" Target="_top"> 1,
</A><A Href="Bagian I_2.html" Target="_top"> 2, </A><A Href="Bagian I.html"
Target="_top"> Next </A><A Href="Bagian I.html" Target="_top"> Back <A>
</td></tr>
</table>
</tr>
</td>
</table>
<table background="satu.jpg"width=950 height=100 align=center border=0>
<tr><td>
<div align="center">
<font color="red" size="7"><b>
<marquee scrolldelay="100" style="Arial" width="850"><i>Sampai jumpa dilain
waktu</i></marquee></b></font></div>
</tr>
</td>
</table>
</tr>
</td>
</table>
</boody>
</html>
Gunakan alpikasi notepad
BAB III
PENUTUP
3.1 KESIMPULAN
Desainerweb (webdesigner) adalah orang yang memiliki keahlian menciptakan konten
presentasi (biasanya hypertext atau hypermedia) yang dikirimkan ke pengguna-akhir melalui World
Wide Web, menggunakan Webbrowser atau perangkat lunak Web-enabled lain
seperti televisiinternet, Microblogging, RSS, dan sebagainya. Dengan berkembangnya spesialisasi
dalam desain komunikasi dan bidang teknologi informasi, ada kecenderungan kuat untuk menarik
garis yang jelas antara web design khusus untuk halaman web dan pengembangan web secara
keseluruhan dari semua layanan berbasis web.
3.2 KRITIK DAN SARAN
Dalam penyusunan karya ilmiah yang serba singkat mengenai ”Pembahasan tentang membuat
halaman web pribadi” ini tentu banyak sekali kelemahan dan kekurangan dalam menjelaskan
seluruh materi-materi, Oleh karena itu penulis meminta saran dan kritik pembaca demi
kesempurnaan karya ilmiah ini dan akan membantu penyusunan karya ilmiah kedepannya. Karena
penulis hanyalah manusia biasa yang tak pernah luput dari iklaf,dosa dan kesalahan.
Akhir kata saya ucapkan terima kasih.
DAFTAR PUSTAKA
Beazley, David M., Advanced Python
Programming, Departement of Computer Science University of Chicago, Chicago, 2000.
Downey, Allen, Cris Meyers, Jeffrey Elkner, How to Think Like a Computer Scientist
Learning with Python, Green Tea Press, Wellesley, Massachusetts, 2002.
Fielding, R., Hypertext Transper Protocol/1.1, Internet Society, 1995.
Hetland, Magnus Lie, Beginning Python from Novice to Profesional, Apress, Ney York, 2005.
Mitchell, Mark, Jeffrey Oldham, Alex Samuel. Advanced Linux Programming. New Riders
Publishing, Indiana, 2001.
http://natachrist.files.wordpress.com/2011/01/php-dan-mysql.png
Teguh Salam.2007. Pemanfaatan MIME Base64 Untuk Menyembunyikan Source
Code PHP. Bandung
Struktur kode HTML yang harus selalu ada di setiap halaman situs adalah:
<html> <head> <title>Tulis Judul Anda di Sini</title> <meta name="description"
content="tulis deskripsi/penjelasan singkat situs anda di sini"> <meta name="keyword"
content="tulis kata kunci halaman anda di sini"> </head> <body> Di sini adalah konten / isi
halaman anda </body> </html>
Latihan 1. Belajar membuat halaman sederhana dengan kode HTML
Sebagai bahan untuk belajar HTML, sekarang buka program Notepad anda. Caranya klik
"start" pilih program, cari program Notepad, jika sudah anda buka kemudian tuliskan kode -
kode HTML di bawah ini :
<html>
<head>
<title>Modul Belajar HTML</title>
<meta name="description" content="Modul belajar HTML untuk pemula">
<meta name="keyword" content="modul html,belajar html">
</head>
<body>
Modul HTML ini berisi latihan - latihan sederhana untuk beljar membuat sebuah halaman
website agar dapat online di internet. Bagi anda yang masih pemula sebaiknya mengikutinya
dengan memparaktekkan secara langsung agar lebih mudah dalam memahami setiap variasi
kode-kode HTML.
</body>
</html>
Setelah selesai menuliskan kode-kode HTML di atas kemudian anda simpan. Caranya : klik
"file" kemudian pilih " save as "tentukan lokasi penyimpanan, misalnya pada folder " latihan
di * my document", pada" file
name " tulis nama file misalnya " latihan1.html" pada save as type isikan "all file" kemudian
klik
save.
Untuk mengetahui hasilnya pada browser, caranya sebagai berikut:
Cari file" latihan 1.html" yang anda simpan pada folder " latihan "di" my document, setelah
ketemu kemudian klik kanan, pilih "open with "lalu pilih browsernya misalnya" internet
explorer * maka hasilnya akan tampak seperti gambar di bawah ini :
Latihan 2. Belajar membuat link atau tautan dengan kode HTML:
misalnya : kata yang terlihat dalam link ( ancor text) adalah cara membuat website
sedangkan alamat/URL dari halaman yang dituju tersebut adalah
https://edyutomo.com/internet-dankomputer/cara-membuat-website
maka kode HTML nya adalah :
<a href="https://edyutomo.com/internet-dan-komputer/cara-membuat-website"> cara
membuat website</a>
hasilnya adalah cara membuat website
cara 3. Belajar kode warna HTML untuk mengedit warna teks:
<font color="red">kata yang diedit</font>, ini akan mengubah warna teks menjadi merah.
Lihat contoh berikut ini :
<font color="red">Modul HTML</font> ini berisi latihan - latihan.....
Latihan 4. Kombinasi kode warna HTML, paragraf baru, ukuran huruf dan jenis huruf :
<p align="left"><font face="arial" size="6" color="red"> kata yang diedit</font></p>
ini akan membuat paragraf menjadi rata kiri, dengan jenis huruf arial, ukuran 6 dan warna
teks menjadi merah.
Lalu bagaimana untuk membuat warna menjadi warna campuran, ah... itu gampang. Caranya
anda buka
photoshop, lihat gambar di bawah :
klik kotak merah yang saya lingkari, kemudian akan muncul kotak dialog color picker, lalu
cari warna yang anda inginkan, lalu copy code warna yang ada di bawah (saya tandai).
setelah itu anda paste pada kode warna HTML untuk mengedit wama.
Contoh : color="#ed2006
mudah-mudahan jelas ya.
Kode HTML lainnya :
<p>isi paragraf<p>. untuk membuat paragraf baru
<brisi kalimat</br>. untuk membuat baris baru
<b>kata/kalimat</b>. untuk membuat teks tebal
<>kata/kalimat</i>. untuk membuat kata mining
<u>kata/kalimat</u>. untuk membuat garis bawah
cara 5. Belajar cara menyisipkan gambar dengan kode HTML:
Sebelum kita menyisipkan gambar, terlebih dahulu kita harus mengupload foto atau gambar
untuk mendapatkan link dari gambar tersebut untuk keperluan menyisipkan gambar yang
telah kita tentukan. Lihat cara upload foto
atau gambar
sebagai contoh saya telah mengupload gambar pada situs image hosting
http://photobucket.com, sehingga saya mendapatkan url link gambar seperti berikut ini:
http://1095.photobucket.com/albums/1480/satujambi/contoh1.gif Sebagai contoh, lihat
ilustrasi contoh penerapan kode HTML di bawah ini:
<p>di bawah ini adalah contoh gambar :</p>
<img src="https://1095.photobucket.com/albums/1480/satujambi/contoh1.gif
cara 6. Belajar kode HTML untuk menyisipkan link pada gambar
Sebagai contoh, berdasarkan gambar di atas, kita akan menyisipkan link menuju
halaman https://edyutomo.com/anak-dan-balita kumpulan-puisi-anak, maka kode
HTML yang perlu dibuat adalah sebagai
berikut :
<a href="https://edyutomo.com/anak-dan-balita/kumpulan-puisi-anak">
<img src="https://1095.photobucket.com/albums/1480/satujambi contoh
1.gif"></a>