การทำเว็บซต์ง่ายๆ ด้วย HTML EP.3

การทำเว็บไซต์ง่ายๆด้วย HTML EP.3 

           เดินทางกันมาถึง EP.3 กันแล้วนะครับวันนี้ผมจะมาสอนเกี่ยวกับการใส่รูปภาพการเชื่อมลิ้งไปเว็บไซต์เราต้องการจะให้ไปมาครับ ไปเริ่มกันเลยยย

          ขั้นตอนที่ 1  การใส่สีของตัวอักษรและขนาดของตัวอักษรนะครับมีโค้ดดังต่อไปนี้

   <font color = "ชื่อสี/code สี">..ข้อความ..</font>

        

           เป็นการใส่สีให้ตัว Text หรือ ข้อความของเรานะครับ 

                <font size = "ตัวเลข">..ข้อความ..</font>

           เป็นการกำหนดขนาด Font ตัวข้อความของเราโดยจะใช้เป็นตัวเลขตั้งแต่ 1-10 เรียงจากเล็กไปหาใหญ่ครับ

   

        หรือจะนำคำสั่งของทั้งสองตัวมารวมกันก็ได้นะครับเช่น

         <font size = "8" font color = "red">..ข้อความ..</font>

           คำสั่งตัวต่อไป  คือ  <b>..ข้อความ..</b>  เป็นคำสั่งที่ทำให้ตัวข้อความของเรานั้นเป็นตัวหนานะครับ ^^"

           ขั้นตอนที่ 2  เป็นการใส่รูปภาพและทำการลิ้งเว็บไซต์ที่เราต้องการให้ไปโดยการคลิกที่ตัวรูปภาพนะครับ

 คำสั่งที่เราจะใช้ก็คือ 

               <a href ="urlWeb"><img src = "urlPicture"></a>

    คำสั่ง <a href ="url"> ก็คือการที่เราเอาลิ้งไปวางเมื่อเวลากดที่รูปภาพแล้วมันจะทำการ Link ไปที่ url ที่เราได้กำหนดเอาไว้

   คำสั่ง <img src ="url"> ก็คือการที่นำที่อยู่ของภาพที่เราต้องการมาวางหรือเป็นการใส่ภาพนั้นเอง

  ส่วนคำสั่งที่จะทำให้ตัวภาพหรือข้อความที่ต้องการให้อยู่ตรงกลาง ทางซ้าย หรือว่า ทางขวา ก็คือ

                      <center>..ข้อความ..</center> 

                

     ข้อความของเราจะอยู่ตรงกลาง

                     <div align = "right">..ข้อความ..</div>

     ข้อความของเราจะอยู่ทางด้านขวา

                      <div align = "left">..ข้อความ..</div>

     ข้อความของเราจะอยู่ทางด้านซ้าย

               

             ขั้นตอนที่ 3 เป็นการทำลิ้งไปยังเว็บไซต์ที่เราต้องการโดยการกดตัว Text หรือ ข้อความ

     คำสั่งก็คือ 

                      <a href = "urlWeb">..ข้อความ..</a>

    จะสั่งเกตได้ว่ามันจะเหมือนกับการลิ้งกับรูปภาพแต่เปลี่ยนเป็นใส่ข้อความแทนนะครับ ^^"  เเละเมื่อทำออกมาแล้วจะได้ตามรูปข้างล่างเลย !!

  

               ขั้นตอนที่ 4 เป็นการทำพื้นหลังของตัวเว็บไซต์เรานั้นเองแต่การใส่คำสั่งจะไปใส่ตรง <body > นะอย่าไปใส่ผิดละถ้าอย่างนั้นแล้วละก็ไปลุยกันเลย ^^"

      คำสั่งก็คือ 

                      <body bgcolor = "ชื่อสี/Code สี">

                      </body>

            

       

        

          เป็นยังไงกันบ้างครับกับการสร้างเว็บไซต์ง่ายๆด้วยภาษา HTML ไม่ยากเลยใช่มั้ยล๊าา  เพื่อนๆ ลองนำสิ่งที่ได้ไปวันนี้ลองไปปรับวางจัดตำแหน่งให้ดีๆ ผมว่าเว็บไซต์ของเพื่อนๆต้องออกมาดูดีแน่ๆเลยวันนี้ผมขอลาไปก่อนและจะมาสอนนำขึ้นเว็บไซต์จริงๆเพื่อแชร์ให้โลกได้รู้กันแล้วน๊า และอย่าลืมมาอวดเว็บไซต์ที่เพื่อนๆทำกันด้วยนะ ...บ๊ายยบายยย...

และอันนี้คือลองทำแบบคร่าวๆนะ ^^"

    

การเขียนเว็บง่ายๆกับ HTML EP.2

การทำเว็บไซต์ง่ายๆด้วย HTML EP.2 

          มาครับวันนี้จะมาต่อกันด้วยเรื่องการขึ้นบรรทัดใหม่กับการทำให้หัวข้อเว็บไซต์ของเราเนี่ยอยู่ตรงกลางครับไปเริ่มกันเลย


         ขั้นตอนที่ 1 คือ การพิมพ์คำสั่ง <br>..ตามด้วยข้อความ..</br>
คำสั่ง <br> นั้นจะเป็นคำสั่งหรือ tag ที่เอาไว้ทำให้เราขึ้นบรรทัดใหม่ได้นั้นเอง

             ขั้นตอนที่ 2    คือ การพิมพ์คำสั่ง

 <center><h1>..ตามด้วยข้อความที่เป็นหัวเรื่องใหญ่..</h1><center>

เพียงเท่านี้เราก็จะได้หัวเรื่องที่อยู่ตรงกลางกันแล้วนะครับ

คำสั่ง <center> คือให้ข้อความของเรานั้นอยู่ตรงกลาง

คำสั่ง <h1> คือ จะเป็นคำสั่งหรือ tag ในการทำหัวเรื่องนั้นเองครับ

                   เป็นยังไงกันบ้างครับแค่นี้เว็บเราก็มีหน้ามีตาขึ้นแล้วน๊ากับ

  3 คำสั่งง่ายๆของภาษา HTML แล้วไว้พบกันใหม่ในคำสั่งต่อๆไปนะ   ครับวันนี้ขอตัวลาไปก่อนนะครับ ^^

การทำ WebSite ง่ายๆกับ HTML

การทำเว็บไซต์ง่ายๆด้วย HTML

          ขั้นตอนที่ 1 ดาวน์โหลดโปรแกรม 

                        www.code.visualstudio.com  (ฟรี) 

ขอบคุณเว็บไซต์ Code.visualstudio ด้วยครับผม^^

                 ขั้นตอนที่ 2  เมื่อดาวน์โหลดเสร็จแล้วให้เข้ามาที่หน้าโปรแกรมและกด New file จะได้หน้าต่างดำๆมาบานนึง

                    ขั้นตอนที่ 3 ให้เราทำการกด Ctrl + S เพื่อทำการ เซฟไฟล์ จะนำไฟล์ไปเก็บไว้ที่ใหนก็แล้วแต่เลยครับ ^^ อย่าลืมเซฟนามสกุลไฟล์เป็น HTML น๊าา++

               ขั้นตอนที่ 4  การจะสร้างเว็บไซต์โดยคำสั่ง HTML จะต้องมีคำสั่ง <!doctype html> เสมอ เพื่อให้เรารู้ว่าเรากำลังจะเขียน HTML แล้วนะครับ

ต่อด้วย <html> มีเปิดก็ต้องมีปิด </html> อย่าลืมเชียวล่ะ

คำสั่ง html เป็นเสมือนเว็บไซต์เราเว็บนึงที่รอการเติมเต็ม 

และคำสั่งต่อ ไป คือ  <head> แน่นอนว่าต้องมีปิดด้วยนะ </head> เป็นคำสั่งสำหรับใส่หัวเรื่องของเว็บไซต์เรานั้นเอง

                      ขั้นตอนที่ 5 ให้เราพิมพ์คำสั่ง <title> ภายในคำสั่ง <head> อย่าลืมปิด </title> ด้วยน๊า 

คำสั่ง <title>พิมพ์ข้อความลงไปเลยจร้า </title>  จะเป็นคำสั่งหัวข้อของตัวเว็บไซต์ของเรา

และอีกคำสั่ง คือคำสั่ง <body>พิมพ์เนื้อหาได้เลย</body> แต่คำสั่งนี้จะไม่ได้อยู่ใน head นะมันจะอยู่ข้างนอก ระวัง ด้วยน๊า

                         ขั้นตอนที่ 6   ได้เวลารันโปรแกรมกันแล้ว ไปที่ Folder  ที่เราเซฟไว้เราจะเห็นชื่อไฟล์ที่เราตั้งชื่อไว้ตอนแรกแล้วดับเบิลคลิกเข้าไปเลยครับจะได้เว็บไซต์ของเราเบื้องต้นมาแล้วนะ ^^

อันนี้คือส่วนของคำสั่ง Title นะมาโผล่อยู่ข้างบนนี้เอง

เมื่อเราใส่คำสั่ง body เราจะรันออกมาได้อย่างนี้นะครับ

     เป็นยังไงกันบ้างครับทำได้รึเปล่า ไม่ยากใช่ไหมวันหลังเราจะมาทำให้มันขึ้นบรรทัดใหม่และอีกหลายๆฟังค์ชันนะครับการเขียนเว็บไซต์ไม่ยาก ลองทำดูนะครับ ^^