How To Create A Web Page

You can create websites with your own design. When you work with web pages, images,
style sheets, etc., you need to store all the related files in a single location (folder). This helps you to:Stay organized
Upload the entire content to the remote server when you want to publish the website.
Note: You will learn about templates later in this module. To create a new website, do the following:
1.Select Site > New Site…
2.A window appears similar to the one below:

a.You can create a website with a single page by selecting One Page Site.
b.You can create a website from scratch by selecting Empty Site.
c.If you already have a website created using HTML or any other software, you can
continue to work with the website using MEW once it is imported. To import an
existing website, use the Import Site Wizard.
3.Select Empty Site and enter a name for the website, for example:
MyFirstWebsite. Click OK.

4.A website is created and you will notice a window similar to the one below:

5.Now you can create web pages for this website. Navigate to the location (example:
My Documents) where you stored the website. Notice the folder icon.

6.Content such as images, flash animations, web pages & style sheets, etc. will be
automatically stored in this folder.
Once the website is created, you need to create web pages. To create a webpage, do the following:
1.Select File > New > Page…. A window appears similar to the one below:
Create a Web page

2.You can use MEW to create web pages using HTML or ASP code, Style Sheets (CSS), etc.
Select HTML from the list and Click OK. Notice that a new page is created (figure
below).
3.Notice the file name Untitled_1.html. Being the first page of the website, this page is may be your homepage. Use a standard naming convention such as default.htm,
index.htm or home.htm and save this page. To save this page, select File > Save.
4.Type the file name as default and select Save. You need not specify .htm or .html
extension as it is automatically added to the web page.
HTML Editors such as MEW automatically append the required file extension, .html by default. You can configure the HTML editor to add the extension .htm by the following
procedure:
1.Select Tools > Page Editor Options…. The Page Editor Options dialog box appears
(figure below).

Handling File Extensions

2.Select the Authoring Tab (figure below).
3.Notice the default document type selected as HTML under Default Document:
dropdown menu and file extension selected as .html in Default HTML File
Extension: option.
You can change the settings, and, it is recommended to change Document Type
Declaration to HTML 5.
You can configure expression web to use external programs such as notepad to open
specific file types such as a style sheet. By default, style sheets open in expression web. To
modify, do the following:
1.Select Tools > Application Options…. The Application Options dialog box appears
(figure below).
2.Select the Configure Editors Tab (figure below).

3. Notice the file extensions (left pane) and application that will handle the extension
(right pane) displayed.
Note: Do NOT change any settings here for now.
The biggest advantage of HTML editors such as MEW is that the code is written for you by
the software.
1. Type the following in the body area (figure below):
a. My Homepage
b. This is a website created using a HTML Editor.
When you create content, MEW automatically intends them as paragraphs. You may notice
the paragraph element indicated (see figure above) as "p" with a box above around the
content. When you use carriage return (Enter key), MEW inserts another paragraph
similar to that of the word processing software.

2.Now select the text "My Homepage" and do the following:
a. Select the Style dropdown located in the toolbar (figure below)

b. Select Heading 1 <h1> from the list.
3. Now select the text "This is a website created using a HTML Editor." Select Heading 3
<h3> from the style dropdown list.
4.Once complete, select View (Menu) > Page > Code (or select Code located above the
status bar). You will see a screen similar to the one below:
Working with a Web page

5.
Notice the text is enclosed using heading (h1 and h3) elements. Now save this page
(CTRL+S).
Since the editor writes the code for you; you can stay focused on creating the content rather
than focusing on the code!
If you have noticed, there are pre-built standard HTML elements that you can use in a
webpage by just selecting the element from the style dropdown menu Now to switch back
to design view, select View > Page > Design.
The three views available in MEW are:
1.
Design View: This is the default view and displays only the content.
2.
Code View: This is used either when you want to view the source code written by the
HTML editor or, when you want to insert elements or code that is not available within
the HTML editor.
3.
Split View: This is used when you want to use both the Design and Code View side-by-
side.
If you want to test your web page, it is a recommended practice to test using multiple web
browsers. However you may need to set up the browser list. To specify multiple browsers,
do the following:
1.
Select File > Preview in Browser > Edit Browser List…. The Edit Browser List dialog
box appears.
Using Multiple Web Browsers

2.
 You may notice that some web browsers are added to the list by default. If you want
add a web browser (for testing), select Add…, and specify the path of the executable
file of the web browser (for example: C:\Program Files\Google\Chrome\
Application\chrome.exe).
3.
You can also use set the screen resolution here. This could be useful when you want to
test your pages for viewing on Smartphones or tablets that use different screen
resolutions.
A  blog  is  a  discussion  style  site  used  by  non-technical  (and  technical  users) users  for
creating personal web pages. Blogs are  similar  to an online personal diary and simple to
use.
You  can  use  a blog  to  convey messages  about  events,  announcements,  news, reviews,
etc. Blogs are usually managed using a web browser and this requires active  internet
connection.  You  can  also  use  offline  blog  software  to  create content first and later
publish the content when an active internet connection is available.
There are hundreds of websites that offer blog service for free. Some of the popular blogs
include:

www.WordPress.com
Web Page Layout - Blogs

www.blogger.com

www.blog.com

www.weebly.com

www.blogsome.com
In this session, you will learn how to create a blog account in WordPress.
WordPress is free web service that you can use to create a beautiful website or blog.
WordPress has support for "themes" for customizing the design of a blog. Themes can
make the blog or the webpage look attractive.

Before you start using a blog, a blog account is required. To create one, you need a web
browser and an internet connection.

Open the Web Browser.

On the address bar type https://signup.WordPress.com/signup/.You should now get
to a page with the fields Blog address, Username, Password, Email Address and
Language.

Blog Address: You must provide a  unique address  to  your WordPress Blog. This is
the address which others will use to view your blog.

Username: You should choose a username for managing this blog.

Password: Securing your WordPress blog account with a  strong password  is
important.  A  combination  of  uppercase  and  lowercase  letters  with  some digits
along with symbols would be a strong enough password. You need to enter the
password twice.
 Email  Address:  You must  provide  your  Email  Address  here.  An  activation  link
will be send to you from WordPress after you click "Create Blog".

Language:  You  can  choose  your  own  language  for  blogging  from  the  list  given.

Click Create Blog.
On doing so, you will be sent an email  for activating your blog account. Open your email
and click on  the activation  link. Once you click Activate Blog, you will be  redirected  to
your WordPress Blog Account and you should see a web page similar to the one displayed
below.
Creating a Blog Account

Now the blog is ready for use. You will be presented with the address of your blog as
displayed in the web page above; you can either double click on the link or type the address
manually in the web browser. Either action takes you to the homepage of your blog.
Once you have created a blog, you need to submit content that you want others to view. This
process ids called posting content.

To  create  a  post,  click  New  Post.  A  Window  similar  to  the  one  displayed below
appears.

Title: You must provide a title for your post; choose a tile that this post will focus on.
For example, "School Annual Day Function 2012".
Using the rich text box, you can type content that you want others to read.
Once you have finished typing the content, you need to publish the post for others to see.
Click Publish Post to publish your content. To view the post, you can type the blog address
in the address bar of the web browser; you should see your blog along with the post
(displayed below).


You can also add photos, videos, etc. to the blog using the options available in
WordPress.You  can  comment  on  posts  published  by  others.  Usually,  the comment
option is available towards the end of the post. Look for options such as Leave a comment,
Leave a reply, etc. in the blog to comment. For example, in WordPress the comment box is
located below the post and labelled as Leave a reply.


In the Enter your comment here… text box, type your comments about the post.

In the Email (required) field, type your email address.

In the Name (required) field, type your name.

In the Website filed, you may type your blog address (Optional).

Once you have typed the content in the comment area, review carefully and Click Post
Comment.
Once you click the Post Comment, you will see the blog along with your comment. 

Just a Start

Introduction to Web Design & HTML
You have surfed several websites, exchanged emails, performed online transactions,etc. in
the previous sessions. If you want to create websites like the ones you haveseen, you need
to learn a variety of technologies, tools and techniques.Web designing refers to the skills
that are required to create and manage websites.Web design as a whole refers to designing
a user interface, authoring (programming)or a combination of both. Designing a website
requires multiple skills. However, it isrecommended to master and become skilled in one
particular technology once you geta taste of various technologies involved.
Following topics are covered in this module:
HTML & CSS
Web Authoring Tools, Microsoft Expression Web
Overview of Client-side & Server-side scripting, JavaScript & VBScript
A number of markup languages such as HTML, DHTML, XML are used to create webbased
content. Apart from these, software products such as FrontPage, Dream Weaveretc are also
used to develop web based content. Web based applications are built using technologies
such as ASP (Active Server Pages), JSP (Java Server Pages), PHP (Hypertext Preprocessor),
ASP.net etc.
HTML or Hypertext Markup Language is a language used for created web pages that can be
viewed in a web browser.
Hyper - means active and all over the place! When you use a Web browser, youcan
move all over the place, without a specified order as to how to access pages/sites.
Text - You will be working with text files only.
o
o
o
o
o
Web Publishing
Understanding HTML
Digital Content Creation
Web Designing Fundamentals
Unit 5
79
Information Technology Level -2

80
o
o
Markup - To create a Web page, you will type in the text and then ?Mark up? the text.
Language - This is a method of creating something or communicating and in this case,
you are creating Web pages using a particular syntax.
HTML elements are the building blocks of a website. Web browsers interpret the
tagswritten in HTML and display a web page.
Hypertext refers to the text that can be linked to another text or page which a usercan
access. Hypertext is the underlying concept behind the World Wide Web.
HTML is developed and maintained by World Wide Web Consortium abbreviated asW3C.
When HTML was first released, there were a handful of tags available and usedfor basic
web page structures. As time evolved, several new tags and attributes wereintroduced.
Popular HTML versions include HTML 4.01 and HTML 5.0.
All you need is a text editor such as notepad to create a web page using HTML. HTML files
have the extension .htm or .html. You can open the web pages using web browsers such as
Mozilla Firefox, Internet Explorer, Google Chrome, etc.
Web browsers have the ability to display the source code used for a web page. You can use
this to enhance your knowledge To view the code, do the following:
1.
 Open the Web Browser and right-click anywhere in the web page and select View
Page Source from the context menu similar to the one below:
2.
 Notice, the source code of the web page is visible with different color codes.
The colors have no meaning in terms of function and are only used to differentiate
different sets of code.
You can save web pages for future reference using the following procedure:
1.
Select File > Save Page As…
2.
Type a file name and click Save.
When you work with a document, you create headings, sub-headings, tables, etc. to give the
document a structure. Similarly in HTML, tags or elements are used to create a web pages'
structure.
Designing Web pages using HTML
Viewing Source Code
Saving a web page
HTML Elements & Attributes - The Basics
Information Technology Level -2

81
Look at an example of an online magazine. Online magazines have articles with text
content, images, videos, links or continuation to related articles, advertisements, etc. They
appear as a single web page to visitors. Have you noticed that the headings are of varying
sizes to indicating topics and sub-topics and different from the content?
All this formatting is possible using combinations of several HTML elements.
Elements have content placed between a start tag and an end tag. Tags act as containers for
text, images and other types of content. Tags start an opening tag and end with a closing
tab, using angle brackets (<>) to define the structure.

Note: To learn to use the tags, throughout this document, you will find examples of code
displayed within dotted boxes. Copy it in a text editor, save it in your local computer and view
using web browsers.
HTML uses tags enclosed in angle brackets; most tags are used in pairs such as
<html></html>, etc. Following is a simple example of HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<p>Hello World!</p>
<!--this is an example of simple HTML code created using Notepad-->
</body>
</html>
Elements & Attributes
Writing your First HTML Code
Information Technology Level -2

82
In the above mentioned code, there are a few HTML tags used. All HTML documents start
with <html> and end with </html>. The rest of the document contains other elements
and web page content placed using elements.
Document type or DOCTYPE is an element used for indicating the version of HTML
used in a web page. This is used by the web browser to apply a set of rules for
understanding the document structure.
HTML element indicates the start and end of an HTML document. <HTML> indicates
the beginning of this HTML document and </HTML> indicates the end.
HTML is also the root of an HTML document and has two parts, Head and Body
elements.
Head element represents the header section of a document and contains
information about a web page. Head elements start with <head> and end with
</head>. This element includes all other elements that need to be executed or
understood before the content (included in the body element) is displayed to the
user.
Content placed within the <Title> and </Title> element is displayed as the title of a
web page and used by search engines to create indexes of content.

Body element represents the section that contains body content and is displayed
in the web browser. Most HTML elements are used within the body element
between <body> and </body> tags.
If you want to place hidden text in a web page, you can use the comment element (<!--
> and <--> tags). Text placed using comment element will not be displayed in a web
browser but can seen when viewing the source code. This is useful to developers or
users who would like to share their experience in writing HTML code but hide the
text from general visitors.
Attribute are used to provide additional information about an element. Attribute contains
values and some elements use multiple attributes.

o
o
o
o
?
?
HTML Attributes
Information Technology Level -2

83
Nesting
Text formatting
You can nest other elements within elements. Elements nested within another element are
referred to as a child elements and the nesting element is referred to as a parent element.

When you nest elements, you need to ensure the elements are used in proper order.
Observe the correct way of using opening and closing tags illustrated in the figure below:

You can format the text content of a web page to make it attractive by using other HTML
elements such as Headings, Bold, Italics, etc.
Heading
There are six levels of heading elements from H1 to H6. H1 has the
largest text size and H6 has the smallest heading text size.
Emphasize
To emphasize a particular text in a sentence (for example a text that
should be pronounced different), use this element. Text enclosed
within <em> and <lem> are displayed in italics.
Italics
If you want the text to be displayed in alternate voice such as a text
translated from a foreign language, technical words or present text
in typographic italics, enclose the text within <i> and </i> elements.
Html Elements & Attributes - Text Formatting
Element
Description
Information Technology Level -2

84
Strong
If you want to emphasize a text with stronger importance in a
sentence, use the strong element. Text enclosed within <strong> and
</strong> are displayed in bold.
Bold
To make the text such as keywords visually bold, enclose the text
within <b> and </b>, the bold element.
Underline
To underline the text, enclose the text within <u> and </u>, the
underline element.
Mark
To highlight the text in a sentence, enclose the text within mark
element: <mark> and </mark>
Big
If you want to display a particular text in a sentence bigger than rest
of the text in a sentence, enclose the text within the big element :
<big> and </big>.
Small
To display a particular text in a sentence as smaller than the rest of
the text in a sentence, enclose the text within the small element:
<small> and </small>.
Subscript &
Text enclosed within _and are displayed as subscripts
superscripts
and Text enclosed within ^and are displayed as
superscripts.
Pre
Text enclosed using <pre> and </pre> tags are displayed as it is (in
the example below - using a mono-space font such as Courier)
INS & DEL
Text enclosed within <del> and </del> are displayed as struck out
while text enclosed within <ins> and </ins> is underlined.
Break
To separate single lines or use multiple line spacing, use the break
element. Breaks between lines are represented through use of <br>.
No closing tag is needed.
HR
To separate sections, use a horizontal line to indicate
distinctiveness. Horizontal line is indicated through use of <hr>
element and requires no closing tag.
<!DOCTYPE html>
<html>
<head>
Sample Code - Text Elements
Information Technology Level -2

85
<title>Learn HTML</title>
</head>
<body>
<p> HTML supports six levels of headings, H1 to H6 with H1 being the largest.</p>
<h1>Main Heading</h1>
<h2>Sub heading, Level 1</h2>
<h3>Sub heading, Level 2</h3>
<h4>Sub heading, Level 3</h4>
<h5>Sub heading, Level 5</h5>
<h6>Sub heading, Level 6</h6>
<p> You are required to <em>agree</em> with our terms and conditions.</p>
<p> <i>HTML</i> is simple to learn.</p>
<p>It is important to know the common <strong>HTML Elements and attributes.
</strong></p>
<p>This an example of text displayed in <b>bold</bold>.</p>
<p>This an example of text displayed <u>underlined</u>.</p>
<p>This is an example of highlighted <mark>text.</mark></p>
<p><big>Sun</big> is the largest of all planets with 696,000 KM as it’s radius.</p>
<p><small>Mercury</small> is the smallest planet in the Solar System ever since Pluto
lost its status and was reclassified as a dwarf planet.</p>
<p>this is an example of subscript for a formula, H₂O</p>
<p>this is an example of superscript for a formula, (A+B)²</p>
<pre>
/* Hello World program */
#include<stdio.h>
main()
{
printf("Hello World");
}
</pre>
<p>this is the correct spelling of <del>entreprenaur</del>
<ins>entrepreneur</ins></p>
</body>
</html>
Information Technology Level -2

86
Referencing Elements
Sample Code - Referencing Elements
Element
Description
Quote
To include short text such as name of an author, publisher, etc. in
quotes, use the quote element. You can also use the cite attribute to
indicate the source. Text included within <q> and </q> is displayed
within quotations.
Blockquote
To include lengthy quotes, include text within <blockquote> and
</blockquote> elements.
Cite
To specify a tile of a work such as title of a book, movie, painting, etc.
include text within <cite> and </cite> elements.
Abbreviation To include abbreviations of acronyms, include the abbreviation
between <abbr> and </abbr> elements. Text included within this
element will be displayed when the cursor is moved over the text.

<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<p>HTML Tutorial
<q>Created by Author Name</q>
<blockquote cite="http://en.wikipedia.org/wiki/Google_Analytics"> Google Analytics (GA)
is a service offered by Google that generates detailed statistics about a website's traffic and
traffic sources and measures conversions and sales.</blockquote>
<p>You can learn more about web design at <cite>
http://en.wikipedia.org/wiki/Web_design</cite>
<p><abbr title=" Hypertext Markup Language">HTML</abbr> has several elements and
attributes. </p>
</p>
</body>
</html>
Information Technology Level -2

87
Tables
Images
You can create a table using the Table Element. Tables are made of rows and
columnssimilar to that of a spreadsheet. Rows are contained within table row element
<tr> and data is stored within row element <td>.
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<table>
<tr><td>Name</td><td>Age</td><td>City</td></tr>
<tr><td>Anand</td><td>17</td><td>Delhi</td></tr>
<tr><td>Rohit</td><td>23</td><td>Bangalore</td></tr>
</table>
</body>
</html>
You can include images in your web page by using the <img> image element. Use the SRC
attribute to specify the location of the image and width and height attributes to specify the
dimensions of the image. Also it is a recommended practice to use the ALT attribute for
displaying text if the image is not downloaded.
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<img src="HTML5-logo.png" alt="HTML 5 Logo, is not displayed due to an error.
Please reload this page or contact the website administrator" width="300"
height="300">
</body></html>
Information Technology Level -2

88
Working with Audio, Video & Flash
Element
Description
Audio
To include an audio clip, enclose the audio within the <audio> and
</audio> elements and point to the clip using SRC attribute. To
automatically play the audio, use the autoplay attribute. To display
controls, use the controls attribute.
Video
To include a video clip, enclose the audio within the <video> and
</video> elements and point to the clip using SRC attribute. Also use
width and height attributes to specify the dimenstions of a video clip.
Flash
To embed a flash animation, use the <embed> and </embed>
elements and point to the animation using SRC attribute.
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<audio src="pump_im.mp3" autoplay controls>
Your browser does not support the audio element.
</audio>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<video src="sample_mpeg4.mp4" height="320" width="200" controls>
Your browser does not support the Video element.
</video>
</body>
</html>
Information Technology Level -2

89
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<embed src="sample.swf" height="200" width="320">
</body>
</html>
You can also include videos from other sources such as youtube.com, etc. To include a video
from youtube.com, do the following:
1.
Go to Youtube.com
2.
Select a video clip
3.
Right-click on the video and select Copy embed html
Write the code within <body> and </body> section (sample below).
.<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<iframe width="640" height="360"
src="http://www.youtube.com/embed/v4oN4DuR7YU?feature=player_detailpage"
frameborder="0" allowfullscreen></iframe></body>
</html>
Now save and open this web page using a web browser.
Note: Refer to Youtube.com FAQ' for detailed instructions.
Information Technology Level -2

90
Html Elements & Attributes - Forms & Frames
Forms
Sample Code - Forms
Forms contain input elements such as text boxes, dropdown menus, check boxes, radio
buttons, etc. to collect information from visitors and sent to a web server for further
processing such as displaying search results or send to a database for storage.
Forms are created using <form> element along with action and method attributes.
Action attribute is used for specifying the URL to where the data needs to be submitted.
Method attribute is used for specifying the HTTP method, get or post.
POST attribute is used for storing or updating a database or for sending emails and GET
attribute is used for retrieving data.
Form element uses text boxes to collect text information and radio buttons, check boxes
and dropdown menus for collecting information through pre-defined options.
Textbox
Single-line text input box is typically used for collecting shorter text
such as usernames or passwords. Multiple-line text input boxes are
used for collecting lengtheir text such as narrative feedback, etc.
Radio Buttons Used for collecting single value from multiple values. You should use
type=radio attribute for using radio buttons in a web page.
Checkbox
Used for collecting multiple values. You should use type=checkbox
attribute for using checkboxes in a web page.
Dropdown
Used for collecting single or multiple values from a dropdown menu.
You should use the option attribute along with values to present
multiple options.
Submit
Submit button allows visitors to submit the value.
Reset
Reset button clears all the selections made.
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
Control
Description
Information Technology Level -2

91
</head>
<body>
<p>Subscribe to your weekly Newsletter</p>
<form action="http://www.example.com/signup.asp" method="post">
Name <input type="name" name="Name" size="30">
Password <input type="password" name="Name" size="30">
<textarea rows="3" name="Comments" cols="30"></textarea>
<p>I agree to the Terms and Conditions.
<input type="radio" value="Agree" name="R1"> Yes
<input type="radio" value="Diagree" checked name="R1"> No</p>
<p>10th <input type="checkbox" name="Class_10" value="ON"> 12th
<input type="checkbox" name="Class_12" value="ON"> Bachelors Degree
<input type="checkbox" name="Bachelors_Degree" value="ON"> Masters Degree
<input type="checkbox" name="Masters_Degree" value="ON"></p>
<p>This is an example of Dropdown Menu (Single Selection)</p>
<p>School Education Board<select size="1" name="School">
<option>State Board</option>
<option>Matriculation</option>
<option>CBSE</option>
</select> </p>
<p>
<input type="submit" value="Submit" name="Submit">
<input type="reset" value="Reset" name="Reset"></p>
</form>
</body>
</html>
Frames are used to display one or more pages within a single web page; collections of
different frames are referred to as a frameset. Frames are used when you want to display
different pages as a single page in a web browser.
Frames
Information Technology Level -2

92
<html>
<frameset cols="25%,50%,25%">
<frame src="sample.htm">
<frame src="sample.htm">
<frame src="sample.htm">
<noframes>
Text to be displayed in browsers that do not support frames
</noframes>
</frameset>
</html>
iframe or inline frames is an element used for embedding another document or an URL
with a web page.
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title></head>
<body>
<p>You can use iframe to include a web page.</p>
<iframe width="600" height="300" src="lesson002.htm"></iframe>
<hr>
<p>You can use iframe to view another website live.</p>
<iframe width="600" height="300" src="http://www.mozilla.org"></iframe>
<hr>
<p>You can restrict scrolling in iframe.</p>
<iframe width="600" height="300" src="http://www.wikipedia.org"
scrolling=no></iframe>
</body>
</html>