http://ocw.cs.pub.ro/courses/ 2026-05-27T10:35:58+03:00 http://ocw.cs.pub.ro/courses/ http://ocw.cs.pub.ro/courses/lib/tpl/arctic/images/favicon.ico text/html 2024-03-17T18:39:19+03:00 http://ocw.cs.pub.ro/courses/ii/labs/s2/02/tasks/00?rev=1710693559&do=diff 00. [10p] Getting Started First, download the [skeleton archive (.zip)] and unzip it. It has the following structure: ├── initial_design.html # initial HTML template ├── public/ │ ├── bootstrap/ # bootstrap sources │ ├── images/ │ └── style.css # main stylesheet ├── server.py # server-side application └── templates/ # Jinja templates text/html 2024-03-17T18:24:16+03:00 http://ocw.cs.pub.ro/courses/ii/labs/s2/02/tasks/01?rev=1710692656&do=diff 01. [30p] Minor Design Changes Our customer wants to make some changes to the website's design: * Add a header image with our logo at the top * Several candidates are present inside public/images/; * You could either use the CSS background property, or just the old-school <img> tag; * Hint: check out style.css for existing definitions! text/html 2024-03-17T18:24:24+03:00 http://ocw.cs.pub.ro/courses/ii/labs/s2/02/tasks/02?rev=1710692664&do=diff 02. [20p] Hyper-linking multiple pages Time to add a second HTML page: * As expected, copy + paste your initial HTML with a new name, e.g.: second.html; * Link together the two .html pages (in each HTML page, find the <a class=”...” href=”..”> links inside the #navbarToggle div and edit the hrefs to point to each-other); text/html 2024-03-17T18:24:32+03:00 http://ocw.cs.pub.ro/courses/ii/labs/s2/02/tasks/03?rev=1710692672&do=diff 03. [30p] Firing up the Flask backend First, let's understand how Flask serves files: * Download a random photo from the Internet (e.g., your favorite snake species) and place it into public/myimage.jpg (or use whatever name you wish, but keep this directory!); * Start up the Flask server (python3 server.py) and point your browser to <http://localhost:5000/public/myimage.jpg>, it should display your image. * Copy/rename or download another image directly to your project's root, alongside… text/html 2024-03-17T18:43:40+03:00 http://ocw.cs.pub.ro/courses/ii/labs/s2/02/tasks/04?rev=1710693820&do=diff 04. [10p] Serving dynamic content Finally, we shall see how dynamic content can be interpolated * Edit the website's second HTML page, enter {{mycontent}} (this literal text!) as content somewhere inside the main content block: <div class="content-box main-content"> ... {{mycontent}} ...