Title: CSC 110 Fluency in Information Technology Chapter 4: HTML: A Hypertext Markup Language Primer
1CSC 110 Fluency in Information
TechnologyChapter 4 HTML A Hypertext Markup
Language Primer
2Quick Info
- http//people.uncw.edu/guinnc/courses/Fall08/110/c
sc110.htm - Choose your book by 09/07
- http//people.uncw.edu/guinnc/courses/fall08/110/b
ooks.htm
3Todays Class
- Chapter 4 Overview of HTML
- Laboratory Activities
- Making a Web Page
4A Web page and the HTML source that produced it.
Notice that an additional image file, alto.jpg,
is also required to display the page.
5HTML
- 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.
6Tags
- Tags have a very specific syntax
- Each tag is enclosed in angle brackets ltgt
- Tags often come in pairs
- lttitlegt CSC 110 lt/titlegt
- The text that is being formatted is enclosed
within the pair - Notice the / used to indicate the end of a tag
pair - BTW, tags arent case sensitive.
- ltTitlegt CSC 110 lt/TITLegt
7Tags for Bold and Italic
- ltbgt lt/bgt makes what is inside the tags bold
- ltbgt Hello lt/bgt there
- would be displayed
- Hello there
- Similarly ltigt lt/igt makes things italics.
- ltigt Hello lt/igt there
- would be displayed
- Hello there
8You can nest tags inside one another if
appropriate
- ltbgt ltigt Hello lt/igt there ltbgt
- Produces
- Hello there
- Be careful to get your tags nested correctly
- ltbgt ltigt Hello lt/bgt lt/igt
- May result in an error.
9To make a paragraph
- ltpgt This is a lot of text. It will become a
paragraph. lt/pgt
10Not all tags come in pairs
- ltbrgt forces a line return in the display.
- lthrgt displays a horizontal line.
11Every HTML file should look like .
- lthtmlgt
- ltheadgt
- Preliminary material like title, keywords,
description - lt/headgt
- ltbodygt
- The main content of the page
- lt/bodygt
- lt/htmlgt
12Headers
- lth1gt Im a big header lt/h1gt
- lth2gt Im not as big lt/h2gt
- lth3gt I have a complex lt/h3gt
13White 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
14Aligning text
- ltp align centergt Content, content, content.
lt/pgt - Content, content, content.
- ltp align leftgt Content, content, content.
lt/pgt - Content, content, content.
- ltp align rightgt Content, content, content.
lt/pgt - Content, content, content.
15Making 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
- lta hrefhttp//www.google.comgt This will take
you to google. lt/agt
16Absolute 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/c
sc110.htm - A relative pathname specifies a link that is
relative to the current web page - notes/day1_intro/IntroTo110.ppt
17Images
- ltimg srcfilenamegt
- 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
- ltimg srcpipe.jpg aligncenter width100gt
18Color
- You can change the color of your text
- ltfont colorredgt Here is my text. lt/fontgt
- Here is my text.
- And the color of your background
- ltbody bgcolor tealgt
-
- lt/bodygt
19Color 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
20Lists
- ltulgt
- ltligt List item one lt/ligt
- ltligt List item two. lt/ligt
- lt/ulgt
- List item one.
- List Item two.
21Lists, continued
- ltolgt
- ltligt List item one lt/ligt
- ltligt List item two. lt/ligt
- lt/olgt
- List item one.
- List Item two.
22Tables
- Lets save this one for your Out-of-Class
Assignment
23Did you know you can look at any web pages HTML
file?
- In your browser, lets say Internet Explorer
- Select from the View menu
- Source
24UNCW 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
25Out-of-class Assignment 1
- Make an .htm page that looks like the following
images - http//people.uncw.edu/guinnc/courses/Fall08/110/o
oc1/page1.jpg - http//people.uncw.edu/guinnc/courses/Fall08/110/o
oc1/page2.jpg - Things you have to do include lttitlegt, ltimggt
lth1gt, lth2gt, lthrgt, ltulgt, lta href, ltfont color
.., ltbody bgcolortealgt, lttablegt, ltp
aligncentergt, ltbgt, ltigt
26And now for the lab
- Open up notepad.
- Well do all our editing in notepad
- Why?
- Create a small file
- lthtmlgt
- ltheadgt
- lt/headgt
- ltbodygt
- lt/bodygt
- lt/htmlgt
27Activity 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.
28Activity 2 (Putting in some content)
- Add a title. Something like CSC 110 Lab Page
- Remember to use the lttitlegt lt/titlegt tags.
- Where do you put the lttitlegt tags?
- You can reload your page in Internet Explorer by
selecting Refresh - Icon at top
- View Refresh
- F5
29Activity 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.
30Activity 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?
31Activity 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.
32Activity 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.
33Activity 5 (Images)
- Download this image to the directory where your
.htm files reside - Also available at (http//people.uncw.edu/guinnc/c
ourses/Spring08\110\notes\day6_chap4_html\athletic
_logo.gif) - Insert this image in your webpage using ltimg
srcathletic_logo.gifgt - Can you resize it?
34Activity 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.
35Out-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 lttitlegt, ltimggt
lth1gt, lth2gt, lthrgt, ltulgt, lta href, ltfont color
.., ltbody bgcolortealgt, lttablegt, ltp
aligncentergt, ltbgt, ltigt
36Wrap-up
- Homework
- Read Chapter 4
- Out-of-class assignment 1 due by 1159pm, 09/07
- 3nd Homework Ch5 Ch6 questions, due 1159pm
09/04 - No class on Monday