Basic Marketing, 16e - McGraw Hill Higher Education
Download
Report
Transcript Basic Marketing, 16e - McGraw Hill Higher Education
Extended
Learning Module
F
Building a Web Page
with HTML
McGraw-Hill/Irwin
Copyright © 2013 by The McGraw-Hill Companies, Inc. All rights reserved.
HYPERTEXT MARKUP LANGUAGE
(HTML)
HTML – the language you use to
create a Web site
HTML allows you to
Specify the content
Specify the formatting for content
Mod F-2
HYPERTEXT MARKUP LANGUAGE
(HTML)
To create a Web site, you must
create an HTML document
HTML document – file that contains
your Web site content and the HTML
formatting instructions
Web page is a view of an HTML
document from within a Web browser
Mod F-3
Creating an HTML Document
Use any text editor
Our choice is Notepad
Click on Start
Point at All Programs
Point at Accessories
Click on Notepad
Create HTML document and save
with htm or html extension
Mod F-4
HTML Document Sections
HTML tag – specifies the formatting
and presentation of information in a
Web site
Structure tags – HTML tags that
set up the necessary sections
Two major sections in an HTML
document
Head section
Body section
Mod F-5
HTML Document Sections
Body
section
Structure
tags
Mod F-6
HTML Tags
Usually are <tagname> and
</tagname>
Entire HTML document
<html>
<head>
</head>
<body>
</body>
</html>
Mod F-7
HTML Document
Mod F-8
Resulting Web Page
Image
Lists
Mod F-9
Working Locally
For all to see, Web site must be in
Web space
Web space – storage area where
you keep your Web site
While building…
Keep local on your computer
Use browser to view
Mod F-10
Working Locally
To view a local Web site in Internet
Explorer
Click on File and Open
Click on Browser
Choose folder and HTML document
name
Click on Open and OK
Mod F-11
BASIC TEXT FORMATTING
Basic formatting tags – HTML tags that
allow you specify formatting for text
Strong (bold) - <strong> and
</strong>
Underline - <u> and </u>
Emphasis (italics) - <em> and </em>
Line break - <br>
Horizontal rule - <hr>
Mod F-12
BASIC TEXT FORMATTING
Many different
basic
formatting tags
Mod F-13
BASIC TEXT FORMATTING
Mod F-14
CREATING HEADINGS
Heading tags – make certain
information, such as titles, stand out
<hnumber> and </hnumber>,
where number is from 1 to 6
<h1> and </h1> - largest
<h6> and </h6> - smallest
Mod F-15
CREATING HEADINGS
Heading tags
Mod F-16
CREATING HEADINGS
Mod F-17
ADJUSTING TEXT COLOR
Default text color is black, can be
changed
<font color=“color name”> and
</font>
Example
I like the color <font
color=“blue”>blue</font>.
Reads as… I like the color blue.
Mod F-18
ADJUSTING TEXT COLOR
Font colors
Mod F-19
ADJUSTING TEXT COLOR
Mod F-20
ADJUSTING TEXT SIZE
Default is usually 3; can be changed
<font size=“font size”> and
</font>
Example
<font
size=“10”>A</font>stronomy is
fun
Reads as…
Astronomy is fun.
Mod F-21
ADJUSTING TEXT SIZE
Font sizes
Mod F-22
ADJUSTING TEXT SIZE
Mod F-23
CHANGING BACKGROUND COLOR
Default is white; can be changed
<body bgcolor=“color name”>
with no ending tag
Example
<body bgcolor=“green”>
Changes background color to green
Mod F-24
CHANGING BACKGROUND COLOR
Change background
to green
Mod F-25
ADDING LINKS TO A WEB SITE
Link (hyperlink) – clickable text or
image that takes you to another site
or page
Three types
1.
2.
3.
Links to other Web pages or sites
Links to downloadable files
Links to e-mail
Mod F-26
ADDING LINKS TO A WEB SITE
Format of a link tag is…
<a
href=“address/filename”>scree
n text</a>
Example
To provide a link to MTV’s Web site
<a href=“www.mtv.com”>Visit
MTV</a>
Displays as Visit MTV
Mod F-27
ADDING LINKS TO A WEB SITE
Link to
another
site or
page
Mod F-28
ADDING LINKS TO A WEB SITE
Links usually
appear blue and
underlined
Mod F-29
ADDING LINKS TO A WEB SITE
For a downloadable file
Replace Web site address with file
name
Example
<a href=“workbook1.xls”>My
Excel Workbook</a>
Displays as My Excel Workbook
Lets someone download your Excel
workbook
Mod F-30
ADDING LINKS TO A WEB SITE
For a link to e-mail
Replace address/filename with
mailto: and your e-mail address
Example
<a href=“mailto:[email protected]>Email me</a>
Displays as E-mail me
Mod F-31
ADDING LINKS TO A WEB SITE
Link to
downloadable
file
Link to email
Mod F-32
ADDING LINKS TO A WEB SITE
Mod F-33
ADDING IMAGES
Images can be useful or worthless
To insert an image
<img src=“filename.extension”>
Image file must be in Web space
Is usually jpg or gif format
Cannot use bmp file formats
Mod F-34
ADDING IMAGES
Mod F-35
ADDING IMAGES
Mod F-36
Adjusting Image Sizes
Can adjust image size with height
and width parameters
Provide sizing in pixel count
Example
<img src=“indy.jpg” height=100
width=100>
Size would be approximately 1.5 inches
square
Mod F-37
Adjusting Image Position
Can adjust location; default is left;
use align parameter
align=“right” is right justified
<center><img src…></center>
is centered
Mod F-38
ADDING IMAGES
Mod F-39
ADDING IMAGES
Mod F-40
USING A TEXTURED BACKGROUND
Can use an image as background
Browser will “tile” image to fill page
<body
background=“filename.extension”>
File must be in Web space
Mod F-41
USING A TEXTURED BACKGROUND
Textured
background
Mod F-42
CREATING AND USING LISTS
Lists can be
Numbered
Unnumbered (bulleted)
Format is (for numbered)
<ol>
<li>list content
<li>list content
</ol>
Mod F-43
CREATING AND USING LISTS
For unnumbered or bulleted list,
replace “o” with “u”
Format is (for unnumbered)
<ul>
<li>list content
<li>list content
</ul>
Mod F-44
CREATING AND USING LISTS
List tags
Mod F-45
CREATING AND USING LISTS
Lists
Mod F-46