Cara Membuat Teks Halaman Web Menggunakan Kode HTML dan CSS

Mempelajari kode HTML, CSS, dan Javascript hukumnya wajib bagi yang ingin belajar mendesain dan membuat halaman web, namun bahasa pemrograman web ini juga banyak manfaatnya dalam pembuatan aplikasi android berbasis teks, seperti aplikasi tutorial, e-book, atau novel. Jadi kali ini saya ingin berbagi ilmu cara pembuatan teks dengan format HTML dan CSS yang nantinya sangat berguna bila sobat akan membuat aplikasi android yang content-nya didominasi teks dan gambar.

Seperti biasanya sobat harus melakukan beberapa persiapan di antaranya:
1. Untuk memudahkan pembuatan kode HTML sobat harus memiliki salah satu dari editor teks HTML seperti Notepad++, Sublime Text, atau Atom. Bila sobat belum punya, saya berikan link-nya untuk mendownload ketiga editor tersebut.
Notepad++
https://notepad-plus-plus.org
Sublime Text
https://www.sublimetext.com
Atom
https://atom.io

2. Siapkan teks/tulisan yang terdiri atas judul dan isi tulisan yang sobat tulis di Word atau Notepad.
3. Siapkan foto, gambar, atau bagan yang akan disertakan dalam teks, kalau perlu buatkan caption atau keterangan gambarnya juga pemotonya.
4. Buatkan folder khusus untuk menyimpan teks HTML dan foto.
5. Siapkan juga browser untuk melihat hasilnya, Google Chrome, Opera, atau Firefox.

Pertama-tama sobat buka editornya, dalam tutorial ini saya menggunakan editor Sublime Text. Dalam keadaan kosong (untitled) dokumen Sublime Text di-Save As (File > Save As…) simpan di folder yang sudah disediakan kemudian berinama dengan ekstension html, misalnya bab1.html.

Dalam tutorial ini saya anggap sobat sudah mengerti pemograman HTML dan CSS, jadi saya langsung saja memberikan skripnya secara lengkap (siap pakai), sobat tinggal meng-copy-paste:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> </title>
</head>
<style type="text/css">
body {
 font-family: arial, verdana, sans-serif;
}
p {
 font-size: 14px;
 line-height: 18px;
}
h3 {
 font-size: 16px;
}
h3, .caption {
 text-align: center;
}
img {
 display: block;
 margin-right: auto;
 margin-left: auto;
}
.caption {
 font-size: 12px;
 font-style: italic;
}
.pemoto {
 font-size: 7px;
 text-align: right;
}
</style>
<body>
</body>

Sedikit penjelasan:
Pada skrip HTML ini diselipkan kode-kode CSS yang ditempatkan di bawah tag </head> dan di atas <body>. Berturut-turut dari atas ke bawah: 1. menentukan jenis huruf, 2. ukuran font dan spasi paragraf, 3. ukuran font judul, 4. perataan tengah untuk judul dan caption, 5. menempatkan gambar di tengah-tengah, 6. ukuran font caption dengan huruf miring, 7. ukuran font pemoto dengan perataan kanan.

Masukan tulisan/artikel yang sudah sobat persiapkan di antara tag HTML <body>…</body>. Judul diberi tag <h3>…</h3>, dan setiap paragraf diberi tag …, sementara untuk huruf miring beri tag …, huruf tebal beri tag …..

Untuk memasukan gambar di artikel beri tag <img src="nama_file.jpg" >, tulis nama file gambar lengkap dengan akhirannya.
Untuk pemoto beri tag nama_pemoto, dan
untuk caption: Keterangan foto….

Contoh:
<img src="linotype.jpg" >
KANG DEDE
Gambar 1.1 Mesin setter Linotype model 73 R 4728 menjadi monumen di depan kantor Pikiran Rakyat, Jalan Asia Afrika 77 Bandung.

Selengkapnya teks yang sudah dilengkapi format HTML dan CSS adalah seperti di bawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> </title>
</head>
<style type="text/css">
body {
 font-family: arial, verdana, sans-serif;
}
p {
 font-size: 14px;
 line-height: 18px;
}
h3 {
 font-size: 16px;
}
h3, .caption {
 text-align: center;
}
img {
 display: block;
 margin-right: auto;
 margin-left: auto;
}
.caption {
 font-size: 12px;
 font-style: italic;
}
.pemoto {
 font-size: 7px;
 text-align: right;
}
</style>
<body>

<h3>Sejarah Singkat Layout Pikiran Rakyat</h3>

PROSES pembuatan surat kabar tak lepas dari perkembangan teknologi yang menyertai berdiri dan berkembangnya sebuah perusahaan media cetak. Begitu juga surat kabar Pikiran Rakyat sejak berdiri pada 24 Maret 1966 hingga saat ini, telah mengalami beberapa perubahan khususnya dalam proses layout halamannya.

Di awal-awal berdirinya, proses layout surat kabar Pikiran Rakyat, seperti halnya perusahaan penerbitan lainnya di Indonesia telah menggunakan mesin setting standar pada saat itu, yakni Linotype untuk menghasilkan huruf atau karakter. Mesin Linotype adalah mesin typesetting yang bisa mengatur karakter dalam satu baris. Mesin setter hasil temuan Ottmar Mergenthaler pada 1884 ini pernah digunakan Pikiran Rakyat pada kurun 1974 hingga 1986.

<img src="linotype.jpg" >
KANG DEDE
Gambar 1.1 Mesin setter Linotype model 73 R 4728 menjadi monumen di depan kantor Pikiran Rakyat, Jalan Asia Afrika 77 Bandung.

Setelah era Linotype berakhir, Pikiran Rakyat juga pernah menggunakan mesin setter kertas foto yang disebut PIP, kemudian juga mengadopsi mesin PIP yang dilengkapi monitor CRT yang terkenal dengan nama Microtex.

Di era 1990-an Pikiran Rakyat sudah mulai memasuki era komputerisasi yang dirintis oleh anak perusahaannya yaitu Mitra Desa. Berita yang diketik oleh wartawan menggunakan mesin ketik manual telah disalin dalam bentuk digital di komputer PC lewat software pengolah kata WordStar yang kemudian menjadi input untuk proses layout desktop publishing di perangkat komputer Apple Macintosh menggunakan software QuarkXPress. Hasil printout dari mesin ini kemudian dibuatkan lembaran-lembaran film dan plate-nya di bagian reprografi untuk dikirim ke bagian cetak menjadi surat kabar.

Tahun 2000-an teknologi computer to plate (CTP) mulai masuk ke Indonesia dan mulai menggantikan teknologi computer to film yang banyak dipergunakan perusahaan surat kabar di Indonesia pada saat itu termasuk Pikiran Rakyat. Teknologi CTP mampu memangkas pekerjaan repro (pembuatan film), karena hasil layout di komputer bisa langsung dibuatkan plate-nya. Karena keunggulan tersebut CTP akhirnya diadopsi oleh Pikiran Rakyat hingga sekarang.***
</body>

Setelah selesai coba dicek di browser, caranya klik kanan pada Sublime Text, lalu klik Copy File Path. Buka browser, di tab baru paste (Ctrl + V) lalu enter.

10. Sampai di sini sobat berhasil membuat file HTML + CSS + gambar.***

share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by GNOM PANEL, Published at Maret 31, 2019 and have 0 komentar