1 / 9

GBK Programming 1

GBK Programming 1. Jordan Johnson. Today’s plan. Greeting Lesson: Goals / rubrics. (~ 20 min) Review tags. (~5 min) Build, save, and view a page. (~25 min) Clean-up. Markup & HTML. Yesterday’s task:

tale
Download Presentation

GBK Programming 1

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 1 Jordan Johnson

  2. Today’s plan Greeting Lesson: Goals / rubrics. (~20min) Review tags. (~5 min) Build, save, and view a page. (~25 min) Clean-up

  3. Markup & HTML • Yesterday’s task: • Using “View Source,” look at the source of several web pages, and (in your notes) jot down some (let’s say 10 to 15) of the kinds of tags you see. Be ready to share them.

  4. So….what’d you find? Tag Meaning DIV META HTML Start/end an HTML document. HEAD Start/end the “head”, information about the page. BODY Start/end the main structure of the page. LINK SECTION TITLE The text that appears in the title bar. SPAN UL, OL An un(ordered) list LI An item in a list SCRIPT H1, H2, H3 Headers (in decreasing order of importance) EM A IMG TD SMALL CENTER

  5. Create a page: example structure <html> <head> <title>My spifftasticüberpage</title> </head> <body> …lots of text here… </body> </html> A list of tags: http://www.w3schools.com/tags/default.asp Various tutorials: http://www.fellowhuman.com/kirby/tutorials.html View your page using your browser of choice.

  6. Empty Tags <blockquote> Shall I compare thee to a summer’s day?<br /> Nah, I’ll just get depressed thinking about summer being over. </blockquote> Empty tags always carry a slash at the end: <br /> • So far, tags look like this: • <TAGNAME> . . . </TAGNAME> • Some tags don’t need closers: • <br />  line break tag • Example:

  7. Attributes <p>You can find more info on the <a href=“tutorials.html”>tutorials</a> page.</p> <img src=“monkey.jpg” alt=“A picture of a monkey” /> In the above, “href” and “src” and “alt” are the attribute names. • Some tags need more info than a name: • <TAGNAME ATTRIBUTE=“VALUE” …>…</TAGNAME> • Examples:

  8. Task: Link two pages: <html> <head><title>One page</title></head> <body> This just goes to <a href=“secondpage.html”>another page</a>, OK? </body></html> • File 2: secondpage.html <html> <head><title>Another page</title></head> <body> …and here we are on the second page. Want to go <a href=“firstpage.html”>back</a>? </body></html> File 1: firstpage.html

  9. 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