Please read this section at least one day prior to the seminar. This section outlines what you are expected to know, be able to do, or prepare in advance. Following these instructions will help you get the most out of the seminar and ensure smooth participation.
Before the start of the practical, you should be able to:
In this section we briefly recap what you need to do in order to get the credit.
In order to get a credit you need to:
During the practicals you can collect points for active participation and solving homeworks. By collecting enough points you can improve your final grade or even pass without the need to take the final exam.
For more details see grading.
You have probably used a web browser before. In this section we focus on so called "developer tools" and what they allow you to do.
Try to open an HTML file from a local file and using http, https protocol.
Pick a website and inspect the source code. You can even pick the default content in a new tab and see what is there.
In most modern browsers you can open a developer tools console. There are multiple ways to do so.
Explore Elements, Network and Application tab.
Create a simple static website as a single HTML file. You should already know how to do this. Before you start, please read instruction on following slides and proceed accordingly.
Create a local file "content.html". Add a header, a paragraph, a link, a footer, and a button with no action into the website. The link should be in the header. The footer should contain copyright notice. Add following content to the website <hr>, so it is visible in this form.
Use inline CSS to change header text color to red.
Open the website in a browser of choice and check everything as it should be.
Continue to the next slide once you are done.
Use following semantic elements in you website:
Continue to the next slide once you are done.
Utilize validator.w3.org to validate your website and fix any errors or warning. Use "Validate by File Upload" or "Validate by Direct Input" option.
Continue to the next slide once you are done.
Congratulations, if you have followed the instructions, you have just reached the end of this exercise.
In this section we recap some of the tools you already know, namely ssh and scp. We also add a new one to make HTTP requests.
There is an alternative for Windows called Putty. Make sure you know how to:
There is an alternative for Windows called WinSCP. Make sure you know how to:
Command line tool to make HTTP requests. It is available on Linux, macOS, and Windows. PowerShell implementation is different!
You can test against a simple PHP script.
Send the same data as this form.
You can host your website locally. This is quick and easy way to develop and test a website.
# Python
python -m http.server 8080
# PHP
php -S 127.0.0.1:8080
You can host your website at https://webik.ms.mff.cuni.cz/~<username>/.
This servere is provided by NSWI142, do not use or abuse it for anything else!
You should have received username and password by e-mail.
ssh -p 42222 <username>@webik.ms.mff.cuni.cz
scp -P42222 index.html <username>@webik.ms.mff.cuni.cz:public_html/
You can host your website at https://www.ms.mff.cuni.cz/~<username>/.
This service has nothing to do with NSWI142.
The following information is based on NSWI177.
The computers in Lab SU1 and SU2 can not be connected to via SSH during the day (or more specifically during the scheduled classes). That is to prevent remote users to interfere with classes. Rotunda lab machines are accessible 24/7.
The objective is to create a simple personal website and publish it using webik.
Create a personal website presenting you as a student or a made up person / character.
You need to have a landing page (./personal/index.html), about page (./personal/about.html) and projects page (./personal/projects.html).
They all need to be interlinked using relative links.
You are free to use external CSS of your choice or create your own.
The landing page must be available at https://webik.ms.mff.cuni.cz/~<username>/personal/.
Make sure that the HTML is valid!
Do not use any JavaScript!
Upload all the files into your public_html directory. Make sure that all the websites work.
In this section you can find additional resources connected to the topic of this practical.