《HTML第一課-認識Web語言.ppt》由會員分享，可在線閱讀，更多相關(guān)《HTML第一課-認識Web語言.ppt（27頁珍藏版）》請在裝配圖網(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或者手機上顯示。甚至可以被瀏覽器用聲音讀出來，或放大顯示。,,有無數(shù)的PC機或者其它設(shè)備使用瀏覽器連接到互聯(lián)網(wǎng)。,,,,,,,從大范圍看,,,,,我需要lounge.htm,找到，發(fā)給

2、你,服務(wù)器存放HTML文件、圖片、聲音，以及其它文件。,服務(wù)器就是一臺連接到Internet上的計算機，服務(wù)器隨時都在等待接收用戶請求。,瀏覽器發(fā)出請求：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就是一大堆放在文本周圍的標記？ 瀏覽器如何顯示HTML ？ 文檔里有很多縮進和空格，但是我們在網(wǎng)頁上沒有看見這

4、些縮進和空格？ 為什么需要標記？ 如何識別一個文件是HTML文件？ 標記看起來很笨拙，為什么不使用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.,我們要為咖啡店寫這樣一個HTML網(wǎng)頁,用notepad新建一個HTML文檔,Windows系統(tǒng)里，顯示文件擴展名,問題：,為什么使用簡單文本編輯器，Dreamweaver, FrontPage and GoLive 怎么樣？ 應(yīng)該使用哪個瀏覽器： 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.,加上標簽,,,,,,,,,,,,,,,,,,,,,加上剩下的標簽,,,,,,,Starbuzz Coffee,. . .,,,,,,,Body部分是網(wǎng)頁的主體，包含所有內(nèi)容及其結(jié)構(gòu),再一次測試,已經(jīng)有了標題,,通過文件菜單打開或單擊刷新按鈕,,標簽解剖,,用包圍文本的成對標記告訴瀏覽器網(wǎng)頁的結(jié)構(gòu)。 記?。?元素 = 開始標記 + 內(nèi)容 + 結(jié)束標記,問題：,匹配標記不需要放在同一行？ 為什么

10、結(jié)束標記必須有”/”符號 ？ 我發(fā)現(xiàn)某些頁中的HTML有時沒有用來匹配開始標記的結(jié)束標記。 是怎么回事??？是不是忘記了寫結(jié)束標記？ 一個元素是開始標記+內(nèi)容+結(jié)束標記，不能在標記中嵌入標記嗎？就像頭部和主體都在標記內(nèi)？,練習(xí),為Starbuzz咖啡館網(wǎng)站添加mission.htm頁面,打開notepad 把HTML內(nèi)容輸入進去，并保存為“mission.htm”，放到和“index.htm”同一個文件夾下。 做完以上工作后，用瀏覽器打開“mission.htm”， 做下一步前檢查你的工作,嗯，我們已經(jīng)做好了網(wǎng)頁的結(jié)構(gòu)，現(xiàn)在要集中精力改善它的外觀。,,,認識樣式元素, 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é)束標記,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ī)則前邊都有個“body”？它是什么意思？,練習(xí),使用相同的樣式更新你的 “mission.htm” 頁面,要點：,HTML和CSS是用來創(chuàng)建網(wǎng)頁的語言。 Web服務(wù)器存儲并提供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來標記內(nèi)容，用標記提供結(jié)構(gòu)。我們稱成對的標記和它們之間的內(nèi)容為元素。 一個元素由三個部分組成： 開始標記 + 內(nèi)容 + 結(jié)束標記。有些元素例外 開始標記可以擁有屬性。如 type 、align。 結(jié)束標記有個 / ，用來區(qū)別于開始標記。 網(wǎng)頁通常應(yīng)該有一個元素，并伴隨著一個元素和一個元素。 網(wǎng)頁信息來源于元素。 寫進元素的內(nèi)容就是在瀏覽器中所能看見的東西。 瀏覽器忽略大多數(shù)空白。 通過在元素中輸入CSS規(guī)則，給HTML網(wǎng)頁添加CSS。 在HTML中用CSS指定每個元素的樣式。,