Web 101
25
Web 101 for VFP Web 101 for VFP Developers Developers Mike Feltman Mike Feltman
-
Upload
mike-feltman -
Category
Documents
-
view
368 -
download
7
description
SW Fox Intro to web development I think.
Transcript of Web 101
Web 101 for VFP Web 101 for VFP DevelopersDevelopers
Mike FeltmanMike Feltman
About meAbout me
President F1 TechnologiesPresident F1 Technologies Toledo, OH USAToledo, OH USA
AgendaAgenda
Getting StartedGetting Started HTMLHTML CSSCSS Interacting with VFPInteracting with VFP Bonus?Bonus?
Supply ListSupply List
Web ServerWeb Server IIS (Internet Information Server)IIS (Internet Information Server) Apache Apache
HTML EditorHTML Editor Standards: Microsoft Expression Web, FrontPage, Standards: Microsoft Expression Web, FrontPage,
Dreamweaver, Visual Studio.NETDreamweaver, Visual Studio.NET Popular Low Cost Alternatives: HotDog, CoffeeCupPopular Low Cost Alternatives: HotDog, CoffeeCup No-frills: Notepad, VFPNo-frills: Notepad, VFP Barf Bag: WordBarf Bag: Word
VFP Compatible Server Side Scripting LanguageVFP Compatible Server Side Scripting Language Web Connection, Active FoxPro Pages (AFP) , FoxWeb or Web Connection, Active FoxPro Pages (AFP) , FoxWeb or
ActiveVFPActiveVFP ASP, ASP.NET & COMASP, ASP.NET & COM
Getting StartedGetting Started
Create FolderCreate Folder Plan Directory StructurePlan Directory Structure Map to Virtual DirectoryMap to Virtual Directory Set Permissions & PropertiesSet Permissions & Properties Create Default PageCreate Default Page
Elements of a Web SiteElements of a Web Site
HTML PagesHTML Pages GraphicsGraphics Cascading Style SheetsCascading Style Sheets Script/CodeScript/Code DataData
HTML BasicsHTML Basics
Hyper Text Markup LanguageHyper Text Markup Language Tag Based Language derived from Tag Based Language derived from
SGMLSGML Tags enclosed in angle brackets Tags enclosed in angle brackets
<<TagNameTagName> and </> and </TagNameTagName>> Tags may have properties Tags may have properties
<<TagName Property=“value”TagName Property=“value”> >
Foundation TagsFoundation Tags
<html><html> <head><head> <title><title> <body><body>
Tags for Search Engines Tags for Search Engines
<meta name="keywords" <meta name="keywords" content=“content=“comma delimited list of comma delimited list of words and phraseswords and phrases”>”>
<meta name="description" <meta name="description" content=“content=“comma delimited list of comma delimited list of words and phraseswords and phrases”>”>
Formatting TextFormatting Text
Bold, Italics, Underline, Bold, Italics, Underline, etc.<b><i><u>etc.<b><i><u>
Paragraphs: <p><h1><h2><h3>…Paragraphs: <p><h1><h2><h3>… Fonts & ColorsFonts & Colors Alignment, returns, text size, etc. Alignment, returns, text size, etc.
Hyperlinks and ImagesHyperlinks and Images
HyperlinkHyperlink
<a href=“<a href=“urlurl”>”>TextText</a></a> ImageImage
<img src=“<img src=“filefile">"> Linked ImageLinked Image
<a href=“url"><img src=“<a href=“url"><img src=“filefile" ></a>" ></a>
ListsLists
Numbered <ol>Numbered <ol> Type A,a,1,iType A,a,1,i
Directory <dir>Directory <dir> Bulleted <ul>Bulleted <ul> Menu <menu>Menu <menu> Defined Terms <dl>Defined Terms <dl> Nested ListsNested Lists
TablesTables
<table><table> <tr><tr> <td><td> <th><th>
Forms & Form ElementsForms & Form Elements
TextText Text AreaText Area Option ButtonsOption Buttons ListsLists Check BoxesCheck Boxes Drop DownsDrop Downs ButtonsButtons PasswordPassword
Form ProcessingForm Processing
All Data is CharacterAll Data is Character Method: Post vs. GetMethod: Post vs. Get Action = “Action = “urlurl””
Page w/ script, CGI, DLL, etc. Page w/ script, CGI, DLL, etc. mailto:[email protected]:[email protected]
Encoding Type (enctype)Encoding Type (enctype) multipart/form-data (use w/ fileupload)multipart/form-data (use w/ fileupload) application/x-www-form-urlencodedapplication/x-www-form-urlencoded text/plain (default)text/plain (default)
CSSCSS
Cascading Style SheetsCascading Style Sheets Commands used to format text, objects & Commands used to format text, objects &
layoutlayout Saves time, improves maintainability, Saves time, improves maintainability,
promotes standardizationpromotes standardization Cascading Cascading
Same page within tagSame page within tag Same page within <HEAD>Same page within <HEAD> ExternalExternal
We are only going to scratch the surface of We are only going to scratch the surface of what can be done with CSS herewhat can be done with CSS here
CSSCSS
Format:Format: Style { attribute: value; attribute: value}Style { attribute: value; attribute: value} Style { Style {
attribute: value; attribute: value;
attribute: value; attribute: value;
}}
External Link: <link rel="stylesheet" External Link: <link rel="stylesheet" type="text/css" href="sample.css">type="text/css" href="sample.css">
Interacting with VFPInteracting with VFP
The BasicsThe Basics Standard ObjectsStandard Objects Generating HTMLGenerating HTML Rendering Forms & Data BindingRendering Forms & Data Binding Processing Form InputProcessing Form Input mmm Cookies!mmm Cookies!
The BasicsThe Basics
Web Connection & AFP are ISAPI Web Connection & AFP are ISAPI ExtensionsExtensions
WC & AFP files use <% and %> as script WC & AFP files use <% and %> as script delimitersdelimiters
VFP Code can fall anywhere within a web VFP Code can fall anywhere within a web page between delimiterspage between delimiters
Classic ASP is very similar except code is Classic ASP is very similar except code is VBScript/Jscript that gets to VFP via COM. VBScript/Jscript that gets to VFP via COM.
ASP.NET, PHP and other server platforms ASP.NET, PHP and other server platforms with COM support can also talk to VFPwith COM support can also talk to VFP
VFP HostsVFP Hosts
TekQuest.comTekQuest.com Shelbynet.netShelbynet.net DNGSolutions.comDNGSolutions.com
Basic Sample PagesBasic Sample Pages
Hello World…Hello World… Server InfoServer Info
Standard ObjectsStandard Objects
Request – inputRequest – input QueryStringQueryString FormForm ServerVariablesServerVariables
Response – outputResponse – output WriteWrite RedirectRedirect CookiesCookies StatusStatus
Server – duhServer – duh UrlEncodeUrlEncode UrlDecodeUrlDecode HtmlEncodeHtmlEncode
More Advance PagesMore Advance Pages
ListsLists PlainPlain HTML TablesHTML Tables PaginatedPaginated
FormsForms Get & Post ExamplesGet & Post Examples PasswordsPasswords Data BoundData Bound
SummarySummary
Web Development is much easier Web Development is much easier than it seemsthan it seems
Intelligent use of CSS w/ HTML makes Intelligent use of CSS w/ HTML makes for more maintainable sitesfor more maintainable sites
See F1Tech.Com, west-wind.com, See F1Tech.Com, west-wind.com, FoxWeb.Com for more resources on FoxWeb.Com for more resources on VFP productsVFP products
See W3.org for web resourcesSee W3.org for web resources
Thank you!Thank you!
Remember to fill out your sessionRemember to fill out your session
evaluation. evaluation.
