04-HTML - PORTFOLIO ASSESSMENT
提示
经过允许的才会发布在此,也为了宣传。感谢,这些学员的支持。
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悦创【二维码】
![](/gzh.jpg)
AI悦创·编程一对一
AI悦创·推出辅导班啦,包括「Python 语言辅导班、C++ 辅导班、java 辅导班、算法/数据结构辅导班、少儿编程、pygame 游戏开发、Web、Linux」,全部都是一对一教学:一对一辅导 + 一对一答疑 + 布置作业 + 项目实践等。当然,还有线下线上摄影课程、Photoshop、Premiere 一对一教学、QQ、微信在线,随时响应!微信:Jiabcdefh
C++ 信息奥赛题解,长期更新!长期招收一对一中小学信息奥赛集训,莆田、厦门地区有机会线下上门,其他地区线上。微信:Jiabcdefh
方法一:QQ
方法二:微信:Jiabcdefh
![](/zsxq.jpg)
- 0
- 0
- 0
- 0
- 0
- 0