Chapter 6: Web Technology I

Introduction to Web Development

Webpage and Website

Webpages:

Digital document on the World Wide Web.
Written in languages like HTML, CSS, JavaScript.
Contains text, images, videos, links, and more.
Delivers information, media, and functionality.
Retrieved from a web server using a URL.
Accessed through browsers via URLs.
Contains text, graphics, and hyperlinks.
Can be static (unchanging) or dynamic (changing content).
Dynamic pages use scripting languages like PHP, Perl, ASP, JSP.
Scripts on server generate content like date, time, and database info.
Content returned as HTML code.
Browsers translate HTML for display.

Websites:

Collections of interconnected web pages.
Hosted on a single domain or web address.
Accessed through web browsers.
Provide information, resources, and services.
Created using HTML, CSS, JavaScript.
Can include multimedia elements.
Accessed via URLs in web browsers.
Collection of interconnected web pages.
Grouped together and linked.
Referred to as “web site” or “site.”
Created by individuals, groups, businesses, or organizations.
Serve various purposes and functions.
Accessed through web browsers.
Enter URL in browser’s address bar to visit a site.
Search engines help find websites.

Web Browsers and Search Engines

Software for locating, retrieving, and displaying web content.
Enables access to web pages, images, videos, and files on the World Wide Web.
Allows users to enter website addresses and browse the internet.
Essential for accessing websites and online content.
Early browsers like Mosaic and Netscape Navigator rendered HTML and supported bookmarks.
Modern browsers handle HTML, JavaScript, AJAX, multimedia, and more.
Many browsers offer extensions and plugins for added functionality.
Examples include Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, Internet Explorer.

Web Development Process

Planning and Requirement Analysis:

- - Define the purpose, goals, and target audience of the website.
  - Gather requirements, features, and functionalities.

Design:
- - Create wireframes or mockups outlining the layout and structure.

- - Design the user interface (UI), including colors, typography, and visual elements.

Development:

- - Write HTML, CSS, and sometimes JavaScript code to create the user interface.
  - Ensure responsiveness for various devices and screen sizes.
  - Develop the server-side logic and databases.
  - Implement functionality, data processing, and interactions.

Integration:

- - Combine the front-end and back-end components.
  - Test for compatibility and data flow between both ends.

Testing Deployment:

- - Perform comprehensive testing, including functionality, usability, performance, and security.
  - Identify and fix bugs and issues.
  - Upload the website to a web server or hosting platform.
  - Configure domain, server settings, and databases.

Launch:

- - Make the website live and accessible to the public.
  - Monitor for any issues that might arise after launch.

Overview of Various Internet & Web Technologies

Overview of Internet

Global network of interconnected computers.
Allows communication and sharing of information worldwide.
Built on a decentralized architecture.
Uses standardized protocols like TCP/IP.
Enables access to websites, email, file sharing, and more.
Originated from ARPANET in the 1960s.
Internet Service Providers (ISPs) provide access.
Web browsers are used to access web content.
Facilitates online communication, commerce, and collaboration.
Continuously evolving with new technologies and services.

Uses of Internet

Communication
Information Access
Education
Entertainment
E-Commerce
Research
Work and Business
Social Networking
Banking and Finance
Healthcare

Misuses of Internet

Copyright Infringement
Cyber Crime
Hate Speech
Spread of Misinformation

Web Technology

Refers to technology operating on the World Wide Web.
Enables businesses to enhance tasks and databases with mobility.
Accessible from any location through the Internet.
Also known as SaaS (Software as a Service).
Paid based on usage, no software installation required.
Accessible via simple signup and browser URL.
Example: Configuring devices through a web-based console.
Includes mark-up languages (HTML, CSS, XML), CGI, JavaScript, and HTTP.
Encompasses programming languages, web servers, databases, and business applications.

Protocol

Set of rules for data transmission.
Governs communication between devices/systems.
Defines format, order, and timing of messages.
Enables effective and standardized interaction.
Essential for networks, telecommunications, software applications.

URL

Uniform Resource Locator (URL).
Used to locate resources on the internet.
Includes protocol, domain/IP, and path to the resource.
Standardized way to access web content and files.

Domain Name System

Hierarchical system.
Translates domain names to IP addresses.
Enables user-friendly web addressing.
Facilitates internet resource access.

Email

Digital messages sent over the internet.
Include text, images, attachments, links.
Use protocols like SMTP, POP3/IMAP.
Sent, received, and organized via email clients or webmail services.
Types of Email: Email Client, Webmail.

Content Management System (CMS)

Introduction

Stands for Content Management System.
Manages content using a database.
Used for website development.
Updates content and structure.
Often open-source and free.
May offer paid options like templates and plugins.
Example: WordPress, Wix, Web flow, Tumblr, etc
Content Management Application (CMA), Content Delivery Application (CDA) are two parts of CMS.

Feature of CMS:

User Management: Manage user roles and information.
Theme System: Modify site appearance and functionality.
Extending Plugins: Add custom features using plugins.
Search Engine Optimization (SEO): Built-in SEO tools.
Media Management: Organized and upload media files.
Multilingual: Supports content translation.

HTML the Language of the Web

Scripting language for creating hypertext documents on the web.
Invented by Tim Berners-Lee around 1990.
Based on SGML (Standard Generalized Markup Language).
Later evolved into XHTML (Extensible Markup Language) by W3C.
Uses tags to define structure and presentation of content.
Platform-independent, works on various operating systems.
Browsers interpret HTML tags to display content.
Provides tags for graphics, fonts, colors, and hyperlinks.
Versions include HTML 1.0 (1990), HTML 2.0 (1995), HTML 4.0 (1998), XHTML (2000), HTML 4 (2014).

Objectives of HTML:

Create web pages for websites.
Essential markup language for web pages.
Allows adding graphical elements like videos, images, rich text.
Facilitates customization with HTML5 and newer versions.
Learn coding tools: code editor and browser developer tools.
Create hypertext links to various online resources.

Structure of HTML:

Divided into two parts: the head and the body.
Start with the declaration: ‘<!DOCTYPE html>’.
Four primary container tags: ‘<html>’, ‘<head>’, ‘<title>’, and ‘<body>’.
Tags must appear as pairs with both opening and closing tags.

Published and Hosting (Web Publishing and Web Hosting)

Web Publishing:

Process of sharing content on the internet.
Involves creating websites, updating pages, and posting blogs.
Content includes text, images, videos, and more.
Requires web development software, internet connection, and web server.
Software can be professional tools or web-based interfaces.
Internet connection is needed for uploading content to servers.

Web hosting:

Web hosting can be dedicated or shared.
Web publishing is cost-effective, as it doesn’t require physical materials.
Offers a global audience accessible through an internet connection.
Service for posting websites on the internet.
Web host provides technologies for website viewing.
Websites are stored on servers.
Users access websites by typing the domain in their browser.
Domain ownership often required for hosting.
Choose a reliable web host with good support and minimal downtime.
Pay a monthly fee based on disk space and bandwidth needs.
Estimate site size and traffic before signing up for hosting.

HTML Tags vs. Attributes

Definition of a tag: Group of characters surrounded by ‘<‘ and ‘>’.
Tag sections: Name, attributes, attribute value.
Tag name: Unique identifier.
Attributes: Tag properties, diverse attribute values.
Example: <body> tag, bgcolor attribute with value green.
Two tag types: Single tag, Pair tag.

Basic Tags of HTML

<html> tag
- Marks the start and end of an HTML document.

<head> tag
- Contains document title and general information (author, copyright, keywords, description).

<body > tag

- Defines webpage content displayed in the browser.
- Allows use of various HTML tags.
- Common attributes of <body> tags are:

- Color code format: “#rrggbb”.
- rr for red, gg for green, bb for blue.
- Values range from 00 to ff in hexadecimal

<meta> tag

- ‘<meta>’ tag provides metadata about the HTML document.
- Includes information like character encoding, author, viewport settings, etc.
- Often placed within the ‘<head>’ section of the document.

Heading Tag (H1 to H6) and Attributes (ALIGN)

Heading Tags

Six levels: ‘<h1>’ to ‘<h6>’.
Importance increases from ‘<h1>’ to ‘<h6>’.
Default display: larger and bolder font.
‘<h1>’ is most important, ‘<h6>’ is least important.
Font size decreases from ‘<h1>’ to ‘<h6>’.

Font Tag and Attributes (Sizes: 1 to 7 Levels, BASEFONT, SMALL, BIG, COLOR)

<font> Tag

Sets font properties: color, face, size.
Default font size is 3.
Default color is red.
Default font face is Times New Roman.

<basefont> Tag

Default font size is three.
Modify default size with <basefont> tag.
Use “size” attribute to specify font size.
No closing tag for <basefont>.

Paragraph Formatting (P)

<p> Tag

Marks a block of text as a paragraph.
Adds space between paragraphs in a webpage.

Break Line BR

<br> Tag and <hr> Tag

‘<br>’ tag: Empty element to break a line without space.
‘<hr>’ tag: Insert horizontal rule to visually separate content.
‘<hr>’ is a single tag.

Comment in HTML (<! >)

Comment Tag and Space Character

Start with ‘<!’ and end with ‘>’.
Can span multiple lines.
Can be placed anywhere in the document.
Contents not displayed in browsers.

Formatting Text (B, I, U, Mark, Sup, Sub, EM, BLOCKQUOTE, PREFORMATTED)

General Text Formatting

Utilize tags like bold, italic, underline, font, paragraph, heading, etc.
Basic formatting elements for text.
<br> tag creates line breaks.

<marquee> Tag and <pre>

<marquee> tag:
- Creates simple text animations.
- Attributes include direction, behavior, width, bgcolor, scrollamount.
<pre> tag:
- Maintains formatting from text editor.
- Displays HTML code as it’s written.

Special Characters

Ordered List- OL (LI, Type- 1, I, A, a; START, VALUE)

List

Uses numbers for list items.
Defined by <ol> and </ol> pair tags.
Attributes and values can be specified.
Attributes include “type” and “start”.

Unordered List – UL (Bullet Type- Disc, Circle, Square, DL, DT, DD)

Uses bullets for list items.
Supported bullet types: disc, circle, square.
Defined by ‘<ul>’ and ‘</ul>’ pair tags.

Definition List

Represents term and description pairs.
Starts and ends with ‘<dl>’ and ‘</dl>’.
Terms enclosed with ‘<dt>’.
Descriptions enclosed with ‘<dd>’.
Can also be used to create dialogues.

ADDRESS Tag

‘<address>’ tag in HTML shows contact info of a person/organization.
In ‘<body>’, it’s document contact info; in ‘<article>’, it’s article contact info.
Text inside ‘<address>’ appears in italic.
Browsers may add line breaks before and after the ‘<address>’ element.

Inserting Image:

‘<img>’ tag inserts images in web pages.
It’s a pair tag.
Browsers display limited image types: GIF, JPG, and some support PNG.
GIF and JPG are widely supported; modern browsers handle PNG.
JPG is ideal for high quality, compression, and color variety.
JPG format offers attributes and values for customization.

Inserting Object:

Objects are external files like pictures, audio, video, etc.
Plug-ins enhance browser functionality (Java, Flash, etc.).
<embed> tag for external applications; <object> tag for embedded objects.
Use <img> for pictures, <video> and <audio> for multimedia.
For embedding webpages, use <iframe> tag.

Anchor Tag and Hyperlink

Creating Hyperlink

Created using <a> tag in HTML.
Defined by the “href” attribute.
Links between files, webpages, images, emails, etc.
Enables navigation between different web content.
Open the linked page in the current browser window.
“target” attribute with “_blank” value opens in a new window.

Links to place in other HTML documents

Create the link to the target file.
Downloaded when the user clicked using attribute download.
Changed the hyperlink color by using <body> tag
Unvisited hyperlink text appears as blue color, visited hyperlink as purple color.

Image Map

<map> tag creates clickable areas on images.
“name” attribute specifies the image map’s name.
“usemap” attribute in <img> links to the <map> tag.
<area> tag defines clickable regions on the image.
“shape” attribute determines the shape of the clickable area.
“coords” attribute specifies the coordinates of the shape.

Table: Creating Table using TH, TR and TD tags

Creating Table

<table> tag defines a collection of rows and columns.
<tr> tag defines a table row.
<td> tag defines table data within a row.
<th> tag defines table headers within a row.
Optional <caption> tag for table captions.

Form: Creating form using Textbox, Radio, Checkbox, Text Area, Button

Creating Form

Form allows users to enter data on webpages.
Data is sent to the server for processing or storage.
Various form elements based on input types.
Elements have different attributes.
Form defined by <form> tag.
Form elements include <input>, <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, and <label> tags.

<label>Tag

Specifies a label for form elements like <input>, <select>, etc.
Recommended in HTML5 for better coding practice.
Has attributes: “for” and “form”.
“for” attribute links to the element’s “id”.
Ensures alignment between <label> and <input> tags.

Creating Frameset

Divides a window into sections.
Embeds multiple webpages as frames.
<FRAMESET> tag defines frames with “cols” and “rows”.
“cols” and “rows” define column and row proportions.
<frame> tag inserts webpages into frames.
“src” attribute specifies source file or URL.
No <BODY> in the file containing <FRAMESET>.

Introduction to HTML5 Elements including Audio, Embed, Source, Track and Video Attributes

Introduction to HTML5

Fifth and newest version of HTML standard.
Introduces rich media support and improved web application interaction.
Features new multimedia tags ‘<audio>’ and ‘<video>’.
Includes vector graphics and new semantic elements.
Supports Drag and Drop functionality.
Offers geo-location services.
Provides web storage for offline data.
Utilizes SQL database for offline data storage.
Allows drawing various shapes.
Handles incorrect syntax effectively.
Simple DOCTYPE declaration: ‘<!doctype html>’.
Easy character encoding with ‘<meta charset=”UTF-8″>’.

HTML5 Graphics using canvas and svg Tags

<canvas> Tag

Used for drawing graphics on a webpage.
Provides a transparent drawing area.
Useful with JavaScript and styles.
Attributes: “id” for unique name, “height” for canvas height in pixels, “width” for canvas width in pixels.

<svg> Tag

Uses XML format.
Defines vector graphics like circles, rectangles, polygons.
Container for elements like <circle>, <rect>, <polygon>, etc.
Used for drawing scalable graphics on web pages.

Structure of HTML5

<main>, <section>, <article>, <header>, <footer>, <aside>, <nav>, <figure>.
Organizes web content efficiently.
Aids in content management and search optimization.

Concept of Domain Name and Web Hosting