BASIC HTML TAGS — written by Erin Maloney; last updated 15 September 2017
  1. BEGINNING HTML TAGS
  2. INTERMEDIATE HTML TAGS
  3. BULLETS AND NUMBERS
  4. TABLES
  5. FRAMES: TWO, SIDE-BY-SIDEObsolete!

For more information about these and other HTML tags and attributes:

Notepad++ tips:


1. BEGINNING HTML TAGS
HTML TEMPLATE

Five tags:

<!DOCTYPE html>

<html>

<head>
<title> Text in Title Bar Here </title>
</head>

<body>
Everything for Web Page Here
</body>

</html>


BODY attribute

For background color, background style, and text color: add attributes to your existing BODY tag.

<body bgcolor="pink" text="#0000ff">

<body background="graphic.jpg" text="#0000ff">


Empty line tags: BR (no closing tag), or P and DIV (both use closing tag)

<br>Data
<div>Data</div>
→ Both like hitting the enter key once (after text)

<p>Data</p>
→ Like hitting the enter key twice


Aligning tags and attributes: CENTER, or DIV and P (all use closing tag)

<center>Data</center>

<div align="left" | "center" | "right" | "justify">Data</div>

<p align="left" | "center" | "right" | "justify">Data</p>

→ default for p and div: "left"


Horizontal line tag: HR (no closing tag)

Common Attributes

<hr>

<hr color="purple">

<hr width="75%" align="center" color="#99FFFF">


Non-English Characters (like ğ or ü); useful to view non-English characters in "English" countries: META commands (no closing tag)

You can copy the two common Turkish META tags below, or from the source code from a Turkish web page, such as Erin's web page.
They must be placed between <HEAD> and </HEAD>

Most common Turkish META tags:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Sometimes:
<meta http-equiv="content-type" content="text/html; charset=windows-1254">
<meta http-equiv="content-type" content="text/html; iso-8859-9">

NOTE: Usually, the two "Most common Turkish META tags" are enough for displaying Turkish characters. But, for some browsers (such as Microsoft Internet Explorer — see Bilkent's Faculty of Science), Turkish characters must be replaced by special characters. See Turkish Basics Site for Turkish special characters.


Formatting text tags: B, I, U, STRONG, EM (with closing tags)

Bold, Italic, underlined

<b><i><u>Text</u></i></b>
→ For italic, must use I or i.


STRONG (similar to B) and EM (similar to I)

<strong><em>Text</em></strong>


Changing the size, color, or style of the text tag: FONT, BIG, SMALL (with closing tags)

FONT

Attributes

<font size="5" color="#003333" face="comic sans ms">Text</font>

Can also relate to default or previous size by using examples such as these: SIZE="+3", SIZE="-2"


BIG or SMALLObsolete

Like font size="7":
<big><big><big><big>REALLY BIG TEXT</big></big></big></big>

Like font size="4":
<big>BIG TEXT</big>

Like font size="1":
<small><small>small text</small></small>


Graphic tag: IMG (no closing tag)

Simple Attributes

<img src="mailbox.gif" border="0">

<img src="lobstersmall.jpg" border="2">


For better organization, you can put graphics in a folder. Suppose you put mailbox.gif in a folder called graphics (which, like a file name, is case sensitive). Then, your code is like this:

<img src="graphics/mailbox.gif">


More Common Attributes

<img src="graphics/mailbox.gif" title="Email" border="2" align="right" hspace="15" vspace="15">


Linking tag: A (with closing tag)

Common Attributes

  1. Absolute link: to other web pages on the Internet

    <a href="http://w3.bilkent.edu.tr/bilkent/" target="_blank">Bilkent University</a>

  2. Relative link: to other web pages or files in your folder (or folder within a folder)

    <a href="TRIN172/indexLesson1.html" target="_blank">My web page from TRIN 172 Lesson 1</a>

    <a href="week03.odt" target="_blank">Notes from Week 3 (.odt)</a>

    <a href="ACC-BF1/spreadsheet05.xlsx" target="_blank">Spreadsheet from Week 5 in ACC/BF 173 (.xlsx)</a>


Linking using graphic tag instead of text

<a href="Week03.doc" target="_blank"><img src="pictures/mailbox.gif" title="Mailbox"></a>


Moving to a different place in the same sheet
Including E-mail addresses

Four ways ("safest" to "least safe", regarding SPAM):

  1. Use a graphic for the whole address, using software like GIMP — see example on Erin's web page
  2. Use a graphic only for the "at" symbol
  3. Type the address "wrongly", such as: maloney [-at-] bilkent[-dot-]edu[-dot-]tr
  4. Put a link (with closing tag): <a href="mailto:emailname@university.edu.tr">Ali's e-mail address</a>


2. INTERMEDIATE HTML TAGS
Header tags: H1, H2, H3, H4, H5, and H6 (each has a closing tag)

"H" tags add bold, size, and break lines, reducing need for tags such as B, FONT, BR, and P.

For largest headings, use H1:

<h1>Heading 1</h1>:

Heading 1

For smallest headings, use H6:

<h6>Heading 6</h6>:

Heading 6

Indenting tag: BLOCKQUOTE (single word, with closing tag)

Indents text from both left and right margins

Using this HTML code...

<BLOCKQUOTE>Text to indent from both left and right margins. Text to indent from both left and right margins. Text to indent from both left and right margins. Text to indent from both left and right margins.</BLOCKQUOTE>

...gives this output on web page...

Text to indent from both left and right margins. Text to indent from both left and right margins. Text to indent from both left and right margins. Text to indent from both left and right margins.

Special characters

For typing unusual characters (such as ←, →, ©, ±), or for typing extra spaces, such as the 5 spaces between the brackets {     }. See for example:


Comments: Text seen only in source code — not on web page

Main reasons:

  1. To cite writers of code (such as writers of pre-written JavaScript) and editors (such as students in group)
  2. For code to be hidden temporarily, that will be used later
  3. As notes to yourself or other programmers

"Less-than" bracket, exclamation point, 2 hyphens, 1 space, hidden text, 1 space, 2 hyphens, "greater-than" bracket:

<!-- Text -->

<!-- Text written by http://cssmenumaker.com/menu/black-apple-drop-down-menu, edited by Erin Maloney -->

→ NOTE: You use different code for comments in a .css file
Rolling text or graphic tag: MARQUEE (with closing tag)Obsolete: If you wish to see how to do it, look in source code of this document

Rolling Text

Makes text or graphic roll from side to side



3. BULLETS AND NUMBERS

Bullets (unordered list) opening and closing tags: <ul>...</ul>
Numbers (ordered list) opening and closing tags: <ol>...</ol>
List item tag: <li> → Note: </li> closing tag is optional.

Example: Simple Bullets
For this on web page:
  • Turkey
  • England
Type this in code:

<ul>
<li>Turkey
<li>England
</ul>

Example: Simple Numbers
For this on web page:
  1. Turkey
  2. England
Type this in code:

<ol>
<li>Turkey
<li>England
</ol>

Example: Nested Bullets
For this on web page:
  • Turkey
    • Istanbul
    • Ankara
  • England
    • London
    • Cambridge
Type this in code:

<ul>
<li>Turkey
          <ul>
          <li>Istanbul
          <li>Ankara
          </ul>
<li>England
          <ul>
          <li>London
          <li>Cambridge
          </ul>
</ul>

Example: Nested Numbers
For this on web page:
  1. Turkey
    1. Istanbul
    2. Ankara
  2. England
    1. London
    2. Cambridge
Type this in code:

<ol>
<li>Turkey
          <ol>
          <li>Istanbul
          <li>Ankara
          </ol>
<li>England
          <ol>
          <li>London
          <li>Cambridge
          </ol>
</ol>

Attributes

To change bullet or number symbols, add TYPE attribute to opening tag:

To change starting point, add START attribute to opening tag (for numbers only):

FOR EXAMPLE, WITH STARTING POINT OF:USE THIS CODE:
4<ul start="4">
iii<ul type="i" start="3">
II<ul type="I" start="2">
e<ul type="a" start="5">
F<ul type="A" start="6">



4. TABLES

Opening and closing tags:

Tags for Table with 3 normal rows and 2 columns:

     <table>
     <tr>
     <td> Data </td><td> Data </td>
     </tr>
     <tr>
     <td> Data </td><td> Data </td>
     </tr>
     <tr>
     <td> Data </td><td> Data </td>
     </tr>
     </table>

Tags for Table with 1 header row, 2 normal rows and 2 columns:

     <table>
     <tr>
     <th> Data </th><th> Data </th>
     </tr>
     <tr>
     <td> Data </td><td> Data </td>
     </tr>
     <tr>
     <td> Data </td><td> Data </td>
     </tr>
     </table>

Common attributes for <table> (in opening tag):

BORDER=
  • Number of pixels in border
  • Default: "0"
  • Common: "0", "2"
CELLPADDING=
  • Number of pixels between border and data
  • Not necessary if BORDER="0"
  • Default: "0"
  • Common: "5"
CELLSPACING=
  • Number of pixels between "inner" and "outer" border
  • Not necessary if BORDER="0"
  • Default: "1"
  • Common: "0"
WIDTH=
  • Width of entire table
  • Percent means relative to screen width
  • Common percent: from "50%" to "100%"
  • Common pixels: from "500" to "1000"
  • Default: width of actual data (not width of screen)
HEIGHT=
  • Height of entire table, relative to screen
  • Pixels are most used, with common from "200" to "600"
  • Can also use percent, meaning relative to height of screen
  • Default: height of actual data (not height of screen)
ALIGN=
  • "right" | "center" | "left"
  • Position of entire table, not text position within table
  • Common: "center"
  • Default: "left"


Common attribute for <TH> and <TD> (in opening tag): WIDTH

WIDTH=
  • For column width: necessary only in one row (usually first row) → applies then to columns in all rows
  • Common: pixels (such as "150", "300")
  • Common: percent, relative to width of table (not width of screen): "25%", "50%"
  • Default: cells are divided evenly, but avoid, as usually sloppy


Other attributes for tables
  1. Background color: in TABLE, TR, TH, and TD

  2. Border color (but one word): in TABLE, TR, TH, and TD

  3. Horizontal alignment: in TR, TH, and TD

  4. Vertical alignment: in TR, TH, and TD

  5. Merging cells: in TD

    Table with three rows and two columns — no merging/spanning
    → also common border, cellpadding, and cellspacing; and table centered within cell of table

    CODE

         <table>
         <tr>
         <td> Data </td><td> Data </td>
         </tr>
         <tr>
         <td> Data </td><td> Data </td>
         </tr>
         <tr>
         <td> Data </td><td> Data </td>
         </tr>
         </table>

    OUTPUT

    Data Data
    Data Data
    Data Data


    Table with three rows and two columns, using COLSPAN to span one cell across two columns (in first row)
    → also common border, cellpadding, and cellspacing; and table centered within cell of table

    CODE

         <table>
         <tr>
         <td colspan="2"> Data </td>
         </tr>
         <tr>
         <td> Data </td><td> Data </td>
         </tr>
         <tr>
         <td> Data </td><td> Data </td>
         </tr>
         </table>

    OUTPUT

    Data
    Data Data
    Data Data


    Table with three rows and two columns — using ROWSPAN to span one cell down two rows (in second columns)
    → also common border, cellpadding, and cellspacing; and table centered within cell of table

    CODE

         <table>
         <tr>
         <td> Data </td><td rowspan="2"> Data </td>
         </tr>
         <tr>
         <td> Data </td>
         </tr>
         <tr>
         <td> Data </td><td> Data </td>
         </tr>
         </table>

    OUTPUT

    Data Data
    Data
    Data Data


Other tags for tables
  1. Header, Body, Footer: <THEAD>, <TBODY>, <TFOOT>,

  2. Columns: <COL>

    <col width="percent/pixels" span="integer">

  3. Table within Table



5. FRAMES: TWO, SIDE-BY-SIDE Obsolete: no longer be used in course

To show two web pages side-by-side in one web page, like in Bilkent's Japanese Unit, use frames. For two frames, you must use three complete web pages.

  1. Frame command web page, with FRAMESET opening and closing tags replacing BODY opening and closing tags:

    <html>

    <head>
    <title> text in title bar here </title>
    </head>

    <frameset cols="35%,*" border="0">

    <frame SRC="leftweb.htm">
    <frame SRC="rightweb.htm" name="right">

    </frameset>

    </html>

  2. Left web page, with links to all the pages that you want to appear on the right, as in the example link:

    <a href="photopage.htm" target="right">

    Note that target="right" replaces target="_blank"

  3. Right web page

    This is the page that you want to appear first, usually also on the home page. It often has contact information.