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:zainal_abidin@ymail.com">

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:zainal_abidin.stat@yahoo.com">

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>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>