What is the Internet?

1
Internet / Protocols / WWW

• What is the Internet?
• a network of networks an inter-network, or
  Internet
• What are Internet protocols?
• the rules for transferring information between
  programs
• HTTP - hypertext transfer protocol
• FTP - file transfer protocol
• SMTP simple mail transfer protocol
• What is the World Wide Web?
• a set of HTML pages accessible using the HTTP
  protocol

2
How the WWW Works

• How does a Web Browser (Firefox) fit in this
  picture?
• - your browser connects, using the HTTP protocol,
  to a web server- the web server fetches an HTML
  web page and sends the HTML to your browser-
  your browser turns the HTML page into a
  nice-looking page on your screen

Internet connection
Internet Routers
Their computer, Their web server (an HTTP
server) e.g. Apache
/mypage.html
Your computer, Your web browser e.g. Firefox
Text file containing an HTML web page
3
Hyper Text Markup Language - HTML

• Hyper Text Markup Language (HTML) Basics
• HTML is a mark-up language
• You add the mark-up tags to your text document
• Now follows a published standard via
  http//w3c.org/
• HTML is a language of mark-up tags in angle
  brackets ltgt
• each tag has a name and may have one or more
  quoted attributes
• eg. ltp classthesis stylecolor redgt
• Tags usually come in pairs (with some exceptions)
• lthtmlgt...lt/htmlgt, ltbodygt...lt/bodygt, ltpgt...lt/pgt,
  lthrgt, ltbrgt
• Web pages are free-form input line breaks can be
  used most anywhere and don't affect the
  appearance of the document
• Yes, your entire page could be a single line of
  text!

4
HTML Required Tags

• lthtmlgt lt/htmlgt (Required!)
• Basic tag to identify portion of file that
  contains HTML
• lthtmlgt is an opening tag
• lt/htmlgt is a closing tag (note the direction of
  the slash!)
• text between the opening and closing tag is
  called the element
• ltheadgt lt/headgt (Required!)
• placed at the top of document immediately after
  the lthtmlgt tag
• tags information about the document, e.g. author,
  style, etc.
• contains the required document lttitlegt...lt/titlegt
  tag

5
HTML Required Tags

• lttitlegt lt/titlegt (Required!)
• included as an element inside the ltheadgtlt/headgt
  section
• element of this tag is the title displayed in
  title bar of the browser
• may also be used as title of page when page is
  bookmarked
• should be meaningful and uniquely identify the
  page
• ltbodygt lt/bodygt (Required!)
• included as the second element inside the
  lthtmlgtlt/htmlgt tags.
• follows the ltheadgtlt/headgt portion of the
  document
• contains the information to be displayed in the
  browser window
• any attributes set on this tag will apply to the
  entire page

6
HTML Required Tags

• ltpgt lt/pgt (Required!)
• included as an element inside the ltbodygtlt/bodygt
  section
• Surrounds a paragraph of text
• DOCTYPE (Required!)
• Must be the very first line of your file, before
  lthtmlgt
• NOT an HTML tag it is an instruction to your web
  browser
• Tells the browser what version of HTML to expect
• In this course we use only the strict HTML
  version 4.01 type
• lt!DOCTYPE HTML PUBLIC
• "-//W3C//DTD HTML 4.01//EN"
• "http//www.w3.org/TR/html4/strict.dtd"gt
  

7
HTML Required Tags

• That's all you need for a basic web page!
• lt!DOCTYPE HTML PUBLIC
• "-//W3C//DTD HTML 4.01//EN"
• "http//www.w3.org/TR/html4/strict.dtd"gt
• lthtmlgt
• ltheadgt
• lttitlegtMy Titlelt/titlegt
• lt/headgt
• ltbodygt
• ltpgtThis is my first web page.lt/pgt
• lt/bodygt
• lt/htmlgt

8
HTML - Basic Tags

• More useful basic tags
• ltbrgt (no closing tag needed)
• put a line break in the text (starts a new line)
• lth1gt lt/h1gt through lth6gt ... lt/h6gt
• used to identify text as a Level 1 (major) to
  Level 6 (minor) heading
• Comment Tag
• lt!-- comments here --gt
• notice that the comment is typed as an attribute
  inside the tag
• comments may be one or multiple lines long (HTML
  is free-form)
• text within this tag will not be displayed or
  processed by your browser
• comments do not nest! No comments inside
  comments!
• The comment may not contain two (or more)
  adjacent dashes, e.g. --

9
HTML - Basic Tags

• The Anchor Tag Hyper Linking - making the web a
  web
• ltagt lt/agt
• one major attribute the location of the
  hyperlink
• hrefstring
• element is clickable/selectable as a document
  hyperlink
• browser attempts to load the page specified by
  the href attribute
• the href string can be a relative URL on the
  same server
• without the leading http//host/ it is in the
  same directory structure
• e.g. lta hrefpage2.htmlgtClick here to
  continuelt/agt
• e.g. lta hrefimages/box.jpggtSee the box
  here.lt/agt
• e.g. lta href../another_dir/page3.htmlgtClick
  herelt/agt

10
HTML - Basic Tags

• ltagtlt/agt anchor tag continued
• The href string can be an absolute URL on any
  server
• string can be any HTTP URL (web address) you
  like
• e.g. lta hrefhttp//www.gnu.org/philosophy/gtFree
  Softwarelt/agt
• The href string can be an email address
• string can be an email address preceded by
  mailto
• e.g. lta hrefmailtoidallen_at_idallen.cagtIan! D.
  Allen emaillt/agt
• Attempts to open an email client (specified in
  the web browser's options) and places the
  specified email address in the To field of a new
  email message.

11
HTML - Basic Tags

• ltimggt (no closing tag needed)
• used to display graphics (.jpeg, .png, .gif) in
  your web pages
• you must specify the URL for the image source,
  and an alt text
• the basic attributes of ltimggt are
• srcstring - the absolute or relative location
  of the image file
• altstring - Alternate Text for people who
  don't see images
• heightstring - image height, percent or
  absolute pixels (optional)
• widthstring - image width, percent or absolute
  pixels (optional)
• titlestring - mouse-over title of the image
  (optional)
• Etc.
• specifying height and width lets your browser
  reserve space in the document to load the image
  in the background and avoid redrawing the page
  after the image is fully loaded

12
HTML - Basic Tags

• lthrgt (no closing tag needed)
• Hard/Horizontal Rule draw a horizontal line
• rule appearance can be changed with styles
• ltblockquotegt lt/blockquotegt
• block quotation, indented
• ltqgt lt/qgt
• a short, in-line quotation as part of running
  text
• ltpregt lt/pregt
• preformatted text (e.g. computer code or output)
• fixed-width font (e.g. Courier fixed width)
• preserves spaces and line breaks

13
HTML - Basic Tags
HTML - Basic Tags
HTML - Basic Tags

• Font-style tags for more control, use CSS
  instead
• ltbgt lt/bgt and ltigt lt/igt
• bold and italic text (in-line)
• ltttgt lt/ttgt
• Teletype Text fixed-width font (e.g. Courier)
• ltbiggt lt/biggt and ltsmallgt lt/smallgt
• bigger and smaller text (in-line)

14
HTML - Phrase Tags

• Phrase tags often better done using CSS
• ltemgt lt/emgt and ltstronggt ... lt/stronggt
• text to be emphasized and strongly emphasized
• browser decides how usually italicized, made
  bold
• Less often used
• ltcodegt...lt/codegt, ltsampgt...lt/sampgt,
  ltkbdgt...lt/kbdgt
• computer code, sample code, keyboard text
• usually rendered in Courier fixed-width font

15
HTML Style Element/Attribute

• The ltstylegt element and the style attribute
• The style attribute can be used on most tags
• defines features for a single HTML element, e.g.
• ltp styletext-align centergtCenter me.lt/pgt
• The ltstylegt element ltstyle typetext/cssgt ...
  lt/stylegt
• ltstylegt tag always goes in the ltheadgt section
• defines style information for the whole HTML page
• requires the typetext/css attribute
• more details to come in the description of CSS
• to link to a separate CSS style sheet, use
  instead
• ltlink relstylesheet typetext/css
  hrefstringgt

16
HTML - Lists
Lists ltulgt Unordered List and ltolgt Ordered List

• ltulgt
• ltligtApplelt/ligt
• ltligtPearlt/ligt
• ltligtKiwilt/ligt
• ltligtltulgt
• ltligtBiglt/ligt
• ltligtSmalllt/ligt
• lt/ulgtlt/ligt
• lt/ulgt

• ltolgt
• ltligtApplelt/ligt
• ltligtPearlt/ligt
• ltligtKiwilt/ligt
• ltligtltulgt
• ltligtBiglt/ligt
• ltligtSmalllt/ligt
• lt/ulgtlt/ligt
• lt/olgt

17
HTML - Basic Tags
HTML Unordered Lists

• ltligtlt/ligt
• List Item surrounds each list item inside a list
• used inside both ltulgt and ltolgt list types
• ltulgtlt/ulgt
• surrounds an unordered list no numbering
• ltligt...lt/ligt items each indented and bulleted
• use styles (style attribute) to change type of
  bullet
• CSS style list-style-type string
• string can be circle, disc, square
• e.g. ltul stylelist-style-type squaregt ...
  lt/ulgt

18
HTML Ordered Lists

• ltolgt lt/olgt
• surrounds an ordered list
• items are indented and numbered (or alphabetized)
• use styles (style) to change type of numbering
• CSS style list-style-type string
• examples of string decimal, lower-alpha,
  upper-roman
• e.g. ltol stylelist-style-type upper-latingt
  ... lt/ulgt
• the start attribute determines first item's
  value
• e.g. ltol start3gt - begin numbering at 3 (or c,
  or iii)
• but this is deprecated, with no CSS replacement!
• http//www.w3schools.com/tags/att_ol_start.asp

19
HTML Definition List

• ltdlgtlt/dlgt
• definition list containing ltdtgt and ltddgt items
• ltdtgt...lt/dtgt definition title
• ltddgt...lt/ddgt definition description
• Example definition list containing two
  definitions
• ltdlgt
• ltdtgtHackerlt/dtgt
• ltddgtAn expert or enthusiast of any kind.lt/ddgt
• ltdtgtCrackerlt/dtgt
• ltddgtAn intruder into computer systems.lt/ddgt
• lt/dlgt

20
HTML - ltmetagt - Page Attributes

• ltmetagt (no closing tag needed)
• used only inside ltheadgt section of page
• gives details about page, e.g. author, keywords
• search engines may ignore keywords, since many
  pages use fake keywords to boost search results
• ltheadgt
• lttitlegtCST8281 Course Homepagelt/titlegt
• ltmeta name"Keywords" contentFundamentals,
  HTML, CSSgt
• ltmeta name"Description" contentAn introductory
  course dealing with computer and Internet
  fundamentals."gt
• ltmeta name"GENERATOR" content"Arachnophilia
  5.4"gt
• lt/headgt

21
HTML - ltmetagt - continued

• elements of ltmetagt include
• namestring identifies what type of meta content
  will follow
• contentstring details relating to the name
• ltmetagt can also be used to have your page
  automatically load another web page after a short
  delay
• ltmeta http-equiv"refresh" content"10
  urlindex.html"gt
• note the attribute name http-equivrefresh
• the content string begins with number of seconds
  before next page is loaded, followed by a
  semicolon, then url giving the URL of the next
  page to be loaded

22
HTML ltmetagt - charset Character Set

• Use ltmetagt to set the character set for the HTML
  page
• needed to pass W3C validation without warnings
• ltmeta http-equivContent-Type
  contenttext/html charsetUTF-8gt
• also frequently used charsetiso-8859-1
• iso-8859-1 is Latin-1 and includes French
• Latin-1 common in North America, Western Europe
• but UTF-8 includes all languages (preferred)

23
HTML Identify/Group Tags

• Identifying and Grouping elements (e.g. for CSS)
• ltdivgt...lt/divgt
• division or section
• groups and identifies one or more block-elements
• usually causes a line break before and after
• ltspangt...lt/spangt
• groups and identifies in-line elements (e.g.
  words)
• no visual change by itself (no line break)
• used to apply styles to parts of a text line,
  e.g.
• This ltspan stylecolor redgtredlt/spangt
  apple.

24
HTML Entities (Special Characters)

• HTML Entities for special characters, accents,
  foreign
• starts with ampersand and ends with semicolon
• nbsp non-breaking-space acts like a letter
• words connected with nbsp will not separate
  across a line break they stay together as one
  word
• e.g. Mr.nbspIan!nbspD.nbspAllen
• lt (less than) lt gt
  (greater than) gt
• quot (double quote) " apos
  (apostrophe) '
• amp (ampersand)
• many, many others!