Unit.1_WD.pdf

Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 Unit:-1 (Web Design Principles and Basics of...

Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 Unit:-1 (Web Design Principles and Basics of Web Design) WEB DESIGN :- WEB DESIGN is a concept of planning, creating, updating and maintaining websites. A good web design allows the user to understand the message, contents, and ideas in the most convenient way. WEB DESIGN ELEMENTS :- 1. TEXT :- font family and type must be chosen well, clear and in readable size. 2. GRAPHICS/ILLUSTRATIONS :- must be with good quality and well arranged with the text and other elements. Infographics may be used. 3. SHAPES :- can be used to denote an enclosed boundary in the overall design. Any kind of shapes like geometric or abstract shape that will fit the user's design can be placed. 4. BACKGROUND :- or texture can help provide your website with a feeling of a surface underneath. This element must be used to bring out the content given on the website to make it look more appealing. 1  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 5. COLOR :- must blend well and complement the elements on the page. Use vibrant and bold colors that will attract but not too distracting. 6. VIDEO/AUDIO :- will help viewers easily understand what you are teaching or selling. 7. LINKS :- will allow users to connect another site or page that is related to the content of your page or site. ➔ Basic principles involved in developing a web site:- A good web design must contain elements that are not only appealing but should be functional, responsive, and useful. To create a usable and effective website, follow the basic principles of an effective web design. 1. Purpose :- Define the purpose of your website clearly. Know what goals you want to achieve (e.g., inform, sell products, entertain). 2. User-Friendly Design :- Ensure the website is easy to navigate, with intuitive information architecture and clear calls to action. 3. Responsive Design :- Design your website to be responsive, meaning it should work well on different devices and screen sizes (desktops, tablets, smartphones). 4. Performance Optimization :- Optimize your website for fast loading times. This includes minimizing file sizes (HTML, CSS, JavaScript, images), leveraging caching techniques, and using content delivery networks (CDNs). 2  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 5. Navigation and Information Architecture :- Design a clear and logical navigation structure that helps users find information easily and quickly. 6. Visual Design :- Create a visually appealing design that reflects your brand identity and resonates with your audience. 7. Security :- Implement security measures to protect user data and secure transactions (e.g., SSL certificates, encryption, secure authentication). 8. Testing and Iteration :- Conduct thorough testing across different browsers, devices, and user scenarios to identify and fix bugs, usability issues, and performance bottlenecks. ➔ Planning process :- 1. Define the Purpose and Goals :- Identify Objectives :- Understand the primary purpose of the website (e.g., informational, e-commerce, portfolio) and set clear, measurable goals. Target Audience :- Identify the target audience to tailor the content and design to their needs. 2. Research and Inspiration :- 3  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 Competitor Analysis :- Look at competitor websites to gather ideas and understand industry standards. Inspiration :- Collect design inspiration from other websites and resources to inform the visual and functional direction. 3. Content Planning :- Content Inventory :- List all the content that will be included on the website, such as text, images, videos, and interactive elements. Content Structure :- Organize content into sections and pages, creating a sitemap to outline the website’s structure. 4. Wireframing and Mockups :- Wireframes :- Create low-fidelity wireframes to outline the layout of each page. This helps visualize the structure and flow without focusing on design details. Mockups :- Develop high-fidelity mockups that include design elements, colors, and typography to give a clear idea of the final look. 5. HTML Planning :- 4  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 Semantic HTML :- Plan to use semantic HTML elements to enhance accessibility and SEO. For example, use , , , , and appropriately. Content Layout :- Decide how content will be structured in HTML, ensuring a logical and readable flow. Use headings ( to ), paragraphs (), and lists (, , ) effectively. Reusable Components :- Identify common components (e.g., navigation bar, footer, contact form) that can be reused across multiple pages. 6. Design and Development :- Responsive Design :- Plan for responsive design to ensure the website looks good on all devices. Use to control the layout on mobile devices. Cross-Browser Compatibility :- Ensure the website works across different browsers by testing and using fallbacks for unsupported features. 7. SEO and Accessibility :- SEO Best Practices :- Plan to include SEO best practices such as descriptive tags, meta descriptions, and the use of attributes for images. Accessibility :- Ensure the website is accessible to all users by using proper HTML elements, such as for form inputs and ARIA roles for interactive elements. 8. Development Workflow :- 5  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 Code Organization :- Plan how the HTML, CSS, and JavaScript files will be organized. Use a consistent naming convention and directory structure. Version Control :- Use version control (e.g., Git) to manage changes and collaborate with other developers. 9. Testing and Quality Assurance :- Testing :- Plan for thorough testing, including functional testing, usability testing, and performance testing. Test across different devices and browsers. Feedback :- Collect feedback from stakeholders and users to identify any issues or areas for improvement. 10. Launch and Maintenance :- Deployment :- Plan the deployment process, including hosting, domain registration, and any necessary configuration. Maintenance :- Establish a plan for regular updates and maintenance to keep the website secure and up-to-date. ➔ Five Golden rules of web designing :- 1. Keep It Simple :- Make the website easy to use with a clean and simple design. 6  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 A simple site helps users find what they need quickly. 2. Be Consistent :- Use the same colors, fonts, and layout throughout the website. Consistency makes the site easier to navigate and looks more professional. 3. Responsive Design :- Design the website so it works well on phones, tablets, and computers. Many people use their phones to browse, so the site needs to look good on all devices. 4. User-Centered Design :- Think about what users need and want when designing the site. A site designed for users makes them happy and keeps them coming back. 5. Fast Loading Time :- Make sure the website opens fast. A fast site keeps users from getting frustrated and leaving. 6. Balance Text and Pictures :- Don’t put too much text or too many pictures on one page. A good mix makes the website easier to read and more enjoyable to look at. 7  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 7. Keep It Updated :- Make sure the information and design are always current. An updated site shows it’s active and trustworthy. 8. Guide Users with Buttons :- Add buttons that tell people what to do next, like “Sign Up” or “Buy Now.” Buttons help people know where to go or what to do. ➔ Designing navigation bar HTML :- A navigation bar (often called a navbar) is a section of a website that helps users move around the site by providing links to different pages or sections. It’s usually placed at the top of a webpage, so it’s easy to find and use. Key Parts of a Navigation Bar :- 1. Container ( or ) :- ○ Acts as a holder for all the links in the navigation bar. ○ It keeps the navigation links organized in one place. 2. Links () :- 8  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 ○ These are the clickable parts that take users to different pages or sections. ○ Links are how users navigate through the website. They usually have labels like "Home," "About," "Services," and "Contact" that tell users where each link will take them. 3. Separator (|) :- ○ It’s a simple line or symbol used to separate links visually. ○ Separators make it easier for users to distinguish between different links, especially when there are many of them. Example of Navigation Bar :- My Simple Website Home | About | Services | Contact Home 9  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 Welcome to the home page! About This section is about us. Services Here we describe the services we offer. Contact Contact us through this section. ➔ Page Design :- My Simple Page Welcome to My Page 10  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 Home This is the home section. About This is the about section. Contact This is the contact section. ➔ Home Page Layout :- 11  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 Example of given Image :- Page.html :- Page Layout Example 12  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 My Website Header Home About Services Contact Main Content This is the main section where the primary content of the page goes. Sidebar This is the sidebar, where additional content like links or ads might go. 13  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 Article This section is used for a single piece of content, like an article or blog post. © 2024 My Website. All rights reserved. Explanation of the Layout :- 1. :- ○ The element contains the title or introductory content for your website. In this example, it holds a heading that says "My Website Header." 2. :- ○ The element is used for the navigation bar. It contains a list of links ( and ) that help users navigate to different sections of the website, such as Home, About, Services, and Contact. 14  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 3. :- ○ The element represents a standalone section of content. In the layout, it's the main area where you might put the most important content of your page, like text or images. 4. :- ○ The element is often used for sidebars. This is where you can put extra information that complements the main content, such as links, advertisements, or additional notes. 5. :- ○ The element is used for a piece of content that stands alone, like a blog post, news article, or report. It contains content that could be distributed independently. 6. :- ○ The element is the bottom part of the page. It usually contains information like copyright notices, links to terms of service, or additional navigation links. styles.css :- body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #4CAF50; 15  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 color: white; text-align: center; padding: 10px; } nav { background-color: #333; overflow: hidden; } nav ul { list-style-type: none; margin: 0; padding: 0; } nav ul li { float: left; } nav ul li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } 16  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 nav ul li a:hover { background-color: #111; } section { float: left; width: 60%; padding: 15px; } aside { float: left; width: 30%; padding: 15px; background-color: #f4f4f4; } article { clear: both; padding: 15px; background-color: #f9f9f9; margin: 10px 0; } footer { clear: both; background-color: #333; color: white; text-align: center; padding: 10px; margin-top: 10px; 17  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 } ➔ Design Concept :- Structure :- HTML gives your site a solid foundation. It gives structure by using tags like , , , , , etc. Layout :- Organize your content in a way that makes sense. Following HTML Tags are used to design the layout. i.e. (for general sections), (for the top of the page), (for the bottom), (for navigation links), and (for sidebars). Navigation :- Navigation is how users move from one page to another within your website. i.e. (for navigation menus) and (for links). Content Organization :- Arrange text, images, and other content clearly. i.e. (for different sections of content), (for standalone content like blog posts), and (for side content). Styling with CSS :- 18  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 CSS (Cascading Style Sheets) is used to style the HTML elements. This includes colors, fonts, spacing, and layout. i.e. You use CSS to make a bar look nice with colors and hover effects. Responsiveness :- It Ensures your site works on all devices like phones, tablets, and desktops. Use tags for viewport settings and CSS media queries to adjust layout based on screen size. Accessibility :- Accessibility ensures your website can be used by as many people as possible. Use semantic HTML tags (like , , ) and add alt attributes to images for screen readers. ➔ Brief History of Internet HTML :- 1991 - HTML 1.0 :- Creator: Tim Berners-Lee. Purpose: To facilitate document sharing and linking on the World Wide Web. Features: Basic tags for headings, paragraphs, lists, and links. 1995 - HTML 2.0 :- 19  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 Standardized by: Internet Engineering Task Force (IETF). Enhancements: Introduced forms for user input, tables for data presentation, and improved text formatting. Impact: Allowed for more complex and interactive web pages. 1997 - HTML 3.2 :- Developed by: World Wide Web Consortium (W3C). New Features: Added support for scripting languages (e.g., JavaScript), style sheets (CSS), and advanced formatting options. Significance: Enabled richer web content and presentation. 1999 - HTML 4.0 :- Key Focus: Separation of content from presentation. Introduced: The Document Object Model (DOM) for better scripting and interaction, and improved support for multimedia. Improvements: New elements for layout (e.g., , ) and better support for CSS. 2000 - HTML 4.01 :- It was published, refining the 4.0 standard with minor updates and fixes. 2008 - XHTML 2.0 :- 20  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 XHTML 2.0 was proposed but never widely adopted due to its complexity and the web community's shift towards more flexible standards. The development of HTML5 began, focusing on improving support for multimedia, interactive elements, and APIs while ensuring backward compatibility with HTML4. 2014 - HTML5 :- HTML5 was officially recommended by the W3C. It included new semantic elements like , , and , as well as improved support for multimedia (audio and video tags) and graphics (canvas element). 2016 - HTML 5.1 :- It was published, incorporating minor updates and new features based on community feedback. 2017 - HTML 5.2 :- It was released, introducing further enhancements and deprecated some outdated features. ➔ What is World Wide Web :- 21  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 Concept :- The WWW is an information space where documents and other web resources are identified by URLs (Uniform Resource Locators), interlinked by hyperlinks, and accessible over the internet. Components :- ○ Web Browsers :- Software applications used to access and display web pages (e.g., Chrome, Firefox, Safari). ○ Web Servers :- Computers that host websites and deliver web pages to users' browsers upon request. ○ Hyperlinks :- Links that connect web pages and resources, enabling navigation across the web. The World Wide Web is about communication between web clients and web servers. Clients are often browsers (Chrome, Edge, Safari), but they can be any type of program or device. Servers are most often computers in the cloud. 22  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 ➔ Why create a website:- 1. Online Presence and Visibility :- Reach a Global Audience: A website allows you to reach people from all over the world, breaking geographical barriers. Availability: Websites are accessible 24/7, providing information and services even outside of business hours. 2. Information and Communication :- 23  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 Information Sharing: Websites serve as platforms to share information, whether it's about a business, a product, a service, or a personal blog. Communication: Websites can facilitate communication through contact forms, chat systems, forums, and social media integration. 3. Brand Building and Credibility :- Brand Identity: A well-designed website helps establish and reinforce your brand's identity. Professionalism: A website can lend credibility and professionalism to your business or personal brand, making it more trustworthy in the eyes of potential customers or readers. 4. Marketing and Sales :- Digital Marketing: Websites are central to digital marketing strategies, including SEO (Search Engine Optimization), content marketing, and social media marketing. E-Commerce: Websites can function as online stores, enabling businesses to sell products and services directly to customers over the internet. Lead Generation: Websites can capture leads through forms, newsletters, and special offers, aiding in customer acquisition and retention. 5. Customer Support and Engagement :- 24  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 Customer Support: Websites can offer support through FAQs, live chat, and support tickets, enhancing customer satisfaction. Engagement: Interactive elements like blogs, forums, and social media links can engage visitors and foster a sense of community. 6. Education and Learning :- Educational Resources: Websites can provide educational content, tutorials, and courses, making learning accessible to a broader audience. E-Learning Platforms: Websites can host e-learning platforms that offer online courses, certifications, and training programs. 7. Personal and Professional Development :- Portfolio: Professionals can showcase their work, skills, and achievements through a personal website or portfolio. Networking: A personal website can help in networking by providing contact information, social media links, and a platform to share ideas and projects. ➔ Web Standards :- HTML (HyperText Markup Language) :- 25  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 The standard markup language for creating web pages and web applications. HTML5 is the latest version, introducing new elements and APIs for more powerful web applications. CSS (Cascading Style Sheets) :- A style sheet language used for describing the presentation of a document written in HTML or XML. CSS3 is the latest version, adding new features such as flexbox, grid layout, and animations. JavaScript :- A programming language that enables interactive web pages. ECMAScript is the standardized version of JavaScript, with ES6 (ECMAScript 2015) being a major update that introduced many new features. HTTP/HTTPS (Hypertext Transfer Protocol/Secure) :- Protocols used for transmitting data over the web. HTTPS is the secure version of HTTP, adding encryption for data protection. DOM (Document Object Model) :- A programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. Web Standards Organizations :- 26  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 W3C (World Wide Web Consortium) :- Develops and maintains web standards, including HTML and CSS specifications. WHATWG (Web Hypertext Application Technology Working Group) :- Focuses on the continuous development of HTML and related technologies. Validation and Testing :- Purpose: Ensure adherence to web standards and identify errors. Tools: ○ Validators: Tools like the W3C Markup Validation Service for checking HTML and CSS against standards. ○ Browser DevTools: Built-in tools in browsers for debugging and optimizing web pages. ➔ Audience requirement :- 1. Identify the Target Audience :- Demographics: Determine the age, gender, location, income level, education, and occupation of your audience. 2. Conduct Audience Research :- Surveys and Questionnaires: Collect data directly from potential users to understand their preferences and requirements. 27  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 3. Develop User Personas :- Create detailed user personas to represent different segments of your target audience. Each persona should include: Name and Photo: A fictional name and photo to humanize the persona. Behavior: Online habits, preferred devices, and social media usage. 4. Define User Scenarios and Journeys :- User Scenarios: Describe specific situations in which a user might interact with your website. For example, “John wants to buy an eco-friendly product for his home.” 5. Design with the User in Mind :- Content: Create relevant and valuable content that addresses the needs and interests of your audience. This includes blogs, videos, product descriptions, and FAQs. 6. Ensure Accessibility and Usability :- Accessibility: Design the website to be accessible to all users, including those with disabilities. Follow the Web Content Accessibility Guidelines (WCAG). 7. Optimize for Performance :- Loading Speed: Ensure the website loads quickly to keep users engaged. 28  Course Code: 4040233136 Course Name: Web Designing using HTML SEMESTER: 1 Mobile Responsiveness: Design a responsive website that works well on all devices, especially mobile phones and tablets. SEO Optimization: Implement SEO best practices to improve visibility in search engine results and attract more visitors. 8. Continuous Improvement :- Analytics and Feedback: Continuously monitor website analytics and user feedback to identify areas for improvement. 29