Apa itu HTML?
HTML atau HyperText Markup Language adalah bahasa markup yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser). HTML menggambarkan struktur halaman Web menggunakan markup elemen HTML adalah blok bangunan dari halaman HTML.
Untuk membuat tabel di HTML, kita membutuhkan setidaknya 3 tag, yaitu tag <table>, tag <tr>, dan tag <td>:
- Tag <table> digunakan untuk memulai tabel
- Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
- Tag <td> adalah singkatan dari table data, digunakan untuk input data ke tabel.
HTML List Tags
| Tag | Keterangan |
| <ul> | Defines an unordered list |
| <ol> | Defines an ordered list |
| <li> | Defines a list item |
| <dl> | Defines a description list |
| <dt> | Defines a term in a description list |
| <dd> | Describes the term in a description list |
| Type | Description |
| type=”1″ | The list items will be numbered with numbers (default) |
| type=”A” | The list items will be numbered with uppercase letters |
| type=”a” | The list items will be numbered with lowercase letters |
| type=”I” | The list items will be numbered with uppercase roman numbers |
| type=”i” | The list items will be numbered with lowercase roman numbers |
|
Value |
Description |
|
disc |
Sets the list item marker to a bullet (default) |
|
circle |
Sets the list item marker to a circle |
|
square |
Sets the list item marker to a square |
|
none |
The list items will not be marked |
Mengenal tag <input>
Tag input merupakan tag paling banyak digunakan di dalam form dan memiliki banyak bentuk, mulai dari isian text biasa, text password, checkbox, radio, sampai dengan tombol submit, semuanya dalam bentuk tag <input>.
Bentuk-bentuk dari keluarga tag input ini dibedakan berdasarkan atribut type:
- <input type=”text” /> atau bisa juga <input /> adalah textbox inputan biasa yang menerima input berupa text, contohnya digunakan untuk inputan nama, username, dan inputan yang berupa text pendek. Input type text ini juga bisa memiliki atribut value yang bisa diisi nilai tampilan awal dari text
- <input type=”password” /> dalam tampilannya sama dengan type text, namun teks yang diinput tidak akan terlihat, akan berupa bintang atau bulatan. Biasanya hanya digunakan untuk inputan yang sensitif seperti password.
- <input type=”checkbox” /> adalah inputan berupa checkbox yang dapat diceklist atau di centang oleh user. User dapat memilih atau tidak memilih checkbox ini. Type checkbox memiliki atribut checked yang jika ditulis atau diisi dengan nilai checked, akan membuat chexkbox langsung terpilih pada saat pertama kali halaman ditampilkan. Contoh inputan checkbox berupa hobi, yang oleh user dapat dipilih beberapa hobi.
- <input type=”radio” /> mirip dengan checkbox, namun user hanya bisa memilih satu diantara pilihan group radio. Type radio ini berada dalam suatu grup dan user hanya bisa memilih salah satunya. Contoh inputan type radio adalah jenis kelamin.
- <input type=”submit” /> akan menampilkan tombol untuk memproses form. Biasanya diletakkan pada baris terakhir dari form. Atribut value jika diisi akan membuat text tombol submit berubah sesuai inputan nilai value.
Basic HTML
|
Tag |
Description |
|
Defines the document type |
|
|
Defines an HTML document |
|
|
Defines information about the document |
|
|
Defines a title for the document |
|
|
Defines the document’s body |
|
|
Defines HTML headings |
|
|
Defines a paragraph |
|
|
Inserts a single line break |
|
|
Defines a thematic change in the content |
|
|
Defines a comment |
Formatting
|
Tag |
Description |
|
Not supported in HTML5. Use <abbr> instead. |
|
|
Defines an abbreviation or an acronym |
|
|
Defines contact information for the author/owner of a document/article |
|
|
Defines bold text |
|
|
Isolates a part of text that might be formatted in a different direction from other text outside it |
|
|
Overrides the current text direction |
|
|
Not supported in HTML5. Use CSS instead. |
|
|
Defines a section that is quoted from another source |
|
|
Not supported in HTML5. Use CSS instead. |
|
|
Defines the title of a work |
|
|
Defines a piece of computer code |
|
|
Defines text that has been deleted from a document |
|
|
Represents the defining instance of a term |
|
|
Defines emphasized text |
|
|
Not supported in HTML5. Use CSS instead. |
|
|
Defines a part of text in an alternate voice or mood |
|
|
Defines a text that has been inserted into a document |
|
|
Defines keyboard input |
|
|
Defines marked/highlighted text |
|
|
Defines a scalar measurement within a known range (a gauge) |
|
|
Defines preformatted text |
|
|
Represents the progress of a task |
|
|
Defines a short quotation |
|
|
Defines what to show in browsers that do not support ruby annotations |
|
|
Defines an explanation/pronunciation of characters (for East Asian typography) |
|
|
Defines a ruby annotation (for East Asian typography) |
|
|
Defines text that is no longer correct |
|
|
Defines sample output from a computer program |
|
|
Defines smaller text |
|
|
Not supported in HTML5. Use <del> or <s> instead. |
|
|
Defines important text |
|
|
Defines subscripted text |
|
|
Defines superscripted text |
|
|
Defines a date/time |
|
|
Not supported in HTML5. Use CSS instead. |
|
|
Defines text that should be stylistically different from normal text |
|
|
Defines a variable |
|
|
Defines a possible line-break |
Forms and Input
|
Tag |
Description |
|
Defines an HTML form for user input |
|
|
Defines an input control |
|
|
Defines a multiline input control (text area) |
|
|
Defines a clickable button |
|
|
Defines a drop-down list |
|
|
Defines a group of related options in a drop-down list |
|
|
Defines an option in a drop-down list |
|
|
Defines a label for an <input> element |
|
|
Groups related elements in a form |
|
|
Defines a caption for a <fieldset> element |
|
|
Specifies a list of pre-defined options for input controls |
|
|
Defines the result of a calculation |
Frames
|
Tag |
Description |
|
Not supported in HTML5. |
|
|
Not supported in HTML5. |
|
|
Not supported in HTML5. |
|
|
Defines an inline frame |
Images
|
Tag |
Description |
|
Defines an image |
|
|
Defines a client-side image-map |
|
|
Defines an area inside an image-map |
|
|
Used to draw graphics, on the fly, via scripting (usually JavaScript) |
|
|
Defines a caption for a <figure> element |
|
|
Specifies self-contained content |
|
|
Defines a container for multiple image resources |
Audio / Video
|
Tag |
Description |
|
Defines sound content |
|
|
Defines multiple media resources for media elements (<video>, <audio> and <picture>) |
|
|
Defines text tracks for media elements (<video> and <audio>) |
|
|
Defines a video or movie |
Links
|
Tag |
Description |
|
Defines a hyperlink |
|
|
Defines the relationship between a document and an external resource (most used to link to style sheets) |
|
|
Defines navigation links |
Lists
|
Tag |
Description |
|
Defines an unordered list |
|
|
Defines an ordered list |
|
|
Defines a list item |
|
|
Not supported in HTML5. Use <ul> instead. |
|
|
Defines a description list |
|
|
Defines a term/name in a description list |
|
|
Defines a description of a term/name in a description list |
|
|
Defines a list/menu of commands |
|
|
Defines a command/menu item that the user can invoke from a popup menu |
Tables
|
Tag |
Description |
|
Defines a table |
|
|
Defines a table caption |
|
|
Defines a header cell in a table |
|
|
Defines a row in a table |
|
|
Defines a cell in a table |
|
|
Groups the header content in a table |
|
|
Groups the body content in a table |
|
|
Groups the footer content in a table |
|
|
Specifies column properties for each column within a <colgroup> element |
|
|
Specifies a group of one or more columns in a table for formatting |
Styles and Semantics
|
Tag |
Description |
|
Defines style information for a document |
|
|
Defines a section in a document |
|
|
Defines a section in a document |
|
|
Defines a header for a document or section |
|
|
Defines a footer for a document or section |
|
|
Specifies the main content of a document |
|
|
Defines a section in a document |
|
|
Defines an article |
|
|
Defines content aside from the page content |
|
|
Defines additional details that the user can view or hide |
|
|
Defines a dialog box or window |
|
|
Defines a visible heading for a <details> element |
|
|
Links the given content with a machine-readable translation |
Meta Info
|
Tag |
Description |
|
Defines information about the document |
|
|
Defines metadata about an HTML document |
|
|
Specifies the base URL/target for all relative URLs in a document |
|
|
Not supported in HTML5. Use CSS instead. |
Programming
|
Tag |
Description |
|
Defines a client-side script |
|
|
Defines an alternate content for users that do not support client-side scripts |
|
|
Not supported in HTML5. Use or <object> instead. |
|
|
|
Defines a container for an external (non-HTML) application |
|
Defines an embedded object |
|
|
Defines a parameter for an object |
Baca Bagus 