Transcript Document
An Introduction to Web Design
Mayors Commission on Literacy ConnectED Learning
Temple University, Tuttleman Learning Center
May 8th 2015
Michael Smith
The Center for Technology Access and Training
[email protected] | www.cetat.org
Overview
• Introduction / Expectations
• Basic Terminology
• HTML Code
• Layout Considerations
• Storyboarding
• Other Web Development Tools
• Dreamweaver
• CMS: WordPress, Joomla, Drupal
• Hosting
• Wrap Up
Introductions
• Name
• Occupation (Job / Company)
• Expectation
Web Terminology
• HTML
• hypertext markup language
• Browser
• Google Chrome, Firefox, Internet Explorer
• Text Editor
• notepad, word pad, text edit
• Tags
• commands read by the browser <HTML> </HTML>
• File Extensions
• describes the file type .html .jpg .gif
HTML Tags
• <HTML>
• HTML tags are
• <TITLE>
command read by your
browser from your text
editor
• Most tags have an
opening and closing
tag
• Tags do not have to be
capitalized
• <BODY>
• color
• <H1>…. <H6>
• <P>
• <HR>
• <IMG SRC>
• <A HREF>
HTML Tags
<HTML>
<TITLE>
</HTML>
• <HTML> - Specifies
</TITLE>
the language read by
the browser
• <TITLE> - Displays
information in the title
bar
Saving a Web Page
• Filename
• File type
• Location
• I recommend that you
save files with a name of
8 characters of less with
no spaces, no symbols
and all lower case
• Each file should be
saved as type text and
with a .html extension
• Files and images should
be saved in the same
location
HTML Tags
<HTML>
<TITLE>
</TITLE>
<BODY>
<H1> …
<P>
<HR>
<BODY BGCOLOR>
<IMG SRC>
<A HREF>
</BODY>
</HTML>
<BODY>
Specifies section for text, and controls
background, text and link colors
<H1 – H6>
Headings
<P>
Paragraphs
<HR>
Horizontal Rule – creates lines that can
be used to make sections
<IMG SRC>
Images
<A HREF>
Links
Layout Considerations
• Consistency
• Location of links
• Colors
• Fonts
• Proximity
• Related items placed
close
• Unrelated items
separated by space or
border
• Contrast
• Variance between
background and text
color
Storyboard (layout)
Hierarchical
Linear
Beyond HTML
• CSS (Cascading Style Sheets)
• Javascript
• Dreamweaver
• Content Management Systems
• Word Press
• Joomla
• Drupal
Hosting a Website
• Domain
• Domain
• Simpleurl.com
• Web host
• Domain & Webhosting
• Godaddy
• 1and1
Wrap-Up
• Basic Terminology
• HTML Code
• Layout Considerations
• Storyboarding
• Other Web Development Tools
• Dreamweaver
• CMS: WordPress, Joomla, Drupal
• Hosting
References
• http://www.w3schools.com
• http://htmldog.com/guides/html/beginner/
• http://www.codecademy.com/en/tracks/web (requires a
login - free)