In this Saturday’s class, workshop instructor Maritza Wu introduced students to the basics web technology techniques and how to create simple website. Maritza also taught what is the HTML code, how to write HTML code using a text editor notepad, and how to run a HTML code through an internet browser. At the end, Maritza showed a more advanced text editor such as Atom, how to install Atom, and how to use Atom.
1 – Web Technology 网页技术
The World Wide Web –www (万维网)
The World Wide Web (WWW) is a network of online content that is formatted in HTML and accessed via HTTP. The term refers to all the interlinked HTML pages that can be accessed over the Internet.
万维网（WWW）是一种通过互联网访问的，由许多互相连接的超文本以 HTML 格式设置并可以通过 HTTP 访问的系统。 该术语是指可以通过 Internet 访问的所有相互链接的HTML 页面。
The World Wide Web is most often referred to simply as “the Web.”
万维网最普遍被简称为“网络”。
The Internet – 互联网
The Internet, sometimes called simply “the Net,” is a worldwide system of computer networks – a network of networks in which users at any one computer can, if they have permission, get information from any other computer (and sometimes talk directly to users at other computers).
Using the Internet, computers connect and communicate with each other, primarily using the TCP/IP (Transmission Control Protocol / Internet Protocol). Think of TCP/IP as a book of rules, a step-by-step guide that each computer uses to know how to talk to another computer.
互联网，有时简称为“网”，是世界范围的计算机网络系统即一种网络的网络，其中任何一台计算机上的用户都可以在获得许可的情况下从任何其他计算机上获取信息（有时还可以直接与其它计算机的用户对话）。
计算机之间使用网络来连接并彼此沟通，这个过程主要是通过 TCP / IP（传输控制协议/ 网际协议）来完成连接和通信。 大家可以将 TCP / IP 视为一本规则手册，这是每台计算机了解如何与另一台计算机通信的逐步分解指南。
ISPs (Internet service providers) 互联网服务提供商
ISPs (Internet service providers), the companies that provide Internet service and connectivity, also follow these rules. The ISP provides a bridge between your computer and all the other computers in the world, which are all a part of the Internet. The ISP uses the TCP/IP protocols to make computer-to-computer connections possible and transmit data between them. When
connected to an ISP, you are assigned an IP address, which is a unique address given to your computer or network and allows it to be found while on the Internet.
提供互联网（Internet）服务和连接的互联网服务提供商（ISP）也遵循这些规则。 ISP 为您的计算机与世界上所有其他计算机之间提供桥梁，这些计算机都是互联网 (Internet) 的一部分。 ISP 使用 TCP / IP 协议使计算机之间的连接成为可能，并在它们之间传输数据。当连接到 ISP 时，会为您分配一个 IP 地址，这是分配给您的计算机或网络的唯一地址， 这个 IP 可以在 Internet 上被识别并找到。
URL (Uniform Resource Locator) – 统一资源定位符
Abbreviated as URL, a Uniform Resource Locator is a way of identifying the location of a file on the internet. They’re what we use to open not only websites, but also to download images, videos, software programs, and other types of files that are hosted on a server.
统一资源定位器（Uniform Resource Locator）是 URL 的缩写，一种用于标识文件在Internet 上的位置的方法。 它们不仅是我们用来打开网站的工具，而且还可以用来下载图像，视频，软件程序和服务器上托管的其他类型的文件。
Opening a local file on your computer is as simple as double-clicking it, but to open files on remote computers, like web servers, we must use URLs so that our web browser knows where to look. For example, opening the HTML file that represents the web page explained below, is done by entering it into the navigation bar at the top of the browser you’re using.
在您的计算机上打开本地文件就像双击它一样简单，但是要在远程计算机（例如网络服务器）上打开文件，我们必须使用 URL，以便我们的 Web 浏览器知道在哪里查找。 例如， 打开代表如下网页的 HTML 文件的方法是将其输入到您使用的浏览器顶部的导航栏中。
Uniform Resource Locators are most commonly abbreviated as URLs but they’re also called
website addresses when they refer to URLs that use the HTTP or HTTPS protocol.
统一资源定位符最通常缩写为 URL，但是当它们涉及到使用 HTTP 或 HTTPS 协议的 URL
时，它们也称为网站地址。
URL is usually pronounced with each letter spoken individually (i.e. u – r – l, not earl). It used to be an abbreviation for Universal Resource Locator before being changed to Uniform Resource Locator.
• URL 的读音方式通常以每个字母单独来读（即 u-r-l 而不是尔哦）。 在更改为“统一资源定位器”之前，它曾经是“通用资源定位器”的缩写
Examples of URLs – 网址示例
You’re probably used to entering in URL, like this one for accessing Google’s website: 您可能已经习惯于输入 URL，例如用于访问 Google 网站的 URL： https://www.google.com
Web Server and Hosting – 网络服务器和托管
Server hosting refers to the outsourcing of an organization’s server placement and platform to a third-party Managed Hosting Provider (MSP). A client uses the Internet to connect to data and applications on a managed server and pays a recurring fee to the hosting provider.
服务器托管是指将组织的服务器位置和平台外包给第三方托管托管提供商（MSP）。 客户端使用 Internet 连接到托管服务器上的数据和应用程序，并向托管服务提供商支付经常性费用。
HTML and CSS
HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages and Web Applications.
HTML（超文本标记语言）和 CSS（级联样式表）是构建 Web 页面的两项核心技术。HTML 为各种设备提供页面的结构，为 CSS 提供（视觉和听觉的）布局。 与图形和脚本一起，HTML 和 CSS 是构建网页和 Web 应用程序的基础。
What is HTML? 什么是 HTML？
HTML is the language for describing the structure of Web pages. HTML gives web designer the means to:
HTML 是用于描述网页结构的语言。 HTML 使 Web 设计人员可以：
• Publish online documents with headings, text, tables, lists, photos, etc.
发布带有标题，文本，表格，列表，照片等的在线文档。
• Retrieve online information via hypertext links, at the click of a button.
单击一个按钮，通过超文本链接检索在线信息。
• Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
设计用于以远程服务来进行交易的表格，还可以用于搜索信息，进行预订，订购产品等。
• Include spread-sheets, video clips, sound clips, and other applications directly in their documents.
将电子表格，视频剪辑，声音剪辑和其他应用程序直接包括在其文档中
What is CSS? 什么是 CSS？
Cascading Style Sheet, CSS, is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be linked externally to the HTML file or used internally in the HTML file. The separation of HTML from CSS makes it easier to maintain sites and share style sheets across pages. This is referred to as the separation of structure (or: content) from presentation.
级联样式表 CSS 是用于描述 Web 页面如何呈现的语言，包括颜色，布局和字体。 它使人 们可以将页面适应不同类型的设备，例如大屏幕，小屏幕或打印机。 CSS 独立于 HTML， 可以在外部链接到 HTML 文件，也可以在 HTML 文件内部使用。 HTML 与 CSS 的分离使维护站点和跨页面共享样式表变得更加容易。 这称为结构（或内容）与呈现方式的分离。
Text Editor – 文本编辑器
A text editor is program that allows you to open, view, and edit plain text files. Unlike word processors, text editors do not add formatting to text, instead focusing on editing functions for plain text. Text editors are used by a wide variety of people, for a wide variety of purposes.
文本编辑器是允许您打开，查看和编辑纯文本文件的程序。 与文字处理程序不同，文本编辑器不向文本添加格式，而是专注于纯文本的编辑功能。 出于各种目的，文本编辑器已被许多人使用。
Editing HTML and CSS code can be done without any specific tools. In fact, if you have a simple text editor, you are good to go. However, just because you can do something doesn’t mean it is the best way to do it – and that applies to web development as well.
无需任何特定工具即可完成 HTML 和 CSS 代码的编辑。 实际上，如果您有一个简单的文本编辑器，那就太好了。 但是，仅仅因为您可以做某事并不意味着这是最好的方法-而且这也适用于 Web 开发。
Atom by GitHub
Atom by Github is the best editor for JavaScript if you are looking for something customizable and easy to use. It has a built-in package manager for installing new packages or start creating your own within this cool tool.
如果您正在寻找可定制且易于使用的工具，则 Github 的 Atom 是 JavaScript 的最佳编辑器。它具有内置的软件包管理器，用于安装新软件包或在此炫酷工具中开始创建自己的软件包
2 – Introduction to HTML – HTML 简介
2.1. Web Technology – 网络技术
Structure – 结构体
Many webpages act like electronic versions of documents such as Newspapers.
Think about the stories you read in a newspaper: for each story, there will be a headline, some text, and possibly some images. If the article is a long piece, there may be subheadings that split the story into separate sections or quotes from those involved. Structure helps readers understand the stories in the newspaper.
Structure is a way to build a webpage to make it easier for the reader to understand what he is reading. HTML code describes the structure of webpages.
许多网页的行为就像报纸的电子版本。
想想您在报纸上读到的故事：每个故事都会有一个标题，一些文字和图片。如果文章很长，则可能会有子标题将故事分成独立的部分或引用的内容。量好的结构有助于读者理解报纸上的故事。
结构是一种构建网页的方式，以使读者更容易理解自己正在阅读的内容。HTML 代码描述了网页的结构。
The HTML code – HTML 代码
The HTML code is made up of characters that live inside angled brackets which are called HTML elements. Elements are usually made up of two tags: an opening tag and a closing tag.
HTML 代码由位于尖括号内的字符组成，这些字符称为 HTML 元素。元素通常有两个标签构成：开始标签和结束标签。
Each HTML element tells the browser something about the information that sits between its opening and closing tags.
每个 HTML 元素都会告诉浏览器有关其开始标记和结束标记之间的信息。
Basic HTML elements – 基本 HTML 元素
The basics HTML elements are: 基本的 HTML 元素是：
1. The opening <html> tag element indicates that anything between it and a closing </html> tag is HTML code.
开头的<html>标记元素表示与结尾的</ html>标记之间的任何内容都是 HTML 代码
2. A <head> element contains information about the page such as title. <head>
元素包含有关页面的信息，例如标题
3. The contents of the <title> element are either shown in the top of the browser, above where you usually type in the URL of the page you want to visit, or on the tab for that page (if your browser uses tabs to allow you to view multiple pages at the same time).
<title>元素的内容显示在浏览器顶部，通常键入您要访问的页面的 URL，如果您的浏览器使用选项卡允许您同时查看多个页面，<title>元素的内容会在该页面的选项卡上显示。
4. The <body> tag indicates that anything between it and the closing tag </body> should be inside the main browser window.
<body>标签指示它和结束标签</ body>之间的所有内容都应位于主浏览器窗口内。
5. A paragraph of text appears between these <p> and </p> tags.
在这些<p>和</ p>标记之间会出现一段文本。
Headings elements – 标题元素
HTML has six levels of headings: HTML 具有六个标题级别：
• <h1>is used for main headings.
<h1> 用于主要标题
• <h2> is used for subheadings.
<h2>用于子标题。
• If there are further sections under the subheadings then the <h3>element is used, and so on…
如果在子标题下还有其他部分，则使用<h3>元素，依此类推…
Exercises) Creating your first webpage 练习）创建第一个网页
Activity 1 we are going to create our first app view using HTML and check our code through google Chrome browser.
活动 1 我们将使用 HTML 创建我们的第一个应用程序视图，并通过Google Chrome 浏览器检查代码。
Steps: 步骤：
1. We start by writing the HTML code using Atom.
我们首先使用 Atom 编写 HTML 代码。
2. In Atom, open a new file and save it with your last name and the file extension .html. Make sure that you save the file in your local drive or computer Desktop.
在 Atom 中，打开一个新文件，并将其保存为以您的姓氏加文件扩展名.html 为名字的文件。确保将文件保存在本地驱动器或计算机桌面中。
3. The first line that we write in an html file is <html> tag to declare the html file. One of the great thing about Atom is that when you type a tag name, it will automatically build a basic code structure of the code. Write html and click enter and Atom will create the following code:
我们在 html 文件中写的第一行是<html>标记，用于声明 html 文件。 Atom 的一大优点是， 当您键入标签名称时，它将自动构建代码的基本代码结构。编写 html 并单击 enter，
Atom 将创建以下代码：
The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag and it specifies the rules for the markup language, so that the browsers render the content correctly.
<！DOCTYPE>声明必须是 HTML 文档中位于<html>标记之前的第一件事，并且它声明标记语言的规则，以便浏览器正确呈现内容。
The attribute lang indicates the language and the value en means English. This line specifies that the html code is based in English.
属性 lang 表示语言，值 en 表示英语。 此行指定 html 代码为英文。
The attribute dir indicates the direction of the text and the value ltr indicates that the text will be display from left-to-right.
属性 dir 指示文本的方向，值 ltr 指示文本将从左至右显示。
Metadata is data (information) about data. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be processed through the machine (computer).
元数据是有关数据的数据（信息）。<meta>标记提供有关 HTML 文档的元数据。元数据将不会显示在页面上，而是通过计算机（计算机）进行处理
Meta elements are typically used to specify page description, keywords, author of the document, last modified and other metadata.
元数据通常用于指定页面描述，关键字，文档作者，最后修改的元数据和其它元数据。
UTF-8 is the Unicode character sets from 1 to 4 bytes long. UTF-8 can represent any character in the Unicode standard. UTF-8 is backwards compatible with ASCII and the encoding for e-mail and web pages.
UTF-8 是 1 到 4 个字节长的 Unicode 字符集。UTF-8 可以表示 Unicode 标准中的任何字符。UTF-8
向后兼容 ASCII 以及电子邮件和网页的编码。
For app view development, it is an important to add the following line:
对于应用程序视图开发，重要的是添加以下行：
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
The “viewport” is the user’s visible area of a web page. It varies with the device, and will be smaller on a mobile phone than on a computer screen. “viewport” element gives the browser instructions on how to control the page’s dimensions and scaling.
“viewport”是用户在网页上的可见区域。 它随设备的不同而不同，在手机上会比在计算机屏幕上小。“ viewport”元素为浏览器提供了有关如何控制页面尺寸和缩放比例的说明。
The “width=device-width” part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
“ width = device-width”部分将页面的宽度设置为跟随设备的屏幕宽度（视设备而定）。
The “initial-scale=1.0” part sets the initial zoom level when the page is first loaded by the browser.
“ initial-scale = 1.0”部分设置浏览器首次加载页面时的初始缩放级别。
Once we have the <head> element sets, we can use some tags in the <body>. Most of the tags that we use in <body> are visible in the web app. We are try to add some heading the body.
一旦有了<head>元素集，就可以在<body>中使用一些标签。 我们在<body>中使用的大多数标签在
Web 应用程序中可见。我们现在尝试添加一些标题。
HTML has six levels of headings: HTML 具有六个标题级别：
• <h1>is used for main headings. <h1>
用于主要标题
• <h2> is used for subheadings. <h2>
用于子标题。
• If there are further sections under the subheadings then the <h3>element is used, and so on…
如果在子标题下还有其他部分，则使用<h3>元素，依此类推…
To see the output of the html code, we can go to the location of our html file, and double click on html icon to open it on an internet browser.
要查看 html 代码的输出，我们可以转到 html 文件的位置，然后双击 html 图标以在 Internet 浏览器上将其打开。
The html file will open in internet browser. html 文件将在 Internet 浏览器中打开
More elements 更多元素
Paragraph 段落
The <p> tag specifies a paragraph of text. It is a block-level element and it automatically have margin before and after the tag.
<p>标记指定一段文本。 它是一个块级元素，它在标签之前和之后自动会有边距。
Bold 粗体
By enclosing words in the tags <b> and </b> we can make characters appear bold.
通过将文字包含在标签<b>和</ b>中，我们可以使字符显示为粗体。
Italic 斜体
By enclosing words in the tags <i> and </i> we can make characters appear italic.
通过将文字包含在标签<i>和</ i>中，我们可以使字符显示为斜体。
Line Breaks 换行
The browser will automatically show each new paragraph or heading on a new line. But if you wanted to add a line break inside the middle of a paragraph you can use the line break tag <br/>
浏览器将自动在新段落中显示新段落或标题。但是，如果您想在段落中间添加换行符，可以使用换行符<br/>
Horizontal Rules 水平线
To create a break between themes — such as a change of topic in a book or a new scene in a play — you can add a horizontal rule between sections using the <hr/>
要在两个主题之间创建一个休息点（例如，书中更换主题或播放剧本中的新场景），您可以使用
<hr />在各部分之间添加水平线
Strikethrough 删除线
Strikethought means to cross something out by drawing a line through it.
删除线是指通过划一条线来划掉一些东西。
The <s> element indicates something that is no longer accurate or relevant (but that should not be deleted). <s>
<s>元素表示不再准确或不相关（但不应删除）的内容。
Visually the content of an <s> element will usually be displayed with a line through the center.
在视觉上，<s>元素的内容通常以一条穿过中心的线显示。
Abbreviations and Acronyms 缩略语和首字母缩略词
If you use an abbreviation or an acronym, then the <abbr> element can be used. A title attribute on the opening tag is used to specify the full term.
如果使用缩写词或首字母缩写词，则可以使用<abbr>元素。 开始标签里的 title 属性用来指定术语的完整文字。
