Chapter 6: Web Technology I

Introduction to Web Development

Webpage and Website


  • 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.



  • 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.


  • 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.


  • 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.


  • 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)


  • 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:

  1. Create web pages for websites.
  2. Essential markup language for web pages.
  3. Allows adding graphical elements like videos, images, rich text.
  4. Facilitates customization with HTML5 and newer versions.
  5. Learn coding tools: code editor and browser developer tools.
  6. 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)


  • 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 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.



  • 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

Domain  Name System 

  • Website address on the internet.
  • Users access websites through domain names.
  • Identifies computers using IP addresses.
  • Easier to remember than numerical IP addresses.
  • Limited to 63-character maximum, 1-character minimum.
  • Follows protocol in the URL.
  • Combination of letters and numbers with extensions like .com.
  • Requires registration before use.
  • Unique for each website.
  • Ensures visitors reach the intended website.


Web hosting

  • Web hosting involves posting websites on servers provided by hosting companies.
  • Websites can be accessed on the Internet by entering their domain in a browser.
  • Hosting requires owning a domain, which can be acquired through the hosting company.
  • Choose a web hosting service with good technical support and minimal downtime.
  • Monthly fees depend on site size and bandwidth usage.
  • Estimate site size and expected traffic before selecting a hosting plan.

Types of web hosting

  • Shared Web Hosting
  • Reseller Hosting:
  • Dedicated Hosting
  • Managed Hosting


Cascading Style Sheet

Introduction to Cascading Style Sheet (CSS)
  • Stands for “Cascading Style Sheet.”
  • Used to format web page layout.
  • Defines text styles, table sizes, and more.
  • Creates uniform look across multiple web pages.
  • Styles defined once in a CSS document.
  • Easily change styles across pages by modifying the CSS.
  • Formats text, table cells, borders, images, and layout.
  • Provides precise control over web page appearance.
  • Often used in combination with HTML for modern web design.
 Inline CSS
  • Style defined using “style” attribute.
  • Applied directly to HTML elements or tags.
Embedded CSS (Internal Style)
  • Defined using <style> tag in the <head>.
  • Applies styles to the HTML file only.
  • Not visible outside the HTML file.
 External CSS
  • Uses separate .css files for styling.
  • Ideal for managing many HTML attributes.
  • Eliminates need to rewrite CSS in every HTML.
  • Created by writing code in Notepad and saving as .css or directly in Visual Studio.


Some More on CSS

Class Style

  • More flexible method
  • A dot (.) operator is used
  • Implemented on two way: element specific style and universal style



  • Universal style starts with a dot (.) operator.
  • Used any tag like: heading, paragraph, font, etc



  • Inline container used to highlight or mark a line of a text.
  • Using test related attributes within any tags such as font, paragraph, etc