Sistem Bilangan
Download
Report
Transcript Sistem Bilangan
PELATIHAN INTERNET
Oleh :
TIM TI FT UNP
Pendahuluan
Pertama-tama puji syukur kita sampaikan kepada
Allah SWT dan Salawat beserta salam kita
persembahkan kepada Rasullullah Muhammad
SAW. Semoga kegitan ini dari mulai hingga
berakhir bernilai nilai ibadah dan berbuah
keberkatan dari Allah SWT.
Sesuai dengan perkembangan teknologi informasi
kebutuhan ilmu dan pengetahuan serta informasi
sangat diperoleh oleh semua pihak. Internet sudah
menjadi kebutuhan. Bahkan sudah menjadi gaya
hidup.
Pendahuluan
Untuk pembuatan WEBSIDE dibutuhkan
beberapa keperluan diantaranya :
Pengetahuan dasar tentang HTML
Pengetahuan dasar tentang warna dan
design web
Penataan halaman WEB
Upload ke server
Membuka halaman WEB
Dasar HTML
Dimulai dari yang pertama yaitu pengenalan dasar
tentang HTML. HTML adalah kependekan dari
Hypertext Markup Language dan merupakan bahasa
markup yang mengatur sebuah dokumen ditampilkan
pada browser.Standart HTML dibuat dengan
berdasarkan SGML (Standart Geeralized Markup
Language) dan memiliki DTD ( Document Type
Definition) yaitu merupakan dokumen yang mengatur
sintaks HTML. Sitaks HTML dapat dituliskan
diberbagai program pengolahan text salah satunya
Notepade, tetapi saat sekarang ini pemograman web
sudah dibantu oleh berbagai software aplikasi
perancangan web seperti Macromedia Dreamweaver
atau Microsoft Frompage.
Dasar HTML
Struktur Dasar HTML Adalah :
<html>
<head><title> Judul </title></head>
<body>
Informasi atau isi yang akan
disampaikan
</body>
</html>
Dasar HTML
Jadi jika diperhatikan dapat dilihat bahwa
sebenarnya HTML merupakan sutau bahasa
yang terdiri dari banyak <tag>. Tag adalah
suatu kode standart yang diawali dengan
tanda kurung siku terbuka dan tanda kurung
siku tertutup. Tag dapat berarti sebagai
permulaan perintah dan akhir dari perintah,
perbedaanya terletak pada tanda </tag>.
Tanda tersebut merupakan akhir dari perintah.
Namun ada pula tag yang bukan berarti awal
dan akhir perintah namun beridiri sendiri
seperti <hr>, <br> , <img> dan lain-lain.
Contoh :
Silahkan anda membuka sebuah notepade kemudian ketikkan perintah
berikut :
<html>
<head><title> HTML Pertama ku </title></head>
<body>
Informasi atau isi yang akan disampaikan<br> pada semua
orang <br>
<hr> Semoga bermanfaat
<H1> Informasi Pertama </H1> <br>
<H2> Informasi Kedua </H2>
</body>
</html>
// Kemudian simpan pada folder yang dinginkan dengan nama.
Webku.html.
Bagian HEAD
Untuk kejelaskan lebih jauh dapat dibedakan
perintah perintah tag. Diantaranya :
Bagian Head
<Title>
Tag ini memberikan informasi mengenai
judul halaman. Biasanya dapat kita lihat
pada icon paling bawah halaman windows
seperti pada gambar ….
Ditulis dengan perintah <title> HTML
Pertama ku </title>
Judul dari halaman web
Bagian HEAD
Bagian HEAD
<Base>
Ini ditujukan untuk menentukan basis URL dari dokumen html
yang sedang dibuka.
<base HREF="http://www.unp.ac.id">
<Link>
Ditujukan untuk relasi antar dokumen HTML yang digunakan
< link> REV=”mode” HREF=mailto:[email protected]>
<Meta>
Bagian ini bertujuan untuk mendeskripsikan halaman web yang
sedang dibuka oleh user biasanya untuk memberikan informasi
mengenai halaman web yang sedang dirancang.
<meta http-equiv="Content-Type" content="lucu, asyik,
humor; charset=iso-8859-1" />
Bagian Body
Bagian body adalah merupakan isi dari halaman web yang
menginformasikan data-data pada user (penguna atau
pengunjung halaman web). Dapat berupak text, gambar , suara
dan lain-lain. Ada beberapa perintah tag umum yang digunakan
pada body.
Backround = Menentukan URL atau suber direktori dari file image
sebagai background.
Bgcolor = Menentukan warna dari background
Text = Menentukan warna dari text
Alink = Menentukan warna dari link sedang active
Vlink= Menentukan warna dari link yang sudah dikunjungi
Link = Menentukan wana dari link
Topmargin Menentukan batas atas dokumen
Leftmargin = Menentukan batas kiri dari margin
Bgproperties=Jika diisi dengan FIXED maka gambar background
tidak ikut tergulung.
Contoh pertama
Silahkan di edit kembali web yang telah dibuat dengan mengetikkan
:
<html>
<head><title> HTML Pertama ku </title>
</head>
<body bgcolor="black" text="blue" alink="red"
vlink="#FFFF00" LINK="green">
Informasi atau isi yang akan disampaikan<br> pada semua
orang <br>
<hr> Semoga bermanfaat
<H1> Informasi Pertama </H1> <br>
<H2> Informasi Kedua </H2>
</body>
</html>
Contoh ke dua
Dan bedakan dengan perintah berikut jika terlebih dahulu salin
gambar dengan nama back.gif.
<html>
<head><title> HTML Pertama ku </title>
</head>
<body background="back.gif" text="blue" alink="red"
vlink="#FFFF00" LINK="green">
Informasi atau isi yang akan disampaikan<br> pada semua
orang <br>
<hr> Semoga bermanfaat
<H1> Informasi Pertama </H1> <br>
<H2> Informasi Kedua </H2>
</body>
</html>
Contoh ke tiga
Bedakanlagi dengan perintah ini
<html>
<head><title> HTML Pertama ku </title>
</head>
<body bgcolor="black" text="blue" alink="red" vlink="#FFFF00"
LINK="green">
Informasi atau isi yang akan disampaikan<br> pada semua orang
<br>
<hr> Semoga bermanfaat
<H1> Informasi Pertama </H1> <br>
<H2> Informasi Kedua </H2>
<a HREF=http://www.unp.ac.id> universitas negeri padang </a>
</body>
</html>
Format Dokumen HTML
Kita dapat menampilkan dokumen HTML dengan mengunakan
beberapa tag seperti berikut :
<br> merupakan perintah untuk memulai baris baru, sehingga
penulisannya tidak kesamping lagi melainkan kebawahnya
<p> untuk memulai paragraph baru.
<hr> membuat garis batas horizontal yang berguna untuk
membagi dokumen
<hn> dimana n adalah huruf dari 1 sampai dengan 7 bertujuan
untuk mebesarkan font dan mengicilkan font. <H1> adalah besar
font terbesar. Biasanya digunakan untuk membuat judul atau
biasa disebut dengan heading.
<pre> adalah membuat tampilan yang diketik sama dengan yang
ditampilkan di browser. Hal ini mirip mengan glue (lem atau
perekat)
<center> adalah untuk menengahkan karakter.
Contoh :
<html>
<head><title> HTML Pertama ku </title>
</head>
<body bgcolor="blue" text="white"
alink="black" vlink="#FFFF00"
LINK="green">
Informasi atau isi yang akan
disampaikan<br> pada semua orang <br>
<hr> Semoga bermanfaat
<H1><center> Informasi Pertama </H1>
</center> <br>
Contoh :
<pre>
Peserta platihan web di FT UNP dikelompokkan atas dua kelompok yaitu :
Kelompok I
============================================================
Terdiri dari
--------------------------------------------: no : Nama
: NIM
:
: 1 : Muh. Fadli
: 00123 :
: 2 : Kamaruzaman : 10114 :
: 3 : Riki Martin
: 21211 :
: 4 : Wulandari
: 32112 :
--------------------------------------------
Contoh :
Kelompok II
==========================================================
Terdiri dari
------------------------------------------: no : Nama
: NIM :
: 1 : Saiful
: 13123 :
: 2 : Amri
: 45114 :
: 3 : Luna Haru
: 41415 :
: 4 : Sarmila
: 32919 :
-------------------------------------------</pre>
<a HREF=http://www.unp.ac.id> universitas negeri padang </a>
</body>
</html>
Bagian Format Karakter HTML
Logical Format
<cite> merupakan kepenekan dari cituation yang berfungsi
untuk menampilkan kutipan
<code> untuk menampilkan tulisan untuk menandakan text
itu adalah program.
<em> untuk memberikan penekanan atau penandaan pada
text tertentu
<samp> untuk menandai suatu text sebagai sample
<strong> untuk menandai bagian yang penting dalam text
tertentu
<var> untuk menampilkan variable dalam halaman web
<address> untuk menampilkan alamat pada halaman web
Bagian Format Karakter HTML
Physical Format
<b> untuk membuat huruf tebal
<i> untuk huruf miring
<TT> untuk huruf mirip mesin ketik
<u> untuk huruf bergaris bawah
<strike> untuk menampilkan garis horizontal pada tengah
huruf
<small> untuk menampilkan huruf lebih kecil
<big> untuk menampilkan huruf lebih besar
<sub> untuk menampilkan subscript
<sup> untuk menampilkan superscript
<font> untuk mengatur huruf sesuai dengan property font
yang disediakan
Bagian Link
Untuk menghubungkan kehalaman yang
lain yang tidak ada hubungan dengan
halaman web sendiri digunakan link <a>
<a href=http://ft.unp.ac.id> web side ft
unp </a>
Pengayaan
Buat Design web dengan aplikasi
pemograman web seperti dreamweaver
atau frontpage
Upload ke server gratis seperti :
www.geocities.com
www.100webspace.com
www.freehostia.com
Pengayaan
Pengayaan
Pengayaan
Pengayaan
Pengayaan