Web 101
-
Upload
mike-feltman -
Category
Documents
-
view
368 -
download
7
description
Transcript of Web 101
![Page 1: Web 101](https://reader035.fdocuments.us/reader035/viewer/2022062701/55421f975503463a298b45df/html5/thumbnails/1.jpg)
Web 101 for VFP Web 101 for VFP DevelopersDevelopers
Mike FeltmanMike Feltman
![Page 2: Web 101](https://reader035.fdocuments.us/reader035/viewer/2022062701/55421f975503463a298b45df/html5/thumbnails/2.jpg)
About meAbout me
President F1 TechnologiesPresident F1 Technologies Toledo, OH USAToledo, OH USA
![Page 3: Web 101](https://reader035.fdocuments.us/reader035/viewer/2022062701/55421f975503463a298b45df/html5/thumbnails/3.jpg)
AgendaAgenda
Getting StartedGetting Started HTMLHTML CSSCSS Interacting with VFPInteracting with VFP Bonus?Bonus?
![Page 4: Web 101](https://reader035.fdocuments.us/reader035/viewer/2022062701/55421f975503463a298b45df/html5/thumbnails/4.jpg)
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
![Page 5: Web 101](https://reader035.fdocuments.us/reader035/viewer/2022062701/55421f975503463a298b45df/html5/thumbnails/5.jpg)
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
![Page 6: Web 101](https://reader035.fdocuments.us/reader035/viewer/2022062701/55421f975503463a298b45df/html5/thumbnails/6.jpg)
Elements of a Web SiteElements of a Web Site
HTML PagesHTML Pages GraphicsGraphics Cascading Style SheetsCascading Style Sheets Script/CodeScript/Code DataData
![Page 7: Web 101](https://reader035.fdocuments.us/reader035/viewer/2022062701/55421f975503463a298b45df/html5/thumbnails/7.jpg)
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”> >
![Page 8: Web 101](https://reader035.fdocuments.us/reader035/viewer/2022062701/55421f975503463a298b45df/html5/thumbnails/8.jpg)
Foundation TagsFoundation Tags
<html><html> <head><head> <title><title> <body><body>
![Page 9: Web 101](https://reader035.fdocuments.us/reader035/viewer/2022062701/55421f975503463a298b45df/html5/thumbnails/9.jpg)
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”>”>
![Page 10: Web 101](https://reader035.fdocuments.us/reader035/viewer/2022062701/55421f975503463a298b45df/html5/thumbnails/10.jpg)
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.
![Page 11: Web 101](https://reader035.fdocuments.us/reader035/viewer/2022062701/55421f975503463a298b45df/html5/thumbnails/11.jpg)
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>
![Page 12: Web 101](https://reader035.fdocuments.us/reader035/viewer/2022062701/55421f975503463a298b45df/html5/thumbnails/12.jpg)
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
![Page 13: Web 101](https://reader035.fdocuments.us/reader035/viewer/2022062701/55421f975503463a298b45df/html5/thumbnails/13.jpg)
TablesTables
<table><table> <tr><tr> <td><td> <th><th>
![Page 14: Web 101](https://reader035.fdocuments.us/reader035/viewer/2022062701/55421f975503463a298b45df/html5/thumbnails/14.jpg)
Forms & Form ElementsForms & Form Elements
TextText Text AreaText Area Option ButtonsOption Buttons ListsLists Check BoxesCheck Boxes Drop DownsDrop Downs ButtonsButtons PasswordPassword
![Page 15: Web 101](https://reader035.fdocuments.us/reader035/viewer/2022062701/55421f975503463a298b45df/html5/thumbnails/15.jpg)
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)
![Page 16: Web 101](https://reader035.fdocuments.us/reader035/viewer/2022062701/55421f975503463a298b45df/html5/thumbnails/16.jpg)
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
![Page 17: Web 101](https://reader035.fdocuments.us/reader035/viewer/2022062701/55421f975503463a298b45df/html5/thumbnails/17.jpg)
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">
![Page 18: Web 101](https://reader035.fdocuments.us/reader035/viewer/2022062701/55421f975503463a298b45df/html5/thumbnails/18.jpg)
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!
![Page 19: Web 101](https://reader035.fdocuments.us/reader035/viewer/2022062701/55421f975503463a298b45df/html5/thumbnails/19.jpg)
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
![Page 20: Web 101](https://reader035.fdocuments.us/reader035/viewer/2022062701/55421f975503463a298b45df/html5/thumbnails/20.jpg)
VFP HostsVFP Hosts
TekQuest.comTekQuest.com Shelbynet.netShelbynet.net DNGSolutions.comDNGSolutions.com
![Page 21: Web 101](https://reader035.fdocuments.us/reader035/viewer/2022062701/55421f975503463a298b45df/html5/thumbnails/21.jpg)
Basic Sample PagesBasic Sample Pages
Hello World…Hello World… Server InfoServer Info
![Page 22: Web 101](https://reader035.fdocuments.us/reader035/viewer/2022062701/55421f975503463a298b45df/html5/thumbnails/22.jpg)
Standard ObjectsStandard Objects
Request – inputRequest – input QueryStringQueryString FormForm ServerVariablesServerVariables
Response – outputResponse – output WriteWrite RedirectRedirect CookiesCookies StatusStatus
Server – duhServer – duh UrlEncodeUrlEncode UrlDecodeUrlDecode HtmlEncodeHtmlEncode
![Page 23: Web 101](https://reader035.fdocuments.us/reader035/viewer/2022062701/55421f975503463a298b45df/html5/thumbnails/23.jpg)
More Advance PagesMore Advance Pages
ListsLists PlainPlain HTML TablesHTML Tables PaginatedPaginated
FormsForms Get & Post ExamplesGet & Post Examples PasswordsPasswords Data BoundData Bound
![Page 24: Web 101](https://reader035.fdocuments.us/reader035/viewer/2022062701/55421f975503463a298b45df/html5/thumbnails/24.jpg)
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
![Page 25: Web 101](https://reader035.fdocuments.us/reader035/viewer/2022062701/55421f975503463a298b45df/html5/thumbnails/25.jpg)
Thank you!Thank you!
Remember to fill out your sessionRemember to fill out your session
evaluation. evaluation.