1 / 36

HTML Markup Language Primer

Learn the basics of HTML, including tags, syntax, formatting, and creating web pages with links, images, and lists.

esenn
Download Presentation

HTML 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/07: • http://people.uncw.edu/guinnc/courses/fall08/110/books.htm

  3. Today’s Class • Chapter 4: Overview of HTML • Laboratory Activities • Making a Web Page

  4. A Web page and the HTML source that produced it. Notice that an additional image file, alto.jpg, is also required to display the page.

  5. HTML • Hypertext Markup Language • “Hypertext” means that you can click on words, phrases, images and you will be taken to another page. • “Marking up” a page means that you supply tags to indicate to the computer how to format and display the text or pictures.

  6. Tags • Tags have a very specific syntax • Each tag is enclosed in angle brackets <> • Tags often come in pairs <title> CSC 110 </title> • The text that is being formatted is enclosed within the pair • Notice the / used to indicate the end of a tag pair • BTW, tags aren’t case sensitive. <Title> CSC 110 </TITLe>

  7. Tags for Bold and Italic • <b> … </b> makes what is inside the tags bold <b> Hello </b> there • would be displayed Hello there • Similarly <i> … </i> makes things italics. <i> Hello </i> there • would be displayed Hello there

  8. You can nest tags inside one another if appropriate <b> <i> Hello </i> there <b> • Produces Hello there • Be careful to get your tags nested correctly: <b> <i> Hello </b> </i> • May result in an error.

  9. To make a paragraph <p> This is a lot of text. It will become a paragraph. </p>

  10. Not all tags come in pairs • <br> forces a line return in the display. • <hr> displays a horizontal line.

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

  12. Headers <h1> I’m a big header </h1> <h2> I’m not as big </h2> <h3> I have a complex </h3>

  13. White space in your .html source file … • … Is ignored John is my brother • Will appear as John is my brother John is my brother • Will also appear as John is my brother

  14. Aligning text <p align = “center”> Content, content, content. </p> Content, content, content. <p align = “left”> Content, content, content. </p> Content, content, content. <p align = “right”> Content, content, content. </p> Content, content, content.

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

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

  17. 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”>

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

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

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

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

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

  23. Did you know you can look at any web page’s HTML file? • In your browser, let’s say Internet Explorer • Select from the View menu • Source

  24. UNCW WebPages • Go to this page to learn how to put your own webpage on the www at UNCW. http://www.uncw.edu/itsd/studentwebsrv.htm

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

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

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

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

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

  30. 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?

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

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

  33. 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?

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

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

  36. Wrap-up • Homework • Read Chapter 4 • Out-of-class assignment 1 due by 11:59pm, 09/07 • 3nd Homework: Ch5 & Ch6 questions, due 11:59pm 09/04 • No class on Monday

More Related