Ultimate Intro to HTML [elements, attributes, links and more]

2,040 · May 7, 2014

Copy n' pasted this from another forum for Scott(Mr Hydration) but everyone else is welcome to utilize this, credits to Clark of HF.

Introduction:

Hello everyone. This tutorial will be covering the basics of HTML and any questions you may have about HTML. This is just an INTRO to html, and it does not cover everything. If you're new to HTML or you're unsure of some basics I highly recommend taking a look through this guide! Thanks for reading, and if you have any suggestions/corrections please PM me.

What is HTML?

HTML stands for Hyper Text Markup Language. HTML describes the structure of a webpage. This language is used to add colour, font, hyperlinks, and graphics on World Wide Web pages.

What is HTML used for?

HTML is used to create and structure websites. It's a worldwide standard to use HTML or xHTML for web page design. HTML will continue to form the basis of virtually all websites for a very long time, so you can see why it's a good idea to learn this language. It's also good to note that HTML is not a "programming" language because it does not compile anything. HTML does not have common conditional statements such as If/Else, nor can it evaluate expressions or do math. If you call HTML a programming language in front of developers you'll probably receive a beat down. Don't let this discourage you though, HTML is essential if you want to get into web design/web development.

Where do I start?

Before we begin coding, we must first find a text editor to code the webpages in. Odds are most of you already have a sufficient text editor on your computer. You can use Notepad if you're on PC or TextEdit if you're on Mac, but why settle for the default editors? The truth is there are TONS of editors you can use that will make web designing much easier for you. For this particular tutorial I am going to recommend the code editor Brackets for a few reasons. One, it works with Linux, OS, and Windows. Two, it's very user friendly/visually appealing. Three, it's free, and four it supports live editing which we will learn more about later on.

Download Brackets Here.

*To open your code in a browser click this icon in the top right corner of Brackets *With Brackets we can edit our code live meaning whatever changes we make to our HTML document, will be instantly made on your browser!*

HTML Elements/Tags and Their Purposes.

When you look at the code below you will see a series of tags. Tags just give you information about the content that is between them. If you look between the <body></body> tags you will find an element. An HTML element is everything from the start tag to the end tag. Most elements have an opening and closing tag, however some do not. Lets take a closer looks at the tags below, and their purposes.

Ex:

<!DOCTYPE html><html>    <head>    </head>    <body>      <p>I am a website</p>    </body></html>

This is what the script outputs:

*Notice how the only thing visible to us is the <p> element? That's because it's located between the <body></body> tags.

Lets break down the following elements, shall we?

<html></html> ----- These tags indicate that any content between them is HTML code.

<head></head> -----Container of all of the head elements.

<body></body> ----- These tags indicate that anything between them is shown inside the main browser.

<p></p> ----- Indicates anything between these tags is a paragraph.

There are several tags which we will continue to learn more about as we progress through this guide.

What's an Attribute?

Since we just covered elements, I think it's a good idea to tell you guys a little bit about Attributes and what they're used for. Attributes essentially just provide additional information about the contents of the elements. They will appear in the opening tag and they are made up of two parts: A name, and a Value. They are also separated by an equal sign.

What? You'd like some examples? Sure.

<a href="helpdoc.html">Click here to read the HF Helpdocs.</a><p lang="en-us">Paragraph is in English</p>

Do you see how that works? In the last example, the name was "lang" and the value was "en-us" telling us the paragraph was in US-English. Similar to tags, there are tons of attributes you have at your disposal which we will encounter as we proceed.

<title> Tag:

Whatever is written between the <title></title> tags will show up in your browsers tab.

For example:

<!DOCTYPE html><html>    <head>      <title>Clarks HTML/CSS Guide</title>    </head>    <body>      <p>I love HTML.</p>    </body></html>

Will display:

Cool huh? I shouldn't have to explain to you why that's a good thing to know!

Edited May 7, 2014 by MikeAurora

2,040 · May 7, 2014

Lets Talk More Tags:

Do you remember when I said we would learn more tags later on? Well here we go! I'm going to list off some tags along with their purposes, just so you can gain some exposure.

<h1><h1> - These tags stand for Headings. This tag should be used for headings, obviously. There are 6 headings: <h1> <h2> <h3> <h4> h5> and <h6>. <h1> Should be used for main headings, and <h2> should be used for sub headings, and > should be used for sub-sub headings, etc.
Example:
<b></b> - Anything between these tags will be in bold.
Example:
<i></i> - Anything between these tags will appear in Italics.
Example:
<hr /> - Up until now you've only heard of elements that have an opening and a closing tag, however the this one does not. Everything you need is in one tag. This element is used to create a break between paragraphs, pictures, whatever!
Example:
The above are just some examples of some common tags and their uses. I could go on for hours listing all of the elements HTML has to offer, however I will leave you with this this link to reference other elements.

Edited May 7, 2014 by MikeAurora

2,040 · May 7, 2014

Definition, Unordered and Ordered Lists.

At some point or another you will definitely need to know how to create a list in HTML. There are three different types of lists you can create with HTML.

Ordered lists - Each item on the list is numbered.
Unordered lists - Lists begin with bullet points.
Definition lists - These lists are made up with set terms along with their meanings.
Examples:
An Ordered list will look like this:
Here's the code:
```
<!DOCTYPE html><html>    <head>      <title>Clarks HTML/CSS Guide</title>    </head>    <body>      <h1>How to code HTML</h1>        <ol>      <li>Download Brackets</li>      <li>Read Clark's HF Tutorial</li>      <li>Be a man</li>      </ol>    </body></html>
```
The <ol></ol> tags stand for "ordered list". Each item between the <ol></ol> tags must be put between the <li></li> tags, which stand for list item. Do you see how lists could be useful for tutorials and guides? Lists are crucial to learn. So what about the Unordered lists and Definition lists? We'll get to those, but lets make sure you're absorbing this. Create a list of your top THREE favourite movies or TV shows. Click the spoiler below to check your work.
```
<!DOCTYPE html><html>    <head>      <title>Clarks HTML/CSS Guide</title>    </head>    <body>      <h1>Favourite TV Shows</h1>        <ol>      <li>Dexter</li>      <li>Everybody Loves Raymond</li>      <li>Modern Family</li>      </ol>    </body></html>
```
How'd that go over? Keep practicing if you need extra help. You'll pick it up eventually!

Edited May 7, 2014 by MikeAurora

2,040 · May 7, 2014

Definition, Unordered and Ordered Lists.

Now, unordered lists are composed in the same fashion, just with different tags. Instead of starting off with the <ol></ol> tags, we're going to use the <ul></ul> tags which stand for unordered list. Unordered lists are represented with bullet points, in other words; no particular order.

Example:

An Unordered list will look like this:

Here's the code:

<!DOCTYPE html><html>    <head>      <title>Clarks HTML/CSS Guide</title>    </head>    <body>      <h1>Parts needed for build</h1>        <ul>      <li>Case</li>      <li>GPU</li>      <li>CPU</li>      </ul>    </body></html>

So far so good? Do you see how unordered list work? Very similar to ordered lists, they just use bullet points instead. Items are still put between the <li></li> tags and the layout is the same as it was on the ordered lists.

Lets quickly cover Definition Lists.

As mentioned earlier, definition lists are made up with set terms along with their meanings. Lets cover the three tags that Definition lists are made up of.

<dl> - Definition lists are created with the <dl> element and usually consists of a series of terms and their definition.

<dt> - This is used to contain the term being defined (definition term).

<dd> - Used to contain the definition.

Example:

Here's the code:

<!DOCTYPE html><html>    <head>      <title>Clarks HTML Guide</title>    </head>    <body>      <dl>      <dt>The Gladiatorz</dt>      <dd>      the-gladiatorz.com (often shortened to 'G') is currently host to the oldest and family oriented clan on runescape. both the oldest and  forum on the internet      </dd>      <dt>Pwning</dt>      <dd>            Noobs learning to code      </dd>      </dl>    </body></html>

Do you see how it works? We start with the <dl></dl> tags, then between them, we add the term we'll be defining via the <dt></dt> tags. After that we add the actually definition between the <dd></dd> tags. I'd suggest creating a few lists of your own right now just to be sure everything is making sense to you.

The last thing I want to talk about in regards to HTML lists are nested lists. You can put a list inside of another list to create what is called a nested list.

Example:

Here's the code:

<!DOCTYPE html><html>    <head>      <title>Clarks HTML Guide</title>    </head>    <body>      <ul>      <li>Food</li>      <li>Drinks            <ul>            <li>Iced Tea</li>            <li>Lemonade</li>            <li>Water</li>            </ul>      </li>      <li>Plates</li>      </ul>    </body></html>

As you see we put a second list inside the <li> element. It may look slightly confusing but when you break it down it's quite logical! Try creating your own nested list statement. You can always review the above codes if you get lost or confused. Edited May 7, 2014 by MikeAurora

2,040 · May 7, 2014

Link are an essential part of the web. They allow you to move from one web page to the other. In other words, you couldn't surf the web without links.

Different types of links:

Links from one website to another.
Links from one webpage to another on the same site.
Links that open in a new browser window.
Links that star up your email and address a new email to some body.

Links are created using the <a> element. You can click on anything between the opening <a> and the closing </a>. Remember when we were talking attributes? Well he's another important one. It's called href, and we use the href attribute to specify which page we want to link, or which section of a page we want to link.

Example:

Here's the code:

<a href="http://www.the-gladiatorz.com/">the gladiatorz</a>

If you click that link it will take you to the Gladiatorz main page. Makes sense right? Lets take a look at linking pages that are on the same site.

Lets assume all of your files are saved in one folder. All we need to do is set the attribute to the name of the specific file you'd like to be linked to. Remember that the files must be saved in the same folder for this to work. These are called relative URLS and they help when you're building a site because you do not need to set up a domain name or hosting.

Example:

Here's the code:

<!DOCTYPE html><html>    <head>      <title>Clarks HTML Guide</title>    </head>    <body>      <ul>      <li><a href="index.html">Home</a></li>      <li><a href="about-us">About us</a></li>      <li><a href="contact.us">Contact us</a></li>      </ul>    </body></html>

If you click on any one of those links, they will direct you to which ever file/page you selected.

Lets look at email links.

In order to create a link that starts up the users email program and addresses an email to a specified email address, you have to use the <a> element, and set the attribute to "href=mailto:emailaddresshere".

Example:

Here's the code:

<!DOCTYPE html><html>    <head>      <title>Clarks HTML Guide</title>    </head>    <body>      <a href="mailto:Elliot@live.com">Email Elliot</a>    </body></html>

Edited May 7, 2014 by MikeAurora

2,040 · May 7, 2014

Pretty cool right? I think so anyway.

What if you want to open a link in a new window? Well, to do this it's real easy. All we have to do is link the website as we normally would using the href attribute, except now we're going to add another attribute called "target" and set it to "_blank".

Example:

Here's the code:

      <a href="http://www.xbox.com/en-ca/#fbid=map6YNok1ZO" target="_blank">Open Xbox.com in new Window</a>

Now if you were to click that link, it would direct you to The Xbox website, in a new window. It's always a good idea to let the user know the link opens in a new window.

That's all for now folks, I'd suggest reading everything over a few times and putting your new learned skills to use. You learn by doing after all.

Edited May 7, 2014 by MikeAurora

1,992 · May 7, 2014

I like where this is going. I already know basic HTML5 but this is definitely useful for someone with no knowledge of it.

2,040 · May 7, 2014

Lastly if you're too much of a noob or would like more practice go here:

http://www.codecademy.com

If you're serious about learning web development, design, and app development I highly recommend checking out http://www.teamtreehouse.com. They're like a ten times better version of code academy with video lessons, easy analogies, clean site layout with profiles/reward systems/active community + forums the list goes on! It's 25 dollars a month, unless you're a student like me than it's only $9 and they have videos on everything web related from SEO to freelancing tips. Awesome website.

Edited May 7, 2014 by MikeAurora

Sign In

Ultimate Intro to HTML [elements, attributes, links and more]

Recommended Posts

Grave Wizard

Link to comment

Grave Wizard

Link to comment

Grave Wizard

Link to comment

Grave Wizard

Link to comment

Grave Wizard

Link to comment

Grave Wizard

Link to comment

Shadyyy

Link to comment

Grave Wizard

Link to comment

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity