04-HTML - PORTFOLIO ASSESSMENT

AI悦创原创2024年6月24日大约 7 分钟...约 2048 字

提示

经过允许的才会发布在此，也为了宣传。感谢，这些学员的支持。

1. 简答题

Explain the difference between how HTML and CSS are used in creating a web page.

HTML（超文本标记语言）和CSS（层叠样式表）都是创建网页的重要技术，但它们的用途和功能有着明显的区别：

HTML 的作用：
- HTML 是网页内容的骨架。它用来构建和组织网页的结构。
- HTML 通过标签来定义各种内容，如段落、标题、链接和图片等。
- 每个 HTML 元素都扮演不同的结构角色，例如<p>表示段落，<a>表示超链接。
CSS 的作用：
- CSS 用于设置网页的布局和样式。
- 它可以控制 HTML 元素的颜色、字体、间距、大小、背景以及其他视觉效果。
- CSS 可以通过类、ID 或直接标签来指定样式规则，增强了样式设定的灵活性和复用性。

如何一起工作：

HTML 负责创建网页的基础结构，而 CSS 则负责美化这些结构。通过 CSS，开发者可以使网页更加美观和用户友好。
在一个典型的网页项目中，HTML文件定义了网页的基本结构和内容，CSS 文件则独立于 HTML，专注于样式和布局。这种分离使得维护和更新网页变得更加容易和高效。

简而言之，HTML 是建立网页内容和结构的基础，而 CSS 则提供了丰富的视觉表现和精细的布局控制。两者合作，共同创建出既功能齐全又外观吸引的网页。

HTML 用于构建网页的结构，而 CSS 用于设计网页的样式和布局。

What is the HTML <div> tag used for?

HTML 中的 <div> 标签用于定义网页上的一个区域或容器，通常配合 CSS 来进行布局和样式设置。

Complete the code below to add CSS to make the background of the web page orange.

<html>
<head>
   Click here to add CSS code
</head>
<body>
   <p>Welcome to the CSS guide</p>
</body>
</html>

答案：

<html>
<head>
   <!-- 添加 CSS 代码 -->
    <style>
        body {
            background-color: orange;
        }
    </style>
</head>
<body>
   <p>Welcome to the CSS guide</p>
</body>
</html>

What is meant by ‘responsive design’?

“响应式设计”是指一种网页设计方法，它使得网页能够根据不同的设备（如桌面、平板和手机）的屏幕尺寸和方向自动调整布局、大小和交互，以提供最佳的用户体验。这通常通过使用灵活的网格布局、图片和 CSS 媒体查询来实现，使网站内容能够在任何设备上都看起来和工作良好。

How would you change this line of HTML code to make it responsive?

<img src=“moon.jpg” width=750px>

答案：

<img src="moon.jpg" style="max-width: 100%; height: auto;">

Give three guidelines to follow for good website design.

为了实现良好的网站设计，可以遵循以下三个指导原则：

易用性和可访问性： 设计应确保所有用户，包括残疾人士，都能轻松访问和导航。使用清晰的导航菜单，合理的布局，以及确保键盘可访问性和屏幕阅读器友好性。
视觉吸引力和一致性： 使用和谐的颜色方案和一致的字体风格来增强网站的视觉吸引力。保持设计元素和布局在整个网站中的一致性，这有助于提升品牌形象并增强用户体验。
优化速度和相应性： 确保网站能够快速加载，并在各种设备和浏览器上表现良好。使用响应式设计技术来适应不同屏幕尺寸，同时优化图像和代码以减少加载时间。这些做法不仅能提升用户满意度，还有助于搜索引擎优化。
Give two advantages of using a template in web design.
时间效率和成本效率： 使用模板可以大幅度缩短网站开发的时间，因为模板提供了现成的设计和代码基础。这对于预算有限或需要快速上线的项目尤其有益。同时，使用模板通常比雇用设计师从头开始设计要便宜得多。
专业性和一致性：模板通常由专业设计师制作，确保了设计的质量和视觉吸引力。使用这样的模板，即使没有专业设计背景的用户也可以创建出看起来专业的网站。此外，模板提供的一致性布局有助于保持网站各页面间的风格统一，从而提升用户体验。

2. Assessment

I have edited basic HTML to change the content of a web page
I have written basic HTML to create a web page of my own
I have added DIV tags in order to separate areas of a web page
I have added a footer section to a web page
I can change basic CSS to alter the appearance of a web page
I have used basic CSS to control the appearance of my own web page
I have used CSS to control the appearance of DIV sections of HTML
I have specified a width for my web page and images
I have changed the width setting to percentages in order to make the page responsive
I have created more than one web page
I have created links to my other web pages and tested that they work
I have added links to external web pages and tested them

Evidence of my website:

Copy and Paste in the HTML SOURCE CODE for each page of your WEBSITE

INDEX.HTML

PAGE01.HTML

PAGE02.HTML

3. Spreadsheet modelling Assessment Portfolio

What is a computer model？

计算机模型是一种在计算机上创建的数学模型，用于模拟或预测复杂系统的行为和特性。这种模型通常基于现实世界数据和科学理论，通过算法和计算公式来模拟现实情况。计算机模型广泛应用于多个领域，如气候变化预测、经济分析、工程设计、生物医学研究等，以帮助研究者和决策者理解可能的未来发展趋势和结果。通过计算机模拟，可以在不实际构建或实验的情况下测试假设和策略，节约成本并减少风险。

Give two examples of real-life situations or systems where computer models are used.

计算机模型在现实生活中的应用极其广泛，这里有两个具体的例子：

气候变化预测：科学家使用计算机模型来模拟地球气候系统的行为，这包括温度、降水、风速等变量的变化。这些模型帮助研究者理解气候变化的长期趋势，并预测全球变暖等现象对环境的潜在影响。通过这些模型，政府和组织能够制定应对策略，比如减少温室气体排放或适应未来气候条件的变化。
交通流量模拟：在城市规划和交通工程领域，计算机模型被用来模拟和分析道路交通流量，包括车辆的运行速度、交通拥堵情况以及交通事故的可能位置。这些信息可以帮助交通工程师设计更有效的道路布局和信号系统，以优化交通流量，减少拥堵和提高道路安全。

公众号：AI悦创【二维码】

AI悦创·编程一对一

AI悦创·推出辅导班啦，包括「Python 语言辅导班、C++ 辅导班、java 辅导班、算法/数据结构辅导班、少儿编程、pygame 游戏开发、Web、Linux」，全部都是一对一教学：一对一辅导 + 一对一答疑 + 布置作业 + 项目实践等。当然，还有线下线上摄影课程、Photoshop、Premiere 一对一教学、QQ、微信在线，随时响应！微信：Jiabcdefh

C++ 信息奥赛题解，长期更新！长期招收一对一中小学信息奥赛集训，莆田、厦门地区有机会线下上门，其他地区线上。微信：Jiabcdefh

方法一：QQ

方法二：微信：Jiabcdefh