refactor(html): refactor text formatting html topic based on guideline #75
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -1,53 +1,107 @@ | ||||||
| # 1. Permasalahan | ||||||
|
|
||||||
| Mungkin sebelumnya kita sudah mencoba untuk membuat sebuah halaman website, tetapi dengan tampilan yang standard, bentuk dan jenis font yang biasa. Bisa kita bayangkan bagaimana sebuah website yang berisi banyak kata, kalimat, dan paragraph jika hanya menggunakan tampilan yang standard? Pasti sangat memusingkan untuk dibaca. Jadi bagaimana kita membuat Perbedaan dari sebuah Judul, paragraf, penulisan cetak tebal,miring dan bergaris bawah agar lebih mudah di baca? | ||||||
|
|
||||||
| # 2. Penjelasan Materi | ||||||
|
There was a problem hiding this comment. point yang ini kyknya ga perlu, karena bisa dijelaskan di penjelasan detail, dihapus aja, langsung ke point 3 |
||||||
|
|
||||||
| Dalam HTML ada beberapa format text yang sering digunakan, yaitu : | ||||||
|
|
||||||
| `h` = Format text untuk judul. | ||||||
|
|
||||||
| `p` = Format untuk membuat paragaf. | ||||||
|
|
||||||
| `b` = Format text bold/tebal. | ||||||
|
|
||||||
| `i` = Format text italic/miring. | ||||||
|
|
||||||
| `u` = Format text underline/garis bawah. | ||||||
|
|
||||||
| `s` = Format text garis tengah/mencoret text. | ||||||
|
|
||||||
| `mark` = Format text yang diberi tanda/seperti di stabilo. | ||||||
|
|
||||||
|
|
||||||
|
|
||||||
| # 3. Penjelasan Detail Materi | ||||||
|
There was a problem hiding this comment. Karena point 2 dihapus, jadi point 3 ini bisa menjadi point 2 yang baru, jangan lupa judulnya juga diubah biar gak terlalu kaku
Suggested change
|
||||||
|
|
||||||
| Cara Penulisan tag dalam syntax: | ||||||
|
There was a problem hiding this comment. ini kata - kata pembukanya dibuat lebih informatif lagi, bisa kyk gini
Suggested change
|
||||||
|
|
||||||
| ## 1. Heading `<h> ... </h>` | ||||||
|
There was a problem hiding this comment. Ini poin judulnya jangan 1, tapi 2.1. soalnya dia sebagai sub point dari point 2
Suggested change
|
||||||
|
|
||||||
| Heading ini biasanya digunakan untuk bagian penting dalam sebuah web. Dan dalam Heading ini ada 6 tingkatan yaitu, `h1`,`h2`,`h3`,`h4`,`h5`,`h6`. Perbedaannya terdapat pada ukuran heading tersebut, semakin besar tag yang digunakan `h6` semakin kecil juga ukuran teks terserbut. | ||||||
|
There was a problem hiding this comment. Bagian penting ini apa ? judul maksudnya kan ?
Suggested change
|
||||||
|
|
||||||
| ```html | ||||||
| <h1> heading digunakan untuk penulisan judul utama dari artikel </h1> | ||||||
|
|
||||||
| <h2> heading ini biasa digunakan sebagai sub </h2> | ||||||
|
|
||||||
| <h3> heading ini juga biasa digunakan sebagai sub </h3> | ||||||
|
|
||||||
| <h4> heading ini digunakan tergantung dari pemrogram sendiri<h4> | ||||||
|
|
||||||
| <h5> karena biasanya heading 4, 5, 6 digunakan </h5> | ||||||
|
|
||||||
| <h6> untuk kepentingan sendiri – sendiri </h6> | ||||||
| ``` | ||||||
| Output : | ||||||
|  | ||||||
|
|
||||||
| ## 2. Paragraph `<p> ... </p>` | ||||||
|
There was a problem hiding this comment. yang ini juga, harusnya
Suggested change
|
||||||
|
|
||||||
| Paragraph digunakan seperti paragraph umumnya yaitu membuat dan memisahkan satu dan paragraph lainnya. Dan paragraph ada 4 jenis yaitu, paragraph rata kiri, paragraph rata kanan, paragraph rata tengah, dan paragraph rata kiri kanan. | ||||||
|
There was a problem hiding this comment. Ini bisa dijelasin aja kalo kita bisa ngatur perataan text pake attribute
Suggested change
|
||||||
|
|
||||||
| ```html | ||||||
| <p> PARAGRAPH BIASA </p> | ||||||
|
|
||||||
| <p align=”left”> RATA KIRI </p> | ||||||
|
|
||||||
| <p align=”right”>RATA KANAN </p> | ||||||
|
|
||||||
| <p align=”center”>RATA TENGAH</p> | ||||||
| ``` | ||||||
| Output : | ||||||
|  | ||||||
|
|
||||||
| ## 3. Styling Text | ||||||
| Styling umum yang biasa kita lihat dan dapat digunakan antara lain Bold `b`, Italic `i`, Underline `u`, Strike-Through `s`, dan Highlight Text `mark`. | ||||||
|
|
||||||
| ```html | ||||||
| <b> contoh penulisan bold/cetak tebal</b> | ||||||
|
|
||||||
| <i> contoh penulisan italic/cetak miring</i> | ||||||
|
|
||||||
| <u> contoh penulisan underline/bergaris bawah</u> | ||||||
|
|
||||||
| <s> contoh penulisan yang diberi garis tengah/text dicoret</s> | ||||||
|
|
||||||
| <mark>contoh penulisan mark/yang diberi tanda seperti distabilo</mark> | ||||||
| ``` | ||||||
| Output : | ||||||
|  | ||||||
|
Comment on lines
+65
to
+80
There was a problem hiding this comment. ini kira2 bisa dipisah jadi sub point sendiri - sendiri gak ? jadi misal Misal kalau bold digunakan pada text yang menjadi kata kunci supaya orang mudah fokus ke text tersebut. Italic buat dikasih ke istilah asing atau quote. Nah untuk underline dan mark, aku kurang tau biasanya buat apa di artikel, ada ide gak ? |
||||||
|
|
||||||
|
|
||||||
| # 4. Contoh Kasus | ||||||
|
There was a problem hiding this comment. point 4 ini dibuat langkah - langkahnya ya, jangan langsung jadi source code. Bagian - bagian source codenya bisa ditambahin satu per satu di setiap langkahnya |
||||||
| ```html | ||||||
| <h1>Hubungan kecanduan game online dengan keterampilan sosial remaja di 4 game centre di Kecamatan Klojen Kota Malang </h1> | ||||||
|
There was a problem hiding this comment. yang ini bisa jadi langkah ke |
||||||
|
|
||||||
| <h3>Anhar, Rahmat (2014) Hubungan kecanduan game online dengan keterampilan sosial remaja di 4 game centre di Kecamatan Klojen Kota Malang. Undergraduate thesis, Universitas Islam Negeri Maulana Malik Ibrahim.</h3> | ||||||
|
There was a problem hiding this comment. yang ini bisa jadi langkah ke |
||||||
| <center><h2>Abstract</h2></center> | ||||||
| <p align="left"> | ||||||
| <b> INDONESIA: </b><br> | ||||||
|
|
||||||
| Masa remaja adalah masa dimana seseorang tumbuh dan berkembang untuk mencapai kedewasaan, dimana dalam prosesnya remaja melakukan penyesuaian sosial. Di zaman modern, interaksi sosial sebagai bentuk penyesuaian sosial yang dilakukan remaja tidak terbatas dalam dunia nyata saja, namun seiring dengan perkembangan ilmu pengetahuan dan teknologi yang semakin pesat membantu manusia untuk berinteraksi satu sama lain tanpa dibatasi oleh jarak dan waktu. </p> | ||||||
|
|
||||||
| <p align="center"> | ||||||
| Salah satu program yang paling diminati oleh kalangan remaja saat ini adalah media game online. Seseorang yang terikat pada kebiasaan yang sangat kuat dan tidak bisa lepas untuk bermain game online dapat dikatakan bahwa orang tersebut telah Kecanduan game online, yang ditandai dengan adanya dorongan untuk melakukan secara terus menerus yang disertai penarikan diri, ketidak mampuan mengatur waktu, mempunyai masalah dengan pengaruh interpersonal dan kesehatan.</p> | ||||||
|
Comment on lines
+88
to
+95
There was a problem hiding this comment. yang ini bisa jadi langkah ke |
||||||
|
|
||||||
| <p align="right"> | ||||||
| <u> ENGLISH: </u><br> | ||||||
|
|
||||||
| <i>Adolescence is a period where a person grow and develop to reach maturity, which in the process, adolescent made social adjustment. In modern times, social interaction as a form of social adjustment by adolescents is not limited in the real world, but along with the development of science and technology is increase rapidly helps people to interact with each other without being limited by time and distance. One of the programs most in demand by the media of today's teenagers are online games. Someone is bound to very strong habits that can not stop to play online games one can say that the person has been Addiction to online game, which is characterized by the urge to constantly accompanied by withdrawal, inability to manage time, have a problem with the influence interpersonal and health.</i></p> | ||||||
|
Comment on lines
+97
to
+100
There was a problem hiding this comment. yang ini bisa jadi langkah ke |
||||||
|
|
||||||
| <s> Keyword : Kecanduan Game Online; Keterampilan Sosial Remaja; Addiction To Online Games; Social Skills Teenagers </s><br> | ||||||
|
There was a problem hiding this comment. yang ini bisa jadi langkah ke |
||||||
| <mark>URI: http://etheses.uin-malang.ac.id/id/eprint/5993</mark> | ||||||
|
There was a problem hiding this comment. yang ini bisa jadi langkah ke |
||||||
| ``` | ||||||
| Output : | ||||||
|  | ||||||
|
|
||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yang dimaksud pusing disini harus lebih dijelaskan biar gak ambigu, jadi lebih baik dijelaskan langsung kebutuhan dari text formatting itu buat apa, kayak gini :