htmlcss/index.html at master · NigunSanjai/htmlcss · 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<!-- tell the browser that this is html document and browser sould render this doc as html 5 -->
<html lang="en">
  <!-- lang can spectify the semnatic meaning -->
  <!-- should start with this tag -->
  <!-- Remember about the semnatic html which gives a meaning to the content that the browser takes care of while rendering-->

  <head>
    <meta charset="UTF-8" />
    <!--link tag has only purpouse of linking external css href and rel are the attributes-->
    <link href="style.css" rel="stylesheet" />
    <!-- META does not contain a closing tag! charset is representing all the charaters-->
    <!-- // not visible in the browser window(external matters!) -->
    <title>The basic Langugage of the Web: HTML</title>
    <!--this is the internal css!! using the style tag this is not pratical use!!-->
    <!--<style>
      h3 {
        color: aquamarine;
      }
    </style> -->
  </head>
  <body>
    <div class="main-b">
      <!-- // WILL ALWAYS BE visible -->
      <!-- Heading are in hierarchy from h1 to h6 (primary is h1) -->
      <!-- heading is to break up the doc into logical sections (semnatics) -->
      <!-- good pratice is to have one h1 per html page -->
      <header class="main-h clearfix">
        <!--header is again a html 5 element for semnatic purpouse-->
        <h1>📘 The Code Magazine</h1>
        <nav>
          <!--nav is used to mention or group the navigation elements and encloses the anchor elements as a block -->

          <!--a tag is a inline element not a block element  -->
          <a href="blog.html">Blog</a>
          <a href="#">Challenges</a>
          <a href="cssflexboxandgrid/flexbox.html">Flexbox</a>
          <a href="cssflexboxandgrid/css-grid.html">CSS Grid</a>
        </nav>
        <!-- <div class="clear"></div> -->
      </header>

      <div>
        <!-- <b> for bold and not a good pratice becz of semnatic meaning. use<strong> <em> -->
        <article>
          <header>
            <!--article element is a semnatic representation of blogs-->
            <h2>The Basic Language of the Web: HTML</h2>
            <!--Inline CSS style="color:value" never be used!!!-->
            <div class="sub-h">
              <img
                src="laura-jones.jpg"
                alt="author"
                height="100"
                width="100"
                class="author-img"
              />
              <p id="author" class="a">
                Posted by <strong> Laura Jones</strong> on Monday, June 21st
                2027
              </p>
            </div>
            <img class="main-img" src="post-img.jpg" alt="main" width="800" />
          </header>
          <!-- image tag src and alt is highly imp can also specify width and height -->
          <p>
            All modern websites and web applications are built using three
            <em>fundamental</em>
            technologies: HTML, CSS and JavaScript. These are the languages of
            the web.
          </p>

          <p>
            In this post, let's focus on HTML. We will learn what HTML is all
            about, and why you too should learn it.
          </p>
          <div>
            <!-- div is a more generic semnatic element!! dliv gives block level representation-->
            <h3>What is HTML?</h3>
            <p>
              HTML stands for <strong>H</strong>yper<strong>T</strong>ext
              <strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
              language that web developers use to structure and describe the
              content of a webpage (not a programming language).
            </p>
            <p>
              HTML consists of elements that describe different types of
              content: paragraphs, links, headings, images, video, etc. Web
              browsers understand HTML and render HTML code as websites.
            </p>
            <p>In HTML, each element is made up of 3 parts:</p>
            <ol>
              <li>The opening tag</li>
              <li>The closing tag</li>
              <li>The actual element</li>
            </ol>
            <p>
              You can learn more at the
              <a href="https://developer.mozilla.org/en-US/" target="_blank">
                MDN Web Docs.</a
              >
            </p>
          </div>
          <h3>Why should you learn HTML?</h3>
          <p>
            There are countless reasons for learning the fundamental language of
            the web. Here are 5 of them:
          </p>
          <ul>
            <li>To be able to use the fundamental web dev language</li>
            <li>
              To hand-craft beautiful websites instead of relying on tools like
              Worpress or Wix
            </li>
            <li>To build web applications</li>
            <li>To impress friends</li>
            <li>To have fun 😃</li>
          </ul>
          <p>Hopefully you learned something new here. See you next time!</p>

          <!--all these html 5 extra tags if they dont have any appeling changes these work on seo or semnatic purpouses -->
        </article>
      </div>
      <div>
        <!--aside element to provide secondary content to the page-->
        <aside>
          <h3>Related Posts</h3>
          <ol>
            <li class="r-l">
              <img src="related-1.jpg" alt="related-1" width="75" />
              <a href="#">
                How to Learn Web Development
                <p class="r-a">By Rns</p>
              </a>
            </li>
            <li class="r-l">
              <img src="related-2.jpg" alt="related-1" width="75" />
              <a href="#">
                The Unknown power of Css
                <p class="r-a">By Rpk</p>
              </a>
            </li>
            <li class="r-l">
              <img src="related-3.jpg" alt="related-1" width="75" />
              <a href="#">
                Why Js is Awesome
                <p class="r-a">By Mbs</p>
              </a>
            </li>
          </ol>
        </aside>
      </div>
      <footer>
        <!--html entity to have symbols-->
        <!-- id anc class can have same names and mltiple classes can be used by seperatiog them with space -->
        <p id="footer" class="footer c">
          Copyright &copy;2023 by the Code Magazine
        </p>
      </footer>
      <button>&hearts;Like</button>
    </div>
  </body>
</html>