Jáchym Bártík, KSI
jachym.bartik@matfyz.cuni.cz
To get credit, you have 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.
They are available on almost every device and platform.
In this section, we focus on so called "developer tools" and what they allow you to do. First, pick your favorite browser:
Try to open a browser page from a local HTML file using http 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.
ctrl+u (Chrome, Firefox, Edge, ..) In most modern, browsers you can open a developer tools console. There are multiple ways to do so.
ctrl+shift+iExplore Elements, Network, and Application tabs.
127.0.0.1, 77.75.79.222::1, 2a02:598:a::79:222cz - Top level domaincuni.cz - Second-level domain (.cz 200 CZK/year, .com 350 CZK/year)mff.cuni.czms.mff.cuni.czdig youtube.comResolve-DnsName youtube.comCreate a simple static website as a single HTML file. You should already know how to do this. Before you start, please read instructions 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.
Use inline CSS to change header text color to red.
Open the website in a browser of choice and check everything looks as it should.
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" options.
Continue to the next slide once you are done.
Congratulation, if you have followed the instructions, you 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.
Should work the same on Linux, macOS, and Windows.
ssh -p <port> <username>@<hostname>
ssh -L <local port>:localhost:<remote port> -p <port> <username>@<hostname>
# Example: 8080:localhost:80
Again, should be supported by all major platforms.
scp -P <port> <local file> <username>@<hostname>:<remote path>
scp -r -P <port> <local directory> <username>@<hostname>:<remote path>
Edit ~/.ssh/config to avoid typing the same information over and over again. Also, set up SSH keys for passwordless login.
Command line tool to make HTTP requests. It's available on all major platforms.
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 localhost:8080
You can host your website at https://webik.ms.mff.cuni.cz/~<username>/.
This server 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 -P 42222 index.html <username>@webik.ms.mff.cuni.cz:public_html/
Anything in your public_html directory is publicly available.
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 (i.e., 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 characeter.
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.
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 pages work.
In this section you can find additional resources connected to the topic of this practical.