IT%20130

1
IT 130

• Internet and the WWW

Introduction to HTML
2
What is HTML?

• A simple, universal mark-up language
• HTML HyperText Markup Language
• Just a series of tags that are integrated into a
  text document
• Like stage directions - silently telling the
  browser what to do, and what props to use.
• Can be created in a simple text editor

3
Creating your Web pages

• In order to create your own web pages you need
• A simple text editor (for example Notepad)
• An HTTP browser for testing the pages(for
  example Internet Explorer, Netscape)
• Browsers http//dir.yahoo.com/Computers_and_Inter
  net/Software/Internet/World_Wide_Web/Browsers/
• Browser statistics http//www.w3schools.com/brows
  ers/browsers_stats.asp
• A Web server on which to store your files and
  make them available for viewing. (for example
  students.depaul.edu)

4
Creating Web pages

• Each page on your web site corresponds to an HTML
  file
• HTML files
• are written in ASCII text format
• should have the extension .html or .htm
• should have a 644 permission
• Pictures should also be uploaded to students.

5
Naming in HTML

• Files
• should begin with a letter
• should not contain spaces
• should indicate the contents or purpose of the
  page

6
HTML Tags

• Usually English words (example "blockquote") or
  abbreviations ("p" for paragraph)
• Are distinguished from the regular text because
  they are placed inside small angle brackets
  (example ltpgt or ltblockquotegt)
• Tags dictate
• How the page will be formatted (ltpgt begins a new
  paragraph)
• How the words appear (ltbgt makes text bold)
• Provide information that doesn't appear on the
  page itself (example lttitlegt tag).

7
HTML tag syntax

• Generally tags come in two parts
• Beginning tag lthtmlgt
• Ending tag lt/htmlgt
• The two parts mark off a part of the text and
  specify its format.
• Most tags support various attributes.lttag
  attr1valuegt item to be formatted lt/taggt
• Appearance of the web page depends also on the
  specific browser settings, and the users system
  and monitor.

8
Capitalization in HTML

• HTML is not case sensitive
• XHTML is case sensitive!
• Be consistent
• Lowercase is preferred in html
• Lowercase is required in the new XHTML standard.

9
Basic tag types

• Document tags identify the various parts of the
  document (Head, Body).
• Text structure tags determine the layout of the
  text (lists, paragraphs).
• Style tags tell the browser how to display the
  text.
• Image tags to incorporate images.
• Anchor tags to create hyperlinks.

10
Header and Body

• The header is enclosed by the ltheadgt and lt/headgt
  tags
• Contains information about a page that won't
  appear on the page itself, such as the title.
• The body is enclosed by ltbodygt and lt/bodygt
• Where the action is
• Everything that appears on the page is contained
  within these tags.

11
The ltpgt Tag

• Creates a new paragraph
• Skips a line from the previous item
• A ltpgt tag is one of the few tags that doesn't
  need to be closed off by a corresponding lt/pgt in
  HTML, however, the new XHTML standard does
  require closing tags.

12
Headlines

• lth1gt turns on large headlines
• lt/h1gt turns off large headlines
• lth3gt turns on medium sized headlines
• lt/h3gt turns off medium sized headlines
• lth6gt turns on small headlines
• lt/h6gt turns off small headlines

13
Example
Notepad or Textpad window

• lthtmlgt
• ltheadgt
• lttitlegtMy First Web Pagelt/titlegt
• lt/headgt
• ltbodygt
• lth1gtI love HTML!lt/h1gt
• ltpgtThis is our first try using HTML. So far it
  seems pretty easy. lt/pgt
• ltpgtI hope we get to memorize every single HTML
  tag in this class. lt/pgt
• lt/bodygt
• lt/htmlgt

Save as .html
14
Viewing Source Code

• Every Web page you visit is actually just a plain
  text document
• In Netscape choose Page Source from the View
  menu
• In Explorer choose Source from the View menu

15
Commenting Your Code

• Comment does not appear on your web page
• You can use it for personal reminders or notes to
  the people you're working with
• visible to anyone who views your source code
• Do not include any embedded HTML code in
  commented text because the results are
  unpredictable.
• lt!--This is an example of a comment.--gt

16
Hyperlinks Anchor Tags

• Link your site to any other page or file in your
  site, or on the Internet
• Default text is blue and underlined
• Normally the link opens in the same browser window

17
Hyperlinks

• lta href."gt and lt/agt
• ltagt means anchor point
• href means hypertext reference
• . Is where you put the URL you want to
  reference
• Example
• lta href"http//www.depaul.edu"gtVisit the DePaul
  site.lt/agt

Visit the DePaul site
18
Hyperlinks

• Relative
• In same directory
• hreffilename.html
• In a subfolder
• hrefsubfoldername/filename.html
• Up a directory
• href../filename.html
• Absolute
• Include entire URL
• Example hrefhttp//condor.depaul.edu/gandrus/
  index.html

19
Mailto

• Links to an email address
• Example
• lta href"mailtoyourname_at_hotmail.com"gt Email
  melt/agt.

Email me
20
Relative pathnames

• Example, you want to insert inside file1.htm a
  hyperlink to file2.htm
• lta hreffile2.htmgt If file2 is in the same
  folder as file1
• lt a hreffoldername/file2.htmgt If file2 is in a
  child folder (subfolder)
• lt a href../file2.htmgt If file2 is in a parent
  folder
• It is important that the folder structure on
  your local machine matches the directory
  structure on students.

21
Relative path
lta hrefHW3_d/hw3.htmlgt
lta href../main.htmlgt
lta href../Images/pic2.jpggt
22
A few Style tags

• ltigtlt/igt Italic
• ltbgtlt/bgt Boldface
• ltugtlt/ugt Underlined
• ltstrikegtlt/strikegt crosses out a word by having a
  line drawn through it
• ltsubgtlt/subgt generates subscripts
• ltsupgtlt/supgt generates superscripts

23
Font Tag (depreciated)

• ltfontgt lt/fontgt used to change the color, size,
  and face of any portion of text
• Font tag has three attributes
• Font color ltfont color0000FFgt
• Font size lt font size3gt
• Font face lt font faceArialgt
• The size attribute is relative to the text before
  it.
• See next slide for prefered method.

24
Using CSS to style fonts

• Example
• Instead of writing ltfont colorgreen size12pt
  faceverdanagtThis text is differentlt/fontgt
• We would first define a CSS style rule
  likespan.txt1 color green font-size 12pt
• font-family verdana
• And then use this rule in the body of our HTML
  document, like soltspan classtxt1gtThis text
  differentlt/spangt

25
Horizontal Rules

• lthrgt produces a horizontal line
• Default is shaded engraved line
• In HTML the lthrgt tag has no end tag.
• In XHTML the lthrgt tag must be properly closed,
  like this lthr /gt
• Attributes
• lthr sizenumbergt how thick is the line
• lthr widthnumber of pixels or percentgt Default
  horizontal rule is as wide as the page
• lthr alignleftrightcentergt
• lthr noshadegt the line appears as a solid bar

26
Breaks

• ltbrgt inserts a line break
• Does not skip a space as ltpgt does
• In HTML the ltbrgt tag has no end tag.
• In XHTML the ltbrgt tag must be properly closed,
  like this ltbr /gt (the space after br is
  required)

27
Special Characters
Special Character Sequence Corresponding Character
lt lt
gt gt
amp
quot
64 _at_
28
Special Characters (contd)
Special Character Sequence Corresponding Character
169
copy
174
reg
nbsp Non-breaking space
29
Aligning Text

• ltp alignleftgt aligns a paragraph to the left
• ltp alignrightgt aligns a paragraph to the right
• ltp aligncentergt centers a paragraph
• Better - do it in CSS
• ltp styletext-align leftgt aligns a paragraph
  to the leftlt/pgt
• Similarly for aligning right and center

30
Lists

• Two types
• Unordered lists
• Ordered lists

31
Unordered lists

• An unordered (or bullet) list uses the tag pair
  ltulgt lt/ulgt
• Each item in the list is preceded by a single
  list item tag ltligt
• It produces an indented list with a
  browser-supplied character in front of it (a
  small circle or a square)
• You can specify the type of symbol used by using
  the TYPE attribute

ltul typediscgt ltligtItemslt/ulgt
Other possible types aresquarecircle
32
Example
lthtmlgt ltheadgt lttitlegt Lists lt/titlegt lt/headgt ltbod
ygt lth1gtHere is an example of a
listlt/h1gt ltulgt ltligtFirst itemlt/ligt ltligtSeco
nd itemlt/ligt lt/ulgt ltul typesquaregt ltligtThir
d itemlt/ligt ltligtFourth itemlt/ligt lt/ulgt lt/bodygt
lt/htmlgt

• First item
• Second item

• Third item
• Fourth item

33
Ordered lists

• An ordered list uses the tag pair ltolgt lt/olgt
• Each item in the list is preceded by a single
  list item tag ltligt
• This also produces an indented list but the items
  are ordered.
• The default is to order by numbers (like this)

34
Example
lthtmlgt ltheadgt lttitlegt . lt/titlegt lt/headgt ltbodygt
lth1gtAn example of a ordered listlt/h1gt ltolgt
ltligtFirst itemlt/ligt ltligtSecond
itemlt/ligt lt/olgt lt/bodygt lt/htmlgt

1. First item
2. Second item

35
Attributes for ordered lists

• type can change the type of numbering used in
• a list.
• type I Uppercase Roman numerals
• type i Lowercase Roman numerals
• type A Uppercase Latin letters
• type a Lowercase Latin letters
• start can change where the lists begins the
• numbering.
• start 3 Starts from 3 instead of 1
• start 2 Starts from b instead of a

36
Example
lthtmlgt ltheadgtlttitlegtECT270 Listslt/titlegtlt/headgt ltb
odygtlth1gtTo do listlt/h1gt ltol type A
gt ltligtPick up dry cleaninglt/ligt ltligtClean the
house ltulgt ltligtSweep the
floorslt/ligt ltligtTake out garbagelt/ligt
ltligtClean kitchenlt/ligt lt/ulgtlt/ligt ltligtSto
p by post office ltulgt ltligtGet
stamps ltulgt ltligtOverseas
airmaillt/ligt ltligtDomesticlt/ligt
lt/ulgtlt/ligt ltligtMail packagelt/ligt lt/ulgtlt/
ligt lt/olgt lt/bodygtlt/htmlgt
37
Nested lists

• Both ordered and unordered lists can be nested.
• This is done by starting a new list before the
  current list has ended.
• There is no limit to the number of levels of
  nesting.
• Use indenting in the source code to distinguish
  between each level of nesting.

38

• For Assignments
• Review of how to
• Post your pages,
• transfer files to students with SSH,
• check permissions,
• what should your file structure be

39
Where do we put it?

• File structure on your account should be
• public_html (directory)
• IT130 (sub-directory in above directory)
• files (.html or text etc.) in the directory
  IT130
• Image files in a sub-directory of IT130 named
  Images.

40
Your directory structure
41
Hosting your site

• You will host your site on the server called
  students.
• Accounts on students are provided by DePaul.
• Off campus specify the host name
  asstudents.depaul.edu

42
How to connect to students

• Start SSH
• Choose Quick Connect
• Enter Username and Password (see next slide)

43
How to connect to students

• Instead of janedoe, use your username
• When prompted for a password, enter yours.

44
Permissions

• Be sure to check that your permissions are set
  correctly!
• Right click on public_html and look at
  properties
• Make sure it looks like this

45
About HW Assignment 3

• Starting from scratch, and using only Notepad (or
  similar text editor), you will be creating 3
  pages, and link them together.
• One page is your Assignment list page that you
  will be updating after every HW.
• The other 2 pages are the first versions of your
  Websites Homepage and AboutUs page.

46
HW3Part 2 Your Assignments.html page

• This page will be a list or table of contents for
  all your assignments.
• It will contain links to all of your homework
  assignments
• Create the page on your local machine
• Name it Assignments.html
• Upload it to your IT130 directory on students.

47
Example
My assignments Gary Andrusgandrus_at_cdm.depaul.edu
Homework1Homework2 Homework3 Homepage
About Us Homework4 Homepage About
Us Another page Homework5 Homework6