Lab 4: Introduction to HTML
Upcoming SlideShare
Loading in...5
×
 

Lab 4: Introduction to HTML

on

  • 843 views

 

Statistics

Views

Total Views
843
Views on SlideShare
843
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Lab 4: Introduction to HTML Lab 4: Introduction to HTML Document Transcript

  • HTML: Part 1
    Hypertext Markup Language
  • Review
    Homepage: Starting point
    World’s smallest HTML in index.html
    Viewable in Internet Explorer
    http://www4.ncsu.edu/~loginID
    Edit/Save/Reload
    Editing in Notepad
    Save changes in Notepad
    Reload/Refresh web browser
  • Homepage
    Ideas
    Who are you?
    What is your major?
    Interests?
    Favorite movies?
    Links, pictures
    View Source – remember to stay within CSC200 material!
  • HTML Tags
    <BODY>
    The <body> tag sets the standard values for the entire webpage.
    This tag can change the:
    Background
    Solid color, image
    Text color
    Color of hyperlinks
    Link, active link, visited link
    Background image:
    Background=“image.gif”
  • HTML Tags (2)
    <H#>
    the HEADING tag ranges 1-6
    Replace # with 1, 2, 3, … 6
    Hierarchy; # is an indication of its dominancy with 1 being the largest size text, 6 the smallest
    Difference between <H#> and <HEAD>.
    <H#> covered last lecture and in the Manual!
    Example:
    Heading that is centered –
    <center><h1>Homepage</h1></center>
  • Images
    <IMG SRC=“image_name.gif”>
    Make sure the image name is the exact same as it is saved in your www folder.
    .gif or .jpg format
    Convert with Paint application
    Pulling images from your K: drive
    Needs to know path name
    Example:
    <IMG SRC=“http://www4.ncsu.edu/~loginID/photo.JPG”>
    Or
    <IMG SRC=“./photo.jpg”>
    No closing tag needed
  • Images (2)
    Pulling images from internet
    Understandable if you’re avoiding using up account space, but don’t utilize often!
    • Can make a picture a link!
    Example:
    <A HREF=“URL”><IMG SRC=“./photo.jpg”></A>
    Where text would normally go in a link tag, put the image tag instead!
    Remember to close the link tag!
  • <A HREF=“…”>…</A>
    Example:
    Absolute Hyperlink: Creating a link to internet site
    <A HREF=“http://ncsu.edu”>NCSU</A>
    Relative Hyperlink: Creating a link within your account
    <A HREF=“./page2.html”>About me</A>
    ./
    An abbreviated way to write a path to your account (LINUX)
    page2.html
    An example of a file name saved in your www folder, just like your index.html
    Remember to close link tag!
    Hyperlinks
  • Content Alignment
    By default, content aligned to the left.
    <center>…</center>
    Example:
    <CENTER><IMG SRC=“./photo.jpg”></CENTER>
  • Content Alignment (2)
    align=right
    Example:
    <IMG SRC=“./photo.jpg” align=right>
    Text wrapping
    Place the image tag within a paragraph to get:
  • Announcements
    Interactive Lab Quiz 4!
    Example:
    http://www4.ncsu.edu/~vjbuchan/csc200example.html
    Or
    http://www4.ncsu.edu/~vjbuchan
    Enter Announcements
    CSC200 Example webpage
    Homework
    None due next week, Oct. 10
    Homework 5 works with your index.html file! Don’t wait too long, you’ll need to use a unity lab computer.
    EVERYONE should get 100%! 