1 / 10

GBK Programming 1 2009-10

GBK Programming 1 2009-10. Jordan Johnson. Today’s plan. Greetings Review markup/HTML basics A diversion: Structure vs. presentation (or appearance) Stylesheets and CSS Homework Clean-up. Web pages. HTML files define the structure of Web documents:. html. body. head. title .

remedios-valdez
Download Presentation

GBK Programming 1 2009-10

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. GBK Programming 12009-10 Jordan Johnson

  2. Today’s plan • Greetings • Review markup/HTML basics • A diversion: • Structure vs. presentation (or appearance) • Stylesheets and CSS • Homework • Clean-up

  3. Web pages HTML files define the structure of Web documents: html body head title  Films h1 Movies I like big dumb action movies like these: p ul li Transformers Terminator II li Die Hard li <html> <head> <title>Films</title> </head> <body> <h1>Movies</h1> <p>I like big dumb action movieslike these:</p> <ul> <li>Transformers</li> <li>Terminator II</li> <li>Die Hard</li> </ul> </body> </html>

  4. Structure vs. Appearance • Problem: • We know the structure, but we don’t know how to make the page look the way we want. • Bigger problems: • If we use tags for changing fonts and colors and so on, it’s harder to see the connection between the source code and the page’s meaning. • HTML coding and visual design aren’t always done by the same people. Their work needs to be somewhat independent of each other.

  5. Solution: Stylesheets <html> <head> <title>Films</title> <link rel=“stylesheet” type=“text/css” href=“styles.css” /> </head> <body> <h1>Movies</h1> <p>I like big dumb action movieslike these:</p> <ul> <li>Transformers</li> <li>Terminator II</li> <li>Die Hard</li> </ul> </body> </html> • Just one change to the HTML file: link to a stylesheet. • “styles.css” is the name of the stylesheet file. • The stylesheet defines the page’s appearance.

  6. Contents of styles.css body { margin-top: 0.5in; margin-left: 0.5in; margin-right: 0.5in; } h1 { color: blue; } “Properties” Notice the indentation. • Set the margins: • This block affectsthe body’s contents. • Header color: • This affects onlythe h1 (header)tag’s contents. • Search online for more CSS properties.

  7. Next Task • Construct a simple Web site • 2 pages: • First: Academic – list your class schedule • Second: Personal – link to some sites you use frequently, and describe them. • Use ul and li tags to make your lists • Break lines and use whitespace to make your code easy to read. • Indent lists. • Next, make a stylesheet and add some styles.

  8. Example Indentation Blank lines to highlightthe document’s structure <html> <head><title>Academics</title></head> <body> <h1>Class Schedule – Jordan Johnson</h1> <p>This is my class schedule; I also have a <a href=“personal.html”>personal</a> page.</p> <ul> <li>Period 1: Geometry</li> <li>Period 2: Geometry</li> <li>Period 3: Geometry</li> <li>Period 6: Programming 1</li> </ul> </body> </html>

  9. Homework • Journal #1 • …is due tomorrow (Friday) afternoon. • HW #1 • Make two pages (“Academic” and “Personal”), with: • A description of each web site you linked to • A small (i.e., no wider/taller than 300px) picture somewhere, with an alt attribute • More information about the classes: teacher names and brief summaries (1-2 sentences tops) • A stylesheet. • Maintain good formatting and indentation in both HTML & CSS. • See www.fellowhuman.com/gbkfor details.

  10. Clean-up • Before you leave, please . . . • Log out. • Push in your chair. • Make sure you’ve got everything. • Make sure all trash ends up in the trash can.

More Related