CSC 110 Fluency in Information Technology Chapter 4: HTML: A Hypertext Markup Language Primer - PowerPoint PPT Presentation

1 / 36
About This Presentation
Title:

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

Description:

body bgcolor = 'teal' /body Color cont. ... font color = .., body bgcolor='teal' , table , p align='center' , b , i ... – PowerPoint PPT presentation

Number of Views:146
Avg rating:3.0/5.0
Slides: 37
Provided by: peopl
Category:

less

Transcript and Presenter's Notes

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


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/c
    sc110.htm
  • Choose your book by 09/07
  • http//people.uncw.edu/guinnc/courses/fall08/110/b
    ooks.htm

3
Todays 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 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

7
Tags 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

8
You 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.

9
To make a paragraph
  • ltpgt This is a lot of text. It will become a
    paragraph. lt/pgt

10
Not all tags come in pairs
  • ltbrgt forces a line return in the display.
  • lthrgt displays a horizontal line.

11
Every 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

12
Headers
  • lth1gt Im a big header lt/h1gt
  • lth2gt Im not as big lt/h2gt
  • lth3gt I have a complex lt/h3gt

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

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
  • lta hrefhttp//www.google.comgt This will take
    you to google. lt/agt

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/c
    sc110.htm
  • A relative pathname specifies a link that is
    relative to the current web page
  • notes/day1_intro/IntroTo110.ppt

17
Images
  • 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

18
Color
  • 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

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
  • ltulgt
  • ltligt List item one lt/ligt
  • ltligt List item two. lt/ligt
  • lt/ulgt
  • List item one.
  • List Item two.

21
Lists, continued
  • ltolgt
  • ltligt List item one lt/ligt
  • ltligt List item two. lt/ligt
  • lt/olgt
  • List item one.
  • List Item two.

22
Tables
  • Lets save this one for your Out-of-Class
    Assignment

23
Did you know you can look at any web pages HTML
file?
  • In your browser, lets 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/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

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

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

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/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?

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 lttitlegt, ltimggt
    lth1gt, lth2gt, lthrgt, ltulgt, lta href, ltfont color
    .., ltbody bgcolortealgt, lttablegt, ltp
    aligncentergt, ltbgt, ltigt

36
Wrap-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
Write a Comment
User Comments (0)
About PowerShow.com