Web Page Design

1. Style Attribute in Web Design

• The style attribute customizes web page elements by specifying properties like color and font.
• It can be added directly within the starting tag of an element or inside the head tag.
• Syntax example: <div style="color: red; float: left;">...</div>

2. Color Specification in HTML

There are three ways to specify colors in HTML:

• Hexadecimal color codes start with # followed by three pairs of hex digits:
  • RR = Red component
  • GG = Green component
  • BB = Blue component
• Hex values range from 00 (minimum) to FF (maximum).

Common Hex Color Codes:

3. HTML Table Design Attributes

a) <tr> Tag Attributes (Table Row)

b) <th> and <td> Tag Attributes (Table Header and Data Cells)

Key point: Use style attributes to control the visual appearance of web page elements and table components, enabling precise layout and design customization.

1. HTML Table Cell Attributes

• width: sets the width of a table cell.
• height: sets the height of a table cell.
• rowspan: merges a cell across multiple rows (e.g., rowspan="2" merges 2 rows).
• colspan: merges a cell across multiple columns (e.g., colspan="3" merges 3 columns).
• align: aligns cell content (left, right, center).
  • Default alignment: <th> is centered, <td> is left-aligned.

To merge multiple rows in a table, use the rowspan attribute inside <td> or <th>.
To merge multiple columns, use the colspan attribute similarly.

Example:
In a table where cell X spans 4 columns (colspan="4") and cell Y spans 3 rows (rowspan="3"):

2. Table Cell Background Color

• Use the bgcolor attribute to set background color for:
  • Entire table: <table bgcolor="green">
  • Specific row: <tr bgcolor="green">
  • Specific cell: <td bgcolor="green">

3. Div and Span Elements

• <div>: used to separate different sections of a document; acts as a block-level container.
• <span>: used to select and style a specific part of text within another element; inline container.

Use <span> to apply different styles to selected words inside a paragraph.

Example:

<p>The <span style="color: red;">Royal Scientific</span> Publications.</p>

This styles only "Royal Scientific" in red within the paragraph.

1. Website Architecture and Layout

Website architecture refers to the structural design of a website, organizing its content and navigation to ensure usability and clarity. The layout is how the elements (text, images, tables, etc.) are arranged visually on the web pages.

2. Tables in HTML

• The <table> tag creates a table structure in HTML.
• By default, a <table> without any attributes does not display borders.

Note: Without the border attribute, tables appear borderless even if rows and columns are defined.

3. Key Points on Table Attributes

• border: Defines the thickness of the table border in pixels.
• cellpadding: Controls the distance between the cell content and its border, increasing readability by adding padding inside cells.
• cellspacing: Controls the space between individual table cells.

4. Adding Images to Web Pages

Benefits of using images:

• Enhance the visual appeal of the webpage, making it more attractive to users.
• Improve user experience by providing relevant, high-quality visuals.
• Convey information quickly and effectively, reducing the amount of text needed.

Common reasons images may not display:

• Incorrect file name or extension.
• Browser does not support the image format.
• The image file is corrupted or missing.
• Incorrect file path or location specified in the HTML.

> To ensure effective website architecture, use clear layouts with properly structured tables and images that enhance usability and visual appeal.

1. HTML Headings

• HTML provides six levels of headings: <h1> to <h6>, where <h1> is the highest (largest) level and <h6> the lowest.
• Headings structure the content hierarchically, improving readability and SEO.

2. Text Formatting Tags

3. Key Points on Headings and Text Formatting

• Use headings (<h1> to <h6>) to create a clear content hierarchy.
• Use semantic tags like <strong> and <em> instead of just styling tags (<b>, <i>) for better accessibility and SEO.
• Text formatting tags help emphasize or style parts of text without affecting document structure.

Remember: Proper use of headings and semantic text formatting improves both user experience and search engine optimization.

1. HTML Lists

HTML provides three main types of lists to organize content clearly and semantically:

a) Key Points on List Elements

• Each list item is enclosed in an <li> tag inside <ol> or <ul>.
• <dl> contains pairs of <dt> (term) and <dd> (description).
• Lists can be nested by placing one list inside an <li> element of another list.

b) Example Syntax

• Ordered List:

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

• Unordered List:

<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>

• Description List:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

To remember: Use <ol> for ordered sequences, <ul> for unordered groups, and <dl> for term-description pairs.

c) Styling and Attributes

• Lists can be styled with CSS to change bullet types, numbering styles, indentation, and spacing.
• The type attribute on <ol> can specify numbering style (e.g., numbers, letters, Roman numerals).
• The start attribute on <ol> sets the starting number of the list.

This concise overview covers the essential HTML list types, their structure, and usage for effective web content organization.

1. Hyperlinks and Navigation

Hyperlink Definition
A hyperlink connects two or more HTML documents or web pages, enabling navigation between them.

Anchor Tag (<a>)

• Used to create hyperlinks in HTML.
• Syntax: <a href="URL">link text</a>
• The href attribute specifies the destination URL.
• Clicking the link text navigates to the URL.

Types of URLs in Hyperlinks

• Absolute URL: Full web address (e.g., https://www.example.com/page.html)
• Relative URL: Path relative to the current page (e.g., page.html or ../folder/page.html)

Navigation Behavior

• Clicking a hyperlink loads the linked page in the current window/tab by default.
• To open in a new tab/window, use target="_blank" attribute:
  <a href="url" target="_blank">link text</a>

> To create a hyperlink in HTML, use the <a> tag with the href attribute specifying the destination URL.

Summary

• Hyperlinks enable web navigation by linking pages.
• <a href="URL">text</a> is the fundamental syntax.
• URLs can be absolute or relative.
• Use target="_blank" to open links in new tabs/windows.

1. Images and Media in Web Design

a) Embedding Images in HTML

• Use the <img> tag to insert images.
• Key attributes:
  • src: URL or path to the image file.
  • alt: alternative text describing the image (important for accessibility).
  • width and height: specify image dimensions.

Example:

<img src="image.jpg" alt="Description" width="500" height="300">

b) Common Image Formats

c) Embedding Audio and Video

• Use <audio> and <video> tags to embed media.
• Attributes:
  • controls: displays playback controls.
  • src: media file URL.
  • autoplay, loop, muted: control playback behavior.

Example:

<audio src="audio.mp3" controls></audio>
<video src="video.mp4" controls width="600"></video>

d) Media Formats Supported by Browsers

e) Best Practices

• Always provide alt text for images for accessibility.
• Use appropriate file formats to balance quality and loading speed.
• Include controls for audio/video to enhance user experience.
• Optimize media files to reduce page load time.

Remember: Proper use of images and media enhances user engagement and accessibility on web pages.

1. HTML Tables

Tables in HTML organize data into rows and columns, making information easier to read and compare.

2. Basic Table Structure

Example:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

3. Key Points on Table Elements

• <table>: Wraps the entire table.
• <tr>: Groups cells into rows.
• <th>: Used for column or row headers; text is bold and centered by default.
• <td>: Contains regular data cells.

4. Attributes for Tables

5. Merging Cells

• colspan="n": Cell spans across n columns.
• rowspan="n": Cell spans across n rows.

6. Table Caption

• Use <caption> inside <table> to add a title or description for the table.
• It is displayed above the table by default.

Remember:
HTML tables are for tabular data, not for page layout. Use CSS for layout purposes.

7. Summary Table of Core Tags and Attributes

This concise structure and attribute list cover the essentials for creating and customizing HTML tables effectively.

1. Div and Span Elements

Div and Span are fundamental HTML elements used to group and style content, but they serve different purposes based on their display behavior:

• <div> creates a block container that starts on a new line and takes up the full width available. It is commonly used to structure the layout of a webpage.
• <span> is an inline container that does not start on a new line and only takes up as much width as necessary. It is used for styling or marking up parts of text within other elements.

a) Key Points

• Both <div> and <span> are generic containers without any semantic meaning; their role is purely structural or stylistic.
• They can carry attributes like class, id, and style to apply CSS or JavaScript.
• Use <div> when you want to group block-level content or create sections.
• Use <span> when you want to style or manipulate inline content without breaking the flow of text.

Remember: Use <div> for block-level grouping and <span> for inline grouping to maintain proper HTML structure and styling flexibility.

1. Style Attributes and Web Page Design

HTML File Basics

• HTML files use the extensions .html or .htm.
• Common text editors for HTML coding include Notepad, Notepad++, Sublime Text, VS Code.
• HTML is a user-friendly open technology, supported by most browsers, easy to write and update, and does not require special software purchase.
• HTML is not case sensitive: tags can be uppercase, lowercase, or mixed without issue.
• The entire HTML content is enclosed within <html> ... </html> tags, which are mandatory for web pages.

HTML Elements and Attributes

• An HTML element consists of a starting tag <tag> and a closing tag </tag>, including everything in between.
• The visible part inside an element is called the element content.
• Attributes provide additional information inside the starting tag, written as attribute="value".
• Example: In <font color="red" face="Arial">ICT</font>,
  • Attributes: color="red", face="Arial"
  • Content: ICT

Document Type Declaration

• <!DOCTYPE html> declares the document as HTML5 standard, instructing browsers how to interpret the page.
• It is not part of the HTML content but is mandatory for proper rendering.

HTML Headings and Text Formatting

• HTML provides six levels of headings, from <h1> (most important) to <h6> (least important).
• Headings structure the document and improve readability and SEO.

> HTML is case-insensitive and uses tags with optional attributes to define elements and their styles on a web page.

1. Website Structure in Web Page Designing

Website structure refers to the layout arrangement of various pages within a website. It determines how pages are organized and linked.

There are four main types of website structures:

a) Key Points on Each Structure

• Hierarchical Structure:

  • Organizes pages in a tree-like form with multiple levels.
  • Suitable for websites with clear parent-child relationships between pages.

• Network Structure:

  • All pages are interconnected, allowing flexible navigation.
  • Enables direct access to the home page from any page.

• Linear Structure:

  • Pages follow a strict sequence.
  • Navigation is typically through "Previous" and "Next" buttons.

• Hybrid Structure:

  • Uses a combination of hierarchical, network, and linear structures.
  • Offers flexibility to suit complex website needs.

> The choice of website structure affects user navigation and overall website usability.

2. Historical Note on Web Design

• Sir Tim Berners-Lee, a British physicist and computer scientist at CERN, invented the World Wide Web (WWW) and HTML (HyperText Markup Language).
• He is also a professor at MIT.

3. Summary Table of Website Structures with Visual Representation

This concise understanding of website structures and their characteristics is essential for effective web page designing and color implementation.

1. Website Types

• Static Website: Displays pre-created, fixed content. Built using only HTML and CSS.
• Dynamic Website: Content can change after loading, using technologies like PHP, ASP, JSP, SQL/MySQL alongside HTML.

2. Website Components

3. Communication Protocols

• Websites communicate via HTTP (Hyper Text Transfer Protocol).
• HTTP:
  • Establishes communication between browser and server.
  • Sends browser requests to the server.
  • Retrieves data (text, images) from the server to the browser.

4. Other Important Protocols

5. Key Definitions

• Hypermedia: An advanced form of hypertext linking various media types (text, images, audio, video) via hyperlinks.
• CSS (Cascading Style Sheets): Used to style and enhance the appearance of websites.

6. Historical Notes

• Sir Tim Berners-Lee invented HTML in 1990 and launched the first website in 1991 at CERN, Geneva.
• Websites are the most cost-effective and fastest means of publishing and sharing information today.

To remember: Website publishing relies on the interaction between client and server through HTTP, enabling static or dynamic content delivery.