Basic HTML - Wave Creative

Transcript Basic HTML - Wave Creative

Basic Web Design
UVI CELL
Dave Gilliss
[email protected]
Your Web Site
 What is the goal of your site?
 Inform
 Sell
 Display
 Who is your audience?
 Why are they coming to your site?
Brainstorming
 Think of all the items that will help your site meet
your objectives
 Photos of items or people
 Staff bios
 Hours of operation
 Physical and mailing address
 Phone numbers
 Links to other sites
 etc.
Brainstorming
(continued)
 Try not to think in terms of “Pages” at this
point
 Be as specific as you can
 There are NO wrong answers or items in
brainstorming
Information Architecture (IA)
 Organize data into logical and intuitive groups
 Write down all the elements and ideas from the
brainstorming session on index cards or post-it notes
 Move the cards around until groups are finalized
 Name groups as specifically as you can
 Begin gathering the actual content for each
element on the cards (this can take a long time if others are
responsible for content so it’s best to ask for it before you actually need
it!)
Best Practices
or things that I’ve learned the hard way
 The homepage should always be named
 default.html or
 index.html
 Always test to make sure these work as some web
servers use a different name for the default document
 Never use spaces in a file or folder name
 Use “contact_page.html” or “ContactPage.html”
 NOT “contact page.html”
Best Practices
or things that I’ve learned the hard way (continued)
 Create directories with descriptive names that are
easy to understand
 Such as “bios” or “StaffBios”
 The default page for each directory should be
named either:
 default.html or
 index.html
 This makes it easy to give out links that bypass the
homepage
 www.mycompany.com/bios
 www.mycompany.com/products
Best Practices
or things that I’ve learned the hard way (continued)
 Store images and photos in an “images”
directory
 Can mirror your main directory structure in a
central location
 /images/staff/
 Or you can store them in the sub directory of
each of your main directories
 /staff/images/
Basic HTML
Hyper-Text Markup Language
Writing HTML
 You can use any word processor or text
editing program on a PC or Mac
 Notepad
 MS Word
 Word Pad
Saving a HTML File in Word
 Using MS Word
 Select “Save as” from the file menu
 Save document as “Text”
 Extension should always be .html
Saving a HTML File in a Text
Editor - Notepad
 Text is already in correct format
 No margin, borders, or text styles are saved in a
plain text editor
 No need to select “Save as” each time
 Save file with .html extension
HTML Text Tags
 Tags are items that tell a web browser how to
display information on the web page
 Most tags have 2 parts
 On 
 Off 
 The first tag (on) tells the browser to do something
 The second tag (off) tells the browser to stop
 The will make the text bold but only
inside the two tags
Common HTML Tags
 Text tags
 Bold
 Italics
 Layout tags
 Paragraph break
 Leaves a space between lines of text
 Line break
 Any text following this tag will be on the line directly below it
 <HR>Horizontal rule
 Places a thin rule across the page
Basic HTML Page Tags
 All pages should have the <HTML> tag
first and last on a page
 The <Title> of the page goes next
 The title is the text which will appear in the bar
at the very top of the web page
 A good title is very important, so be sure to
make it accurate and meaningful (much more on
this later)
My First HTML Page
<HTML>
<TITLE>My first HTML page</TITLE>
This is my first HTML page
I can write in Bold
I can write in Italics
Or I can write in both
</HTML>
My First HTML Page
with all tags
<HTML>
<TITLE> My first HTML page</TITLE>
This is my first HTML page
I can write in Bold 
I can write in Italics 
Or I can write in both!
</HTML>
My First HTML Page
Results
This is my first HTML page
I can write in Bold
I can write in Italics
Or I can write in both!
Resources and Readings for
Week 2
http://www.wave-creative.com/cell/

Basic HTML - Wave Creative

Transcript Basic HTML - Wave Creative

Directory