Spring Boot Bootcamp – Workbooks and Challenges
)}

HTML Cheat Sheet

As a Spring Boot developer, your main concern is the backend.

Front End: Graphical interface of a website written in HTML and CSS.

Backend: Server-side logic that stores and manages data.

You are not expected to know HTML. Use this cheat sheet as a guide.

Useful Definitions:

  • block: takes up the entire width.

  • inline: only takes up the necessary width.

  • Container Tag: contains an opening tag and a closing tag.

    • opening tag: <p>Hello
    • closing tag: <p>Hello</p>
    • Content exists between the opening and closing tag.
    • <p>Hello</p>
  • Empty Element: Does not need a closing tag.

    • <img src="mona-lisa">
    • <link href="path">
    • <input type="text">
    • <br>
    • You can optionally add a closing slash <img src="mona-lisa"/>.

Metadata

  • <head>: contains metadata.
  • <title>: title of the document.
  • <style>: you can define CSS here.
  • <link>: links an HTML template to an external resource.
    • Empty Element.
    • th:href = "path-to-resource"
    • rel = "relationship to document"
<link th:href="@{/path-starts-from-static}" rel="stylesheet">

Visual Elements

  • <body>: contains the visual elements.
<body> //visual elements go here. </body>

Container

<div> is a container that groups HTML content.

<div> <h1>Hello</h1> <p>Spring</p> </div>

<div> is block-level.

<div>Hello</div> <div>Spring</div>

Screen Shot 2022-06-12 at 4.58.29 PM.png

Span Container

<span> is also a container that groups HTML content.

<span> <h1>Hello</h1> <p>Spring</p> </span>

<span> is an inline element.

<span>Hello</span> <span>Spring</span>

Screen Shot 2022-06-12 at 4.59.08 PM.png

Headers

<h1> ... <h6>.

Screen Shot 2022-06-18 at 2.19.29 AM.png

Text

<p> is block-level text.

<p>Spring</p> <p>Boot</p> <p>Development</p> <p>Bootcamp</p>

Screen Shot 2022-06-12 at 4.59.57 PM.png

Images

  • <img>: displays an image.
    • Empty Element.
    • src = "path".
    • alt= "alternative text if image fails to show".

Layout

Screen Shot 2022-06-15 at 2.45.54 AM.png

Code

<img src="images/A.png" alt="A"/> <img src="images/B.png" alt="B"/> <img src="images/C.png" alt="C"/> <img src="images/D.png" alt="D"/>

Output

Screen Shot 2022-06-12 at 5.11.58 PM.png

Table

  • <table>: displays a table.
  • <tr>: table row (one table can contain many rows).
  • <th>: header cell (one row can contain many headers).
  • <td>: data cell (one row can contain many data cells).
<table border="solid" width="300"> <tr> <th>House</th> <th>Name</th> <th>Position</th> </tr> <tr> <td>Gryffindor</td> <td>Harry</td> <td>Seeker</td> </tr> <tr> <td>Slytherin</td> <td>Crabbe</td> <td>Beater</td> </tr> <tr> <td>Hufflepuff</td> <td>Cedric</td> <td>Seeker</td> </tr> </table>

Screen Shot 2022-06-12 at 5.21.49 PM.png

Lists

  • <ul>: unordered list.
  • <ol>: ordered list.
  • <li>: items in a list.
<ol> <li>Pancakes: $2.99</li> <li>Eggs: $3.29</li> <li>Bacon: $4.99</li> </ol>

Screen Shot 2022-06-12 at 5.25.36 PM.png

Form

  • <form>: defines an HTML form for user input.

  • <input>: defines an input for the form.

    • Empty Element.
    • type="text": input is a textfield.
    • type="date": input is a date.
    • type="submit": input is a submit button.
    • type="hidden": hides the input.
  • <br>: produces a Line Break

<form> <input type="text" placeholder="First Name"> <input type="text" placeholder="Last Name"> <p> Date of Birth </p> <input type="date"><br><br> <input type="submit" value="Submit"> </form>

Screen Shot 2022-06-12 at 5.35.17 PM.png

Hyperlink

  • <a>: defines a hyperlink.
    • th:href = "@{/url endpoint}": GET request to relative path.
    • th:href = "@{/url endpoint(parameter = value)}": GET request to relative path while passing in a parameter.
    • role="button": anchor tag takes the role of a button.

Common HTML Attributes

HTML attributes are specified in the opening tag.

  • class: assigns an HTML element to a class in a stylesheet.
  • width: controls the width of an element.
  • height: controls the height of an element.
  • border: controls the border of an element (usually none, or solid)
  • style: adds styling. For example: "style="color:red"
  • th:style: the styling depends on a Thymeleaf expression.
<table border="solid" width="100%"> <tr> <th>Item</th> <th>Revenue</th> <th>Cost</th> <th>Profit</th> </tr> <tr style="background: green"> <td>Table</td> <td>200</td> <td>49</td> <td>151</td> </tr> <tr style="background: red"> <td style="color: white">Table</td> <td style="color: white">49</td> <td style="color: white">200</td> <td style="color: white">-151</td> </tr> </table>

Screen Shot 2022-06-12 at 5.44.37 PM.png

Thymeleaf Counterparts

The counterpart can equal the result of a thymeleaf expression.

  • Variable Expression: ${...}
  • Selection Expression: *{...}
  • Link Expression: @{...}
NormalCounterpartExample
hrefth:href<link th:href="@{path-to-resource-from-static}"
hrefth:href<a th:href="@{url-endpoint(param='value')}"
srcth:src<img th:src="@{path-to-image}"
styleth:style<p th:style="${condition} ? 'str' : 'str'"
valueth:value<option th:value="${modelAtt}">

Feedback Summary
5.0
3 students
5

100%
4

0%
3

0%
2

0%
1

0%
Written Reviews
There are no written reviews yet.