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

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

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: Ultimate Intro to HTML [elements, attributes, links and more] (/showthread.php?tid=4186948)

Pages: Pages 1 2 3 4

Ultimate Intro to HTML [elements, attributes, links and more] - clark.dll - Apr 21, 2014

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:

Code 
<!DOCTYPE html>

<html>

    <head>

    </head>

    <body>

      <p>I am a website</p>

    </body>

</html>

This is what the script outputs:
Spoiler (Click to View)

*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.

Code 
<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:

Code 
<!DOCTYPE html>

<html>

    <head>

      <title>Clarks HTML/CSS Guide</title>

    </head>

    <body>

      <p>I love HTML.</p>

    </body>

</html>

Will display:
Spoiler (Click to View)

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

* - clark.dll - Apr 21, 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 <3> should be used for sub-sub headings, etc.
Example:
Spoiler (Click to View)

<b></b> - Anything between these tags will be in bold.
Example:
Spoiler (Click to View)

<i></i> - Anything between these tags will appear in Italics.
Example:
Spoiler (Click to View)

<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:
Spoiler (Click to View)

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.

* - clark.dll - Apr 21, 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:
Spoiler (Click to View)

Here's the code:

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.

Spoiler (Click to View)

How'd that go over? Keep practicing if you need extra help. You'll pick it up eventually!

* - clark.dll - Apr 21, 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:
Spoiler (Click to View)

Here's the code:

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:
Spoiler (Click to View)

Here's the code:

Code 
<!DOCTYPE html>

<html>

    <head>

      <title>Clarks HTML Guide</title>

    </head>

    <body>

      <dl>

      <dt>Hack Forums</dt>

      <dd>

      HackForums.net (often shortened to 'HF') is currently both the largest MyBB forum and hacking forum on the internet

      </dd>

      <dt>Hacking</dt>

      <dd>

            a hacker is someone who seeks and exploits weaknesses in a computer system or computer network.

      </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:
Spoiler (Click to View)

Here's the code:

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.

* - clark.dll - Apr 21, 2014

Links:
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:
Spoiler (Click to View)

Here's the code:

Code 
<a href="https://hackforums.net/">Hack Forums</a>

If you click that link it will take you to Hack Forums 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:
Spoiler (Click to View)

Here's the code:

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:
Spoiler (Click to View)

Here's the code:

Code

<!DOCTYPE html>

<html>



    <head>

      <title>Clarks HTML Guide</title>

    </head>

    <body>

      <a href="mailto:[email protected]">Email Elliot</a>

    </body>

</html>

* - clark.dll - Apr 21, 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:
Spoiler (Click to View)

Here's the code:

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.

🤝

* - glob - Apr 21, 2014

Very HQ thread from a good friend. Keep up the good work!

Also, VirusTotal, it would be great if you would remove your post. I think it interrupted the tutorial.

* - clark.dll - Apr 21, 2014

(Apr 21, 2014 09:52 PM)VirusTotal Wrote: Very nice thread! Good Job Clark!!!

I appreciate the compliment, and your ability to read thousands of words per minute but it would be swell if you could remove your comment.

* - Crake - Apr 22, 2014

Nice comprehensive review of the basics, and it all looks to be in decent practice. I'll have to review in more depth later, but for now you have a professional's seal of approval!

* - Rawwwrrr - Apr 22, 2014

Thanks for putting this all in one place! Great thread!

* - clark.dll - Apr 22, 2014

(Apr 22, 2014 04:55 PM)2raw2 Wrote: Thanks for putting this all in one place! Great thread!

No problem. Thanks for the compliment.

* - Ventures - Apr 23, 2014

Very awesome guide. This should stay on top.

* - Coobro - Apr 23, 2014

Wow nice thread. very detailed and it looks like this will help a lot of starters.

Thanks for the thread :)

* - clark.dll - Apr 23, 2014

Thanks to the both of you, that's very kind.

* - LaFerrari - Apr 23, 2014

I know a friend who wants to start with HMTL. Going to show him this.
Thanks a bunch. 🤝