Introduction to HTML Part I

1
Introduction to HTML Part I

• Core 5.1
• Brooklyn College
• 
  Natalia Mosina - 2005

2
WWW and Browsers

• We already know that users can search the World
  Wide Web using an interactive application program
  called a browser.
• Browser loads any page at your request (whenever
  you type the whole URL into the browsers address
  bar or when you click on a hyperlink on the
  current page).
• A Page is a hypermedia document available on the
  Web.
• Homepage is the root page for an individual or an
  organization.

3
WWW and Browsers

• HTML Hypertext markup language.
• HTML is the underlying language of the Web
  design.
• It allows an author to identify different
  features (formatting) of the page and the page
  content.
• Note the same page can be displayed differently
  by the two different browsers since the browser
  handles the pages final formatting.

4
Universal accessibility of Web documents (as
opposed to others)

• Observation With a word-processor you get total
  control over the physical layout of the document.
  But if you access a word processing file on a
  different computer, it may not even work at
  all...
• Fact In order to use the file on another
  computer, it has to be a similar platform
  (PC/MAC), use a similar operating system, use an
  appropriate version of the software.

5
Universal accessibility of Web documents (as
opposed to others)

• Web pages are designed to be accessible
  world-wide, regardless of the type of hardware or
  software used on the client machine.
• The person designing the Web page has no control
  over the type of computer it will be viewed on.
• Therefore, the formatting of Web pages is done in
  such a manner that the content and logical design
  of the page should be constant, although the
  physical layout of the page may differ.
• You can look at the document source (View gt Page
  Source ). Note it is a plain text with extra
  tags.

6
HTML I

• HTML uses tags to instruct the browser how to
  display the text on the screen. Most tags come in
  pairs, one before the text on which they work,
  and one immediately after.
• The first line of a file to be displayed as a Web
  page is lt HTML gt the last line of the file is lt
  /HTML gt
• A Web page is typically divided into two parts -
  the HEAD and the BODY. The HEAD is delimited by lt
  HEAD gt and lt /HEAD gt, the BODY by lt BODY gt and lt
  /BODY gt .

7
General form of an HTML document
Opening tag

• lthtmlgt
• ltheadgt
• lttitlegt Title of the document lt/titlegt
• lt/headgt
• ltbodygt
• Content of the page goes here
• lt/bodygt
• lt/htmlgt

Displayed on The title bar of A page!!!
Head Section
Title is not A heading!!!
Body Section
Corresponding Closing tag
HEAD section has nothing to do with headings.
(This is a very confusing point!)
8
First Hands-On Experience(type the following
in a Notepad)

• lthtmlgt
• lt!-- You can write your comments here --gt
• lt!-- Comments are ignored by the browser and
  are not displayed --gt
• ltheadgt
• lttitlegt Title of the page goes here lt/titlegt
• lt/headgt
• ltbodygt
• Text that appears on the page goes here.
• Text that appears on the page goes here.
• lt/bodygt
• lt/htmlgt

9
Viewing your page in the browser.

• Save the file as Demo1.html File type must be
  set to "All Files" and that it should be named
  something.htm or .html - also don't use blanks in
  the file name.
• Open the file in the browser, by choosing Open
  File on Netscape, or Open gt Browse on Explorer.
  Or just locate the file and double-click it.
• Notice that the title is in the title bar, not
  inside the browser window. The text is not
  displayed on separate lines as you typed it in,
  but is reformatted into one paragraph.
• You can resize the window to see how the text is
  reformatted to fit nicely in the space provided.

10
The text is not displayed on separate lines as
you typed it in
Title is in the title bar, not inside the browser
window.
11
Reloading

• Keep your Notepad window and the Browser showing
  your page opened.
• Add another line to the Body section of your
  Demo1.html file.
• Save the file.
• Your Browser doesnt show any changes.
• Click Reload/Refresh button on the Standard Bar.
  Now you can see changes.

12
Basic Formatting

• As you have noticed, any spacing or line breaks
  in the HTML file is ignored by the browser when
  the text is displayed on the screen.
• In order to insert a new line, we must use the lt
  BR /gt tag which inserts a line break.
• This tag has no closing pair to indicate this,
  the tag has / inside brackets.

13
Basic Formatting

• The paragraph tag, lt P gt lt/Pgt,is used to break
  the text into paragraphs.
• If we want some text to appear in bold face, we
  use the lt B gt and lt /B gt tags around the text,
  for example
• lt B gt This will appear in bold facelt /B gt .
• To display text in italics, we use lt I gt and lt /I
  gt around the text.
• It is poor style to use underlining in Web pages
  because of the confusion with hyperlinks.
• (but you can do it using ltUgt and lt/Ugt tags.

14
What appears after ltbr /gt tag Will go to the new
line
New paragraph
Center alignment
Bold and italic
What appears after ltbr /gt tag Will go to the new
line
15
(No Transcript)
16
Headings are not Titles. lth1gtlt/h1gt
Big lth2gtlt/h2gt Medium lth3gtlt/h3gt
Small lth6gtlt/h6gt Smallest
Horizontal line
Lists ltulgtlt/ulgt unordered list ltolgtlt/olgt ordered
list ltligtlt/ligt list item (must put for each
item of the list)
17
(No Transcript)