Introduction to HTML

1
Introduction to HTML
2
Contents

• Getting Started..
• What is HTML?
• How to create and View an HTML document?
• Basic HTML Document Format
• The HTML Basic tags
• Publishing Pages

3

• What the following term mean
• Web server a system on the internet containg
  one or more web site
• Web site a collection of one or more web pages
• Web pages single disk file with a single file
  name
• Home pages first page in website
• Think about the followings before working your
  Web pages.
• Think about the sort of information(content) you
  want to put on the Web.
• Set the goals for the Web site.
• Organize your content into main topics.
• Come up with a general structure for pages and
  topics.

4

• What is HTML?
• Telling the browser what to do, and what props to
  use.
• A serises of tags that are integrated into a text
  document.
• Tags are
• surrounded with angle brackets like this
• ltBgt or ltIgt.
• Most tags come in pairs
• exceptions ltPgt, ltbrgt, ltligt tags
• The first tag turns the action on, and the
  second turns it off.

5

• What is HTML?
• Telling the browser what to do, and what props to
  use.
• A serises of tags that are integrated into a text
  document.
• Tags are
• surrounded with angle brackets like this
• ltBgt or ltIgt.
• Most tags come in pairs
• exceptions ltPgt, ltbrgt, ltligt tags
• The first tag turns the action on, and the
  second turns it off.

6

• The second tag(off switch) starts with a forward
  slash.
• For example ,ltBgt text lt/Bgt
• can embedded, for instance, to do this
• ltHEADgtltTITLEgt Your text lt/HEADgtlt/TITLEgt it won't
  work.
• The correct order is ltHEADgtltTITLEgt Your text
  lt/TITLEgtlt/HEADgt
• not case sensitivity.
• Many tags have attributes.
• For example, ltP ALIGNCENTERgt centers the
  paragraph following it.
• Some browsers don't support the some tags and
  some attributes.

7

• Basic HTML Document Format

ltHTMLgt ltHEADgt ltTITLEgtWENT'99lt/TITLEgt lt/HEADgt ltBO
DYgt Went'99 lt/BODYgt lt/HTMLgt
See what it looks like
8

• How to Create and View an HTML document?
• 1.Use an text editor such as Notepad to write the
  document.
• 2.Save the file as filename.html on a PC. This is
  called the Document Source.
• 3.Open Internet Explorer (or any browser)
  Off-Line
• 4.Click on File, Open File and select the
  filename.html document that you just created.
• 5.Your HTML page should now appear just like any
  other Web page in Netscape.

9

• 7.You may now switch back and forth between the
  Source and the HTML Document
• switch to Notepad with the Document Source
• make changes
• save the document again
• switch back to Internet Explorer
• click on RELOAD and view the new HTML Document
• switch to Notepad with the Document Source......

10

• Tags in head
• ltHEADgt...lt/HEADgt-- contains information about the
  document
• ltTITLEgt...lt/TITLEgt-- puts text on the browser's
  title bar.

11

• Tags in Body
• Let's talk Text
• Heading ltH1gt lt/H1gt
• CenterltCentergt lt/Centergt
• Line Break ltPgt ,ltBrgt
• Phrase Markups ltIgtlt/Igt ,ltBgtlt/Bgt
• Create a List
• Unordered list ltULgtltligt
• Ordered list ltOLgtltligt
• Nested

12

• Add Images
• Use ltIMG SRCimagefilenamegt tags
• How to specify Relative pathnames
• Attributes of IMG tag
• -width,height
• -Alt
• -Align
• -ltImg srcmy.gif width50 height50 alignright
• altMy imagegt

13

• Add some Link
• Use ltA hreffilenameURLgtlt/agttags
• How to specify Relative pathnames
• Kinds of URLs
• -http//www.mail.yahoo.com
• - ftp//ftp.foo.com/home/foo
• - gopher//gopher.myhost.com/
• - news//news.nuri.net
• - mailtoganesan_at_oakland.edu

14

• How to make colors changes?
• Hexadecimal number
• Color names ltFont colorwhitegt
• Changing the Background color
• ltBODY BGCOLOR19378agt
• Changing Text color
• ltBODY BGCOLOR19378a TEXTffffff
  LINKffff66 VLINK66ffffgt
• Spot color
• ltFONT COLOR66ffccgtWENT'99lt/FONTgt
• Image Background
• ltBODY BACKGROUNDbgimg.gif gt

15

• The current HTML document is my.html and the
  current directory is Iam
• C\- ?Iam -my.html
• -your.html
• ?Type this ltA hrefyour.htmlgtYour
  link lt/Agt
• C\- ?Iam -my.html
• ?Child -your.html
• ?Type this ltA hrefChild/your.html
  gtYour link lt/Agt
• C\- ? Iam -my.html
• ? Sister -your.html
• ?Type this ltA href../Sister/your.
  htmlgtYour link lt/Agt
• C\- ? Mother -your.html
• ? Iam -my.html
• ?Type this ltA href../your.htmlgtYou
  r link lt/Agt k

16

• What is HTML?
• Telling the browser what to do, and what props to
  use.
• A serises of tags that are integrated into a text
  document.
• Tags are
• surrounded with angle brackets like this
• ltBgt or ltIgt.
• Most tags come in pairs
• exceptions ltPgt, ltbrgt, ltligt tags
• The first tag turns the action on, and the
  second turns it off.

17

• The second tag(off switch) starts with a forward
  slash.
• For example ,ltBgt text lt/Bgt
• can embedded, for instance, to do this
• ltHEADgtltTITLEgt Your text lt/HEADgtlt/TITLEgt it won't
  work.
• The correct order is ltHEADgtltTITLEgt Your text
  lt/TITLEgtlt/HEADgt
• not case sensitivity.
• Many tags have attributes.
• For example, ltP ALIGNCENTERgt centers the
  paragraph following it.
• Some browsers don't support the some tags and
  some attributes.

18

• Basic HTML Document Format

ltHTMLgt ltHEADgt ltTITLEgtWENT'99lt/TITLEgt lt/HEADgt ltBO
DYgt Went'99 lt/BODYgt lt/HTMLgt
See what it looks like
19

• How to Create and View an HTML document?
• 1.Use an text editor such as Notepad to write the
  document.
• 2.Save the file as filename.html on a PC. This is
  called the Document Source.
• 3.Open IE (or any browser) Off-Line
• 4.Click on File, Open File and select the
  filename.html document that you just created.
• 5.Your HTML page should now appear just like any
  other Web page in Netscape.

20

• 7.You may now switch back and forth between the
  Source and the HTML Document
• switch to Notepad with the Document Source
• make changes
• save the document again
• switch back to Internet Explorer
• click on RELOAD and view the new HTML Document
• switch to Notepad with the Document Source......

21

• Tags in head
• ltHEADgt...lt/HEADgt-- contains information about the
  document
• ltTITLEgt...lt/TITLEgt-- puts text on the browser's
  title bar.

22

• Tags in Body
• Let's talk Text
• Heading ltH1gt lt/H1gt
• CenterltCentergt lt/Centergt
• Line Break ltPgt ,ltBrgt
• Phrase Markups ltIgtlt/Igt ,ltBgtlt/Bgt
• Create a List
• Unordered list ltULgtltligt
• Ordered list ltOLgtltligt
• Nested

23

• Add Images
• Use ltIMG SRCimagefilenamegt tags
• How to specify Relative pathnames
• Attributes of IMG tag
• -width,height
• -Alt
• -Align
• -ltImg srcmy.gif width50 height50 alignright
• altMy imagegt

24

• Add some Link
• Use ltA hreffilenameURLgtlt/agttags
• How to specify Relative pathnames
• Kinds of URLs
• -http//www.mail.yahoo.com
• - ftp//ftp.foo.com/home/foo
• - gopher//gopher.myhost.com/
• - news//news.nuri.net
• - mailtoganesan_at_oakland.edu

25

• How to make colors changes?
• Hexadecimal number
• Color names ltFont colorwhitegt
• Changing the Background color
• ltBODY BGCOLOR19378agt
• Changing Text color
• ltBODY BGCOLOR19378a TEXTffffff
  LINKffff66 VLINK66ffffgt
• Spot color
• ltFONT COLOR66ffccgtWENT'99lt/FONTgt
• Image Background
• ltBODY BACKGROUNDbgimg.gif gt

26

• The current HTML document is my.html and the
  current directory is Iam
• C\- ?Iam -my.html
• -your.html
• ?Type this ltA hrefyour.htmlgtYour
  link lt/Agt
• C\- ?Iam -my.html
• ?Child -your.html
• ?Type this ltA hrefChild/your.html
  gtYour link lt/Agt
• C\- ? Iam -my.html
• ? Sister -your.html
• ?Type this ltA href../Sister/your.
  htmlgtYour link lt/Agt
• C\- ? Mother -your.html
• ? Iam -my.html
• ?Type this ltA href../your.htmlgtYou
  r link lt/Agt

Relative pathnames
Relative pathnames
Relative pathnames
Relative pathnames
27
Publishing pages

• Viewing your pages via the internet
• Send pages to a web server
• How a page is distributed
• Server space maintenance
• Common ways (protocols) of sending pages to a web
  server
• FTP
• SSH
• Through a mapped drive

28
Review Client and Server

• User uses HTTP client (Web Browser)
• It has a URL (e.g. http//www.yahoo.com/)
• Makes a request to the server
• Server sends back data (the response)
• User clicks on the client side...

request (URL)
response (HTML, )
Client
Server
29
Publishing pages

• Sending pages via FTP to a web server
• File Transfer Protocol
• Plain-text data transfer
• Microsofts FTP client
• ftp//usernamepassword_at_www.ftpserver.com
• ftp//username_at_www.ftpserver.com
• Other FTP clients
• WS_FTP
• CuteFTP

30
Publishing pages

• Exercise Publish pages to usiweb.usi.edu
  through an FTP client
• Go to your desktop
• Open My Computer or Internet Explorer
• Type in the following URL into the address field
  Oaklands ftp address

31
Publishing pages

• Sending pages via SSH
• Secure Shell
• Encrypted data transfer
• More secure than FTP
• SSH used with www.oakland.edu for off-campus
  access
• SSH clients
• SSH Secure Shell
• PuTTY (Free Win32 SSH client)

32
Publishing pages

• Sending pages through a mapped drive
• Method used to publish on campus to
  www.oakland.edu. Normally labeled H or the H
  drive.

33
Publishing pages

• Creating a mapped drive for www.usi.edu
• Make sure you have access to on the web server
• If not Have your fiscal agent send an e-mail to
  Web Services approving access
• Go to your computers desktop
• Right click on the My Computer icon
• Select Map Network Drive
• Enter Q as the drive letter
• Enter \\www\www_usi as the folder
• Click on Finish or OK
• Traverse to your folder you have access to using
  FrontPage or another web publishing application

34
(No Transcript)