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)