Yudafikra Andika - X RPL 3: Oktober 2013

Minggu, 13 Oktober 2013

Materi PI - WEB 03-10-2013

Tag <Center>

Untuk menengahkan suatu teks, bisa juga digunakan tag center. Tentu saja, untuk mengakhiri penengahan teks (agar teks berikutnya tidak di tengah) perlu disertakan </center>

Contoh :

<HTML>

<HEAD>

<TITLE> tag center </TITLE>

</HEAD>

<BODY>

<H2> Jenis keladi yang mempesona </H2>

Red Flash <BR>

Red Fire <BR>

</CENTER>

</BODY>

</HTML>

Tag <DIV>

Tag divisi <DIV> berguna untuk mengelompokan sejumlah baris teks

Contoh :

<HTML>

<HEAD>

</HEAD>

<BODY>

<h1><u>primasoft kreasindo </u></h1>

<h2> Jl.kalasan km 14 </h2>

<h2> Yogyakarta </h2>

</DIV>

<HR>

</BODY>

</HTML>

Mengatur teks

a. Mengatur teks secara fisik

Daftar tag untuk mengatur teks secara fisik

<B>teks</B> = teks ditampilkan dalam keadaan ditebalkan

<BIG>teks</BIG> = teks lebih besar dari ukuran normal

<I>teks</I> = teks ditampilkan dalam keadaan miring

<SMALL>teks</SMALL> = teks lebih kecil dari ukuran normal

<SUB>teks</SUB> = teks ditampilkan sebagai subscript

<SUP>teks</SUP> = teks ditampilkan sebagai supscript

<TT>teks</TT> = teks ditampilkan seperti tulisan mesin TIK

<U>teks</U> = teks diberi garis bawah

Contoh :

<HTML>

<HEAD>

<TITLE> Memformat secara Fisik </TITLE>

</HEAD>

<BODY>

<small>teks dengan tag small</small><BR>

Teks dengan ukuran normal<BR>

<BIG>teks dengan ukuran BIG</BIG>

<HR>

Teks normal <BR>

<B>teks dengan tag B</B><BR>

<I> teks dengan tag I </I><BR>

Normal<SUB>dengan tag SUB</SUB><BR>

Normal<SUP>dengan tag SUP</SUP><BR>

<TT>seperti ketikan mesin tik</TT><BR>

<U>teks diberi garis bawah</U>

<U><B><I>tebal, miring, dan diberi garis bawah </I></B></U>

</BODY>

</HTML>

b. Daftar tag untuk mengatur teks secara logika

<CITE>teks</CITE> = menyatakan teks adalah kutipan

<CODE>teks</CODE> = teks(kode,program computer,nonskrip)

<EM> teks </EM> = menyatakan penekanan pada teks (miring)

<KBD>teks</KBD> = teks masukan dari keyboard font nonspasi

<SAMP>teks</SAMP> = teks suatu konstanta karakter(monospasi)

c. Praformat

<HTML>

<HEAD>

<TITLE> Praformat </TITLE>

</HEAD>

<BODY>

<h2> Daftar Harga Keladi </h2>

<PRE>

Red Flash ………………..35.000<BR>

Red Fire…………………..60.000<BR>

</PRE>

</BODY>

</HTML>

Mengatur Font

Tag <Font></Font> berguna untuk mengatur jenis, ukuran, warna font

a. Jenis Font

Untuk menentukan font, diperlukan atribut face

Contoh :

<HTML>

<HEAD>

<TITLE> Jenis Font </TITLE>

</HEAD>

<BODY>

Normal: 012345abcd <BR>

<font face=”arial”> arial:012345abcd</font> <BR>

<font face=”Verdana”> Verdana:012345abcd</font> <BR>

<font face=”Lucida”> Lucida:012345abcd</font> <BR>

</BODY>

</HTML>

b. Ukuran Font

<HTML>

<HEAD>

<TITLE> Ukuran Font </TITLE>

</HEAD>

<BODY>

Normal: 012345abcd<BR>

Normal<BR>

Normal<BR>

</BODY>

</HTML>

c. Warna Font

Jika warna latar belakang akan diatur, pengaturan perlu dilakukan melalui tag <BODY> dengan property berupa BGCOLOR.

Daftar Nama warna pada atribut teks :

Aqua = 00FFFF

Fuchsia = FF00FF

Lime = 00FF00

Maroon = 800000

Navy = 00080

Olive = 808000

Teal = 008080

Contoh :

<HTML>

<HEAD>

<TITLE> Warna background </TITLE>

</HEAD>

<HR>

<P ALIGN=”CENTER”

Jenis jenis warna <BR>

<HR>

<PRE>

<Font color=”red”>warna merah</font><BR>

<Font color=”yellow”>warna kuning</font><BR>

<Font color=”green”>warna hijau</font><BR>

<Font color=”aqua”>warna aqua</font><BR>

</PRE>

</BODY>

</HTML>

d. Mengatur Default Font

HTML menyediakan tag bernama <BASEFONT> yang berfungsi untuk menentukan ukuran default font untuk sebuah halaman

Contoh:

<HTML>

<HEAD>

<TITLE> Penggunaan basefont </TITLE>

</HEAD>

<BODY>

Normal <BR>

<font color=”blue”> warna biru </font><BR>

</BODY>

</HTML>

Membuat link

Untuk membuat link ke halaman lain, digunakan pasangan tag <A>…</A> atau biasa yang kita sebut tag jangkar ranchor tag. Bentuk paling sederhana :

<A href=”URL”>label</A>

Didalam hal ini, URL(uniform resource locator) dapat berupa alamat suatu dokumen, web, berkas, grafik, ataupun menyatakan suatu protocol lain (misalnya FTP)

Untuk mempraktikan Link, buatlah terlebih dahulu 2 buah berkas HTML

Contoh :

<HTML>

<HEAD>

<TITLE> halaman X </TITLE>

</HEAD>

<BODY>

<h1> halaman X</h1>

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE> halaman Y </TITLE>

</HEAD>

<BODY>

<h1> halaman Y</h1>

</BODY>

</HTML>

File hal utama.html:

<HTML>

<HEAD>

<TITLE> Halaman Utama </TITLE>

</HEAD>

<BODY>

<h1> halaman Utama</h1>

Silahkan klik pada link berikut

<A href=”halx.html"> halaman X </A> <BR>

<A href=”haly.html"> halaman Y</A> <BR>

</BODY>

</HTML>

Sabtu, 12 Oktober 2013

Mersisop : Keselamatan dan Prosedur Kerja

Tujuan

Menjelaskan keselamatan dan prosedut kerja
Mengidentifikasi peralatan dan perangkat lunak yang digunakan pada personal komputer beserta fungsi nya
Penggunaan alat perakitan

Prosedur Keselamatan Kerja dan Penggunaan Alat

Tempat Kerja harus memiliki pedoman keselamatan agar :

Melindungi Pekerja dari Kecelakaan
Melindungi Alat dari Kerusakan
Melindungi lingkungan dari kontaminasi

Karakteristik Keselamatan tempat kerja

Bersih,Teratur dan ruang kerja yang memadai
Prosedur penanganan peralatan yang tepat
Penanganan limbah atau daur ulang komponen/material yang berbahaya
Safety guidelines
Pedoman Keselamatan Kerja-Semua Perusahaan wajib melaporkan berbagai kecelakaan kerja yang terjadi, termasuk penjelasan prosedur kerja tidak diikuti-Kerusakan Peralatan dapat berupa klaim kerusakan dari konsumen-Jenis Pedoman Keselamatan Kerja : Umum, Kelistrikan, Api

Types of Interactions

Electrostatic Discharge (ESD)

Build of an electric charge resting on a surface
30 volts of static electricity can damage a computer component

Electromagnetic Interference (EMI)

Instrsion of outside electromagnetic signals in a transmission media,such as copper cabling
Source can be : man made, natural events, climate or any source designed to generate electromagnetic energy

Power fluctuations

Voltage in a computer that is not accurate of steady
Blackouts, Brownouts, noise, spikes, power surges

Procedures to protect the environtment

Computer and peripherals contain materials that can be harmful to the environment
We should protect the environment by responsibly disposing and recycling :

Material Safety Data Sheet (MSDS) : fact sheet summarizing information about material identification, including hazardous ingredients that can affect personal health,fire hazards and first aid requirements.

Proper Disposal : policies that specify the procedures for disposing different materials such as batteries, monitor and used printer kits.

Specialized Tools

Skilled us of tools and software makes the job less difficult and ensures that tasks are peformed properly and safely.

Hardware

ESD tools.
Hand tools.
Cleaning tools.
Diagnostic tools.

Software

Disk management tools (Fdisk, Format, Scandisk, Defrag, etc).
Protection software tools (antivirus, firewall, etc).

Organizational

Notes.
Journal.
History of repairs.
Internet Reference.

Proper Tool Use

Safety in the work place is everyone's responsibility.
before cleaning or repairing equipment, check to make sure that your tools are in good condition.

Proper use of an antistatic wrist strap.
CAUTION :Never wear an antistatic wrist strap it you are repairing a monitor or CRT
Proper use of an antistatic mat.
Proper use of hand tools.
Proper use of Cleaning Materials
CAUTION : Before cleanin g any devices, turn it off and unplug the devices from the power scource

Chapter 2 Summary

Work in a safe manner to protect both users and equipment.
Follow all safety guidelines to prevent injuries to yourself and to others.
Know how to protect equipment from ESD damage.
Know about and be able to prevent power issues that can cause equipment damage of data loss.
Know which products and supplies require special disposal procedures
Familiarize yourself with MSDS sheets for both safety issues and disposal restrictions to help protect the environment.
Be able to use the correct tools for the task.
Know how to clean components safely.
Use organizational tools during computer repairs.

Rabu, 02 Oktober 2013

PI - WEB ( HTML )

A. Pengertian HTML (Hyper Text Markup Language)
HTML adalah sebuah pemograman yang digunakan untuk membuat sebuah halaman web untuk menulis kode HTML digunakan editor teks seperti notepad dan Font page. contoh kode HTML yang sangat sederhana

<html>
<head>
<title>selamat datang</title>
</head>
<body>
Selamat belajar HTML
</body>
</html>

pasangan tag <html> dan </html> menandakan bahwa kode yang terdapat di dalamnya adalah kode HTML sehingga browser akan menerjemahkan sebagai dokumen HTML.
Bagian yang terdapat dalam <html> dan </html> umumnya terbagi atas :
a. Kepala, ditandai dengan pasangan tag <head> dan </head>
b. Badan, ditandai dengan pasangan tag <body> dan </body>
Pada bagian kepala, bisa ditentukan judul HTML judul ini ditulis dalam pasangan tag <title> dan </title> pada contoh diatas html adalah selamat datang. judul ini diterakan di bagian atas jendela browser.

B.Cara menuliskan tag

Nama tag ditulis didalam tanda < dan > antara nama tag dan tanda < ditulis tanpa spasi sama sekali. nama tag boleh ditulis dengan huruf kecil, huruf kapital, ataupun kombinasi antara huruf kecil dan huruf kapital dengan kata lain penulisan :

<html>

<HTML>

<htML>

dianggap sama. namun umumnya tag ditulis dengan huruf kecil saja atau huruf kapital saja.

C. Atribut dalam Tag

Bebebrapa tag mengandung atribut didalamnya.
contoh :

Pada contoh ini p adalah nama tag sedangkan ALIGN adalah nama atribut. pada umumnya atribut melibatkan nilai pada contoh diatas " center " adalah nilai pada atribut align

D. Komentar

Komentar adalah bagian kode html yang diabaikan oleh browser, kegunaan komnetar dalam kode html adalah sebagai kererangan. sebuah komentar diawalu dengan <!-- dan diakhiri dengan -> contoh :

<!-- file komentar html

dibuat pada tanggal 4 agustus 2002-->

<html>

<head>

<title>Komentar</title>

</head>

<body>

komentar anda

</body>

</html>

E. Tag <br>

Fungsi tag <br> adalah untuk membuat baris baru atau berpindah baris.

contoh :

<html>

<head>

</head>

<body>

Selamat belajar HTML <br>

semoga sukses

</body>

</html>

F. tag <p>

tag <p> digunakan unuk membuat paragraf.

contoh :

<html>

<head>

<title>Contoh paragraf</title>

</head>

<body>

pesona taman hias<p>

membawa suatu pesona tersendiri<br>

warna-wanrni benua<br>

antara rupa corak daun<br>

</body>

</html>

didalam tag <p> bisa disertakan atribut align yang berguna untuk mengatur peletakan teks didalam masing-masing baris. salah satu nilai yang dapat diberikan pada ALIGN adalah center yang menempatkan teks berada ditengah-tengah layar pada baris yang bersangkutan. selain center nilai lain yang dapat diisikan pada ALIGN yaitu

a. left : mengatur teks rata kiri terhadap halaman

b. right : mengatur teks kanan terhadap halaman

c. justify : mengatur teks kiri dan kanan efeknya terlihat untuk teks yang sangat panjang.

contoh :

<html>

<head>

<title>Tag P dengan Algin</title>

</head>

<body>

Puisiku :

matahariku mulai terbangun dari mimpi<br>

menyemburkan sinar yang hangat <br>

burung-burung berkicau<br>

mengucapkan selamat pagi<br>

</p>

yogyakarta,2002

</body>

</html>

G. Tag judul

HTML menyediakan 6 buah tag yang digunakan untuk mengatur ukuran teks yang dijadikan sebagai judul dalam badan dokumen. tag-tag judul ini berupa :

-<h1> ... </h1>

-<h2> ... </h2>

-<h3> ... </h3>

-<h4> ... </h4>

-<h5> ... </h5>

-<h6> ... </h6>

contoh :

<html>

<head>

</head>

<body>

</body>

</html>

seperti halnya tag <p> tag judul atau heading ini juga memiliki atribut align. nilai yang dapat diberikan pada align adalah :

a. Left(default) mengatut teks rata kiri terhadap halaman

b. Right mengatur teks rata kanan terhadap halaman

c. Center menempatkan judul di tengah-tengah layar pada baris yang bersangkutan

d. Justify mengatur teks rata kiri dan rata kanan. efek nya terlihat untunk teks yang sangat panjang.

contoh :

<html>

<head>

<title>Atribut Align</title>

</head>

<body>

<h1 align="left"> Pesona taman hias </h1>

<h1 align="right"> Pesona Taman Hias </h1>

<h1 align="center"> Pesona Taman Hias </h1>

</body>

</html>

H. Tag <hr>

untuk mempercantik halaman, seringkali pembuat dokumen web menambahkan garis Horizontal. garis ini sebernarnya dapat dibuat dengan mudah yakni dengan menyertakan tag <hr>

contoh :

<html>

<head>

</head>

<Body>

<h2> Tanaman HIAS </H2>

<hr>

Algonema atau sri rejeki

<hr>

</body>

</html>

daftar atribut <hr>

Size : Menentukan ketebalan garis
Width : menentukan lebar garis
Align : menentukan peletakan teks dalam baris
Noshade : mengatur garis agar tidak disertai bayangan

Contoh penggunaan atribut size :

<html>

<head>

<title>Atribut HR</TITLE>

</head>

<body>

<h1> Pesona </h1>

Jln Solo KM 14<br>

Yogyakarta<br>

</body>

</html>

Contoh penggunaan atribut noshade :

<html>

<head>

<title>Atribut HR</title>

</head>

<body>

<h1>Pesona</h1>

Jl Solo km 14 <BR>

Yogyakarta <BR>

</body>

</html>