Lihat penawaran kami. Get now!!

Belajar HTML dasar

HTML adalah singkatan dari HyperText Markup Language, html juga biasa disebut bahasa markup yang terdiri dari tag untuk membangun sebuah struktur web
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>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
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.
<div id="setting">HTML konten </div>
Atribut HTML mendefinisikan id unik untuk elemen HTML. 
Id harus unik dalam dokumen HTML. 

 Kalian dapat menggunakan elemen HTML untuk memilih, maka Anda dapat membaca atau memanipulasi elemen dengan CSS dan JavaScript.

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 SublimeVsCodeAtomNotepad++ , 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

Sekian dulu artikel kali ini semoga bermanfaat, terimakasih 🧠😻
Baca juga :
Mau donasi lewat mana? Paypal Trakteer
BRI - Kevin Alfito (4152 0103 0882 532)
JAGO - Kevin Alfito (1023 6984 8254)
LineBank - Kevin Alfito (12324728800)
Traktir creator minum kopi dengan cara memberi sedikit donasi. klik icon panah di atas
Student, Blogger

Posting Komentar

Komentar blog
© 2021 - Kevin Tekno. All rights reserved. Distributed by Infinity Blogger