Before I started teaching myself how to code, the word “HTML” sent me into a bit of a panic, primarily because I never completely understood it. I couldn’t wrap my head around how garbled nonsense translated into beautifully designed web pages, let alone how I would go about replicating lines and lines of code. When I began researching HTML to learn more, the sheer volume of information I was uncovering was overwhelming to say the least. There were thousands of Google search results, and seemingly more variations and methods to go about writing HTML codes. If you take away one point from this post, let it be this: do not Google HTML, for your own sanity.
Now that I’ve had some time to learn the ropes and experiment with HTML both here on Brewing Up Books as well as on several other platforms, I decided to compile a list and explanations of my most frequently used HTML codes.
What is HTML?
HTML is a classification of Internet coding. In typing a series of scary-looking, seemingly nonsense lines of code, a webpage designer can transform a boring, non-formatted website into a stunning array of pictures, links, text, etc.
Throughout this tutorial, I’ll be using “…” to denote where you can enter your own text to achieve a desired result. Similarly, in replacing any of the fields that I have entered, you can alter a given aspect of the result (ie. the color, size, etc.), so don’t be afraid to experiment!
HTML Color Codes
Each color and shade is assigned a unique, six-digit code. For examples, this is #2ECC71, this is #9B59B6, and this is #3498DB. These codes are universal – in other words, the same sequence will always result in the exact same color regardless of what device you are using, the country you are in, the wifi network to which you are connected, etc.
I generally use this website to generate color codes.
To utilize any of the codes in this post, remove ALL of the asterisks from the codes.
|Subscript||<*sub>…<*/sub>||this is sample text|
|Superscript||<*sup>…<*/sup>||this is sample text|
|Small||<*small>…<*/small>||this is sample text|
There are two different ways to adjust the color of text using HTML. The first is the more straightforward, albeit somewhat limited in color selection – simply insert a color name (ie. red, yellow, blue). This only allows for an array of basic colors, essentially the colors of the rainbow, with no option to choose different shades or hues. Red will always equate to the same color of red.
<*span style=”color: purple;”>Sample Text<*/span> = Sample Text
The second formatting option requires you to have a knowledge of or access to a website with information regarding HTML color codes that are referenced in the previous section. Instead of typing a color name, you insert a # followed by the six-digit code of the color that you would like to display.
<*span style=”color: #ff33ea;”>Sample Text<*/span> = Sample Text
There are several ways to format a link, each building upon the next. The most basic code can be written:
<*a href=”URL”>link text<*/a> = link text
In the code above, replace “URL” with the website address and “Link Text” with the text you would like to be displayed in its place. In the example above, I designated the words “Link Text” to direct users to Google’s homepage.
If you would like a link to open in a new window every time it is clicked on, regardless of the user’s device settings, use this format:
<*a href=”URL” target=”_blank” rel=”noopener”>link text<*/a> = link text
To change the color of a given link, use the following format, replacing the color code with one of your choosing:
<*a style=”color: #ff33ea;” href=”URL”>link text<*/a> = link text
If you would like text to be offset by a given color box, such as the green rectangle around my author bio at the bottom of this post, utilize a variation of this code:
<* div style=”padding: 12px; background-color: #d0f5a9; line-height: 1.4;”>text here<*/div>
You can adjust the value after “padding” to change the dimensions of the colored box; smaller values will decrease the size of the box, while larger values will increase it. To adjust the color, replace the HTML color code after “background-color” with one of your choosing.
Before launching into my descriptions of image codes, I wanted to define the phrase “Image Address” because it isn’t very commonly used or referred to. Find an image on a webpage (it can even be one on Brewing Up Books’ sidebar); it doesn’t matter if the image is serving as a link to something. Left click on the image. Regardless of whether you’re using a Mac or a PC, there should be an option to “Copy Image Address.” This image address is the direct link to that specific photo. Just to prove this to yourself, select “Copy Image Address.” Open up a new webpage, and click paste in the URL bar. Your image should pop up.
The most basic way to insert an image is editing this code, replacing the text in quotation marks with your desired image address:
<*img src=”picture.jpg” />
Adjusting the size of the image can be accomplished with a very similar code; simply replace the number of pixels below with the desired width and height:
<*img style=”width: 304px; height: 228px;” src=”picture.jpg” />
Images, when clicked upon, can also function as links, directing users to a given website. To achieve this, utilize this code:
<*img src=”smiley.gif” />
In the formatting above, replace default.asp with the website URL that you want to send readers to if they click the image. Replace smiley.gif with the image address of the picture that you would like to display. For both fields, do not delete the quotation marks, and ensure that there are no spaces between each quotation mark and your entered text.
Short Quotation Tag = <*q>…<*/q>
This is a short quotation. This is a short quotation. This is a short quotation. This is a short quotation. This is a short quotation. This is a short quotation. This is a short quotation.
Long Quotation Tag =
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
Every basic table (such as the one earlier in this post) can be created using some variation of this code:
<*table style=”width: 100%;”>
<*td>Row 1, Input 1<*/td>
<*td>Row 1, Input 2<*/td>
<*td>Row 1, Input 3<*/td>
<*td>Row 2, Input 1<*/td>
<*td>Row 2, Input 2<*/td>
<*td>Row 2, Input 3<*/td>
As an example, the code above would appear as the following:
|Header #1||Header #2||Header #3|
|Row 1, Input 1||Row 1, Input 2||Row 1, Input 3|
|Row 2, Input 1||Row 2, Input 2||Row 2, Input 3|
To edit the table, replace the “Header” and “Row _, Input _” with the values of your choosing. If you would like to delete rows or columns, simply delete the corresponding lines of code. If you would like to add rows or columns, copy and paste preexisting lines of the code, editing them to suit your needs.