MICROSOFT DIGIGIRLZ TECH

CAMP

BEGINNING WEB DESIGN:

CREATING YOUR OWN WEB
SITE

Leah Etienne
Course contents
 Overview : Why learn to create web pages?
 Lesson 1: Web browsers
 Lesson 2: Web sites
 Lesson 3: XML
 Lesson 4: How to create HTML pages
 Lesson 5: Adding content
 Adding titles
 Changing colors and style of text
 Adding images and sound
 Adding hyperlinks
 Lesson 6: Additional formatting
Course goals
 Basic understanding of XML and HTML
 Create and view your web page
 Basic changes of appearance of the
content on the page
Overview
 So you want to create a
Web site. That's great
— a Web site can be a
powerful and efficient
way to communicate
with people.
 This course will teach
you how to create a
Web site. It will also
teach you things you
should know before
creating one.
Overview:
Why learn to create a web pages?
 Easy to learn
 Design the pages as you like
 Control content on your pages
 Beg, borrow and steal
Lesson 1: What’s a web browser
really doing?
 A browser interprets HTML and displays the page
in a structured format
 Microsoft Internet Explorer, Mozilla Firefox,
Netscape Navigator, and Opera are examples of
popular Web browsers
 Different browsers render HTML pages differently
 Designing Web sites to display well across
different browsers is called “cross-browser
compatibility”
 Which web browser do you use?
 What do you like/ dislike about your browser?
 Can you search for your favorite movie actress?
 Did you get directed to imdb.com?
Lesson 2: Web sites

•A Web site is a group of HTML

pages and graphics that are
interconnected with hyperlinks.

•Web sites can also contain

images, movies, programs -
any kind of file.
Lesson 2: Web sites
•To put your site on a Web
server, you publish it. Publishing
generally means copying all of
the files to a remote location on
a server.
Lesson 2: Web sites
•Other people will be able to see your Web
site on the World Wide Web if: (Pick one
answer.)
1. You do nothing else but create your site on
your own hard drive.

2. It is available on a Web server.

3. The site is interesting to look at.

 Lesson 3: XML
How would you display this information
in each of these objects?

<contactinfo>
<firstname>Leah</firstname>

<lastname>Etienne</lastname>
<address>One Microsoft
Way</address>
<tel>+12221110000</tel>
</contactinfo>
 Lesson 3: XML
XML tags describe what XML data means

•Because the tags describe the

structure and meaning of the
data, any computer program or
system that supports XML can
understand that data and put it
to use.
Sample XML data file
for a cat named Izzy
Lesson 3: XML
Lesson 3: Well formed XML
 All elements must have both open and
close tags (unless they're empty).
 All empty elements must contain an
empty element identifier (/) at the end of
the begin tag.
 Elements must be nested properly.
Every tag must be inside one root
element tag.
 Tags are case sensitive
Lesson 3: What’s wrong with this
XML document?
<contactinfo>
<firstname>Leah
</lastname>
<lastname>Etienne
</firstname>
<address>One Microsoft
Way

<tel>+12221110000</telephone>
<email />
</ContactInfo>
<shoeinfo>
<size>11</size>
<color>red</color>
</shoeinfo>
Lesson 4: HTML
 What is HTML
 HTML = Hypertext Markup Language
 Hypertext allows for “hyper linking”

 Hyper linking = the Information Highway (or “surfing

the Web”)
 Markup: Text is “marked” using HTML tags

 HTML tags tell the browser how to structure the

information on the page
 XHTML is HTML document that conforms to XML
standards
 Visit http://w3.org for more details
Lesson 4: HTML
 HTML Tags
-Tags are the building blocks of a Web
page
 Tags begin with < and end with >
 Most tags have an opening tag (<tag>) and
a closing tag (</tag>)
 Some tags have attributes

 <p style=“color: pink”></p>

Lesson 5: Adding Content
 Visual Web Developer can be downloaded for free
from http://www.asp.net.
 WYSIWYG editor. Switch between HTML and actual
design.
 Open Visual Web Developer
 File Menu , select “New Web Site”
 Select “Empty web Site”

 Change location to C:\digiGirlzWeb

 Hit Enter
Lesson 5: Adding Content
 In the Solution explorer, select
“C:\digiGirlzWeb” project
 Right Click and “Add a new item”
 Select “HTML page” icon
 Rename the page to index.htm
 You should see some HTML created on your
new blank page.
 Save the page.
 Hit CTRL+F5 to view the page in a browser
 Get familiar with the “Source” and “Design”
tabs.
Lesson 5: Adding a title
 Hit the “Source” tab to edit HTML source
code
 Find <title></title>
 Type your name and Home Page in
between the opening and closing title tag
(example: Leah’s Home Page)
 On the File menu, click Save
 Hit the “Design” tab to view the design
Lesson 5: Adding body, headings
and paragraphs
 Hit the “Source” tab to edit HTML again
 Find the <body> tag
 Under <body>, type <h1>
 The editor should automatically fill in the closing tag </h1>
 In between <h1> and </h1>, type “Welcome to my home
page”
 Type <p>
 The editor should automatically fill in the closing tag </p>
 In between <p> and </p>, write a short paragraph about
yourself, including your name, where you were born, your
favorite color, and your favorite movie star or singer.
 Save your work and hit the “Design” tab to view the design
Lesson 5: Adding hyperlinks
 Find the name of your favorite movie star
or singer
 In front of the name, type <a href="">
and after the name type </a>
 In the quotation marks, copy and paste
the URL from our earlier browser activity
 On the File menu, click Save
 View the page on the “Design” tab
Lesson 5: Images and
sound
 The <img> tag is used for images
 The src attribute points to a location
 The alt attribute is alternate text to describe he images of
for some reason it cannot be displayed
 type <img src="“ alt=“” /> somewhere between the <p>
tags
 In the src quotation marks, type digigirlz.gif
 In the alt quotation marks, type “This is our Digigirlz icon”
 On the File menu, click Save
 Switch back to the “Design” page
 For sound use <embed>
Lesson 5: Colors and Style
 Styles can be defined by :-
 a separate document and linked to the HTML
page or
 Inline within the HTML tag

 We’re going to use inline styles to change

style for text enclosed within <p>
 <p style="color: red; font-family: verdana”>
This is a paragraph </p>
 What other styles can you come up with?
Lesson 6: Additional ways
to format
 First sketch the layout of your page on
paper
 Decide which columns and rows you will
need
 Try adding style=“margin-left : 20px”
 The <table> tag
Congratulations!
 You’ve just created your first Web page
 You can create additional pages and link
them to your home page
 Use the Resource List to learn more and
build bigger and better Web sites
Resources
CSS Zen Garden
http://csszengarden.com/

World wide web consortium

http://w3.org

Blogs and Journals

 Blogger

 A free online journal or Web log service (also known as a blog)

 http://www.blogger.com/
 Live Journal
 A free online community and personal publishing (blogging) tool
 http://www.livejournal.com/
Resources
HTML Learning and Tutorial Sites
 Lissa Explains It All
 HTML Help and Tutorials
 http://www.lissaexplains.com/html.shtml
 Dave’s HTML Interactive Tutorial for
Beginners
 http://www.davesite.com/webstation/html/
 WebMonkey
 Authoring: HTML Basics
 http://hotwired.lycos.com/webmonkey/authorin
g/html_basics/index.html
 NCSA: A Beginner’s Guide to HTML
 http://archive.ncsa.uiuc.edu/General/Internet/WWW