Slightly Simple HTML (Part 2)

The first blog seem well received, so I've decided to make another similar blog! However, this one will be a more complicated (don't worry, it's still understandable for the top 50% smartest idiots). In this next part, there will be more things you can add to your blogs and quizzes, like data tables, tooltips, better text styling, and more!

I recommend you read Part 1 before reading this blog, if you haven't already. Let's jump right into it!

Add an Image

------------------------------

<img src="imageSrc"

------------------------------

To add an image, you have to use the <img> tag. Inside the imageLink box, you put the image's src (source code). To get the src:

This feature is useful in several ways, especially in quizzes like these.

If you'd like to have the alt text, width, and height attributes, you can use this code:

------------------------------------------------------------------------------------

<img src="imageSrc" alt="example" width="###" height="###">

------------------------------------------------------------------------------------

This is quite self-explanatory. Width and height define the, well, width and height of your image. 'Alt' is the text that shows if the image could not be loaded for any reason.

Add a List

----------------------

<ul>

<li>insertTextHere</li>

</ul>

----------------------

Lists are very simple. They start with the <ul> tag (for bullet points) or <ol> (for numbered lists). All the list items are defined by the <li> tag, and end with the </li> tag.

Add a Table

------------------------------

<table>

<tr>

</tr>
  <tr>
    <td>insertTextHere</td>

</tr>
  <tr>

<td>insertTextHere</td>

</tr>

</table>

------------------------------

If you ran this code, you'd notice that the text is arranged into neat columns, but there is no border (you have to style the table). Before that, here are what the above tags mean:

- <table> defines a table

- <tr> defines one row

- <th> defines a table header

- <td> defines a cell

To clarify, each cell you add between two <tr> tags is a new column. Closing the tag and adding a new <tr> creates a new row. Headers should be in the first row, and the <table> tag should enclose it all.

After you have all your data, you have to style the table.

-------------------------------------------------------------------------------------

<style>

table {font-family:examplefont; border-collapse: collapse;}

td, th {border: #px solid color; text-align: direction; padding: #px;}

</style>

<table>

<tr><th>insertDataHere</th><th>insertDataHere</th></tr>

<tr><td>insertDataHere</td><td>insertDataHere</td></tr>

<tr><td>insertDataHere</td><td>insertDataHere</td></tr>

</table>

-------------------------------------------------------------------------------------

Looks complicated, but not too much. The <style> tag indicates styles, and 'table' right after indicates that we're styling the table. Td and th represent the cell and header respectively. After comes the styling...all of it is in the next section!

Note: Border collapse isn't in the next section. Basically what it does is collapse the cell borders to make them look like one border instead of two, and makes the table look a lot nicer.

The style attribute is the most simple way to make your text look the way you want it to.

In Part 1, I did show you how to change the text color and pixel size of your text, however I've discovered a much easier way to do it. Here are a few useful things you can do:

Change Color

-----------------------------------------------------------------

<p style="color:colorname;">insertTextHere</p>

-----------------------------------------------------------------

Though not as specific down to the hex code, it's a more simple way to change the color, but still allows for good customization. In 'colorname', simply name your color and the text you've inserted will turn that color. You can find all the colors that work here.

If the color you've specified isn't on the list, then the text color will be black.

Change Font

---------------------------------------------------------------------------

<p style="font-family:examplefont;">insertTextHere</p>

---------------------------------------------------------------------------

To change the font, you use the 'font-family' property. After, add your font name, and your text will appear in that font. You can find some of the fonts you can use here.

Change Font Size

---------------------------------------------------------------------------

<p style="font-size:###%;">insertTextHere</p>

---------------------------------------------------------------------------

To change the fontsize using style, instead of entering pixels you enter a percentage. 100% is the normal size, and it will set to 100% if you enter an invalid number (you can only enter positive numbers).

Text Alignment

---------------------------------------------------------------------

<p style="text-align:direction;">insertTextHere</p>

---------------------------------------------------------------------

Insert left, center, or right and your text will align appropriately.

^{This does override the 'alignment' option on blogs.}

Border and Padding

-------------------------------------------------------------------------------------------

<p style="border: #px solid color; padding: #px;">insertTextHere</p>

-------------------------------------------------------------------------------------------

For the border, you have to enter the thickness (in pixels), type, and color. For the padding (the space between the text and border), you enter the pixel value.

The semicolon (;) separates the code. If you want the text to be in the 'verdana' font, green, and at 150% size, you'd add the respective code, separated by semicolons and surrounded by quotation marks, like this:

<p style="font-family:examplefont; color:green; font-size:150%;">insertTextHere</p>

Easy! Also, styling is used for more than text (think for data tables above).

Add a Tooltip

In case you don't know, a tooltip is that little box that appears when you hover over something.

------------------------------

<p title="exampleTooltip">insertTextHere</p>

------------------------------

This code will simply show the words in the 'insertTextHere' section. Once hovered over by the mouse, it'll show what you've entered in the 'exampleTooltip' section after a slight delay.

More Fun With Links

In part 1, I showed you how to do simple links using the <a> tag. Time to get more advanced!

Open Link in a New Tab

-------------------------------------------------------------------

<a href="link" target="_blank">insertTextHere</a>

-------------------------------------------------------------------

This is identical to the usual code. However, you add the 'target' attribute and make it equal '_blank'. Then you can add your text and link, and it will magically open in a new tab!

Link An Image

---------------------------------------------------------

<a href="link"><img src="imageSrc"></a>

---------------------------------------------------------

To link an image, you simply put the image tag in place of where the text would normally be. Then, you add your image src and URL. Done!

Show Elements On Click

------------------------------------------------------------------------

<style>

summary {list-style: none;

</style>

<details>

<summary>insertTextHere</summary>insertTextHere

</details>

-----------------------------------------------------------------------

The first 'insertTextHere' is the text that you click for the hidden text to appear (with this code, it'll appear below). The second is the text that will appear (you can also put other elements in place of normal text, and style the visible text to make it look like a button!).

The section you've been waiting for! Full of not the most useful (but pretty cool) HTML compatible with JetPunk.

Add a Textbox

------------------------------

<div contenteditable="true">insertTextHere</div>

------------------------------

Using this code, you can create a textbox that the user can edit (the box will only be edited for the user themselves, not everyone). The 'InsertTextHere' section is the text that will appear in the box initially.

Backwards Text

----------------------------------------------------

<bdo dir="rtl">insertTextHere</bdo>

----------------------------------------------------

Ok, completely useless. Cool party trick though, I guess.

My skills (both blogging and coding) have greatly improved since the last blog, which is almost shameful in my opinion. If you have any recommendations for more HTML you'd like me to show, I'd be happy to make a third! I hope this is useful to you guys. Thanks for reading, and if you don't understand something, feel free to ask!

Note: While making this blog I realized you're not able to use the id attribute to scroll to a section, as well as Iframes (basically putting a webpage inside a webpage) and videos. Makes sense as they could probably be used the wrong way.