Elementary Web Authoring

ICT Core C4 - Interactive Study Guide

Navigate through the learning modules

Basic Concepts

Understand HTML, CSS, and JavaScript fundamentals

HTML Tags & Elements

Master HTML markup and structure

Web Design

Learn UI/UX principles and website structure

Publishing Websites

Steps to publish and host your website

Interactive Quiz

Test your knowledge with 15 questions

Flashcards

Review key terms with 3D flashcards

Exam Practice

Practice with past exam questions

Basic Components of a Web Page

What Makes a Web Page?

A web page is built using three core technologies that work together to create the interactive experiences we see on the internet.

Component	Purpose	Example
HTML	Uses markups to describe the structure of web pages	<h1>Title</h1>
CSS	Describes the appearance of HTML elements	color: blue; font-size: 20px;
JavaScript	Adds dynamic programs to HTML elements	button.onclick = function() {...}

HTML5 Enrichment

HTML5 is the latest version of HTML, introducing new semantic elements, multimedia support, and improved accessibility features. It allows developers to create more structured and meaningful web pages.

Cross-Platform Nature of HTML

HTML documents can be viewed on any device with a web browser - computers, tablets, smartphones, and even smart TVs. This cross-platform compatibility makes HTML the universal language of the web, ensuring your content can reach anyone, anywhere.

HTML Tags & Elements

Master the building blocks of web pages

Basic HTML Structure

Every HTML document follows a standard structure:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <!-- Content goes here -->
  </body>
</html>
                    

- <!DOCTYPE html>: Declares the document type

- <html>: Root element containing all content

- <head>: Contains metadata and page title

- <body>: Contains visible page content

Text Tags

HTML provides various tags for structuring text content:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>Paragraph text</p>
<br> <!-- Line break -->
<hr> <!-- Horizontal rule -->
<pre>Preformatted text</pre>
<!-- This is a comment -->
                    

<h1> to <h6>: Headings from largest to smallest
<p>: Paragraph
<br>: Line break
<hr>: Horizontal line
<pre>: Preformatted text (preserves spaces and line breaks)

Text Formatting

<b>Bold text</b>
<i>Italic text</i>
<u>Underlined text</u>
<sup>Superscript</sup>
<sub>Subscript</sub>

<!-- Nested tags -->
<p><b><i>Bold and italic</i></b></p>
                    

HTML Attributes & Styling

Attributes provide additional information about HTML elements:

<p style="font-family: Arial; font-size: 16px; 
          text-align: center; color: #0000FF; 
          background-color: #FFFF00;">
  Styled paragraph
</p>
                    

RGB Color Codes: Colors are specified using hexadecimal values (#RRGGBB) where RR=Red, GG=Green, BB=Blue. Each ranges from 00 to FF (0-255).

Lists

<!-- Unordered List -->
<ul type="disc">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<!-- Ordered List -->
<ol type="1">
  <li>First</li>
  <li>Second</li>
</ol>
                    

List types: disc (•), circle (○), square (■) for <ul>; 1, A, a, I, i for <ol>

Tables

<table border="1" style="padding: 10px; border-spacing: 5px;">
  <tr>
    <th colspan="2">Header</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td rowspan="2">Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
  </tr>
</table>
                    

<table>: Defines the table
<tr>: Table row
<th>: Table header cell
<td>: Table data cell
colspan: Merge cells horizontally
rowspan: Merge cells vertically

Images

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

src: Image file path or URL
alt: Alternative text (important for accessibility)
width/height: Image dimensions in pixels

Hyperlinks

<!-- External link -->
<a href="https://www.example.com">Visit Example</a>

<!-- Internal anchor -->
<a name="section1"></a>
<a href="#section1">Go to Section 1</a>

<!-- Image link -->
<a href="page.html">
  <img src="button.png" alt="Click here">
</a>
                    

Frames (iframes)

<iframe src="https://www.example.com" 
        width="600" height="400">
</iframe>
                    

iframes allow you to embed another HTML page within your current page.

Website Structure & Design

Website Architecture

Three common website structures:

Linear: Pages in sequence (A → B → C)
Hierarchical: Tree structure with main page and subpages
Matrix: Interconnected pages allowing multiple navigation paths

UI vs UX Design

User Interface (UI): The graphic design and appearance of a web page, including visual elements like buttons, icons, and layouts that users interact with.

User Experience (UX): The overall impression and experience users have when browsing the website. Good design considers UX first, then improves it through UI.

Wireframes

Wireframes are simple sketches or diagrams showing the layout and structure of a web page before actual design begins. They help plan content placement and navigation flow.

Navigation Design

Navigation Bar: Menu allowing users to access different pages
Sitemap: Visual diagram showing website structure and page relationships

Cross-Platform & Responsive Design

Websites should work seamlessly across different devices (desktop, tablet, mobile) and screen sizes. Responsive design automatically adjusts layout and content to fit the viewing device.

Readability Factors

Use lists and tables to organize information clearly
Include multimedia (images, videos) to enhance content
Choose readable fonts and appropriate colors
Use simple, uncluttered backgrounds

Data Input Methods

Text boxes: For free-form text entry
Drop-down lists: Select from predefined options
Sliders: Choose values within a range
Date pickers: Select dates from calendar interface

Web Accessibility

Making websites usable for everyone, including people with disabilities:

Font size adjustment options
Alternative text (alt) for images
Multi-language support
Keyboard navigation support
High contrast color schemes

Color Theory

RGB Color Model: Colors are created by mixing Red, Green, and Blue light. Each component ranges from 0-255 (or 00-FF in hexadecimal).

Color Wheel: Shows relationships between colors. Harmonious color combinations include complementary colors (opposite on wheel), analogous colors (adjacent), and triadic colors (evenly spaced).

Publishing Websites

Web Authoring Tools

Web authoring tools like Wix provide user-friendly interfaces for creating websites without extensive coding knowledge. They offer drag-and-drop editors, templates, and built-in hosting services.

Publishing Steps

Create: Design and build your website content
Edit: Refine and improve your pages
Preview: Test the website before publishing
Publish: Make the website live on the internet

After publishing, you can continue to edit and improve your website. Remember to save and republish for updates to appear online.

Web Hosting

Web hosting services store your website files on servers connected to the internet, making them accessible to visitors worldwide 24/7. Choose reliable hosting with good uptime, speed, and support.

Interactive Quiz

Test your knowledge with 15 questions

Flashcards

Review key terms with 3D flashcards

Exam Practice

Practice with exam-style questions

made with

`, tc: `Welcome!` }, { en: `Welcome!`, tc: `Welcome!` }, { en: `Welcome!`, tc: `Welcome!` }, { en: `Welcome!`, tc: `Welcome!` } ], correct: 0, explanation: { en: `The element contains the visible content of the page. "Welcome!" should be placed inside tags.`, tc: `元素包含頁面的可見內容。"Welcome!"應該放在標記內。` } }, { question: { en: `How many different colours can we choose with RGB colour codes?`, tc: `使用RGB顏色代碼我們可以選擇多少種不同的顏色？` }, options: [ { en: `256 colours`, tc: `256種顏色` }, { en: `16,777,216 colours (256³)`, tc: `16,777,216種顏色（256³）` }, { en: `1,000 colours`, tc: `1,000種顏色` }, { en: `65,536 colours`, tc: `65,536種顏色` } ], correct: 1, explanation: { en: `RGB uses 256 values (0-255) for each of the three color channels (Red, Green, Blue), giving us 256 × 256 × 256 = 16,777,216 possible colours.`, tc: `RGB對三個顏色通道（紅色、綠色、藍色）中的每一個使用256個值（0-255），給我們256×256×256=16,777,216種可能的顏色。` } }, { question: { en: `What do the six numbers after "#" in a colour code represent?`, tc: `顏色代碼中"#"後面的六個數字代表什麼？` }, options: [ { en: `Three pairs of hexadecimal digits for Red, Green, and Blue`, tc: `紅色、綠色和藍色的三對十六進制數字` }, { en: `Six separate colour values`, tc: `六個獨立的顏色值` }, { en: `Brightness levels`, tc: `亮度級別` }, { en: `Transparency values`, tc: `透明度值` } ], correct: 0, explanation: { en: `The six hexadecimal digits represent three pairs: RR (Red), GG (Green), BB (Blue), each ranging from 00 to FF.`, tc: `六個十六進制數字代表三對：RR（紅色）、GG（綠色）、BB（藍色），每個範圍從00到FF。` } }, { question: { en: `Which table attributes can be set in HTML?`, tc: `在HTML中可以設置哪些表格屬性？` }, options: [ { en: `border, padding, border-spacing, colspan, rowspan`, tc: `border、padding、border-spacing、colspan、rowspan` }, { en: `Only border and padding`, tc: `只有border和padding` }, { en: `Only colspan and rowspan`, tc: `只有colspan和rowspan` }, { en: `color and font-size only`, tc: `只有color和font-size` } ], correct: 0, explanation: { en: `HTML tables support multiple attributes including border (outline), padding (cell spacing), border-spacing (space between cells), colspan (merge columns), and rowspan (merge rows).`, tc: `HTML表格支持多個屬性，包括border（輪廓）、padding（單元格間距）、border-spacing（單元格之間的空間）、colspan（合併列）和rowspan（合併行）。` } }, { question: { en: `When adding an image to a web page, what information is needed?`, tc: `向網頁添加圖片時，需要什麼信息？` }, options: [ { en: `src (source path), alt (alternative text), width, height`, tc: `src（源路徑）、alt（替代文字）、width、height` }, { en: `Only src`, tc: `只有src` }, { en: `Only alt text`, tc: `只有alt文字` }, { en: `Only width and height`, tc: `只有width和height` } ], correct: 0, explanation: { en: `The tag requires src (image location), and should include alt (accessibility text), width, and height for proper display and accessibility.`, tc: `標記需要src（圖片位置），並應包括alt（無障礙文字）、width和height以便正確顯示和無障礙訪問。` } }, { question: { en: `Why do some emails use HTML format?`, tc: `為什麼有些電子郵件使用HTML格式？` }, options: [ { en: `To include formatting, images, links, and better visual presentation`, tc: `包含格式、圖片、鏈接和更好的視覺呈現` }, { en: `To make emails load faster`, tc: `使電子郵件加載更快` }, { en: `To reduce file size`, tc: `減少文件大小` }, { en: `To improve security`, tc: `提高安全性` } ], correct: 0, explanation: { en: `HTML emails allow rich formatting, embedded images, clickable links, and styled content, providing a better visual experience than plain text.`, tc: `HTML電子郵件允許豐富的格式、嵌入式圖片、可點擊的鏈接和樣式化的內容，提供比純文本更好的視覺體驗。` } }, { question: { en: `Which design features help ethnic minorities access websites?`, tc: `哪些設計特徵幫助少數族裔訪問網站？` }, options: [ { en: `Multi-language support and translation options`, tc: `多語言支援和翻譯選項` }, { en: `Larger fonts only`, tc: `只有更大的字體` }, { en: `More images`, tc: `更多圖片` }, { en: `Brighter colors`, tc: `更亮的顏色` } ], correct: 0, explanation: { en: `Multi-language support and translation features are essential for making websites accessible to ethnic minorities who may not speak the primary language.`, tc: `多語言支援和翻譯功能對於使網站對可能不會說主要語言的少數族裔可訪問至關重要。` } }, { question: { en: `What is the correct basic HTML document structure?`, tc: `正確的基本HTML文檔結構是什麼？` }, options: [ { en: ``, tc: `` }, { en: ``, tc: `` }, { en: ``, tc: `` }, { en: ``, tc: `` } ], correct: 0, explanation: { en: `A proper HTML document starts with , followed by , which contains (metadata) and (content) sections.`, tc: `正確的HTML文檔以開始，後跟，其中包含（元數據）和（內容）部分。` } }, { question: { en: `What does CSS do in web development?`, tc: `CSS在網頁開發中做什麼？` }, options: [ { en: `Describes the appearance and styling of HTML elements`, tc: `描述HTML元素的外觀和樣式` }, { en: `Creates the structure of web pages`, tc: `創建網頁結構` }, { en: `Adds interactivity to web pages`, tc: `為網頁添加互動性` }, { en: `Stores website data`, tc: `存儲網站數據` } ], correct: 0, explanation: { en: `CSS (Cascading Style Sheets) controls the visual presentation of HTML elements, including colors, fonts, layouts, and spacing.`, tc: `CSS（層疊樣式表）控制HTML元素的視覺呈現，包括顏色、字體、佈局和間距。` } }, { question: { en: `What are the benefits of drop-down lists compared to text boxes?`, tc: `與文字框相比，下拉列表的好處是什麼？` }, options: [ { en: `Predefined options, reduced errors, faster selection, consistent data`, tc: `預定義選項、減少錯誤、更快選擇、一致的數據` }, { en: `More flexible input`, tc: `更靈活的輸入` }, { en: `Larger text capacity`, tc: `更大的文字容量` }, { en: `Better for long descriptions`, tc: `更適合長描述` } ], correct: 0, explanation: { en: `Drop-down lists provide predefined options, reducing input errors, ensuring data consistency, and making selection faster than typing.`, tc: `下拉列表提供預定義的選項，減少輸入錯誤，確保數據一致性，並使選擇比打字更快。` } }, { question: { en: `Which statement about HTML is incorrect?`, tc: `關於HTML的哪個陳述是不正確的？` }, options: [ { en: `HTML can only create static pages without any interactivity`, tc: `HTML只能創建沒有任何互動性的靜態頁面` }, { en: `HTML uses tags to structure content`, tc: `HTML使用標記來構建內容` }, { en: `HTML is cross-platform`, tc: `HTML是跨平台的` }, { en: `HTML can embed images and links`, tc: `HTML可以嵌入圖片和鏈接` } ], correct: 0, explanation: { en: `This is incorrect because HTML can work with JavaScript to create interactive pages. HTML itself provides structure, but combined with CSS and JavaScript, it creates fully interactive websites.`, tc: `這是不正確的，因為HTML可以與JavaScript一起創建互動頁面。HTML本身提供結構，但與CSS和JavaScript結合，它創建完全互動的網站。` } }, { question: { en: `What are major considerations when designing websites for elderly users?`, tc: `為老年用戶設計網站時的主要考慮因素是什麼？` }, options: [ { en: `Larger fonts, high contrast, simple navigation, clear labels`, tc: `更大的字體、高對比度、簡單的導航、清晰的標籤` }, { en: `More animations and effects`, tc: `更多動畫和效果` }, { en: `Complex menu structures`, tc: `複雜的菜單結構` }, { en: `Smaller text to fit more content`, tc: `更小的文字以適應更多內容` } ], correct: 0, explanation: { en: `Elderly users benefit from larger, readable fonts, high color contrast for visibility, simple navigation without complex menus, and clear, descriptive labels.`, tc: `老年用戶受益於更大、可讀的字體、高顏色對比度以提高可見性、沒有複雜菜單的簡單導航以及清晰、描述性的標籤。` } }, { question: { en: `What is the best text color for a background of #FF0000 (red)?`, tc: `對於#FF0000（紅色）背景，最佳的文字顏色是什麼？` }, options: [ { en: `White (#FFFFFF) for maximum contrast`, tc: `白色（#FFFFFF）以獲得最大對比度` }, { en: `Black (#000000)`, tc: `黑色（#000000）` }, { en: `Yellow (#FFFF00)`, tc: `黃色（#FFFF00）` }, { en: `Orange (#FFA500)`, tc: `橙色（#FFA500）` } ], correct: 0, explanation: { en: `White text on a red background provides the highest contrast and best readability, meeting accessibility standards.`, tc: `紅色背景上的白色文字提供最高的對比度和最佳的可讀性，符合無障礙標準。` } }, { question: { en: `Where can hyperlinks lead to?`, tc: `超連結可以導向哪裡？` }, options: [ { en: `Other web pages, sections within the same page, email addresses, files`, tc: `其他網頁、同一頁面內的部分、電子郵件地址、文件` }, { en: `Only other web pages`, tc: `只有其他網頁` }, { en: `Only email addresses`, tc: `只有電子郵件地址` }, { en: `Only sections within the same page`, tc: `只有同一頁面內的部分` } ], correct: 0, explanation: { en: `Hyperlinks are versatile and can link to external websites, internal page sections (anchors), email addresses (mailto:), and downloadable files.`, tc: `超連結是多功能的，可以鏈接到外部網站、內部頁面部分（錨點）、電子郵件地址（mailto:）和可下載文件。` } } ]; const flashcardsData = [ { term: { en: `HTML`, tc: `HTML` }, definition: { en: `Hypertext Markup Language - uses tags to describe web page structure`, tc: `超文本標示語言 - 使用標記描述網頁結構` } }, { term: { en: `CSS`, tc: `CSS` }, definition: { en: `Cascading Style Sheets - describes the appearance of HTML elements`, tc: `層疊樣式表 - 描述HTML元素的外觀` } }, { term: { en: `JavaScript`, tc: `JavaScript` }, definition: { en: `Programming language that adds dynamic interactivity to web pages`, tc: `為網頁添加動態互動性的編程語言` } }, { term: { en: `Tag`, tc: `標記` }, definition: { en: `Markup code enclosed in angle brackets, like `, tc: `用尖括號括起來的標記代碼，如` } }, { term: { en: `Element`, tc: `元素` }, definition: { en: `Complete HTML component including opening tag, content, and closing tag`, tc: `完整的HTML組件，包括開始標記、內容和結束標記` } }, { term: { en: `Attribute`, tc: `屬性` }, definition: { en: `Additional information about an element, like src or alt`, tc: `關於元素的附加信息，如src或alt` } }, { term: { en: `Cross-platform`, tc: `跨平台` }, definition: { en: `Ability to work on different devices and operating systems`, tc: `在不同設備和操作系統上工作的能力` } }, { term: { en: ``, tc: `元素` }, definition: { en: `Contains metadata, title, and links to stylesheets/scripts`, tc: `包含元數據、標題和樣式表/腳本的鏈接` } }, { term: { en: ``, tc: `元素` }, definition: { en: `Contains all visible content of the web page`, tc: `包含網頁的所有可見內容` } }, { term: { en: `

to

`, tc: `

到

標記` }, definition: { en: `Heading tags from largest (h1) to smallest (h6)`, tc: `從最大（h1）到最小（h6）的標題標記` } }, { term: { en: `

`, tc: `

標記` }, definition: { en: `Paragraph tag for text content`, tc: `用於文字內容的段落標記` } }, { term: { en: `
`, tc: `
標記` }, definition: { en: `Line break tag (self-closing)`, tc: `換行標記（自閉合）` } }, { term: { en: `

`, tc: `

標記` }, definition: { en: `Horizontal rule - creates a horizontal line`, tc: `水平線 - 創建一條水平線` } }, { term: { en: `

`, tc: `標記` }, definition: { en: `Preformatted text that preserves spaces and line breaks`, tc: `保留空格和換行的預格式化文字` } },
            { term: { en: `RGB Color Code`, tc: `RGB顏色代碼` }, definition: { en: `Hexadecimal color values: #RRGGBB (00-FF for each channel)`, tc: `十六進制顏色值：#RRGGBB（每個通道00-FF）` } },
            { term: { en: ``, tc: `無序列表` }, definition: { en: `Unordered list with bullet points`, tc: `帶有項目符號的無序列表` } },
            { term: { en: ``, tc: `有序列表` }, definition: { en: `Ordered list with numbers or letters`, tc: `帶有數字或字母的有序列表` } },
            { term: { en: ``, tc: `表格` }, definition: { en: `Creates a table with rows and columns`, tc: `創建具有行和列的表格` } },
            { term: { en: `colspan & rowspan`, tc: `colspan和rowspan` }, definition: { en: `Attributes to merge table cells horizontally (colspan) or vertically (rowspan)`, tc: `水平（colspan）或垂直（rowspan）合併表格單元格的屬性` } },
            { term: { en: ``, tc: `標記` }, definition: { en: `Embeds images with src, alt, width, and height attributes`, tc: `使用src、alt、width和height屬性嵌入圖片` } },
            { term: { en: ` (Hyperlink)`, tc: `標記（超連結）` }, definition: { en: `Creates clickable links using href attribute`, tc: `使用href屬性創建可點擊的鏈接` } },
            { term: { en: ``, tc: `<iframe>標記` }, definition: { en: `Embeds another HTML page within the current page`, tc: `在當前頁面中嵌入另一個HTML頁面` } },
            { term: { en: `Navigation Bar`, tc: `導航列` }, definition: { en: `Menu allowing users to navigate between pages`, tc: `允許用戶在頁面之間導航的菜單` } },
            { term: { en: `Sitemap`, tc: `網站指南` }, definition: { en: `Visual diagram showing website structure`, tc: `顯示網站結構的視覺圖表` } },
            { term: { en: `Responsive Design`, tc: `響應式設計` }, definition: { en: `Design that adapts to different screen sizes and devices`, tc: `適應不同屏幕尺寸和設備的設計` } },
            { term: { en: `Web Accessibility`, tc: `無障礙網站設計` }, definition: { en: `Making websites usable for people with disabilities`, tc: `使殘障人士可以使用網站` } },
            { term: { en: `Wireframe`, tc: `線框稿` }, definition: { en: `Simple sketch showing page layout before design`, tc: `在設計之前顯示頁面佈局的簡單草圖` } },
            { term: { en: `UX Design`, tc: `用戶體驗設計` }, definition: { en: `Overall user experience and impression when browsing`, tc: `瀏覽時的整體用戶體驗和印象` } },
            { term: { en: `UI Design`, tc: `用戶介面設計` }, definition: { en: `Graphic design and appearance of visual elements`, tc: `視覺元素的圖形設計和外觀` } },
            { term: { en: `Readability`, tc: `可讀性` }, definition: { en: `How easily content can be read and understood`, tc: `內容可以多容易地閱讀和理解` } }
        ];

        const pastQuestionsData = [
            {
                difficulty: `basic`,
                question: { en: `Describe TWO benefits of using drop-down lists instead of text boxes for data input on web forms.`, tc: `描述在網頁表單上使用下拉列表而不是文字框進行數據輸入的兩個好處。` },
                answer: { 
                    en: `1. Reduced input errors: Drop-down lists provide predefined options, preventing users from entering invalid or incorrectly formatted data.\n2. Faster data entry: Users can quickly select from existing options rather than typing, saving time and ensuring consistency.`,
                    tc: `1. 減少輸入錯誤：下拉列表提供預定義的選項，防止用戶輸入無效或格式不正確的數據。\n2. 更快的數據輸入：用戶可以快速從現有選項中選擇而不是打字，節省時間並確保一致性。`
                },
                explanation: { 
                    en: `Drop-down lists constrain user input to valid options, improving data quality and user experience.`,
                    tc: `下拉列表將用戶輸入限制為有效選項，提高數據質量和用戶體驗。`
                }
            },
            {
                difficulty: `intermediate`,
                question: { en: `Explain the difference between User Interface (UI) design and User Experience (UX) design in web development. Give ONE example of each.`, tc: `解釋網頁開發中用戶介面（UI）設計和用戶體驗（UX）設計之間的區別。各舉一個例子。` },
                answer: { 
                    en: `UI Design: Focuses on the visual appearance and graphic elements of a website, such as buttons, colors, fonts, and layout.\nExample: Designing a visually appealing navigation bar with consistent color scheme.\n\nUX Design: Focuses on the overall user experience and how users interact with the website, ensuring it is intuitive and satisfying.\nExample: Organizing website structure so users can find information quickly with minimal clicks.`,
                    tc: `UI設計：專注於網站的視覺外觀和圖形元素，如按鈕、顏色、字體和佈局。\n例子：設計具有一致配色方案的視覺上吸引人的導航列。\n\nUX設計：專注於整體用戶體驗以及用戶如何與網站互動，確保它是直觀和令人滿意的。\n例子：組織網站結構，使用戶可以用最少的點擊快速找到信息。`
                },
                explanation: { 
                    en: `UI deals with visual design, while UX focuses on the overall user journey and satisfaction.`,
                    tc: `UI處理視覺設計，而UX專注於整體用戶旅程和滿意度。`
                }
            },
            {
                difficulty: `intermediate`,
                question: { en: `A website designer wants to ensure the website is accessible to elderly users. Suggest THREE design features that would help elderly users access the website more easily.`, tc: `網站設計師希望確保網站對老年用戶可訪問。建議三個設計特徵，以幫助老年用戶更容易訪問網站。` },
                answer: { 
                    en: `1. Larger font sizes: Use larger, readable fonts (at least 14-16px) with options to increase text size.\n2. High contrast colors: Use high contrast between text and background (e.g., black text on white background) for better visibility.\n3. Simple navigation: Create clear, straightforward navigation with descriptive labels and avoid complex menu structures.\n\nAdditional features: Clear call-to-action buttons, minimal scrolling, avoid flashing content, provide audio alternatives.`,
                    tc: `1. 更大的字體大小：使用更大、可讀的字體（至少14-16px），並提供增加文字大小的選項。\n2. 高對比度顏色：使用文字和背景之間的高對比度（例如，白色背景上的黑色文字）以提高可見性。\n3. 簡單的導航：創建清晰、直接的導航，帶有描述性標籤，避免複雜的菜單結構。\n\n其他功能：清晰的行動號召按鈕、最小滾動、避免閃爍內容、提供音頻替代。`
                },
                explanation: { 
                    en: `Elderly users benefit from larger text, high contrast, and simplified navigation to overcome potential vision and dexterity challenges.`,
                    tc: `老年用戶受益於更大的文字、高對比度和簡化的導航，以克服潛在的視力和靈活性挑戰。`
                }
            },
            {
                difficulty: `advanced`,
                question: { en: `Compare the THREE main website architecture structures (Linear, Hierarchical, and Matrix). For each structure, describe its characteristics and give ONE suitable application scenario.`, tc: `比較三種主要的網站架構結構（線性、階層式和矩陣式）。對於每種結構，描述其特徵並給出一個合適的應用場景。` },
                answer: { 
                    en: `Linear Structure:\n- Characteristics: Pages arranged in sequence (A → B → C), users follow a predetermined path.\n- Application: Online tutorials, step-by-step guides, checkout processes where users must complete steps in order.\n\nHierarchical Structure:\n- Characteristics: Tree-like structure with main page branching into categories and subcategories.\n- Application: Corporate websites, e-commerce sites with product categories, educational websites with course sections.\n\nMatrix Structure:\n- Characteristics: Interconnected pages with multiple navigation paths, users can move freely between pages.\n- Application: Wikipedia, reference websites, large content-heavy sites where users need flexible navigation between related topics.`,
                    tc: `線性結構：\n- 特徵：頁面按順序排列（A → B → C），用戶遵循預定路徑。\n- 應用：在線教程、分步指南、用戶必須按順序完成步驟的結帳流程。\n\n階層式結構：\n- 特徵：樹狀結構，主頁面分支為類別和子類別。\n- 應用：企業網站、具有產品類別的電子商務網站、具有課程部分的教育網站。\n\n矩陣式結構：\n- 特徵：具有多條導航路徑的互連頁面，用戶可以在頁面之間自由移動。\n- 應用：維基百科、參考網站、用戶需要在相關主題之間靈活導航的大型內容豐富的網站。`
                },
                explanation: { 
                    en: `Each structure serves different purposes: linear for guided processes, hierarchical for organized content, and matrix for flexible exploration.`,
                    tc: `每種結構服務於不同的目的：線性用於引導過程，階層式用於組織內容，矩陣式用於靈活探索。`
                }
            },
            {
                difficulty: `advanced`,
                question: { en: `Explain how the RGB color model works and calculate how many different colors can be represented. If a background color is #FF0000 (pure red), suggest the most appropriate text color and explain your choice considering web accessibility standards.`, tc: `解釋RGB顏色模型如何工作並計算可以表示多少種不同的顏色。如果背景顏色是#FF0000（純紅色），建議最合適的文字顏色並解釋您的選擇，考慮網頁無障礙標準。` },
                answer: { 
                    en: `RGB Color Model:\n- RGB stands for Red, Green, Blue - the three primary colors of light.\n- Each color channel has 256 possible values (0-255 in decimal, 00-FF in hexadecimal).\n- Colors are created by mixing different intensities of these three channels.\n- Total possible colors = 256 × 256 × 256 = 16,777,216 colors.\n\nFor #FF0000 (pure red) background:\n- Recommended text color: White (#FFFFFF)\n- Reasoning: White provides maximum contrast with red, ensuring readability.\n- Contrast ratio: Approximately 4:1, meeting WCAG AA standards for normal text.\n- Alternative: Very light gray (#F0F0F0) also works well.\n- Avoid: Black or dark colors have poor contrast with red; yellow is difficult to read on red.`,
                    tc: `RGB顏色模型：\n- RGB代表紅色、綠色、藍色 - 光的三原色。\n- 每個顏色通道有256個可能的值（十進制0-255，十六進制00-FF）。\n- 顏色通過混合這三個通道的不同強度創建。\n- 總可能顏色 = 256 × 256 × 256 = 16,777,216種顏色。\n\n對於#FF0000（純紅色）背景：\n- 推薦的文字顏色：白色（#FFFFFF）\n- 理由：白色提供與紅色的最大對比度，確保可讀性。\n- 對比度比率：約4:1，符合WCAG AA標準的正常文字。\n- 替代方案：非常淺的灰色（#F0F0F0）也很好用。\n- 避免：黑色或深色與紅色對比度差；黃色在紅色上難以閱讀。`
                },
                explanation: { 
                    en: `RGB combines 256 values per channel for 16.7 million colors. For red backgrounds, white text provides optimal contrast meeting accessibility standards.`,
                    tc: `RGB每個通道組合256個值，共1670萬種顏色。對於紅色背景，白色文字提供符合無障礙標準的最佳對比度。`
                }
            }
        ];

        let currentFlashcard = 0;
        let userAnswers = new Array(quizData.length).fill(null);

        function toggleTheme() {
            currentTheme = currentTheme === `light` ? `dark` : `light`;
            document.body.classList.toggle(`dark`);
            localStorage.setItem(`theme`, currentTheme);
        }

        function toggleLanguage() {
            currentLanguage = currentLanguage === `en` ? `tc` : `en`;
            localStorage.setItem(`language`, currentLanguage);
            updateLanguage();
        }

        function updateLanguage() {
            document.querySelectorAll(`[data-en]`).forEach(element => {
                if (element.tagName === `INPUT` || element.tagName === `TEXTAREA`) {
                    element.placeholder = element.getAttribute(`data-${currentLanguage}`);
                } else {
                    element.textContent = element.getAttribute(`data-${currentLanguage}`);
                }
            });
            renderQuiz();
            updateFlashcard();
            renderPastQuestions();
        }

        function scrollToSection(id) {
            const element = document.getElementById(id);
            if (element) {
                const navHeight = 80;
                const elementPosition = element.getBoundingClientRect().top + window.pageYOffset;
                window.scrollTo({
                    top: elementPosition - navHeight,
                    behavior: `smooth`
                });
            }
        }

        function toggleExpandable(index) {
            const expandables = document.querySelectorAll(`.expandable-content`);
            expandables[index].classList.toggle(`active`);
        }

        function renderQuiz() {
            const container = document.getElementById(`quizContainer`);
            container.innerHTML = ``;
            
            quizData.forEach((q, index) => {
                const questionDiv = document.createElement(`div`);
                questionDiv.className = `quiz-question`;
                questionDiv.innerHTML = `
                    <h4>${index + 1}. ${q.question[currentLanguage]}</h4>
                    <div class="quiz-options">
                        ${q.options.map((opt, i) => `
                            <div class="quiz-option" onclick="selectAnswer(${index}, ${i})" id="option-${index}-${i}">
                                ${opt[currentLanguage]}
                            </div>
                        `).join(``)}
                    </div>
                    <div id="feedback-${index}" style="margin-top: 16px; display: none;"></div>
                `;
                container.appendChild(questionDiv);
            });
        }

        function selectAnswer(questionIndex, optionIndex) {
            userAnswers[questionIndex] = optionIndex;
            const options = document.querySelectorAll(`#quizContainer .quiz-question:nth-child(${questionIndex + 1}) .quiz-option`);
            options.forEach(opt => opt.classList.remove(`selected`));
            document.getElementById(`option-${questionIndex}-${optionIndex}`).classList.add(`selected`);
        }

        function submitQuiz() {
            let score = 0;
            quizData.forEach((q, index) => {
                const options = document.querySelectorAll(`#quizContainer .quiz-question:nth-child(${index + 1}) .quiz-option`);
                const feedbackDiv = document.getElementById(`feedback-${index}`);
                
                options.forEach((opt, i) => {
                    opt.classList.remove(`correct`, `incorrect`);
                    if (i === q.correct) {
                        opt.classList.add(`correct`);
                    }
                    if (userAnswers[index] === i && i !== q.correct) {
                        opt.classList.add(`incorrect`);
                    }
                });

                if (userAnswers[index] === q.correct) {
                    score++;
                    feedbackDiv.innerHTML = `<div style="color: #22c55e; font-weight: 600;">${currentLanguage === `en` ? `Correct!` : `正確！`}</div><p>${q.explanation[currentLanguage]}</p>`;
                } else {
                    feedbackDiv.innerHTML = `<div style="color: #ef4444; font-weight: 600;">${currentLanguage === `en` ? `Incorrect` : `不正確`}</div><p>${q.explanation[currentLanguage]}</p>`;
                }
                feedbackDiv.style.display = `block`;
            });

            const resultDiv = document.getElementById(`quizResult`);
            const percentage = Math.round((score / quizData.length) * 100);
            resultDiv.innerHTML = `
                <div class="quiz-result">
                    <div class="quiz-score">${score} / ${quizData.length}</div>
                    <p>${currentLanguage === `en` ? `You scored ${percentage}%` : `你的得分是${percentage}%`}</p>
                </div>
            `;
        }

        function updateFlashcard() {
            const card = flashcardsData[currentFlashcard];
            document.getElementById(`flashcardTerm`).textContent = card.term[currentLanguage];
            document.getElementById(`flashcardDefinition`).textContent = card.definition[currentLanguage];
            document.getElementById(`flashcardCounter`).textContent = `${currentFlashcard + 1} / ${flashcardsData.length}`;
            document.getElementById(`flashcard`).classList.remove(`flipped`);
        }

        function flipCard() {
            document.getElementById(`flashcard`).classList.toggle(`flipped`);
        }

        function nextCard() {
            currentFlashcard = (currentFlashcard + 1) % flashcardsData.length;
            updateFlashcard();
        }

        function previousCard() {
            currentFlashcard = (currentFlashcard - 1 + flashcardsData.length) % flashcardsData.length;
            updateFlashcard();
        }

        function shuffleCards() {
            for (let i = flashcardsData.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [flashcardsData[i], flashcardsData[j]] = [flashcardsData[j], flashcardsData[i]];
            }
            currentFlashcard = 0;
            updateFlashcard();
        }

        function renderPastQuestions() {
            const container = document.getElementById(`pastQuestionsContainer`);
            container.innerHTML = ``;
            
            pastQuestionsData.forEach((q, index) => {
                const questionDiv = document.createElement(`div`);
                questionDiv.className = `past-question`;
                questionDiv.innerHTML = `
                    <div class="past-question-header">
                        <span class="difficulty-badge difficulty-${q.difficulty}">
                            ${currentLanguage === `en` ? 
                                (q.difficulty === `basic` ? `Basic` : q.difficulty === `intermediate` ? `Intermediate` : `Advanced`) :
                                (q.difficulty === `basic` ? `基礎` : q.difficulty === `intermediate` ? `中等` : `困難`)
                            }
                        </span>
                    </div>
                    <h4>${index + 1}. ${q.question[currentLanguage]}</h4>
                    <button class="view-answer-btn" onclick="toggleAnswer(${index})">
                        ${currentLanguage === `en` ? `View Reference Answer` : `查看參考答案`}
                    </button>
                    <div class="answer-feedback" id="answer-${index}">
                        <h5>${currentLanguage === `en` ? `Reference Answer` : `參考答案`}</h5>
                        <p style="white-space: pre-line;">${q.answer[currentLanguage]}</p>
                        <p style="margin-top: 12px;"><strong>${currentLanguage === `en` ? `Explanation:` : `解釋：`}</strong> ${q.explanation[currentLanguage]}</p>
                    </div>
                `;
                container.appendChild(questionDiv);
            });
        }

        function toggleAnswer(index) {
            const answerDiv = document.getElementById(`answer-${index}`);
            answerDiv.classList.toggle(`active`);
        }

        window.addEventListener(`scroll`, () => {
            const scrollTop = document.documentElement.scrollTop;
            const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            const progress = (scrollTop / scrollHeight) * 100;
            document.getElementById(`progressBar`).style.width = progress + `%`;

            const sections = document.querySelectorAll(`section`);
            const navItems = document.querySelectorAll(`.nav-item`);

            sections.forEach((section) => {
                const rect = section.getBoundingClientRect();
                if (rect.top <= 200 && rect.bottom >= 200) {
                    navItems.forEach(item => item.classList.remove(`active`));
                    const targetNav = Array.from(navItems).find(nav => {
                        const onclick = nav.getAttribute(`onclick`);
                        return onclick && onclick.includes(section.id);
                    });
                    if (targetNav) targetNav.classList.add(`active`);
                }
            });
        });

        if (currentTheme === `dark`) {
            document.body.classList.add(`dark`);
        }

        renderQuiz();
        updateFlashcard();
        renderPastQuestions();
        updateLanguage();
    </script>
</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpsh-oh'},{'server':'sg2plzcpnl508721'},{'dcenter':'sg2'},{'cp_id':'10940642'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>

Elementary Web Authoring

Table of Contents

Basic Concepts

HTML Tags & Elements

Web Design

Publishing Websites

Interactive Quiz

Flashcards

Exam Practice

Basic Components of a Web Page

What Makes a Web Page?

HTML5 Enrichment

Cross-Platform Nature of HTML

HTML Tags & Elements

Website Structure & Design

Website Architecture

UI vs UX Design

Wireframes

Navigation Design

Cross-Platform & Responsive Design

Readability Factors

Data Input Methods

Web Accessibility

Color Theory

Publishing Websites

Web Authoring Tools

Publishing Steps

Web Hosting

Interactive Quiz

Flashcards

Exam Practice

to

`, tc: `

到