Štěpán Stenchlák, KSI
stepan.stenchlak@matfyz.cuni.cz
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.
Web browsers 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.
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.
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 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.
Congratulation, if you have followed the instruction 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 in Linux, macOS, and Windows (Powershell).
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 setup SSH keys for passwordless login.
Command line tool to make HTTP requests. It is available on Linux, macOS, and Windows.
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 / 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 websites work.
In this section you can find additional resources connected to the topic of this practical.