สวัสดีครับ วันนี้จะมาให้ดูโค้ดhtmlในการเขียนเว๊บไซต์ Portfolio ของผมกัน มาดูกันเลย
- ขั้นตอนแรกผมจะสร้างหน้าhome ของเว๊บโดยแบ่งเป็น3ส่วน คือ ส่วนบน ส่วนซ้าย และส่วนขวา จะเห็นในดค้ดว่าผมเขียน row35% , 70% คือ แถวแนวนอน และ cols 25% , 75% คือแถวแนวตั้ง ผมตั้งชื่อว่า index.html
- เราก็จะมาทำเฟรมบนกัน<center><img src=”nun1.gif”
width=”1300″ height=”180″></center> ก็คือ รูปอยู่ตรงกลาง มีขนาดกว้าง1300 ยาว180 **ก่อนเอารูปมาใส่เราต้องตั้งชื่อรูปแล้วเซฟลงในโฟลเดอร์เดียวกันกับที่เราเซฟไฟล์notepad++ น่ะครับ **
- เฟรมซ้าย <body background=”23/nun5.jpg”text=#000000> โค้ดนี้ก็คือ มีแบรคกาวคือรูป nun5.jpg ตัวอักษรมีสีดำ H1 , H2 คือ ขนาดตัวอักษร ผมก็เขียนโค๊ดออกเป็นหัวข้อย่อยต่างๆ คือ My Portfolio , Personal Information ,Skills เฟรมซ้ายของเราก็เสร็จ
- <h2><a href=”index.html”target=’_top’> My Portfolio</a></h2><br> โค้ดนี้ก็คือ เราเลือกให้ my portfolio ลิ้งค์กับ index เมื่อเรากดที่คำว่า my portfolio ก็จะไปยังหน้าที่เราลิ้งไว้
- เฟรมขวา เราก็ทำคล้ายๆกับเฟรมซ้าย ใส่รูป ใส่อะไร ใช้โค้ดเหมือนเดิมแค่เปลี่ยนชื่อรูปและนามสกุลไฟล์ และมีอีกอย่างแนะนำผมไปหามาได้จากเว๊บไซต์คือโค้ดนี้ <h2><font color=”#FFFFFF”><marquee direction=”left” style=”background:#FF0000″>Computer Engineering</marquee></font></h2> คือโค้ดที่วิ่งไปวิ่งมานั้นเอง น่า
สนใจใช่มั้ย
- อันนี้ก็คือ page 1 เมื่อเรากด Personal Information จากซ้ายมือ มันก็จะลิงค์มายังหน้านี้ เราก็เขียนประวัติส่วนตัวกัน ส่วนโค้ดเราก็ใช้โค้ดเดิมๆจากอันที่แล้ว เมื่อเขียนเสร็จก็จะได้หน้าตาเว๊ปแบบข้างล่างนี้
- page2 ก็จะคล้ายๆpage1 แต่page2 จะเข้าดูได้ก็ต่อเมื่อกดที่Skills ถึงจะลิ้งค์มายังหน้านี้ ข้างล่างก็คือหน้าตาของpage2 เมื่อเราทำเสร็จแล้ว
** การเขียนโค้ดในการสร้างเว๊บไซต์ไม่ยากใช่มั้ยล่ะ เพื่อนๆก็ลองทำกันได้เลย **
เว๊บไซต์ของผมเขียนผ่านnotepad++ โดยเขียนผ่านโค้ด html เว๊บนี้ผมสร้างขึ้นเพื่อหัดทำและพัฒนาให้ดีกว่านี้ในการสมัครงาน เพราะถ้าเรามี portfolio ก็จะดีมากในการสมัครงาน ในportfolio ผมได้ใส่ประวัติส่วนตัว และความสามารถพิเศษไปยังเว๊บไซต์
ผมอยากให้เพื่อนๆได้หัดทำน่ะครับ จบปี4 เราอาจจะต้องทำเจ้า portfolio เพื่อไปสมัครงานอย่างแน่
Link Download Source Code (Google Drive) —> https://drive.google.com/drive/folders/0BxEDtR32ew6NN3l5UjlkUk05amc?usp=sharing
