Differences
This shows you the differences between two versions of the page.
|
ii:labs:s2:02:tasks:02 [2023/04/01 18:23] florin.stancu created |
ii:labs:s2:02:tasks:02 [2024/03/17 18:24] (current) florin.stancu |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ==== 02. Integration with Flask backend ==== | + | ==== 02. [20p] Hyper-linking multiple pages ==== |
| - | We now want to move the design from a static ''html'' file to using Flask Jinja template rendering. | + | Time to add a second HTML page: |
| - | For this, you must: | + | |
| - | * Migrate / split the HTML code into ''templates/_base.html'' (base template) and ''templates/index.html'' (child); | + | * As expected, copy + paste your initial HTML with a new name, e.g.: ''second.html''; |
| - | * //Note:// use Jinja2 [[https://jinja.palletsprojects.com/en/3.1.x/templates/#template-inheritance|template inheritance]] with an empty content block; | + | * Link together the two ''.html'' pages (in each HTML page, find the ''<a class="..." href="..">'' links inside the ''#navbarToggle'' ''div'' and edit the ''href''s to point to each-other); |
| - | * Modify ''server.py'' to call ''render_template'' and actually serve our new design. | + | |
| - | * Also create ''about.html'' and a Flask function for serving it (fill it with whatever content you want ;) ); | + | <note warning> |
| - | * Finally, fix the URLs in the template's menu to point to the appropriate pages. | + | Use relative paths, either ''pagename.html'' or ''./pagename.html'' will do! **DO NOT USE:** absolute paths, e.g., ''C:\Users\...\pagename.html'' for obvious portability reasons! |
| + | </note> | ||
| + | |||
| + | * Test by opening the HTML files in your browser. The user should be able to navigate between the two pages seamlessly! | ||
| + | * One final touch: we want the menu to highlight (i.e., change foreground / background color and font style) the currently active menu button (different for each page)! | ||
| + | |||
| + | <note tip> | ||
| + | **Hint**: create a CSS class (e.g., ''.active'') with your desired properties and append it to the appropiate menu link element: ''<a class="nav-item nav-link" ...>'' (also note: different class attribute values are separated by space!). | ||
| + | </note> | ||
