เขียน HTML Portfolio



สวัสดีครับ วันนี้จะมาให้ดูโค้ดhtmlในการเขียนเว๊บไซต์ Portfolio ของผมกัน มาดูกันเลย

1

  • ขั้นตอนแรกผมจะสร้างหน้าhome ของเว๊บโดยแบ่งเป็น3ส่วน คือ ส่วนบน ส่วนซ้าย และส่วนขวา จะเห็นในดค้ดว่าผมเขียน row35% , 70% คือ แถวแนวนอน และ cols 25% , 75% คือแถวแนวตั้ง ผมตั้งชื่อว่า index.html

 

3

  •  เราก็จะมาทำเฟรมบนกัน<center><img src=”nun1.gif”
    width=”1300″ height=”180″></center> ก็คือ รูปอยู่ตรงกลาง มีขนาดกว้าง1300  ยาว180  **ก่อนเอารูปมาใส่เราต้องตั้งชื่อรูปแล้วเซฟลงในโฟลเดอร์เดียวกันกับที่เราเซฟไฟล์notepad++ น่ะครับ **

4

  • เฟรมซ้าย <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 ก็จะไปยังหน้าที่เราลิ้งไว้



5

  • เฟรมขวา เราก็ทำคล้ายๆกับเฟรมซ้าย ใส่รูป ใส่อะไร ใช้โค้ดเหมือนเดิมแค่เปลี่ยนชื่อรูปและนามสกุลไฟล์ และมีอีกอย่างแนะนำผมไปหามาได้จากเว๊บไซต์คือโค้ดนี้ <h2><font color=”#FFFFFF”><marquee direction=”left” style=”background:#FF0000″>Computer Engineering</marquee></font></h2> คือโค้ดที่วิ่งไปวิ่งมานั้นเอง น่า

สนใจใช่มั้ย

6

  • อันนี้ก็คือ page 1 เมื่อเรากด Personal Information จากซ้ายมือ มันก็จะลิงค์มายังหน้านี้ เราก็เขียนประวัติส่วนตัวกัน ส่วนโค้ดเราก็ใช้โค้ดเดิมๆจากอันที่แล้ว เมื่อเขียนเสร็จก็จะได้หน้าตาเว๊ปแบบข้างล่างนี้

8

7

  • page2 ก็จะคล้ายๆpage1 แต่page2 จะเข้าดูได้ก็ต่อเมื่อกดที่Skills ถึงจะลิ้งค์มายังหน้านี้ ข้างล่างก็คือหน้าตาของpage2 เมื่อเราทำเสร็จแล้ว

9



** การเขียนโค้ดในการสร้างเว๊บไซต์ไม่ยากใช่มั้ยล่ะ เพื่อนๆก็ลองทำกันได้เลย **

 

เว๊บไซต์ของผมเขียนผ่านnotepad++ โดยเขียนผ่านโค้ด html เว๊บนี้ผมสร้างขึ้นเพื่อหัดทำและพัฒนาให้ดีกว่านี้ในการสมัครงาน เพราะถ้าเรามี portfolio ก็จะดีมากในการสมัครงาน  ในportfolio ผมได้ใส่ประวัติส่วนตัว    และความสามารถพิเศษไปยังเว๊บไซต์

 

10

ผมอยากให้เพื่อนๆได้หัดทำน่ะครับ จบปี4 เราอาจจะต้องทำเจ้า portfolio เพื่อไปสมัครงานอย่างแน่

Link Download Source Code (Google Drive) —> https://drive.google.com/drive/folders/0BxEDtR32ew6NN3l5UjlkUk05amc?usp=sharing



Natthamonchai Loknimit
at GlurGeek.Com
นาย ณัฐมนต์ชัย โลกนิมิตร์ ม.กรุงเทพ รังสิต วิศวกรรมคอมพิวเตอร์ ปี 1
ความสามารถพิเศษ เล่นกีตาร์ ฟุตบอล ชอบเล่นเกม อ่านการ์ตูน

Leave a Reply

© 2022 GlurGeek.Com