LectureEarly Internet NavigationHTML – Invented 1989HTMLWeb BrowsersSlide 61991:First Web BrowserOlder BrowsersSlide 9HTML SampleUsing TagsMarking Up a Page (formatting)HTML Page SetupDOCTYPESaving Files as HTM or HTML All html documents are “pure text”Mac – Text Edit users:index.htmlindex.html is Page 1File NamingPrep: Reveal File ExtensionsFile Extension Troubles:To Edit HTMLBasic Tags for Lab/HomeworkCreating Lists (Bulleted)Tips on TagsTry Some Tags!Editing Files in U:web-docsWebFolders: web-based FTP viewEditing files in web-docsMake changes/editWinScp3: tiger.cc.uop.eduWinScp3 Host - RemoteMac: Using FetchWhere am I?Notes on Privacy: Meta TagsForbidden Pages – UNIX permissionsWhat About Style?LectureBeginning HTMLEarly Internet Navigation•Prior to 1989, users employed text-based UNIX commands to navigate the various resources on the WAN•Archie, Gopher, Veronica and Jughead three standard "finding" tools on the Internet. •Used Telnet to contact servers•Cumbersome, complex UNIX toolsHTML – Invented 1989•Hypertext Markup Language•The “language” used to create web pages and web sites•Invented/written by Tim Berners-Lee at CERN, Geneva Switzerland.•Pioneered the concept of “linking” the text in files to other files.HTML•Governed by W3C•Been through various “versions”Figure: WWW GrowthWeb Browsers•HTML relies on Browsers•Software used to interpret HTML code and display the formatted page•It’s the “job” of the browser to translate the code•Also runs special programming like Java and JavaScriptWeb Browsers•Available for a variety of Operating Systems and Hardware:–Internet Explorer, Safari, AOL Browser, Netscape, Opera, Firefox•HTML pages are cross-platform:–Windows, MacOS, Linux, Mobile Devices...•Various browsers don’t always interpret code the same way1991:First Web BrowserOlder BrowsersWeb BrowsersHTML SampleUsing Tags•HTML Documents are “marked up” using tags:This word is <b> important </b>!<h1> This is a heading </h1>•Most tags come in pairs (start and end)•Tags are NOT case sensitive•Written in Plain TextStart Tag End TagMarking Up a Page (formatting)•Style–Font and Size–Color–Margins•Layout–Columns–Tables•Images–Logos–Pictures–Backgrounds–Buttons•Links–other pages–documents, etcHTML Page SetupHTML Pages should follow this standard:<html><head><title> Page Title </title></head><body>...</body></html>DOCTYPE•The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.•Depends on version –<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">–<!DOCTYPE html>Saving Files as HTM or HTMLAll html documents are “pure text”The browser recognizes pages that end in .htm or .html as web pagesBe sure to type full file name in Notepad or Text Edit: index.html – or else it will default to index.txtMac – Text Edit users:Must follow instructions from Resources link to properly configure TextEdit to function in pure text mode, not formatted view.Do this BEFORE you start coding or saving pagesRESOURCESindex.html•As a rule, the "first" page of all websites are always called "index.html"•The web server knows to find this page first and send it to the browser, unless a specific page was requested.index.html is Page 1index.htmlproducts.html about.html investorrelations.htmllinks.htmlFile Naming•web-docs folder is on a Unix O/S•File naming rules are different than Windows•Unix is case-sensitive and doesn’t like spaces.•Save all files as lowercase, no spaces•index.html apple.jpg links.htmlPrep: Reveal File Extensions•My Computer–Tools | Folder Options or Organize | Folder and Search Options •View•Uncheck “Hide extensions for known filetypes”•OK/ApplyFile Extension Troubles:•index•index.html•index.HTML•puppy•puppy.JPG•puppy.jpgTo Edit HTML•Open Source file•Edit file -- SAVE -- Refresh in Browser•Or Click EDIT in webfolders.pacific.eduBasic Tags for Lab/Homework<h1> Heading 1 (use 1-6)<p> Paragraph<br> *Break Line<b> Bold<i> Italic<u> Underline<hr> *Horizontal Rule<div> Division/SectionCreating Lists (Bulleted)<ul> Unordered List<li> List Item </li><li> List Item </li><li> List Item </li></ul><ol> Ordered List (instead of ul)Tips on Tags•Tags usually have a beginning and an end•Indenting and spacing will keep you sane•Filenames and URLs are almost always case-sensitive.•Tags are not case sensitiveTry Some Tags!<b>Text</b><i>Text</i><hr><h1>This is a heading</h1><h2>This is a subheading</h2>Editing Files in U:\web-docs•If you are not connected directly to a University computer:–webfolders.pacific.edu–WinScp (PC)–Fetch (Mac)WebFolders: web-based FTP view•webfolders.pacific.edu•User Drive•web-docs folderEditing files in web-docs•Click on any TEXT file (.html/.css)•Click: Edit/Share•Click: Edit as text fileMake changes/edit•Make Changes•Save•Changesare savedto server•RefreshpageWinScp3: tiger.cc.uop.eduWinScp3 Host - RemoteMac: Using FetchWhere am I? U:\web-docUNIX serversLab computersLibrary computersConnected directly to U:\web-docsLaptop or home computerNOT connected to U:\ driveMacPCMac & PCNotes on Privacy: Meta TagsYour pages “live” on a public web server and will be indexed in Google if you don’t add tags in <HEAD> area to instruct the auto bots not to index. Only if you do not want to be indexed, use the following tags:<head><meta name="googlebot" content="noarchive"><meta name="googlebot" content="noindex"><meta name="robots" content="noindex"><meta name="robots" content="nofollow"><title>Gigi's</title></head>Forbidden Pages – UNIX permissions•UNIX files have permissions assigned to all files: •During FTP session, permissions may become lost•Reset in WinSCP 4What About Style?•In modern website design, HTML tags are only used to “structure” the document – to show headings, paragraphs, lists, etc.•A special system called Style Sheets are used to describe how tags appear. That’s coming
View Full Document
Unlocking...