Blogger กับ iPhone

สนุกกับการปรับแต่งตัวอักษร HTML เบื้องต้น

สวัสดีเพื่อนๆ เบื่อกันอ่ะยาง วันนี้เรามาสนุกกับการปรับแต่งตัวอักษรกันดีกว่า
เนื้อหาเหมือนจะเยอะนิดนุงนะวันนี้ แต่ไม่ยากเลยเพราะหลักการเหมือนกัน (มั่ง) อิอิ

แฮ่มๆ เอาละมาเข้าเรื่องกันเลยดีกว่ามาลองดูเนื้อหาที่จะมาร่ำมาเรียนพร้อมๆกันก่อนดีกว่า

ตัวอักษรปกติ
ตัวหนา
ตัวเอียง
ตัวขีดเส้นใต้
ตัวอักษรใหญ่ขึ้น 1 ระดับ
ตัวอักษรเล็กลง 1 ระดับ
ตัวอักษรขีดฆ่า
ตัวอักษรยกกำลัง
ตัวอักษรห้อย (มันเรียกแบบนี้ป่าวอ่ะ -*-)

โห้วววว แล้วจะจำกันหมดไหมเนี๊ยะ !! ทำใจไว้ก่อนเลย ก่อนอื่นมาลองดูหลักการอันเยอะแยะมากมายกันก่อน

• ใส่โค้ทคร่อมช่วงที่ต้องการปรับแต่งตัวอักษร

ครับ แค่นั้นจริงๆ ใส่โค้ทคร่อมช่วงที่ต้องการปรับแต่งตัวอักษร แล้วโค้ทคืออะไรบ้างมาลองดูกัน (ทำไมตารางมันร่วงไปอยู่นั่นได้อ่ะ)

แบบตัวอักษร	โค้ท
ตัวอักษรปกติ	ไม่ต้องใส่โค้ท
ตัวหนา	<B>.....</B>
ตัวเอียง	<i>.....</i>
ตัวขีดเส้นใต้	<U>.....</U>
ตัวอักษรใหญ่ขึ้น 1 ระดับ	<BIG>.....</BIG>
ตัวอักษรเล็กลง 1 ระดับ	<SMALL>.....</SMALL>
ตัวอักษรขีดฆ่า	<STRIKE>.....</STRIKE>
ตัวอักษรยกกำลัง	<SUP>.....</SUP>
ตัวอักษรห้อย	<SUB>.....</SUB>

ง่ายมากเลยใช่ไหมครับ แค่จำโค้ทได้ก็สามารถปรับแต่งตัวอักษรกันได้อย่างสนุกสนานเลยทีเดียว
ขอแถมโค้ทอีก 2 TAG ที่สามารถใช้ได้เฉพาะเมื่อเปิดดูด้วย IE (Internet Explorer Browser) เท่านั้น
FireFox และ Safari เปิดดูจะไม่เห็นผลนะจ๊ะ
แก้ไขจ้า ตะกี้เปิดกับ FireFox 3.0.10 แล้วมันใช้ได้อ่ะ แหะๆ

<BLINK>ตัวอักษรกระพริบ</BLINK>
<MARQUEE>ตัวอักษรข้อความเลื่อน </MARQUEE>

ลองเอาไปเล่นกันดูนะ คราวหน้าเราจะมาลงสีให้ตัวอักษรกัน โอ้วว มีสีสันสวยงามมั๊กๆ อ่ะแจ๋วใจร้ายจบพอดีเลย ขอตัวไปอาบน้ำก่อนนะคร๊าบ แล้วเจอกัน

Enter เว้นบรรทัดด้วย TAG BR

แต๊น แตนน!!
สวัสดีจ้า คราวที่แล้ว ได้รู้จักกับ <CENTER> ไปแล้ว คราวนี้ผมจะพาเพื่อนๆไปรู้จักกับ TAG ง่ายๆ สักอันนุง เพื่อเป็นการเรียกน้ำลาย เอ้ย น้ำย่อยก่อนที่จะไปเรื่องตัวอักษรในคราวหน้า

นั่นคือ <BR>

โดยปกติแล้วเพื่อนๆ พิมพ์ข้อความแล้วเซฟเป็นไฟล์ HTML เลย เวลาเปิดผ่าน บราวเซอร์ขึ้นมาก็จะปรากฎข้อความนั้นๆ ยาวเป็นพรืดดดดติดกัน ถึงแม้ว่าเวลาพิมพ์ข้อความย๊าววว ยาวว เพื่อนๆจะกด ENTER เว้นบรรทัดแล้วก็ตาม ชิมิ O_o

แต่ แต่ แต่ ปัญหานั้นจะหมดไป โอ้ววว ซาร่ามันยอดมาก *-*
เพียงแค่คุณพิมพ์ <BR> ต่อท้ายแทนการกด ENTER
สมมุติ นะค่ะ สมมุติ สมมุติว่า ผมจะพิมพ์ ว่า
"ชื่อ นามสกุล บ้านเลขที่ ตำบล/แขวง อำเภอ/เขต จังหวัด"
ให้แยกอยู่คนละบรรทัด จะต้องพิมพ์อย่างไร มาดูกัน

ชื่อ <BR> นามสกุล <BR> บ้านเลขที่ <BR> ตำบล/แขวง <BR> อำเภอ/เขต <BR> จังหวัด


เมื่อลองเซฟแล้วเปิดดูจะพบว่า ผลที่ได้จะเป็นแบบนี้

ชื่อ
นามสกุล
บ้านเลขที่
ตำบล/แขวง
อำเภอ/เขต
จังหวัด

ง่ายใช่ไหมครับ แต่ผมจะแนะนำว่าเพื่อให้ง่ายต่อการดู (เผื่อแก้ไขวันหลัง) การที่จะเขียนโค้ทติดกันนั้น เวลาดูจะ มึนตึ๊ป อย่างแน่นอน ดังนั้น เวลาพิมพ์ ผมจะเว้นบรรทัดไปด้วย เพื่อง่ายต่อการอ่านเอง

ชื่อ <BR>
นามสกุล <BR>
บ้านเลขที่ <BR>
ตำบล/แขวง <BR>
อำเภอ/เขต <BR>
จังหวัด

อันนี้แล้วแต่ความถนัดส่วนตัวนะครับ อิอิ

คราวหน้าผมจะเอาเรื่องการ ปรับแต่งตัวอักษรมาเรียนรู้กับเพื่อนๆพร้อมกัน รับรองสนุกแน่นอนครับ
วันนี้ขอตัวไปดู "เป็นต่อ" ก่อนนะคร๊าบบบบบ *-*

การจัดข้อมูลให้อยู่กึ่งกลาง

สวัสดีครับ วันนี้ขอแนะนำ TAG สุดฮิตสำหรับมือใหม่อย่างผม นั่นคือ แต๊น แต๊นๆ
แท็ก <CENTER> </CENTER>นั่นเอง
ลองมาดูกันว่าเจ้า TAG ตัวนี้มันใช้ยังไง แล้วมันจะสำคัญและใช้เยอะจริงๆสำหรับมือใหม่อย่างที่ผมว่าหรือเปล่า อุอุ

เริ่มด้วย เห็นเจ้ากระต่าย (น่าจะใช่นะ) ที่อยู่ด้านบนของบทความวันนี้ไหมครับ วันนี้เราจะย้ายมันให้มาอยู่กึ่งกลางของบทความกัน เริ่มด้วย การใส่รูปภาพปกติด้วย แท็ก <IMG> </IMG> ถ้าลืมเรื่องใส่ภาพกันไปแล้วกลับไปทบทวนซะดีๆ
>> คลิกที่นี่ <<
ปกติแล้วเมื่ออ้างอิงจากรูปน้องกระต่าย จะเป็น
<IMG> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh49wAZxJf26_TNPq1vMKm5UpbPwkqI3d-2pjH9-32m50JE-nugxX5mWPyXQGbVaS_qRoGAvxc41pLjXKSO9T0NvAJArAGSl73wYy9eY1bpWgULts9KS0djyNl9uexUlrxriZAcmFnzLg0/s220/0015543.gif </IMG>

แต่คราวนี้เราลองเพิ่ม TAG <CENTER> </CENTER> ไปคร่อม TAG รูปภาพจะเป็น
<CENTER><IMG> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh49wAZxJf26_TNPq1vMKm5UpbPwkqI3d-2pjH9-32m50JE-nugxX5mWPyXQGbVaS_qRoGAvxc41pLjXKSO9T0NvAJArAGSl73wYy9eY1bpWgULts9KS0djyNl9uexUlrxriZAcmFnzLg0/s220/0015543.gif </IMG></CENTER>

ผลลัพธ์ที่ได้จะออกมาเป็น



แอ๊น แอน แอ๊นนน น้องกระต่ายไปโดดเล่นอยู่ตรงกลางแล้ว
ง่ายใช่ไหมครับ ซึ่งเจ้า <CENTER> </CENTER> นี้สามารถใช้ได้ครอบจักรวาล ทั้งข้อความ รูปภาพ ตาราง ลิงค์ ฯลฯ โดยหลักการก็เหมือนเดิมคือ เอา <CENTER> </CENTER> ไปคร่อมช่วงที่เราจะจัดให้อยู่กึ่งกลาง เท่านั้นเองครับ

ลองไปทำให้น้องกระต่ายกระโดดอยู่ กึ่งกลางหน้ากันดูนะครับ
วันนี้แค่นี้ก่อน พบกันพรุ่งนี้ จ้า

HTML Language Blogspot Return

สวัสดีครับ ต้องขอโทษเพื่อนๆด้วย เพราะผมหายไปนานมากกกกกกกๆๆ เป็นปีเลยไม่ได้มาอัพต่อ (บอกแล้วเป็นพวกเครื่องร้อนไว แต่ใจมอดเร็ว) -*-
หลังจากนี้ (จะ) พยายามอัพอย่างต่อเนื่อง และ หาเครื่องไม้เครื่องมือในการเรียนรู้ภาษาคอม HTML ในนี้ไปพร้อมกับเพื่อนๆทุกคนเลยนะครับ เอาละมาเริ่มกันเลยยยย ~~~