Download as DOCX, PDF, TXT or read online from Scribd
Download as docx, pdf, or txt
You are on page 1/ 7
(a) Fundamentals of Website Building
1. HTML Basics HTML Structure: HTML (HyperText Markup Language) is the backbone of any web page. It structures the content. Here's a basic structure of an HTML document: html Copy code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Website</title> <link rel="stylesheet" href="styles.css"> <!-- Link to external CSS --> </head> <body> <header> <h1>Welcome to My Website</h1> <nav> <ul> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header>
<main> <section id="about"> <h2>About Us</h2> <p>This is a brief description of our website.</p> </section> <section id="services"> <h2>Our Services</h2> <ul> <li>Web Design</li> <li>SEO Services</li> <li>Digital Marketing</li> </ul> </section> <section id="contact"> <h2>Contact Us</h2> <p>Email us at: <a href="mailto:[email protected]">[email protected]</a></p> </section> </main>
3. CSS (Cascading Style Sheets) CSS is used to style HTML elements. Here’s how you can style the elements: body { background-color: #f0f0f0; font-family: Arial, sans-serif; }
nav ul li a { color: white; text-decoration: none; }
main { padding: 20px; } footer { text-align: center; padding: 10px 0; background-color: #333; color: white; } 4. Embedding Multimedia Components You can embed images, videos, and audio files in your HTML: html
<img src="image.jpg" alt="Description of Image" />
<video controls> <source src="video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <audio controls> <source src="audio.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio>
5. External Widgets You can embed widgets like Google Maps or social media feeds by copying the provided embed code from those platforms. 6. Background Color and Resolution To set a background color, use CSS: css body { background-color: #f0f0f0; /* Light grey */ } Regarding print versus screen resolution, you can use media queries to style for print: @media print { body { background-color: white; /* Change background for print */ } } (b) Website Structure, Wireframes, and Mock-ups 1. Website Structure A good website structure typically follows a hierarchical model: Homepage o About Us o Services o Contact Us o Blog o FAQ 2. Wireframes Wireframes are simple sketches representing the layout of a webpage. You can use tools like Figma, Adobe XD, or even paper sketches. A wireframe for a homepage might include: Header with navigation Main content area (hero image, introductory text) Section for services Footer 3. Mock-ups Mock-ups are detailed designs that provide a realistic representation of the final product. Use design tools to create high-fidelity mock-ups, incorporating colors, fonts, and images. (c) Page Design and Layout 1. Contrast Contrast helps distinguish different sections of the website. Use contrasting colors for text and background. For example, dark text on a light background. 2. Layout Layout refers to how elements are arranged on a page. Use grids and responsive design principles to ensure a good layout on different screen sizes. CSS Flexbox and Grid are powerful tools for this. 3. Text Choose readable fonts and ensure good text size and line spacing. Use headings appropriately to create a hierarchy: css h1 { font-size: 2em; }
p{ line-height: 1.5; } 4. Links Style links to make them noticeable: css a{ color: blue; text-decoration: underline; }
a:hover { color: red; } 5. Graphics Use high-quality images and graphics. Optimize images for web use to improve loading times. You can use tools like Photoshop or online compressors. 6. User Interface Design A good UI design is intuitive. Ensure buttons are clear, forms are easy to fill out, and navigation is straightforward. 7. Responsiveness Use media queries to make your design responsive: css @media (max-width: 600px) { nav ul li { display: block; /* Stack links on small screens */ } } 8. Accessibility Ensure your website is accessible to everyone. Use semantic HTML, provide alt text for images, and ensure good color contrast. 9. Usability Conduct usability tests to see how users interact with your site. Make adjustments based on feedback. 10. User Experience (UX) UX is about creating a positive experience for the user. Ensure fast loading times, easy navigation, and relevant content.
