Apakah penampilan halaman web itu indah sangat tergantung pada tata letaknya. Paragraf besar teks muncul di halaman, yang biasanya direncanakan dalam segmen, dan ada divisi yang sangat ketat untuk istirahat garis. Bagian ini dimulai dengan detail paragraf, sehingga pembaca dapat menggunakan tag untuk memproses paragraf besar teks secara bebas setelah belajar.
Teks dan paragraf di halaman htmlMelalui studi bab sebelumnya, pembaca memiliki fondasi yang relatif solid dalam pengaturan kinerja keseluruhan halaman web. Namun, pembaca tidak hanya ingin mengekspresikan teks di halaman web, tetapi juga ingin mengetik dan memodifikasi teks di halaman web. Bab ini akan mempelajari tata letak sederhana, modifikasi, menggulir teks dan hyperlink teks. Hyperlink ada di mana -mana dalam pengembangan situs web dan menjadi fokus halaman web.
Saat mempelajari bab ini, buat direktori bernama Bab3 di D:/Web/Direktori, pindahkan file dari bab sebelumnya ke D:/Web/Bab3, dan buat klasifikasi. Bab ini terus membuat file sampel di D:/ Web/ Direktori, untuk memfasilitasi pengujian file sampel dengan IIS.
- Catatan: Bab -bab berikut akan diperlakukan sama dan tidak akan diulang. Misalnya, file dalam Bab 4 diklasifikasikan sebagai D:/ Web/ Bab4.
4.1 Paragraf Paragraf dan Breaking GarisApakah penampilan halaman web itu indah sangat tergantung pada tata letaknya. Paragraf besar teks muncul di halaman, yang biasanya direncanakan dalam segmen, dan ada divisi yang sangat ketat untuk istirahat garis. Bagian ini dimulai dengan detail paragraf, sehingga pembaca dapat menggunakan tag untuk memproses paragraf besar teks secara bebas setelah belajar.
4.1.1 Segmen paragraf besar teksCukup gunakan tag <p> </p> yang umum digunakan untuk segmentasi teks, yaitu, gunakan awal paragraf dan gunakan akhir paragraf. Beberapa halaman web dihilangkan saat tersegmentasi, yaitu, mereka digunakan sebagai tag tunggal, karena tag <p> di awal paragraf berikutnya berarti akhir dari paragraf sebelumnya.
-Catatan: Penulis tidak merekomendasikan menggunakan <p> sebagai tag tunggal, karena kode ini tidak standar dan rawan kesalahan.
Buat file halaman web di D:/ Web/ Direktori, bernama P.htm, dan tulis kode seperti yang ditunjukkan pada kode 4.1.
Kode 4.1 Pengaturan Segmen: P.htm
<Html>
<head>
<Title> Pengaturan Segmen </iteme>
</head>
<body>
<p> Film dua mingguan: "Infernal Affairs Three: The Ultimate Untrayrupted" Komentar Topik </p>
<p> Ini baru saja dimulai setelah akhir </p>
<p> Pada akhir 2002, mitos dimulai. 2003 Musim Gugur dan Musim Dingin, menuju klimaks dan Ultimate. "Urusan Infernal" berarti bahwa ia mewarisi filosofi Buddhis, dan bahwa terang dan gelap, kelangsungan hidup dan kepunahan, keberadaan dan ketiadaan terjerat dengan cara yang beragam, dan berantakan dengan cara yang mengejutkan, yang juga merupakan proses pengayaan dan persatuan. Ada penyebab, ada hasil, dan ada dosa, ada nasib. Keindahan situasi dan penampilan terletak pada batas kata dan interpretasi. Itu tidak dapat diungkapkan, juga tidak bisa diam, dan itu tergantung satu sama lain. Suara hati selalu ada, mempertanyakan diri sendiri dan waktu dan ruang. Ini adalah waktu terbaik, ini adalah waktu terburuk, dan orang -orang di hampir setiap era mengatakan itu. Namun, "vimalakirti sutra: bab ketujuh dari pandangan semua kehidupan" mengatakan: tanpa keterikatan, tidak ada asal. Mulai dari kata-kata dan perbuatan tubuh, melalui tingkat yang tak terkatakan, kami awalnya mencapai keadaan pandangan diri, yang pada akhirnya tidak lebih dari sikap bertahan hidup. Menurut pendapat saya, Liu Jianming, Chen Yongren, Han Chen, Huang Zhicheng, Ni Yongxiao, Lu Qichang, Yang Jinrong, Shen Cheng dan yang lainnya sebenarnya adalah figur cermin dalam takdir mereka. Mereka semua dapat melihat diri mereka sendiri dari satu sama lain, bertarung, meledak, tenggelam, dan menyebar, seolah -olah mereka adalah bencana dan kehidupan yang bengkok, sehingga mereka adalah urusan neraka. </p>
<p> Gu Zhun mengatakan dari idealisme hingga empirisme, Wang Xiaobo berkata waspada terhadap tiran dan pahlawan, siapa pahlawan? Darimana mereka berasal? Jadi bagaimana jika mereka datang? Apakah kita masih menginginkan pahlawan di zaman kita? Ketika saya mengedit forum E ini, saya merasa sedikit lega. Dari teks, kita dapat melihat bahwa semua orang berpikir. Bagaimanapun, kami bukan lagi pengikut buta. Menurut pendapat saya, hiburan tidak pernah hanya hiburan itu sendiri. Anda dapat melihat dunia dari setetes air, bunga, dan sebutir pasir. Apa yang kita pikirkan dalam sebuah film ditakdirkan untuk menjadi lebih, dan pemahaman tidak terbatas. Masing -masing dari kita merupakan dunia ini, dan kita memiliki bagian tidak peduli apakah dunia itu baik atau buruk. Masing -masing dari kita memiliki kehidupan kita sendiri, baik kekuatan dan kelemahan kita, yang merupakan dasar untuk kemajuan umum kita. </p>
</body>
</html>
Masukkan http: //localhost/p.htm di bilah alamat browser, dan efek penelusuran ditunjukkan pada Gambar 4.1.
Gambar 4.1 Pengaturan Segmentasi
Melalui segmen tag <p> </p>, tata letak teks dari segmen besar diatur.
4.1.2 Tambahkan spasi ke teksJika Anda melihat lebih dekat pada Gambar 4.1, segmentasi pada gambar terasa agak canggung karena tidak ada ruang karakter di awal setiap segmen.
- Deskripsi: Menurut kebiasaan menulis Cina, baris pertama paragraf harus memiliki 2 karakter Cina.
Saya telah mempelajari bab sebelumnya bahwa tidak mungkin ditampilkan pada halaman dengan hanya mengetuk bilah ruang dengan keyboard dalam kode HTML. HTML menggunakan 1 karakter ruang (karakter ruang Inggris). Karena 1 karakter Cina menempati lebar dua karakter bahasa Inggris, tambahkan 4 & nbsp; Karakter ke awal baris pertama paragraf, dan memodifikasi kode P.htm seperti yang ditunjukkan pada kode 4.2.
Kode 4.2 Pengaturan Karakter Ruang: P.htm
<Html>
<head>
<Title> Pengaturan Segmen </iteme>
</head>
<body>
<p> Film dua mingguan: "Infernal Affairs Three: The Ultimate Untrayrupted" Komentar Topik </p>
<p> Ini baru saja dimulai setelah akhir </p>
<p> & nbsp; & nbsp; & nbsp; & nbsp; Pada akhir 2002, mitos itu dimulai. 2003 Musim Gugur dan Musim Dingin, menuju klimaks dan Ultimate. "Urusan Infernal" berarti bahwa ia mewarisi filosofi Buddhis, dan bahwa terang dan gelap, kelangsungan hidup dan kepunahan, keberadaan dan ketiadaan terjerat dengan cara yang beragam, dan berantakan dengan cara yang mengejutkan, yang juga merupakan proses pengayaan dan persatuan. Ada penyebab, ada hasil, dan ada dosa, ada nasib. Keindahan situasi dan penampilan terletak pada batas kata dan interpretasi. Itu tidak dapat diungkapkan, juga tidak bisa diam, dan itu tergantung satu sama lain. Suara hati selalu ada, mempertanyakan diri sendiri dan waktu dan ruang. Ini adalah waktu terbaik, ini adalah waktu terburuk, dan orang -orang di hampir setiap era mengatakan itu. Namun, "vimalakirti sutra: bab ketujuh dari pandangan semua kehidupan" mengatakan: tanpa keterikatan, tidak ada asal. Mulai dari kata-kata dan perbuatan tubuh, melalui tingkat yang tak terkatakan, kami awalnya mencapai keadaan pandangan diri, yang pada akhirnya tidak lebih dari sikap bertahan hidup. Menurut pendapat saya, Liu Jianming, Chen Yongren, Han Chen, Huang Zhicheng, Ni Yongxiao, Lu Qichang, Yang Jinrong, Shen Cheng dan yang lainnya sebenarnya adalah figur cermin dalam takdir mereka. Mereka semua dapat melihat diri mereka sendiri dari satu sama lain, bertarung, meledak, tenggelam, dan menyebar, seolah -olah mereka adalah bencana dan kehidupan yang bengkok, sehingga mereka adalah urusan neraka. </p>
<p> & nbsp; & nbsp; & nbsp; & nbsp; gu zhun mengatakan dari idealisme ke empirisme, Wang Xiaobo mengatakan waspada terhadap tiran dan pahlawan, siapa pahlawan? Darimana mereka berasal? Jadi bagaimana jika mereka datang? Apakah kita masih menginginkan pahlawan di zaman kita? Ketika saya mengedit forum E ini, saya merasa sedikit lega. Dari teks, kita dapat melihat bahwa semua orang berpikir. Bagaimanapun, kami bukan lagi pengikut buta. Menurut pendapat saya, hiburan tidak pernah hanya hiburan itu sendiri. Anda dapat melihat dunia dari setetes air, bunga, dan sebutir pasir. Apa yang kita pikirkan dalam sebuah film ditakdirkan untuk menjadi lebih, dan pemahaman tidak terbatas. Masing -masing dari kita merupakan dunia ini, dan kita memiliki bagian tidak peduli apakah dunia itu baik atau buruk. Masing -masing dari kita memiliki kehidupan kita sendiri, baik kekuatan dan kelemahan kita, yang merupakan dasar untuk kemajuan umum kita. </p>
</body>
</html>
Masukkan http: //localhost/p.htm di bilah alamat browser, dan efek penelusuran ditunjukkan pada Gambar 4.2.
Gambar 4.2 Pengaturan karakter ruang
Paragraf ini awalnya terbentuk dan ruang telah diungkapkan. Pembaca dapat menambahkan karakter ruang untuk menguji paragraf.
4.1.3 Mengatur istirahat garis teks dan bukan jeda garisGambar 4.1 sepertinya tidak ada masalah. Ketika teks mencapai batas browser, itu akan secara otomatis membungkus garis. Namun, ketika lebar browser disesuaikan, posisi garis teks pecah juga berubah sesuai, dan format tampaknya cukup membingungkan. Untuk menstandarkan format, pembaca harus menggunakan tag tunggal untuk memaksa istirahat garis saat menulis kode. Sebaliknya, bagian -bagian yang tidak perlu dibungkus disertakan dengan tag ganda <obr> </obr>. Ubah Kode P.htm seperti yang ditunjukkan pada Kode 4.3.
Kode 4.3 Kontrol Line Break: P.htm
<Html>
<head>
<Title> Pengaturan Segmen </iteme>
</head>
<body>
<p> Film dua mingguan: "Infernal Affairs Three: The Ultimate Untrayrupted" Komentar Topik </p>
<p> Ini baru saja dimulai setelah akhir </p>
<p> & nbsp; & nbsp; & nbsp; & nbsp; Pada akhir 2002, mitos itu dimulai. 2003 Musim Gugur dan Musim Dingin, menuju klimaks dan Ultimate. <r /> <obr> Urusan infernal adalah untuk mewarisi filosofi Buddhis, dan terang dan gelap, kelangsungan hidup dan kepunahan, keberadaan dan ketiadaan terjerat dengan cara yang beragam, dan hancur berantakan dengan cara yang mengejutkan. Ini juga merupakan proses pengayaan dan persatuan. Ada penyebab, ada hasil, dan ada dosa, ada nasib. Keindahan situasi dan penampilan terletak pada batas kata dan interpretasi. Itu tidak dapat diungkapkan, juga tidak bisa diam, dan itu tergantung satu sama lain. Suara hati selalu ada, mempertanyakan diri sendiri dan waktu dan ruang. <obr> Ini adalah waktu terbaik, ini adalah waktu terburuk, dan orang -orang di hampir setiap era mengatakan demikian. Namun, "vimalakirti sutra: bab ketujuh dari pandangan semua kehidupan" mengatakan: tanpa keterikatan, tidak ada asal. </bobr> dari kata-kata dan perbuatan tubuh, dan melalui tingkat yang tak terkatakan, kami awalnya mencapai keadaan pandangan diri, yang pada akhirnya tidak lebih dari sikap bertahan hidup. Menurut pendapat saya, Liu Jianming, Chen Yongren, Han Chen, Huang Zhicheng, Ni Yongxiao, Lu Qichang, Yang Jinrong, Shen Cheng dan yang lainnya sebenarnya adalah figur cermin dalam takdir mereka. Mereka semua dapat melihat diri mereka sendiri dari satu sama lain, bertarung, meledak, tenggelam, dan menyebar, seolah -olah mereka adalah bencana dan kehidupan yang bengkok, sehingga mereka adalah urusan neraka. </p>
<p> & nbsp; & nbsp; & nbsp; & nbsp; gu zhun mengatakan dari idealisme ke empirisme, Wang Xiaobo mengatakan waspada terhadap tiran dan pahlawan, siapa pahlawan? Darimana mereka berasal? Jadi bagaimana jika mereka datang? Apakah kita masih menginginkan pahlawan di zaman kita? Ketika saya mengedit forum E ini, saya merasa sedikit lega. Dari teks, kita dapat melihat bahwa semua orang berpikir. Bagaimanapun, kami bukan lagi pengikut buta. Menurut pendapat saya, hiburan tidak pernah hanya hiburan itu sendiri. Anda dapat melihat dunia dari setetes air, bunga, dan sebutir pasir. Apa yang kita pikirkan dalam sebuah film ditakdirkan untuk menjadi lebih, dan pemahaman tidak terbatas. Masing -masing dari kita merupakan dunia ini, dan kita memiliki bagian tidak peduli apakah dunia itu baik atau buruk. Masing -masing dari kita memiliki kehidupan kita sendiri, baik kekuatan dan kelemahan kita, yang merupakan dasar untuk kemajuan umum kita. </p>
</body>
</html>
Masukkan http: //localhost/p.htm di bilah alamat browser, dan efek penelusuran ditunjukkan pada Gambar 4.3.
Gambar 4.3 Kontrol istirahat garis
Dari contoh ini, bagian yang terkandung dalam <obr> </obr> tidak akan dibungkus secara otomatis kecuali ada bungkus yang dipaksakan.
4.1.4 Atur Alignment TeksTeks dalam paragraf perlu diselaraskan secara berbeda di beberapa titik, dan penyelarasan default dibiarkan. Atribut Alignment dari tag <p> selaras. Atur nilai align ke kiri, kanan atau tengah untuk mencapai perataan kiri, kanan dan tengah. Ubah Kode P.htm seperti yang ditunjukkan pada Kode 4.4.
Kode 4.4 Kontrol Penyelarasan: P.htm
<Html>
<head>
<Title> Pengaturan Segmen </iteme>
</head>
<body>
<p> Film dua mingguan: "Infernal Affairs Three: The Ultimate Untrayrupted" Komentar Topik </p>
<p> Ini baru saja dimulai setelah akhir </p>
<p align = center> & nbsp; & nbsp; & nbsp; & nbsp; Pada akhir 2002, mitos itu dimulai. 2003 Musim Gugur dan Musim Dingin, menuju klimaks dan Ultimate. "Urusan Infernal" berarti bahwa ia mewarisi filosofi Buddhis, dan bahwa terang dan gelap, kelangsungan hidup dan kepunahan, keberadaan dan ketiadaan terjerat dengan cara yang beragam, dan berantakan dengan cara yang mengejutkan, yang juga merupakan proses pengayaan dan persatuan. Ada penyebab, ada hasil, dan ada dosa, ada nasib. Keindahan situasi dan penampilan terletak pada batas kata dan interpretasi. Itu tidak dapat diungkapkan, juga tidak bisa diam, dan itu tergantung satu sama lain. Suara hati selalu ada, mempertanyakan diri sendiri dan waktu dan ruang. Ini adalah waktu terbaik, ini adalah waktu terburuk, dan orang -orang di hampir setiap era mengatakan itu. Namun, "vimalakirti sutra: bab ketujuh dari pandangan semua kehidupan" mengatakan: tanpa keterikatan, tidak ada asal. Mulai dari kata-kata dan perbuatan tubuh, melalui tingkat yang tak terkatakan, kami awalnya mencapai keadaan pandangan diri, yang pada akhirnya tidak lebih dari sikap bertahan hidup. Menurut pendapat saya, Liu Jianming, Chen Yongren, Han Chen, Huang Zhicheng, Ni Yongxiao, Lu Qichang, Yang Jinrong, Shen Cheng dan yang lainnya sebenarnya adalah figur cermin dalam takdir mereka. Mereka semua dapat melihat diri mereka sendiri dari satu sama lain, bertarung, meledak, tenggelam, dan menyebar, seolah -olah mereka adalah bencana dan kehidupan yang bengkok, sehingga mereka adalah urusan neraka. </p>
<p align = kanan> & nbsp; & nbsp; & nbsp; & nbsp; gu zhun mengatakan dari idealisme ke empirisme, Wang Xiaobo berkata waspada terhadap tiran dan pahlawan, siapa pahlawan? Darimana mereka berasal? Jadi bagaimana jika mereka datang? Apakah kita masih menginginkan pahlawan di zaman kita? Ketika saya mengedit forum E ini, saya merasa sedikit lega. Dari teks, kita dapat melihat bahwa semua orang berpikir. Bagaimanapun, kami bukan lagi pengikut buta. Menurut pendapat saya, hiburan tidak pernah hanya hiburan itu sendiri. Anda dapat melihat dunia dari setetes air, bunga, dan sebutir pasir. Apa yang kita pikirkan dalam sebuah film ditakdirkan untuk menjadi lebih, dan pemahaman tidak terbatas. Masing -masing dari kita merupakan dunia ini, dan kita memiliki bagian tidak peduli apakah dunia itu baik atau buruk. Masing -masing dari kita memiliki kehidupan kita sendiri, baik kekuatan dan kelemahan kita, yang merupakan dasar untuk kemajuan umum kita. </p>
</body>
</html>
Masukkan http: //localhost/p.htm di bilah alamat browser, dan efek penelusuran ditunjukkan pada Gambar 4.4.
Gambar 4.4 Kontrol Penyelarasan
4.1.5 Menambahkan pembagi horizontalHTML menyediakan pembagi horizontal untuk memodifikasi paragraf, yang dapat dengan mudah digunakan dalam banyak kesempatan tanpa gambar tambahan. Label pembagi horizontal adalah label tunggal <hr />, yang menempati satu baris secara default.
Buat file halaman web di d:/ web/ direktori, bernama hr.htm, dan tulis kode seperti yang ditunjukkan pada kode 4.5.
Kode 4.5 Pengaturan Baris Divider: hr.htm
<Html>
<head>
<title> Pengaturan garis pembagi </iteme>
</head>
<body>
<p align = center> Tinjau lagu -lagu Kanton yang mulia di adegan musik </p>
<hr />
<p> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Lagu mana yang merupakan lagu Kanton paling awal masih kontroversial. Pada tahun 1973, anggota Suster Flower, Xian Dula menyanyikan lagu tema dengan nama yang sama untuk serial TV "Hidden and Crystal" yang dibuat oleh Gu Jiahui. Lagu ini juga merupakan lagu tema drama Kanton pertama di industri musik Hong Kong. Pada tahun yang sama, Adam Cheng yang masih baru juga membintangi drama TVB "Smoky Rain" dan menyanyikan lagu tema dengan nama yang sama. Lagu tema dengan nama yang sama dari film populer "The Two Stars" dinyanyikan oleh Xu Guanjie pada tahun 1974 adalah bom di industri musik, menjadi lagu Cina pertama yang diputar di radio BBC di Inggris. Itu terkenal pada waktu itu dan yang paling dikenal oleh semua orang untuk asal -usul lagu -lagu Kanton. </p>
</body>
</html>
Masukkan http: //localhost/hr.htm di bilah alamat browser, dan efek penelusuran ditunjukkan pada Gambar 4.5.
Masih kontroversial lagu mana yang merupakan lagu Kanton paling awal. Pada tahun 1973, Sipstick Suster Hua Cheng Zhongxian Dula menyanyikan lagu tema dengan nama yang sama untuk serial TV "Hidden and Crystal" yang dibuat oleh Gu Jiahui. Lagu ini juga merupakan lagu tema drama Kanton pertama di industri musik Hong Kong. Pada tahun yang sama, Adam Cheng, yang adalah seorang pemula, juga membintangi drama TVB "Smoky Rain" dan menyanyikan lagu tema dengan nama yang sama. Lagu tema dengan nama yang sama dari film hit "The Two Stars" dinyanyikan oleh Xu Guanjie pada tahun 1974 adalah bom di industri musik. Itu menjadi lagu Cina pertama yang diputar di radio BBC di Inggris. Itu terkenal pada waktu itu dan paling dikenal oleh semua orang untuk asal usul Kanton.
Gambar 4.5 Pengaturan garis pembagi
Tag <hr /> sederhana dapat mewujudkan pembagi, dengan mudah memodifikasi tata letak paragraf untuk membuatnya lebih indah. Namun, untuk acara aplikasi yang berbeda, gaya garis tunggal default jelas tidak dapat memenuhi persyaratan. Beberapa atribut tag <hr /> menyelesaikan masalah ini. Atribut yang umum digunakan termasuk lebar, ukuran, align, warna dan judul. Lebar adalah pengaturan lebar. Unit default dari nilai atribut adalah piksel. Persentase juga dapat digunakan untuk mewakili proporsi ruang yang ditempati oleh pembagi. Ukuran dapat dipahami sebagai ketebalan atau tinggi pembagi, dan unit default dari nilai atribut sama dengan lebar. Align adalah Alignment, mirip dengan Align <p>. Warna adalah warnanya, dan berbagai warna pembagi diatur sesuai dengan kebutuhan. Atribut judul tidak banyak digunakan, dan prompt konten dari nilai atribut muncul ketika kursor pemirsa melayang di atas pembagi.
- Deskripsi: Penyelarasan default <hr /> terpusat. Unit default atribut lebar dan tinggi HTML adalah piksel, dan umumnya tidak ada unit identifikasi yang diperlukan. Namun, unit harus diidentifikasi dalam atribut gaya.
<hr /> Ada atribut lain yaitu noshade. Ketika pembagi tidak memiliki set warna dan ukuran tertentu ditetapkan, pembagi terlihat cekung tiga dimensi dan memiliki bayangan. Jika properti Noshade digunakan, pembagi akan menjadi monokrom. Ubah kode HR.htm seperti yang ditunjukkan pada kode 4.6.
Kode 4.6 Pengaturan Gaya Pembagi: HR.htm
<Html>
<head>
<title> Pengaturan garis pembagi </iteme>
</head>
<body>
Tetapkan lebar 300 piksel dan pembagi yang selaras dengan kanan: <br />
<HR Width = 300 Align = Right />
Tetapkan lebar 50% dan pembagi yang selaras di tengah: <br />
<Lebar HR = 50% ALIGN = Kiri />
Atur lebar 50%, ketebalan 50 piksel dan tidak ada pembagi noshade: <br />
<Lebar HR = ukuran 50% = 50 />
Tetapkan ketebalan 50 piksel dan gunakan pembagi Noshade: <br />
<ukuran jam = 50 noshade = noshade />
Tetapkan ketebalan 50 piksel dan pembagi merah gelap: <br />
<ukuran jam = 50 warna = 770000/>
Atur ketebalan 50 piksel, atur biru muda dan atur terima kasih atas kedatangan Anda! Tips untuk Divider: <br />
<ukuran jam = 50 warna = 0000cc judul = Terima kasih sudah datang! />
</body>
</html>
Masukkan http: //localhost/hr.htm di bilah alamat browser, dan efek penelusuran ditunjukkan pada Gambar 4.6.
Gambar 4.6 Pengaturan gaya dari garis pembagi