Powerpoint - The Mayor's Commission on Literacy
advertisement
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 info@cetat.org | 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)
