Web开发使用html CSS建立您自己的产品组合

Welcome! The goal of this workshop is to teach you the basics of website development. We’ll be doing this using the example of building your own personal portfolio.

欢迎！ 该研讨会的目的是教您网站开发的基础知识。 我们将以建立自己的个人投资组合为例进行此操作。

什么是Web开发？ (What is Web Development?)

The process of building websites using languages such as Javascript, Dart and even Python using certain frameworks. This workshop focuses on using HTML/CSS.

使用某些框架使用Javascript，Dart甚至Python等语言构建网站的过程。 本研讨会重点介绍如何使用HTML / CSS。

So… what is a website? It is a set of pages that can be accessed using a domain name. Examples of domain names include ‘www.google.com’ and ‘www.facebook.com’.

那么……什么是网站？ 它是一组可以使用域名访问的页面。 域名示例包括“ www.google.com ”和“ www.facebook.com ”。

How do websites work? When you type in a domain name, the browser you are using (e.g. Google Chrome) connects to a web server using an IP address which is found by translating the domain name. The web server is a computer that is connected to the internet and receives the requests for the web page from your browser. The server then sends the information back to your browser, as a HTML document, which displays the website!

网站如何运作？ 输入域名时，您正在使用的浏览器(例如Google Chrome)使用IP地址连接到Web服务器，该IP地址是通过翻译域名找到的。 Web服务器是一台连接到Internet的计算机，可从您的浏览器接收对该网页的请求。 然后，服务器将信息作为HTML文档发送回您的浏览器，从而显示网站！

Want to know more? Check it out here: https://bit.ly/cca-web-requests.

想知道更多？ 在此处查看： https : //bit.ly/cca-web-requests 。

什么是HTML和CSS？ (What is HTML & CSS?)

HTML stands for Hypertext Markup Language. Markup languages are used to differentiate the content from the structure of a webpage so the browser knows exactly what to display and how to structure it.

HTML代表超文本标记语言。 标记语言用于将内容与网页的结构区分开来，因此浏览器确切地知道要显示什么以及如何组织它。

Cascading Style Sheets (CSS) are used to describe the style of a document written in a markup language. We use CSS to format the content specified in the HTML document.

级联样式表(CSS)用于描述以标记语言编写的文档的样式。 我们使用CSS格式化HTML文档中指定的内容。

那么，什么是个人投资组合？ (Well, then what is a personal portfolio?)

Portfolios are a way to demonstrate your coding experience whilst also displaying your previous experience. The most basic portfolios are a resume that has been converted into a website. It includes your name, your previous work experience and an image of you.

作品集是一种在展示您的编码经验的同时还显示您以前的经验的方法。 最基本的投资组合是一份已转换为网站的简历。 它包括您的姓名，您以前的工作经验和您的形象。

Portfolios are a great way to add depth to your resume when applying for roles allowing you to stand out. They are also the perfect place to display any side projects you have completed!

当您申请职位以使自己脱颖而出时，投资组合是增加简历深度的好方法。 它们也是展示您已完成的所有辅助项目的理想场所！

If you want to see some cool examples of portfolios have a look at this: https://www.awwwards.com/websites/portfolio/

如果您想查看一些很酷的投资组合示例，请查看以下网址 ： https : //www.awwwards.com/websites/portfolio/

入门 (Getting Started)

We’ll be using VSCode for this workshop. Below are instructions on how to set up VSCode for the best experience.

在本次研讨会中，我们将使用VSCode。 以下是有关如何设置VSCode以获得最佳体验的说明。

1. Install VSCode — https://code.visualstudio.com/docs/setup/setup-overview

   安装VSCode- https: //code.visualstudio.com/docs/setup/setup-overview

2. Download the ‘Open In Browser’ plugin — https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser

   下载“在浏览器中打开”插件-https: //marketplace.visualstudio.com/items? itemName = techer.open-in-browser

3. This plugin allows you to run the website by left-clicking on the HTML file and selecting ‘Open in default browser’ (MAC Shortcut is ⌥ B)
   该插件可让您通过左键单击HTML文件并选择“在默认浏览器中打开”来运行网站(MAC快捷键为B)

4. [Optional] Customise VS code using the following plugins — https://code.visualstudio.com/docs/languages/html, https://code.visualstudio.com/docs/languages/css

   [可选]使用以下插件来自定义VS代码-https: //code.visualstudio.com/docs/languages/html，https : //code.visualstudio.com/docs/languages/css

5. Having your resume on hand and some images will make designing your website a lot easier
   备有简历和一些图片，可以使您的网站设计更加轻松

Portfolio.html (portfolio.html)

This is where your HTML code goes :)

这是您HTML代码去的地方:)

设置文件 (Setting up the file)

First, create a file called “portfolio.html”. Then, add a declaration to the file so the browser knows to expect a HTML file.

首先，创建一个名为“ portfolio.html”的文件。 然后，在文件中添加一个声明，以便浏览器知道期望使用HTML文件。

<!DOCTYPE html> <! -- your code will go here --></html>

Let’s start off by adding a heading. HTML has specific tags that allow you to add headings, they range from <h1>, …., <h6>.

让我们从添加标题开始。 HTML具有允许您添加标题的特定标记，它们的范围从<h1>，....，<h6>。

新增文字 (Adding text)

We can add a Heading 1 (the largest heading) using the code below:

我们可以使用以下代码添加标题1(最大标题)：

<h1> The Computing and Commerce Association </h1>

Next, we’ll add a short paragraph. We can do this by using the <p></p> tag.

接下来，我们将添加一小段。 我们可以使用<p> </ p>标记来实现。

<p> The Computing and Commerce Association aims to “Connect the professionals of today with the professionals of tomorrow”. We are dedicated to providing value-adding opportunities for our members. </p>

图片 (Images)

We’ve got a heading and some information, but it feels like we’re missing something. Let’s add an image.

我们有一个标题和一些信息，但感觉就像我们遗漏了一些东西。 让我们添加一个图像。

HTML allows you to add an image using the <img> tag which contains a source attribute (src) that contains a pathway to the image and alternative text (alt) attribute that allows you to describe the image for SEO and accessibility.

HTML允许您使用<img>标记添加图像，该标记包含一个源属性(src)和一个替代文本(alt)属性，该源属性(src)包含通往图像的路径，替代文本(alt)属性可用于描述该图像的SEO和可访问性。

<img src=”cca-committee.jpg” alt=”CCA Committee”>

Note: If you’ve stored the image in a different directory, be sure to use the exact path to the file.

注意：如果将图像存储在其他目录中，请确保使用文件的确切路径。

超连结 (Hyperlinks)

Hyperlinks allow us to add further information by linking to an external website, different component of the same web page or different page within the website.

超链接允许我们通过链接到外部网站，同一网页的不同组件或网站内的不同页面来添加更多信息。

<a href=”https://www.linkedin.com/company/ccamonash/"> Check us out on Linkedin </a>

新增清单 (Add a list)

Adding a list is a concise way of displaying information such as prior experience or skills. In this section we’ll add an unordered list. Remember to add a title to your list!

添加列表是一种显示信息的简洁方法，例如先前的经验或技能。 在本节中，我们将添加无序列表。 记住要在列表中添加标题！

<h2> What we do </h2>
<ul>
 <li> Events </li>
 <li> Weekly Newsletters </li>
 <li> Articles </li>
 <li> Social Media Marketing </li>
</ul>

Portfolio.css (portfolio.css)

设置文件 (Setting up the file)

Create a file in the same directory as portfolio.html and name it ‘portfolio.css’. Here is where we will place the code that formats the content in the html file. There are many ways to incorporate CSS into a HTML file.

在Portfolio.html所在的目录中创建一个文件，并将其命名为“ portfolio.css”。 在这里我们将放置格式化内容的代码在html文件中。 有很多方法可以将CSS合并到HTML文件中。

We’ll be using an external CSS file so first we’ll need to add a reference in the HTML file.

我们将使用外部CSS文件，因此首先需要在HTML文件中添加引用。

<link rel=”stylesheet” type=”text/css” href=”portfolio.css”>

自订文字 (Customise text)

CSS allows you to customise many different features including the font and colour of the text. To customise components, we need to be able to refer to the elements in the HTML text. We do this using a class attribute.

CSS允许您自定义许多不同的功能，包括文本的字体和颜色。 要自定义组件，我们需要能够引用HTML文本中的元素。 我们使用类属性来完成此操作。

In portfolio.css, add a class attribute to the <h1> tag.

在Portfolio.css中，将一个class属性添加到<h1>标记中。

<h1 class=”CCA”> The Computing and Commerce Association </h1>

Now, we have a way to change the font, colour and size. Adding this to the CSS file allows us to do so.

现在，我们可以更改字体，颜色和大小。 将其添加到CSS文件中可以使我们做到这一点。

.CCA {
 font-size: 40px;
 color: #ee6225;
 font-family: Arial, Helvetica, sans-serif;
}

对准 (Alignment)

CSS has many alignment attributes that allow us to position elements. To align text, we need to use the ‘text-align’ attribute.

CSS具有许多对齐属性，这些属性使我们能够定位元素。 要对齐文本，我们需要使用'text-align'属性。

.CCA {
 <! -- this code is unchanged -- >
 text-align: center;
}.description {
 font-family: Arial, Helvetica, sans-serif;
 text-align: center;
}

Aligning an image is similar. Note that we have added a ‘committee’ class name to the image.

对齐图像相似。 请注意，我们在图像上添加了“委员会”类名称。

.committee {
 display: block;
 margin-left: auto;
 margin-right: auto;
}

背景资料 (Backgrounds)

With CSS you can add backgrounds whether they be images or colours. Here, we’ll be adding a background colour.

使用CSS，您可以添加背景，无论它们是图像还是彩色。 在这里，我们将添加背景色。

The background-color can be set using words as well as HEX codes. Width and height are set to 100% to ensure the whole page is covered.

可以使用单词以及十六进制代码设置背景色。 宽度和高度设置为100％，以确保覆盖整个页面。

.body {
 background-color: antiquewhite;
 width: 100%;
 height: 100%;
}

We’ve added a <body></body> tag here to encapsulate the code. In CSS you can also refer to certain elements using the tag as we’ve done above.

我们在这里添加了<body> </ body>标记来封装代码。 在CSS中，您也可以像上面一样使用标签来引用某些元素。

<!DOCTYPE html >
 <body>
 <! --your code is here -- >
 </body>
</html>

挑战性 (Challenges)

Now you know the basics of HTML/CSS! Here are a few challenges to test yourself.

现在您已经了解了HTML / CSS的基础知识！ 这是测试自己的一些挑战。

1. Animate the images so that they scroll across the page
   对图像进行动画处理，以便它们在页面上滚动
2. Add an additional web page and nav bar
   添加其他网页和导航栏
3. Add a parallax scroll to your website
   将视差滚动条添加到您的网站

If you want to learn how to deploy your website, check out our AWS tutorial (coming soon!!).

如果您想学习如何部署网站，请查看我们的AWS教程(即将推出！)。

And… voila!! Your basic portfolio structure is done. Feel free to share your final product with us 🔥

还有……瞧！ 基本的投资组合结构已完成。 随时与我们分享您的最终产品🔥

翻译自: https://medium.com/computing-and-commerce-association/web-development-build-your-own-portfolio-using-html-css-61e598665dd3