HyperText Markup Language (HTML) Basic Tags

The W.E.B. DuBois Learning Center

HyperText Markup Language (HTML) Primer

Basic Tags

The Uniform Resource Locator (URL) is the address that tells the browser where your file is located. Each URL is unique. Example: http://www.duboislc.com. Where “http” is for Hypertext Transfer Protocol, and “www” is for World Wide Web.

HTML tags are commands written between less than (<) and greater then (>) signs, also known as angle brackets that indicate how the browser should display the text.

The HTML Tag

This tag tells the browser what kind of document it is.

1. Start your HTML document with <HTML>.

2. Create your HTML document.

3. End it with </HTML>.

The HEAD Tag

This tag provides information about the URL of your web page as well as its relationship with the other pages.

1. Directly after the initial HTML tag (<HTML>), type <HEAD>.

2. Create the Head section, including the TITLE (see below).

3. End it with </HEAD>.

THE BODY TAG

The BODY of your HTML document contains the bulk of your Web page, including all the text, graphics and formatting.

1. After the final </HEAD> tag and before anything else, type <BODY>. NOTE: <BODY BGCOLOR=“#rrggbb” TEXT=“#rrggbb”> will set the background and text colors. Where “rr,” “gg,” and “bb” are hexadecimal numbers for red, green, and blue, respectively. “000000” and “ffffff” will yield black and white, respectively.

2. Create the contents of your web page.

3. End it with </BODY>.

The TITLE Tag

Each HTML page should have a title. The title should be short and descriptive.

1. Type <TITLE>.

2. Enter the title of our page.

3. End it with </TITLE>.

Example 1

<HTML>

<HEAD><TITLE>No Progress Without a Struggle</TITLE></HEAD>

Excerpts from “No Progress without a Struggle” by Frederick Douglass

If there is no struggle, there is no progress. Those who profess freedom, and yet

depreciate agitation, are men who want crops with out plowing up the ground. ...

Power concedes nothing without a demand. It ever did and it never will. Find out just what people will submit to, and you will have found out the exact amount of injustice and wrong that will be imposed upon them, and these will continue until they are resisted with either words or blows or with both. The limits of tyrants are prescribed by the endurance of those whom they oppress...

Men may not get all they pay for in this world, but they must pay for all they get.

</BODY>

</HTML>

The P Tag

This tag allows you to start a new paragraph.

1. Type <P>.

2. Type in the contents of the new paragraph.

3. End it with </P>.

The BR Tag.

This tag allows you to insert a line break.

Type <BR>. You do not need a closing tag for the line break.

The HR Tag.

This tag inserts a horizontal rule, or line.

Type <HR>.

<HR SIZE=n WIDTH=w ALIGN=direction NOSHADE>; where ‘n’ is the rule’s height in pixels, ‘w’ is the rule’s width in pixels or the percentage (in this case ‘w%’)of the page’s width, and ‘direction’ is left, center, or right, ‘NOSHADE’ creates a solid bar with no shading .

Example 1.1: <HR Size=10 width=50% ALIGN=center NOSHADE>.

Note: Any of the arguments can be omitted. A default setting will occur in that case.

The following tags must have beginnings and endings.

<B>bold type</B>.

<I>italics type</I>.

<U>underline type</U>.

<BLOCKQUOTE>This sets of a section of type</BLOCKQUOTE>.

<BLINK>This causes the text to blink.</BLINK>.

<PRE>This preformat tag lets you maintain the original line breaks and spacing.</PRE>.

<CENTER>This tag centers the text or code</CENTER>

<FONT SIZE=n COLOR=“#rrggbb” FACE=“style”>This allows you to set the size, color, and style of font.</FONT>

Example 1.2: <FONT SIZE=+1 COLOR=“RED” FACE=“ARIAL”>Red arial type with size +1</FONT> Comment: “n” can range for 1 to 7; or (+) to increase or (-) to decrease the size from the base of 3.

Example1.3: Use some of the above tags to embellish the quotation in Example 1.

HTML provides for up to six levels of headers in your Web Page. (You will seldom need more than three.)

The Hn Tag

Here, ‘n’ is a number from 1 to 6, depending on the level of header that you want.

1. URL Begin with <Hn>.

2. Type the contents of the header.

3. End it with</Hn>.

Example 2

<HTML>

<HEAD><TITLE>The W.E.B. DuBois Leaning Center</TITLE></HEAD>

<H1>Computer Science</H1>

<H2>Programming</H2>

<H3>Applications</H3>

</BODY>

</HTML>

Lists Tags

The Ordered Lists tags

These tags allow you to create an ordered list.

1. Type the introductory text.

2. Start list with the <OL tag.

3. If desired, type TYPE=X, where ‘X’ represents the type of symbol used for each item: 1, for numbers (the default for the first level); A, for an capital letters; a, for small letters; I, for capital Roman numerals; and i, for small Roman numerals.

4. If desired, type START=n, where ‘n’ represents the base value for this and subsequent line items. IMPARTANT: ‘n’ must always be a number, it will automatically convert to the designated “TYPE” value.

5. Finish this tag with >.

6. Type <LI for each item of the list.

7. If desired, type TYPE=X for the kind of bullets for the item (see # 3).

8. If desired, type VALUE=n, where ‘n’ represents the initial value for this and subsequent line items. The value ‘n’ must always be numeric (See #4) NOTE: “START=n” goes with the <OL> tag, whereas “VALUE=n” goes with the <LI> tag.

9. Type > to finish the item definition.

10. Type the line item text.

11. Repeat steps 5 to 9 for each line item.

12. Type </OL> to complete the unordered list.

Example 3

<HTML>

<HEAD><TITLE>Examples of Ordered Lists</TITLE></HEAD>

<BODY>

<H1>Some Honor Types</H1>

<h2>Olympic Metals</h2>

<OL>

<LI> First Place: GOLD

<LI> Second Place: SILVER

<LI> Third Place: BRONZE

</OL>

<h2>College Graduation Honors</H2>

<LI>SUMMA CUM LAUDE (with highest honors)

<LI>MAGNA CUM LAUDE (with high honors)

<LI>CUM LAUDE (with honors)

</OL>

</BODY>

</HTML>

The Unordered Lists tags

These tags allow you to create an unordered list.

1. Type the introductory text.

2. Start you list with the <

3. UL tag.

4. If desired, type TYPE=shape, where shape represents the type of bullet used for each item: disc, for solid round disc (the default for the first level); round, for an empty disc (default for second level); square, square bullet (default for third level).

5. Finish this tag with >.

6. Type <LI for each item of the list.

7. If desired, type TYPE=shape for the kind of bullets for the item (see # 3).

8. Type > to finish the item definition.

9. Type the line item text> .

10. Repeat steps 5 to 9 for each line item.

11. Type </UL> to complete the unordered list.

Example 4

<HTML>

<HEAD><TITLE>Example of Unordered Lists</TITLE></HEAD>

<BODY>

<H1>W.E.B. DuBois Learning Center Classes</H1>

<UL>

<LI>Computer Science

<LI>Mathematics

<LI>Natural Science

<LI>Reading

</UL>

<h2>Other Activities & Operations</h2>

<LI>Bookstore

<LI>Printing & Publishing

<LI TYPE=square><I>Outreach </I>

<LI>Community Forums

<LI>Receptions for Scholars & Activists

<LI TYPE=disc><I>Finance</I>

<LI>Fund Raising

</UL>

</BODY>

</HTML>

The Definition Lists tags

These tags allow you to create a definition list (particularly suited for glossaries or other kinds of lists described by a word or phrase.

1. Type the introductory text.

2. Start you list with the <DL> tag. You may enter the test after this tag.

3. Type <DT>.

4. Type the word or phrase to be defined for the item.

5. Type <DD>.

6. Type the definition of the item entered in step 4.

7. Repeat steps 3 to 6 for each pair of terms and definitions.

8. Type </DL> to complete the list of definitions.

Example 5

<HTML>

<HEAD><TITLE>Some African Facts</TITLE></HEAD>

<BODY>

<DL>

<DT><B>KEMET</B><BR>

<DD><I>Kemet</I>Loosely translated: “The Black Land” or “The Land of the Blacks.” This is the name the ancient Egyptians referred to their homeland.

<DT><B>THE GREAT ZIMBABWE</B><BR>

<DD><I>Great Zimbabwe</I>This refers to the remains of the citadel ruins in Zimbabwe.

<DT><B>THE KINGDOM OF OLD MALI</B><BR>

<DD><I>Old Mali</I>The West African kingdom founded by Sundiata. The descendants of whom traveled to The Americas centuries before Columbus.

</DL

</BODY>

</HTML>

The Nested Lists Tags

These tags allow you to insert one type of list into another.

1. Create your first list.

2. Place the cursor inside your first list where you want your nested list to appear (Otherwise it will start in a default position.

3. Create your nested list in the same way you created the regular list.

4. Continue with the principal list.

Example 6

<HTML>

<HEAD><TITLE>Examples of Nested Lists</TITLE></HEAD>

<BODY>

<H1>Great Military Leaders</H1>

<OL>

<LI>Africa

<LI> Candace (Ethiopian queen who face down Alexander)

<LI> Piankhi (Ethiopian king who reconquered Egypt)

<LI> Yusuf I (Northwest African Moorish sultan who defeated El Cid)

</OL>

<LI>The Americas

<LI>South

<LI> Jean Jacques Dessalines (liberator of Haiti)

<LI> Henrique Dias (leader of Brazilian war of independence)

</OL>

<LI>North

<LI> Nat Turner (leader of Southampton, Virginia slave revolt)

<LI> Harriet Tubman (first woman to lead a US military campaign)

</OL>

<LI>Europe

<LI> Clitus Niger (Greece; Saved Alexander’s life)

<LI> General Alexander Dumas (France; father of “The three Musketeers” author, Alexander Dumas.

</OL>

</BODY>

</HTML>

IMAGE SOURCE TAGS

The Image Source Tags

These tags allow you to insert images.

To insert and image, write the following tag:

<IMG SRC=“image.ext” WIDTH=xx HEIGHT=yy BORDER=n

ALT=“This is what will be seen if the user’s browser does not support graphics.”>,

Where:

1. “image.ext” is the name image file you want to use, “ext” is the extension of the file (usually “gif” or “jpg”).

2. “WIDTH=xx” and “HEIGHT=yy” are the settings for the width and height you want for image to be displayed, “xx” and “yy” are the numbers of pixels of the image’s width and height it will be displayed. (Your monitor’s screen is ‘h’ pixels high and ‘w’ pixels wide. A typical monitor has h=480 and w=512. These numbers vary so check the statistics of your monitor)

3. “BORDER=n” is the setting for the number of pixels, “n,” of the border of the image (n=0 gives no border).

4. The ‘ALT’ attribute is explained in the “definition’s argument.” This is optional.

The tag <ALIGN=location> allows you to place the image at a certain location. Where “location” is either LEFT, CENTER, or RIGHT.

ANCHOR AND LINK TAGS

The Anchor Tags to a File Destination

These tags allow you to link to other files.

To create a link:

1. Type <A HREF=“url.address”>. Where “url.address” is the URL destination of the file.

2. Type the clickable text that is to be highlighted and underlined, that will send you to the destination.

3. Close the anchor by typing </A>.

Note: You can link to an image by typing the URL of the image for the address.

Example 7

The hyper link <A HREF=“www.duboislc.com/omega7”>Omega Seven</A> will cause “Omega Seven” to be highlighted and underlined in your web page. When you click on it, it will send you to the file that will display the page referred to.

The Anchor Tags to a Location Within the File

These tags will send you to the beginning of a location or section within your current file, designated by a NAME tag.

To create an anchor:

1. Place the cursor at the location you want the user to jump to.

2. Type <NAME=“anchor name”>. Where “anchor name” is the text you will use internally to identify the link.

3. Add the words or images you want to be referenced.

4. Type <B> to close the anchor.

To link to the anchor:

1. Type <A HREF=“#anchor name”>. Where “anchor name” is described above.

2. Type the clickable text to be underlined and highlighted.

3. Type </A> to complete the link definition.

Linking to E-Mail

An e-mail link is called a “mailto” and it provides an atomatically e-mail addressed pop up window, or form, that allows the user to send comments to the address.

To create a mailto link:

1. Type <A HREF=“mailto:name@address.ext”>, where “name@address.ext” is the e-mail address that receives the mail.

2. Type the clickable text that is underlined and highlighted that activates the pop up window form to be sent to the address above.

3. Type </A> to finish the definition.

Linking with Images

These tags let you link to and from images.

To link to an image:

Type <A HREF=“image.gif”>image info</A>. Use the kind of extension that the image is stored under, e.g. “gif,” “jpg,” etc.

To link from and image:

1. Type <A HREF=“url.address” ALT=“whatever”>. Where “url.address” identifies the page you want the user to jump to.

2. Type <IMG SRC=“image.location”>. Where “image.location” gives the location for the image source.

3. Type </A> complete the tag.

To link from different areas within an image:

First you have to create a map of the image that contains the clickable areas. There are three types of definable shapes within an image; rectangles, circles, and polygons.

To create the image map:

1. Type <MAP NAME=“name”>. Hit Enter.

2. Type <AREA SHAPE=“shape” COORDS=“x1,y1 x2,y2” HREF=“destination.htm” ALT=“whatever”>. Where (a) “shape” is “rect” for rectangles, “circle” for circles, and “poly” for polygons; (b) x1,y1 and x2,y2 are the coordinates for the upper left and lower right corners of the rectangle, the center and a boundary point of the circle, and the points that define the perimeter of the polygon (polygons have more than to points that define its perimeter); (c) “destination.htm” is where you want the user to jump to; (d) “ALT is the alternate text in case your user’s browser does not support graphics. Type return or enter.

3. Type as many of these as you have different areas to link from.

4. Type <AREA SHAPE=“DEFAULT” NOHREF>. Type enter.

5. Type </MAP> to complete the image map.

6. Type <IMG SRC=“image.gif” ALT=“whatever” BORDER=“n” USEMAP=“#name”>. Where (a) “image.gif” is the image that contains the areas to be clicked from; (b) “ALT” see ‘d’ in 2; (c) “n” is the number of pixels in the border of the picture, (“0” means no border); (d) and “name” is the name of the image map. Note: This tag could come first.

Example 8

<HTML>

<HEAD><TITLE>The W.E.B. DuBois Leaning Center Building</TITLE></HEAD>

</MAP>

</BODY>

</HTML>

TABLE TAGS

These tags allow you to create tables.

Some basics of table definition:

1. The table must be contained within the tags <TABLE> and </TABLE>.

2. Each row of the table must be defined within the tags <TR> and </TR>.

3. Each cell of each row must be defined between the tags <TD> and </TD>.

4. The headers across the top or along the sides must be defined between the tags <TH> and </TH>.

5. The tag <BR> between the “TD” and “TH” tags will yield a blank cell.

Example 9

<HTML><HEAD><TITLE>A Sample Table</TITLE></HEAD>

<TABLE>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY></HTML>

Other attributes for tables:

1. <TABLE BORDER=“n”> Where “BORDER=n” puts a border of ‘n’ pixels around the table.

2. <CAPTION ALIGN=bottom> places a caption at the bottom of the table, the default alignment is at the top, so you really do not have to use it.

3. <TABLE CELLSPACING=n> places ‘n’ pixels between each table sell.

4. <TABLE CELLPADDING=n> places gaps of ‘n’ pixels between each cell.

5. <TABLE WIDTH=n HEIGHT=m>. Where “n” and “m” are the width and height in pixels (or percentage of the full table size; be sure to use the “%” in this case) of each cell.

6. <TH COLSPAN=n>, <TD ROWSPAN=n> defines the number of cells spanned by the column or row, respectively. Note: “TH” or “TD” tags can be used here.

Note: As many of the attributes, where indicated, can be used in the “TABLE” tag as desired. Also both the “COLSPAN” and the “ROWSPAN” attributes can be used in the “TH” and “TD” tags is desired.

FORM TAGS

These tags allow you to create forms to allow for receiving data.

Every form has three parts: (1) the FORM; (2) the ELEMENTS; and (3) the SUBMIT tag.

To create the form structure:

1. Type <FORM

2. Type METHOD=“POST” where the “METHOD” tells the form how to send it information back. “POST” is the most common method, GET is another one.

3. Type ACTION=“script.url” where “ACTION” points the form to a URL that will accept the form’s information, and “script.url”is the location on the server that will be run when the form is submitted.

4. Type > to complete the tag.

5. Place the form’s elements (described below) here.

6. Create a “submit button” (described below).

7. Type </FORM> to complete the form structure.

8. Type <INPUT TYPE=“submit” VALUE=“submit message”>, where “send info is the text in the submit button.

9. Type <INPUT TYPE=“reset or clear message”>, where “reset” is the text for the button that clears the input in the “elements” which allows the user to start over.

Form Elements:

Text Boxes contain one line of text usually for names, addresses, etc.

To create a text box:

1. Type <INPUT TYPE=“text”.

2. Name the box by typing NAME=“name”

3. If desired, define the size of the box by typing SIZE=“n” where “n” is the width of the box in characters (20 is the default).

4. If desired you can add more text than fits the box by defining the maximun numbers of characters that can be entered by typing MAXLENGTH=“n”

5. Complete the element by typing >.

Example 10

<HTML>
<HEAD><TITLE>Using The Form Structure</TITLE></HEAD>

<BODY>

<h1><b>The Element: <u>Text Boxes</u></b></h1>

<hr>

<h2>Please fill in your name and address</h2>

<hr>

</FORM>

</BODY></HTML>

Radio Buttons allow the user to make a singular selection.

To create a radio button set:

1. Type <INPUT TYPE=“radio”

2. Type NAME=“radioset” where “radioset” is the name for the set of buttons.

3. Each button must have its own value. To define the value of each button, type VALUE=“value”

4. If desired, typed CHECKED to make a particular button active by default.

5. Close the particular button by typing >

6. Type the text that identifies the particular button. This is often the same as “value” but does not have to be.

Example 11

(Insert the following code for “Radio Buttons” inside the FORM STRUCTURE in Example 10.)

<h1><b>The Element: <u>Radio Buttons</u></b></h1>

<hr>

<h2>Please check one</h2>

<INPUT TYPE=“radio” NAME=“sex” VALUE=“woman”> Woman

<INPUT TYPE=“radio” NAME=“sex” VALUE=“man”>Man

<hr>

<h2>Where were you born?</h2>

<INPUT TYPE=“radio” NAME=“cont” VALUE=“N-Amer” CHECKED>North America

<INPUT TYPE=“radio” NAME=“cont” VALUE=“S-Amer”>South America

<INPUT TYPE=“radio” NAME=“cont” VALUE=“Africa”>Africa

<INPUT TYPE=“radio” NAME=“cont” VALUE=“Asia”>Asia

<INPUT TYPE=“radio” NAME=“cont” VALUE=“Australia”>Australia

<INPUT TYPE=“radio” NAME=“cont” VALUE=“Europe”>Europe

<HR>

Check Boxes allow the user to as many boxes as they desire.

To create a checked box set:

1. Type <INPUT TYPE=“checkbox”

2. Define the check box name by typing NAME=“name”

3. It is advisable to define a value for each check box. To do this type VALUE=“default value”. This is usually the same value that the user sees. (See step 6).

4. If desired type CHECKED to make the check box checked by default.

5. Type > to finish the check box definition.

6. Type the text that identifies the particular check box to the user. Often the same as “VALUE” but not necessarily.

Example 12

(Insert the following code for “Check Boxes” inside the FORM STRUCTURE in Example 10.)

<h1><b>The Element: <u>Check Boxes</u></b></h1>

<hr>

<h2>Check as many as appropriate.</h2>

<h2>Which kind of pet lives in your hemo?</h2>

<INPUT TYPE=“checkbox” NAME=“pet” VALUE=“dog”>Dog

<INPUT TYPE=“checkbox” NAME=“pet” VALUE=“cat”>Cat

<INPUT TYPE=“checkbox” NAME=“pet” VALUE=“fish”>Fish

<INPUT TYPE=“checkbox” NAME=“pet” VALUE=“hamster”>Hamster

<INPUT TYPE=“checkbox” NAME=“pet” VALUE=“turtle”>Turtle

<INPUT TYPE=“checkbox” NAME=“pet” VALUE=“other”>Other

<INPUT TYPE=“checkbox” NAME=“pet” VALUE=“none”>None

<hr>

Text Blocks allow the user to respond in a larger space.

To create a text block:

1. Type <TEXTAREA.

2. Type NAME=“name” where “name” is the variable name for your text area that is recognized by the server.

3. If desired, type ROWS=“n”, where “n” is the height of the text area in rows (default is 4).

4. If desired, type COLS=“n”, where “n” is the width of the text area in characters (default is 40).

5. Type >.

6. Type the default text, if any. You may not place any HTML code here.

7. Type </TEXTAREA> to complete the text area.

Example 13

(Insert the following code for “Text Blocks” inside the FORM STRUCTURE in Example 10.)

<h1><b>The Element: <u>Text Blocks</u></b></h1>

<hr>

<b>How have you progressed so far in learning to write HTML code?</b>

<BR>

<TEXTAREA NAME=“learning” ROWS=“5” COLS=“50”>So far I have...

<hr>

Menus make it easy for users to enter information (for example for searches).

To create a menu:

1. Type <SELECT

2. Type NAME=“name” where “name” is a variable name for the menu that identifies the data collected by the server.

3. Type SIZE=“n” where “n” is the number of items that are initially visible in the menu

4. If desired, type MULTIPLE to allow the user to select more than one option from the menu.

5. Type > to finish the menu definition.

6. If desired, type <OPTION SELECTED VALUE=“value”> to have the OPTION selected by default, where “value” is the name that identifies the data collected by the server.

7. Type the option name if you want it to appear in the menu.

8. Repeat steps 6 & 7 for each option you desire to appear in the menu.

9. Close the menu element by typing </SELECT>.

Example 14

(Insert the following code for “Menus” inside the FORM STRUCTURE in Example 10.)

<h1><b>The Element: <u>Menus</u></b></h1>

<hr>

<OPTION VALUE=“height1”>Under 4.0ft.

<OPTION VALUE=“height2”>4.0ft. to 4.5ft.

<OPTION VALUE=“height3”>4.5ft. to 5.0ft.

<OPTION VALUE=“height4”>5.0ft. to 5.5ft.

<OPTION VALUE=“height2”>5.5ft. to 6.0ft.

<OPTION VALUE=“height2”>Over 6.0ft

</SELECT>

<hr>

Hexadecimal Equivalents to the Decimal Numbers 0–255

Dec	Hex	Dec	Hex	Dec	Hex	Dec	Hex	Dec	Hex	Dec	Hex	Dec	Hex	Dec	Hex
0	0	32	20	64	40	96	60	128	80	160	A0	192	C0	224	E0
1	1	33	21	65	41	97	61	129	81	161	A1	193	C1	225	E1
2	2	34	22	66	42	98	62	130	82	162	A2	194	C2	226	E3
3	3	35	23	67	43	99	63	131	83	163	A3	195	C3	227	E3
4	4	36	24	68	44	100	64	132	84	164	A4	196	C4	228	E4
5	5	37	25	69	45	101	65	133	85	165	A5	197	C5	229	E5
6	6	38	26	70	46	102	66	134	86	166	A6	198	C6	230	E6
7	7	39	27	71	47	103	67	135	87	167	A7	199	C7	231	E7
8	8	40	28	72	48	104	68	136	88	168	A8	200	C8	232	E8
9	9	41	29	73	49	105	69	137	89	169	A9	201	C9	233	E9
10	A	42	2A	74	4A	106	6A	138	8A	170	AA	202	CA	234	EA
11	B	43	2B	75	4B	107	6B	139	8B	171	AB	203	CB	235	EB
12	C	44	2C	76	4C	108	6C	140	8C	172	AC	204	CC	236	EC
13	D	45	2D	77	4D	109	6D	141	8D	173	AD	205	CD	237	ED
14	E	46	2E	78	4E	110	6E	142	8E	174	AE	206	CE	238	EE
15	F	47	2F	79	4F	111	6F	143	8F	175	AF	207	CF	239	EF
16	10	48	30	80	50	112	70	144	90	176	B0	208	D0	240	F0
17	11	49	31	81	51	113	71	145	91	177	B1	209	D1	241	F1
18	12	50	32	82	52	114	72	146	92	178	B2	210	D2	242	F2
19	13	51	33	83	53	115	73	147	93	179	B3	211	D3	243	F3
20	14	52	34	84	54	116	74	148	94	180	B4	212	D4	244	F4
21	15	53	35	85	55	117	75	149	95	181	B5	213	D5	245	F5
22	16	54	36	86	56	118	76	150	96	182	B6	214	D6	246	F6
23	17	55	37	87	57	119	77	151	97	183	B7	215	D7	247	F7
24	18	56	38	88	58	120	78	152	98	184	B8	216	D8	248	F8
25	19	57	39	89	59	121	79	153	99	185	B9	217	D9	249	F9
26	1A	58	3A	90	5A	122	7A	154	9A	186	BA	218	DA	250	FA
27	1B	59	3B	91	5B	123	7B	155	9B	187	BB	219	DB	251	FB
28	1C	60	3C	92	5C	124	7C	156	9C	188	BC	220	DC	252	FC
29	1D	61	3D	93	5D	125	7D	157	9D	189	BD	221	DD	253	FD
30	1E	62	3E	94	5E	126	7E	158	9E	190	BE	222	DE	254	FE
31	1F	63	3F	95	5F	127	7F	159	9F	191	BF	223	DF	255	FF