2. Jozef Goetz, 2010 1 2010 STEM Summer Camp Dr. Jozef Goetz

3. Jozef Goetz, 2010

4. Chemistry | _______________ ||

5. Jozef Goetz, 2010 4 Project Building hand-coded Website by Jozef Goetz

6. Jozef Goetz, 2010 5 What is HTML?  The World Wide Web is composed of files containing Hypertext Markup Language (HTML)  HTML Describes the Structure of a Page  It defines a set of common styles for Web pages  headings  paragraphs  lists  tables  and more  Each of these common styles has a tag associated with it to define the element  HTML  Made up of tags and attributes  The set of markup symbols or codes placed in a file intended for display on a Web browser page.

7. Jozef Goetz, 2010 6 What is XHTML?  The newest version of HTML is actually XHTML – eXtensible HyperText Markup Language.  XHTML uses the tags and attributes of HTML along with the syntax of XML (eXtensible Markup Language).

8. Jozef Goetz, 2010 7 7 HTML Code in Notepad and Browser Results Body goes in content area of browser Title goes in Title bar of browser http://www.w3schools.com/html/default.asp

9. Jozef Goetz, 2010 8  Cascading Style Sheets (CSS)  is a stylesheet language used to describe the presentation of a document written in a markup language.stylesheet languagemarkup language  Used to specify the presentation of elements separately from the structure and content of the document  define colors, fonts, layout, and other aspects of document presentation.colorsfontslayout  CSS is  a flexible,  cross-platform,  standards-based language  widely implemented in browsers. Introduction

10. Jozef Goetz, 2010 9 PROJECT OBJECTIVES  To learn and understand the concepts and building blocks of Web pages with HTML, XHTML and CSS.  To gain hands-on experience by coding in XHTML/CSS and employ many important features of XHTML and CSS.  To add images to web pages.  To create and use hyperlinks to navigate web pages.  To mark up lists of information.  To create tables with rows and columns of data and control table formatting.  To create and use forms to get user input.  To make web pages accessible to search engines using tags.  To be able to create and publish Web pages.  To learn the design principles, best practices of Web page design.

11. Jozef Goetz, 2010 Internet Programming Project  Julio Smith is the owner of the JavaJam Coffee House, a gourmet coffee shop that serves snacks, coffee, tea, and the soft drinks.  The customer of JavaJam are mainly college students and young professionals.  Local folk music performances and poetry readings are held a few nights during the week.  Julio would like a Web presence for his shop that will display his services and provide a calendar for the performances.  He would like a  home page  menu page  music performance schedule page, and  job opportunities page 10

12. Jozef Goetz, 2010 Day 1 Project – JavaJam Cofee House

13. Jozef Goetz, 2010 Day 2 Project : Java Coffe House  Goal: create a new version of Project that uses an external CSS styles to configure text and color.

14. Jozef Goetz, 2010 Day 3 Project - JavaJam Coffee House 13 Introduced the use of color and graphical elements on web page

15. Jozef Goetz, 2010 Day 4 Project - JavaJam Coffee House Introduced you to a variety of topics related to hyperlinks, lists, and layout

16. Jozef Goetz, 2010 Project JavaJam 15

17. Jozef Goetz, 2010 16 Project – JavaJam Cofee House