Jozef Goetz, 2010

1

2010 STEM Summer Camp

Dr. Jozef Goetz

Jozef Goetz, 2010

Jozef Goetz, 2010

Chemistry

|_______________

||

Jozef Goetz, 2010

4

Project

Building hand-coded Website

by

Jozef Goetz

Jozef Goetz, 2010

5What 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.

Jozef Goetz, 2010

6What 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).

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

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.

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.

CSS is a flexible, cross-platform, standards-based language widely implemented in browsers.

Introduction

Jozef Goetz, 2010

9PROJECT 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 <meta> tags.

To be able to create and publish Web pages. To learn the design principles, best practices of Web page

design.

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

Jozef Goetz, 2010

Day 1 Project – JavaJam Cofee House

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.

Jozef Goetz, 2010

Day 3 Project - JavaJam Coffee House13

Introduced the use of color and graphical elements on web page

Jozef Goetz, 2010

Day 4 Project - JavaJam Coffee HouseIntroduced you to a variety of topics related to hyperlinks, lists, and layout

Jozef Goetz, 2010

Project JavaJam15

Jozef Goetz, 2010

16Project – JavaJam Cofee House