Make a Website
Make a Website
Build a recent version of Airbnb's home page and learn the fundamentals of web development in the process.
Introduction
Web pages are created using HTML and CSS. What do these languages do?
- HTML is used to establish a page's structure. It also lets us add text, links and images.
- CSS is used to control the design and layout of the page.
Tap each button to see what happens when you add in HTML and CSS.
HTML是建立網頁的結構，而且可以加入文字與連結和圖片
CSS則是用來控制網頁設計與排版
你可以藉由切換HTML語法與增加CSS語法的網頁看出不同的差別
HTML elements
HTML elements are the building blocks of web pages.
The web page to the right is made up of a collection of HTML elements. Each element is outlined in blue and labeled with its name.
HTML elements describe each piece of content on a web page so that the web browser knows how to display it.
The next few cards will cover five common HTML elements.
HTML元素可以在網頁上區隔出不同的區塊
右圖的是由多種網頁元素所集合起來的，每種元素的輪廓以藍色區分，且標註了他們的元素名稱。
HTML元素描述了每塊網頁的內容讓瀏覽器得以顯示出來
下面幾頁將顯示出涵蓋五種常見的網頁元素
Heading elements
Headings are described by heading elements. There are six levels of heading elements: h1 to h6.
The h1 element is used to describe the main heading of the page.
<h1>稱為opening TAG 起始標記
</h1>稱為Closing TAG 結束標記
<h1>Development </h1>
h1代表著網頁的起始，而最多可以使用h1~h6共六個標記
h1使用在起始最重要的頁面上
Try it out
Change the text of the h1 element from
"Find a place to stay" to "This is the main heading"
<h1>Find a place to stay.</h1>
更改Find a place to stay.右方就會跟著改變。
<p>
Similar to a news article or a word document, headings in a web page are usually followed by paragraphs.
In HTML, paragraphs are described by paragraph elements, or p elements.
<p>就像是一個新文章或者一篇文件，起始是網頁常用於段落上的
在HTML中 文章他是用來描述一個段落的元素
Try it out
Below the h1 element, add a p element that says
Rent from people in over 34,000 cities and 192 countries.<h1>Find a place to stay.</h1>
<p>GREAT</p>
<a>
The defining feature of the Web is the presence of links. Clicking on links leads to other web pages. Thea element is used to create links.
The a element is similar to the h1 or p elements, but it has two key differences:
- First, it has an
hrefattribute which equals the website you want to link to. - Second, you get to choose the link text that users see on the page.
<a>
用於定義網頁特徵的前導連結，按連結引導至網頁 a是一個可以創造連結的元素
a元素有點類似h1或p元素，但有兩個不同點
第一
hraf屬性視同你想要連結的地方
第二
你可以決定你想要讓使用者看到怎樣的葉面
範例
<a href="www.google.com.tw">GOOGLE</a>
Try it out
First change the link address to
https://www.airbnb.com/locations. Then change the link text toLearn More.
<a href="www.goolge.com.tw">GOOGLE </a>
<img>
In addition to headings and paragraphs, a web page can have images. The img element is used to add images to a page.
The img element has an attribute inside the opening
<img> tag named src. The src attribute has the address of the image.
除了標題和段落，一個網頁可以具有圖像。 img元素用於圖像添加到頁面。
IMG元素是開放的<img>標籤命名裡面的SRC屬性。
src屬性具有圖像的地址。
<img src="網址連結">
Try it out
Change the image address to
https://goo.gl/mbnqBl.
<img src="https://goo.gl/mbnqBl">
<ul> and <li>
In addition to paragraphs and images, content can be presented as lists.
In HTML, a bulleted list is described using a ulelement. Each item in the list is placed inside an lielement.
除了段落和圖像，內容可以被呈現為列表。
在HTML中，項目符號列表中使用ulelement描述。
列表中的每個項被置於一個lielement內部。
Try it out
Change the first li element text from "Brand" to "Home". Then change the second li element text from "Browse" to "About".
<ul>
<li>Homee</li>
<li>About</li>
</ul>
<html> and <body>
Here's an example of a real web page:
- Everything inside a web page is nested inside thehtml element
- The body element contains the actual content of the web page - everything nested inside
<body>and</body>shows up in the web browser
The doctype at the start of the HTML file tells the browser which version of HTML you are using. The doctype is not an HTML element, so it doesn't have a closing tag. The doctype ensures that your web page displays consistently when its visited from different browsers.
<HTML>和<body>
這裡是一個真正的web頁面的一個例子：
嵌套thehtml元素中的內部網頁一切
主體元素包含了網頁的實際內容 - 一切內容都嵌入在<BODY>和</ body>顯示在Web瀏覽器
在HTML文件的開頭的DOCTYPE告訴它的HTML版本，您使用的瀏覽器。文檔類型不是HTML元素，所以它沒有關閉標籤。文檔類型確保您的網頁上顯示一致，當它訪問了來自不同的瀏覽器。
Comments
Post a Comment