Web Page Layout by John Mortensen https://padlet.com/jmortensen7/weblayout Spring/Java Thymeleaf, Flask/Python Jinja en-us 2021-03-16 13:18:58 UTC 2025-12-12 23:37:30 UTC hello@padlet.com Header - Navigation jmortensen7 https://padlet.com/jmortensen7/weblayout/wish/1315506468 2021-03-16 13:22:09 UTC https://padlet.com/jmortensen7/weblayout/wish/1315506468 Body jmortensen7 https://padlet.com/jmortensen7/weblayout/wish/1315509481 2021-03-16 13:22:41 UTC https://padlet.com/jmortensen7/weblayout/wish/1315509481 Footer jmortensen7 https://padlet.com/jmortensen7/weblayout/wish/1315514608 2021-03-16 13:23:31 UTC https://padlet.com/jmortensen7/weblayout/wish/1315514608 Body jmortensen7 https://padlet.com/jmortensen7/weblayout/wish/1315537043 <body>
<!-- Navbar Fragment -->



<!-- Footer Framen ->
</body>]]> 2021-03-16 13:27:26 UTC https://padlet.com/jmortensen7/weblayout/wish/1315537043 Head jmortensen7 https://padlet.com/jmortensen7/weblayout/wish/1315560691 <head>
<!-- Head Fragment -->

</head >]]> 2021-03-16 13:31:34 UTC https://padlet.com/jmortensen7/weblayout/wish/1315560691 Head jmortensen7 https://padlet.com/jmortensen7/weblayout/wish/1315575607 2021-03-16 13:34:11 UTC https://padlet.com/jmortensen7/weblayout/wish/1315575607 Title jmortensen7 https://padlet.com/jmortensen7/weblayout/wish/1315580981 2021-03-16 13:35:10 UTC https://padlet.com/jmortensen7/weblayout/wish/1315580981 Layout jmortensen7 https://padlet.com/jmortensen7/weblayout/wish/1315595966 2021-03-16 13:37:50 UTC https://padlet.com/jmortensen7/weblayout/wish/1315595966 Thymeleaf Layout - a big focus is to maintain HTML doc in each fragment and layout. This allows file based development prior to build. jmortensen7 https://padlet.com/jmortensen7/weblayout/wish/1315627025 <!-- See fragments in GitHUB -->
<!-- See usage example in GitHub -->
<!-- This page is illustrative and contains ideas about HTML formatting -->
| <!DOCTYPE HTML>
| <html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml" lang="en">
| 

| <!-- Head, think of things that are more meta or format oriented -->
| <head>
|     <div th:replace="fragments/headfile :: header"></div>
|     <!-- Head defaults to ellipses, details are added by ThymeLeaf layout fragment -->
|     <div layout:fragment="metadata">...</div>
| </head>
| 

| <body>
|     <!-- Header of Page, includes Navigation -->
|     <div th:replace="fragments/header :: header"></div>
| 

|     <!-- Body defaults to ellipses, details are added by ThymeLeaf layout fragment -->
|     <div layout:fragment="content">...</div>
| 

|     <!-- Footer of Page, includes things like contacts or copywrite -->
|     <div th:replace="fragments/footer :: footer"></div>
| </body>
| </html>]]> 2021-03-16 13:43:14 UTC https://padlet.com/jmortensen7/weblayout/wish/1315627025 Jinja Layout - hides HTML and uses blocks to replace layout definition, it does not retain HTML. Note... Python can render without rebuild. jmortensen7 https://padlet.com/jmortensen7/weblayout/wish/1315700875 <!-- See base.html in GitHub -->
<!-- See usage example in GitHub -->
<!DOCTYPE html>
| {% extends "homesite/base.html" %}
|  {% block content %}


| {% endblock %}

]]> 2021-03-16 13:55:34 UTC https://padlet.com/jmortensen7/weblayout/wish/1315700875 Concept of Templating jmortensen7 https://padlet.com/jmortensen7/weblayout/wish/1315726765 HTML documents can be repetitive from file to file.  Template Engines are tools that help us break HTML code into smaller pieces that we can reuse across multiple HTML files as reusable parts shown in this illustration. Flask uses Jinja, Spring uses Thymeleaf. Both of these provide scripting that allow you to feed variables and logic into HTML.]]> 2021-03-16 13:59:52 UTC https://padlet.com/jmortensen7/weblayout/wish/1315726765 Body jmortensen7 https://padlet.com/jmortensen7/weblayout/wish/1319813327 This area is where majority of the customization for a page belong.]]> 2021-03-17 10:08:14 UTC https://padlet.com/jmortensen7/weblayout/wish/1319813327 CSS / Script - Growth Area jmortensen7 https://padlet.com/jmortensen7/weblayout/wish/1319827906 Style and JavaScript standard for Website]]> 2021-03-17 10:13:42 UTC https://padlet.com/jmortensen7/weblayout/wish/1319827906 Template concept jmortensen7 https://padlet.com/jmortensen7/weblayout/wish/1319844784 Templates usually take advantage of inheritance, which includes a single base template that defines the basic structure of all subsequent child templates. You use the tags {% extends %} and {% block %} to implement inheritance.]]> 2021-03-17 10:19:44 UTC https://padlet.com/jmortensen7/weblayout/wish/1319844784 jmortensen7 https://padlet.com/jmortensen7/weblayout/wish/1323531373 2021-03-18 02:25:15 UTC https://padlet.com/jmortensen7/weblayout/wish/1323531373 jmortensen7 https://padlet.com/jmortensen7/weblayout/wish/1323591518 2021-03-18 02:50:51 UTC https://padlet.com/jmortensen7/weblayout/wish/1323591518 Layout concept jmortensen7 https://padlet.com/jmortensen7/weblayout/wish/1712912430 Thymeleaf pages are built by embedding common page component code directly within each view to generate the final result.]]> 2021-09-02 14:36:30 UTC https://padlet.com/jmortensen7/weblayout/wish/1712912430 Tab in Browser jmortensen7 https://padlet.com/jmortensen7/weblayout/wish/1712931858 2021-09-02 14:43:08 UTC https://padlet.com/jmortensen7/weblayout/wish/1712931858 jmortensen7 https://padlet.com/jmortensen7/weblayout/wish/1712936855 2021-09-02 14:45:05 UTC https://padlet.com/jmortensen7/weblayout/wish/1712936855