Fundamentals of Web Building

By: Ramon Christopher MoralesFundamentals of Web Building

Todays discussion includes the following:The web programming languages usually usedHTMLCSSJavaScriptServer-side ScriptingSQL

HTML is the primary language for building/creating web pages.CSS defines HOW HTML elements are to be displayed.JavaScript isTHEscripting language of the Web.Server-side scripting is about "programming" the behavior of the server.SQL is the standard language for accessing and manipulating databases.HTML - Hyper Text Markup LanguageHTML is an easy-to-learn markup language.HTML uses markuptagsinside angle brackets, like , to define theelementsof a web page:HTML ExampleHTML uses start tags and end tags to markup web page elements: In the example above, the tag marks the start of a paragraph, and marks the end of the paragraph.

HTML ExampleWeb browsers (IE, Firefox, Chrome, etc) read HTML documents, interpret the HTML tags, and display the proper output (without displaying the HTML tags):

HTMLBy using simple HTML tags, web designers can add headers, paragraphs, text, tables, images, lists, programming code, etc, to a web page (HTML document).According to the HTML standard, HTML should be used to define the content of web pages.

CSS - Cascading Style SheetsCSS describes the visual style (appearance, layout, color, fonts) of HTML elements.CSS EXAMPLECSS was designed to separate document layout from document content (which greatly improved HTML flexibility and reduced HTML complexity).

CSS EXAMPLECSS saves a lot of work!The CSS definitions are normally stored in external files. This enables a web developer to change the appearance and layout of every page in a web site, just by editing one single file!

CSS EXAMPLEIf you have ever tried to change the style of all elements in all your HTML pages, you understand how you can save a lot of work by storing the style definitions in an external file.

JavaScript - Client-side ScriptingJavaScript is used in billions of Web pages to add functionality, validate forms, communicate with the server, and much more.JavaScript is easy to learn.What is JavaScript?JavaScript is a scripting languageA scripting language is a lightweight programming languageA JavaScript consists of lines of executable computer codeA JavaScript is usually embedded directly into HTML pagesWhat is JavaScript?JavaScript was designed to add interactivity to HTML pagesJavaScript is free. Everyone can use JavaScript without a licenseAre Java and JavaScript the same?Java and JavaScript are two completely different languages in both concept and design!Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++JavaScript was invented by Brendan Eich at Netscape (with Navigator 2.0), and has appeared in all browsers since 1996.Client-side ScriptingJavaScript is about "programming" the behavior of a browser. This is called client-side scripting (or browser scripting).

Server-side scripting is about "programming" the behavior of the serverWhat can a JavaScript Do?JavaScript gives HTML designers a programming tool -JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages

What can a JavaScript Do?JavaScript can react to events -A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element

What can a JavaScript Do?JavaScript can be used to validate data -A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing

What can a JavaScript Do?JavaScript can be used to create cookies- A JavaScript can be used to store and retrieve information on the visitor's computer

What can a JavaScript Do?JavaScript can be used to detect the visitor's browser- A JavaScript can be used to detect the visitor's browser, and load another page specifically designed for that browser

What can a JavaScript Do?JavaScript can read/write/modify HTML elements -A JavaScript can read and change the content of an HTML element

HTML, CSS, JavaScriptHTML is the primary language for building/creating web pages.CSS defines HOW HTML elements are to be displayed.JavaScript isTHEscripting language of the Web.ASP and PHP - Server-side ScriptingActive Server Pages (ASP)and Hypertext Preprocessor (PHP)An HTML file can contain HTML tags, text and scripts.Server-side scripting is about "programming" the behavior of the server. This is called server-side scripting or server scripting.Client-side scripting is about "programming" the behavior of the browser.

ASP and PHP - Server-side ScriptingNormally, when a browser requests an HTML file, the server returns the file. However, if the file contains a server-side script, the script is executed on the server before the file is returned to the browser as plain HTML.What can Server Scripts Do?Dynamically edit, change or add any content to a Web pageRespond to user queries or data submitted from HTML formsAccess any data or databases and return the result to a browserCustomize a Web page to make it more useful for individual usersWhat can Server Scripts Do?Provide security since your server code cannot be viewed from a browserBecause the scripts are executed on the server, the browser that displays the file does not need to support scripting at all!SQL - Structured Query LanguageSQL is the standard language for accessing and manipulating databases.Common database management systems are: MySQL, SQL Server, Access, Oracle, Sybase, and DB2Knowledge of SQL is invaluable for anyone who wants to store or retrieve data from a database.What is SQL?SQL stands forStructuredQueryLanguageSQL allows you to access a databaseSQL is an ANSI standard computer languageSQL can execute queries against a databaseSQL can retrieve data from a databaseSQL can insert new records in a databaseSQL can delete records from a databaseSQL can update records in a databaseSQL is easy to learnSQL Database TablesA database usually contains one or more tables. Each table is identified by a name (e.g. "Customers" or "Orders"). Tables contain records (rows) with data.SQL Database TablesThe table above (called Persons) contains three records (one for each person) and four columns (LastName, FirstName, Address, and City).

SQL QueriesWith SQL, we can query a database and have a result set returned. A query like this:

SELECT LastName FROM Persons

Gives a result set like this:

SummaryHTML is the primary language for building/creating web pages.CSS defines HOW HTML elements are to be displayed.JavaScript isTHEscripting language of the Web.Server-side scripting is about "programming" the behavior of the server.SQL is the standard language for accessing and manipulating databases.