HTML: A beginner's cheat sheet [As Seen On: IT Training Tips]
Any web page that you might visit using a web browser is almost always just some sort of coded document. There are multiple types of different coding languages that all function slightly different and are for different purposes. Most commonly though, any website you encounter will be written in Hypertext Markup Language, or HTML for short.
No matter what level of web development you intend to pursue, learning HTML is essential in order to effectively get the job done. Learning HTML is the first step for any sort of web development whether you are creating a website for Indiana University or creating a site for yourself.
A computer doesn’t know words, paragraphs, headings, etc. so you have to tell it what is what. That’s where HTML comes in. As humans, we can discern structure by context and content. We are capable of determining when a block of text is a list, a quote, or even a poem. But, computers cannot do this by themselves. To a computer, everything is just an arbitrary string of letters, numbers, and other symbolic characters.
In order to inform any computer of the meaning behind the generic text that we give it, we use markup. Markup is like tagging or labeling–it adds structure to long text, so that a computer can make sense of it. The tags we use in HTML help us categorize the information from any passage of text, so the computer can then recognize items that are in that same category. HTML allows us to define the meaning and structure of the otherwise arbitrary blocks of text in a document.
Below is a beginner’s guide of HTML codes that you can use to help get you started. While this guide can be helpful, keep in mind that IT Training offers instructor led and self paced training of HTML that might assist you at a higher level. These courses are offered online or in the classroom!
Text Formatting
Paragraphs
The paragraph element is perhaps the most common element found on the web today. This element fits under the loosely-defined category of “structural markup” and is a block-level element.<p>Your paragraph here.</p>
Headings
Like paragraphs elements, heading elements are block-level elements that will help us convert some of our text into structure for our document. However, unlike paragraphs, there are different kinds of headings, or more specifically, different levels of headings.<h1>Your page/site title here</h1>
<h2>Your main sections here</h2>
<h3> Your sub-sections here</h3>
Bold Text
This makes the weight of your font bold.<b>Your bold text.</b>
Italic Text
This makes your text italicized.<i>Your italic text.</i>
Underlined Text
Underlines your text.<u>Your underlined text. </u>
Strike-through
Places a line through your text to strike it out.<s>Your crossed out text here.</s>
Lists
Lists create structural blocks, much like headings and paragraphs, but the syntax for creating lists is slightly more complicated. Not only do we have to specify the boundaries of the entire lists, but we also have to identify individual items in the list. There are two common types of lists: ordered lists (numbers, letters, etc.) and unordered lists (bullets).<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
<li>Ordered list item 3</li>
</ol>
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
<li>Unordered list item 3</li>
</ul>
Attributes
Attributes do not supply any additional content to an element, but instead, they modify the markup itself. Attributes are inserted directly into the opening tag, but do not appear in any form in the closing tag. The attribute name is always followed by an equal sign, and then the value of the attribute in the double quotes.This is an example:
<tag attr="value" attr2="value2">Content</tag>
Aligning Elements
You can align your headings and paragraphs using an attribute of in-line CSS.<h1 style="text-align:center;">Your aligned heading</h1>
<h1 style="text-align:left;">Your aligned heading</h1>
<h1 style="text-align:right;">Your aligned heading</h1>
<h1 style="text-align:justified;">Your aligned heading</h1>
Hyperlinks
You can create hyperlinks that allow you to jump from one web page to another by using the anchor element and attaching the hypertext reference attribute.<a href="http://yourlink.com">Your text here.</a>
Empty Elements
Most elements must have an opening tag and a closing tag, which surround the content they are modifying. However, there are some elements that are not permitted to have content.This is an example:
<empty />
Line Breaks
This is like hitting the enter key–it puts your content on a new line.<br />
Images
To include an image on your webpage you will need to have the image uploaded somewhere online. Then, simply use the link to reference the image with the src attribute and the alt attribute to describe your image for screen readers and search engines.<img src="http://yourimageline.com" alt="describe this image" />
