《HTML第一課-認(rèn)識(shí)Web語言.ppt》由會(huì)員分享，可在線閱讀，更多相關(guān)《HTML第一課-認(rèn)識(shí)Web語言.ppt（27頁珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、第一章 Web語言,,教師：黃成 T：13980860112,,Web服務(wù)器, My Playlist Kickn Tunes BT - Satellite: nice downbeat tune. ...,,互聯(lián)網(wǎng),,,,,,你使用HyperText Markup Language(HTML)制作網(wǎng)頁，并把它們放到服務(wù)器上。,網(wǎng)頁上的HTML告訴瀏覽器如何顯示你的網(wǎng)頁。并且你的網(wǎng)頁可以在PDA或者手機(jī)上顯示。甚至可以被瀏覽器用聲音讀出來，或放大顯示。,,有無數(shù)的PC機(jī)或者其它設(shè)備使用瀏覽器連接到互聯(lián)網(wǎng)。,,,,,,,從大范圍看,,,,,我需要lounge.htm,找到，發(fā)給

2、你,服務(wù)器存放HTML文件、圖片、聲音，以及其它文件。,服務(wù)器就是一臺(tái)連接到Internet上的計(jì)算機(jī)，服務(wù)器隨時(shí)都在等待接收用戶請(qǐng)求。,瀏覽器發(fā)出請(qǐng)求：HTML頁面，或者其它資源，像圖片這些。,,,,Web服務(wù)器能干些什么,,瀏覽器能干些什么,,Web服務(wù)器,服務(wù)器提供網(wǎng)頁并將它們發(fā)送到瀏覽器,瀏覽器取得網(wǎng)頁,并且，瀏覽器顯示網(wǎng)頁,, Head First Lounge Welcome to the Head First Lounge Join us any evening for refreshing elixirs, conversation and maybe a

3、 game or two of Dance Dance Revolution. Wireless access is always provided; BYOWS (Bring your own web server). Directions Youll find us right in the center of downtown Webville. Come join us! ,總體印象,HTML,A,B,C,D,E,F,G,A,B,C,D,E,F,G,問題：,HTML就是一大堆放在文本周圍的標(biāo)記？ 瀏覽器如何顯示HTML ？ 文檔里有很多縮進(jìn)和空格，但是我們?cè)诰W(wǎng)頁上沒有看見這

4、些縮進(jìn)和空格？ 為什么需要標(biāo)記？ 如何識(shí)別一個(gè)文件是HTML文件？ 標(biāo)記看起來很笨拙，為什么不使用Word文檔格式。 如何寫注釋, Head First Lounge Welcome to the Head First Lounge Join us any evening for refreshing elixirs, conversation and maybe a game or two of Dance Dance Revolution. Wireless access is always provided; BYOWS (Bring your own web server).

5、 Directions Youll find us right in the center of downtown Webville. Come join us! ,House Blend, $1.49 A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala. Mocha Cafe Latte, $2.35 Espresso, steamed milk and chocolate syrup. Cappuccino, $1.89 A mixture of espresso, steamed milk and

6、 foam. Chai Tea, $1.85 A spicy drink made with black tea, spices, milk and honey.,我們要為咖啡店寫這樣一個(gè)HTML網(wǎng)頁,用notepad新建一個(gè)HTML文檔,Windows系統(tǒng)里，顯示文件擴(kuò)展名,問題：,為什么使用簡單文本編輯器，Dreamweaver, FrontPage and GoLive 怎么樣？ 應(yīng)該使用哪個(gè)瀏覽器： Internet Explorer, Firefox, Opera, Safari ？ 我在自己的電腦上做好了網(wǎng)頁，如何在因特網(wǎng)上瀏覽它們？,用notepad寫HTML網(wǎng)頁,將前面的所提到

7、的內(nèi)容輸入：,Starbuzz Coffee Beverages House Blend, $1.49 A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala. Mocha Cafe Latte, $2.35 Espresso, steamed milk and chocolate syrup. Cappuccino, $1.89 A mixture of espresso, steamed milk and foam. Chai Tea, $1.85 A spicy drink made with black te

8、a, spices, milk and honey.,保存寫好的網(wǎng)頁,新建文件夾,,所有文件,,在瀏覽器中查看網(wǎng)頁,通過瀏覽器的文件菜單打開，或雙擊剛才保存的文件。,Starbuzz Coffee Beverages House Blend, $1.49 A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala. Mocha Cafe Latte, $2.35 Espresso, steamed milk and chocolate syrup. Cappuccino, $1.89 A mixture of espre

9、sso, steamed milk and foam. Chai Tea, $1.85 A spicy drink made with black tea, spices, milk and honey.,加上標(biāo)簽,,,,,,,,,,,,,,,,,,,,,加上剩下的標(biāo)簽,,,,,,,Starbuzz Coffee,. . .,,,,,,,Body部分是網(wǎng)頁的主體，包含所有內(nèi)容及其結(jié)構(gòu),再一次測試,已經(jīng)有了標(biāo)題,,通過文件菜單打開或單擊刷新按鈕,,標(biāo)簽解剖,,用包圍文本的成對(duì)標(biāo)記告訴瀏覽器網(wǎng)頁的結(jié)構(gòu)。 記?。?元素 = 開始標(biāo)記 + 內(nèi)容 + 結(jié)束標(biāo)記,問題：,匹配標(biāo)記不需要放在同一行？ 為什么

10、結(jié)束標(biāo)記必須有”/”符號(hào) ？ 我發(fā)現(xiàn)某些頁中的HTML有時(shí)沒有用來匹配開始標(biāo)記的結(jié)束標(biāo)記。 是怎么回事啊？是不是忘記了寫結(jié)束標(biāo)記？ 一個(gè)元素是開始標(biāo)記+內(nèi)容+結(jié)束標(biāo)記，不能在標(biāo)記中嵌入標(biāo)記嗎？就像頭部和主體都在標(biāo)記內(nèi)？,練習(xí),為Starbuzz咖啡館網(wǎng)站添加mission.htm頁面,打開notepad 把HTML內(nèi)容輸入進(jìn)去，并保存為“mission.htm”，放到和“index.htm”同一個(gè)文件夾下。 做完以上工作后，用瀏覽器打開“mission.htm”， 做下一步前檢查你的工作,嗯，我們已經(jīng)做好了網(wǎng)頁的結(jié)構(gòu)，現(xiàn)在要集中精力改善它的外觀。,,,認(rèn)識(shí)樣式元素, Starbuzz Co

11、ffee Starbuzz Coffee Beverages House Blend, $1.49 A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala. Mocha Caffe Latte, $2.35 Espresso, steamed milk and chocolate syrup. Cappuccino, $1.89 A mixture of espresso, steamed milk and milk foam. Chai Tea, $1.85 A spicy drink

12、 made with black tea, spices, milk and honey. , ,指定網(wǎng)頁樣式,元素放置在HTML的頭部中,與其它元素一樣，元素有開始和結(jié)束標(biāo)記,Style屬性,,,,,,給Starbuzz添加樣式, body background-color: #d2b48c; margin-left: 20%; margin-right: 20%; border: 1px dotted gray; padding: 10px 10px 10px 10px; font-family: sans-serif; ,CSS使用一種和HTML截然不同的語法,,問題：,CSS看起

13、來和HTML完全不同，為什么需要兩種語言呢？ #b2b48c看起來不像一種顏色，它是土黃色？ 為什么CSS規(guī)則前邊都有個(gè)“body”？它是什么意思？,練習(xí),使用相同的樣式更新你的 “mission.htm” 頁面,要點(diǎn)：,HTML和CSS是用來創(chuàng)建網(wǎng)頁的語言。 Web服務(wù)器存儲(chǔ)并提供HTML和CSS創(chuàng)建的網(wǎng)頁。瀏覽器接收網(wǎng)頁并基于HTML和CSS顯示其中的內(nèi)容。 HTML是(HyperText Markup Language)的縮寫，用來結(jié)構(gòu)化網(wǎng)頁。 CSS是(Cascading Style Sheet) 的縮寫，用來控制HTML的外觀。 我們使用HTML來標(biāo)記內(nèi)容，用標(biāo)記提供結(jié)構(gòu)。我們稱成對(duì)的標(biāo)記和它們之間的內(nèi)容為元素。 一個(gè)元素由三個(gè)部分組成： 開始標(biāo)記 + 內(nèi)容 + 結(jié)束標(biāo)記。有些元素例外 開始標(biāo)記可以擁有屬性。如 type 、align。 結(jié)束標(biāo)記有個(gè) / ，用來區(qū)別于開始標(biāo)記。 網(wǎng)頁通常應(yīng)該有一個(gè)元素，并伴隨著一個(gè)元素和一個(gè)元素。 網(wǎng)頁信息來源于元素。 寫進(jìn)元素的內(nèi)容就是在瀏覽器中所能看見的東西。 瀏覽器忽略大多數(shù)空白。 通過在元素中輸入CSS規(guī)則，給HTML網(wǎng)頁添加CSS。 在HTML中用CSS指定每個(gè)元素的樣式。,