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 <p>…</p>, sementara untuk huruf miring beri tag <i>…</i>, huruf tebal beri tag <b>….</b>.
Untuk memasukan gambar di artikel beri tag <img src="nama_file.jpg" >, tulis nama file gambar lengkap dengan akhirannya.
Untuk pemoto beri tag <p class="pemoto">nama_pemoto</p>, dan
untuk caption: <p class="caption">Keterangan foto….</p>
Contoh:
<img src="linotype.jpg" >
<p class="pemoto">KANG DEDE</p>
<p class="caption">Gambar 1.1 Mesin setter Linotype model 73 R 4728 menjadi monumen di depan kantor Pikiran Rakyat, Jalan Asia Afrika 77 Bandung.</p>
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>
<p>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.</p>
<p>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 <i>typesetting</i> 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.</p>
<img src="linotype.jpg" >
<p class="pemoto">KANG DEDE</p>
<p class="caption">Gambar 1.1 Mesin setter Linotype model 73 R 4728 menjadi monumen di depan kantor Pikiran Rakyat, Jalan Asia Afrika 77 Bandung.</p>
<p>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.</p>
<p>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 <i>desktop publishing</i> di perangkat komputer Apple Macintosh menggunakan <i>software</i> QuarkXPress. Hasil <i>printout</i> dari mesin ini kemudian dibuatkan lembaran-lembaran film dan <i>plate</i>-nya di bagian reprografi untuk dikirim ke bagian cetak menjadi surat kabar.</p>
<p>Tahun 2000-an teknologi <i>computer to plate</i> (CTP) mulai masuk ke Indonesia dan mulai menggantikan teknologi <i>computer to film</i> 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.***</p>
</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.***
ReplyDeletedicoba keberuntungannya bersama dengan kami di ionqq*com
hanya dengan minimal deposit 20.000
ayooo buruan bergabung kami tunggu ya ^^
Terimakasih kak, postingannya sangat membantu untuk saya yang baru belajar hmtl, penjelasan nya sangat detail dan mudah dimengerti. sukses terus kak... Perkenalkan Nim saya 1922500186, nama saya Sintia dan link Web kampus saya https://www.atmaluhur.ac.id/
ReplyDeleteterima kasih kak buat tutorial nya, sederhana tapi sangat bermanfaat dan berguna. dtunggu tutorial selanjutnya kak yah. perkenalkan nama saya Tri scorpio, Nim 1922500198 dan link web kampus saya https://www.atmaluhur.ac.id/
ReplyDeleteTerimakasih atas penjelasannya, sangat sederhana tapi mudah dimengerti saya sangat menanti penjelasan berikutnya. Nama saya Merlyn Gebhyanti, Nim 1922500191 https://www.atmaluhur.ac.id/
ReplyDeleteSaya sedang mencari tentang artikel mengenai "awal pembuatan web dengan sublime text" saya masih belum paham bagaimana caranya membuat text di sublime text namun ketika saya membaca artikel ini saya mulai paham mengenai proses awal membuat web dengan kode html bahkan saya jg tau cara menampilkan nya yaitu denganC opy File Path. Buka browser, di tab baru paste (Ctrl + V) lalu enter.Terima kasih atas artikelnya sangat bermanfaat untuk saya yang baru belajar mengenai pemrograman web.Perkenalkan nama saya anggy firzah pratama silahkan kunjungi link website kampus saya di sini https://www.atmaluhur.ac.id/
ReplyDeleteFormat text html 2: http://dedesuhaya.blogspot.com/2019/02/Cara-Membuat-Teks-Halaman-Web-Menggunakan-Kode-HTML-dan-CSS.html?m=1
This comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteSaya sedang mencari tentang artikel mengenai "awal pembuatan web dengan sublime text" saya masih belum paham bagaimana caranya membuat text di sublime text namun ketika saya membaca artikel ini saya mulai paham mengenai proses awal membuat web dengan kode html bahkan saya jg tau cara menampilkan nya yaitu denganC opy File Path. Buka browser, di tab baru paste (Ctrl + V) lalu enter.Terima kasih atas artikelnya sangat bermanfaat untuk saya yang baru belajar mengenai pemrograman web.Perkenalkan nama saya anggy firzah pratama silahkan kunjungi link website kampus saya di sini
ReplyDeletehttps://www.atmaluhur.ac.id/
Format text html 2:
http://dedesuhaya.blogspot.com/2019/02/Cara-Membuat-Teks-Halaman-Web-Menggunakan-Kode-HTML-dan-CSS.html?m=1
Membuat website adalah langkah penting dalam mengembangkan jejak online Anda. Ini memberi Anda akses ke audiens yang lebih luas, meningkatkan kredibilitas Anda, dan memberikan platform untuk promosi yang efektif.
ReplyDeletePembuatan Web yang unik terus berkembang. Selalu terbuka untuk inovasi dan perbarui konten secara berkala.
Seiring dengan perkembangan teknologi, memiliki web personal blog telah menjadi semakin penting dalam berbagi pengalaman, pengetahuan, dan kreativitas.