2 Webpage Markup with HTML HTML5 Page Structure Creating a Webpage HTML5 Elements and Entities

Size: px

Start display at page:

Download "2 Webpage Markup with HTML HTML5 Page Structure Creating a Webpage HTML5 Elements and Entities"

Rodger Cook
5 years ago
Views:

1 Contents Preface Introduction xix xxiii 1 The Web: An Overview Web Is Part of the Internet IP Addresses and Domain Names Domain Name System Web Clients and Servers URLs URL Encoding Handling Different Content Types HTML and HTML Webpage Styling Text Editing Web Hosting Web Servers Domain Registration Accessing Domain Registration Data DNS DNS Servers DNS Resolvers Dynamic Generation of Webpages Active Server Pages Database Access Client-Side Scripting Document Object Model Hypertext Transfer Protocol Web Development Web Development Principles Web Development Process For More Information Summary Exercises v

2 vi 2 Webpage Markup with HTML HTML5 Page Structure Creating a Webpage HTML5 Elements and Entities Evolution of HTML HTML5 Features and Advantages Webpage Syntax HTML5 Core Attributes Webpage Architecture Headings and Paragraphs Quotations White Space and Line Wrapping Preformatted Text Phrasing Elements Formatted Time Webpage Presentation Styles Foreground and Background Colors Text Alignment Style Length Units Colors Text Fonts Itemized Lists List Styles Links in Webpages Internal and External Links Site Organization and Navigation Linking to Services Display Style for Links Navbars Pictures and Images in Webpages Clickable Image Links Text around Images Image Alignment inside a Line Figures Image Encoding Formats GIF, JPEG, and PNG Aliasing and Anti-Aliasing Colors in Raster Images Dithering Image Maps Webpage Layout Debugging and Validation Summary Exercises

3 3 Audio, Video, and More HTML Audio for the Web Digital Audio Audio Encoding Formats The audio Element Playing Video Video Containers Video Codecs The video Element Embedding Media Embedding Flash Embedding PDF Embedding Java Applet Tables Table Basics Content Alignment in a Table Cell Displaying Tables Positioning Tables Table Layout Row and Column Spans Rules between Cells Grouping Rows and Columns Using Tables for Page Layout Pagewide Style with body HTML5 Entities Webpage Character Encoding Numeric and Named Character References Metadata and Head Elements Search Engine Ready Pages Prefetching Pages and Resources Forwarding Pages Portable Pages Website Icons Subordinate Webpages with iframe Link Targets Controlling Iframes Website File Organization Internationalization Summary Exercises Styling with CSS CSS Basics Style Sheets Attaching a Style Sheet vii

4 viii A Brief History of CSS Whole-Page Styling Centering and Indenting Centered Page Layout Multicolumn Layout CSS Selectors Link Styles Conflicting Rules Style Properties Webpage Layout with CSS Float Layout Table Layout A Vertical Navbar Page Formatting Model Margin, Border, and Padding Border Styles Elastic Banner Border Radius Replaced Elements Preformatted Content Controlling Content Overflow Styled Buttons Drop Shadows Box Shadows Text Shadows Borders by Custom Images Background Colors and Images Color Gradient Linear Gradients Radial Gradients Browser Support for CSS At-Rules Explicit Element Positioning Fixed Positioning, Stack Levels, and Visibility CSS-Generated Content Translucent Callout via CSS Understanding the Cascade CSS Validation Additional Style Features For More Information Summary Exercises Forms, PHP, and Form Processing A Simple Form

5 5.2 Basic Input Elements Text Input Input in Standard Formats User Choices and Selections Radio Buttons Checkboxes Pull-Down Menus Form Submission File Uploading Other input Elements Layout and Styling of Forms Tabular Form Layout CSS for Form Presentation Forms and HTTP HTTP Message Format The Query Line The Response Line The POST Query Formdata Encoding Data Posting via GET Queries GET versus POST Formdata Security and HTTPS Form Processing Overview PHP Scripting Overview An Introduction to PHP PHP Variables PHP Conditionals Strings in PHP Arrays in PHP Getting Started with Form Processing Form Processing Example: Club Membership Sending from PHP Loops in PHP Multistep Forms HTTP Request Data Exposed Processing File Upload Uploading Multiple Files Summary Exercises Dynamic User Interface with JavaScript About JavaScript Getting Started with JavaScript Placing JavaScript in Webpages Image Rollovers ix

6 x 6.5 Image Preloading Presenting a Slide Show JavaScript Arrays The foreach Loop A Conversion Calculator Audio/Video Control Pull-Down Menus CSS Transitions Menu Fade-In and Fade-Out Animated Pull-Down Menu Triggering CSS Transitions Sliding Menus for a Left Navbar Using Windows Dialog Windows Opening New Windows JavaScript Language Basics JavaScript Operators Built-In Functions JavaScript Strings Defining Functions Loops Matching Patterns Patterns Patterns in Input Fields JavaScript Form Checking Smooth Scrolling Text Animation with CSS Transform with CSS Events and Event Objects Playlists Using Event Objects Adding and Removing Event Listeners Testing and Debugging For More Information Summary Exercises HTML5 DOM and APIs What Is DOM? Browser Support of DOM HTML5 DOM API Overview DOM Tree Nodes Putting DOM to Work Node API Node Fields

7 7.5.2 Node Methods DOM Tree Depth-First Traversal DOM HTMLElement Interface HTMLElement Fields and Methods Document and HTMLDocument Interfaces Fields of document Methods of document Generating New Content A Session-Recording Calculator A Smart Form Client-Side Data Sorting Sortable Data Organization Data Sorting JavaScript Quicksort A Better User Interface for File/Image Upload TicTacToe with Drag-and-Drop DnD Life Cycle DnD Data Transfer DnD in TicTacToe Draggable Source Dropzone Tower of Hanoi DnD Local Files Canvas Element and API A First canvas Example Drawing Shapes Color Gradients and Transforms Canvas Animation Drawing Images and Text For More Information Summary Exercises Server-Side Programming with PHP Page Templates PHP Functions Form Generation and Processing Form Control Page Form Generation Form Processing File I/O in PHP Listing Files in Directories PHP Error Reporting and Debugging Login with Basic Authentication HTTP Basic Authentication xi

8 xii Basic Authentication via PHP Basic Authentication Logout Session Control What Is a Session? Session Control Techniques PHP Session Support Crazy Pizza Shop Security Code Verification Login Sessions Login Session with PHP A Login-Protected Page Logout User Registration User Profiles Session Timeout Image Manipulation Security Images Watermarking Photographs Providing Content Management AMP: Admin Modifiable Page Making an AMP HTML5 contenteditable API Editable Style Updating the AMP Editing Images Edit-Control Buttons Content Management Summary PHP Classes and Objects A Navbar Class A PageFront Class System Calls and Script Security System Calls in PHP PHP Script Security For More Information Summary Exercises Database-Driven Websites What Is a Database? Relational Databases SQL: Structured Query Language SQL Queries MySQL Expressions More on SELECT Queries Aggregating Attribute Values

9 xiii Selecting from Multiple Tables Creating Tables CREATE TABLE Queries MySQL Data Types Data Modifiers PHP Database Access Connecting to a Database Queries and Resultsets User Authentication Using Database Adding a New User Authenticating a User Changing Passwords INSERT and DELETE Queries Database Supporting Product Orders Linking Related Tables Displaying Orders in HTML Managing Orders The FOREIGN KEY Constraint Displaying Shopping Carts Handling Query Results and Errors Paginated Display of Larger Result Sets Receiving Payments HTTP Requests from PHP Prepared Statements Guarding against SQL Injection The phpmyadmin Tool PHP Built-In Database System For More Information Summary Exercises Web Hosting: Apache, PHP, and MySQL What Is a Web Server? URL and URI Request Processing Response and Content Types Apache Web Server Accessing Linux Server Host Understanding the Linux Shell Entering Commands Current Working Directory and Filenames Handling Files and Directories Linux Files Access Control Super User Examining the Permission Settings

10 xiv Setting Permissions File Access Permissions for the Web Running Apache on Linux Controlling the Apache Server Apache Run-Time Configuration Apache Configuration File Basics About Configuration Directives Loading Modules Global Directives Container Directives Apache Web Access Control What Is Web Access Control? Access Control by Host Requiring Passwords Setting Up User Login under Apache How HTTP Basic Authentication Works How HTTP Digest Authentication Works Basic versus Digest Authentication Password Encryption Automatic File Deflation URI to Document Space Mapping Virtual Hosting Installing Apache with Package Management Sudo Manual Installation of Apache Configure and Compile SSL/TLS PHP Module for Apache Installing the PHP Module Testing PHP PHP Configuration Changing PHP Configurations HTTP Caching MySQL Initializing, Starting, and Stopping MySQL MySQL Run-Time Configuration Administering MySQL Resetting the MySQL Root Password Installing phpmyadmin Installing MySQL Linux Package Management YUM and RPM APT For More Information Summary

11 Exercises XML, AJAX, and Web Services What Is XML? XML Document Format News Syndication Formats XML Document Syntax Rules Validity of an XML Document Browser Display of XML Documents Transforming XML Documents with XSL A First XSL Transform XSL Transforms XSL Templates Named Templates and Template Calls Sorting in XSL XML Processing in PHP Making XSL Transforms in PHP XPath AJAX Auto Completion with AJAX Soup of the Day AJAX GET and POST Requests Web Services Example Web Services Accessing Web Services from PHP Address Verification Web Service AJAX: Form Address Verification AJAX File Upload XML Namespaces For More Information Summary Exercises SVG and MathML Including SVG and MathML in HTML SVG Shape Elements Including Raster Images The path Element The text Element Curved Arcs SVG Markers, Patterns, and Transforms Coordinate Transformation Matrix SVG Animation Clipping xv

12 xvi 12.5 SVG User Interaction and Scripting SVG DOM Manipulations Knocking Balls Simulation SVG versus HTML5 Canvas MathML Presentation versus Content MathML Infix to MathML Conversion MathML for Mathematics Education Combining SVG with MathML For More Information Summary Exercises HTML5 and Mobile Websites Mobile Web Browsing Mobile Website Strategies Mobile Layout and Navigation CSS Media Queries Mobile Webpages A Pane Layout The Viewport Automatic Redirection to Mobile Site URL Redirection Browser/Device Detection Touch Swipe Slide Show Touch Events Momentum Scroll Taking Advantage of the Smartphone Camera API Geolocation API The Touch Icon Conversion to Mobile Webapps Offline Caching Local Storage Mobile Site Testing and Debugging For More Information Summary Exercises Appendices Online 607 Secure Communication with SSH and SFTP Introduction to vim Text Editing with vi Vi Quick Reference

13 xvii The emacs Editor A Linux Primer Website and Online Examples 609 Bibliography 611 Index 613

Full Stack Web Developer

Full Stack Web Developer S.NO Technologies 1 HTML5 &CSS3 2 JavaScript, Object Oriented JavaScript& jquery 3 PHP&MYSQL Objective: Understand the importance of the web as a medium of communication. Understand