Post on 29-Dec-2015
Intro to Website Design
Presented by:
Donald Chase, LoudOffice.com
donald@LoudOffice.com
http://www.LoudOffice.com/class
Course Overview & Agenda
Session I – Intro to HTML– Introduction– Basics of the Internet and HTML– HTML Coding Standards– Basic Web Page Tags– Adding and Formatting Text– Formatting Your Page– How Your Server Works– Homework #1– Q&A and Independent Work
Overview & Agenda (cont.)
Session II – HTML Part II– Adding Hyperlinks and Email Addresses– Creating Lists– Images and Graphical Elements– Image Maps– Using Tables– Homework #2– Q&A and Independent Work
Overview & Agenda (cont.)
Session III – HTML Wrap-up, Concepts, Tools– Using Frames– Special Characters– How to “Liberate” Content– Conceptualizing Your Website– Tools of the Trade– How to Publish Your Website– Final Q&A and Independent Work
Introduction
Class Introduction– Who are you?– Why do you want to learn HTML?– Is there a project you want to work on?
How we’re going to be developing pages– Using Microsoft notepad or any text editor– Viewing pages in class (Explorer / Netscape)– Working from home– Saving work to a disk
To Help You Learn HTML
Books– “Teach Yourself HTML 4 in 24 Hours” by SAMS.– “HTML 4 in 21 Days” by Laura Lemay.– After you’re comfortable, any HTML tag reference
book will cover the basics. http://www.LoudOffice.com/class
– Check out the Class Notes and Links sections for online links.
– This site is being built ‘as we speak’, so check back often.
Our Class Project
We will build a personal website that will be published in class during the third session.
The site will contain the following pages:– A Welcome / Home Page– A Page About Yourself (Interests, Work, etc.)– Your Online Resume – A Small Photo Album
Getting Started
We will be using MS Notepad to write our HTML.
Pages will be saved to your floppy drive. Pages will be viewed as they are created
in your browser. We will use this overhead presentation as
well as handouts and the Class website.
Basics of the Internet
In the simplest sense, the Internet is a collection of inter-connected computers (servers) over shared lines.
Servers are just like the computers you use at home and work, but more powerful.
The Internet became “browse-able” in the 1990s with the creation of the HTTP protocol and creation of HTML.
HTTP & HTML
HTTP – HyperText Transfer ProtocolMethod by which a computer jumps from one page to another by clicking on links.
HTML – HyperText Markup LanguageMarkup language that allows for the formatting of Internet Documents.– Plain Text Language– Universal Compatibility– Most-recent version is HTML 4.0
What HTML Does
Turns Text Like ThisMy name is Donald.What is your name?
Formatted Like This<html><head><title>Hello world</title></head><body><b>My name is Donald.</b><br><center><i>What is your name?</i></center></body></html>
INTO THIS…
Try It Yourself…
Create your own page:
<html><head><title>Hello World</title></head><body>My name is __________.</body></html>
[Name your file as index.htm]
HTML Coding Standards
HTML markup takes the form of TAGS<tag>Marked up text</tag>
Some of these tags have attributes<tag attribute=“value”>Text</tag>
Some tags have opening and closing elements, while some have just opening<center><img src=“image.gif”></center>
Basic Web Page Tags
Each web page has four basic tag sets:
Tag Closing Description
<html> </html> Defines the area within as an HTML page.
<head> </head> Contains information about the document.
<title> </title> Identifies the title of the page, contained within the <head> tag.
<body> </body> Surrounds the text of the page.
Template For HTML Pages
<html>
<head>
<title>Page Title Goes Here</title>
</head>
<body>
Page content goes here.
</body>
</html>
Adding Text
Adding text is as simple as typing text between the <body> tags, except:– Browsers ignore multiple spaces, spacing only
once unless told otherwise.– Browsers do not know when to start new
paragraphs or break at the end of lines.– Browsers do not know how you wish to format
text.
Paragraphs
The <p> tag tells the browser to insert a new paragraph.– The closing tag for this (</p>) is optional, but
recommended.
The <p> tag has one attribute, ‘align’ that controls the on-page alignment of your paragraph.– Options are left, center, right, justify– This attribute has been Deprecated in HTML 4.0.
Line Breaks
To insert a line break, use the <br> tag. Note, that this tag has no closing tag.
Ex. ‘Hello<br>World’:
HelloWorld
How <p> and <br> Differ
The <br> tag forces a one-line break, while the <p> tag creates a new paragraph with a two-line break.
The <p> tag has an align element (left, center, right, justify) while no such attribute exists in the <br> tag.
Text Spacing
Although HTML ignores extra spacing, there is a ‘special character’ in HTML that gives you that functionality: – This is the non-breaking space character, and
adds the ability to have extra spaces to your page.
Ex.: ‘There are 3 spaces between this and this.’:
<p>There are 3 spaces between and this.</p>
The <pre> Tag
The <pre> tag displays pre-formatted text ‘exactly’ as it is typed within the HTML document.
All spaces are displayed without having to use the character.
Has one attribute, width, which controls the maximum number of characters per line (options are 40, 80, 132 – not common).
Try it yourself…
Open your index.htm fileand use these spacing, linebreak, and paragraph tags
to add formatting and spacing
to the document you created.
Pretty Boring!!!
As you can see, that page has information, but is downright BORING.
So, what can we add to that page to spice it up a little bit?
If it were a word-processor document, what would you do?
Use of Color
In HTML, we can control the color of our pages, our fonts, our elements, and more.
There are 216 colors in the color-safe palette.
Colors are referenced using their RGB (Red, Green, Blue) color code or their name.
See www.loudoffice.com/class/colors.htm for a list of common colors.
The <body> Tag
The <body> tag is required for all HTML documents and defines the area where the document’s content is contained.
You can also use the <body> tag to define some of the formatting for the entire page.
Attributes taken by the <body> tag include bgcolor, background, text, link, vlink, alink, as well as margins.
The <body> Tag (cont.)
Attributes– bgcolor – the page’s background color.– background – the page’s background image.– text – the default color of all the page’s text.– link – the default color for all links.– alink – the default color for all default links.– vlink – the default color for all visited links.
<body> Tag - Margins
Can be controlled for newer browsers, but each browser has it’s own tags.
Internet Explorer– topmargin – controls the top margin– leftmargin – controls the left margin
Netscape Navigator– marginheight – controls the top margin– marginwidth – controls the left margin
All sizes are in pixels, or 1x1 dots on your screen. This attribute should be used sparingly.
Try it Yourself…
Go to the Class Notes Section on the LoudOffice.com class page.
Click on ‘Fun with Fonts and Colors’ and play with the different page color
combinations to see what looks nice and what doesn’t?
How does color relate to usability?
Headings
Headings help you better structure and format your documents.
Heading tags are <h1> to <h6>.– Each has an opening and closing tag– <h1> has the largest font, and <h6> the smallest.– Like <p> has an align attribute, which has been
deprecated in HTML 4.0.– <h4> - <h6> are actually smaller than your normal
text font and should be used sparingly.
Basic Text Formatting Tags
Tag Closing Description
<b> </b> Creates bold text.
<i> </i> Creates italicized text.
<u> </u> Underlines text (use with caution).
<big> </big> Big text. Can be overlapped (a bigger big).
<small> </small> Small text. Can be overlapped (a smaller small).
HTML Coding Standards
Nesting HTML Tags: When you create an HTML document, you are going to
have overlapping tags.– For instance you may have a bolded sentence with an italicized
word. You must close a nested tag before you can close the
tag it’s nested in.– For instance, you cannot have
<b><u>Text</b> more Text </u>– It would have to be:
<b><u>Text</u> more Text </b>
Try it Yourself…
Format your home page (index.htm) using these formatting tags (<h1> - <h6>, <b>, <i>, <u>, <big>, <small>).
Get really daring and try nesting multiple tags.
Other Text Formatting Tags
Tag Closing Description
<sub> </sub> Creates subscript text.
<sup> </sup> Creates superscript text.
<em> </em> Puts emphasis on text. (Similar to <i>)
<tt> </tt> Renders text as teletype or mono-spaced.
In the NCD HTML Guide, read the section
on Font Formatting for additional tags.
THE <FONT> TAG
The most-used method to change the look of text on web sites is through the use of the <font> tag.
The <font> tag has three attributes:– face – controls the font type– size – controls the font size (range from 1 – 7)– color – controls the color
The use of <font> is deprecated in favor of style sheets in HTML 4.
THE <FONT> TAG
Face– This attribute determines the type face of the font
(what the font looks like). The three most common font faces are:
ArialTimes New RomanCourier
– The font selected must exist on theuser’s computer or else it will not display correctly.
THE <FONT> TAG
Size– There are seven basic sizes ranging from 1 to 7
– Font Size 1 = 8 pts
– Font Size 2 = 10 pts
– Font Size 3 = 12 pts
– Font Size 4 = 14 pts
–Font Size 5 = 18 pts
–Font Size 6 = 24 pts
–Font Size 7 = 36 pts
Color– There are two ways to assign color using the color
attribute, with the name or RGB (red, green, blue) hexadecimal value:
Red #FF0000 Green #00FF00 Blue #0000FF Black #000000 White #FFFFFF
– For a list of colors and their numerical equivalent, see http://www.LoudOffice.com/class/colors.htm
THE <FONT> TAG
Try it yourself…
Modify your index.htm file with the <font> tag with it’s face, size and color attributes, or create a new
page…
The Comment Tag
If you wish to add comments to an HTML page that does not show up on the browser, you can use the following:
<!-- Text Here --> The comment tag can be at the beginning or end of
a line or on it’s own line, it can also span multiple lines.
Even though it does not show in the browser window, the text is still part of the source code for the web page, and can be viewed online.
If you do not close your comment tag, the rest of your page will be invisible.
The <div> Tag
The <div> tag helps you add structure to blocks of HTML.
Takes the align attribute, with options being left, right, center, and justify.– Alignment has been deprecated in favor of style
sheets.
The <center> tag is the same as <div align=“center”>.
The <hr> Tag
The <hr> tag helps structure your web page by inserting horizontal rule lines.
Attributes:– align – controls alignment (center, left, right).– noshade – displays the rule without shading.
<hr noshade>– size – controls the size (the height) of the rule.– width – controls the length of the rule.– color – the color of the rule (Internet Explorer).
Note that there
Naming Conventions
As you’ve picked up, all HTML files end with the extension ‘.htm’ or ‘.html’.
When naming your file, there are a few rules you should follow:– Only use the letters a-z and numbers 0-9, as well
as hyphens ‘-’ and underscores ‘_’.– Keep the names as short, memorable, and
descriptive as possible.– Do not use spaces or any other characters.
How a Server Works
All HTML documents, as well as images ands other media, are stored on computers called ‘servers’.
Each website has it’s own directory on the host computer which is normally controlled by the website administrator.
This directory traditionally carries a structure with a root directory, an images directory, and a cgi-bin.
How a Server Works
The relationship between a website server and a web surfer’s browser is called a client-server relationship.– The browser is the client and receives finished content
from the website server.
When a page is ‘requested’ by the client, the server determines the file type based on extensions, performs any processing, and transmits the file to the user’s browser.
How a Server is Structured
Browse to LoudOffice.com/class/empty/ to see how I would structure a website.
The number of subdirectories I put on a site depends upon the number of pages I expect to have under each category.– I use subdirectories for categories with multiple
pages.
I try to separate HTML pages, images, “active media”, programs, and databases.
Homework #1
As we said, the class project will be a simple personal website.
Your assignment will be to decide on the content of your site (sections) and to jot down some ideas for each of the sections.
Before the next class, you should have completed the index.htm (Welcome) page and the interests page (to be named interests.htm).