Format badan HTML:
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>
Hasilnya:
This is a Heading
This is a paragraph.
Sama seperti di Word, heading di HTML dapat dilakukan, letakkan diantara <body> dan </body>
<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>
Hasilnya:
This is a heading
This is a heading
This is a heading
Pengaturan Paragraph
Formatnya:
<p title="Rata kiri kanan|kiri|kanan|tengah" align="justify|left|right|center"></p>
atau format lain.
<p title="Rata kiri kanan" style="text-align = justify;"></p>
Rata kiri kanan:
<p title="Rata kiri kanan" align="justify"> Kimia (dari bahasa Arab: كيمياء, transliterasi: kimiya = perubahan benda/zat atau bahasa Yunani: χημεία, transliterasi: khemeia) adalah ilmu yang mempelajari mengenai komposisi, struktur, dan sifat zat atau materi dari skala atom hingga molekul serta perubahan atau transformasi serta interaksi mereka untuk membentuk materi yang ditemukan sehari-hari. Kimia juga mempelajari pemahaman sifat dan interaksi atom individu dengan tujuan untuk menerapkan pengetahuan tersebut pada tingkat makroskopik. Menurut kimia modern, sifat fisik materi umumnya ditentukan oleh struktur pada tingkat atom yang pada gilirannya ditentukan oleh gaya antaratom dan ikatan kimia. </p>
Hasilnya:
Kimia (dari bahasa Arab: كيمياء, transliterasi: kimiya = perubahan benda/zat atau bahasa Yunani: χημεία, transliterasi: khemeia) adalah ilmu yang mempelajari mengenai komposisi, struktur, dan sifat zat atau materi dari skala atom hingga molekul serta perubahan atau transformasi serta interaksi mereka untuk membentuk materi yang ditemukan sehari-hari. Kimia juga mempelajari pemahaman sifat dan interaksi atom individu dengan tujuan untuk menerapkan pengetahuan tersebut pada tingkat makroskopik. Menurut kimia modern, sifat fisik materi umumnya ditentukan oleh struktur pada tingkat atom yang pada gilirannya ditentukan oleh gaya antaratom dan ikatan kimia.
Rata kiri:
Kimia (dari bahasa Arab: كيمياء, transliterasi: kimiya = perubahan benda/zat atau bahasa Yunani: χημεία, transliterasi: khemeia) adalah ilmu yang mempelajari mengenai komposisi, struktur, dan sifat zat atau materi dari skala atom hingga molekul serta perubahan atau transformasi serta interaksi mereka untuk membentuk materi yang ditemukan sehari-hari. Kimia juga mempelajari pemahaman sifat dan interaksi atom individu dengan tujuan untuk menerapkan pengetahuan tersebut pada tingkat makroskopik. Menurut kimia modern, sifat fisik materi umumnya ditentukan oleh struktur pada tingkat atom yang pada gilirannya ditentukan oleh gaya antaratom dan ikatan kimia.
Rata kanan:
Kimia (dari bahasa Arab: كيمياء, transliterasi: kimiya = perubahan benda/zat atau bahasa Yunani: χημεία, transliterasi: khemeia) adalah ilmu yang mempelajari mengenai komposisi, struktur, dan sifat zat atau materi dari skala atom hingga molekul serta perubahan atau transformasi serta interaksi mereka untuk membentuk materi yang ditemukan sehari-hari. Kimia juga mempelajari pemahaman sifat dan interaksi atom individu dengan tujuan untuk menerapkan pengetahuan tersebut pada tingkat makroskopik. Menurut kimia modern, sifat fisik materi umumnya ditentukan oleh struktur pada tingkat atom yang pada gilirannya ditentukan oleh gaya antaratom dan ikatan kimia.
Rata tengah:
Kimia (dari bahasa Arab: كيمياء, transliterasi: kimiya = perubahan benda/zat atau bahasa Yunani: χημεία, transliterasi: khemeia) adalah ilmu yang mempelajari mengenai komposisi, struktur, dan sifat zat atau materi dari skala atom hingga molekul serta perubahan atau transformasi serta interaksi mereka untuk membentuk materi yang ditemukan sehari-hari. Kimia juga mempelajari pemahaman sifat dan interaksi atom individu dengan tujuan untuk menerapkan pengetahuan tersebut pada tingkat makroskopik. Menurut kimia modern, sifat fisik materi umumnya ditentukan oleh struktur pada tingkat atom yang pada gilirannya ditentukan oleh gaya antaratom dan ikatan kimia.
Pengaturan Font (huruf)
Format:
<span style="color: red; font-size: medium;">This is some text!</span> <span style="color: blue; font-size: small;">This is some text!</span> <span style="color: green; font-family: verdana;">This is some text!</span>
atau
<font size="3" color="red">This is some text!</font> <font size="2" color="blue">This is some text!</font> <font face="verdana" color="green">This is some text!</font>
Hasilnya:
This is some text!
This is some text!
This is some text!
Penentuan warna
Penentuan warna bisa menggunakan namanya bisa juga menggunakan kode warna. Untuk penamaan warna silahkan akses ke http://www.colorpicker.com/color-chart/, sedangkan kode warna bisa dilihat di http://www.colorpicker.com/ atau di http://www.w3schools.com/tags/ref_colorpicker.asp.
Contoh:
<span style="color: red; font-size: medium;">This is some text!</span> <span style="color: #ff0000; font-size: small;">This is some text!</span> <span style="color: rgb(255, 0, 0); font-size: large; font-family: verdana;">This is some text!</span> <span style="color: hsl(0, 100%, 50%); font-family: arial;">This is some text!</span>
atau
<font size="3" color="red">This is some text!</font> <font size="2" color="#ff0000">This is some text!</font> <font size="7" face="verdana" color="rgb(255,0,0">This is some text!</font> <font face="arial" color="hsl(0, 100%, 50%)">This is some text!</font>
Hasilnya:
This is some text!
This is some text!
This is some text!
This is some text!
Penentuan ukuran huruf
Jika menggunakan tag size pada maka ukuran huruf ditentukan menggunakan angka 1 sampai dengan 7. Contoh sintaksnya: size = “1”, size = “7”.
Jika menggunakan tag font-sixe maka menggunakan ukuran dengan sintaks:
font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;
Contoh:
<span style="color: red; font-size: small;">This is some text!</span> <span style="color: red; font-size: medium;">This is some text!</span> <span style="color: red; font-size: large;">This is some text!</span> <span style="color: red; font-size: xx-large;">This is some text!</span> <span style="color: red; font-size: 30px;">This is some text!</span> <span style="color: red; font-size: 200%;">This is some text!</span>
Hasilnya:
This is some text!
This is some text!
This is some text!
This is some text!
This is some text!
This is some text!
Penjelasannya:
Value | Description | |
---|---|---|
medium | Sets the font-size to a medium size. This is default | |
xx-small | Sets the font-size to an xx-small size | |
x-small | Sets the font-size to an extra small size | |
small | Sets the font-size to a small size | |
large | Sets the font-size to a large size | |
x-large | Sets the font-size to an extra large size | |
xx-large | Sets the font-size to an xx-large size | |
smaller | Sets the font-size to a smaller size than the parent element | |
larger | Sets the font-size to a larger size than the parent element | |
length | Sets the font-size to a fixed size in px, cm, etc. | |
% | Sets the font-size to a percent of the parent element’s font size | |
initial | Sets this property to its default value. | |
inherit | Inherits this property from its parent element. |
Pengaturan huruf dapat juga langsung dilakukan menggunakan pengaturan paragraf dengan sintaks:
<p style="text-align: justify; font-size: large; color: darkblue; font-family: verdana;"></p>
Contoh:
Kimia (dari bahasa Arab: كيمياء, transliterasi: kimiya = perubahan benda/zat atau bahasa Yunani: χημεία, transliterasi: khemeia) adalah ilmu yang mempelajari mengenai komposisi, struktur, dan sifat zat atau materi dari skala atom hingga molekul serta perubahan atau transformasi serta interaksi mereka untuk membentuk materi yang ditemukan sehari-hari. Kimia juga mempelajari pemahaman sifat dan interaksi atom individu dengan tujuan untuk menerapkan pengetahuan tersebut pada tingkat makroskopik. Menurut kimia modern, sifat fisik materi umumnya ditentukan oleh struktur pada tingkat atom yang pada gilirannya ditentukan oleh gaya antaratom dan ikatan kimia.
Pengaturan tipe huruf:
Format:
<strong>Bold / Tebal</strong> atau <b>Bold / Tebal </b> <em>Emphatic / Italic / miring</em> atau <i>Emphatic / Italic / miring </i> <u>Underline / Garis bawah</u> <s>Strikeout / Coret tengah</s> <small>Small - fineprint size</small> <tt>Typewriter</tt> <pre>Pre-formated</pre> <blockquote>Blockquote</Blcoquote> Subskrip & superskrip: H<sub>2</sub>SO<sub>4</sub> ⇔ 2H<sup>+</sup> + SO<sub>4</sub><sup>2-</sup>
Hasilnya:
Bold / Tebal atau Bold / Tebal
Emphatic / Italic / miring atau Emphatic / Italic / miring
Underline / Garis bawah
Strikeout / Coret tengah
Small – fineprint size
Typewriter
Pre-formated
Blockquote
Subskrip & superskrip: H2SO4 ⇔ 2H+ + SO42-
Pengaturan Division Tag:
<div> … </div> | Division (or Section) of Page Content |
<p> … </p> | Paragraph of Text |
<br> | Line Break |
<hr> | Basic Horizontal Line |
<hr> Tag Attributes: | |
size=”?” | Line Thickness in pixels |
width=”?” | Line Width in pixels |
width=”??%” | Line Width as a percentage |
color=”#??????” | Line Colour |
align=”?” | |
Horizontal Alignment: left, center, right |
|
noshade | No 3D cut-out |
… | Line Break |
Contoh:
<div style="text-align: center; color: black;"> <span style="font-size:18px;">Bendera</span><br /> <span style="color: red;">merah</span> <hr style="color:blue; width:50%;" /> <span style="color: white; background-color: red; font-size:24px;">putih</span> </div>
Hasilnya
Bendera
merah
putih
Pengaturan Image Tag:
<img src=”url” alt=”text“> | Basic Image |
<img> Tag Attributes: | |
src=”url“ | URL or filename of image (required!) |
alt=”text“ | Alternate Text (required!) |
align=”?” | Image alignment within surrounding text |
width=”??” | Image width (in pixels or %) |
height=”??” | Image height (in pixels or %) |
border=”??” | Border thickness (in pixels) |
vspace=”??” | Space above and below image (in pixels) |
hspace=”??” | Space on either side of image (in pixels) |
Contoh:
<div align="center"> <img style="width: 105px; height: 105px; border-width: 1px; border-style: solid; margin: 10px;" src="http://blogchem.com/gb/logo.png" alt="Logo Blogchem" /> </div>
Hasilnya:

Pengaturan Link Tag:
<a href=”url“> link text </a> | Basic Link |
<a> Tag Attributes: | |
href=”url“ | Location (url) of page to link to. |
name=”??” | Name of link (name of anchor, or name of bookmark) |
target=”?” | Link target location: _self, _blank, _top, _parent . |
href=”url#bookmark“ | Link to a bookmark (defined with name attribute). |
href=”mailto:email“ | Link which initiates an email (dependant on user’s email client). |
Contoh:
<p> Link ke <a href="http://blogchem.com" target="_blank" title="Masuk ke website Blogchem">BlogChem</a> </p>
Hasilnya:
Link ke BlogChem
Variasi 1 memberi warna tertentu pada link:
<p>Link ke <a href="http://blogchem.com" target="_blank" title="Masuk ke website Blogchem"><span style="color:#FF0000;">BlogChem</span></a></p>
Hasilnya:
Link ke BlogChem
Variasi 2, memberi warna link yang akan berubah jika mouse lewat di atas link:
<div align="left">Link ke <a title="Masuk ke website Blogchem" href="http://blogchem.com" target="_blank"><font style="color: 'red';" onmouseover="color:'blue';" onmouseout="color:'red';">BlogChem</font></a></div>
Hasilnya:
Variasi 3, mengganti link teks dengan gambar:
<div align="center"><a href="http://blogchem.com" target="_blank" title="Masuk ke website Blogchem"><img src="http://blogchem.com/gb/logo.png" style="width: 105px; height: 105px; border-width: 0px; border-style: solid; margin: 10px;" /></a></div>
Hasilnya:
Variasi 4 mengganti link gambar jika mouse di atas link gambar :
<div align="center"><a title="Masuk ke website Blogchem" href="http://blogchem.com" target="_blank"><img style="width: 105px; height: 105px; border-width: 0px; border-style: solid; margin: 10px;" src="http://blogchem.com/gb/logo.png" onmouseover="src='http://blogchem.com/gb/logo2.png';" onmouseout="src='http://blogchem.com/gb/logo.png';" alt="Logo Blogchem" /></a></div>
Hasilnya:
Variasi 5:
<div align=”center”>
<a target=”_blank” href=”https://unnes.ac.id” title=”Akses ke website UNNES” style=”text-decoration: none;”><button><span style=”color: red;”>AKSES WEBSITE UNNES</span></button></a>
</div>
<BR/>
<div align=”center”>
<a target=”_blank” href=”https://unnes.ac.id” title=”Akses ke website UNNES” style=”text-decoration: none;”><button><span style=”color: red;”><img src=”http://blogchem.com/latihan/logounnes.png” width=”40px” height=”50px”></span></button></a>
</div>
Hasilnya:
Pengaturan List Tag:
<ol> … </ol> | Ordered List |
<ul> … </ul> | Un-ordered List |
<li> … </li> | List Item (within ordered or unordered) |
<ol type=”?“> | Ordered list type: A, a, I, i, 1 |
<ol start=”??”> | Ordered list starting value |
<ul type=”?“> | Unordered list bullet type: disc, circle, square |
<li value=”??”> | List Item Value (changes current and subsequent items) |
<li type=”??”> | List Item Type (changes only current item) |
<dl> … </dl> | Definition List |
<dt> … </dt> | Term or phrase being defined |
<dd> … </dd> | Detailed Definition of term |
Contoh:
<ol type="A"> <li>Judul</li> <li>Sub Judul</li> <li>Sub Sub Judul</li> </ol> <ol type="1"> <li>Judul</li> <li>Sub Judul</li> <li>Sub Sub Judul</li> </ol> <ul type="circle"> <li>Judul</li> <li>Sub Judul</li> <li>Sub Sub Judul</li> </ul> <ul type="square"> <li>Judul</li> <li>Sub Judul</li> <li>Sub Sub Judul</li> </ul>
Hasilnya
- Judul
- Sub Judul
- Sub Sub Judul
- Judul
- Sub Judul
- Sub Sub Judul
- Judul
- Sub Judul
- Sub Sub Judul
- Judul
- Sub Judul
- Sub Sub Judul
Pengaturan Table Tag:
<table> … </table> | Define a Table |
<table> Tag Attributes: | |
border=”?” | Thickness of outside border |
bordercolor=”#??????” | Border Colour |
cellspacing=”?” | Space between cells (pixels) |
cellpadding=”?” | Space between cell wall and content |
align=”??” | Horizontal Alignment: left, center, right |
bgcolor=”#??????” | Background Colour |
width=”??” | Table Width (pixels or %) |
height=”??” | Table Height (pixels or %) |
<tr> … </tr> | Table Row within table |
<th> … </th> | Header Cell within table row |
<td> … </td> | Table Cell within table row |
<td> Tag Attributes: | |
colspan=”?” | Number of columns the cell spans across (cell merge) |
rowspan=”?” | Number of row a cell spans across (cell merge) |
width=”??” | Cell Width (pixels or %) |
height=”??” | Cell Height (pixels or %) |
bgcolor=”#??????” | Background Colour |
align=”??” | Horizontal Alignment: left, center, right |
valign=”??” | Vertical Alignment: top, middle, bottom |
nowrap | Force no line breaks in a particular cell |
Contoh:
<table align="center" bgcolor="lightyellow" border="1" cellpadding="5" cellspacing="0" height="300" width="466"> <tr> <td style="text-align: center;"><span style="color:#FF0000;"><strong>No.</strong></span></td> <td style="text-align: center;"><span style="color:#FF0000;"><strong>Kolom 2</strong></span></td> <td style="text-align: center;"><span style="color:#FF0000;"><strong>Kolom 3</strong></span></td> <td style="text-align: center;"><span style="color:#FF0000;"><strong>Kolom 4</strong></span></td> </tr> <tr> <td style="text-align: center;">1.</td> <td><span style="color:#0000FF;">Isi sel kolom 2 baris 1</span></td> <td><span style="color:#0000FF;">Isi sel kolom 3 baris 1</span></td> <td><span style="color:#0000FF;">Isi sel kolom 4 baris 1</span></td> </tr> <tr> <td style="text-align: center;">2.</td> <td style="text-align: right;">Isi sel kolom 2 baris 2</td> <td style="text-align: right;">Isi sel kolom 3 baris 2</td> <td style="text-align: right;">Isi sel kolom 4 baris 2</td> </tr> <tr> <td style="text-align: center;">3.</td> <td style="text-align: center;"><a href="http://blogchem.com" target="_blank"><img alt="Logo Blogchem" src="http://blogchem.com/gb/logo.png" style="width: 50px; height: 50px; margin: 1px;" /></a></td> <td bgcolor="#dddddd" style="text-align: center;"><span style="color:#800080;">Warna background lain</span></td> <td style="text-align: center;"> </td> </tr> <tr> <td colspan="3" style="text-align: center;">Jumlah</td> <td>Rp. 1234</td> </tr> </table>
Hasilnya:
—
Embed Iframe, memasang halaman web lain di web kita:
<div align=”center”>
<iframe src=”http://blogchem.com/shalat/” width=”100%” height=”700px” border=”0″ frameborder=”0″ ></iframe>
</div>
Hasilnya:
Embed Youtube:
<div align=”center”>
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/n5vjCqnVb6s” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
</div>
HASILNYA:
Pengaturan Frame Tag:
<frameset> … </frameset> | Define the set of Frames |
<frameset> Tag Attributes: | |
rows=”??,??, …” | Define row sizes & number of rows (size in pixels or %) |
cols=”??,??, …” | Define column sizes & number of columns (size in pixels or %) |
noresize=”noresize” | User cannot resize any frames in frameset |
<frame> … </frame> | Define a frame within the frameset |
<frame> Tag Attributes: | |
src=”url” | Location of HTML File for a frame |
name=”***” | Unique name of frame window |
marginwidth=”?” | Horizontal margin spacing inside frame (pixels) |
marginheight=”?” | Vertical margin spacing inside frame (pixels) |
noresize=”noresize” | Declare all frameset sizes as fixed |
scrolling=”***” | Can the user scroll inside the frame: yes, no, auto |
frameborder=”?” | Frame Border: (1 =yes, 2 =no) |
bordercolor=”#??????” | Border Colour |
<noframes> … </noframes> | Unframed content (for browsers not supporting frames) |
Contoh:
<frameset cols="25%,*,35%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset>
Hasilnya:
Frames | ![]() ![]() |
---|---|
<frameset> … </frameset> | Define the set of Frames |
<frameset> Tag Attributes: | |
rows=”??,??, …” | Define row sizes & number of rows (size in pixels or %) |
cols=”??,??, …” | Define column sizes & number of columns (size in pixels or %) |
noresize=”noresize” | User cannot resize any frames in frameset |
<frame> … </frame> | Define a frame within the frameset |
<frame> Tag Attributes: | |
src=”url” | Location of HTML File for a frame |
name=”***” | Unique name of frame window |
marginwidth=”?” | Horizontal margin spacing inside frame (pixels) |
marginheight=”?” | Vertical margin spacing inside frame (pixels) |
noresize=”noresize” | Declare all frameset sizes as fixed |
scrolling=”***” | Can the user scroll inside the frame: yes, no, auto |
frameborder=”?” | Frame Border: (1 =yes, 2 =no) |
bordercolor=”#??????” | Border Colour (*) |
<noframes> … </noframes> | Unframed content (for browsers not supporting frames) |
Forms | ![]() ![]() |
---|---|
<form> … </form> | Form input group decleration |
<form> Tag Attributes: | |
action=”url” | URL of Form Script |
method=”***” | Method of Form: get, post |
enctype=”***” | For File Upload: enctype="multipart/form-data" |
<input> … </input> | Input field within form |
<input> Tag Attributes: | |
type=”***” | Input Field Type: text, password, checkbox, submit etc. |
name=”***” | Form Field Name (for form processing script) |
value=”***” | Value of Input Field |
size=”***” | Field Size |
maxlength=”?” | Maximum Length of Input Field Data |
checked | Mark selected field in radio button group or checkbox |
<select> … </select> | Select options from drop down list |
<select> Tag Attributes: | |
name=”***” | Drop Down Combo-Box Name (for form processing script) |
size=”?” | Number of selectable options |
multiple | Allow multiple selections |
<option> … </option> | Option (item) within drop down list |
<option> Tag Attributes: | |
value=”***” | Option Value |
selected | Set option as default selected option |
<textarea> … </textarea> | Large area for text input |
<textarea> Tag Attributes: | |
name=”***” | Text Area Name (for form processing script) |
rows=”?” | Number of rows of text shown |
cols=”?” | Number of columns (characters per rows) |
wrap=”***” | Word Wrapping: off, hard, soft |
Special Characters | ![]() ![]() |
---|---|
< | < – Less-Than Symbol |
> | > – Greater-Than Symbol |
& | & – Ampersand, or ‘and’ sign |
" | “ – Quotation Mark |
© | © – Copyright Symbol |
™ | ™ – Trademark Symbol |
| – A space (non-breaking space) |
&#??; | ISO 8859-1 character – replace ?? with the iso code |
Miscellaneous Tags | ![]() ![]() |
---|---|
<!– … –> | Comment within HTML source code |
<!DOCTYPE html … > | Document Type Definition (wiki) |
<meta> … </meta> | META information tag |
<meta> Tag Attributes: | |
name=”***” | Meta name: description, keywords, author |
http-equiv=”***” | HTTP Equivalent Info: title, etc. |
content=”***” | Information content |
<link> | LINK content relationship tag |
<link> Tag Attributes: | |
rel=”***” | Type of forward relationship |
http=”url“ | Location (URL) of object or file being linked |
type=”***” | Type of object or file, eg: text/css |
title=”***” | Link title (optional) |
Body Background & Colours | ![]() ![]() |
---|---|
<body> Tag Attributes: | |
background=”url“ | Background Image (*) |
bgcolor=”#??????” | Background Colour (*) |
text=”#??????” | Document Text Colour (*) |
link=”#??????” | Link Colour (*) |
vlink=”#??????” | Visited Link Colour (*) |
alink=”#??????” | Active Link Colour (*) |
bgproperties=”fixed” | Background Properties – “Fixed” = non-scrolling watermark (*) |
leftmargin=”?” | Side Margin Size in Pixels (Internet Explorer) (*) |
topmargin=”?” | Top Margin Size in Pixels (Internet Explorer) (*) |
(*) Important Note:
Tags marked with (*) should still work, but have been superseeded by Cascading Style Sheets (CSS), which is now the recommended way to change the font, colour, spacing, border or alignment of HTML elements.