MATERI I
HTML (HYPERTEXT MARKUP LANGUAGE)
Tujuan :
1. Memahami tentang konsep WWW
2. Memahami tentang struktur dokumen HTML
3. Memahami tentang dasar-dasar HTML
4. Memahami tentang pengaturan teks, daftar item, gambar, tabel, form, meta.
A. World Wide Web
Internet merupkan jaringan global yang menghubungkan suatu network dengan network lainya
di seluruh dunia, TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang
beragam di seluruh dunia untuk dapat berkomunikasi.
World Wide Web (WWW) merupakan bagian dari internet yang paling cepat berkembang dan
paling populer. WWW bekerja merdasarkan pada tiga mekanisme berikut:
Protocol standard aturan yang di gunakan untuk berkomunikasi pada computer
networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW.
Address WWW memiliki aturan penamaan alamat web yaitu URL(Uniform Resource
Locator) yang di gunakan sebagai standard alamat internet.
HTML digunakan untuk membuat document yang bisa di akses melalui web.
B. Pengenalan HTML
Hypertext Markup Language merupkan standard bahasa yang di gunakan untuk menampilkan
document web, yang bisa anda lakukan dengan HTML yaitu:
Mengontrol tampilan dari web page dan contentnya.
Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia.
Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi
secara online.
Menambahkan object-object seperti image, audi, video dan juga java applet dalam
document HTML.
C. Browser dan Editor
Browser
Browser merupakan software yang di install di mesin client yang berfungsi untuk
menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan
biasanya Internet Explorer, Netscape Navigator dan masih banyak yang lainya.
Editor
Program yang di gunakan untuk membuat document HTML, ada banyak HTML editor yang
bisa anda gunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad.
D. BASIC TAG HTML
D.1. Struktur HTML Document
Document HTML bisa di bagi mejadi tiga bagian utama:
HTML
Setiap document HTML harus di awali dan di tutup dengan tag HTML
<HTML> </HTML>
HEAD
Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di dalam bagian ini
biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser.
BENGKEL INTERNET PENS-ITS
2
Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi
tertentu mengenai document HTML, anda bisa menentukan author name, keywords, dan
lainyan pada tag META.
BODY
Document body di gunakan untuk menampilkan text, image link dan semua yang akan di
tampilkan pada web page.
D.2. Basic HTML Element
Block Level Element
Block level element yang sering di gunakan : Heading (H1 sampai H6)
Paragraf (P) List Item(LI)
List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang
tidak berurutan (unordered list).
Ada dua macam list yang bisa anda tambahkan ke document HTML:
1. Unordered List (Bullet) :
2. Ordered List (Numbering)
Contoh :
Tag Attribute Value Description
<UL> TYPE SQUARE Bullet Kotak
DISC Bullet Titik
CIRCLE Bullet Lingkaran
Tag Attribute Value Description
<OL> TYPE I i Upper Roman Lower Roman
A a Upercase Lowercase
<OL> START n Begin Number
Definition List
Definition List terdiri diapit oleh tag <DL> … </DL> dan <DT> tag menentukan definition
term serta <DD> tag menentukan definition itu sendiri.
Horizontal Rules(HR)
Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam document HTML.
Attribute Description
Position menetukan posisi dari HR, dengan value : canter |
right | left.
Width Untuk menentukan panjang HR default 100%
Size Untuk menentukan tebal dari HR dalam pixel
Noshad Efek bayangan.
D.3. Pemformatan Page Break
Tag <BR> di gunakan untuk memulai baris baru pada document HTML, tag ini fungsinya
mirip dengan carriage return.
BENGKEL INTERNET PENS-ITS
3
Font
Dengan tag <FONT> anda bisa menentukan format tampilan font dalam document HTML
seperti color, size, style dan lainya.
Contoh:
Attribute Description
color Untuk menentukan warna font, anda bisa
menggunakan nama font atau hexadecimal
(#000000 - #ffffff)
size Untuk menentukan ukuran dari font 1 - 7
face Untuk menentukan jenis font biasanya dalam satu list
ada beberapa font dan akan di baca mulai dari yang
paling kiri.
Color
Color merupakan attribute yang bisa anda tambahkan pada beberapa element seperti body,
font, link dan lainya. Color di bagi dalam tiga ketegori warna primer yaitu red, green dan blue.
Masing-masing color didefinisikan dalam dua digit hexadecimal number.
#RRGGBB
Hexadecimal Color
#FF0000 Red
#00FF00 Green
#0000FF Blue
#000000 Black
#FFFFFF White
Alignment
Align attribute digunakan untuk menentukan perataan object dalam document HTML baik
berupa text, object, image, paragraph, division dan lain-lain.
Value Description
Left Rata kiri
Right Rata kanan
Center Rata tengah
Justify Rata kanan kiri
Format text
Physical Formatting
Tag Description
<B> ... </B> Bold text
<I> ... </I> Italic text
<U> ... </U> Underline Text
<BIG> ... </BIG> Untuk ukuran yang lebih besar
dari normal
<SMALL> ... </SMALL> Untuk ukuran yang lebih kecil
dari normal
<STRIKE> ... </STRIKE> Untuk memberi garis di tengah
text
BENGKEL INTERNET PENS-ITS
4
<SUP> ... </SUP> Superscript text
<SUB> ... </SUB> Subscript text
<CENTER> ... </CENTER> Center document
Logical Formatting
Tag Description
<EM> ... </EM> Text miring / <I>
<STRONG> ...
</STRONG>
Text tebal / <B>
<DEL> ... </DEL> Mencoret text / <STRIKE>
<INS> ... </INS> Underline text / <U>
Preformatted text
Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya.
Hyperlink
Link Address
Absolute Address - merupakan full internet address (URL) yang meliputi protocol, network
location dan path dan nama file.
Contoh:
http ://www.yahoo.com/index.html
Relatif Address - URL yang tidak menyebutkan protocol dan network locationya (hanya path
dan nama filenya).
Anchor
Anchor tag <A> untuk menentukan hyperlink dalam document HTML. HREF property
digunakan untuk menentukan tujuan dari hyperlink tersebut.
E. TABLE
Membuat table
Tag <TABLE> digunaka untuk membuat table dalam document HTML , bagian pokok dari
table adalah cell yang didefinisikan dengan menggunakan tag <TD>.
Berikutnya kalo anda ingin membuat beberapa baris cell dalam table gunakan tag <TR>.
Menambahkan Heading cell
Untuk menambahkan heading pada table tambahkan tag <TH> pada table yang sudah di buat.
Pemformatan table
Untuk memformat perataan text di dalam table anda bisa gunakan attribute Align dan Valign
(vertical Alignment)
Attribute Value
Align Center | justify | left | right
Valign BASELINE | TOP | BOTTOM | MIDDLE
BENGKEL INTERNET PENS-ITS
5
Merge cell
Tag <TD> memiliki atribut colspan untuk merge column dan rowspan untuk merge baris.
F. IMAGE
A. Format Image
Ada banyak format image, tapi ada tiga jenis format yang paling sering digunakan :
1. GIF (Graphical Interchange Format) (.GIF)
2. JPEG (Joint Photographic Expert Image) (.JPG)
3. PNG (Portable Network Graphics)
<IMG SRC=”URL”>
Attribute Value Description
Align Center | justify | left | right | > Top, bottom, middle digunakan untuk
Baseline | top | bottom | menentukan posisi image terhadap text
middle > Left, right, center untuk menentukan
posisi image di document
G. FORM
Kegunaan Form
Berikut ini beberapa contoh kegunaan Form dalam web:
1. memperoleh data-data user baik nama, alamat dan data lainnya
2. memperoleh informasi pembelian secara online
3. memperoleh feedback dari user mengenai website anda.
Form Element
Tag <FORM> digunakan untuk membuat form dalam document HTML.
Attribute Description
ACCEPT Mendefinisikan MIME yang di izinkan oleh server yang memuat script
untuk memproses form. Syntax:
ACCEPT=”Internet Media Type”
METHOD Menentukan bagaimana data akan di kirim ke server. GET – data akan di kirim
dengan menggunakan query string pada URL.
POST – data akan di kirim ke server sebagai block data ke script. Syntax:
METHOD=”POST|GET”
ACTION Menentukan lokasi dari script yang akan memproses data dari form Syntax:
ACTION=”URL”
BENGKEL INTERNET PENS-ITS
6
LATIHAN – LATIHAN :
A. DASAR-DASAR HTML
1. Penggunaan syntak HTML, bagian-bagian HTML, penggunaan komentar dan tag <BR> untuk
ganti baris.
2. Menggunakan tag <P> untuk membuat paragraph; tag judul <H1> s/d <H6> untuk
pembesaran huruf.
3. Membuat garis horizontal <HR>
<HTML>
<HEAD>
<TITLE>Latihan HTML</TITLE>
</HEAD>
<!-- Ini merupakan suatu komentar -->
<BODY>
Selamat Belajar HTML<BR>
Semoga Sukses !
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Contoh Pengaturan Judul</TITLE>
</HEAD>
<BODY>
<H1 ALIGN = “CENTER”> Pesona Tanaman Hias </H1><P>
Keindahan tanaman hias<BR>
membawa suatu pesona tersendiri<BR>
Warna-warni bunga
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Atribut NOSHADE pada Tag HR</TITLE>
</HEAD>
<BODY>
<H1>KEBUN PESONA</H1>
<HR SIZE = "10" NOSHADE>
Jl. Solo Km 14<BR>
Surabaya <BR>
Indonesia<BR>
</BODY>
</HTML>
BENGKEL INTERNET PENS-ITS
7
4. Menggunakan tag <DIV> untuk mengelompokkan sejumlah baris teks yang memiliki karakteristik
yang sama.
B. PENGATURAN TEKS
1. Penggunaan <PRE> untuk menampilkan teks apa adanya.
Coba hilangkan tag <PRE> dan lihat apa perbedaanya.
2. Pengaturan Font : Face (untuk jenis Font), Size (untuk ukuran Font), Color (untuk warna)
<HTML>
<HEAD>
<TITLE>Tag DIV</TITLE>
</HEAD>
<BODY>
<DIV ALIGN = "RIGHT">
<H1><U>PENS ITS</U></H1>
<H2>Jl. Raya ITS</H2>
<H2>Surabaya</H2>
</DIV>
<HR>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Praformat </TITLE>
</HEAD>
<BODY>
<H2>Daftar Harga Keladi:</H2>
<PRE>
Red Flash.........35.000
Red Fire..........60.000
Fannie Munson.....60.000
</PRE>
Harga sewaktu-waktu bisa berubah.
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Jenis Font</TITLE>
</HEAD>
<BODY>
Normal: 012345ABCD<BR>
<FONT COLOR="blue" FACE = "Arial">Arial:
012345ABCD</FONT>
<BR>
<FONT COLOR="green" FACE = "Courier" SIZE="5">
Courier: 012345ABCD</FONT>
<BR>
</BODY>
</HTML>
BENGKEL INTERNET PENS-ITS
8
3. Pengaturan warna background : BGCOLOR
C. MENAMPILKAN DAFTAR ITEM (LIST)
1. Penggunaan tag <UL> untuk daftar list yang tidak diberi nomor; tag <LI> untuk daftar item yang
diberi bulatan.
2. Penggunaan tag <OL> untuk menampilkan daftar item dengan nomor urut.
<HTML>
<HEAD>
<TITLE>Warna - Bagian 2</TITLE>
</HEAD>
<BODY BGCOLOR = "black" TEXT = "gray">
Normal<BR>
<FONT COLOR = "blue">Warna Biru</FONT><BR>
<FONT COLOR = "green">Warna Hijau</FONT><BR>
<FONT COLOR = "red">Warna Merah</FONT><BR>
<FONT COLOR = "yellow">Warna kuning</FONT><BR>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Contoh Pemakaian Tag UL dan LI</TITLE>
</HEAD>
<BODY>
<H2>Daftar Jurusan di PENS ITS :</H2>
<UL>
<LI>Telekomunikasi <BR>
<LI>Teknologi Informasi <BR>
<LI>Elektronika <BR>
<LI>Elektro Industri <BR>
</UL>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Tag OL dengan TYPE</TITLE>
</HEAD>
<BODY>
<B>Dengan huruf kapital:</B>
<OL TYPE = "A">
<LI>Yogya<BR>
<LI>Solo<BR>
</OL>
<HR>
<B>Dengan angka romawi:</B>
<OL TYPE = "i">
<LI>Yogya<BR>
<LI>Magelang<BR>
</OL>
</BODY>
</HTML>
BENGKEL INTERNET PENS-ITS
9
3. Penggunaan tag <DL>, <DT>, <DD> untuk menampilkan daftar khusus dengan tampilan
menjorok ke kanan.
D. MENAMPILKAN GAMBAR
1. Penggunaan <BODY BACKGROUND> untuk menampilkan background dan <IMG SRC>
untuk menampilkan gambar.
Jika letak file gambar dalam folder yang sama dengan file html, bisa langsung dituliskan
nama filenya, tapi bila berbeda perhatikan cara diatas (bila file html diatas disimpan dalam
folder /html, maka gunung.jpg akan terletak dalam folder /html/citra/)
2. Pengaturan ukuran gambar dengan atribut HEIGHT dan WEIGHT, serta penggunaan atribut
BORDER untuk memberi bingkai gambar.
<HTML>
<HEAD>
<TITLE>Daftar Definisi</TITLE>
</HEAD>
<BODY>
<B>Kamus Teknologi Informasi:</B>
<DL>
<DT>HTML</DT>
<DD>Bahasa yang digunakan untuk menyusun Web</DD>
<DT>HTTP</DT>
<DD>Protokol yang dipakai untuk mentransfer HTML</DD>
</DL>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Menampilkan Gambar</TITLE>
</HEAD>
<BODY BACKGROUND = "../citra/gunung.jpg">
Gambar Komputer terbaru
<IMG SRC = "komputer.gif" ALIGN = "MIDDLE">
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Ukuran Gambar</TITLE>
</HEAD>
<BODY>
<IMG SRC = "../citra/komputer.jpg"
HEIGHT = "150" WIDTH = "150" BORDER="2">
<BR>
<IMG SRC = "../citra/komputer.jpg"
HEIGHT = "50" WIDTH = "50" BORDER="3">
</BODY>
</HTML>
BENGKEL INTERNET PENS-ITS
10
E. PENGGUNAAN TABEL
1. Tag-tag yang digunakan :
<TABLE> untuk pembuatan tabel, dengan atribut BORDER utk memberi bingkai.
<CAPTION> menentukan judul tabel
<TR> membuat baris dalam tabel
<TH> membuat judul kolom
<TD> membuat sebuah sel data
2. Penggabungan sel dengan tag <ROWSPAN> dan <COLSPAN>
a. Atribut ROWSPAN ditempatkan pada tag <TD>
b. Atribut COLSPAN bisa ditempatkan pada tag <TD> atau <TH>
<HTML>
<HEAD>
<TITLE>Tabel dengan Garis</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = "1">
<CAPTION>Daftar Harga Keladi</CAPTION>
<TR><TH>Nama</TH><TH>Harga</TH></TR>
<TR><TD>Red Flash</TD><TD>35.000</TD></TR>
<TR><TD>Red Fire</TD><TD>60.000</TD></TR>
<TR><TD>Fannie Munson</TD><TD>60.000</TD></TR>
</TABLE>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Penggunaan ROWSPAN</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = "1">
<CAPTION>Daftar Wilayah dan Kota</CAPTION>
<TR>
<TD ROWSPAN = "3">Jawa Tengah</TD>
<TD>Semarang</TD>
</TR>
<TR><TD>Kudus</TD></TR>
<TR><TD>Solo</TD></TR>
</TABLE>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Penggunaan COLSPAN</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = "1">
<CAPTION>Daftar Target</CAPTION>
<TR>
<TH COLSPAN = "2">Area: Jawa Tengah</TH>
</TR>
<TR><TD>Semarang</TD><TD>15.000</TD></TR>
<TR><TD>Kudus</TD><TD>11.000</TD></TR>
</TABLE>
</BODY>
</HTML>
BENGKEL INTERNET PENS-ITS
11
3. Pengaturan jarak dalam tabel :
CELLSPACING mengatur jarak bagian sel thd tepi dalam bingkai tabel.
CELLPADDING mengatur jarak teks terhadap tepi kiri.
F. PEMBUATAN LINK
1. Penggunaan tag <A HREF>
Buatlah file halx.htm, sehingga ketika diklik pada Halaman X akan menuju file yang dimaksud.
<HTML>
<HEAD>
<TITLE>Tombol dengan Tabel</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = "5" CELLSPACING = "5"
CELLPADDING = "5" BGCOLOR = "green">
<TR><TD>
<FONT COLOR = "red"><B>e-mail</B></FONT>
</TD></TR>
</TABLE>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Halaman Utama</TITLE>
</HEAD>
<BODY>
<H1>Halaman Utama</H1>
Silakan klik pada link-link berikut:<BR>
<A HREF = "halx.htm">Halaman X</A><BR>
<A HREF = "http://lecturer.eepis-its.edu/~zenhadi">Homepage
saya</A><BR>
<A HREF = "computer.jpg"><IMG SRC = “computer.jpg> Membuat
link dengan gambar </A><BR>
</BODY>
</HTML>
BENGKEL INTERNET PENS-ITS
12
2. Menggunakan bookmark pada suatu halaman web yang panjang.
Perkecillah halaman web browser anda (IE) untuk melihat efeknya.
G. PENGGUNAAN FORM
1. Input data dengan input
<HTML>
<HEAD>
<TITLE>Bookmark</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>BUKU</H1>
<B>Daftar Isi:</B><BR>
<A HREF = "#bab1">Bab 1</A><BR>
<A HREF = "#bab2">Bab 2</A><BR>
<HR>
<A NAME = "#bab1">
<H2>BAB 1</H2>
...<BR>
...<BR>
<HR>
<A NAME = "#bab2">
<H2>BAB 2</H2>
...<BR>
...<BR>
<HR>
</CENTER>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Contoh Penggunaan Formulir</TITLE>
</HEAD>
<BODY>
<FORM ACTION = "info.htm" METHOD = "POST">
Nama :
<INPUT TYPE = "TEXT" NAME = "nama" SIZE = "20"
MAXLENGTH = "20">
<BR>
Hobby :
<INPUT TYPE = "TEXT" NAME = "hobby" SIZE = "25"
MAXLENGTH = "40">
<BR>
<INPUT TYPE = "SUBMIT" VALUE = "Kirim">
<INPUT TYPE = "RESET" VALUE = "Kosongkan">
</FORM>
</BODY>
</HTML>
BENGKEL INTERNET PENS-ITS
13
File info.htm yang dituju oleh web diatas.
2. Penggunaan tipe checkbox
3. Penggunaan tombol radio dan komentar
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
Info
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Contoh Penggunaan Formulir</TITLE>
</HEAD>
<BODY>
<FORM>
Buah yang Anda sukai:<BR>
<INPUT TYPE = "CHECKBOX" NAME = "anggur" CHECKED>Anggur<BR>
<INPUT TYPE = "CHECKBOX" NAME = "jeruk">Jeruk<BR>
<INPUT TYPE = "CHECKBOX" NAME = "melon">Melon<BR>
</FORM>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Contoh Penggunaan Formulir</TITLE>
</HEAD>
<BODY>
<FORM>
Jenis Kelamin:<BR>
<INPUT TYPE = "RADIO"
NAME = "sex" CHECKED>Pria<BR>
<INPUT TYPE = "RADIO"
NAME = "sex">Wanita<BR>
<BR>
Komentar Anda:<BR>
<TEXTAREA NAME = "komentar"
ROWS = "5" COLS = "40" WRAP>
</TEXTAREA>
<BR>
</FORM>
</BODY>
</HTML>
BENGKEL INTERNET PENS-ITS
14
4. Pemilihan dengan select
Sekarang, ubahlah baris select diatas dengan : <SELECT NAME=”olahraga” SIZE=”3”>,
perhatikan perbedaannya dengan yang diatas.
H. PENGGUNAAN TAG META
Ditempatkan dalam bagian header, dan biasanya diletakkan setelah </TITLE>.
Digunakan untuk menyimpan sejumlah informasi.
Contoh :
1. Jika anda membuat dokumen HTML melalui FrontPage 2000 akan muncul tag meta sebagai
berikut :
<META NAME=”Generator” CONTENT=”Microsoft FrontPage 4.0”>
2. Agar halaman web yang dibuat disertakan ketika mesin pencari web (mbah Google) melakukan
pencarian, gunakan atribut keywords, semakin banyak keywords yang dimasukkan, akan
semakin besar halaman web disebutkan dalam hasil pencarian.
<META NAME=”keywords” CONTENTS=”teknologi, komputer, telekomunikasi”>
3. Mengarahkan ke halaman lain
Buatlah file baru.htm
<HTML>
<HEAD>
<TITLE>Contoh SELECT - Model Drop Down</TITLE>
</HEAD>
<BODY>
<FORM>
Olahraga yang paling Anda sukai:<BR>
<SELECT NAME = "olahraga">
<OPTION VALUE = "Sepakbola" SELECTED>Sepak Bola
<OPTION VALUE = "Bulutangkis">Bulutangkis
<OPTION VALUE = "Tenismeja">Tenis Meja
<OPTION VALUE = "Basket">Basket
<OPTION VALUE = "Lain-lain">Lain-lain
</SELECT>
<BR>
</FORM>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Pengalihan Halaman</TITLE>
<META HTTP-EQUIV = "REFRESH"
CONTENT = "5; URL = baru.htm">
</HEAD>
<BODY>
Halaman web kami sudah dipindah.
Anda akan dipindahkan ke halaman
tersebut dalam waktu 5 detik.
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Halaman Baru</TITLE>
</HEAD>
<BODY>
Anda berada pada halaman
baru kami.
</BODY>
</HTML>
Jumat, 29 April 2016
Minggu, 17 April 2016
7 Perusahaan ELECTRONIC bangkrut di INDONESIA
Nama : Bagus Kurniawan
Nim : 30814081
Kelas : 4.2 E.S
1. Toshiba
Pelemahan ekonomi dunia ikut mempengaruhi investasi di sektor manufaktur
Indonesia. Hal ini dirasakan perusahaan raksasa elektronik asal Jepang,
Toshiba. Mereka menegaskan bakal hengkang dari tanah air pada April 2016.
Pabrik tersebut juga tak lagi beroperasi di Indonesia.
Penutupan pabrik perusahaan Toshiba terjadi akibat melemahnya daya beli
masyarakat. Imbasnya, penjualan produk perusahaan ini turun drastis. Presiden
Konfederasi Serikat Pekerja Indonesia (KSPI) Said Iqbal menjelaskan, Toshiba
lebih dulu merumahkan ribuan pegawai di Cikarang, Bekasi. Toshiba mempunyai
enam pabrik. Namun, satu-persatu mulai angkat kaki dalam kurun 10 tahun
terakhir.
“Jadi tidak ada lagi pabrik Toshiba. Yang ada hanya produksi printer Toshiba
di Batam, tapi skalanya kecil. Nah yang tutup ini adalah pabrik televisi
Toshiba terbesar di Indonesia, selain di Jepang,” kata Iqbal di Jakarta.
2. Panasonic
Dampak langsung segara dirasakan para buruh. Mereka kehilanngan mata
pencaharian, juga penghasilan. Dua pabriknya resmi ditutup, di Pasuruan (600
orang buruh di PHK) dan di kawasan EJIP Cikarang (sekira 1000 orang buruh di
PHK). Jumlah yang di-PHK kurang lebih 2500 orang buruh. Separuhnya dan
Panasonic.
Secara bersamaan, tutupnya pabrik tersebut dibarengi dengan investasi dari
Tiongkok, yang disebut-sebut merupakan proyek mercusuar. Investasi Tiongkok
mencakup SDm. Mereka membawa buruh unskill, seperti operator, supir
forklift, juru masak dll.
3 Sharp
Sharp Corp mengalami kerugian akibat jatuhnya harga flat panel TV dan
menguatnya yen. Operasi tahunan pertama jebol. Akibat kinerja yang buruk, Sharp
memotong perkiraan dividen tahunannya menjadi 21 yen per lembar dan
merencanakan PHK 1.500 pegawai tidak tetap, serta mengurangi biaya hingga US$
2,20 miliar. Pembuat LCD TV merek Aquos itu merupakan perusahaan teknologi
terbaru yang menjadi korban resesi global.
Selain krisis global, persaingan juga menyebabkan Sharp terpuruk. Sharp
sebagai pembuat LCD TV terbesar ketiga di dunia mendapat tantangan dari Samsung
Electronics Co Ltd dan LG Electronics Inc dari Korea yang beruntung karena mata
uangnya tidak terlalu bergolak.Sharp memotong penjualan TV LCD untuk tahun
bisnis sekarang 9,1% menjadi 10 juta unit.
Presiden Direktur Sharp Electronics Indonesia, Fumihiro Irie, mengatakan
hingga kini belum ada PHK karyawan Sharp di Indonesia. Lain soal jika krisis
berlanjut. Untuk menghindari tekanan krisis, Sharp melakukan efisiensi segala
proses produksi. Biaya yang tidak berdmapak pada keuntungan, akan dihilangkan.
4. Sony
Kepala Eksekutif Sony Corp, Kazuo Hirai, mempertimbangkan alternatif lain tahun
depan setelah lini bisnis ponsel pintar (smartphone) terus menurun. Jika tahun
depan masih merugi, tidak menutup kemungkinan Sony mengembangkan bisnis lain.
Setelah mengalami kerugian dalam beberapa tahun terakhir, Hirai mampu
merustrukturisasi bisnis. Perbaikan bisnis mulai terasa dengan efisiensi biaya
dan penghentian lini bisnis yang merugi seperti produksi PC. Selain itu, Sony
memperkuat penjualan sensor gambar dan videogame. Sayangnya, lini bisnis ponsel
pintar terus menurun.
Meski sedang dilanda kesulitan bisnis, pada ajang CES 2015 yang berlangsung
di Las Vegas, AS, awal bulan ini, Sony tetap memperkenalkan sejumlah gadget
baru, termasuk TV super tipis dan Walkman seharga belasan juta rupiah. Di ranah
mobile phone Sony menghadapi persaingan keras. Segmen bawah digerogoti
perangkat-perangkat murah besutan vendor Asia, sementara segmen atas dikuasai
Apple dan Samsung yang sulit dikejar.
5. NOKIA
Microsoft terus melakukan efisiensi di divisi mobile Nokia yang dibelinya
pada tahun 2013 senilai USD 7 miliar. Mereka mengumumkan penutupan salah satu
pabrik ponsel Nokia yang berada di Finlandia dan telah mengumumkan PHK pada
7.800 karyawan, kebanyakan dari divisi ponsel. Akuisisi divisi ponsel Nokia
tidak menuai hasil seperti yang diharapkan karena Windows Phone masih keteteran
menghadapi Android dan iPhone.
Stephen Elop yang adalah mantan CEO Nokia, juga sudah mengundurkan diri dari
jabatan Executive Vice President of Microsoft Devices & Services. Head of
Phone Division Jo Harlow, juga ikut hengkang dari Microsoft. CEO Microsoft,
Satya Nadella, menegaskan akan tetap fokus membesarkan bisnis ponsel. “Dalam
jangka pendek, kami akan menjalankan portofolio ponsel yang lebih fokus dan
efektif,” kata pria berdarah India ini. Microsoft di bawah kepemimpinan Nadella
ditengarai lebih mengutamakan bisnis software serta cloud.
6. General Motor (GM) Indonesia
Pabrik milik General Motor (GM) Indonesia yang memproduksi mobil Chevrolet Spin
di Bekasi akan menghentikan operasinya dan resmi ditutup pada Juni 2015.
Penyebabnya, sejak berdiri 2013, perusahaan itu mengalami kerugian dan tidak
mampu bersaing dengan produk sejenis.
Sementara itu, Direktur Keuangan GMI Manufacturing, Pranav Bhatt, mengatakan
ditutupnya pabrik GMI di Indonesia semata-mata karena alasan finansial, di mana
penjualan Chevrolet Spin tidak begitu menguntungkan. Biaya produksi tinggi,
sementara volumenya sedikit.
Menurut dia, GMI akan tetap berada di Indonesia, namun tidak lagi menjual
Chevrolet Spin, melainkan akan fokus pada jenis mobil SUV dan pick up.
7. Sanyo
Ada tiga faktor penyebab fundamental yang bisa kita petik sebagai pelajaran.
Faktor 1 : Harmony Culture Error. Dalam era digital seperti saat ini, kecepatan
adalah kunci. Speed in decision making. Speed in product development. Speed in
product launch. Dan persis di titik vital ini, perusahaan Jepang termehek-mehek
lantaran budaya mereka yang mengangungkan harmoni dan konsensus.
Datanglah ke perusahaan Jepang, dan Anda pasti akan melihat kultur kerja yang
sangat mementingkan konsensus. Top manajemen Jepang bisa rapat berminggu-minggu
sekedar untuk menemukan konsensus mengenai produk apa yang akan diluncurkan.
Dan begitu rapat mereka selesai, Samsung atau LG sudah keluar dengan produk
baru, dan para senior manajer Jepang itu hanya bisa melongo.
Budaya yang mementingkan konsensus membuat perusahaan-perusahaan Jepang lamban
mengambil keputusan (dan dalam era digital ini artinya tragedi).
Budaya yang menjaga harmoni juga membuat ide-ide kreatif yang radikal nyaris
tidak pernah bisa mekar. Sebab mereka keburu mati : dijadikan tumbal demi
menjaga “keindahan budaya harmoni”. Ouch.
Faktor 2 : Seniority Error. Dalam era digital, inovasi adalah oksigen. Inovasi
adalah nafas yang terus mengalir. Sayangnya, budaya inovasi ini tidak
kompatibel dengan budaya kerja yang mementingkan senioritas serta budaya
sungkan pada atasan.
Sialnya, nyaris semua perusahaan-perusahaan Jepang memelihara budaya
senioritas. Datanglah ke perusahaan Jepang, dan hampir pasti Anda tidak akan
menemukan Senior Managers dalam usia 30-an tahun. Never. Istilah Rising Stars
dan Young Creative Guy adalah keanehan.
Promosi di hampir semua perusahaan Jepang menggunakan metode urut kacang. Yang
tua pasti didahulukan, no matter what. Dan ini dia : di perusahaan Jepang,
loyalitas pasti akan sampai pensiun. Jadi terus bekerja di satu tempat sampai
pensiun adalah kelaziman.
Lalu apa artinya semua itu bagi inovasi ? Kematian dini. Ya, dalam budaya
senioritas dan loyalitas permanen, benih-benih inovasi akan mudah layu, dan
kemudian semaput. Masuk ICU lalu mati.
Faktor 3 : Old Nation Error. Faktor terakhir ini mungkin ada kaitannya dengan
faktor kedua. Dan juga dengan aspek demografi. Jepang adalah negeri yang menua.
Maksudnya, lebih dari separo penduduk Jepang berusia diatas 50 tahun.
Implikasinya : mayoritas Senior Manager di beragam perusahaan Jepang masuk
dalam kategori itu. Kategori karyawan yang sudah menua.
Disini hukum alam berlaku. Karyawan yang sudah menua, dan bertahun-tahun
bekerja pada lingkungan yang sama, biasanya kurang peka dengan perubahan yang
berlangsung cepat. Ada comfort zone yang bersemayam dalam raga manajer-manajer
senior dan tua itu.
Dan sekali lagi, apa artinya itu bagi nafas inovasi? Sama : nafas inovasi akan
selalu berjalan dengan tersengal-sengal.
Demikianlah, tiga faktor fundamental yang menjadi penyebab utama mengapa
raksasa-raksasa elektronika Jepang limbung. Tanpa ada perubahan radikal pada
tiga elemen diatas, masa depan Japan Co mungkin akan selalu berada dalam bayang-bayang
kematian.
rf.www.efekgila.com
Latihan Dasar Membuat Tabel Dengan CSS Menggunakan Notepad
<html>
<head>
<title>Latihan Tabel dengan CSS</title>
<Style type="text/css">
Table {
Border : 1px solid black;
Width : 600px;
Height : 600px;
Margin-left : auto;
Margin-right : auto;
}
tr#Heading {
height : 100px;
background-color : green;
Color : white;
text-align : Center;
}
tr#Content {
height : 400px;
Font-family : arial;
}
tr#content td#left {
width : 70%;
Vertical-Align : Top;
Text-Align : Justify;
}
tr#content td#right {
width : 30%;
Vertical-Align : Top;
Text-Align : Justify;
}
tr#Footer {
height : 100px;
background-color : yellow;
Color : black;
text-align : center;
}
</style>
</Head>
<body>
<Table>
<TR id="heading">
<TD colspan="2"><H1>STMIK INDONESIA</H1></TD>
</TR>
<TR id="Content">
<TD id="left" font color="white"><iframe name="isiweb" width=400 height=400 src="beranda.html"></iframe>
</TD>
<TD id="right">
<UL>
<LI><a href="Beranda.html" target="isiweb">Branda</a></LI>
<LI><a href="Profil.html" target="isiweb">Profil</a></LI>
<LI> Akademik </LI>
<LI><a href="Bukutamu.html" target="isiweb">Buku tamu</a></LI>
<LI> Hubungi </LI>
</UL>
</TD>
</TR>
<TR id="Footer">
<TD Colspan="2">Copyright 2016 STMIK Indonesia. Allright Reserved</TD>
</TR>
</body>
</html>
<head>
<title>Latihan Tabel dengan CSS</title>
<Style type="text/css">
Table {
Border : 1px solid black;
Width : 600px;
Height : 600px;
Margin-left : auto;
Margin-right : auto;
}
tr#Heading {
height : 100px;
background-color : green;
Color : white;
text-align : Center;
}
tr#Content {
height : 400px;
Font-family : arial;
}
tr#content td#left {
width : 70%;
Vertical-Align : Top;
Text-Align : Justify;
}
tr#content td#right {
width : 30%;
Vertical-Align : Top;
Text-Align : Justify;
}
tr#Footer {
height : 100px;
background-color : yellow;
Color : black;
text-align : center;
}
</style>
</Head>
<body>
<Table>
<TR id="heading">
<TD colspan="2"><H1>STMIK INDONESIA</H1></TD>
</TR>
<TR id="Content">
<TD id="left" font color="white"><iframe name="isiweb" width=400 height=400 src="beranda.html"></iframe>
</TD>
<TD id="right">
<UL>
<LI><a href="Beranda.html" target="isiweb">Branda</a></LI>
<LI><a href="Profil.html" target="isiweb">Profil</a></LI>
<LI> Akademik </LI>
<LI><a href="Bukutamu.html" target="isiweb">Buku tamu</a></LI>
<LI> Hubungi </LI>
</UL>
</TD>
</TR>
<TR id="Footer">
<TD Colspan="2">Copyright 2016 STMIK Indonesia. Allright Reserved</TD>
</TR>
</body>
</html>
Langganan:
Postingan (Atom)