Contoh Sintaks HTML

Jika Anda melakukan bisnis di Internet, meluangkan waktu untuk belajar bagaimana merancang situs web Anda sendiri dan menulis sendiri kode HTML (hypertext markup language) akan memainkan peran utama dalam keberhasilan Anda. Tidak hanya akan belajar HTML coding menyediakan dengan kebebasan untuk memperbarui dokumen HTML Anda sendiri, tetapi juga akan menghemat banyak uang, karena anda akan dapat menghindari menyewa seorang desainer web profesional.

Jika Anda mencari beberapa tag HTML untuk membumbui situs web Anda, Anda telah datang ke tempat yang tepat. Anda akan menemukan berbagai kode HTML dan tips untuk membantu Anda di bawah ini.

Namun, sebelum meninjau tag HTML, jika Anda baru ke HTML dan desain situs web, bagian berikut ini akan membantu Anda dalam menciptakan sebuah halaman web HTML. Untuk informasi tambahan desain situs web, pastikan Anda tidak melewatkan desain web artikel dan tutorial di bagian bawah halaman ini.

Membuat Halaman HTML

Sebuah halaman web dibuat menggunakan bahasa disebut, Hypertext Markup Language, lebih dikenal sebagai HTML Code. Anda dapat menulis sendiri coding dalam editor teks biasa, seperti Catatan Pad, atau menggunakan editor HTML, yang akan menulis kode untuk Anda.

Kode HTML, juga disebut sebagai tag HTML, diapit oleh kurang dari (<) dan lebih besar dari (>) kurung dan dapat ditulis dalam huruf kecil atau modal.

Braket pembukaan diikuti oleh unsur, yang merupakan perintah browser, dan berakhir dengan kurung penutup.

< font size=2>

Sebuah elemen bisa juga diikuti dengan atribut, yang merupakan kata-kata yang menggambarkan sifat-sifat elemen, dan selanjutnya menginstruksikan browser.

Atribut hanya terkandung dalam HTML tag pembuka di sebelah kanan dari elemen dan dipisahkan oleh spasi dan diikuti oleh (=) tanda yang sama.

Nilai mengikuti tanda sama dengan dan tertutup dalam tanda kutip.

Dasar Kode HTML Struktur Dokumen

Mulailah menulis tag HTML Anda dengan membuat tata letak dasar itu dokumen Anda. Salin dan sisipkan kode ini ke dalam teks atau editor HTML.

<html>
<head>
<title> Page Anda Judul </ title>
</head>
<body>

Daerah ini akan berisi segala sesuatu yang akan terlihat melalui browser web, seperti teks dan grafis. Semua informasi akan diberi kode HTML.

Untuk daftar lengkap kode-kode HTML, tag dan contoh-contoh, lihat tabel HTML di bawah.

</body>
</html>

……..

<html> – Dimulai dokumen HTML Anda.

<head> – Berisi informasi tentang halaman seperti TITLE, META tag untuk tepat pengindeksan Search Engine, tag STYLE, yang menentukan tata letak halaman, dan JavaScript coding untuk efek khusus.

<title> – The TITLE halaman. This will be visible in the title bar of the viewers’ browser. Hal ini akan terlihat di bar judul pemirsa ‘browser.

<title> – Menutup <title> tag HTML

</head> – Menutup <head> tag HTML

<body> – Ini adalah di mana Anda akan mulai menulis dokumen Anda dan menempatkan kode HTML Anda

</body> – Menutup <body> tag HTML

</html> – Menutup tag <html>

Bagaimana Copy dan Paste HTML Tags / Codes

Untuk menyalin dan menyisipkan tag-tag HTML / kode dari tabel HTML di bawah ke dalam HTML halaman web Anda, tempatkan pointer mouse anda ke atas awal kode HTML yang ingin Anda salin. Selanjutnya, klik dan tahan tombol mouse sebelah kiri dan tarik mouse anda ke atas semua kode HTML yang Anda ingin menyalin (Contoh teks yang disorot). Kode HTML anda sekarang harus disorot. Go to “Edit” – “Copy” pada web browser’s toolbar anda dan kemudian letakkan kursor anda dalam kode HTML Anda di mana Anda ingin menempatkan kode. Klik kanan pada mouse anda dan klik “Paste”. Kode HTML Anda sekarang harus menampilkan dalam dokumen HTML Anda.

Untuk menggunakan salah satu tag HTML berikut, cukup pilih kode HTML yang ingin Anda dan salin dan sertakan dalam halaman web Anda.

Tag HTML Bagan

Tag Name Code Example Browser View

<!– comment <!–This can be viewed in the HTML part of a document–> Nothing will show (Tip)

<a - anchor <a href=“http://www.domain.com/“>
Visit Our Site</a> Visit Our Site (Tip)

<b> bold <b>Example</b> Example

<big> big (text) <big>Example</big> Example (Tip)

<body> body of HTML document <body>The content of your HTML page</body> Contents of your web page (Tip)

<br> line break The contents of your page<br>The contents of your page The contents of your web page
The contents of your web page

<center> center <center>This will center your contents</center> This will center your contents

<dd>

definition description

<dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>

Definition Term: Definition of the term
Definition Term: Definition of the term

<dl>

definition list

<dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>

Definition Term: Definition of the term
Definition Term: Definition of the term

<dt>

definition term

<dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>

Definition Term: Definition of the term
Definition Term: Definition of the term

<em> emphasis This is an <em>Example</em> of using the emphasis tag This is an Example of using the emphasis tag

embed object src=”yourfile.mid” width=”100%” height=”60″ align=”center”> (Tip)

embed object <embed src=”yourfile.mid” autostart=”true” hidden=”false” loop=”false”>
<noembed><bgsound src=”yourfile.mid” loop=”1″></noembed> <bgsound src=”wonderfu.mid” autostart=”false” loop=”1″ />
Music will begin playing when your page is loaded and will only play one time. A control panel will be displayed to enable your visitors to stop the music.

<font> font <font face=”Times New Roman”>Example</font> Example (Tip)

<font> font <font face=”Times New Roman” size=”4″>Example</font> Example (Tip)

<font> font <font face=”Times New Roman” size=”+3″ color=”#ff0000″>Example</font> Example (Tip)

<form>

form

<form action=”mailto:you@yourdomain.com“>
Name: <input name=”Name” value=”” size=”10″><br>
Email: <input name=”Email” value=”” size=”10″><br>
<center><input type=”submit”></center>
</form>

heading 1
heading 2
heading 3
heading 4
heading 5
heading 6

<h1>Heading 1 Example</h1>
<h2>Heading 2 Example</h2>
<h3>Heading 3 Example</h3>
<h4>Heading 4 Example</h4>
<h5>Heading 5 Example</h5>
<h6>Heading 6 Example</h6>

<head> heading of HTML document <head>Contains elements describing the document</head> Nothing will show

<hr>

horizontal rule

<hr />

Contents of your web page (Tip)

Contents of your web page

<hr>

horizontal rule

<hr width=”50%” size=”3″ />

Contents of your web page

<hr>

horizontal rule

<hr width=”50%” size=”3″ noshade />

Contents of your web page

<hr>
(Internet
Explorer)

horizontal rule

<hr width=”75%” color=”#ff0000” size=”4″ />

Contents of your web page

<hr>
(Internet
Explorer)

horizontal rule

<hr width=”25%” color=”#6699ff” size=”6″ />

Contents of your web page

<html> hypertext markup language <html><head>
<meta>
<title>Title of your web page</title>
</head>
<body>HTML web page contents
</body>
</html> Contents of your web page

<i> italic <i>Example</i> Example

<img> image <img src=”Earth.gif” width=”41″ height=”41″ border=”0″ alt=”text describing the image” /> (Tip)

<input>

input field

Example 1:

<input>
(Internet Explorer)

input field

Example 2:

<input>

input field

Example 3:

<input>

input field

Example 4:

<form method=post action=”/cgi-bin/example.cgi”>
Enter Your Comments:<br>
<textarea wrap=”virtual” name=”Comments” rows=3 cols=20 maxlength=100></textarea><br>
<input type=”Submit” value=”Submit”>
<input type=”Reset” value=”Clear”>
</form>

<input>

input field

Example 5:

<form method=post action=”/cgi-bin/example.cgi”>
<center>
Select an option:
<select>
<option >option 1</option>
<option selected>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
<input type=”Submit” value=”Submit”></center>
</form>

<input>

input field

Example 6:

<form method=post action=”/cgi-bin/example.cgi”>
Select an option:<br>
<input type=”radio” name=”option”> Option 1
<input type=”radio” name=”option” checked> Option 2
<input type=”radio” name=”option”> Option 3
<br>
<br>
Select an option:<br>
<input type=”checkbox” name=”selection”> Selection 1
<input type=”checkbox” name=”selection” checked>Selection 2
<input type=”checkbox” name=”selection”>Selection 3
<input type=”Submit” value=”Submit”>
</form>

<li>

list item

Example 1:

Example 2:

Example 1: (Tip)

List item 1
List item 2
List item 3

Example 2:

List item 1
List item 2
List item 3
List item 4

<marquee>
(Internet
Explorer) scrolling text <marquee bgcolor=”#cccccc” loop=”-1″ scrollamount=”2″ width=”100%”>Example Marquee</marquee> Example Marquee (Tip)

<menu>

menu

<menu>
<li type=”disc”>List item 1</li>
<li type=”circle”>List item 2</li>
<li type=”square”>List item 3</li>
</menu>

List item 1
List item 2
List item 3

<ol>

ordered list

Numbered

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Numbered Special Start

<ol start=”5″>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Lowercase Letters<ol type=”a”>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Capital Letters

<ol type=”A”>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Capital Letters Special Start

<ol type=”A” start=”3″>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Lowercase Roman Numerals

<ol type=”i”>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Capital Roman Numerals

<ol type=”I”>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Capital Roman Numerals Special Start

<ol type=”I” start=”7″>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Numbered

List item 1
List item 2
List item 3
List item 4

Numbered Special Start

List item 1
List item 2
List item 3
List item 4

Lowercase Letters

List item 1
List item 2
List item 3
List item 4

Capital Letters

List item 1
List item 2
List item 3
List item 4

Capital Letters Special Start

List item 1
List item 2
List item 3
List item 4

Lowercase Roman Numerals

List item 1
List item 2
List item 3
List item 4

Capital Roman Numerals

List item 1
List item 2
List item 3
List item 4

Capital Roman Numerals Special Start

List item 1
List item 2
List item 3
List item 4

listbox option

<form method=post action=”/cgi-bin/example.cgi”>
<center>
Select an option:
<select>
<option>option 1</option>
<option selected>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
</center>
</form>

<p>

paragraph

This is an example displaying the use of the paragraph tag. <p> This will create a line break and a space between lines.

Attributes:

Example 1:<br>
<br>
<p align=”left”>
This is an example<br>
displaying the use<br>
of the paragraph tag.<br>
<br>
Example 2:<br>
<br>
<p align=”right”>
This is an example<br>
displaying the use<br>
of the paragraph tag.<br>
<br>
Example 3:<br>
<br>
<p align=”center”>
This is an example<br>
displaying the use<br>
of the paragraph tag.

This is an example displaying the use of the paragraph tag.

This will create a line break and a space between lines.

Attributes:

Example 1:

This is an example
displaying the use
of the paragraph tag.

Example 2:

This is an example
displaying the use
of the paragraph tag.

Example 3:

This is an example
displaying the use
of the paragraph tag.

<small> small (text) <small>Example</small> Example (Tip)

<strike> deleted text <strike>Example</strike> Example

<strong> strong emphasis <strong>Example</strong> Example

<table>

table

Example 1:

<table border=“4” cellpadding=”2″ cellspacing=”2″ width=”100%”>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Example 2: (Internet Explorer)

<table border=“2” bordercolor=”#336699” cellpadding=”2″ cellspacing=”2″ width=”100%”>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Example 3:

<table cellpadding=“2” cellspacing=”2″ width=”100%”>
<tr>
<td bgcolor=”#cccccc“>Column 1</td>
<td bgcolor=”#cccccc“>Column 2</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</table>

Example 1: (Tip)

Column 1

Column 2

Example 2: (Tip)

Column 1

Column 2

Example 3: (Tip)

Column 1	Column 2
Row 2	Row 2

<td>

table data

<table border=”2″ cellpadding=”2″ cellspacing=”2″ width=”100%”>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Column 1

Column 2

<th>

table header

<div align=”center”>
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
</table>
</div>

Column 1	Column 2	Column 3
Row 2	Row 2	Row 2
Row 3	Row 3	Row 3
Row 4	Row 4	Row 4

<title> document title <title>Title of your HTML page</title> Title of your web page will be viewable in the title bar. (Tip)

<tr>

table row

<table border=”2″ cellpadding=”2″ cellspacing=”2″ width=”100%”>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Column 1

Column 2

<tt> teletype <tt>Example</tt> Example

<u> underline <u>Example</u> Example

<ul> unordered list Example 1:<br>
<br>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<br>
Example 2:<br>
<ul type=”disc”>
<li>List item 1</li>
<li>List item 2</li>
<ul type=”circle”>
<li>List item 3</li>
<li>List item 4</li>
</ul>
</ul>

Contoh Sintaks HTML

Bagaimana Copy dan Paste HTML Tags / Codes

0 comments:

Post a Comment

Contoh Sintaks HTML

Bagaimana Copy dan Paste HTML Tags / Codes

Next

Newer Post

Previous

Older Post

0 comments:

Post a Comment