Download presentation
Presentation is loading. Please wait.
1
Creating a Home Page in HTML
BCIS 82 Marge Hohly
2
HTML HyperText Mark-up Language a coding language for Web pages.
“Mark-up is an old publishing term referring to typesetting instructions that were written in the margins.” By “marking-up” the original document with special instructions called TAGs, we use the TAGs to indicate information about formatting and positioning of text and links.
3
Web page purpose WWW site is to provide its visitors with information
Design a web site Define ‘Who’ your target audience is Define the purpose of your web site (Why) Define ‘What’ will be displayed on your site Define the ‘Where’ - the structure of your web site.
4
Basic Web site structure
Most common structure is the ‘Floating Structure’ Home page is like a ‘Main Menu’ of your site Contains links to other pages in your site Need to return to home page to go to another section of site.
5
Basics Web pages are written in Hypertext Markup Language (HTML)
A web page is a document destined for the WWW Upon delivery, receiving computer converts the page into a formatted viewable image
6
Basic HTML Web page contains ‘Text’ and ‘HTML tags’
HTML tag consists of letters certain punctuation marks and/or numbers encased in angular brackets < >
7
HTML Tags Most HTML tags exist in pairs First tag activates a feature
Second tag deactivates a feature Example: <P> starts a paragraph and </P> ends the paragraph
8
HTML Page structure A page starts with <HTML> and ends with </HTML> Page has two parts: Head and Body Header contains for example: page Title (appears on top bar of Window). Title should note exceed 5 or 6 words Title used by all visitors, search engines, etc to refer to your page
9
Sample basic Web page <HTML> <Head> <Title> Title of Home Page </Title> </Head> <Body> Your web page goes here </Body> </HTML>
10
Heading <H1> </H1> Largest <H2> </H2> <H3> </H3> <H4> </H4> <H5> </H5> <H6> </H6> Smallest Same importance on page same level of heading. Only one H1 heading per page
11
Unordered List Bullet list <UL> start of unordered list <LI> </LI> a line item <LI> </LI> a line item </UL> end of unordered list
12
Ordered List Numbered list <OL> start of ordered list <LI> </LI> a line item <LI> </LI> a line item </OL> end of ordered list
13
Link <A HREF=“URL or Filename.ext”> Link text </A> Non-underlined text <A HREF=“ </A> A Search engine <A HREF=“ House</A>
14
Images GIF (Graphics Interchange Format)
commonly used with non-photographic images of 256 colors developed by CompuServe for members JPEG or JPG (Joint Photographics Expert Group) format used to store and compress photographic images millions of colors available
15
Image Link In-line images <IMG SRC=“filename.ext”>
<IMG> tag is EXTREMELY case-sensitive <IMG SRC=“anim.gif”> <IMG SRC=“woods.jpg”>
16
Misc. HTML code <BR> causes a line break
<P> </P> marks a paragraph <HR> a horizontal line (horizontal rule) <B> --- </B> bold <I> --- </I> italics <U> --- </U> underlined
17
HTML Usually after editing your HTML text file, you save it with the extension html. However Notepad only allows you to save a file with 3 extension characters, so save it as XXXXXXXX.htm After saving, best to try it by viewing it. Open your web page in a browser to view. Check the appearance of your Web page to make sure it look good.
18
Design issues Avoid frequent font change Go easy on the images
Images take a long time to load Avoid frequent font change Too many different fonts may cause confusion The Web is dynamically changing A link is valid today, may not be available tomorrow. Observer the copyright law If you are using someone’s image or file, make sure to give proper reference and credit to the owner.
Similar presentations
