HTML adalah singkatan dari HyperText Markup Language, html juga biasa disebut
bahasa markup yang terdiri dari tag tertentu untuk membangun sebuah struktur
website.
Halaman web pertama dirilis pada tahun 1990 dan halaman hanya digunakan untuk
presentasi. Hari ini web adalah bagian yang sangat penting dalam kehidupan
kita sehari-hari.
Anda dapat menggunakan banyak browser web yang berbeda untuk melihat halaman
web, seperti: Google Chrome, Opera, Internet Explorer dan Firefox.
Struktur halaman HTML
Sebelum mempelajari tag yang ada di dalam html, kita harus paham juga
struktur dasar yang ada didalamnya, perhaatikan contoh dibawah.
<html>
<head>
<title>Page title</title>
</head>
<body>
</body>
</html>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Seluruh file HTML diawali dengan tag <!DOCTYPE html>.
seluruh file html di bungkus menggunakan tag
<html></html>.
file yang akan muccul pada tampilan berowser hanya yang berada di dalam
tag <body></body> .
Tag HTML
Tag HTML adalah nama elemen yang dikelilingi oleh tanda kurung sudut.
Tag HTML biasanya berpasangan seperti dan<table></table> .
Ingatlah untuk menggunakan garis miring ke depan saat Anda menulis tag
akhir.
Atribut HTML
Atribut HTML digunakan untuk memodifikasi nilai elemen HTML. Elemen akan
sering memiliki beberapa atribut.
Kalian dapat menggunakan elemen HTML untuk memilih, maka Anda dapat
membaca atau memanipulasi elemen dengan CSS dan JavaScript.
<div id="setting">HTML konten </div>Id harus unik dalam dokumen HTML.
Mulai..
Cukup basa-basinya pada seksi ini kita akan mulai menuliskan kode HTML kita,
namu sebelum itu ada beberapa hal yang harus kita persiapkan terlebih
dahulu.
Text editor
Untuk meengetik pasti di perlukan sebuah software untuk menampung hasil dari
input kita, banyak sekali text editor yang dapat kalian gunakan untuk
menulis sebuah kode program contoh yg terkenal adalah
Sublime, VsCode, Atom, Notepad++ , kalian bisa menggunakan text editor tersebut tapi pada tutorial kali ini
saya akan menggunakan Aplikasi notepad bawaan dari windws.
Web browser
Web browser berfungsi untuk menampilkan file HTML yang telah kita buat di
file .html, ada banyak sekali web browser yang beredar kalian bisa
menggunakan Chrome, Firefox, Opera silahkan pakai apa
saja sesuai selera ๐คฉ.
Menulis HTML
Tuliskan atau copy code di bawah :
<!DOCTYPE html>
<html>
<body>
<h1>Hallo dunia</h1>
</body>
</html>
Pastekan di dalam text editor kalian, kenudian save dengan format
.html (contoh: hallo.html).
Melihat hasil HTML menggunakan web browser.
Klik kanan pada file yang telah kalian simpan kemudian klik
Open with>Pilih web browser kalian.
Jika sudah dipilih maka akan terbuka web browser dan mucul tampilan seperti
berikut:
Daftar tag HTML
Dibawah ini adalah table tag HTML yang dapat kalian gunakan untuk membuat
file html, silahkan kalian coba sendiri.
Tag html dasar
| Tag | Description |
|---|---|
| <!DOCTYPE> | Defines the document type |
| <html> | Defines an HTML document |
| <head> | Contains metadata/information for the 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 |
Tag form dan input
| Tag | Description |
|---|---|
| <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> element |
| <datalist> | Specifies a list of pre-defined options for input controls |
| <output> | Defines the result of a calculation |
Tag formatting
| Tag | Description |
|---|---|
| <acronym> |
Not supported in HTML5. Use <abbr> instead. Defines an acronym |
| <abbr> | Defines an abbreviation or an acronym |
| <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. Use CSS instead. Defines big text |
| <blockquote> | Defines a section that is quoted from another source |
| <center> |
Not supported in HTML5. Use CSS instead. 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> | Specifies a term that is going to be defined within the content |
| <em> | Defines emphasized text |
| <font> |
Not supported in HTML5. Use CSS instead. 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. Use <del> or <s> instead. Defines strikethrough text |
| <strong> | Defines important text |
| <sub> | Defines subscripted text |
| <sup> | Defines superscripted text |
| <template> | Defines a container for content that should be hidden when the page loads |
| <time> | Defines a specific time (or datetime) |
| <tt> |
Not supported in HTML5. Use CSS instead. Defines teletype text |
| <u> | Defines some text that is unarticulated and styled differently from normal text |
| <var> | Defines a variable |
| <wbr> | Defines a possible line-break |
Tag Gambar
| Tag | Description |
|---|---|
| <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 |
| <picture> | Defines a container for multiple image resources |
| <svg> | Defines a container for SVG graphics |
Tag link
| Tag | Description |
|---|---|
| <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 |
Tag Video/Audio
| Tag | Description |
|---|---|
| <audio> | Defines sound content |
| <source> | Defines multiple media resources for media elements (<video>, <audio> and <picture>) |
| <track> | Defines text tracks for media elements (<video> and <audio>) |
| <video> | Defines a video or movie |
Tag list
| Tag | Description |
|---|---|
| <ul> | Defines an unordered list |
| <ol> | Defines an ordered list |
| <li> | Defines a list item |
| <dir> |
Not supported in HTML5. Use <ul> instead. Defines a directory list |
| <dl> | Defines a description list |
| <dt> | Defines a term/name in a description list |
| <dd> | Defines a description of a term/name in a description list |
Tag table
| Tag | Description |
|---|---|
| <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 dan semantic
| Tag | Description |
|---|---|
| <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 |
| <main> | Specifies the main content of a document |
| <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 |
| <data> | Adds a machine-readable translation of a given content |
Meta info
| Tag | Description |
|---|---|
| <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. Use CSS instead. Specifies a default color, size, and font for all text in a document |
Program
| Tag | Description |
|---|---|
| <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. Use <embed> or <object>
instead. 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 |