logo
Register
Login

Chapter 6: Web Development and HTML

Computer Science - Class 11

No MCQ questions available for this chapter.

Chapters

Chapter 6: Web Development and HTML

6.1 Introduction: Web Development

Web development refers to the process of creating websites and web applications for the Internet. It encompasses a variety of tasks, including:

  • Frontend Development: Designing the user interface and user experience using HTML, CSS, and JavaScript.
  • Backend Development: Developing server-side logic, databases, and application programming interfaces (APIs) using languages like PHP, Python, Ruby, and Node.js.
  • Full-Stack Development: Combining both frontend and backend development skills to create complete web applications.

6.2 Web Browsers and Search Engines

  • Web Browsers: Software applications used to access and display web content. Popular browsers include Google Chrome, Mozilla Firefox, Microsoft Edge, and Safari. Key functions include rendering HTML, executing JavaScript, and managing cookies and sessions.

  • Search Engines: Tools that help users find information on the web. They index web pages and allow users to search for content using keywords. Popular search engines include Google, Bing, and Yahoo. Search engines use algorithms to rank web pages based on relevance and authority.

6.3 Overview of Various Internet & Web Technologies

  • HTML (Hypertext Markup Language): The standard language for creating web pages. It structures content on the web.

  • CSS (Cascading Style Sheets): A stylesheet language used to control the layout and presentation of HTML content.

  • JavaScript: A programming language that enables interactive features on web pages, such as animations and form validation.

  • Web Servers: Software that serves web pages to users. Examples include Apache and Nginx.

  • Databases: Systems for storing and managing data, commonly used in web applications (e.g., MySQL, PostgreSQL).

  • APIs (Application Programming Interfaces): Interfaces that allow different software applications to communicate with each other.

6.4 Content Management System (CMS)

A Content Management System (CMS) is a software application that enables users to create, manage, and modify content on a website without the need for specialized technical knowledge. Examples include WordPress, Joomla, and Drupal. Key features of a CMS include:

  • User-friendly interface for content creation and editing.
  • Templates for designing website layout.
  • Tools for managing user permissions and roles.
  • Plugins and extensions for added functionality.

6.4 HTML: The Language of the Web

6.4.1 Objectives

The objectives of learning HTML include:

  • Understanding the structure and semantics of web pages.
  • Learning to use HTML tags and attributes to create web content.
  • Developing skills to create accessible and user-friendly web pages.

6.4.2 Structure of HTML

An HTML document consists of several key sections:

  • DOCTYPE Declaration: Specifies the version of HTML.
  • HTML Element: The root element of an HTML page.
  • Head Section: Contains metadata about the document, such as the title and links to stylesheets.
  • Body Section: Contains the visible content of the web page.

Example structure:

html
<!DOCTYPE html>
<html>
<head>
    <title>Document Title</title>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

6.4.3 Publishing and Hosting

Publishing refers to making a website available on the Internet. This involves:

  1. Web Hosting: Renting space on a server to store website files.
  2. Domain Name Registration: Securing a web address (URL) that users will use to access the site.

6.4.4 HTML Tags vs. Attributes

  • HTML Tags: Elements that define the structure and content of a web page. They are enclosed in angle brackets (e.g., <tagname>).
  • Attributes: Additional information about HTML tags, specified within the opening tag. Attributes are defined as name-value pairs (e.g., <tagname attribute="value">).

6.4.5 Basic Tags of HTML

  • HTML: <html> - The root element.
  • HEAD: <head> - Contains meta-information about the document.
  • TITLE: <title> - Defines the document's title.
  • BODY: <body> - Contains the content of the web page.
Setting Foreground and Background Colors

  • Foreground color can be set using the style attribute:

    html
    <body style="color: blue;">

  • Background color can be set using the style attribute:

    html
    <body style="background-color: yellow;">

  • Background image:

    html
    <body style="background-image: url('image.jpg');">

  • Background sound:

    html
    <body onload="playSound();">
    <audio id="sound" src="sound.mp3" autoplay></audio>
</body>

6.4.6 Heading Tags (H1 to H6) and Attributes (ALIGN)

  • Heading Tags: Used to define headings, with <h1> as the largest and <h6> as the smallest.

  • ALIGN Attribute: Used to set the alignment of headings.

    html
    <h1 align="center">Centered Heading</h1>

6.4.7 FONT Tag and Attributes

  • FONT Tag: Used to define the font size, color, and type.
  • Size Attribute: Ranges from 1 to 7.
  • BASEFONT: Sets a default font size for the document.
  • SMALL: Makes text smaller.
  • BIG: Makes text larger.
  • COLOR: Sets the text color.

Example:

html
<font size="4" color="red">This is red text.</font>

6.4.8 Paragraph Formatting (P)

  • The <p> tag defines a paragraph. It automatically adds space before and after the paragraph.

Example:

html
<p>This is a paragraph.</p>

6.4.9 Break Line (BR)

  • The <br> tag inserts a line break in the text without creating a new paragraph.

Example:

html
<p>Line 1<br>Line 2</p>

6.4.10 Comment in HTML

  • HTML comments are created using <!-- comment --> and are not displayed in the browser.

Example:

html
<!-- This is a comment -->

6.4.11 Formatting Text

Common formatting tags include:

  • B: Bold text.
  • I: Italic text.
  • U: Underlined text.
  • MARK: Highlighted text.
  • SUP: Superscript text.
  • SUB: Subscript text.
  • EM: Emphasized text.
  • BLOCKQUOTE: Quoted text.
  • PRE: Preformatted text, preserving whitespace.

Example:

html
<b>This is bold text</b>
<i>This is italic text</i>

6.4.12 Ordered List (OL)

  • The <ol> tag creates an ordered list, and <li> is used for list items. The type attribute can specify the numbering style (1, I, A, a).

Example:

html
<ol type="A">
    <li>Item A</li>
    <li>Item B</li>
</ol>

6.4.13 Unordered List (UL)

  • The <ul> tag creates an unordered list, and <li> is used for list items. The type attribute can specify the bullet style (disc, circle, square).

Example:

html
<ul type="square">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

6.4.14 ADDRESS Tag

  • The <address> tag is used to provide contact information for the author or owner of a document.

Creating Links:

  • Links can be created using the <a> (anchor) tag to link to other HTML documents or external sites.

Example of linking to another page:

html
<a href="page.html">Go to Page</a>
  • Links to other places in the same HTML document can be created using the id attribute and the hash symbol:
html
<a href="#section1">Jump to Section 1</a>
<section id="section1">Section 1</section>
  • Links to places in other HTML documents:
html
<a href="https://www.example.com">Visit Example</a>

6.4.15 Tables

  • Tables can be created using the <table>, <tr> (table row), <th> (table header), and <td> (table data) tags.

Example:

html
<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

6.4.16 Forms

  • Forms can be created using the <form> tag. Various input elements include:
    • Textbox: <input type="text">
    • Radio: <input type="radio">
    • Checkbox: <input type="checkbox">
    • Textarea: <textarea></textarea>
    • Button: <button>Click Me</button>

Example:

html
<form>
    <input type="text" name="name" placeholder="Enter your name">
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female
    <button type="submit">Submit</button>
</form>

6.4.17 Introduction to HTML 5 Elements

HTML5 introduced new elements, such as:

  • audio: <audio src="audio.mp3" controls></audio>
  • embed: <embed src="file.swf">
  • source: <source src="audio.mp3" type="audio/mpeg">
  • track: <track kind="subtitles" srclang="en" src="subtitles.vtt">
  • video: <video src="video.mp4" controls></video>

6.4.18 HTML5 Graphics Using Canvas and SVG Tags

  • Canvas: Used for drawing graphics via scripting (JavaScript).

    html
    <canvas id="myCanvas" width="200" height="100"></canvas>

  • SVG (Scalable Vector Graphics): Used for creating vector-based graphics directly in HTML.

    html
    <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

6.4.19 Concept of Domain Name and Web Hosting

  • Domain Name: A human-readable address for a website (e.g., www.example.com). It is essential for users to access a site easily.

  • Web Hosting: A service that provides the technologies and services necessary for the website to be viewed on the Internet. Hosting services store website files on servers and make them accessible via the domain name.

6.5 Cascading Style Sheets (CSS)

6.5.1 Introduction to Cascading Style Sheets (CSS)

CSS is a stylesheet language used to describe the presentation of a document written in HTML. It controls the layout, colors, fonts, and overall design of web pages.

6.5.2 Inline CSS

Inline CSS involves adding styles directly to HTML elements using the style attribute. Example:

html
<p style="color: red;">This is a red paragraph.</p>

6.5.3 Embedded CSS

Embedded CSS is included within the <style> tag in the <head> section of an HTML document. Example:

html
<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>

6.5.4 External CSS

External CSS is defined in a separate CSS file and linked to the HTML document using the <link> tag. Example:

html
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
Previous Next