Tutorial Pembuatan Teks Di Website

Pembuatan teks di website sudah sangat umum bagi developer web, tapi saya lebih menekankannya untuk pemula dan menengah. Element-element yang digunakan seperti : paraghraph, style font, dll. Salah satu yang umum adalah pembuatan paragraph, mengubah style – color – dan size font (memodifikasi font). Jika anda belum mengetahui apa itu HTML klik pengenalan dan dasar HTML. 

Berikut Langkah-langkahnya :

Membuat Paraghraph – Element Paraghraph 

Element paraghraph berguna untuk membuat teks paragraf baru. Element paraghraph mempunyai tag pembuka : <p> berfungsi untuk membuat paragraph baru dan tag penutup : </p> berfungsi untuk menutup tag pembuka jika tak ada tag penutup maka paragraf tidak akan tampil. Selanjutnya attribute pada element paraghraph berguna untuk merubah style dalam teks paragraf. Berikut attribute yang ada di element paraghraph align adalah perintah dan Left, Right, Center, dan Justify.

Left : Kiri

Right : Kanan

Center : Tengah

Justify : Perataan antara kiri dan kanan

Contoh kode :
<p align=left> Design Coworking </p> <p align=right> Design Coworking </p> <p align=center> Design Coworking </p> <p align=justify> Design Coworking </p>

Berikut hasilnya :

Design Coworking

Design Coworking

Design Coworking

Design Coworking

1. <p....> dan </p> adalah tag pembuka dan penutup element paraghraph.

2. align=.... adalah perintah untuk memanggil arah teks yang dibuat.

3. left, right, center, dan justify adalah bentuk arah yang akan diperintah.

4. Design Coworking adalah teks yang ingin dibuat atau dikreasikan.

Mengubah Size, Color, Face – Element Font 

(Element Bold, Italic, Underline, Line Break)

Element Font berguna untuk memodifikasi font teks seperti color, size, bold, italic, dll. Element Font memiliki tag pembuka : <font> dan tag penutup : </font>. Element font memiliki beberapa attribute seperti : size (dalam bentuk pixel), color (kode warna atau nama warna dalam bahasa inggris), face (jenis font). Disini saya hanya membuat 3 attribute karena ini untuk pemula atau dasar.

Element Bold berguna untuk membuat ketebalan pada teks. Element bold memiliki tag pembuka : <b> dan tag penutup : </b>. Element italic berguna untuk membuat kemiringan pada teks. Element italic memiliki tag pembuka : <i> dan tag penutup : </i>. Element underline berguna untuk membuat garis bawah pada teks. Element underline memiliki tag pembuka : <u> dan tag penutup : </u>. Element line break berguna untuk membuat baris baru, element line break hanya mempunyai tag pembuka : <br> dan tak memiliki tag penutup. 

Contoh kode :
<font size="4" color="red" face="Tahoma"> Design Coworking </font> <br> <b> Design Coworking </b> <br> <i> Design Coworking </i> <br> <u> Design Coworking </u>

Berikut hasilnya :

Design Coworking
Design Coworking
Design Coworking
Design Coworking

1. <font... dan  </font> adalah tag pembuka dan penutup element font. <br> adalah tag pembuka dari element line break. <b> dan </b> adalah tag pembuka dan penutup element bold. <i> dan </i> adalah tag pembuka dari element italic. </u> dan <u> adalah tag pembuka dan penutup element underline.

2. size= ... , color=..., dan face=

adalah untuk memanggil perintah teks yang dibuat.

3. ...=4,  ...=red, dan ...=Tahoma

adalah hasil perintah dari teks yang berwarna biru.

4. Design Coworking adalah teks yang ingin dibuat atau dikreasikan.

Membuat Teks Header – Element Header

Element Header berfungsi untuk membuat kepala teks dari ukuran kecil, sedang, dan besar. Element header memiliki attribute yaitu align (sebenarnya banyak attribute di header, tapi saya fokuskan ini untuk pemula). Element header memiliki 6 ukuran dari 1 hingga 6, ukuran 1 adalah yang paling besar dan 6 adalah ukuran terkecil. Berikut ukurannya :

HEADER 1   

HEADER 2   

HEADER 3   

HEADER 4  

HEADER 5   

HEADER 6

 
Contoh kode :
<h3 align=center> Design Coworking </h3>

Berikut hasilnya :
 

Design Coworking 

1. <h3... dan  </h3> adalah tag pembuka dan penutup element header.

2. align= ... adalah perintah untuk memanggil arah teks yang dibuat.

3. ...=center adalah hasil perintah dari teks yang berwarna biru.

4. Design Coworking adalah teks yang ingin dibuat atau dikreasikan.

Tips

Anda bisa mengganti ukuran header pada teks yang berwarna merah <h3... dan </h3> dengan misal : <h1... dan </h1> sampai header ke ukuran 6.

Membuat Teks Seperti Apa Yang Anda Buat Di Source Code – Element PRE (Preformatted Text)

Element Preformatted text adalah element yang di dalamnya ada terdapat teks yang tertulis di source code, tanpa mengubah sedikitpun tampilan teksnya. Element pre memiliki tag pembuka : <pre> dan tag penutup : </pre>. Contoh :
 

Contoh kode :
<pre> Design Coworking </pre>

Berikut hasilnya :

    Design Coworking 

Terlihat pada teks  Design Coworking | Partner Of Design ada 4 spasi yang saya buat di source code dan di tampilannya teks yang di source code sama dengan penempatan, dan spasinya.

1. <pre> dan  </pre> adalah tag pembuka dan penutup element header.

2. Design Coworking  adalah teks yang ingin dibuat atau dikreasikan.

Pelajarilah dengan cermat dan teliti karena di dalam pembuatan teks atau pembuatan yang lainnya yang berhubungan dengan web. Jika salah satu huruf maka salah semua. Semoga dengan adanya tutorial ini bisa memudahkan anda dalam membuat teks di website. Selamat Mencoba. Tunggu tutorial selanjutnya di Design Coworking. Terima Kasih…