Website Design - Lecture Notes
Unit 1: Basics in Website Design
1.1 Brief History of the Internet:
- Originated from ARPANET in the 1960s.
- Initially designed for military communication, later expanded for academic use.
- Evolved with the invention of the World Wide Web by Tim Berners-Lee in 1989.
1.2 World Wide Web (WWW):
- A system of interlinked hypertext documents accessed via the Internet.
- Uses browsers like Chrome or Firefox to display web pages.
1.3 WWW Applications:
- Education, e-commerce, social media, news, entertainment, government services.
1.4 Web Standards:
- Guidelines developed by W3C and other organizations.
- Ensure consistent design and functionality across browsers and devices.
1.5 Web Protocols:
- HTTP: Transfer data over the web.
- HTTPS: Secure HTTP using encryption (SSL/TLS).
- FTP: Transfer files between computers.
1.6 Web Browsers:
- Software to access the WWW (e.g., Chrome, Firefox).
- Interpret and display HTML, CSS, JavaScript content.
1.7 Search Engines:
- Tools like Google, Bing used to find information online.
- Use crawlers, indexing, and algorithms to fetch results.
Website Design - Lecture Notes
1.8 Web Domain and Hosting:
- Domain: Website name (e.g., www.example.com).
- Hosting: A service that stores website files and makes them accessible online.
Unit 2: Website Design Principles
2.1 Principles of Website Development:
- Purpose: Clear goal of the website.
- Simplicity: Clean, easy-to-navigate interface.
- Consistency: Uniform design throughout pages.
- Accessibility: Easy access for users with disabilities.
2.2 Phases of Website Development:
- Planning: Define objective, target users.
- Design: Layout, color, navigation.
- Development: Code using HTML, CSS, JS.
- Testing: Fix bugs and verify functionality.
- Deployment: Publish site online.
- Maintenance: Updates and improvements.
2.3 Importance of Websites:
- Acts as a digital presence for businesses and individuals.
- Enhances communication and marketing.
- Supports online transactions and services.
Unit 3: HTML Basics
3.1 HTML and Documents:
- HTML stands for HyperText Markup Language.
Website Design - Lecture Notes
- It structures web content with tags (e.g., <html>, <body>, <p>).
3.2 HTML Document Structure:
- <!DOCTYPE html>
- <html>: Root of document.
- <head>: Metadata, title, linked styles.
- <body>: Visible content of the webpage.
3.3 Creating HTML Document:
- Use a simple text editor (VS Code, Notepad++).
- Save file as .html and open in browser.
3.4 HTML Tags:
- <h1> to <h6>: Headings.
- <p>: Paragraphs.
- <br>: Line break.
- <img>: Insert image.
- <a>: Hyperlink.
3.5 HTML Attributes:
- Provide extra information about elements.
- Examples: src, href, alt, title, style.
3.6 HTML Comments:
- Not displayed in browser.
- Syntax: <!-- This is a comment -->
Unit 4: HTML Elements
4.1 HTML Elements:
Website Design - Lecture Notes
- An element = Start tag + Content + End tag.
- Example: <p>This is a paragraph.</p>
4.2 Key Elements:
- Headings: <h1> to <h6>
- Paragraph: <p>
- Line Break: <br>
- Horizontal Line: <hr>
- Text Formatting: <b>, <i>, <u>, <strong>, <em>
- Lists: <ul>, <ol>, <li>
- Tables: <table>, <tr>, <td>, <th>
- Frames: <iframe>
- Forms: <form>, <input>, <textarea>, <select>
- Hyperlinks: <a href="url">link</a>
- Multimedia: <img>, <audio>, <video>
Unit 5: HTML5 Basics
5.1 HTML5 Overview:
- Latest version of HTML, introduced semantic elements and multimedia support.
5.2 HTML5 Features:
- Semantic Elements: <header>, <footer>, <section>, <article>
- Multimedia Tags: <audio>, <video> with native controls
- Canvas: Drawing graphics with JavaScript
- SVG: Scalable vector graphics using XML
- Drag and Drop API: Enables dragging elements across the page
- Form Features: Placeholder, autofocus, email/date input types
Website Design - Lecture Notes
Unit 6: CSS
6.1 What is CSS:
- CSS (Cascading Style Sheets) describes how HTML elements are styled.
6.2 Creating Styles:
- Inline: within an element using style attribute.
- Internal: <style> inside <head>
- External: link to .css file
6.3 Types of CSS:
- Inline, Internal, External
6.4 CSS Selectors:
- Used to "select" elements to style.
- Types: element, ID, class, descendant, child, universal
6.5 Basic Properties:
- Fonts: font-family, font-size
- Color/Background: color, background-color
- Borders, Margin, Padding
- Text: text-align, text-decoration
- Height/Width, Position, Float
- Overflow, Box Model, Navigation Bars
6.6 Advanced CSS:
- Rounded Corners: border-radius
- Border Images: border-image-source
- Text Effects: text-shadow
- Gradient: linear-gradient(), radial-gradient()
- Shadows: box-shadow
Website Design - Lecture Notes
6.7 CSS Layout:
- Layout using Flexbox, Grid or Float for responsive designs.
Unit 7: JavaScript Fundamentals
7.1 JavaScript Introduction:
- JS is a scripting language used to create dynamic content on websites.
7.2 Creating JS:
- Place <script> tags in HTML file.
7.3 Enabling in Browser:
- Usually enabled; can be toggled in browser settings.
7.4 JS Placement:
- Inside head or before </body>
7.5 Variables & Data Types:
- var, let, const
- Types: Number, String, Boolean, Object, Array
7.6 DOM (Document Object Model):
- JS can read/write page content.
- Methods: getElementById, querySelector
7.7 Control Flow:
- Use if, else if, else
7.8 Conditions:
Website Design - Lecture Notes
- Evaluate true/false: if(x > 10) {...}
7.9 Loops:
- for, while, do...while
7.10 Functions:
- function greet() { alert("Hello!"); }
7.11 Interaction:
- prompt("Enter name"), alert("Hello"), confirm("Are you sure?")
7.12 Objects:
- Group of key-value pairs.
- Example:
const car = {make:"Toyota", model:"Yaris", year:2023};
