HTML-CSS-Cheat-Sheet/html.html at master · KKramer03/HTML-CSS-Cheat-Sheet · 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
<!DOCTYPE html>
<html>
<head>
    <title>HTML Cheat Sheet!</title>
    <link type="text/css" href="styles.css" rel="stylesheet">
</head>
    <body>
        <div>
            <h1 class="title">HTML Cheatsheet!</h1>
         </div>
         <div class="summary"><p>HTML, or Hyper Text Markup Language is a markup language that uses elements represented by the tags in
        order to build a website. HTML is heavily focused on content and acts as the structure and
    the building blocks for web development.</p></div>
         <div class="info">
             <h2 style="margin-left:10px;"><u>Basic HTML Layout</u></h2>
            <img src="https://henryegloff.com/media/how-to-code-a-basic-webpage-using-html-and-css-7.jpg" alt="HTML Code Layout" style="height:206px; width:300px;">
          </div>
          <br>
            <div class="info">
                <h2 id="Important"><u>The most important parts of an HTML page</u></h2>
                <p>The most important parts of a webpage are &lt;!Doctype HTML&gt; and &lt;html&gt;.
                    These are declarations that tell the computer that you are using HTML.
                    The other important tags to start a page are &lt;head&gt;, &lt;title&gt;, and &lt;body&gt;.
                    The &lt;head&gt; tag encompasses the &lt;title&gt; tag and the link to an external CSS file.
                    Any text in the &lt;title&gt; tag is displayed as text in the tab menu, while the &lt;body&gt;
                    tag ecompasses all content displayed on the website itself. &lt;!Doctype HTML&gt; is an empty
                    element and requires no closing tag.
                </p>
            </div>
            <br>
        <div class="info">
        <div>
            <h2 id="Headings"><u>Headings</u></h2>
            <h1>Heading 1</h1>
            <h2>Heading 2</h2>
            <h3>Heading 3</h3>
            <h4>Heading 4</h4>
            <h5>Heading 5</h5>
            <h6>Heading 6</h6>
        </div>
        <div>
            <p>The text above this represents the 6 heading tags &lt;h1&gt;, &lt;h2, &lt;h3&gt;, &lt;h4&gt;,
               &lt;h5&gt;, and &lt;h6&gt; from largest to smallest.
        </p>
        </div>
        </div>
        <div class="info">
            <h2 id="Paragraphs"><u>Paragrahs</u></h2>
            <p>This text is made using the paragraph &lt;p&gt; tags! This tag can be used to type any amount of text from one letter to thousands of words.</p>
        </div>
        <div class="info">
            <h2 id="Links"><u>Links</u></h2>
            <p>There are three types of links, <b>Absolute links</b>, <b>Relative links</b>, and <b>ID links</b>. They all use
               &lt;a&gt; tags. Absolute links link to url's "https://www.google.com/", Relative links link
               to files such as when making a multi page site "example.html", and ID links link to the element
               with the specified attribute when preceded with a #. For example #middle will link to the tag with id="middle". ID links
               are useful for navigation on the same webpage. All 3 of the links have their destination inside the
               &lt;a&gt; tag's href attribute. In between the two &lt;a&gt; tags is the clickable content. This can be a <a href="https://www.w3schools.com/tags/tag_a.asp" target="_blank">word</a>
               or image.<a href ="https://www.tutorialspoint.com/How-to-use-an-image-as-a-link-in-HTML#:~:text=To%20use%20image%20as%20a,add%20the%20height%20and%20width." target="_blank"><img src ="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt ="HTML5 logo" style ="height:25px; width:25px; vertical-align: middle;"></a>
               The attribute target="_blank" can be added to opne the destination in a new tab. Using # in the href attribute
               will automatically take you to the top of the screen without having to assign an id to an element.
               Link example &lt;a href="https://www.w3schools.com/" target="_blank"&gt; Click here!&lt;/a&gt;


            </p>
        </div>
        <div class="info">
            <h2 id="Linebreaks"><u>Line breaks</u></h2>
            <p>Line<br>break<br>example<br><br>To make line breaks like seen above, all you need to do is
                insert the &lt;br&gt; tag. It will make a break wherever you put it, and since it's an
                empty tag, you don't need to close it.
            </p>
        </div>
        <div class="info">
            <h2 id="Images"><u>Images</u></h2>
            <p>Images are made using &lt;img src="Image link here"&gt; The &lt;img&gt; tag is an example of an empty element and doesn't require a closing tag. The alt="description here"
                attribute can be added to the &lt;img&gt; tag to add descriptions to the image.  </p>
        </div>
        <div class="info">
            <h2 id ="Lists" style="margin-bottom: 0px;"><u>Lists</u></h2>
            <span>
            <ul style="display:inline-block; padding-left: 20px;">
                <li>An</li>
                <li>unordered</li>
                <li>list</li>
            </ul>
            <ol style="display:inline-block;">
                <li>An</li>
                <li>ordered</li>
                <li>list</li>
            </ol>
            </span>
            <p style="margin-top: 0px;">There are two types of lists &lt;ul&gt; unordered lists and &lt;ol&gt; ordered lists. Unordered lists list
            its content with the chosen symbol (bulletpoints or other symbols). Ordered lists list them numerically,
        (1, 2, 3). The list's content are enclosed within the &lt;ul&gt; or &lt;ol&gt; tag. Each individual
    line of the list is enclosed within the &lt;li&gt; tag for both lists.</p>
        </div>
        <div class="top">
        <a href="#">To Top</a>
    </div>
    </body>
</html>