Ahmad Faizin

"Sebarkan ilmu walau hanya satu ayat ^^"

Breaking

Saturday 18 February 2017

Belajar HTML Part 1 Pengertian Attributes, Headings, Paragraph





Assalamualaikum Wr. Wb.

Selamat siang, di sini saya akan belajar sekaligus memberikan beberapa pengertian tentang HTML. Pada post sebelumnya telah dibahas tentang pengertian HTML. Dan juga di pertemuan sebelumnya kita mengenal terlebih dahulu apa itu Tag dan Element. Sekarang kita akan bersama-sama mendalami sebuah bahasa markup yaitu HTML.

PENGERTIAN

Di dalam HTML terbagi menjadi beberapa bagian, contohnya seperti Attributes, Headings, Paragraphs, Styles, Formatting, Quotations, dan masih banyak lagi. Pada kesempatan kali ini kita akan belajar beberapa bagian dari HTML. Yaitu belajar tentang Attributes, Headings, Paragraphs, Styles. Apa itu Attributes, Headings, Paragraphs ? untuk lebih jelasnya kita lihat berikut ini.



LATAR BELAKANG


HTML merupakan sebuah dasar dari pemrograman, karena di dalam sebuah pemrograman itu pasti terdapa syntax-syntax dari HTML itu sendiri. Maka dari itu saya belajar HTML untuk memudahkan dalam membuat sebuah kerangka website, dll.


MAKSUD & TUJUAN


Untuk mempermudahakan kita nanti dalam memulai sebuah pemrograman. Karena HTML merupakan kerangka dari sebuah permrograman itu sendiri.


ALAT & BAHAN

  • Browser
  • Text Editor

LANGKAH KERJA

Sebelumnya perlu anda ketahui bahwa HTML memiliki sebuah struktur. Contoh struktur HTML seperti berikut.


STRUKTUR DOKUMEN HTML
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

<html> ... </html> : merupakan tag pembuka dari dokumen html.
<head> ... </head> :
<title> ... </title> : merupakan tag untuk memberikan judul pada dokumen html.
<body> ... </body> : merupakan body dari dokumen html. Segala sesuatu yang ingin
ditampilkan di dokumen html disimpan dalam tag body ini.


Nah sudah tahu kan Struktur dasarnya HTML, Sekarang kita lanjut belajar bagian-bagian HTML seperti Attributes, Headings, Paragraphs, Styles. Disini saya akan menjelaskan bagian-bagian tersebut dan syntax-syntaxnya. Langsung saja kita mulai dari awal.

  • Attributes
Attributes merupakan perintah tambahan, misalnya seperti efek warna atau ketebalan dll. Penulisan attributes sendiri di awali dengan penulisan tag. Penulisan tag sendiri di dalamnya terdapat element dan attributes. Inilah contoh dari penulisan Attributes :

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2 align="center">Pengenalalan atribut HTML</h2>
</body>
</html>

Perhatikan pada syntax di atas :

  • <h2> adalah tag heading 2
  • Align adalah nama dari atribut
  • Center adalah nilai/value dari atribut
  • "Pengenalan atribut HTML” adalah element dari tag h2

Nah itu adalah contoh dari Attributes. selanjutnya kita belajar headings.



  • Headings

Heading merupakan element atau tag HTML yang berfungsi untuk menunjukkan bagian
penting pada halaman web atau juga bisa sebagai judul dari web tersebut. Element tag heading ini memiliki 6 tingkatan yang berurutan yaitu <h1>,<h2>,<h3>,<h4>,<h5>,<h6>. Perbedaan masing-masing heading yaitu dapat dilihat dari besar hingga kecil teks. contohnya tag/element
<h1> lebih besar dari element/tag <h2> dan seterusnya. Berikut adalah contoh penulisan heading dan hasilnya.

contoh penulisan heading

Dan berikut hasilnya

Ini adalah heading dari h1

Ini adalah heading dari h2

Ini adalah heading dari h3

Ini adalah heading dari h4

Ini adalah heading dari h5
Ini adalah heading dari h6
  • Paragraph

Untuk memahami pembuatan paragraf <p> pada HTML, diharapkan anda terlebih dahulu

sudah memahami penulisan dan apa itu tag, element, atribut. paragraf disini merupakan suatu tag

untuk membuat penulisan dalam bentuk paragraf. tag paragraf ini terdapat 3 atribut/tag yang bisa

dikombinasikan langsung dengan tag paragraf <p>. atribut tag tersebut yaitu :
  • Membuat paragraf rata kiri menggunakan <p align=”left”> .. isi paragraph </p>
  • Membuat paragraf rata kanan menggunakan <p align=”right”> .. isi paragraph </p>
  • Membuat paragraf rata tengah menggunakan <p align=”center”> .. isi paragraph </p>
  • Membuat paragraf rata kiri kanan menggunaan <p align=”justify”> .. isi paragraph </p>
Berikut adalah contoh penulisan paragraph.

contoh penulisan paragraph

hasil dari contoh di ataas




Nah itu dulu dari saya, selamat mencoba semoga bermanfaat. 
Ihdinashirotolmustaqim
Wassalamualaikum Wr. Wb.


Referensi

Buku Belajar HTML dan CCS Dasar. oleh Diki Alfarabi Hadi



No comments:

Post a Comment

Adbox