Let's Begin

In order to begin we need to specify the HTML document in order for the browser to understand what version of HTML you are in. "!DOCTYPE html" is the code we use for HTML(5), the language that makes browser support and coding much easier ! We also have other tags we need to include which includes "html","meta" tags, "head", title", and "body" first before we do anything else. Just make sure you close each tag!


Open your code editor and follow along as we code your first website together.

GettingStarted

You are proobaly wondering what these tags mean so I'll clarify it for you. As I mentioned earlier the "!DOCTYPE html" states that your are using HTML(5) coding. The "html" tag specifies the document you are using to start structuring the webpage. After the html tag include the "head" tag which surounds all data that is processed yet unseen on the site itself. The "title" tag specifies your website's title (it is the name in the tab of your current webpage). The "meta charaset" tag which specifies the character encoding for the html document. The "meta name" and the following code allow for responsive webpages. It allows you to create a website that is scaled well on any electronic device. The "body" tag includes all the content of the page, essentially everything that will be seen.

You have officially set up your website now we can begin coding!

HTML tags

There are several tags in html but for now let's just go over a few essential ones used for structuring websites and content.


Headings

There are six total types of headings. You would typically use "h1" tags to define titles, "h2" to define subtitles, these heading versions range to "h6" where the content seems minimally important. Essentially, the lower the number the higher the font size and boldness.


For example:


Types of Headings

Paragraphs

This tag is defined by just "p" it is used to add text under headings mainy but can also be used independently as well. You include the "br" tag to create a line break between to elements or paragraphs.


For example:


Paragraph tutorial

Images

Images can have alot of impact on your website so make sure they are sized nicely and will show up on several browsers. Use the "img src" tag to include an image in your site. You can adjust the sizing of the image or even add links to it as well. Also make sure that your image has an "alt" tag just in case the image doesn't load properly the client can still read the "caption" of what the image is supposed to be. (Hint: You may also use image sizing in percentages or pixels, I prefer percentages because the proportions remain constant and it's easier for scaling on other devices.)


For example:

Image Tutorial

Links

Links are defined with the "a" tag. While the destination is defined with "href". You may use links to import other webpages and sites, or other content within your same site.


For example:

Link Tutorial

I think you're ready to start a basic website using HTML

So far you have learned about links, images, headings, and paragraphs, let's see if you remember.

Here is the code for my website, it includes everything we have learned about so far.

First Website Code

Now here is the finished product using only four tags.

First Website

Congradulations, you have created a website with all of the essentials. This is a very simple site, soon we'll transform this into something better as we continue through the lessons.


Chapter 2

Let's learn some more tags!

I'm pretty sure you want to "style" your website now to make it look alot better, so let's start with some style tags. These are used for one html element which is considered to be an alternative to a style sheet like CSS.

Background color

The background color tag is written as "background-color" you can attach it to any element.


For example:

background color tutorial

There are several other styling methods you can use to transform the appearance of your site and the content within. This includes the "color" tag, which manipulates font color. The "font-family" tag which changes types of fonts. The "font-size" tag which increases or decreases text size.


For example:

styling tutorial

Those were called in-lined styling you can also create internal styling sheets to make the code look a little cleaner.


For example:

internal stylesheet tutorial

We will go deeper into CSS here but for now let's look at a few more html elements..

Tables

We use the "table" tag to define a table. Each row is defined with the "tr" tag and each heading is defined with "th". The data of each cell or table is defined with "td".


For example:


table tutorial

Lists

There are two types of lists, unordered and ordered. In this lesson I will teach you how to create lists and set the style of bullet you want them to have. To define an unordered list you use the "ul" tag. To define an ordered list you use "ol". There are a few html given types of bullets: discs, circle, square ,and none.


For example:


unordered tutorial

That was an example of an unordered list coding with the default and css styled bullets in-lined.


Ordered list are little bit different. We use the "ol" tag and the bullets are now numbered or "lettered".


For example:

ordered list tutorial

Dividers

Dividers are reffered to as divs, in fact that's the name of the tag. "divs" allow for the seperation of multiple data within a webpage. You can apply certain css values to content within the div.


For example:


div tag tutorial

Now you have learned a lot! Let's put all of that information into a website. You can continue your original if you would like.


Using the material we learned in this chapter I was able to improve our original website. (Remember this is just the beginning for your website we still have a lot more to add!)

Part One

Part 1 Chapter 2 code

Part Two

 Part 2 Chapter 2 code

Here is the file for the code I am using to create this website. Download here.

Notice in the two code parts above that I only used the code we have learned so far... Here is my website now.


Chapter two website

Now that we have established a better foundation on HTML let's move on to the final chapter.


Chapter 3

The final topics we are going to cover are forms, navigation menus, and footers.


Navigation menus

Navigation menus are used to group links together within a page to perform a certain way. Usually they navigate to another page within the website but you can also program them to navigate to divs or sections within the same page. Navigation menus are defined by the "nav" tag.

For example:


Navigation Menu

Forms

Forms are used to collect user input, they include inputs such as first name, last name, maybe check boxes, radio buttons and a submit button. They are simply defined with a "form" tag. In this lesson I'll show you how to create a form to add to the contact page or section of your website.


Form Tutorial

Let's go over these tags because this can be a little confusing. The "First Name:" specifies the title of the current input. The "input type" specifies what type of section or box the user in supposed to input. For example the submit type shows a button that submits the data or calls and action. The text type shows a text field for client data. Typically the data would be user added but for educational reasons I added it.

That was a basic form let's learn more.

There are also other types such as the radio button. The radio button is similar to the checkbox tag. You can use radio buttons to categorize many things.


For example:


Radio Buttons Tutorial

Now you're wondering how can I see data inserted into the form...In order to view the data submitted in forms you will have to learned code specifically for backend. These include PHP or SQL, there are several other tutorials who can go more indepth and teach you every single tag but for now you can use UseBasin.com. This is a form endpoint creator that collects submission data without backend coding, everything goes directly to your email. They even offer action pages for POST and GET tags. Investigate more into it and you'll be happy I reccomended you to them!


There's only two more tags I want to show you so that you can make your website completely using only HTML! Those are the header and the footer tags. We use the header tag at the very top of the page your logo, navigation menu, and even titles may go into them. We use footers to conclude the website, these go at the very bottom of the page and may include trademarks, authors, or contact information.


For example:


Header and Footer Tutorial

Here are a few tags that aren't as big but provide a little assistance. The "br" tag starts a line break. The comment tag is a section where you can mark or organize certain elements and content. I tend to use comments before I start sections or to explain what a certain code is doing to keep is organized. This is how you create one...


Comments Tutorial

Notice the grey words , those are comments they are in your code but don't show up on the Website itself.


Final Website

Now using only HTML let's finalize your website.


Here is my code for the final product, yours can be similar or you can switch a few things up. It's okay to copy code although make sure you change the information to your pleasing.


Final HTML Project

Final HTML Project Part 2

Final HTML Project Part 3

Final HTML Project Part 4

You can download the files used in the project here for code references.

Now let's check out how the final website looks using only one HTML document.



Congratulations!!!

You coded an entire website that is fully functional all by yourself

(Not to mention it was from scratch...)

Remember this website did not only use the language HTML, we only used one HTML document. We included CSS and you probaly didn't know it! Now that you are somewhat familiar let's move on to actual CSS tutorials to gain a better knowledge of the language.


Let's Go >>>