Daftar Berurutan dan Tak Berurutan, Page List dalam HTML

Telah kita ketahui bahwa HTML, Memiliki berbagai macam Element, Salah satunya adalah Element Identifikasi, yaitu UL dan OL, Apakah Order List dan Unorder List dalam HTML ?

• Unordered List atau yang biasa kita sebut dengan "ul" adalah jenis daftar yang berbentuk poin - poin, Unordered List atau UL sendiri juga sering disebut dengan Nama Bullet List karena bentuknya yang berupa titik lingkaran. Untuk membuat Unordered List atau ul tersebut sebenarnya cukup mudah, hanya dengan menambahkan Tag Unorderd List "<ul>" lalu buat suatu List, dengan cara menambahkan Tag List "<li>" dan akhiri dengan tag penutup, kita sudah bisa membuatnya.

lihat contoh :

Dan hasilnya akan terlihat seperti berikut:

1. Ordered List yang biasa disingkat dan dikenal dengan "ol" adalah jenis daftar yang berbentuk angka - angka berurutan atau biasa dikenal dengan nama daftar berurutan, daftar berurutan ini sangat berguna untuk mengurutkan suatu data yang banyak, misal: daftar menu makanan, daftar belanja dan lain sebagainya, membuat daftar "ol" pun cukup mudah kita hanya butuh menambahkan tag pembuka Ordered List yaitu "<ol>" setelah itu masukan tag List "<li>" didalam Tag ol dan tutup tag tersebut dengan tag penutup.

Lihat Contoh:

Dan Hasilnya akan terlihat seperti berikut:

Berikut adalah perbedaan UL dan OL, Sekian

Cara menambahkan gambar dalam Bahasa HTML

Untuk memperindah sebuah halaman web, Kadang gambar juga perlu ditambahkan dalam halaman web kita, selain agar tampilan halaman web lebih berwarna, Gambar juga diperlukan untuk membuat
halaman web lebih menarik dan terlihat lebih proffesional,

Untuk menambahkan gambar dengan HTML, Kita perlu menambahkan element img dalam tatanan HTML tersebut, element png bisa dibilang unik karena element img tidak perlu menambahkan tag penutup untuk mengakhiri element tertsebut, element yang tidak memerlukan tag penutup biasa disebut dengan element kosong dan biasanya element seperti ini membutuhkan suatu attribut.
cara menambahkan attribut tersebut cukup mudah, kita hanya menambahkan attribut tersebut setelah nama element.

seperti contoh :

<Jenis Element Atrribut="nilai atrribut" _ ">

dan juga

<Jenis Element Attribut="nilai attribut" _ ">konten jika ada</tag penutup element>

Perlu diketahui bahwa kita juga dapat menambahkan lebih dari satu attribut dalam suatu element, kita tidak perlu mematuhi suatu aturan tertentu untuk menambahkannya, karena attribut boleh diletakkan secara bebas, dan untuk memisahkan attribut satu dengan yang lain kita hanya butuh menambahkan spasi di antara keduanya sebagai pemisah.


Untuk menambahkan gambar, Lihat Contoh :

Yang pertama harus dilakukan adalah, kita perlu menyiapkan gambar yang akan kita masukan ke dalam html
Setelah gambar sudah siap, Siapkan File HTML yang akan kita Masukan Gambar, dan kalau belum ada file nya, bisa kita buat dengan software notepad, notepad++, atau semacamnya.
Tahap ketiga adalah, memasukan Gambar ke dalam HTML, Perhatikan Caranya.

Kita Masukan Gambar kedalam Element Header. Lihat Contoh :

<h1><img src="C:\Users\ITProject\Pictures\ITProject.png" alt="Gambar ITProject">ITProject</h1>

Pembahasan :

Element src merupakan element alamat gambar tersebut disimpan, src merupakan singkatan dari source, penambahan alamat gambar src, juga dapat dilakukan dengan cara menambahkan link gambar dari internet, Contoh:

<h1><img src="itproject13[dot]blogspot[dot]com\logo\ITProject.png" alt="Gambar ITProject">ITProject</h1>

Element alt merupakan suatu teks yang akan ditampilkan apabila gambar yang kita masukan tidak tercetak dengan benar.

Tambahkan Element br setelah gambar agar lebih tertata rapi, element br merupakan element yang digunakan untuk menambahkan suatu baris dalam HTML. Lihat Contoh :

<h1><img src="C:\Users\ITProject\Pictures\ITProject.png" alt="Gambar ITProject"><br>ITProject</h1>

Setelah menambahkan tag br, kita bisa menambahkan artikel dibawah gambar tersebut.
Dibagian akhir kita perlu menyimpan file HTML tersebut dengan ekstensi *.html
setelah itu buka file HTML tersebut dengan Software Browser yang kita miliki.




Gambar sebelah kiri menunjukan bahwa gambar logo gagal dimuat.
Gambar sebelah kanan menunjukan bahwa gambar logo termuat dengan baik.

Cara Mudah Membuat HTML dengan Struktur Data (terstruktur)

Membuat HTML dengan Struktur data merupakan suatu keharusan dalam merangkai html tersebut,  karena apabila kita membuat html tanpa menggunakan struktur data, Html yang kita buat akan acak-acakan dan seringkali tidak dapat dijalan, maka dari itu karena sangat pentingnya struktur data dalam pembuatan html, maka kita akan mencoba mempelajari tutorial membuat HTML dengan strutur data.

1. Hal yang pertama yang harus dilakukan adalah, siapkan dahulu materi/ tulisan yang ingin dibuat menjadi html.
2. Setelah Materi/Tulisan telah siap, kita harus pahami dahulu bagaimanakah Struktur Dokumen Html tersebut,

sebelum itu bagi yang belum mengetahui bagaimana dasar pembuatan HTmL, dapat mengikuti materi kami yang sebelumnya yaitu :

Belajar Pemrograman Web: Struktur Dasar pada HTML

Jika semua telah siap, mari kita ciptakan HTML tersebut

• Buka Software pembuat HTML yang kalian punya, disini kita menggunakan software yang, mungkin tidak kalian duga hehe, disini kita menggunakan Notepad, mengapa notepad, selain dapat untuk menulis catatan notepad juga bisa digunakan untuk aktivitas lainya yang bisa di bilang seru, kita bisa memanfaatkan notepad untuk menulis script C++, C, Phyton, HTML dan lainya.
• Setelah Jendela Notepad Terbuka, Tulis Script HTML sesuai Panduan yang kami tuliskan dibawah.
• Tambahkan Deklarasi "DOCTYPE HTML" dibagian paling atas, seperti contoh :                       

<!DOCTYPE html>

• Setelah itu Tambahkan Element Root dibawah Deklarasi HTML "DOCTYPE HTML" seperti contoh:                        

<html>

• Tuliskan Judul Materi yang akan Dibuat pada Element TITLE yang terdapat di dalam Element HEAD, dan setelah judul Materi Ditulis, Jangan Lupa untuk menambahkan Penutup TAG "</>, seperti contoh:

                <head>

                <meta charset = "utf-8">

                <title> How To Create HTML with Data Structure</title>
                </head>

          Nah, Kenapa kita menambahkan "<meta charset = "utf-8">" ?, meta charset digunakan untuk menambahkan informasi pengkodean karakter dalam HTML, atau bisa dibilang Teks Formating nya.

• Setelah Element Head dan Title dibuat, Masukan Element BODY dibawah nya dan Masukan Materi yang telah disiapkan, setelah materi di masukan, jangan lupa akhiri dengan TAG Penutup, seperti Contoh:

                <body>               

                isikan sebuah informasi atau artikel yang akan dimuat pada halaman
                body contoh:
                Membuat HTML dengan Struktur data merupakan suatu keharusan
                dalam merangkai html tersebut,  karena apabila kita membuat html
                tanpa menggunakan struktur data, Html yang kita buat akan
                acak-acakan dan seringkali tidak dapat dijalan, maka dari itu karena
                sangat....               

                </body>

• Setelah Semua telah dilaksanakan, akhiri  HTML dengan memasukan Element Penutup ROOT, seperti contoh:

          </html>

• Nah, untuk hasilnya akan terlihat seperti dibawah ini

• Setelah, semua telah selesai, waktunya kita untuk menyimpan file tersebut kedalam bentuk HTML.
• Klik save as pada notepad, beri nama file dan tuliskan *.html pada akhir penamaan, dan jangan lupa mengubah save as type ke bentuk all files
• Buka file HTML yang telah kita buat dengan software web browser yang dimiliki, bisa firefox, chrome, Microsoft edge, dan lain sebagainya

Klik untuk memperbesar

atau klik button demo dibawah ini untuk mencoba langsung pada browser anda

• DEMO

Halaman Html mungkin tidak terlalu berubah dan mungkin terlihat biasa saja, nah perbedaannya kita bisa melihat judul artikel kita pada title bar browser.

Belajar Pemrograman Web : Cara Mudah Dan Simple Membuat HTML

Cara Mudah Dan Simple Membuat HTML
Pasti Banyak yang bertanya-tanya,"Bagaimana Cara membuat file HtmL ?" banyak yang menyangka bahwa membuat file HTML itu sulit atau susah, sebenarnya membuat File HTML itu cukup mudah dan simple.

pertama untuk membuat HTML yang kita butuhkan adalah suatu aplikasi yang digunakan untuk membuat HTML tersebut

contoh aplikasi : dreamweaver, Web Builder  dan lain sebagainya

tapi kita tidak akan menggunakan software aplikasi tersebut, hanya cukup dengan aplikasi alam semesta yang multi fungsi dan melegenda

Apakah APP yang dapat membuat file HTML tersebut  ?

       

Dia adalah "NOTEPAD"

Langkah Pertama Buka Notepad dengan cara "Start > All Program > accessories > Notepad" atau bisa juga dengan cara "Start + R  > ketik" Notepad" > Enter"

Langkah Kedua : setelah Notepad terbuka, Siapkan konten dan masukan ke Notepad " sebagai contoh kita membuat konten teks bertuliskan " Koding123 HTML Pertama Saya"

Langkah Ketiga : Save Dokumen dengan ekstensi html.

ganti "save as type" menjadi All files, setelah itu tulisa nama file dan tambahkan ekstensi *.html pada akhir nama

Langkah Keempat : Buka file html dengan browser "Dalam Contoh kita menggunakan Microsoft Edge"

Cukup mudah bukan ?, Tanpa menggunakan software yang ribet dan berat pun kita bisa membuat HTML.

Selamat Mencoba

Belajar Pemrograman Web : TAG pada HTML

Apa yang dimaksud dengan TAG pada HTML ?

TAG merupakan Suatu teks yang ditulis di antara tanda "<" dan ">", TAG berperan penting dalam menampilakan bentuk format suatu object html yang akan ditampilkan pada jendela browser. contohnya seperti: gambar, tabel, teks dan sebagainya.

Contoh :

               

Kita akan menulis sebuah teks " Selamat Datang Di Koding123 Blog"

pada kalimat di atas kata "Koding123 Blog" akan kita buat terlihat tebal daripada kata yang lain, atau yang sering kita sebut dengan format/pemformatan Bold, mungkin dalam software "Ms.Word" membuat format teks (BOLD) tersebut sangat mudah, hanya dengan menekan ikon B (Bold) atau dengan melakukan kombinasi "CTRL + B" tetapi lain halnya dengan HTML.

Dalam Html Kita harus menggunakan TAG untuk melakukan Hal tersebut, contoh sebagai berikut : "Selamat Datang Di <b>Koding123 Blog</b>"

Pada contoh diatas kita menggunakan "TWO SIDED TAG", "Two Sided Tag" merupakan tag yang terdiri dari tag pembuka dan tag penutup, tag pembuka (kiri) tidak ditandai dengan slash (/) sedangkan tag penutup (kanan) harus selalu ditandai dengan slash (/).

Berikut Daftar Tag yang ada pada HTML

Tag	Description
Basic
<!DOCTYPE>	Defines the document type
<html>	Defines an HTML document
<title>	Defines a title for the document
<body>	Defines the document's body
<h1> to <h6>	Defines HTML headings
<p>	Defines a paragraph
<br>	Inserts a single line break
<hr>	Defines a thematic change in the content
<!--...-->	Defines a comment
Formatting
<acronym>	Not supported in HTML5. Defines an acronym
<abbr>	Defines an abbreviation
<address>	Defines contact information for the author/owner of a document/article
<b>	Defines bold text
<bdi>	Isolates a part of text that might be formatted in a different direction from other text outside it
<bdo>	Overrides the current text direction
<big>	Not supported in HTML5. Defines big text
<blockquote>	Defines a section that is quoted from another source
<center>	Not supported in HTML5. Deprecated in HTML 4.01. Defines centered text
<cite>	Defines the title of a work
<code>	Defines a piece of computer code
<del>	Defines text that has been deleted from a document
<dfn>	Defines a definition term
<em>	Defines emphasized text
<font>	Not supported in HTML5. Deprecated in HTML 4.01. Defines font, color, and size for text
<i>	Defines a part of text in an alternate voice or mood
<ins>	Defines a text that has been inserted into a document
<kbd>	Defines keyboard input
<mark>	Defines marked/highlighted text
<meter>	Defines a scalar measurement within a known range (a gauge)
<pre>	Defines preformatted text
<progress>	Represents the progress of a task
<q>	Defines a short quotation
<rp>	Defines what to show in browsers that do not support ruby annotations
<rt>	Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby>	Defines a ruby annotation (for East Asian typography)
<s>	Defines text that is no longer correct
<samp>	Defines sample output from a computer program
<small>	Defines smaller text
<strike>	Not supported in HTML5. Deprecated in HTML 4.01. Defines strikethrough text
<strong>	Defines important text
<sub>	Defines subscripted text
<sup>	Defines superscripted text
<time>	Defines a date/time
<tt>	Not supported in HTML5. Defines teletype text
<u>	Defines text that should be stylistically different from normal text
<var>	Defines a variable
<wbr>	Defines a possible line-break
Forms
<form>	Defines an HTML form for user input
<input>	Defines an input control
<textarea>	Defines a multiline input control (text area)
<button>	Defines a clickable button
<select>	Defines a drop-down list
<optgroup>	Defines a group of related options in a drop-down list
<option>	Defines an option in a drop-down list
<label>	Defines a label for an <input> element
<fieldset>	Groups related elements in a form
<legend>	Defines a caption for a <fieldset>, < figure>, or <details> element
<datalist>	Specifies a list of pre-defined options for input controls
<keygen>	Defines a key-pair generator field (for forms)
<output>	Defines the result of a calculation
Frames
<frame>	Not supported in HTML5. Defines a window (a frame) in a frameset
<frameset>	Not supported in HTML5. Defines a set of frames
<noframes>	Not supported in HTML5. Defines an alternate content for users that do not support frames
<iframe>	Defines an inline frame
Images
<img>	Defines an image
<map>	Defines a client-side image-map
<area>	Defines an area inside an image-map
<canvas>	Used to draw graphics, on the fly, via scripting (usually JavaScript)
<figcaption>	Defines a caption for a <figure> element
<figure>	Specifies self-contained content
Audio/Video
<audio>	Defines sound content
<source>	Defines multiple media resources for media elements (<video> and <audio>)
<track>	Defines text tracks for media elements (<video> and <audio>)
<video>	Defines a video or movie
Links
<a>	Defines a hyperlink
<link>	Defines the relationship between a document and an external resource (most used to link to style sheets)
<nav>	Defines navigation links
Lists
<ul>	Defines an unordered list
<ol>	Defines an ordered list
<li>	Defines a list item
<dir>	Not supported in HTML5. Deprecated in HTML 4.01. Defines a directory list
<dl>	Defines a definition list
<dt>	Defines a term (an item) in a definition list
<dd>	Defines a description of an item in a definition list
<menu>	Defines a list/menu of commands
<command>	Defines a command button that a user can invoke
Tables
<table>	Defines a table
<caption>	Defines a table caption
<th>	Defines a header cell in a table
<tr>	Defines a row in a table
<td>	Defines a cell in a table
<thead>	Groups the header content in a table
<tbody>	Groups the body content in a table
<tfoot>	Groups the footer content in a table
<col>	Specifies column properties for each column within a <colgroup> element
<colgroup>	Specifies a group of one or more columns in a table for formatting
Style/Sections
<style>	Defines style information for a document
<div>	Defines a section in a document
<span>	Defines a section in a document
<header>	Defines a header for a document or section
<footer>	Defines a footer for a document or section
<hgroup>	Groups heading (<h1> to <h6>) elements
<section>	Defines a section in a document
<article>	Defines an article
<aside>	Defines content aside from the page content
<details>	Defines additional details that the user can view or hide
<dialog>	Defines a dialog box or window
<summary>	Defines a visible heading for a <details> element
Meta Info
<head>	Defines information about the document
<meta>	Defines metadata about an HTML document
<base>	Specifies the base URL/target for all relative URLs in a document
<basefont>	Not supported in HTML5. Deprecated in HTML 4.01. Specifies a default color, size, and font for all text in a document
Programming
<script>	Defines a client-side script
<noscript>	Defines an alternate content for users that do not support client-side scripts
<applet>	Not supported in HTML5. Deprecated in HTML 4.01. Defines an embedded applet
<embed>	Defines a container for an external (non-HTML) application
<object>	Defines an embedded object
<param>	Defines a parameter for an object

 nb: tabel di atas di dapat dari sumber diluar koding123

Sekian dan Terimakasih

Belajar Pemrograman Web: Struktur Dasar pada HTML

Dalam membuat suatu halaman Web khususnya menggunakan bahasa HTML, kita tidak boleh serta merta membuatnya, karena setiap bahasa Pemrograman web mempunyai aturan tersendiri dalam pembuatannya.
Contohnya bahasa pemrograman Web yang bernama HTML, dalam pembuatanya HTML mempunyai aturan sendiri.

Seperti Apa aturan yang ada pada HTML
Misalkan dalam pencantuman nama Element dalam HTML, Element pada html dapat di tuliskan seperti gambar di bawah ini.

<element name> "Conten" </element name>

Pada gambar di atas dapat di jelaskan bahwa suatu element pada HTML terdiri dari konten dan markup, Markup merupakan suatu Tag yang mengandung konten, akan tetapi tidak semua tag dapat mengandung konten.

Pada bahasa HTML penggunaan huruf besar (kapital) maupun huruf kecil pada nama element tidak dipermasalahkan, Huruf kecil maupun huruf besar dianggap sama oleh browser. Jadi kita tidak usah khawatir salah menulis dengan mengunakan huruf besar ataupun huruf kecil.

Struktur Dasar Pada HTML

Berikut merupakan aturan atau struktur dalam Bahasa Pemrograman berbasis web HTML yang harus kita taati, agar Halaman Web yang kita akan buat dapat dikatan terstruktur dan baik.Perhatikan Struktur HTML dibawah ini.

<!DOCTYPE html> (menunjukan bahwa dokument tersebut adalah 
                              dokumen HTML)

  <html> ( biasa disebut dengan element ROOT karena berisi semua 
                element  HTML dan tidak terkait dengan element yang lain)

   <head> ( dalam element head berisi tentang informasi deskriptif dalam
                  dokument, seperti style, acript, dan lain sebagainya)

   <meta charset="utf-8">  (dalam element meta berisi tentang berbagai
                                     informasi dokumen html/ menunjukan formating
                                     karakter dalam dokumen HTML tersebut")

   <title>Tuliskan Title yang diinginkan</title> ( element title merupakan
                                                                          element wajib yang harus
                                                                          ada dalam element head,      
                                                                          element title sebaiknya 
                                                                          berisi informasi deskriptif)

  </head> (element penutup untuk head, ditandai dengan garis miring (/) )

  <body> ( berisi tentang apa yang ingin kalian tampilkan pada halaman 
             html kalian, bisa juga ddi sebbut dengan bagian ISI sebuah halaman)
             Page Content Koding123( contoh isi dari element body)

  </body> (element penutup dari element body, ditandai dengan garis miring (/) )

</html> (element penutup dari element html/ROOT)

Dan untuk Penggunaan atau Penerapan dari Struktur Dasar HTML di atas dapat dilihat pada artikel

Cara Mudah Membuat HTML dengan Struktur Data (terstruktur)

Belajar Pemrograman Web: Pengertian dan Definisi dari HTML

Bahasa pemrograman berbasis Web, kian lama semakin diminati oleh para programmer. Terbukti bahasa pemrograman web dapat lebih menguntungkan karena dengan bahasa pemrograman Web, kita dapat menciptakan Website milik kita sendiri dan tentu saja yang dibuat oleh kita sendiri tanpa terkecuali Website E-Comerce seperti Toko Online, Website E-Library seperti Perpustakaan Online, Website Game, dan juga Website Sosial Media semacam Facebook, Twitter dan lain sebagainya. Untuk membuat suatu Halaman Web atau Website, Sebenarnya Cukup Mudah kita hanya perlu memahami dan mempelajari Bahasa pemrograman berbasis Web saja.
Sekarang ini terdapat bahasa pemrograman berbasis Web yang bervariasi, namun untuk sekarang kita akan belajar HTML terlebih dahulu

Mengapa html ?

Selain kemudahan dan kesimpelan yang disajikan oleh bahasa pemrograman tersebut, HTML juga termasuk sebagai bahasa dasar yang mudah dipelajari dan diterapkan untuk pembuatan Web, bahkan 90% dari website yang ada di Internet dibuat dengan bahasa HTML, nah yang perlu kita ketahui sekarang, Apakah yang di maksud dengan HTML ?

Pengenalan Bahasa Berbasis Web HTML

 

HTML Tersusun dari 4 (Empat) Kata yaitu, HyperText, Markup, Language, yang artinya:

HyperText    : Sebuah Text yang apabila kita klik akan membawa kita pergi
                          menuju satu halaman ke halaman yang lainya, atau bisa juga
                          kita sebut dengan LINK

Markup         : Tag atau semacam code yang mengatur suatu Layout dan
                         visual atau tampilan pada suatu halaman web.

Language    : merupakan penanda bahawa HTML adalah suatu bahasa atau
                         script pemrograman.

Dengan Beberapa Definisi di atas dapat diambil kesimpulan bahwa HTML adalah bahasa atau script pemrograman yang mengatur Penyajian Informasi di dunia internet. Dan bagaimana informasi itu membawa kita melangkah dari suatu halaman ke halaman lainnya.