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>
<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>
……..
<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>
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 | | 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> | Name: (Tip) Email: | ||||||||||||
<h1> <h2> <h3> <h4> <h5> <h6> | 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 | }_ | Contents of your web page (Tip) Contents of your web page | ||||||||||||
<hr> | horizontal rule | <hr width=”50%” size=”3″ /> | Contents of your web page Contents of your web page | ||||||||||||
<hr> | horizontal rule | <hr width=”50%” size=”3″ noshade /> | Contents of your web page Contents of your web page | ||||||||||||
<hr> (Internet Explorer) | horizontal rule | | Contents of your web page Contents of your web page | ||||||||||||
<hr> (Internet Explorer) | horizontal rule | | Contents of your web page 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: <form method=post action=”/cgi-bin/example.cgi”> <input type=”text” size=”10″ maxlength=”30″> <input type=”Submit” value=”Submit”> </form> | Example 1: (Tip) | ||||||||||||
<input> (Internet Explorer) | input field | Example 2: <form method=post action=”/cgi-bin/example.cgi”> <input type=”text” style=”color: #ffffff; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72a4d2;” size=”10″ maxlength=”30″> <input type=”Submit” value=”Submit”> </form> | Example 2: (Tip) | ||||||||||||
<input> | input field | Example 3: <form method=post action=”/cgi-bin/example.cgi”> <table border=”0″ cellspacing=”0″ cellpadding=”2″><tr><td bgcolor=”#8463ff”><input type=”text” size=”10″ maxlength=”30″></td><td bgcolor=”#8463ff” valign=”Middle”> <input type=”image” name=”submit” src=”yourimage.gif”></td></tr> </table> </form> | Example 3: (Tip) | ||||||||||||
<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> | Example 4: (Tip) | ||||||||||||
<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> | Example 5: Tip) Select an option: option 1 option 2 option 3 option 4 option 5 option 6 | ||||||||||||
<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> | Example 6: (Tip) Select an option: Option 1 Option 2 Option 3 Select an option: Selection 1 Selection 2 Selection 3 | ||||||||||||
<li> | list item | Example 1: <menu> <li type=”disc”>List item 1</li> <li type=”circle”>List item 2</li> <li type=”square”>List item 3</li> </MENU> Example 2: <ol type=”i”> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> | Example 1: (Tip)
Example 2:
| ||||||||||||
<link> | link | <head> <link rel=”stylesheet” type=”text/css” href=”style.css” /> </head> | |||||||||||||
<marquee> (Internet Explorer) | scrolling text | | 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> |
| ||||||||||||
<meta> | meta | <meta name=”Description” content=”Description of your site”> <meta name=”keywords” content=”keywords describing your site”> | Nothing will show (Tip) | ||||||||||||
<meta> | meta | | Nothing will show (Tip) | ||||||||||||
<meta> | meta | <meta http-equiv=”Pragma” content=”no-cache”> | Nothing will show (Tip) | ||||||||||||
<meta> | meta | <meta name=”rating” content=”General”> | Nothing will show (Tip) | ||||||||||||
<meta> | meta | <meta name=”robots” content=”all”> | Nothing will show (Tip) | ||||||||||||
<meta> | meta | <meta name=”robots” content=”noindex,follow”> | Nothing will show (Tip) | ||||||||||||
<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
Numbered Special Start
Lowercase Letters
Capital Letters
Capital Letters Special Start
Lowercase Roman Numerals
Capital Roman Numerals
Capital Roman Numerals Special Start
| ||||||||||||
<option> | 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> | Select an option: (Tip) option 1 option 2 option 3 option 4 option 5 option 6 | ||||||||||||
<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> | | ||||||||||||
<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: | Example 1: (Tip)
Example 2: (Tip)
Example 3: (Tip)
| ||||||||||||
<td> | table data | <table border=”2″ cellpadding=”2″ cellspacing=”2″ width=”100%”> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> |
| ||||||||||||
<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> |
| ||||||||||||
<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> |
| ||||||||||||
<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> | Example 1:
Example 2:
|
Contoh:
<html>
<head>
<h1><font face="Times New Roman"size="19"color="red"><center><blink>wanita</h1></font></blink>
<marquee><font face="times New Roman"size="9"color="red"><i>wanita ingin selalu dimengerti</i></marquee></font>
<title>wanita</title>
</head>
<hr witdh="78%"color="red"/>
<body>
<br>
<br>
<br>
<br>
<font color="red"size="11">ciri-ciri wanita:</font>
<br>
<ol type="1"><dl>
<dd><li>berambut panjang.</dd></li>
<dd><li>memiliki buah dada</dd></li>
<dd><li>cantik</dd></li>
<dd><li>penyanyang</dd></li>
<dl>
</ol>
<br>
<a href="http://www.sumaye.co.cc"><img src="D:\FOTO\adik gua\4y8H_1.gif"width="12"height="12"/>
</a>
</body>
</html>
0 komentar:
Posting Komentar
thank you