Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
39 views

Unit-2 HTML: Basics of HTML,

Notes Internet and Web Technology

Uploaded by

computeroperator.nh309
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
39 views

Unit-2 HTML: Basics of HTML,

Notes Internet and Web Technology

Uploaded by

computeroperator.nh309
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

UNIT II: HTML: Basics of HTML, formatting and fonts, commenting code, color, hyperlink, lists,

tables, images, forms, XHTML, Meta tags, Character entities, frames and frame sets, Browser
architecture and Web site structure. Overview and features of HTML5

UNIT II: HTML


1. What are the different types of lists in HTML? Explain with suitable examples. (AL
Nov-2023) (CY May-2023) (CS 2020)
2. Explain how images can be inserted into HTML documents. (AL Nov-2023)
3. Write an HTML document to divide your browsing window into 3 parts consisting of 2
rows of size 20% and 80%, and divide the last row into two columns of size 30% and
70%. (CS Nov-2023) (CS Nov-2023)
4. Discuss the difference between HTML and XHTML with respect to elements. (CY May-
2023) (AD 2022) (CS Nov-2023)
Or
Differentiate HTML and XHTML with suitable examples. (CS Nov-2023)
5. Basics of HTML, formatting and fonts, commenting code, color, hyperlink, lists, tables,
images, forms, XHTML, Meta tags, Character entities, frames and frame sets. (General
topic coverage)
6. Overview and features of HTML5. (General topic coverage)
Or
Write a notes Features of HTML5 (CS Nov-2023)
7. Browser architecture and Web site structure. (CS Nov-2022)'

UNIT II: HTML sllybus


UNIT II: HTML: Basics of HTML, formatting and fonts, commenting code, color, hyperlink,
lists, tables, images, forms, XHTML, Meta tags, Character entities, frames and frame sets, Browser
architecture and Web site structure. Overview and features of HTML5

Basics of HTML

1. HTML (Hypertext Markup Language) is a standard markup language for web pages.
2. Basic structure: <!DOCTYPE html>, <html>, <head>, <body>.
3. Elements: Tags (<tag>) with attributes (attr="value").
4. Syntax: Closing tags (</tag>) and proper nesting.

Formatting and Fonts

1. Headings: <h1>, <h2>, <h3>, etc.


2. Paragraphs: <p>.
3. Bold/Italic: <b>, <i>, <strong>, <em>.
4. Font sizes/styles: <font size="x" face="font">.
5. Text alignment: <center>, <left>, <right>.

Commenting Code
1. Syntax: <!-- comment -->.
2. Purpose: Hide code from browsers, explain code.

Color
1. Color codes: Hexadecimal (#RRGGBB) or RGB (rgb(R,G,B)).
2. Background color: <body bgcolor="#RRGGBB">.
3. Text color: <font color="#RRGGBB">.

Hyperlinks

1. Syntax: <a href="URL">Link text</a>.


2. Target attribute: _blank, _self, _parent, _top.

Lists

1. Ordered lists (<ol>, <li>)


2. Unordered lists (<ul>, <li>)
3. Definition lists (<dl>, <dt>, <dd>)

Tables

1. Basic structure: <table>, <tr>, <td>.


2. Attributes: border, width, height.
3. Table headers: <th>.

Images

1. Syntax: <img src="URL" alt="text">.


2. Attributes: width, height, border.
3. Image maps: <map>, <area>.

Forms

1. Syntax: <form>, <input>, <textarea>, <select>.


2. Attributes: name, id, type (text, password, checkbox, etc.).

XHTML

1. XML-based HTML version.


2. Differences: Strict DOCTYPE, closing tags, attribute quoting.

Meta Tags

1. <meta charset="UTF-8"> (character encoding).


2. <meta name="description" content="..."> (page description).
3. <meta name="keywords" content="..."> (keywords).

Character Entities

1. & (ampersand).
2. &lt; (less-than).
3. &gt; (greater-than).
4. &quot; (quotation mark).

Frames and Frame Sets

1. <frameset> (divide page into frames).


2. <frame> (individual frame).
3. Attributes: src, name, frameborder.

Browser Architecture

1. User Interface.
2. Rendering Engine (Blink, Gecko).
3. JavaScript Engine (V8).
4. Networking.
5. Storage.

Web Site Structure

1. Home page (index.html).


2. Navigation (consistent).
3. Content organization (logical).
4. Footer (contact info, copyright).
5. Mobile-friendliness (responsive design).

Overview and Features of HTML5

1. New semantic elements (<header>, <nav>, <footer>).


2. Improved multimedia support (<video>, <audio>).
3. Canvas and SVG (enhanced graphics).
4. Offline storage (LocalStorage, sessionStorage).
5. Geolocation API.
6. Microdata (semantic markup).
7. Improved error handling.
8. Enhanced accessibility.

Key HTML5 features:

1. Responsive design.
2. Mobile-friendly.
3. Improved performance.
4. Enhanced security.
5. Better accessibility.

Q.1]. What are the different types of lists in HTML? Explain with suitable
examples. (AL Nov-2023) (CY May-2023) (CS 2020)
Different Types of Lists in HTML
HTML provides several ways to create lists. The three main types of lists are:
1. Ordered List (ol)
2. Unordered List (ul)
3. Definition List (dl)

1. Ordered Lists (OL)


1. Numbered lists, where each item is numbered sequentially.
2. Syntax: <ol>, <li> (list item).
3. Example:

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Output:
1. Item 1
2. Item 2
3. Item 3

2. Unordered Lists (UL)

1. Bulleted lists, where each item is preceded by a bullet point.


2. Syntax: <ul>, <li> (list item).
3. Example:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Output:
• Item 1
• Item 2
• Item 3

3.Definition Lists (DL)

1. Lists with terms and definitions.


2. Syntax: <dl>, <dt> (term), <dd> (definition).
3. Example:

<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
</dl>

Output:

Term 1
Definition 1
Term 2
Definition 2

Additional types of lists:

4.Nested Lists

1. Lists within lists.


2. Example:

<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
</ul>

Output:

• Item 1
• Item 2
• Subitem 1
• Subitem 2

Menu Lists
1. Lists for navigation menus.
2. Syntax: <menu>, <li> (list item).
3. Example:

<menu>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</menu>

Q.2]. Explain how images can be inserted into HTML documents. (AL Nov-
2023)
Inserting Images into HTML Documents

To insert images into HTML documents, you use the <img> tag. This tag is a self-closing tag,
meaning it does not have a closing tag. The <img> tag has several attributes that help in
defining the source and appearance of the image

Methods

1. Using <img> tag: Most common method.


2. Background images: Using CSS (background-image property).
3. Image maps: Using <map> and <area> tags.

Using <img> Tag


1. Syntax: <img src="image_url" alt="image_description">
2. Attributes:
1. src: Image URL (required)
2. alt: Alternate text (required)
3. width and height: Image dimensions (optional)
4. border: Image border (optional)

3. Example:
<img src="image.jpg" alt="Beautiful Landscape" width="500" height="300">

Image File Formats


1. JPEG (.jpg, .jpeg): Photographic images
2. PNG (.png): Graphics, logos, icons
3. GIF (.gif): Animated images
4. SVG (.svg): Scalable vector graphics
5. WebP (.webp): Modern image format

Image Sources
1. Local files: src="image.jpg" (same directory)
2. Relative paths: src="images/image.jpg" (subdirectory)
3. Absolute URLs: src="(link unavailable)" (external website)
4. Base64 encoded: src="data:image/jpeg;base64,..." (inline images)

Accessibility Considerations
1. Provide alternative text (alt attribute)
2. Use descriptive file names
3. Avoid using images for text
4. Ensure sufficient contrast

Best Practices
1. Optimize image file size
2. Use meaningful file names
3. Specify image dimensions
4. Test image rendering

Additional Attributes
1. title: Image tooltip
2. longdesc: Detailed image description
3. usemap: Image map association
4. ismap: Image map specification

Summary:
The <img> tag is used to insert images into HTML documents. By using attributes like , src,alt, title,
width, and height, you can control the source, alternative text, tooltip, and dimensions of the
image. This helps in creating visually appealing and accessible web pages.

Q.3]. Write an HTML document to divide your browsing window into 3 parts
consisting of 2 rows of size 20%
and 80%, and divide the last row
into two columns of size 30% and
70%. (CS Nov-2023)
Explanation:
 <style>: Contains the CSS to style the
layout.
 .row1: Defines the height of the first row
to be 20% of the window height and sets
a background color.
 .row2: Defines the height of the second
row to be 80% and uses display: flex to
arrange its child elements (columns).
 .column1: Sets the width of the first
column in the second row to 30% and
sets a background color.
 .column2: Sets the width of the second
column in the second row to 70% and
sets a background color.

Q.4]. Discuss the difference between HTML and XHTML with respect to
elements. (CY May-2023) (AD 2022) (CS Nov-2023)
or
Differentiate HTML and XHTML with suitable examples.

HTML (Hypertext Markup Language) and XHTML (Extensible Hypertext Markup


Language) are both markup languages used to create web pages, but they have key
differences in terms of syntax and structure.
HTML is more ienient width syntax and allows some flexibility, making it easier to write but
potentially less consistent.
XHTML enforces strict syntax rules, requiring all tags to be properly closed, lowercased, and
attributes to be quoted, leading to more consistent and well – formed documents.

Feature HTML XHTML

Element Names Case-insensitive Case-sensitive

Element Closing Optional closing tags Mandatory closing tags

Self-closing tags Self-closing tags required with a forward slash


Empty Elements allowed (e.g., <br>) (e.g., <br />)

Single or double quotes


Attribute Quotation allowed Only double quotes allowed

Attribute Allowed (e.g., <input


Minimization checked>) Not allowed

Document Type
Declaration (DTD) Optional Mandatory

Mandatory (e.g.,
Namespace Optional xmlns="http://www.w3.org/1999/xhtml")

Strict Syntax Less strict Stricter

Error Handling More lenient More strict

Future-Proofing Less future-proof More future-proof

Here's a comprehensive comparison of HTML and XHTML:

Feature HTML XHTML

Stricter, requires exact syntax


Syntax Less strict, allows some flexibility
adherence

Case Sensitivity Not case-sensitive (e.g., <BR>) Case-sensitive (e.g., <br />)

Some tags do not require closing All tags must be properly closed (e.g.,
Tag Closure
(e.g., <img>) <img />)

Attributes can be without quotes Attributes must be quoted (e.g.,


Attribute Quotation
(e.g., <input type=text>) <input type="text" />)

Not allowed (e.g., <input


Attribute Minimization Allowed (e.g., <input checked>)
checked="checked" />)

Document Type
Optional Mandatory
Declaration (DTD)

XML Namespace Not supported Supported

Error Handling More lenient Stricter

Future-Proofing Less future-proof More future-proof


Q.5]. Basics of HTML, formatting and fonts, commenting code, color,
hyperlink, lists, tables, images, forms, XHTML, Meta tags, Character
entities, frames and frame sets. (General topic coverage)
Basic HTML Elements

1. HTML Structure: <!DOCTYPE html>, <html>, <head>, <body>


2. Headings: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
3. Paragraphs: <p>
4. Links: <a href="URL">Link text</a>
5. Images: <img src="image_url" alt="image_description">

Formatting and Fonts


1. Bold: <b>, <strong>
2. Italic: <i>, <em>
3. Underline: <u>
4. Font Size: <font size="x">
5. Font Color: <font color="#RRGGBB">
6. Font Family: <font face="font_name">

Commenting Code
1. Syntax: <!-- comment -->

Color
1. Hexadecimal Code: #RRGGBB
2. RGB Code: rgb(R,G,B)
3. Color Names: red, blue, etc.

Hyperlinks
1. Internal Links: <a href="#anchor">
2. External Links: <a href="(link unavailable)">
3. Email Links: <a href="mailto:email@example.com">

Lists
1. Ordered Lists: <ol>, <li>
2. Unordered Lists: <ul>, <li>
3. Definition Lists: <dl>, <dt>, <dd>

Tables
1. Basic Table: <table>, <tr>, <td>
2. Table Headers: <th>
3. Table Rows: <tr>
4. Table Data: <td>

Images
1. Image Tag: <img src="image_url" alt="image_description">
2. Image Attributes: width, height, border, alt

Forms
1. Form Tag: <form>
2. Input Fields: <input type="text/password/email/etc.">
3. Submit Button: <input type="submit">
4. Reset Button: <input type="reset">

XHTML
1. DOCTYPE Declaration: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"(link unavailable)">
2. XML Namespace: xmlns="(link unavailable)"
3. Self-Closing Tags: <br />, <img />
Meta Tags
1. Charset: <meta charset="UTF-8">
2. Description: <meta name="description" content="Page description">
3. Keywords: <meta name="keywords" content="Page keywords">
4. Author: <meta name="author" content="Page author">

Character Entities
1. Ampersand: &
2. Less-than: &lt;
3. Greater-than: &gt;
4. Quotation Mark: &quot;
5. Non-breaking Space: &nbsp;

Frames and Frame Sets


1. Frame Set: <frameset>
2. Frame: <frame src="frame_url" name="frame_name" frameborder="x" scrolling="yes/no"
width="x%" height="x%">
3. No Frames: <noframes>

Q.6]. Overview and features of HTML5. (General topic coverage)


Or
Write a notes Features of HTML5 (CS Nov-2023)
HTML5 (HyperText Markup Language 5) is the fifth major version of HTML, released in 2014.
It's a markup language used for structuring and presenting content on the web. HTML5 improves
upon its predecessors with enhanced features, improved performance, and better support for modern
web applications.

Key Features

1. Semantic Elements: New elements like <header>, <nav>, <main>, <section>, <article>,
<aside>, <footer>, and <figure> provide better structure and meaning to web pages.
2. Multimedia Support: Native support for audio and video playback using <audio> and
<video> elements.
3. Canvas and SVG: Enhanced graphics capabilities using <canvas> and SVG (Scalable Vector
Graphics).
4. Offline Storage: LocalStorage and sessionStorage allow web applications to store data
locally.
5. Geolocation API: Access device location information.
6. Microdata: Semantic markup for search engines and other applications.
7. Improved Error Handling: Better error handling and recovery mechanisms.
8. Responsive Design: Improved support for mobile devices and responsive design.
9. Web Workers: Run background scripts, improving performance.
10. Web Sockets: Real-time communication between web applications and servers.
11. New Input Types: Enhanced form input types, such as date, time, email, and URL.
12. Improved Accessibility: Better support for accessibility features.

Additional Features

 WebGL: 3D graphics support.


 WebRTC: Real-time communication and video conferencing.
 IndexedDB: Client-side database storage.
 File API: Access and manipulate files locally.
 Media Source Extensions: Dynamic adaptive streaming.

Benefits

1. Improved User Experience: Enhanced multimedia support and responsive design.


2. Increased Performance: Better error handling, caching, and web workers.
3. Enhanced Security: Improved validation and sandboxing.
4. Better Accessibility: Improved support for assistive technologies.
5. Simplified Development: New semantic elements and improved APIs.

Browser Support
HTML5 is supported by all modern browsers, including:
1. Google Chrome
2. Mozilla Firefox
3. Microsoft Edge
4. Safari
5. Opera

Resources
1. W3C HTML5 Specification
2. Mozilla Developer Network (MDN) HTML5 Documentation
3. HTML5 Tutorial by W3Schools
4. HTML5 Reference by Mozilla Developer Network

HTML5 brings numerous enhancements to web development, including new semantic elements,
multimedia support, improved form controls, enhanced graphics capabilities, and powerful
APIs for better interactivity and performance.

Q.7]. Browser architecture and Web site structure. (CS Nov-2022)'


Browser Architecture
Browser architecture refers to the components and processes that enable web browsers to render and
display web content. It involves various subsystems working together to interpret HTML, CSS,
JavaScript, and other resources to present web pages to users.

Key Components of Browser Architecture:


1. User Interface (UI):
o The part of the browser that interacts with the user. It includes elements like the
address bar, back and forward buttons, bookmarks, and the viewport displaying the
web page.
2. Browser Engine:
o Bridges the interface and the rendering engine. It handles actions from the user
interface and executes instructions for rendering content.
3. Rendering Engine:
o Responsible for displaying the content on the screen. It interprets HTML, CSS, and
images to construct the visual representation of the web page.
o Examples: Blink (used by Chrome), Gecko (used by Firefox), WebKit (used by
Safari).
4. Networking:
o Handles network calls such as HTTP requests and responses. This component fetches
the necessary resources like HTML, CSS, JavaScript, and images from the web
server.
5. JavaScript Interpreter:
o Parses and executes JavaScript code. It allows dynamic content and interactive
features on web pages.
o Examples: V8 engine (used by Chrome), SpiderMonkey (used by Firefox).
6. UI Backend:
o Utilizes user interface methods for drawing basic widgets like combo boxes and
windows. This is platform-specific and used by the rendering engine to draw
elements.
7. Data Storage:
o Manages data storage for the browser, including cookies, local storage, session
storage, and cached files. This allows for persistent data across sessions.
Website Structure
Website structure refers to the organization and arrangement of a website’s content, files, and
navigation. A well-structured website ensures that users can easily find information and navigate
through the site.
Key Elements of Website Structure:
1. Home Page:
o The main entry point of a website. It provides an overview of the site's content and
links to other important sections.
2. Navigation:
o A system of menus and links that allow users to move between different sections of
the website. This includes primary navigation (main menu) and secondary navigation
(submenus, sidebars).
3. Content Pages:
o Individual pages that contain specific information or features. These pages are
typically organized into categories or sections.
4. Header and Footer:
o The header usually contains the site's logo, main navigation links, and contact
information. The footer often includes additional links, copyright information, and
social media icons.
5. Sitemap:
o A structured list of all the pages on a website, usually organized hierarchically. It
helps users and search engines understand the organization of the site.
6. URL Structure:
o The format and organization of URLs for different pages on the website. A clean and
logical URL structure improves user experience and search engine optimization
(SEO).
7. File Organization:
o The arrangement of files and directories on the web server. Proper file organization
ensures that the website is maintainable and scalable.

Summary:
 Browser Architecture: Involves components like the user interface, browser engine,
rendering engine, networking, JavaScript interpreter, UI backend, and data storage working
together to render web content.
 Website Structure: Refers to the organization of a website’s content, files, and navigation to
ensure a seamless and user-friendly experience.

Browser Architecture
1. Rendering Engine: Converts HTML, CSS, JavaScript into visual content
2. JavaScript Engine: Executes JavaScript code
3. Networking: Handles HTTP requests/responses
4. Security: Implements security features
5. User Interface: Browser window, toolbar, address bar

Website Structure
1. Home Page: Main entry point
2. Navigation: Menu, links, buttons
3. Content Pages: Individual pages
4. Static Assets: Images, CSS, JavaScript files
5. Dynamic Content: Server-generated content

Key Components
1. HTML: Structure and content
2. CSS: Layout, styling, design
3. JavaScript: Interactivity, dynamic effects
4. Images: Graphics, logos, icons
5. Videos: Multimedia content

Website Types
1. Static Website: Pre-built HTML, CSS, JavaScript
2. Dynamic Website: Server-generated content
3. Responsive Website: Adapts to devices, screen sizes
4. Single-Page Application (SPA): JavaScript-driven
5. Progressive Web App (PWA): Offline-capable, installable

Best Practices
1. Accessibility: Follow WCAG guidelines
2. Search Engine Optimization (SEO): Optimize for search engines
3. Performance: Minimize load times
4. Security: Implement HTTPS, validate user input
5. Responsive Design: Ensure cross-device compatibility

You might also like