ผู้เขียน หัวข้อ: แชร์ ประสบการณ์ เรื่องการเขียนเว็บ จาก Admin  (อ่าน 883 ครั้ง)

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

ออฟไลน์ admin

  • Admin
  • สมาชิกระดับสูงมาก
  • *****
  • กระทู้: 266
  • การ์ม่า: +0/-1
    • ดูรายละเอียด
วันนี้เริ่มหัวข้อ ที่ดูแล ประจำ กับเรื่องการเขียนเว็บ ( แต่ไม่ใช่ดูแลเว็บ )

  วันนี้จะมาแชร์ ประสบการณ์ การเขียนเว็บ ใน สไตล์ ของ kidsaraburi.com นะ

  :kicu1: :kicu1: :kicu1:

 ออกตัวก่อน ว่าไม่เก่ง 

 การเขียนเว็บ พอรับงานจริง ๆ มันมีอยู่ สอง แนวทาง คือ ?

    1. เขียนต่อจาก ที่เขาเขียนไว้
    2. เขียนใหม่ ด้วยตนเอง สาระพัดวิธีการ ที่จะทำให้เว็บออกมาถูกใจตัวเอง นะ
   
   ทั้งสองวิธี นั้น มันมีความยาก ง่าย แตกต่างกัน

    สำหรับ วิธีที่ 1 นั้น ถ้าคนเขียน คนที่แล้ว ทำ คอมเม้นท์ ไว้ ให้อ่าน อันนี้ จะดีมาก ๆ จ๊ะ เพราะว่า มันแก้ไขได้ง่าย มาก แต่ ถ้าเขียนไว้ แต่ไม่มี คอมเม้นท์ อันนี้ มันช่างปวดหัว เสียจริง เพรากว่าจะแกะโค๊ด ที่ เกี่ยวพันกันได้ นะ บางทีเป็นอาทิตย์ เลย เพราะเดี่ยวนี้ การเขียนเว็บ เขาใช้ อ้างอิง จากไฟล์ อื่น ๆ เช่น css java เหล่านี้ มันมีการเขียนที่พิศดารออกไป เฉพาะตน ถึงแม้มีความสะดวก แต่ การแกะโค๊ด นั้น ก็ไม่ใช่เรื่องง่าย  แต่ ถ้าหากคนเขียน ๆ แบบ มาตรฐาน คือ header menu sidebar left midpage sidebar right footer mail ถ้าเขียนและ ประกาศตัวแปร คลาส ย่อย id  ก็ตาม มันทำให้เราสะดวก ในการแก้ไข  เว็บพวกนี้ ส่วนมากจะเป็น เท็มเพลท การแก้ไข ก็ต้องมีความระวังด้วย มีโอกาส เดี้ยง เพราะการเขียนเว็บ โดยใช้ภาษา html php css พวกนี้ แค่ ตก อักขระ ไปตัวหนึ่ง เว็บก็ไ่ทำงานแล้ว อย่างเช่น ที่ผู้เขียนเจอ ประจำ การตก อักขระ ปิด คือ ;  หรือ } มักจะลืมประจำ แค่ ขาดไปแค่ อักขระเดียว อัน error ทั้งหน้า เลยนะ
     
    ดังนั้น ถึงแม้ เราจะใช้ template ที่สำเร็จต่าง ๆ แต่การรู้ภาษา คำสั่ง จำเป็นต้องมี บ้างนะ อย่างน้อย ก็ต้อง ภาษา HTML นะ

     ดังนั้นส่วนนี้ จะไม่ขอ กล่าวก็แล้วกัน นะในการแชร์ ประสบการณ์

    2. เขียนขึ้นใหม่ ด้วยตนเอง คอมเม้นท์ ด้วยตนเอง สาระพัน สาระพัน ที่จะเขียนกัน นะ
       
      แต่ในการแชร์ นี้ จะไม่แชร์ ทั้งหมด จะแชร์ประสบการณ์ ที่สำคัญ ที่ทำให้เสียเวลาเป็นอย่างยิ่ง   นะจ๊ะ

    :3susu: :3susu: :3susu:






ออฟไลน์ admin

  • Admin
  • สมาชิกระดับสูงมาก
  • *****
  • กระทู้: 266
  • การ์ม่า: +0/-1
    • ดูรายละเอียด
ประสบการณ์ ที่ 1 การล็อก Background body
« ตอบกลับ #1 เมื่อ: มีนาคม 12, 2015, 10:24:57 AM »
ประสบการณ์ ที่ 1 การล็อก Background body

   ใช่แล้ว เวลาเราเริ่มเขียน หน้า เพจ สิ่งที่ทำให้ หน้าเพจ ดูแลสวยงาม ขึ้นนั้น  มันก็อยู่ที่ Background ด้วย ดังนั้น เราควรจะต้องรู้ด้วย ว่า background จะใส่ได้ที่ไหน และควรจัดการอย่างไร กับ background


โค๊ด: [Select]
<html>
<body background="http://i87.photobucket.com/albums/k152/kamscorp/body-4.jpg">



/body>
</html>
  อันนี้เป็นตัวอย่าง ใน html เรียกใช้ ภาพเป็นพื้นหลัง แต่ ไม่มีคำสั่งล็อก repete คือ วนซ้ำนะ


โค๊ด: [Select]
<html>
<body bgcolor="Red">



/body>
</html>
อันนี้เป็นคำสั่ง ใส่เฉพาะสี ที่พื้นหลัง ส่วนชื่อ สี ก็ใช้ทั้งชื่อ และ Hex นะ

โค๊ด: [Select]
body {
    background-color: #b0c4de;
}
อันนี้แบบ เขียน style css นะ 

โค๊ด: [Select]
body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

 อันนี้แบบเขียน ด้วย style css แต่ ระบุ repete กรณีที่ภาพมีขนาดเล็กให้ทำวนซ้ำ หรือ ไม่ซ้ำ ขึ้นอยู่ความต้องการ ของผู้เขียน และออกแบบ

    จำไว้ว่า การสั่ง Repete นั้น มีการสั่งงาน 4 แบบ คือ ด้านซ้าย ด้านขวา ทั้งหมด และ ไม่ทำ
    อันนี้จัดว่าเป็นเคล็ดลับ เลยนะ ลองใช้ดู

   ไปดูตัวอย่าง ที่เว็บนี้ เลยนะ
 
« แก้ไขครั้งสุดท้าย: มีนาคม 12, 2015, 10:36:21 AM โดย admin »

ออฟไลน์ admin

  • Admin
  • สมาชิกระดับสูงมาก
  • *****
  • กระทู้: 266
  • การ์ม่า: +0/-1
    • ดูรายละเอียด
<tag> อะไรบ้าง ที่ควรจะต้องรู้ และ ทำความเข้าใจ
« ตอบกลับ #2 เมื่อ: มีนาคม 12, 2015, 10:41:10 AM »
<!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <keygen> <label> <legend> <li> <link> <main> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

  ด้านบนนี้ เป็น Tag เกือบจะทั้งหมด นะ แต่ ที่ใช้ จะเลือกให้ต่อไปนี้
<!--> <!DOCTYPE> <a> <area>  <audio> <b>  <blockquote> <body> <br> <button>  <caption> <center>  <code> <dir> <div> <embed>  <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input>  <li> <link>  <menu> <menuitem> <meta>  <nav> <noframes> <noscript> <object>  <option> <p> <param> <pre> <script> <section> <select> <span> <strike> <strong> <style> <sub> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <title> <tr> <track> <tt> <u> <ul> <video>

 อันนี้เป็น Tag ที่ใช้ บ่อย ควรจะต้องเรียนรู้ และ ศึกษา รูปแบบไว้ บ้าง อื่น ๆ ที่ตัดไป นั้นจากประสบการณ์ ถึงเรียนไว้แต่ก็ไม่เคยใช้ เลย นะ

   สำหรับ อะไรเป็นอะไร ใช้ อย่างไร รูปแบบ ไปดูได้ที่นี่

  http://www.w3schools.com/tags/tag_comment.asp

 
« แก้ไขครั้งสุดท้าย: มีนาคม 12, 2015, 10:46:18 AM โดย admin »

ออฟไลน์ admin

  • Admin
  • สมาชิกระดับสูงมาก
  • *****
  • กระทู้: 266
  • การ์ม่า: +0/-1
    • ดูรายละเอียด
การอ้างอิง css 3 รูปแบบ ใน 2 นอก 1
« ตอบกลับ #3 เมื่อ: มีนาคม 12, 2015, 10:56:03 AM »
โค๊ด: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>



   ตัวอย่างที่ การเรียกใช้ css จาก Style list ใน head เขีียนไว้ส่วน head เรียกใช้ ใน body จากตัวอย่างเป็นการเรียกใช้ เอง เพราะประกาศที่ tag body อะไรก็ตาม ที่อยู่ ใน Tag body จะต้องเป็นได้สี กับ ได้ภาพ ตามที่ระบุ ถึงแม้ไม่ต้องใส่ Class หรือ id ลงไป ก็เรียกใช้ งานเอง


โค๊ด: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <link rel="stylesheet" href="mystyle.css">
</head>

<body>

 ส่วนการเรียกใช้ ไฟล์ style จากไฟล์ อื่น ได้ทั้งที่เป็น นามสกุล php และ css

อ่านเพิ่มเติม ที่นี่ นะ
http://www.w3.org/Style/Examples/011/firstcss.th.html
« แก้ไขครั้งสุดท้าย: มีนาคม 12, 2015, 11:14:41 AM โดย admin »

ออฟไลน์ admin

  • Admin
  • สมาชิกระดับสูงมาก
  • *****
  • กระทู้: 266
  • การ์ม่า: +0/-1
    • ดูรายละเอียด
เวลา เขียนคำสั่ง ใน php เวลาโชว์ ผลของคำสั่ง ต้องอาศัย คำสั่ง 3 อย่าง

  คือ

    1. echo
         อันนีื้มีความเป็น โปรแกรมสูง เพราะผู้เขียนคำสั่ง ต้อง เข้าใจ การเชื่อม ตัว แปร และ Tag ถ้าไม่เข้าใจ งมเข็มในมาสมุทร เลยนะ แต่ส่วนตัว ก็ชอบใช้อันนี้ มากกว่า print
     
โค๊ด: [Select]
      echo "Welcome to kidsaburi";
      echo "Saraburi dot com";
      $str1= "Welcome to kidsaburi";
      $str2= "Saraburi dot com";
      echo $str1,$str2 ;
      echo $str1," ",$str2 ;
      echo $str1,'<br>'$str2 ;

     
    2. print
         อันนี้มีความยืดหยุ่น สูง การเชื่อม sting value tag ง่าย มาก แต่ ไม่นิยม

     
โค๊ด: [Select]
       print "Welcome to kidsaburi";
       print "Saraburi dot com";
      $str1= "Welcome to kidsaburi";
      $str2= "Saraburi dot com";
      print "$str1 $str2 ";
      print "$str1   $str2 ";
      print "$str1<br>$str2 ";
     

    3. printf ( อันนี้ ไม่ค่อยใช้ กับ ไม่ใช้ )

   Z special  การ ระบุ /n คือ แสดง line คำสั่ง