Filetype PDF | Posted on 03 Feb 2023 | 2 years ago
Authentication
digital resources
128x Filetype PDF File size 3.39 MB Source: users.cs.cf.ac.uk
Creating HTMLDocumentsandManagingWebsite
Basic HTMLProgramming Text Editors
• BBEditLite
HTML • Notepad, wordpad
HTMLstandsforHypertextMarkupLanguage. 287 • Other text editing programs 288
HTMLfilesarebasicallyspecialtext files: WYSIWYGEditors
• Containspecial control sequences or tags that control how text is • MSFrontpage
to be formatted. • MacromediaDreamweaver
• HTMLfilesarethe“sourcecode”forWebBrowsers • Others exist
– AbrowserreadstheHTMLfileand First use text editor programs to learn HTML Basics. Starting with
– Tries to display it using the tags to control layout. ◭◭ WYSIWYGhinderslearningprocess. OnlyuseWYSIWYGwhenyou ◭◭
• Text file created by: ◮◮ knowbasics. ◮◮
– Anytexteditor—FREE:BBEditLite ◭ ◭
– SpecialHTMLeditors—freeware—expensive: Dreamweaver ◮ ◮
Back Back
Close Close
Creating Your OwnWebPages Storing and Serving Files on School UNIX WWWServer
TheprocessincreatingpermanentWWW(HTML+relatedscripts • Onceyouarehappywiththeformatofthelocal(Macbasedfiles)
(later)) pages in this course is basically andyouwantapermanentWebpageyoushouldFTPthefileto
289 yourpersonalUNIXfilespace. 290
• Create, and test, local files on the Macintosh Computer or share
UNIXfilesdirectlyacrossalocally(samba)mountedsharedfolder. OR
• Save HTMLdocumentswithextension.html,e.g. sport.html • If you have mounted you UNIX files via SAMBA
• Ultimately you should store Permanent Copies of files on
Department’sUNIXSystem/WebServer. There are 2 places where you may store HTML files on your
personal UNIXWWWfilespace.
◭◭ NOTE:ThereisaDifference ◭◭
◮◮ ◮◮
◭ ◭
◮ ◮
Back Back
Close Close
TwoSpecialSub-DirectoriesinyourHomeDirectory MakingYourWebSpaceAvailable
project html —Filesplaceinthisdirectorywillbeviewableonly The directories should have been created for you but you wil have
within the department. Ideal for coureswork to PUBLISHyourpagesontheCOMSCInformationServer.
• UseURL: • You agree to abide by University/School Regulations when you
291 PUBLISHyourpages 292
http://project.cs.cf.ac.uk/A.B.Surname • To PUBLISHyourpages,gotoURL:
whereA.B.Surnameisyourlongemailnametoreferencefiles http://www.cs.cf.ac.uk/user/
fromtheWeb.
public html —Filesplaceinthisdirectorywillbeviewableonthe andclick on PUBLISHbuttontomakeyourpagesavailable.
wholeInternet. ThisiswhereyouwouldcreateyourHomePage. • UNPUBLISHavailablealso.
• UseURL:
http://users.cs.cf.ac.uk/A.B.Surname ◭◭ ◭◭
whereA.B.Surnameisyourlongemailnametoreferencefiles ◮◮ ◮◮
fromtheWeb. ◭ ◭
◮ ◮
Back Back
Close Close
Further Information of your School’s Web Space UNIXFilespaceandStoringFilesonUNIX:SAMBA
Further information on user and project Web pages at:
• User: http://www.cs.cf.ac.uk/systems/html/451 (Web) or TwowaystotransferyourfilesonUNIXWebSpace
http://www.cs.cf.ac.uk/systems/pdfs/451.pdf (PDF) MountUnixFilesviaSamba
• Project: http://www.cs.cf.ac.uk/systems/html/452 (Web) or 293 • Use Macintosh Finder 294
http://www.cs.cf.ac.uk/systems/pdfs/452.pdf (PDF) GOConnecttoServer...
to mount your web
space.
• Choose the COMSC
network and the
claros (or most
◭◭ other machines) ◭◭
◮◮ • Select and Store files ◮◮
◭ in in project html or ◭
◮ public html ◮
Back directory. Back
Close Close
UNIXFilespaceandStoringFilesonUNIX:FTP Creating Your OwnHomePageandotherfilesfortheWWW
• CreatethefileusingBBEdit(oranother)andsaveittodisk. Ifthe
If will need to transfer files from the Macintosh to UNIX and file is
alternative is to use FTP (STP from outside School): intended to be your home page save it as index.html.
• Fire up Fetch Application or command line FTP/SFTP. 295 • Makesurefileiscorrect by viewing it locally in Web Browser on 296
• FTPtoftp.cs.cf.ac.uk Macintosh(orPC!).
• Login into your own file space by using your on UNIX User ID • UseSamba/FTPtoaccessyourUNIXFilespace.
(e.g. scm...) and password. • Save file in the public html directory. It Must be placed here.
• Change the directory to your project html or public html • index.html should be the “home” file for every subdirectory
directory. of your web space — Browser always look for this file if just a
directory is referenced, E.g.:
• Put the file(s) in this directory.
◭◭ http://users.cs.cf.ac.uk/A.B.Surname/:Youhomepage ◭◭
◮◮ is assumed to be index.html ◮◮
◭ http://users.cs.cf.ac.uk/A.B.Surname/SubDIR: ◭
◮ index.htmlisassumedtobepresentintheSubDIR. ◮
Back Back
Close Close
TheBestWaytoLearnHTML ViewingHTMLSourceinyourBrowser
ThebestwaytolearnHTML(oranyprogramminglanguage)isby • Find a Web page you like or wish to learn how it is formatted.
example. • MakesurethisWebpageiscurrentlybeingviewedbyWebBrowser.
• YoucanviewtheWWWpagebyselectingtheViewSource
Youcanreadmanybooksbutpractice,i.e. writingyourownHTML 297 (Safari) item or Source (Explorer) item from the View Menu. 298
pages and learning from example WWW pages on line, is the best
waytolearntipsandconstructs.
◭◭ • ComparetheHTMLwiththebrowserdisplayofthePage. ◭◭
◮◮ • Portions of the file may be selected with the mouse (click and ◮◮
◭ drag mouse) and then Copied and Pasted into other documents ◭
◮ (E.g. BBEdit/Dreamweaverwindows. ◮
Back Back
Close Close
HTMLTags
AnatomyofAnyHTMLDocument All HTMLcommandsortagshavethefollowingform:
EveryHTMLdocumentconsistsoftwoelements: 299 ... 300
• Headelements—providespagetitleandgeneralpage Tags control the structure, formatting and hypertext linking or
formatting commands HTMLpages.
• Bodyelements—putthemainHTMLtextinthispart. Tagsaremadeactivebyandmustbemadeinactive
byanassociated .
HTML is not case sensitive — tags can be upper or lower case
◭◭ letters (even mixtures of cases) — Not recommended. ◭◭
◮◮ ◮◮
◭ ◭
◮ ◮
Back Back
Close Close
Basic HTMLPageStructure Basic HTMLCoding
Headelements
WecannowmeetorfirstthreeHTMLtagshtml, headandbody • ....tagdelimitsheadpartofdocument.
NotethatthesespecifythebasicanatomyofeveryHTMLpage. • .... DefinesthetitleoftheWebpage.
301 • Ever Webpageshouldhaveatitle 302
– Displayed as Title of Web Browser Window
head elements go here – UsedinBookmarksorHotliststoidentifypage
– Maketitle succinct but meaningful
body elements go here – Onlyonetitle per page
– Onlyplaintext in title (no other tags).
– Usually first level one header same as title (see
NOTE: ◭◭ below). ◭◭
• is the first tag of any HTML page. It indicates that the ◮◮ ◮◮
contents of the page is in HTML. ◭ ◭
• hastobethelasttagofanyHTMLpage ◮ ◮
Back Back
Close Close
no reviews yet
Please Login to review.
