Difference between revisions of "CS46"

From Coder Merlin
m (Editorial review and minor corrections)
 
Line 2: Line 2:


=== Introduction ===
=== Introduction ===
Whenever you see the div tag in HTML, think of it as the abbreviation of division because that’s precisely what it is! The div tag just defines a division or section of the HTML document. You can put anything you want inside this section, from a header to some body text.
Whenever you see the div tag in HTML, think of it as the abbreviation of ''division'', because that’s precisely what it is! The div tag just defines a division or section of the HTML document. You can put anything you want inside this section, from a header to some body text.


You would use a div tag to define a division or a section. For example, if a website was describing different kinds of fish, there would be div tags around each section describing one type of fish.
You use a div tag to define a division or a section. For example, if a website is describing different kinds of fish, there would be div tags around each section for one type of fish.


Although div tags don’t have any visual effect on the website itself, they are still beneficial. For example, they are important to use when wanting to implement a styles CSS file within that section. The div tag also makes it easier to read your code. That way, it is much easier for developers to view it.
Although div tags don't have any visual effect on the website itself, they are still beneficial. For example, they are important to use when wanting to implement a styles CSS file within that section. The div tag also makes it easier to read your code. That way, it is much easier for developers to view it.


=== Example ===
=== Example ===
To make the div tag, you would use this syntax:
To make the div tag, use this syntax:
<syntaxhighlight>
<syntaxhighlight>
<div class="myDiv">
<div class="myDiv">
</syntaxhighlight>
</syntaxhighlight>


To close the div tag, write:
To close the div tag, type:
<syntaxhighlight>
<syntaxhighlight>
</div>
</div>
Line 20: Line 20:


=== Conclusion ===
=== Conclusion ===
Another way of making your code much more readable is by tabbing the code within the div tag. This can be done by highlighting all the code with the div tag and pressing the tab key. That way, all the code within each div tag can be visually distinct.
Another way of making your code much more readable is by indenting the code within the div tag. This can be done by highlighting all the code with the div tag and pressing the tab key. That way, all the code within each div tag is visually distinct.

Latest revision as of 19:49, 8 February 2023

Within these castle walls be forged Mavens of Computer Science ...
— Merlin, The Coder

HTML div Tag[edit]

Introduction[edit]

Whenever you see the div tag in HTML, think of it as the abbreviation of division, because that’s precisely what it is! The div tag just defines a division or section of the HTML document. You can put anything you want inside this section, from a header to some body text.

You use a div tag to define a division or a section. For example, if a website is describing different kinds of fish, there would be div tags around each section for one type of fish.

Although div tags don't have any visual effect on the website itself, they are still beneficial. For example, they are important to use when wanting to implement a styles CSS file within that section. The div tag also makes it easier to read your code. That way, it is much easier for developers to view it.

Example[edit]

To make the div tag, use this syntax:

<div class="myDiv">

To close the div tag, type:

</div>

Conclusion[edit]

Another way of making your code much more readable is by indenting the code within the div tag. This can be done by highlighting all the code with the div tag and pressing the tab key. That way, all the code within each div tag is visually distinct.