HTML: Part 1<br />Hypertext Markup Language<br />
Review<br />Homepage: Starting point<br />World’s smallest HTML in index.html<br />Viewable in Internet Explorer <br />  h...
Homepage<br />Ideas<br />Who are you?<br />What is your major?<br />Interests?<br />Favorite movies?<br />Links, pictures<...
HTML Tags<br /><BODY> <br />The <body> tag sets the standard values for the entire webpage.<br />This tag can change the:<...
HTML Tags (2)<br /><H#><br />the HEADING tag ranges 1-6<br />Replace # with 1, 2, 3, … 6<br />Hierarchy; # is an indicatio...
Images<br /><IMG SRC=“image_name.gif”><br />Make sure the image name is the exact same as it is saved in your www folder.<...
Images (2)<br />Pulling images from internet<br />Understandable if you’re avoiding using up account space, but don’t util...
<A HREF=“…”>…</A><br />Example:<br />Absolute Hyperlink: Creating a link to internet site<br /><A HREF=“http://ncsu.edu”>N...
Content Alignment<br />By default, content aligned to the left.<br /><center>…</center><br />Example:<br /><CENTER><IMG SR...
Content Alignment (2)<br />align=right<br />Example:<br /><IMG SRC=“./photo.jpg” align=right><br />Text wrapping<br />Plac...
Announcements<br />Interactive Lab Quiz 4!<br />Example:<br />http://www4.ncsu.edu/~vjbuchan/csc200example.html<br />Or<br...
Upcoming SlideShare
Loading in …5
×

Lab 4: Introduction to HTML

949 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
949
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lab 4: Introduction to HTML

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

×