1 / 24

CSC 110 – Fluency in Information Technology Chapter 4: HTML: A Hypertext Markup Language Primer

CSC 110 – Fluency in Information Technology Chapter 4: HTML: A Hypertext Markup Language Primer. Dr. Curry Guinn. Quick Info. http://people.uncw.edu/guinnc/courses/Fall08/110/csc110.htm Choose your book by 09/08: http://people.uncw.edu/guinnc/courses/fall08/110/books.htm. Today’s Class.

lucasbell
Download Presentation

CSC 110 – Fluency in Information Technology Chapter 4: HTML: A Hypertext Markup Language Primer

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. CSC 110 – Fluency in Information TechnologyChapter 4: HTML: A Hypertext Markup Language Primer Dr. Curry Guinn

  2. Quick Info http://people.uncw.edu/guinnc/courses/Fall08/110/csc110.htm • Choose your book by 09/08: • http://people.uncw.edu/guinnc/courses/fall08/110/books.htm

  3. Today’s Class • HTML Reminders • Laboratory Activities • Making a Web Page

  4. Every HTML file should look like …. <html> <head> Preliminary material like title, keywords, description </head> <body> The main content of the page </body> </html>

  5. Making Links • The words that are “hot” are called the anchor text. • When you click on those “hot” words, the browser will be directed to the hyperlink reference. • To specify an anchor <a href=“http://www.google.com”> This will take you to google. </a>

  6. Absolute vs. Relative Pathnames • http://www.google.com is a absolute pathname as it gives the full address. • So is http://people.uncw.edu/guinnc/courses/Fall08/110/csc110.htm • A relative pathname specifies a link that is relative to the current web page notes/day1_intro/IntroTo110.ppt

  7. Images <img src=“filename”> • The two main image formats for Web pics are GIF and JPEG. • GIF is better for cartoons/line drawings. • JPEG is intended for photos. • Bitmaps (.bmp) are older technology. Huge. • You can align and resize images <img src=“pipe.jpg” align=“center” width=“100”>

  8. Color • You can change the color of your text <font color=“red”> Here is my text. </font> Here is my text. • And the color of your background <body bgcolor = “teal”> … </body>

  9. Color cont. • Color can be specified using the 16 color constants (e.g., black, red, blue, lime, etc) • See p. 104 • Or by specifying the Red/Green/Blue combination (RGB) • (255, 0, 0) The most red • (0, 255, 0) The most green • (0, 0, 255) The most blue • In html, you specify these in hexadecimal format • #FF0000 is (255,0,0) • See 104-106

  10. Lists <ul> <li> List item one </li> <li> List item two. </li> </ul> • List item one. • List Item two.

  11. Lists, continued <ol> <li> List item one </li> <li> List item two. </li> </ol> • List item one. • List Item two.

  12. Tables • Let’s save this one for your Out-of-Class Assignment

  13. Out-of-class Assignment 1 • Make an .htm page that looks like the following images: • http://people.uncw.edu/guinnc/courses/Fall08/110/ooc1/page1.jpg • http://people.uncw.edu/guinnc/courses/Fall08/110/ooc1/page2.jpg • Things you have to do include: <title>, <img> <h1>, <h2>, <hr>, <ul>, <a href=…, <font color = .., <body bgcolor=“teal”>, <table>, <p align=“center”>, <b>, <i>

  14. And now for the lab … • Open up notepad. • We’ll do all our editing in notepad • Why? • Create a small file: <html> <head> </head> <body> </body> </html>

  15. Activity 1 cont. • Save this to a file called lab.htm • Be careful! Notepad is going to try to save it as a .txt file • Once it has been saved, open it in Internet Explorer.

  16. Activity 2 (Putting in some content) • Add a title. Something like “CSC 110 Lab Page” • Remember to use the <title> … </title> tags. • Where do you put the <title> tags? • You can reload your page in Internet Explorer by selecting Refresh • Icon at top • View – Refresh • F5

  17. Activity 3 • Put a little text in there to be displayed. • Where does the text go in the .htm document? • Reload within the browser and see how it looks. • Put some line breaks in your .htm file and reload. Any difference? • Put a few paragraphs in.

  18. Activity 3, cont. • Try to center a paragraph. • Try to right align a paragraph. • Make some things bold and/or italics. • Put a few headings in. • How much bigger is H1 than H2 than H3. • Is there an H4? • An H5?

  19. Activity 4 (Links) • Make a link in your page that looks something like Click Here for Google. • When you click on it, the browser should go to www.google.com. • Make a link in your page that allows you to go to our course homepage.

  20. Activity 4b (Relative Link) • Open a new .htm file using notepad in the same directory as your current .htm document. Call it subpage.htm. • Make a small valid .htm document with a head and body. Give it a title like “My Subpage” and maybe a few words in the body. • Now, make a hypertext link in your original webpage that points to this subpage.htm file. • Use a relative pathname in your anchor specification.

  21. Activity 5 (Images) • Download this image to the directory where your .htm files reside: • Also available at (http://people.uncw.edu/guinnc/courses/Spring08\110\notes\day6_chap4_html\athletic_logo.gif) • Insert this image in your webpage using <img src=“athletic_logo.gif”> • Can you resize it?

  22. Activity 6 (Lists) Make a list that looks something like My favorite books are: • The Long Goodbye by Raymond Chandler. • Fifth Business by Robertson Davies. • Rescuing Patty Heart by Virginia Holman.

  23. Out-of-class Assignment 1 • Make an .htm page that looks like the following images: • http://people.uncw.edu/guinnc/courses/Spring05/110/ooc1/page1.jpg • http://people.uncw.edu/guinnc/courses/Spring05/110/ooc1/page2.jpg • Things you have to do include: <title>, <img> <h1>, <h2>, <hr>, <ul>, <a href=…, <font color = .., <body bgcolor=“teal”>, <table>, <p align=“center”>, <b>, <i>

  24. Wrap-up • Homework • Read Chapters 5 & 6 • Out-of-class assignment 1 due by 11:59pm, 09/07 • 3rd Homework: Ch5 & Ch6 questions, due 11:59pm 09/04 • 4th Homework: Ch7 & Ch8, due 11:59 09/11

More Related