03 Handout 1

SH1802
HTML Basics (Part 2)

I. Images
A. The <IMG> Tag

• The <IMG> tag is used to insert an image using its location address.
• It contains only attributes, and does not have a closing tag.
• The image’s URL (Uniform Resource Locator) can be defined using the SRC attribute:
<IMG SRC="image.jpg" />
B. Image Location
• The location address for the image is inserted as a value for the src attribute between a
pair of quotation marks (“”):
<HTML>
<HEAD>
<TITLE>first page</TITLE>
</HEAD>
<BODY>
<IMG SRC="tree.jpg" ALT="" />
</BODY>
</HTML>
C. Image Resizing
• The width and height attributes can be used to define an image’s size; these attributes
can increase or decrease the image’s actual size to a preferred height and/or width.
• The value can be specified in fixed value (pixels) or as a percentage:
<HTML>
<HEAD>
</HEAD>
<BODY>
<IMG SRC="tree.jpg" HEIGHT="150px" WIDTH="150px" ALT="" />

<IMG SRC="tree.jpg" HEIGHT="50%" WIDTH="50%" ALT="" />
</BODY>
</HTML>
D. Image Borders
• An image has no borders by default. Use the border attribute within the image tag to create
a border around the image.
<IMG SRC="tree.jpg" HEIGHT="150px" WIDTH="150px" BORDER="1px"
ALT="" />
II. Lists
A. Ordered Lists
• An ordered list starts with the <OL> tag, and each list item is defined by <LI> tag.
• Each item on the list is organized through numbers, in increasing order:
<HTML>
<HEAD>
03 Handout 1 *Property of STI

 courseware.feedback@sti.edu Page 1 of 6
SH1802
<TITLE>Lists</TITLE>
</HEAD>
<BODY>
<OL>
<LI>Red</LI>
<LI>Blue</LI>
<LI>Green</LI>
</OL>
</BODY>
</HTML>
B. Unordered Lists
• An unordered list starts with the <UL> tag; each item is also defined by the <LI> tag:
<HTML>
<HEAD>
<TITLE>List</TITLE>
</HEAD>
<BODY>
<UL>
<LI>Red</LI>
<LI>Blue</LI>
<LI>Green</LI>
</UL>
</BODY>
</HTML>
III. Tables
A. Creating a Table
• Tables are defined by using the <TABLE> tag.
• Table rows are defined using the <TR> tag.
• Table columns (or table data) are defined using the <TD> tag:
<TABLE>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
B. BORDER, ROWSPAN and COLSPAN Attributes

• A border can be added using the BORDER attribute:
<TABLE BORDER="2">
• Rows and columns can be “spanned” (combined) using the COLSPAN and ROWSPAN
attributes, respectively:
<TABLE BORDER="2">
<TR>
<TD>Red</TD>
<TD>Blue</TD>
<TD>Green</TD>
</TR>
<TR>
<TD><BR /></TD>

SH1802
<TD COLSPAN="2"><BR /></TD>

</TR>
</TABLE>
• The example below demonstrates the rowspan attribute:
<HTML>
<BODY >
<TABLE BORDER=“1” >
<TR>
<TD>Orange</TD>
<TD ROWSPAN="2">Blue</TD>
</TR>
<TR>
<TD ALIGN=middle>Red</TD>
</TR>
</TABLE>
</BODY>
</HTML></TABLE>
C. The ALIGN and BGCOLOR Attributes

• To change your table’s position, use the ALIGN attribute inside your table tag:
<TABLE ALIGN="center">
• Tables, cells, rows, and columns can have their background colors set using the
BGCOLOR attribute:
<TABLE BORDER="2">
<TR>
<TD BGCOLOR="red">Red</TD>
<TD>Blue</TD>
<TD>Green</TD>
</TR>
<TR>
<TD>Yellow</TD>
<TD COLSPAn="2">Orange</TD>
</TR>
</TABLE>
IV. Inline and Block Elements

• In HTML, most elements are defined as block level or inline elements.
o Block level elements start from a new line. These elements basically start a new block of
content within the document.
o Inline elements are normally displayed without line breaks. These elements usually alter
the content, such as changing the type of the text, emphasis, background colors, etc.
• The <DIV> element is a block is a block-level element that is often used as a container for
other HTML elements:
<HTML>
<BODY>
<H1>Headline</H1>
<DIV STYLE="background-color:green; color:white;
padding:20px;">
<P>Some paragraph text goes here.</P>
<P>Another paragraph goes here.</P>
</DIV>
</BODY>
</HTML>

SH1802
• Similarly, the <SPAN> element is an inline element that is often used as a container for some
text.
<HTML>
<BODY>
<H2>Some
<SPAN STYLE="color:red">Important</SPAN>
Message</H2>
</BODY>
</HTML>
V. Forms
• Forms, in general, are used to collect information from the user.
• Forms in HTML are defined using the <FORM> element, with its opening and closing tags.
<BODY>
<FORM>…</FORM>
</BODY>
• The ACTION attribute can be used to point to a webpage that will load after the user submits
the form.
<FORM ACTION="http://www.sti.edu">
</FORM>
• The METHOD attribute specifies the HTTP method (GET or POST) to be used when forms
are submitted.
<FORM ACTION="url" METHOD="GET">
<FORM ACTION="url" METHOD="POST">

• The NAME attribute specifies a name for a form.
<INPUT NAME="text">
A. Form Elements
• To take in user input, you need the corresponding form elements, such as text fields.
• The <INPUT> element has many variations, depending on the value of TYPE attribute.
o The NAME value specifies the name of a form.
o The TEXT value creates a textbox for any alphanumeric input supplied by a user.
o The PASSWORD value creates a textbox, but with input masked by symbols so the
input cannot be seen:
<FORM>
<INPUT TYPE="text" NAME="username"><BR />
<INPUT TYPE="password" NAME="password">
</FORM>
o The RADIO value creates a radio button that can be used for selecting one choice from
a list of possible choices:
<INPUT TYPE="radio" NAME="gender" VALUE="male"> Male <BR
/>
<INPUT TYPE="radio" NAME="gender" VALUE="female"> Female
<BR />
o The CHECKBOX value creates a checkbox that can be used for selecting multiple
choices from a list:
<INPUT TYPE="checkbox" NAME="gender" VALUE="1"> Male <BR
/>

SH1802
<INPUT TYPE="checkbox" NAME="gender" VALUE="2" > Female

<BR />
o The SUBMIT value submits a form to its ACTION attribute:
<INPUT TYPE="submit" VALUE="Submit">
VI. HTML Colors

• HTML colors are expressed as hexadecimal values (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E,
F).
• Hex values for colors are written using the alphanumeric combination preceded by the pound
sign (#).
A. HTML Color Model

• A color model for HTML that is mostly based on the color wheel invented by Sir Isaac
Newton.
• Colors are displayed in combinations of red, green, and blue light (RGB).
• Hex values are written using the hashtag symbol (#), followed by either three (3) or six
(6) hex characters.
B. Color Values
• All of the possible red, green, and blue combinations potentially number over 16 million.
• This is the reason why the hexadecimal format is used for: accommodating all the
potential color combinations.
C. Background and Font Colors

o The BGCOLOR attribute can be used to change the web page’s background color.
o Attribute values take on hex values:
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="#000099">
<H1>
<FONT COLOR="#FFFFFF"> White headline </FONT>
</H1>
</BODY>
</HTML>
VII. Frames
A. The <FRAME> Tag

• An HTML page’s inherent space can be divided into frames using a special frame
document; frames divide page space and behave similarly to tables, but with more
options for modification.
• The frame document can contain <FRAME> tags and/or <FRAMESET> tags that will
modify the page’s space.
o The <FRAME> element defines one specific window (frame) within a frameset.
Each tag in a frameset can have different attributes, such as borders, scrolling, the
ability to resize, etc.

SH1802
<FRAMESET COLS="25%,50%,25%">
<FRAME SRC="frame_a.htm">
<FRAME SRC="frame_b.htm">
<FRAME SRC="frame_c.htm">
</FRAMESET>
o The <FRAMESET> element specifies the number of columns or rows in the
frameset, as well as what percentage or number of pixels of space each of them
contains.
<FRAMESET COLS="100, 25%, *"></FRAMESET>
<FRAMESET ROWS="100, 25%, *"></FRAMESET>
B. Working with Frames

• Use the <NORESIZE> attribute to specify that a user cannot resize a frame element:
<FRAME NORESIZE="noresize">
• Frame content should be defined using the SRC attribute.
• The <NOFRAMES> element provides a way for browsers that do not support frames
to view the page. The element can contain an alternative page, complete with a body tag
and any other elements:
<FRAMESET COLS="25%,50%,25%">
<FRAME SRC="a.htm" />
<FRAME SRC="b.htm" />
<FRAME SRC="c.htm" />
<NOFRAMES>Frames not supported!</NOFRAMES>
</FRAMESET>
Reference:
SoloLearn.com – HTML. Retrieved on May 07, 2018 at
https://www.sololearn.com/Play/HTML/

03 Handout 1

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

03 Handout 1

Uploaded by

Copyright:

Available Formats

SH1802

HTML Basics (Part 2)

A. The <IMG> Tag

03 Handout 1 *Property of STI

B. BORDER, ROWSPAN and COLSPAN Attributes

03 Handout 1 *Property of STI

<TD COLSPAN="2"><BR /></TD>

C. The ALIGN and BGCOLOR Attributes

IV. Inline and Block Elements

03 Handout 1 *Property of STI

<FORM ACTION="url" METHOD="POST">

03 Handout 1 *Property of STI

<INPUT TYPE="checkbox" NAME="gender" VALUE="2" > Female

VI. HTML Colors

A. HTML Color Model

C. Background and Font Colors

A. The <FRAME> Tag

03 Handout 1 *Property of STI

B. Working with Frames

03 Handout 1 *Property of STI

You might also like