The Content
Management Team &
HTML
The Content Management Team
Editors
Site planners
Developers
Administrators
Stakeholders
Editors
Editors are responsible for creating, editing, and managing the content inside
the CMS.
Several other specific editorial roles are common.
Approvers
Marketers
UGC/community managers
Translators
Site Planners
Several sub roles exist:
Content strategists
User experience (UX) designers and information architects
Visual designers
Developers
There are multiple categories of tasks that define different roles
CMS configuration
Backend (server) development
Frontend (client) development or templating
Administrators
CMS administrator
Server administrator
Database/storage administrator
Stakeholders
In general, stakeholders are looking to a CMS to do one of two things:
Increase revenue.
Reduce costs and/or risk.
From HTML to CMSs & Basic
HTML & CSS
Static HTMLs
Templates
Home
Page
Page Page Page Page
1 2 3 n
Static HTMLs (contd.)
Templates
Home
Page
Page Page
n n
Page Page Page Page Page
Page 1 2 3 1 n
n
Page Page Page
n n Page n
Page n
n
Static HTMLs (contd.)
Templates
Home
Page
Page
n
Page Page Page Page Page Page
Page
Page Page n
1 2 Page 3 1 n
n n n n
Page Page Page Page
Page Page Page Page
n Page n 1 2 n 3 Page 1 n
n Page n
n
Page Page Page Page
n n Page n
n n
Page
n
Content Management Systems (contd.)
HTML
Content Design
Print
Input Template
Content Design
Forms
Database WML Database
XML
Content Management Systems (contd.)
Expert
Input Design
Forms Forms
HTML
Staff Input
Forms Content Design
Print
Faculty Template
Input
Content Design
Forms
Database WML Database
User-driven Input
FAQ Forms XML
Input
Forms
Syndicated News
From Htmls to CMSs
Separating Content and
Presentation
How CMS works
Basic information flow
1. Template is designed
2. Content is entered as plain-text or HTML into
database
3. Content is placed in a template for display to the
end user
Page Page
Content Template
How CMS works (contd.)
Publishing
User
Interface
Application HTML
Server Templates
Pages
Authoring
Templates
Database
How CMS works (contd.)
User Research Business Strategy
Publishing Process Info Architecture Content
Research Definition Audit
Content/Metadata
Workflow
Model
Authoring Presentation
Templates Templates
Content Presentation
Web Pages
How CMS works (contd.)
HTML
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.
A Simple HTML Document
<!DOCTYPE html> defines that this document is an HTML5 document
<html> root element of an HTML page
<head> meta information about the HTML page
<title>Page Title</title> specifies a title for the HTML page (which is shown in
the browser's title bar or in the page's tab)
</head>
<body> defines the document's body, and is a container for all the
visible contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
<h1>My First Heading</h1> defines a large heading
<p>My first paragraph.</p> define a paragraph
</body>
</html>
What is an HTML Element?
<h1>My First Heading</h1>
<p>My first paragraph.</p>
HTML Page Structure
Tags
The essence of HTML programming is tags
A tag is a keyword enclosed by angle brackets ( Example: <I> )
There are opening and closing tags for many but not all tags; The affected
text is between the two tags
The opening and closing tags use the same command except the closing tag
contains and additional forward slash /
For example, the expression <B> Warning </B> would cause the word
‘Warning’ to appear in bold face on a Web page
Nested Tags
Whenever you have HTML tags within other HTML tags, you must close the
nearest tag first
Example:
<H1> <I> The Nation </I> </H1>
Structure of a Web Page
All Web pages share a common structure
All Web pages should contain a pair of <HTML>, <HEAD>, <TITLE>, and <BODY>
tags
<HTML>
<HEAD>
<TITLE> Example </TITLE>
</HEAD>
<BODY>
This is where you would include the text and images on your Web page.
</BODY>
</HTML>
HTML Editors
Web pages can be created and modified by using professional HTML editors.
However, for learning HTML a simple text editor like Notepad (PC) or TextEdit
(Mac) is recommended.
Save the file with an extension .htm or .html
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps
browsers to display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
<!DOCTYPE html>
Text Formatting Tags
<B> Bold Face </B>
<I> Italics </I>
<U> Underline </U>
<P> New Paragraph </P>
<BR> Next Line
Changing the Font
The expression <FONT FACE = “fontname”> …
</FONT> can be used to change the font of the
enclosed text
To change the size of text use the expression
<FONT SIZE=n> …. </FONT> where n is a number
between 1 and 7
Changing the Font
To change the color, use <FONT
COLOR=“red”>…. </FONT>; The color can
also be defined using hexadecimal
representation ( Example: #ffffff )
These attributes can be combined to change
the font, size, and color of the text all at
once; For example, <FONT SIZE=4
FACE=“Courier” COLOR=“red”> …. </FONT>
Headings
Web pages are typically organized into sections with headings; To create a
heading use the expression <Hn>….</Hn> where n is a number between 1 and
7
In this case, the 1 corresponds to the largest size heading while the 7
corresponds to the smallest size
Aligning Text
The ALIGN attribute can be inserted in the <P> and <Hn> tags to right justify,
center, or left justify the text
For example, <H1 ALIGN=CENTER> The New York Times </H1> would create a
centered heading of the largest size
Comment Statements
Comment statements are notes in the HTML code that explain the important
features of the code
The comments do not appear on the Web page itself but are a useful
reference to the author of the page and other programmers
To create a comment statement, use the <!-- …. --> tags
The Infamous Blink Tag
It is possible to make text blink using the <BLINK> … </BLINK> tag
However, it is best to use this feature at most sparingly or not at all; What
seems like a good idea to a Web designer can become very annoying to a Web
user
The <BLINK> tag is not supported by Internet Explorer
Page Formatting
To define the background color, use the BGCOLOR attribute in the <BODY> tag
To define the text color, use the TEXT attribute in the <BODY> tag
To define the size of the text, type <BASEFONT SIZE=n>
Example
<HTML>
<HEAD>
<TITLE> Example </TITLE>
</HEAD>
<BODY BGCOLOR=“black” TEXT=“white”>
<BASEFONT SIZE=7>
This is where you would include the text and images on your Web
page.
</BODY>
</HTML>
Inserting Images
Type <IMG SRC = “image.ext”>, where image.ext indicates the location of the
image file
The WIDTH=n and HEIGHT=n attributes can be used to adjust the size of an
image
The attribute BORDER=n can be used to add a border n pixels thick around the
image
Alternate Text
Some browsers don’t support images. In this case, the ALT attribute can be
used to create text that appears instead of the image.
Example:
<IMG SRC=“satellite.jpg” ALT = “Picture of satellite”>
Links
A link lets you move from one page to another, play movies and sound, send
email, download files, and more….
A link has three parts: a destination, a label, and a target
To create a link type
<A HREF=“page.html”> label </A>
Anatomy of a Link
<A HREF=“page.html”> label </A>
In the above link, “page.html” is the destination. The destination specifies
the address of the Web page or file the user will access when he/she clicks on
the link.
The label is the text that will appear underlined or highlighted on the page
Example: Links
To create a link to CNN, I would type:
<A HREF=“http://www.cnn.com”>CNN</A>
To create a link to MIT, I would type:
<A HREF=“http://www.mit.edu”>MIT</A>
Changing the Color of Links
The LINK, VLINK, and ALINK attributes can be inserted in the <BODY> tag to
define the color of a link
LINK defines the color of links that have not been visited
VLINK defines the color of links that have already been visited
ALINK defines the color of a link when a user clicks on it
Using Links to Send Email
To create a link to an email address, type <A HREF=“mailto:email_address”>
Label</A>
For example,
<A HREF=“mailto: ktdunn@mit.edu”>email Katie Dunn</A>
Anchors
Anchors enable a user to jump to a specific place on a Web site
Two steps are necessary to create an anchor. First you must create the anchor
itself. Then you must create a link to the anchor from another point in the
document.
Anchors
To create the anchor itself, type <A NAME=“anchor name”>label</A> at the
point in the Web page where you want the user to jump to
To create the link, type <A HREF=“#anchor name”>label</A> at the point in
the text where you want the link to appear
Example: Anchor
<A HREF="#chap2">Chapter Two</A><BR>
Link
<A NAME="chap2">Chapter 2 </A> Ancho
r
Ordered Lists
Ordered lists are a list Here’s how it would
of numbered items. look on the Web:
To create an ordered
list, type:
<OL>
<LI> This is step one.
<LI> This is step two.
<LI> This is step three.
</OL>
More Ordered Lists….
The TYPE=x attribute allows you to change the the kind of symbol that
appears in the list.
A is for capital letters
a is for lowercase letters
I is for capital roman numerals
i is for lowercase roman numerals
Unordered Lists
An unordered list is a Here’s how it would
list of bulleted items look on the Web:
To create an
unordered list, type:
<UL>
<LI> First item in list
<LI> Second item in list
<LI> Third item in list
</UL>
More Unordered Lists...
The TYPE=shape attribute allows you to change the type of bullet that
appears
circle corresponds to an empty round bullet
square corresponds to a square bullet
disc corresponds to a solid round bullet; this is the default value
Forms
What are forms?
• An HTML form is an area of the document that allows users to enter
information into fields.
• A form may be used to collect personal information, opinions in polls, user
preferences and other kinds of information.
Forms
There are two basic components of a Web form: the shell, the part that the
user fills out, and the script which processes the information
HTML tags are used to create the form shell. Using HTML you can create text
boxes, radio buttons, checkboxes, drop-down menus, and more...
Example: Form
Text Box
Drop-down Menu
Radio Buttons
Checkboxes
Text Area
Reset Button
Submit Button
The Form Shell
A form shell has three important parts:
the <FORM> tag, which includes the address of the script which will process the
form
the form elements, like text boxes and radio buttons
the submit button which triggers the script to send the entered information to the
server
Creating the Shell
To create a form shell, type <FORM METHOD=POST ACTION=“script_url”>
where “script_url” is the address of the script
Create the form elements
End with a closing </FORM> tag
Creating Text Boxes
To create a text box, type <INPUT TYPE=“text” NAME=“name” VALUE=“value”
SIZE=n MAXLENGTH=n>
The NAME, VALUE, SIZE, and MAXLENGTH attributes are optional
Text Box Attributes
The NAME attribute is used to identify the text box to the processing
script
The VALUE attribute is used to specify the text that will initially
appear in the text box
The SIZE attribute is used to define the size of the box in characters
The MAXLENGTH attribute is used to define the maximum number of
characters that can be typed in the box
Example: Text Box
First Name: <INPUT TYPE="text" Here’s how it would
NAME="FirstName" VALUE="First
Name" SIZE=20> look on the Web:
<BR><BR>
Last Name: <INPUT TYPE="text"
NAME="LastName" VALUE="Last
Name" SIZE=20>
<BR><BR>
Creating Larger Text Areas
To create larger text areas, type <TEXTAREA NAME=“name” ROWS=n1
COLS=n2 WRAP> Default Text </TEXTAREA>, where n1 is the height of the text
box in rows and n2 is the width of the text box in characters
The WRAP attribute causes the cursor to move automatically to the next line
as the user types
Example: Text Area
<B>Comments?</B>
<BR>
<TEXTAREA NAME="Comments" ROWS=10 COLS=50
WRAP>
</TEXTAREA>
Creating Radio Buttons
To create a radio button, type <INPUT TYPE=“radio” NAME=“name”
VALUE=“data”>Label, where “data” is the text that will be sent to the server
if the button is checked and “Label” is the text that identifies the button to
the user
Example: Radio Buttons
<B> Size: </B>
<INPUT TYPE="radio" NAME="Size"
VALUE="Large">Large
<INPUT TYPE="radio" NAME="Size"
VALUE="Medium">Medium
<INPUT TYPE="radio" NAME="Size"
VALUE="Small">Small
Creating Checkboxes
To create a checkbox, type <INPUT TYPE=“checkbox” NAME=“name”
VALUE=“value”>Label
If you give a group of radio buttons or checkboxes the same name, the user
will only be able to select one button or box at a time
Example: Checkboxes
<B> Color: </B>
<INPUT TYPE="checkbox" NAME="Color"
VALUE="Red">Red
<INPUT TYPE="checkbox" NAME="Color"
VALUE="Navy">Navy
<INPUT TYPE="checkbox" NAME="Color"
VALUE="Black">Black
Creating Drop-down Menus
To create a drop-down menu, type <SELECT NAME=“name” SIZE=n MULTIPLE>
Then type <OPTION VALUE= “value”>Label
In this case the SIZE attribute specifies the height of the menu in lines and
MULTIPLE allows users to select more than one menu option
Example: Drop-down Menu
<B>WHICH IS FAVOURITE FRUIT:</B>
<SELECT>
<OPTION VALUE="MANGOES">MANGOES
<OPTION VALUE="PAPAYA">PAPAYA
<OPTION VALUE="GUAVA">GUAVA
<OPTION VALUE="BANANA"> BANANA
<OPTION VALUE="PINEAPPLE">PINEAPPLE
</SELECT>
Creating a Submit Button
To create a submit button, type <INPUT TYPE=“submit”>
If you would like the button to say something other than submit, use the
VALUE attribute
For example, <INPUT TYPE=“submit” VALUE=“Buy Now!”> would create a
button that says “Buy Now!”
Creating a Reset Button
To create a reset button, type <INPUT TYPE=“reset”>
The VALUE attribute can be used in the same way to change the text that
appears on the button
Tables
Tables can be used to display rows and columns of data, create multi-column
text, captions for images, and sidebars
The <TABLE> tag is used to create a table; the <TR> tag defines the beginning
of a row while the <TD> tag defines the beginning of a cell
Adding a Border
The BORDER=n attribute allows you to add a border n pixels thick around the
table
To make a solid border color, use the BORDERCOLOR=“color” attribute
To make a shaded colored border, use BODERCOLORDARK=“color” and
BORDERCOLORLIGHT=“color”
Creating Simple Table
<TABLE BORDER=10>
Here’s how it would
<TR>
look on the Web:
<TD>One</TD>
<TD>Two</TD>
</TR>
<TR>
<TD>Three</TD>
<TD>Four</TD>
</TR>
</TABLE>
Adjusting the Width
When a Web browser displays a table, it often adds extra space. To eliminate
this space use the WIDTH =n attribute in the <TABLE> and <TD> tags
Keep in mind - a cell cannot be smaller than its contents, and if you make a
table wider than the browser window, users will not be able to see parts of it.
Centering a Table
There are two ways to center a table
Type <TABLE ALIGN=CENTER>
Enclose the <TABLE> tags in opening and closing <CENTER> tags
Wrapping Text around a Table
It is possible to wrap text around a table. This
technique is often used to keep images and
captions together within an article.
To wrap text around a table, type <TABLE ALIGN =
LEFT> to align the table to the left while the text
flows to the right.
Create the table using the <TR>, <TD>, and
</TABLE> tags as you normally would
Adding Space around a Table
To add space around a table, use the HSPACE=n and VSPACE=n attributes in
the <TABLE> tag
Example:
<TABLE HSPACE=20 VSPACE=20>
Spanning Cells Across Columns
It is often necessary to span one cell across many columns. For example, you
would use this technique to span a headline across the columns of a
newspaper article.
To span a cell across many columns, type <TD COLSPAN=n>, where n is the
number of columns to be spanned
Spanning Cells Across Rows
To span a cell across many rows, type <TD ROWSPAN=n>, where n is the
number of rows
Aligning Cell Content
By default, a cell’s content are aligned horizontally to the left and and
vertically in the middle.
Use VALIGN=direction to change the vertical alignment, where “direction” is
top, middle, bottom, or baseline
Use ALIGN=direction to change the horizontal alignment where “direction” is
left, center, or right
Controlling Cell Spacing
Cell spacing is the space between cells while cell padding is the space around
the contents of a cell
To control both types of spacing, use the CELLSPACING =n and CELLPADDING=n
attributes in the <TABLE> tag
Nesting Tables
Create the inner table
Create the outer table and determine which cell of
the outer table will hold the inner table
Test both tables separately to make sure they work
Copy the inner table into the cell of the outer table
Don’t nest too many tables. If you find yourself doing
that, find an easier way to lay out your Web page
Changing a Cell’s Color
To change a cell’s color, add the BGCOLOR=“color” attribute to the <TD> tag
Example:
<TD BGCOLOR=“blue”>
Dividing Your Table into Column Groups
You can divide your table into two kinds of column groups: structural and non-
structural.
Structural column groups control where dividing lines are drawn; Non-
structural groups do not
Both let you format an entire column of cells at once
Column Groups
To create structural column groups, type
<COLGROUP SPAN=n> after the <TABLE> tag,
where n is the number of columns in the group
To create non-structural column groups, type
<COL SPAN=n>, where n is the number of columns
in the group
Dividing Table into Horizontal Sections
You can also create a horizontal section consisting of one or more rows. This
allows you to format the rows all at once
To create a horizontal section, type <THEAD>, <TBODY>, or <TFOOT> before
the first <TR> tag of the section
Netscape does not support these tags
