©Sistem Manajemen Multi Perusahaan

     

DASAR -DASAR HTML

Twitter Follow
Ditulis Oleh: Alfians Increms Juli, 2021
Aplikasi: Perkebunan - Pertambangan - HTI - HPH Sistem Integrasi

DASAR-DASAR HTML

DAFTAR ISI DASAR HTML

Apa itu HTML


Apa itu HTML

Kepanjang html itu sendiri : Hyper Text Markup Language, bahasa formatting ini yang digunakan untuk membuat sebuah halaman website. khusus untuk yang berbasis website (Web Programming), HTML menjadi pondasi dasar utama pada halaman website. sebuah file HTML di disimpan dengan ekstensi .html (dot html). dan dapat di eksekusi atau diakses menggunakan web browser seperti Microsoft edge, Mozilla Firefox, Opera, Google Chrome, Safari dan lain-lain.

HTML memiliki beberapa element yang tersusun dari tag-tag yang memiliki fungsi nya masing-masing. seperti tag heading, paragraf, pembuatan form, tombol, list, membuat hyperlink atau link yang menghubungkan antar halaman website.

Html sendiri memiliki fungsi yang cukup banyak diantaranya : Membungkus element-element tertentu sesuai kebutuhan, Membuat heading atau format judul, Membuat Tabel., Membuat List, Membuat Paragraf, Membuat Form. Membuat Tombol, Membuat huruf tebal, Membuat huruf miring, Menampilkan gambar, Menampilkan video.

Adapun untuk menggunakan html, maka harus menggunakan text editor seperti : sublime, notepad++ dan lain-lain

CSS Basic Elements

CSS Basic Elements

Tujuan dari HTML ini adalah untuk membantu menentukan apa pengaturan default dengan CSS dan untuk memastikan bahwa semua Elemen HTML yang mungkin disertakan dalam HTML ini agar tidak melewatkan setiap Elemen yang mungkin saat mendesain situs, maka HTML sebagai dasar dari sebuah website, apabila seseorang membuat sebuah website maka tidak cukup hanya menggunakan HTML, dalam hal ini masih memerlukan bantuan CSS, JavaScript dan PHP untuk membuat sebuah website yang dinamis.

Headings


Headings

Heading merupakan sebuah TAG yang digunakan untuk nama judul dengan ukuran yang sudah ditentukan dan tebal huruf yang sudah diset contohnya seperti dibawah ini:

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Adapun dalam penulisan skrinpya, dengan menulis tag <h1> dan ditutup </h1> sampai dengan <h6> </6>, maka nama judul diletakkan ditengah, namun tidak mesti nama judul harus menggunakan heading ini walaupun disebut bagian kepala, seperti penulis lakukan saat ini yakni menggunakan <h4> "sebagai penulisan awal tag tanpa garis miring, tatkala diberi garis miring maka dinyatakan skrip itu selesai" </h4> kalimat ini jika di jalankan maka menjadi seperti dibawah ini :

sebagai penulisan awal tag tanpa garis miring, tatkala diberi garis miring maka dinyatakan skrip itu selesai

Silahkan dipraktekkan, diartikel selanjutnya kita akan jumpai beberapa tag salah satunya <pre> </pre>, <span> </span> khusus untuk <span> ini memiliki fungsi kosong atau netral dalam artian pengguna dapat memasukannya sebuah class untuk kekosongan tersebut contohnya seperti ini < span class="table-list"> Isi skrip </span>, atau < span align="center"> Isi skrip </span>, < span align="left"> Isi skrip </span>, apakah tag yang lain tidak dapat disisipkan seperti contoh tadi ?, tentu bisa dan menjadi double fungsi, agar lebih jelasnya simak maksud dan fungsi masing-masing tag ini :

<!DOCTYPE html> digunakan untuk Mendefinisikan tipe document HTML5

<a>link</a> Mendefinisikan sebuah anchor, digunakan untuk saling menautkan antara satu dokumen HTML ke dokumen HTML yang lain (membuat link)

<span> ...</span> mendefinikan sesuatu yang kosong atau netral dan dapat dimasukkan sebuah class didalamnya

<em> ...</em> membuat kata atau kalimat menjadi miring.

<sup> ...</sup> mendefinisikan huruf untuk dikecilkan diatas atau disebut superscript contohnya seperti ini : X-flash Increms Multi Perusahaan.

<sub>...</sub> mendefinisikan huruf untuk dikecilkan dibawah atau disebut subscript contohnya seperti ini : X-flash Increms Multi Perusahaan.

<br> ...</br> mendefinisikan batasan suatu kalimat atau kata atau disebut juga baris baru, ini berbeda tipis dengan paragraf namun tidak sama dari hal jarak, kelebihan <br> tidak perlu diberi penutup </br> disisi lain adanya juga yang menulis <br/>.

<b> .. </b> membuat teks menjadi tebal

<p> .. </p> membuat paragraf

<h1> .. </h1> membuat heading satu

<h2> .. </h2> membuat heading dua

<body> ... Isi konten .... </body> mendefinisikan body/isi dokument html

<head> .... isi ..... </head> mendefinisikan bagian kepala dokumen html

<title> ... isi .... </tittle> memdefiniskan judul halaman

<div> ... isi ... </div> mendefinisikan halaman

<link> .... isi .... </link> mendefinisikan hubungan antar dokumen

<script> .... isi .... </script> Mendefinisikan client-side script

<table> .... isi .... </table> mendefinisikan table

<th> ... isi .... </th> Mendefinisikan sel header di dalam sebuah table

<td> ... isi .... </td> Mendefinisikan sel di dalam sebuah table

<tr> ... isi <td> atau <th>.... </tr> Membuat baris di dalam sebuah table

<ul> ... isi .... </ul> Mendefinisikan daftar dalam format bullet

<ol> ... isi .... </ol> Mendefinisikan daftar dalam format angka yang urut

<li> ... isi .... </li> Mendefinisikan list

<blockquote> ... isi .... </blockquote> menandai dan menekankan sebuah kalimat dalam satu kelompok

<pre> ... isi .... </pre> menandai dan menekankan sebuah kalimat dalam satu kelompok dan biasa digunakan untuk karakter-karakter tertentu seperti kode atau skrip itu sendiri

<strong> ... isi .... </strong> menebalkan huruf

<hr> ... isi .... </hr> Memberikan garis panjang sebagai batas, ada juga penulisan tagnya seperti ini <hr/> maksudnya Membuka Tag sekaligus menutupnya dalam sekali penulisan selama tak ada kata atau kalimat diantaranya.

Catatan tambahan : &nbsp; berfungsi untuk area yang kosong dan tidak ditampilkan dilayar begitu juga &lt; &gt; berfungsi untuk mematikan skrip agar tidak terbaca sebagai skrip perintah, contohnya :&lt; <li> &gt; dan ini hanya berlaku penulisannya di text editor seperti sublime, visual studio code dan lain-lain.

Adapun contoh praktek dan aktualnya dapat dilihat dibawah ini :

Paragraph


Paragraph

CSS | God's Language

Tatkala HIDUP namun takut pulang alias MATI. Padahal KEMATIAN itu PINTU jalan PULANG ke TEMPAT TINGGAL ANDA yang PATEN. Seyogyanya ANDA senang dan gembira pada Saat ANDA mau PULANG test kematian. Tapi Realitanya Tidak begitu karena PEKAT lebih dominan alias KEMATIAN itu sesuatu yang AMAT SANGAT menakutkan dan Menyedihkan.

Objektifkah Anda ? Jika Anda punya Adik yang Anda sayangi berbuat salah kepada musuh Anda, maka Anda harus mengatakan salah kepada adik Anda, Itulah objektif , Jika Anda mendengar gosip tentang keburukan teman akrab Anda, maka janganlah Anda memvonisnya buruk atau jahat, namun tanyakanlah secara langsung kepadanya, Itulah OBJEKTIF ( tidak memihak salah satu pihak ).

Misc Stuff - abbr, pre, code, sub, sup


Misc Stuff - abbr, pre, code, sub, sup, etc.

Barang kali andapun setuju bila efek rumah kaca disebutkan sebagai isu Lingkungan paling banyak dibicarakan saat ini. Hal ini mengingat berbagai bencana alam yang tengah dan banyak terjadi diberbagai daerah. baik didalam maupun diluar negeri. mulai dari politis. Ilmuan sampai orang awampun ikut panik memikirkan akibat Efek Rumah Kaca. Mungkin mereka menyadari apa yang dapat ditimbulkan dengan adanya rumah kaca. Rumah Kaca

Pendapat ilmuwan bahwa gas-gas polutan dan pemanasan bumi yang diakibatkan 
                memang benar-benar terjadi,bahkan ada beberapa orang yang terkena kangker kulit.Rumah kaca
"Belum ada data yang cukup kuat untuk mendukung pernyataan itu tegasnya betul kadar CO2 meningkat 2 kali lipat dalam 50 tahun mendatang, lanjutnya lagi. Para ahli iklim klimatologi tentu banyak yang tidak sependapat. Mereka dengan menggunakan data mutakhirmengatakan CO2 Ch4 dan berbagai gas EFEK RUMAH KACA lainnya, akan meningkatkan suhu bumi + 20 sampai ± 80 Celcius pada abad-abad mendatang."
-ini Blockquote lho ditulis oleh Elfiansyah Elham

Navigation Bar

Section

Section Header

Pendapat ilmuwan bahwa gas-gas polutan dan pemanasan bumi yang diakibatkan memang benar-benar terjadi, bahkan ada beberapa orang yang terkena kangker kulit.Rumah kaca "Belum ada data yang cukup kuat untuk mendukung pernyataan itu tegasnya betul kadar CO2 meningkat 2 kali lipat dalam 50 tahun mendatang, lanjutnya lagi. Para ahli iklim klimatologi tentu banyak yang tidak sependapat. Mereka dengan menggunakan data mutakhirmengatakan CO2 Ch4 dan berbagai gas EFEK RUMAH KACA lainnya, akan meningkatkan suhu bumi + 20 sampai ± 80 Celcius pada abad-abad mendatang."

Article

Most important heading here

Less important heading here

Some additional information here

Pendapat ilmuwan bahwa gas-gas polutan dan pemanasan bumi yang diakibatkan memang benar-benar terjadi, bahkan ada beberapa orang yang terkena kangker kulit.Rumah kaca "Belum ada data yang cukup kuat untuk mendukung pernyataan itu tegasnya betul kadar CO2 meningkat 2 kali lipat dalam 50 tahun mendatang, lanjutnya lagi. Para ahli iklim klimatologi tentu banyak yang tidak sependapat. Mereka dengan menggunakan data mutakhirmengatakan CO2 Ch4 dan berbagai gas EFEK RUMAH KACA lainnya, akan meningkatkan suhu bumi + 20 sampai ± 80 Celcius pada abad-abad mendatang."

list types


List Types

Definition List

List Type ini menggunakan tag berupa <ul>....</ul> untuk bullet dan <ol>....</ol> untuk angka yang urut sedangkan <li>...</li> sebagai isi kalimatnya seperti contoh dibawah ini :

Definition List Title
This is a definition list division.

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

Fieldsets, Legends, and Form Elements


Fieldsets, Legends, and Form Elements

Legend

Sejak dahulu kala, proses pengolahan data telah dilakukan oleh manusia dan manusia juga menemukan alat-alat mekanik dan elektronik untuk membantu manusia dalam penghitungan dan pengolahan data supaya bisa mendapatkan hasil lebih cepat. Komputer yang kita temui saat ini adalah suatu evolusi panjang dari penemuan-penemuan manusia sejah dahulu kala berupa alat mekanik maupun elektronik.Saat ini komputer dan piranti pendukungnya telah masuk dalam setiap aspek kehidupan dan pekerjaan. Komputer yang ada sekarang memiliki kemampuan yang lebih dari sekedar perhitungan matematik biasa.

Form Element

Form elemen berfungsi untuk penginputan suatu data kemudian biasanya disimpan ditempat tertentu yang disebut database.














Adapun skrip d iatas seperti dibawah ini :

<form>

<input type="text" id="text_field" />

<label for="text_area">Text Area:</label>

<textarea id="text_area"></textarea>

<label for="select_element">Select Element:</label>

<select name="select_element" id="select_element">
<optgroup label="Option Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
<optgroup label="Option Group 2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
</select>

</form>

Skrip Radio Button dan Checkbox serta password sebagai berikut :

<label>Radio Buttons: </label>
<br />

<form>
<label for="radio_button1">Radio 1:</label>
<input type="radio" class="radio" name="radio_button" id="radio_button1" value="radio_1" />
<br/>
<label for="radio_button2">Radio 2:</label>
<input type="radio" class="radio" name="radio_button" id="radio_button2" value="radio_2" />
<br/>
<label for="radio_button3">Radio 3:</label>
<input type="radio" class="radio" name="radio_button" id="radio_button3" value="radio_3" />

</form>
<br/>


<label>Checkboxes: </label>
<br />

<form>
<label for="checkbox1">Checkbox 1:</label>
<input type="checkbox" class="checkbox" name="checkbox1" id="checkbox1" value="check_1" />
<br/>
<label for="checkbox2">Checkbox 2:</label>
<input type="checkbox" class="checkbox" name="checkbox2" id="checkbox2" value="check_2" />
<br/>
<label for="checkbox3">Checkbox 3:</label>
<input type="checkbox" class="checkbox" name="checkbox3" id="checkbox3" value="check_3" />

</form>
<br/>
<form>
<label for="password">Password:</label>
<br />
<input type="password" class="password" name="password" id="password" />


<label for="file">File Input:</label>
<br />
<input type="file" class="file" name="file" id="file" />

<input class="button" type="reset" value="Clear" />
<input class="button" type="submit" value="Submit" />
</form>

Pengguna cukup menambahkan link saja pada select elemen option silahkan mempelajarinya pada artikel selanjutnya.

Tables

Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3

Input Data Tanpa Refresh Dengan Database MYSQL

Perhatikan setiap warna yang diberikan, karena kata-kata itu akan saling berhubungan atau dikenal dengan INTEGRASI jika sudah jadi maka menjadi INTEGRITED, Para penggunanya menjadi INTEGRITER (Integrity), Kata setiap warna yang diberikan selalu berhubungan dengan skrip selanjutnya

Input Data Tanpa Refresh

Input Data Tanpa Refresh Dengan Radio button

Kita Melanjutkan dari Input data tanpa refresh dengan database MySQL I yang sudah kita bahas sebelumnya, maka kita melanjutkan pembahasan ini walaupun tidak jauh berbeda hanya perbedaan pada pilihan kelamin, yang sebelumnya menggunakan type input, sekarang menggunakan type Radio button atau Checkbox kita pilih salah satunya saja,

Input Data dengan Radio button

Input Data Tanpa Refresh Dengan Checkbox

Ini hanya penambahan saja dari Input data tanpa refresh dengan database MySQL dan Input data tanpa refresh dengan database MySQL II yang sudah kita bahas sebelumnya, yakni sebelumnya menggunakan type input, dan type Radio button maka sekarang menggunakan Checkbox. Seperti biasa membuat database, atau bisa juga menggunakan database yang sudah ada

Input Data dengan Checkbox

Tim Xflash

Cookie Xflash

This website uses cookies. We use cookies to ensure that we give you the best experience on our website to personalise content, adverts and to analyse our traffic using Google Analytics. Read Xflash Privacy Policy and Cookie Policy and Terms & Conditions.

Situs web ini menggunakan cookie. Kami menggunakan cookie untuk memastikan bahwa kami memberikan pengalaman terbaik di situs kami untuk Anda dan untuk mempersonalisasi konten, iklan dan menganalisis lalu lintas menggunakan Google Analytics. Bacalah tentang : Kebijakan Privacy dan Kebijakan Cookie serta Syarat & Ketentuan Xflash.

Silahkan Anda dapat mengubah pengaturan cookie kapan saja, menghapus atau disable pada browser.

X-flash Increms 1.1
Developer © X-Flash-Elfiansyah Elham Di Support XFlash Company ; 2020–2024 - Copyright © Xflash Company All rights reserved.
Share

X

X-Bootcamp

Skill Pemrograman

"Belajar Pemrograman dan membuat Projek yang siap guna serta dikembangkan"

Dari Dasar sampai Mahir

Dengan atau melanjutkan menggunakan website ini, Anda menyetujui kebijakan cookies kami.

🍪 Read Our Cookie Policy & Disclaimer, We use cookies to help us give you the best experience on our website.If you continue without changing your settings, we will assume that you are happy to receive all cookies on our website. However, if you would like to, you can change your cookie settings at any time.