網(wǎng)頁設(shè)計(jì)制作word版(編輯修改稿)
2025-02-14 14:53 本頁面
【文章內(nèi)容簡介】 息鏈接起來的一種新型的信息管理技術(shù)。 ? 超媒體不但包括了文本內(nèi)容，還包括圖像、動(dòng)畫、聲音和視頻等。? 超鏈接就是通過超文本中的鏈接點(diǎn)（也叫“參考點(diǎn)”或“熱點(diǎn)”）建立與其他超媒體文件的鏈接，用鼠標(biāo)單擊鏈接點(diǎn)即可調(diào)出與之相鏈接的其他超媒體文件（即網(wǎng)頁）。 ? 各種信息按不同的類型以網(wǎng)頁文件的形式分別放在萬維網(wǎng)服務(wù)器上 。? 萬維網(wǎng)已經(jīng)成為當(dāng)前Internet上最受歡迎、最為流行和最新的信息檢索服務(wù)系統(tǒng)。 n 網(wǎng)站是網(wǎng)頁的集合，通常一個(gè)網(wǎng)站是由眾多不同內(nèi)容的網(wǎng)頁組成的 。n 網(wǎng)頁是網(wǎng)站的基本信息單位 ，是WWW網(wǎng)上的各個(gè)超文本文件。n 那么什么是超文本文件呢? n 超文本文件就是以超文本標(biāo)記語言書寫的。n 超文本標(biāo)記語言是由Tim BernersLee提出的WWW的描述語言，簡稱HTML（Hyper Text Markup Language），它不是編程語言，而是一種標(biāo)記語言。n HTML語言的目的是把網(wǎng)上各類計(jì)算機(jī)中的文本或圖形有機(jī)地結(jié)合起來，形成共享的整體，而用戶不必考慮具體信息是在網(wǎng)絡(luò)上的哪個(gè)位置。 HTML基本結(jié)構(gòu) n HTML命令可以說明文字、圖形、動(dòng)畫、聲音、表格、鏈接等。網(wǎng)頁就是HTML文本，它是由HTML命令組成的描述性文本。n HTML文檔屬于純文本文件，可以使用任意文本編輯器書寫，保存文件擴(kuò)展名為“htm”或“html”。一. HTML概念n 標(biāo)記 標(biāo)記是HTML的基本元素， HTML是影響網(wǎng)頁內(nèi)容顯示格式的標(biāo)記符集合，瀏覽器根據(jù)標(biāo)記符決定網(wǎng)頁的實(shí)際顯示效果，標(biāo)記分為單一標(biāo)記和成對(duì)標(biāo)記兩類。 單一標(biāo)記：如hr和br 成對(duì)標(biāo)記：如html… /html p… /p注意：多個(gè)標(biāo)記共同作用于一個(gè)對(duì)象，則標(biāo)記不需按順序書寫，也不需嚴(yán)格嵌套。如： p b 受影響的文本/p /bn 標(biāo)記的屬性 標(biāo)記規(guī)定了這是什么信息，屬性是用來描述對(duì)象特征的特性。屬性值使用雙引號(hào)括起來，屬性間無先后次序要求。格式：標(biāo)記 屬性名1=”屬性值1” 屬性名2 =”屬性值2” …受影響的內(nèi)容/標(biāo)記如：font size=”5” color=”yellow” 屬性舉例/font二、HTML基本結(jié)構(gòu)n HTML文件以html開頭，以/html結(jié)束。n HTML的結(jié)構(gòu)包括頭部（Head）和主體（Body）兩大部分 ： 頭部描述與文件相關(guān)的信息， 主體包含所要說明瀏覽器中的具體內(nèi)容。例1： 簡單的HTML文檔操作步驟： 打開Windows下記事本程序； 輸入HTML代碼和文本正文；? html? head? title 我的第一個(gè)網(wǎng)頁 /title? /head? body? 在瀏覽器中顯示的網(wǎng)頁內(nèi)容? /body? /html將文件保存為“.htm”文件第一次保存文件時(shí)會(huì)彈出“另存為”對(duì)話框。? 默認(rèn)的保存類型為文本文檔（*.txt），應(yīng)在“保存類型”中選擇“所有文件”，? 然后在“文件名”選頂中輸入文件名如：“”，? 最后按“保存”保存文件。瀏覽所設(shè)計(jì)的網(wǎng)頁 瀏覽所設(shè)計(jì)的網(wǎng)頁，可以有如下兩種方法： 第一種方法是雙擊HTML文檔圖標(biāo)。 第二種方法是雙擊瀏覽器圖標(biāo)，調(diào)出瀏覽器窗口，單擊“文件”→“打開”菜單命令，調(diào)出“打開”對(duì)話框，再從“網(wǎng)頁”文件夾中選擇html1文件，單擊“打開”按鈕，即可在瀏覽器中打開網(wǎng)頁了 。顯示結(jié)果 這一對(duì)標(biāo)記指明網(wǎng)頁的標(biāo)題，標(biāo)題顯示在瀏覽器窗口的頂端。標(biāo)題應(yīng)當(dāng)是描述性的、獨(dú)特的和相對(duì)簡潔的。 HTML文檔的第二部分，也是網(wǎng)頁中最大的部分，即正文部分，包含文檔的所有內(nèi)容，顯示在瀏覽器窗口的工作區(qū)域中。 HTML文字格式和頁面格式? HTML文檔提供了注釋功能。瀏覽器會(huì)忽略標(biāo)記中的文字而不作任何顯示。? 注釋的目的是增加文檔的可讀性，方便以后的閱讀和修改。格式： !—注釋的具體內(nèi)容二、標(biāo)題文字標(biāo)記h…/h? 標(biāo)題應(yīng)該醒目的方式顯示，格式加粗、字號(hào)大于正文。? 用來指定標(biāo)題文字的大小，可取16的整數(shù)， h1文字最大，標(biāo)題中可添加對(duì)齊屬性align，取值可為left、center、right。格式： h1 align=”center”最大的標(biāo)題/h1例2：標(biāo)題文字html head title HTML實(shí)例/title /head body h1 align=center 一級(jí)標(biāo)題 /h1 h2 align=center 二級(jí)標(biāo)題 /h2 h3 align=center 三級(jí)標(biāo)題 /h3 h4 align=center 四級(jí)標(biāo)題 /h4 h5 align=center 五級(jí)標(biāo)題 /h5 h6 align=center 六級(jí)標(biāo)題 /h6 /body/html顯示結(jié)果三、強(qiáng)制換行和不換行標(biāo)記br、nobr …/nobr? HTML無法用“Enter”、空格、“Tab”鍵調(diào)整段落格式，須使用HTML標(biāo)記換行或分段。? br放在行尾，表示強(qiáng)制換行。格式：文字br? 不換行標(biāo)記的作用是使文字不能因?yàn)樘L導(dǎo)致瀏覽器無法顯示而換行，常用于數(shù)學(xué)公式和長數(shù)字。格式： nobr 文字/nobr例3：強(qiáng)制換行和不換行標(biāo)記的使用html head title 強(qiáng)制換行和不換行標(biāo)記的使用/title /head body 新 聞br 學(xué)習(xí)園地br 讀者來信br 健amp。nbsp。amp。nbsp。amp。nbsp。amp。nbsp。康br ! 在文字之間加入4個(gè)空格 nobr請(qǐng)改變你的瀏覽器窗口的寬度，使之小于這一行的寬度，看看這個(gè)標(biāo)記的效果！/nobr /body/html顯示結(jié)果四、段落標(biāo)記p …/p? HTML分段標(biāo)記P，用來定義文檔中的一個(gè)段落。? 標(biāo)記P可看作是段落的開始，而標(biāo)記/P則可視作段落的結(jié)束。 ? 單獨(dú)一個(gè)P會(huì)添加一個(gè)空行。格式： p 這是一個(gè)段落/p p 這是一個(gè)新的段落/p例4：段落標(biāo)記的使用html head title 段落標(biāo)記的使用/title /head body p align=center這是一個(gè)居中對(duì)齊的段落/p p這是一個(gè)左對(duì)齊的段落。注意這段與上段之間的間距。/p /body/html顯示結(jié)果五、預(yù)排格式標(biāo)記per …/per? 預(yù)排格式標(biāo)記之間的內(nèi)容在瀏覽器中會(huì)按照源文件中的格式顯示。? 源文件中預(yù)排格式標(biāo)記內(nèi)的回車換行和空格格式顯示時(shí)予以保留。 格式： per 帶有預(yù)排格式的文本/per 例5：預(yù)排格式htmlheadtitleHTML實(shí)例/title/headbodyprepre標(biāo)簽是一個(gè)格式化標(biāo)簽它支持空格和換行符常用于表示程序或代碼下面為一段程序的代碼：/preprefor i = 1 to 10 print inext i/pre/body/html顯示結(jié)果六、水平線標(biāo)記hr? 網(wǎng)頁中水平線用來分隔網(wǎng)頁的不同部分，使網(wǎng)頁更加整潔美觀。水平線的樣式由該標(biāo)記的屬性參數(shù)決定。格式： hr align=”” size=”” width=”” color=”” noshadeAlign:對(duì)齊屬性。Size：線條的粗細(xì)。Width：線條的寬度，可使用像素值或屏幕百分比。Color：線條顏色，默認(rèn)黑色，英文單詞或引導(dǎo)的一個(gè)6位十六進(jìn)制數(shù)。Noshade：設(shè)定線條為平面顯示。例6：水平線標(biāo)記的使用html head title 水平線標(biāo)記的使用/title /head body p align=center水平線/p hrhr align=center size=12 width=50% color=blue hr align=left size=8 width=300 hr align=right size=10 width=350 color=red hr size=5 width=80% color=a52a2a hr size=6 noshade /body/html顯示結(jié)果七、字體格式的物理控制標(biāo)記例7：字體格式的物理控制標(biāo)記的使用htmlheadtitle HTML實(shí)例 /title/head body 參照文字（normal text）…b粗體/bp 參照文字（normal text）…i斜體/ip 參照文字（normal text）…u帶下劃線/up 參照文字（normal text）…strike帶刪除線/strikep 參照文字（normal text）…tt等寬字符same width to each character/ttp 參照文字（normal text）…big大字體/bigp 參照文字（
黨政相關(guān)相關(guān)推薦
鄂ICP備17016276號(hào)-1