Hakusanroku Journal 白山麓ジャーナル

May 18, 2022 Making Websites in Computer Skills Class

 Hello everyone. This is Robert Songer, Associate Professor and Computer Skills teacher at Hakusanroku Campus. The weather has been getting warmer and we are starting fresh new classes at ICT—it must be spring! Since this is my first time writing for the Hakusanroku Journal, I would like to give a little introduction of myself and my classes.

 I specialize in computer programming and software engineering subjects in the Department of Science and Technology curriculum. Most of my classes are for the 4th and 5th year students at Kanazawa Campus where they learn things like the Python programming language, software development processes, managing databases, and computer graphics (CG) which is a new topic this year. Sadly, I do not teach at Hakusanroku Campus in the spring semester so I will miss out on enjoying the warm mountain weather and seeing the monkeys in the fields. My classes at Hakusanroku are the Computer Skills classes for 1st year and 2nd year students in the fall. That means I get to drive into the mountains on snowy roads for my early morning classes every week. But I don’t mind! As a native of Michigan State with its cold and snowy winters I am perfectly comfortable in snowy environments.

 In the 1st year Computer Skills class, Professor Ohtsuka and I teach how to make web pages. We introduce the students to HTML, the language of the Worldwide Web. I like to say that the wonderful thing about the Web is that anybody can use the Web to learn about the Web. Even you reading this now in a browser can see the HTML source of this page. On a PC, you can right-click on the page and choose “view source” or “inspect”. Then the browser will show you all the source code that it uses to display the images, colors, and text that you see on the page. Of course, for a complicated page like this one, the source code will be equally complicated if not more!  
 In addition to HTML, the 1st year students also learn about CSS which is a scripting language (a kind of simplified programming language) for describing the appearances of a web pages. While HTML defines the structure of the page, such as where to put headings and images, CSS describes the visual properties of elements on the page, such as what color the text should be and how big to make the images. When they working together, HTML and CSS can be quite powerful technologies with seemingly infinite possibilities for building and designing web pages.

 Every day in class, the students practice what they learn on their computers in the Computer Lab. We do hands-on activities on interactive websites designed for learning these web technologies. One of the websites we use is called Code.org (https://code.org) which has a lot of interactive lessons for individuals as well as entire classrooms to use in learning about computer technologies. The lessons show everything students need to see on screen at the same time. Instructions are at the top of the screen, an editor window for writing source code is at the bottom left, and a view window showing the result is at the bottom right. This is a much simpler way to learn compared to the way modern web developers create websites. Usually, a developer will need to use many different software programs at one time and continuously switch between windows while they work. I think the students can really appreciate having everything they need in one window by using Code.org instead.

 After spending most of the semester learning about web page design, the final project is a portfolio website. The students plan and build a website to show off the activities and projects that they do at ICT. They are free to choose what content and layout they want to use for the website while they decide how to express themselves through visual design. In the end, all the students upload their websites to a hosting service called GitHub Pages (https://pages.github.com/) for anybody to see.

  I am impressed to see the students’ creativity and ingenuity at organizing their original ideas on a page. You can see their websites, too! I have collected a couple links to student pages from 2021 to share with you here. Please check them out below and take a look at what the students themselves chose to share about their first year at ICT.

Lucas Kusamoto
Kan Kinoshita

Robert Songer



 1年生のコンピュータスキルズの授業では、大塚教授と私でWebページの作り方を教えています。そこではWorldwide Webの言語であるHTMLを紹介しています。Webの素晴らしいところは、誰でもWebを使ってWebについて学ぶことができるということです。今、ブラウザでこれを読んでいるあなたも、このページのHTMLソースを見ることができます。パソコンでは、ページを右クリックして「ページのソースを表示」または「検証」を選びます。すると、このページの画像や色、文字を表示するために使っているソースコードをすべて表示してくれます。もちろん、このような複雑なページの場合、ソースコードも同じように複雑になります。



 後学期の大半を費やしてWebページのデザインについて学んだ後、最終プロジェクトとしてポートフォリオサイトを作成します。学生たちは国際高専で行っている活動やプロジェクトを紹介するWebサイトを企画・構築します。どのようなコンテンツやレイアウトにするか、またビジュアルデザインでどのように自分を表現するかなど、自由に選択することができます。最終的には、GitHub Pageshttps://pages.github.com/)というホスティングサービスにアップロードし、誰でも見ることができるようにします。


草本 留嘉寿さん
木下 観さん


HOMECampus LifeHakusanroku JournalMay 18, 2022 Making Websites in Computer Skills Class