Membuat paragraf HTML

Untuk mengatur paragraf bisa diimplementasikan seperti halnya microsoft word atau beberapa jenis aplikasi olah kata yang berhubungan dengan alat bantu dalam penulisan. Aplikasi tersebut pasti memiliki sebuah fitur perataan pada sebuah tulisan dan paragraf, dimana fitur ini berguna untuk memberikan posisi penataan kalimat pada setiap tulisan dan paragraf. Dalam penataan sebuah paragraf pada umumnya kita sering terbiasa dengan 4 posisi yaitu:

1.     Align Left (Rata kiri)

Membuat posisi tulisan dan paragraf menjadi rata kiri.

2.     Align Center (Rata tengah)

Membuat posisi tulisan dan paragraf  menjadi rata tengah.

3.     Align Right (Rata kanan)

Membuat posisi tulisan dan paragraf  menjadi rata kanan.

4.     Justify (Rata kiri-kanan)

Membuat posisi tulisan dan paragraf  sama rata, atau rata kiri-kanan.

Untuk membuat penataan posisi pada tulisan paragraf html hanya perlu menambahkan sebuah atribut yaitu “align” pada tag <p>, penggunaan atribut seperti ini <p align="posisi penataan">, contoh kode html lengkap untuk mengatur pertaan pada paragraf sebagai berikut :

1. <html>
   <head>
    <title>Belajar Membuat Paragraf dengan HTML</title>
   </head>
   <body>
   	<h1 align="center">Belajar Membuat Paragraf</h2>
   	<h2 align="left" style="color: red">Paragraf Left</h1>
   	 <p align="left">Paragraf dokumen HTML sangan digunakan terutama dalam menjelaskan atau mendiskripsikan sesuatu yang rumi dan ini merupakan penulisan paragraf rata kiri dalam dokument HTML. Paragraf dokumen HTML sangan digunakan terutama dalam menjelaskan atau mendiskripsikan sesuatu yang rumi dan ini merupakan penulisan paragraf rata kiri dalam dokument HTML</p>
   	 <h2 align="right" style="color: #009900">Paragraf Right</h1>
   	 <p align="right">Paragraf dokumen HTML sangan digunakan terutama dalam menjelaskan atau mendiskripsikan sesuatu yang rumi dan  ini merupakan penulisan paragraf rata kanan dalam dokument HTML. Paragraf dokumen HTML sangan digunakan terutama dalam menjelaskan atau mendiskripsikan sesuatu yang rumi dan  ini merupakan penulisan paragraf rata kanan dalam dokument HTML.</p>
   	 <h2 align="center" style="color: #0066ff">Paragraf Center</h1>
   	 <p align="center">Paragraf dokumen HTML sangan digunakan terutama dalam menjelaskan atau mendiskripsikan sesuatu yang rumi dan  ini merupakan penulisan paragraf rata tengah dalam dokument HTML. Paragraf dokumen HTML sangan digunakan terutama dalam menjelaskan atau mendiskripsikan sesuatu yang rumi dan  ini merupakan penulisan paragraf rata tengah dalam dokument HTML.</p>
   	 <h2 align="justify" style="color: #ff9900">Paragraf Justify</h1>
   	 <p align="justify">Paragraf dokumen HTML sangan digunakan terutama dalam menjelaskan atau mendiskripsikan sesuatu yang rumi dan  ini merupakan penulisan paragraf rata kiri kanan dalam dokument HTML. Paragraf dokumen HTML sangan digunakan terutama dalam menjelaskan atau mendiskripsikan sesuatu yang rumi dan  ini merupakan penulisan paragraf rata kiri kanan dalam dokument HTML.</p>
   </body>
   </html>
   

   
   

Hasil dari kode diatas sebagai berikut :

Paragraf Left

Paragraf dokumen HTML sangan digunakan terutama dalam menjelaskan atau mendiskripsikan sesuatu yang rumi dan ini merupakan penulisan paragraf rata kiri dalam dokument HTML. Paragraf dokumen HTML sangan digunakan terutama dalam menjelaskan atau mendiskripsikan sesuatu yang rumi dan ini merupakan penulisan paragraf rata kiri dalam dokument HTML

Paragraf Right

Paragraf dokumen HTML sangan digunakan terutama dalam menjelaskan atau mendiskripsikan sesuatu yang rumi dan ini merupakan penulisan paragraf rata kanan dalam dokument HTML. Paragraf dokumen HTML sangan digunakan terutama dalam menjelaskan atau mendiskripsikan sesuatu yang rumi dan ini merupakan penulisan paragraf rata kanan dalam dokument HTML.

Paragraf Center

Paragraf dokumen HTML sangan digunakan terutama dalam menjelaskan atau mendiskripsikan sesuatu yang rumi dan ini merupakan penulisan paragraf rata tengah dalam dokument HTML. Paragraf dokumen HTML sangan digunakan terutama dalam menjelaskan atau mendiskripsikan sesuatu yang rumi dan ini merupakan penulisan paragraf rata tengah dalam dokument HTML.

Paragraf Justify

Paragraf dokumen HTML sangan digunakan terutama dalam menjelaskan atau mendiskripsikan sesuatu yang rumi dan ini merupakan penulisan paragraf rata kiri kanan dalam dokument HTML. Paragraf dokumen HTML sangan digunakan terutama dalam menjelaskan atau mendiskripsikan sesuatu yang rumi dan ini merupakan penulisan paragraf rata kiri kanan dalam dokument HTML.

Pengenalan Tag pada HTML

Apa itu Tag pada HTML ?

Tag adalah penanda awalan dan akhiran code dari elemen di HTML yang kita buat. cara menggunakan tag yaitu dengan kurung siku (<...>), lalu di dalamnya berisi nama tag yang akan kita gunakan dan kadang juga ditambahkan dengan atribut.

Contoh: <p>, <a>, <body>, <head>, dan pada kesempatan ini kita juga menggunakan Tag Formating br, b, i, u, strong, em.

1. Jalankan software sublime atau notepade .

ketik code sbagai berikut :

<html>
<head>
<title>Belajar</title>
</head>
<body>
    <div>
<!-- Contoh tag br, b, i, u, strong, em -->
        <p>Ini adalah paragraf 1</p> 
            <br>
        <p>Ini adalah <br> paragraf 2</p> 
            <hr>
        <p><b>Selamat Datang </b>di kuliah <i>Pemograman</i></p>
        <p>Nama saya <u>Agus</u></p>
            <hr>
        <p><strong>Pengumuman.</strong> Kuliah pemograman akan dimulai pada hari <em>Senin,  26 Oktober 2019</em></p>
    </div>
</body>
</html>

Gambar kode pada sublime :

2. Penjelasan Tag Formating.

dari code diatas fungsi div yaitu membungkus dari code yang akan digunakan. Tag Formating yang ditampilkan di div tersebut diantaranya tag b, i, u, strong, em.

Tag	Fungsi
<b>	untuk membuat huruf bold
<i>	untuk membuat huruf Italic
<u>	untuk membuat huruf Underline
<strong>	untuk membuat teks penting
<em>	untuk membuat teks ditekankan

dan masih ada Tag Formating : <mark> Membuat teks ditandai, <small> Membuat teks kecil, <del> Teks dihapus,  <ins> Teks dimasukan,  <sub> Teks subscript,  <sup> Teks superscript .

3. Preview pada Browser 

Postingan pertama HTML

Hypertext Markup Language adalah bahasa markah standar untuk dokumen yang dirancang untuk ditampilkan di peramban internet. Ini dapat dibantu oleh teknologi seperti Cascading Style Sheets dan bahasa scripting seperti JavaScript dan VBScript. Wikipedia

1. Menggunakan HTML pertama kali

Pertama buka notepade/ software edit note lainnya, seperti Sublime/ Visual Studio Code. Setelah itu ketik code berikut :

 

< !DOCTYPE html>
<html>
<head>
<title>Belajar</title>
</head>
<body>
<h1>Postingan Pertama</h1>
<p>Halo, ini postingan pertama saya</p>
</body>
</html>

 

2. Simpan Ekstensi .html

Setelah code diatas sudah diketik atau copy-paste dinotepade, simpan dengan ekstensi .html dan nama file jangan ada spasi atau bisa menggunakan tanda hubung atau cuman satu kata yaitu pertama. Contoh sebagai berikut :

3. Jalankan dengan Browser

Setelah tersimpan klik 2x file tersebut dan akan diarahkan ke browser default yang sudah disetting. Hasilnya akan tampil sebagai berikut :

Sekian tutorial HTML pertama.

Postingan pertama

Hai, selamat berbagi.

Ini postingan pertama saya diblog ini. semoga bisa berkembang dan bermanfaat.

Terimakasih