HTML , Halaman statis , Tag, Elemen dan Atribut nya ~ Belajar Optimalkan

Belajar Optimalkan

Menjadi seorang blogger yang tulisannya ditayangkan atau di upload di internet mau tidak mau harus belajar juga cara penulisan yang dapat terbaca di situs yang dinaungi.

Apa cara penulisan nya?

iya, itulah yang namanya

HTML (Hyper Text Markup Language),

yang dalam bahasa indonesia nya adalah Bahasa Markah Hiper Teks (BMHT)

.
Merupakan bahasa Mark Up yang digunakan untuk membuat sebuah halaman website.
Dalam dunia pemograman berbasis website atau Web Programming, html menjadi pondasi dasar pada halaman website.

Sebuah website yang dinamis tidak cukup hanya menggunakan HTML, namun juga memerlukan

CSS,
JavaScript dan
PHP

Jika halaman website dibuat hanya menggunakan HTML saja maka halaman website tersebut di sebut halaman statis karena tidak memiliki aksi atau fungsi-fungsi yang dapat mengelola website. Kalau hanya bisa halaman statis saja maka tentu saja pembuat website akan sangat di sibukkan dengan harus mengubah file HTML setiap kali ingin mengupdate artikel.

File HTML dapat dibuat dengan teks editor

seperti notepad yang biasa disediakan oleh windows.
Lebih bagus lagi menggunakan teks editor yang memiliki fitur syntax highlighter seperti Notepad++, Sublime Text, Gedit, Kate, TextEdit yang disediakan oleh sistem operasi Mac , Nano yang disediakan oleh sistem operasi linux dan lain-lain.
File HTML disimpan dengan ekstensi html atau htm, dan dapat di eksekusi atau dijalankan menggunakan web browser baik itu Google Chrome, Mozilla Firefox, Opera, Safari dan lain-lain.

Sampai saat ini HTML sudah sampai pada versi 5.

HTML5 sudah memiliki banyak sekali fitur tambahan salah satunya dengan HTML5 memungkinkan untuk membuat streaming video tanpa bantuan flash.

Element pada HTML

merupakan isi atau objek yang berada diantara tag, maksudnya adalah isi yang ada diantara tag pembuka dan tag penutup. Di dalam element ini bisa berupa text ataupun tag lain nya.

HTML di disusun dengan tag-tag (penanda).

Tag <!– ….–> untuk memberi sebuah komentar atau keterangan

Tag <!DOCTYPE html> untuk Mendefinisikan tipe dokument

Tag <a>

untuk menunjukkan adanya sebuah anchor (digunakan untuk saling menautkan antara satu dokumen HTML ke dokumen HTML yang lain), ini selalu diikuti oleh atribut href, dimana di dalam href (hypertext reference) ini lah yang akan diisikan alamat yang dituju.
Applikasinya : <a href="...">text anchor</a>
dalam penulisan alamat Membuat Hyperlink Pada HTML memiliki dua jenis yaitu
1. alamat absolute yaitu penulisan alamat file yang disertai dengan alamat website.
2. alamat alternatif yang merupakan penulisan alamat file yang akan di panggil berada dalam aplikasi yang sama, jadi sebelum memanggil file yang diperlukan tidak menggunakan nama dari websitenya.

Tag <b> untuk membuat teks menjadi tebal

Tag <h1> berfungsi untuk membuat judul artikel. H1 adalah ukuran judul terbesar di HTML.

Tag `<p>`

berfungsi untuk membuat paragraf.

Teks yang berada di dalam tag H1 akan ditampilkan lebih besar, karena teks itu adalah sebuah judul artikel. Sementara itu, teks yang berada di tag <p> akan ditampilkan dengan ukuran normal.
paragraf disini merupakan suatu tag untuk membuat suatu elemen dalam penulisan HTML. dalam paragraf itu sendiri terdapat 3 element/tag lain yang bisa dikombinasikan langsung dengan tag paragraf.

element tag yang dimaksud diatas adalah :

paragraf rata kiri menggunakan align left
paragraf rata kanan menggunakan align right
paragraf rata tengah menggunakan align center
paragraf rata kiri kanan menggunaan align justify

Contoh penulisan : <p align="left">....isi text yang akan ditampilkan di blog....</p>

Tag </br> atau break

dipasang hanya sebagai tag penutup saja akan hampir sama fungsinya dengan tag pembuka dan penutup <p></p>, ini dipakai lebih praktis jika tidak ada elemen atau atribut lain yang diperlukan. Dan perlu diingat fungsi sebenarnya adalah memisahkan teks satu dengan teks lainnya, dengan jarak yang lebih pendek daripada membuat paragraf baru.

Tag <h2>untuk membuat heading dua
<h3> membuat heading tiga dan seterusnya

Tag <head> merupakan kepala dokumen

Tag <title> harus diletakkan di dalam tag <head>.

Tag `<body>` dan `</body>`

tag ini merupakan tubuh dokumen. Setiap informasi yang ditulis di dalam penada ini, akan tampil di halaman web.

Tag <div> untuk mendefinisikan halaman

Tag <link> untuk mendefinisikan hubungan antar dokumen

Tag <script> untuk mendefinisikan client-side script

Tag <table>

mendefinisikan tabel,

<th> table head atau bagian kepala pada tabel, untuk mendefinisikan sel header di dalam sebuah tabel
<td> table data merupakan tag yang digunakan untuk membuat kolom dalam baris dan untuk menampilkan data dalam tabel
<tr> atau dikenal dengan table row merupakan tag yang digunakan untuk membuat baris dalam tabel HTML

Aplikasi nya :

<table border=1> (border disini mengidentifikasikan garis tepi )

<tr>

</tr>

<tr>

<td>....isi data dalam kolom...</td>

</tr>

</table>

Tag <ul> untuk mendefinisikan daftar dalam format bullet

Tag <li> untuk mendefinisikan list dalam bentuk bullet.
Tag <ol> untuk menampilkan daftar list dalam bentuk huruf atau angka.
Dengan menggabungkan CSS, JavaScript tag list ini bisa di gunakan untuk membuat menu navigasi pada halaman web, selain itu dapat digunakan untuk me-list bersarang (list yang berdasarkan dalam list yang lain).

Tag <code>

pada HTML termasuk kelompok inline level element, dan mengikuti alur text yang ada. penulisan format code ini misalkan dalam penulisan syntak yang akan ditampikan kedalam halaman web, maka untuk menampilkannya bisa menggunakan <code> pada bagian <body> HTML.
Isi dari tag code tidak akan di eksekusi oleh browser, tetapi akan di tampilkan dalam bentuk text yang berformat syntax atau kode program. Perbedaan nya akan tampak pada bentuk font yang akan ditampilkan.

Tag <form>

merupakan tempat penginputan data sebelum diproses oleh sistem, contohnya :

form login,
form comment,
form data user, dan lain sebagainya.

untuk proses penginputan data dari form harus lengap dengan materi PHP, MYSQL, dan JavaScript. Di dalam tag <form> bisa ada :

tag <input> yang merupakan tag yang akan digunakan dalam form pengisian. Tag input ini memiliki banyak sekali bentuk yang bisa digunakan misalkan isian teks, password, checkbox, radiobutton, sampai dengan tombol submit berada dalam tag input. Beberapa atribut yang biasa ada dalam tag input adalah :

<input type=’text’> adalah textbox yang bisa menerima inputan text misalkan username atau berupa inputan text yang pendek
type=’password’ : textbox yang menerima inputan text, akan tetapi text yang diinput akan di tampilkan sebagai tanda bintang atau titik, textbox ini biasanya digunakan untuk inputan password.
type=’submit’ : inputan ini berupa tombol (button) untuk memproses data inputan dari form
type=’checkbox’ : inputan berupa checkbox yang dapat di ceklis oleh user.
type=’radio’ : inputan yang berupa radio grup, dimana user dapat memilih salah satu dari pilihan yang disediakan.

tag<textarea> merupakan tag yang sama fungsinya dengan inputan text, hanya saja pada textarea ini dapat diisikan dengan lebih banyak teks didalamnya. untuk mengatur panjang dan banyak baris pada textarea ini dapat menggunakan CSS

tag<option>
tag<select> merupakan tag yang digunakan untuk user memilih data yang sudah disediakan. Dalam penggunakan <select> selalu diikuti oleh tag<option> yang digunakan untuk membuat pilihan.

tag <form>

ini dibutuhkan beberapa atribut untuk memproses data yang akan dikirim, dan biasanya itu adalah alamat dari sebuah halaman untuk memproses data inputan, atribut yang kedua berupa method, method ini menjelaskan bagaimana data yang akan dikirim oleh web browser.
nilai dari method biasanya get atau post.

Atribut HTML

merupakan informasi tambahan yang digunakan di dalam tag pembuka.
Informasi tambahan ini bisa berupa instruksi untuk memberikan efek warna, ketebalan, dll.
Biasanya memiliki 2 bagian yaitu :

nama , Atribut name merupakan atribut yang nilainya akan digunakan pada saat memproses data oleh web server.
nilai, atribut ini merupakan nilai awal yang akan ditampilkan pada saat menjalankan di browser

dapat ditulis name=”value”.
Penulisan nilai/value diapit oleh dua tanda kutip (bisa digunakan kutip satu atau kutip dua)
Penulisan atribut pada HTML diawali dengan penulisan tag, didalam tag berikan atribut dan element dari tag itu sendiri.
Untuk mempercantik form yang anda buat harus menggunakan CSS

Contoh penggunaan atribut value :

<form>
Nama Depan :<input type="text" value="nama"><br/>
Nama Belakang : <input type="text">
</form> Dan hasilnya seperti ini :

atribut readonly : jika menggunakan atribut ini maka nilai value tidak bisa di ubah

Contoh :

<form>

Nama Depan :<input type="text" value="nama" readonly><br/>

Nama Belakang : <input type="text">

</form>

Hasilnya :

atribut disabled : atribut ini digunakan untuk menonaktifkan inputan. maksudnya elemen disabled bisa digunakan akan tetapi tidak bisa di gantu atau di edit.

atribut size : atribut ini mengatur lebar kotak inputan

Format contoh :

<form>
Nama Depan :<input type="text" value="nama" size="50"><br/>
Nama Belakang : <input type="text">
</form>

Hasilnya :

atribut maxlength : atribut ini digunakan untuk menentukan jumlah inputan teks yang di batasi

atribut list :

atribut ini untuk menampilkan list pada form inputan

Contoh format :

<form>

Hasilnya : (klik kanan pojok ya, akan ada pilihan kota yang telah ditentukan)

atribut min dan max : menentukan nilai minimum dan maksimum untuk elemen <input>. Atribut min dan maks digunakan untuk jenis inputan seperti : nomor, kisaran, tanggal,datetime, datetime-lokal, bulan, waktu, dan minggu

Contoh Format :

<form>
<input type="date" name="day" max="1979-12-31">
<input type="date" name="day" min="2000-01-02">
</form>

Hasilnya : (klik pojok kanan)

laceholder Attribute. atribut ini digunakan untuk sebagai pengganti dari label field.

Contoh Format :
<form>
<input type="text" name="nama" placeholder="masukkan nama">
</form>

Hasilnya :

Simbol di HTML kodenya selalu diawali dengan : &
untuk simbol HTML berupa number ditambah dengan tanda pagar (#&)

Categories: Bagian 1, HTML

Belajar Optimalkan

Recent Posts

Thursday, October 25, 2018