hello-html/html-tags-cheat-sheet.html at main · kelvan1/hello-html · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html><!--this declares that the document is of html-->>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width, initial-scale=1.0">
    <title>My HTML Cheat Sheet</title>
 </head>
 <body>
    <h1 id="top-of-page">My HTML Cheat Sheet</h1><!-- only found once in a html doc-->>

    <!--create a table of contents here below-->

      <h2>Table of Contents</h2>
      <div><a href="#headings">Headings.....</a></div>
      <div><a href="#paragraph">Paragraphs.....</a></div>
      <div><a href="#paragraph">Paragraphs.....</a></div>
      <div><a href="#lists">Lists.....</a></div>
      <div><a href="#anchors">Anchor tags....</a></div>
      <div><a href="#text-emphasis">Text Emphasis .....</a></div>
      <div><a href="#organising-content">organising-content .....</a></div>
      <div><a href="#breaking-text">Breaking text .....</a></div>


    <h2 id="headings">Headings</h2>
    <p>
        Headings from `h1` to `h6` identify blocks and sections.
        Every page must have one `h1`.

    </p>
    <h2 id="paragraphs">Paragraphs</h2>
    <p>
        Paragraphs of text go in `p` tags.
    </p>

    <!--here we gotta create some lists-->

    <h2 id="lists">Lists</h2>
    <h3>Unordered Lists</h3>
    <p>
        Unordered lists are marked wtih bullets points and go in
        `ul` tags. Each list item goes in an `li` tag.

    </p>

    <h4>Types of lists:</h4>

    <ul>

        <li>Unordered lists (`ul`)</li>
        <li>Ordered lists (`ol`)</li>

    </ul>

    <h3>Ordered Lists</h3>

    <p>
      Ordered lists are numbered and go in `ol` tags. Each list item goes in an `li` tag.
    </p>

    <h4>Polya's Problem Solving Framework</h4>

    <ol>

      <li>Understand the problem</li>
      <li>Come up with a plan</li>
      <li>Carry out the plan</li>
      <li>Go back and improve your solution</li>

    </ol>

    <h2 id="anchors">Anchors (i.e. links)</h2>

    <p>
      Anchor tags create links to other pages. The URL goes in the `href` attribute.
      <a href="https://duckduckgo.com">

        Go to DuckDuckGo to search for more information.

      </a>

    </p>

    <p>

      Setting `target="_blank"` will open the link
      in a new window. See
      <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a" target="_blank">
        MDN
      </a>
      for more details.

    </p>
    <p>
        Anchor tags can also create links to a new location on the same page. Instead of putting a URL goes in the "href" attribute, just use the "id" of the element you want to navigate to. This allows you to
        <a href="#top-of-page">
          Jump to the top of the page.
        </a>
      </p>
      <h2 id="text-emphasis">Text Emphasis</h2>
        <h3>Italic</h3>
            <em>
                The `em` element adds extra emphasis to the text within the opening and closing tags. This shows up as italic text in most browsers.
            </em>
        <h3>Bold</h3>
            <strong>
                You can also use the `strong` element to emphasize text. This shows up as bold text in most browsers.
            </strong>
        <!--orgnising content with div, span, and br-->
        <h2 id="organising-content">Organizing Content with `div` and `span`</h2>
        <h3>`div`</h3>
            <p>
                The `div` element is a block element, so each `div` will show up on a new line.
            </p>
            <div>1st div</div>
            <div>2nd div</div>
            <div>3rd div</div>
        <h3>`span`</h3>
            <p>
                The `span` element is an inline element, so there will be no line break between each `span`.
            </p>
            <span>1st span</span>
            <span>2nd span</span>
            <span>3rd span</span>
            <h2 id="breaking-text">Breaking text using the `br` tag</h2>
            <p>
                Replace with Haiku line 1 (5 syllables)<br>
                Replace with Haiku line 2 (7 syllables)<br>
                Replace with Haiku line 3 (5 syllables)<br>
            </p>

 </body>
</html>