Slide No. Slide No. 11
HTML and Web HTML and Web PublishingPublishingContinuedContinued
HTML and Web HTML and Web PublishingPublishingContinuedContinued
CS 104CS 104
Slide No. Slide No. 22
HTML and Web Publishing
What is HTML? What is HTML? reviewreview Why Learn HTMLWhy Learn HTML Netscape ComposerNetscape Composer
Slide No. Slide No. 33
What is HTML
Hypertext Mark-up LanguageHypertext Mark-up Language not a programming languagenot a programming language ““marking-up” text for emphasis and marking-up” text for emphasis and
organizationorganization standardstandard
Slide No. Slide No. 44
HTML file
ASCII file with a .html extensionASCII file with a .html extension contains tags and textcontains tags and text all web documents are HTML filesall web documents are HTML files
Slide No. Slide No. 55
Tags
commands surrounded by <>commands surrounded by <> understood by the browser to take some understood by the browser to take some
actionaction
Slide No. Slide No. 66
Example of HTML template
<HTML><HTML> <HEAD><HEAD> <TITLE>Enter title here</TITLE><TITLE>Enter title here</TITLE> </HEAD></HEAD> <BODY><BODY> </BODY></BODY> </HTML></HTML>
Slide No. Slide No. 77
Why learn HTMLWhy learn HTML
Have a global audienceHave a global audience growth in the use for business and commerce growth in the use for business and commerce
is expanding dailyis expanding daily do not need programming skillsdo not need programming skills you have the freedom to supply information you have the freedom to supply information
to readers in powerfully innovative ways.to readers in powerfully innovative ways. Most dynamic medium you will ever publish Most dynamic medium you will ever publish
in in
Slide No. Slide No. 88
What can I do in HTMLWhat can I do in HTML
HTML tags can produce HTML tags can produce most most of the of the formatting a normal word processor can do. formatting a normal word processor can do. (tables, paragraphs, lists, italics, bold ….) (tables, paragraphs, lists, italics, bold ….)
But it can also incorporate images, But it can also incorporate images, sounds, ,hyperlinks, other programssounds, ,hyperlinks, other programs
For each one of these there is a special tagFor each one of these there is a special tag For example the anchor tagFor example the anchor tag
Slide No. Slide No. 99
Linking to Other DocumentsLinking to Other Documents
Chief power of HTML comes from its Chief power of HTML comes from its ability to link regions of text (and also ability to link regions of text (and also images) to another documentimages) to another document
BrowsersBrowsers highlight highlight these regions to these regions to indicate that they are hypertext linksindicate that they are hypertext links
HTML’s single hypertext-related tag is HTML’s single hypertext-related tag is <A>, which stands for anchor<A>, which stands for anchor
Slide No. Slide No. 1010
Providing LinksProviding Links
To complete the anchor tag you must To complete the anchor tag you must provide a link (a viewable HTML file)provide a link (a viewable HTML file)
Slide No. Slide No. 1111
Relative and Absolute LinksRelative and Absolute Links
Remember this concept in spreadsheets, Remember this concept in spreadsheets, well it also occurs in links.well it also occurs in links.
A relative link, depends where the A relative link, depends where the document that uses the link is located. If document that uses the link is located. If the anchor and the source are in the same the anchor and the source are in the same directory, then only the directory, then only the file name.htmlfile name.html is is necessary. necessary.
Absolute pathname gives the entire URLAbsolute pathname gives the entire URL
Slide No. Slide No. 1212
LinksLinks
Relative links should be used within your Relative links should be used within your set of pages. This way it is easier to move a set of pages. This way it is easier to move a group of documents to another location, group of documents to another location, because the relative path name will still be because the relative path name will still be valid.valid.
You must use absolute pathnames when You must use absolute pathnames when linking document that are not directly linking document that are not directly related. (another site)related. (another site)
Slide No. Slide No. 1313
URL syntaxURL syntax
protocol://host.domain[:port]/path/filenameprotocol://host.domain[:port]/path/filename In our links, the protocol is usually HTTP, In our links, the protocol is usually HTTP,
but it can be news, telnet, ftp …but it can be news, telnet, ftp … HTTP = Hypertext transfer protocolHTTP = Hypertext transfer protocol If you use a DOS/Windows-based system, a If you use a DOS/Windows-based system, a
backslash indicates a change in folders. backslash indicates a change in folders. However, the Web follows UNIX syntax However, the Web follows UNIX syntax which is a forward slashwhich is a forward slash..
Slide No. Slide No. 1414
Publishing on the Web
all web documents are in HTMLall web documents are in HTML HTML describes the format layout and HTML describes the format layout and
logical structure of a hypermedia documentlogical structure of a hypermedia document user’s web browser translates the HTML user’s web browser translates the HTML
documentdocument to publish - need to place the HTML to publish - need to place the HTML
document where the Web Server can access document where the Web Server can access itit
Slide No. Slide No. 1515
Your URLYour URL
The web server for the VAX expects to find The web server for the VAX expects to find your homepage in a special place (the www your homepage in a special place (the www directory of your account). Webready directory of your account). Webready already has placed the homepage template already has placed the homepage template ((index.htmlindex.html) there. So when you type in:) there. So when you type in:
http://bsuvc.bsu.edu/home/http://bsuvc.bsu.edu/home/yourvaxusernameyourvaxusername// This will retrieve the This will retrieve the INDEX.HTMLINDEX.HTML file from file from
your www directory.your www directory.
Slide No. Slide No. 1616
Updating Your HomepageUpdating Your Homepage
There are many tools to use to create html There are many tools to use to create html documents. They range from simple text documents. They range from simple text editors where you have to know HTML to editors where you have to know HTML to what you see is what you get environments.what you see is what you get environments.
These WYSIWYG tools are similar to using These WYSIWYG tools are similar to using a word processor (Word)a word processor (Word)
Slide No. Slide No. 1717
How to Update the InformationHow to Update the Information
You already used Word to create a Web You already used Word to create a Web page by saving it as an HTML file.page by saving it as an HTML file.
By bringing this page back into Word again By bringing this page back into Word again you can continue to make changes to the you can continue to make changes to the same document same document
Slide No. Slide No. 1818
The VaxThe Vax
This computer system is different than the This computer system is different than the Windows system you are accustomed toWindows system you are accustomed to FilenamesFilenames
all filename get converted to uppercaseall filename get converted to uppercase case insensitive (this is NOT true of other systems)case insensitive (this is NOT true of other systems) there can be no blanks in a filenamethere can be no blanks in a filename
Slide No. Slide No. 1919
PublishingPublishing
The process of placing your web pages on The process of placing your web pages on serverserver
Each server can have a different methodEach server can have a different method Our sever is the VAX ( bsuvc)Our sever is the VAX ( bsuvc) BSUVC expects the html pages to be stored BSUVC expects the html pages to be stored
in a directory named www and the root in a directory named www and the root page must be name INDEX.HTMLpage must be name INDEX.HTML
Slide No. Slide No. 2020
FTP - The File Transfer ProtocolFTP - The File Transfer Protocol
How are we going to transfer the file(s) we How are we going to transfer the file(s) we created using Word that are now on the created using Word that are now on the floppy to the directory WWW on the VAX?floppy to the directory WWW on the VAX?
FTPFTP The program FTP is loaded on many The program FTP is loaded on many
computers on across campus.computers on across campus.
Slide No. Slide No. 2121
Availability of FTPAvailability of FTP
On computers running any version of Windows On computers running any version of Windows 95/97, you can execute it from the start menu95/97, you can execute it from the start menu
Also on computers running Windows NT Also on computers running Windows NT with with aa Start menu. Start menu.
On some NT machines that have a specific FTP On some NT machines that have a specific FTP icon on the desktop (no start menu)icon on the desktop (no start menu)
NOTICE: you need either a start menu or an NOTICE: you need either a start menu or an FTP iconFTP icon
Slide No. Slide No. 2222
Executing FTPExecuting FTP
Click the Start button, then select programsClick the Start button, then select programs then click MS DOS Promptthen click MS DOS Prompt You will see a plain black window on your You will see a plain black window on your
screen with only white text and blinking screen with only white text and blinking cursorcursor
Now type in A: and hit enterNow type in A: and hit enter type in FTP BSUVC.BSU.EDUtype in FTP BSUVC.BSU.EDU
Slide No. Slide No. 2323
Executing FTPExecuting FTP
With that command you have just asked With that command you have just asked FTP to connect you to the VAXFTP to connect you to the VAX
As you know the VAX is a multiuser As you know the VAX is a multiuser system and now you enter your Username system and now you enter your Username and Password.and Password.
If you have logged in successfully you will If you have logged in successfully you will see a message confirming thissee a message confirming this
now type in the word bin and hit the returnnow type in the word bin and hit the return
Slide No. Slide No. 2424
Executing FTPExecuting FTP
The bin command is necessary because the The bin command is necessary because the files are in binary format for the web files are in binary format for the web (graphic). Be sure that you enter bin in (graphic). Be sure that you enter bin in lowercase letters.lowercase letters.
Enter the command cd wwwEnter the command cd www you have just told ftp to change to the www you have just told ftp to change to the www
directory in your Vax accoutdirectory in your Vax accout
Slide No. Slide No. 2525
Executing FTPExecuting FTP
Now you are ready to transfer the files to the Now you are ready to transfer the files to the WWW folder WWW folder
at the prompt typeat the prompt type put index.htmlput index.html if you have other files that index.html uses as if you have other files that index.html uses as
hyperlink, transfer them now!hyperlink, transfer them now! put mypicture.jpgput mypicture.jpg after transferring all the files, type in quit / byeafter transferring all the files, type in quit / bye close the windowclose the window
Slide No. Slide No. 2626
Other FTP remindersOther FTP reminders
If you are a slow typist, FTP will time out. If you are a slow typist, FTP will time out. You will just type in bye and You will just type in bye and
start at ftp bsuvc.bsu.edustart at ftp bsuvc.bsu.edu if you have all your files to transfer in one if you have all your files to transfer in one
directory, you can use a short cut command directory, you can use a short cut command mput *.*mput *.*
Notice that you can PUT but you also can Notice that you can PUT but you also can GET. GET.
Slide No. Slide No. 2727
Put and GetPut and Get
Machine from where Machine from where processed the ftpprocessed the ftp Machine connecting toMachine connecting to
GetGet
Files from connecting machineFiles from connecting machinegoing to the ftp machinegoing to the ftp machine
PUTPUT
Files from the ftp machine going to the Files from the ftp machine going to the connecting machineconnecting machine
Slide No. Slide No. 2828
ViewingViewing
To see your masterpieceTo see your masterpiece use Explorer or Netscapeuse Explorer or Netscape http://bsuvc.bsu.edu/home/http://bsuvc.bsu.edu/home/your_usernameyour_username
Slide No. Slide No. 2929
Questions
Top Related