Spring Boot Bootcamp – Workbooks and Challenges
)}
HTML Cheat Sheet

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
4 students
5

100%
4

0%
3

0%
2

0%
1

0%
Written Reviews
There are no written reviews yet.

Privacy PolicyTerms of Service