How to Write an HTML Code ~ Sites from Scratch

Please share this post
Share

Congratulations! You’ve made it to Lesson 2.0 of Learn HTML Online. The title of this tutorial is “How to Write an HTML Code“. Remember, we’re learning how to build a website from scratch. So far, we know about some necessary tools required for completing our website. Also, we’ve gotten some hands-on training operating and using some of our website development tools. We got a chance to use tools like the Atom Text Editor and a good Version Control System like Git, from GitHub. They’ll help you advance your career as a web developer, but now, it’s time to share what we can make together when we add the framework of HTML to this project and give it some structure.

How to Write an HTML Code ~ Introduction

When you complete lesson 2.0 you will be able to make a simple website. It won’t be a beautiful website, but, it will be a basic website. After we create our first website, we’re going to build on it in lesson 2.1. Now, we are going to learn how to write an HTML code.

  1. Section 1 ~ HTML Intro to tags, elements, attributes, and documents.
  2. Section 2 ~ HTML Intro to head tag, body tag, paragraph tag, and h1 – h6 heading tags.
  3. Section 3 ~ HTML Intro to Meta Tag Search Engine Optimization Appreciation Day!
  4. Section 4 ~ HTML Build-a-Site for Beginners to Practice
  5. Section 5 ~ HTML Best Practices

 

What is an HTML Code?

Originally, HTML was designed for a way of sharing scientific documents over the Internet. You see, back in 1990, Tim Berners-Lee a scientist at CERN, and other scientists from universities around the world needed to share with each other, research documentation and scientific findings. Tim came up with the idea that would make it easier to share such information and humans would be able to read it, understand it, and create their own documents. Therefore, today we have HyperText Markup Language. (HTML) This tutorial will teach you how to write an HTML code and build and website.

 

How to write an HTML code

 

Learn HTML Online

You use HTML to make websites and web applications. Without HTML, you can not make a website. HTML is a tolerant markup language and not a programming language. Meaning it behaves differently from other markup languages. I like to call HTML a gateway language. It will lead you to other languages used for coding. Learning HTML will help you learn other languages such as Python, JavaScript, PHP or any other application or software language used for writing code.

I can tell you that HTML is an amiable markup language to learn, but what good would that do? We all learn HTML online, or at school in different ways. We use the resources we are the most comfortable with. Because it took Frank 4 weeks to learn HTML online while Lisa got a good understanding in only 7 days, would be pointless to mention how effortless it is to learn HTML online. It took me around a week to get it in my head, and just about 3 months to start teaching HTML online. How fast do you want to learn how to write an HTML code is all up to you.

How to Write an HTML Code ~ Element

Elements give HTML its structure and are going to be your building blocks of all your web pages. To make an element you need an opening tag, your element content, and a closing tag. Starting from the opening tag and through to the end of the closing tag, including everything in between is considered your HTML element. Are you ready to learn how to write an HTML code know as an element?

How to Write an HTML Code ~ Tags

Tags assist you as you build out your web pages. They can have attributes, which we’ll talk about in just a few minutes. Tags are easy to make. You start with a less-than sign <, also known as a tag. You end with a forward slash / and a greater-than sign >. All tags can be named and must have an opening and a closing tag. Except for a few tags, they won’t have a closing tag. We’ll talk more about the exception rule later on in this tutorial. This is how to write an HTML code.

 

EXAMPLE 1a

Basic HTML Tag

< This is a less-than sign

/ We call this a forward slash

>
This is a greater-than sign

< />

 

How to Write an HTML Code ~ Document Type

When building a website, you need to declare what kind of document you are creating first. In our case, we are making an HTML document so we need to declare an HTML DOCTYPE. We do this by first typing: See images for better clarity on how to write an HTML code document type.

 

EXAMPLE 1b

Declaring Document

First your less-than < tag

Followed by an exclamation mark!

Next type DOCTYPE in upper case

Now add a space

In lower case type HTML

Lastly, add the greater-than sign >

 

How to write an HTML code

How to Write an HTML Code ~ Attribute Tag

HTML has a lot of attributes. Attributes provide your browser additional information about the elements on a document. An attribute can be added to any HTML element. An attribute must be specified in the opening tag of the element and can help a page rank in major search engines. Look at the examples below to see how to write an HTML code attribute.

 

EXAMPLE 1c

Attribute Name & Value

< You will start to notice a pattern

HTML It will become part of your memory

lang= like learning a spoken language

“en” punctuation marks may take longer to remember

> Make practicing coding everyday part of the plan.

 

How to Write an HTML Code ~ Head Tag

Now we will learn how to write an HTML code head tag. The head tag will require an opening and closing tag.

 

EXAMPLE 2a

Open Head Element Tag

< a less-than sign first

Your tag name is head

> the greater-than sign

How to write an HTML code

 

EXAMPLE 2b

Closing Head Element Tag

< This is call a ____?

/ When do you use the forward slash?

head is located between the html open and close tag.

> The head tag will come before the body tag.

 

How to Write an HTML Code ~ Body Tag

The HTML body tag is where all of your web page content will go. Place your body tag under the close head tag. Nested within your body tag are all kinds of other HTML tags, Semantic tags, to help you stay organized while coding from scratch. This is how to write an HTML code body tag.

 

EXAMPLE 2c

Open Body Tag

<

body

>

How to write an HTML code

 

EXAMPLE 2d

Closing Body Tag

<

/

body

>

 

How to Write an HTML Code ~ Heading Tags

There is 6 kind of header tags used in HTML. They range from an h1 – h6 tag with h1 being the largest heading and h6 is the smallest heading text size. A header tag is used for creating titles and subtitles on your web page. Heading will help organize your topics. See the image below to learn how to write an HTML code heading tag.

 

EXAMPLE 2e

H1 Open Heading Tag

<

h1

>

 

 

EXAMPLE 2f

H1 Closing Heading Tag

<

/

h1

>

 

How to Write an HTML Code ~ Paragraph Tag

The paragraph tag will become a tag you’ll use the most while building your web page. You will use it to create blocks of paragraphs on your website. They are easy to make and will help fill in an area on your site. This is how to write an HTML code paragraph tag.

 

EXAMPLE 2g

Open Paragraph Tag

<

p

>

 

 

EXAMPLE 2h

Closing Paragraph Tag

<

/

p

>

 

How to Write an HTML Code ~ Meta Tags

The HTML Meta Tags can play a key role in web development, as far as SEO is involved. A good web designer will make sure that all pages on a client’s websites are Search Engine Optimized in every area. Leaving no stone unturned. The meta take help search engines understand what your web page and site is all about. Using the meta charters title, description and other HTML Meta Tags will get you noticed on the Internet. This section will teach you how to write an HTML code meta tags.

 

Search Engine Optimization Appreciation Day

When it comes to building a website, a web developer should make every day SEO Appreciation Day. To do so could mean giving the website you’re working on a fair chance of getting found faster in the search engines. There are several HTML meta tags you can use to boost search results. I’ve listed them below.

ISO Language Codes, I’ve heard that if you include the lang attribute in your opening tag, it can help a search engine like google find your content. Not only will it help Google, but think about the people who can’t read your writing for what ever reasons. Adding the lang attribute will help their screen readers understand what your website is all about and may put a smile on someones face.

The ISO Language Code can do wonders for a small business, a small business can be one you run out of your home, a local corner store, a small restaurant, a beauty supply store and auto repair shops. Small businesses need to be seen on the Internet just as much as the big giants. Adding your ISO language attribute will help a lot of people if you include it in your design.
See example 2b, to see how it looks when your type it out in a text editor. Learn how to write an HTML ISO Language Code.

 

EXAMPLE 3a

ISO Language Codes

<

lang=

“en”

>

 

How to Write an HTML Code ~ Meta Charset Tag

The HTML Meta Charset is what tells your web browser how to display those funny looking syllables on your screen. The meta charset element is easy to use, but it must be placed within a 1024 space and right after the head tag on the HTML document. I will show you what I mean in the example below. Meanwhile, there are other meta attributes you should add into your design from the start. See the list with explanation and visual example below. Here is how to write an HTML code meta charset tag.

 

EXAMPLE 3b

meta charset

< start with your open tag

meta is what you would type next

charset= there’s a space before you type charset=

“UTF-8” the quotation marks are included

> end it with a closing tag

How to write an HTML code

Example 3b

 

How to Write an HTML Code ~ Meta Title Tag

Your meta title will show up in your web browser tab. Your title is important because it is what will appear in Google and other major search engines. The title will tell your visitors what page they are on when they are on your website. Keep your title under 65 character. Use the keywords near the beginning of your title. Give every web page a title and It won’t be long before you start to remember how to write an HTML code using the title meta tag. Follow the step-by-step instructions.

 

EXAMPLE 3c

Title Meta Tag

< First add your less-than tag

title is what you would type next

> Notice No Forward Slash because this is considered the open tag for the meta title

Learn HTML Online ~ Building A Website From Scratch

< Once again, add another less-than tag to start the closing process

/ Now add your forward slash to the closing tag

title one more time

> Finally, end it with the meta title closing tag

 

How to write an HTML code

Example 3c

 

How to Write an HTML Code ~ Meta Keywords Tag

The meta keyword tag is where you can store the keyword for what your web page is about. The meta keywords tag is located in the head section of your document, this is where you will place yours. Search engines will look for it there’s and may or may not use these keywords to help people find your website. The visitor to your web page will not be able to see your meta keywords unless they view the sources code. More about sources codes in a different tutorial.

The image will show you how to write an HTML code Keywords tag. I’m going to walk you through it, so you can see how simple the process is.

 

EXAMPLE 3d

Keywords Meta Tag

< First add your open tag

meta Now add include the word meta right next to the open tag

name= Add a space after meta, the equal sign is part of the code,

“keywords” No space after equal, yes, include quotations on both ends,

content= Yes, space after “keywords”. You got it, include the equal sign

“HTML, Learn Online” Add your keywords between quotation marks separate words by comma

/ use the element with a forward slash

> Close the meta with a closing tag

How to write an HTML code

Example 3d

 

How to Write an HTML Code ~ Meta Description Tag

All of your web pages should have a unique description of no more than 160 characters, describing what it’s about. What ever you enter into this location will show up in the search engine search results description. When the searcher searches using a search engine, of there’s choice, they will see a description of what your content is about. The choice of search engines are Google, Bing, Yahoo, and the list goes on forever. This is how to write an HTML code description tag.

 

EXAMPLE 3e

Description Meta Tag

< First add your open tag

meta Now add include the word meta right next to the open tag

name= Add a space after meta, the equal sign is part of the code,

“description” No space after equal, yes, include quotations on both ends,

content= Yes, space after “keywords”. You got it, include the equal sign

“Build a website from scratch” Add your keywords between quotation marks separate words by comma

/ use the element with a forward slash

> Close the meta with a closing tag

 

How to write an HTML code

Example 3e

 

How to Write an HTML Code ~ Meta Author Tag

The meta author tag informs the readers, visitors, and search engines who the author of the content is. Here is how to write an HTML code author tag.

 

EXAMPLE 3f

Author Meta Tag

< First add your open tag

meta Now add include the word meta right next to the open tag

name= Add a space after meta, the equal sign is part of the code,

“author” No space after equal, yes, include quotations on both ends,

content= Yes, space after “keywords”. You got it, include the equal sign

“LeNard Simmons” Add your keywords between quotation marks separate words by comma

/ use this thing called a forward slash

> Close the meta with a closing tag

How to write an HTML code

Example 3f

 

How to Write an HTML Code ~ Meta Viewport

If you want to help your website to be responsive to all screen view ports, you’ll want to add the meta view port tag. Set your width to equal device width. By doing this your web page will be able to be viewed on any device. It’s important to include the meta view port tag on all your web pages.

 

EXAMPLE 3g

Meta Viewpoint Tag

<

meta

name=

“viewport”

content=

“width=device-width”

>

How to write an HTML code

Example 3g

 

The Browser Function

The web browser interprets HTML and displays the results onto the screen. Just like you read a book, letter, or a web page and allow your brain to interpret the content of the writer, a web browser does the same thing. The web developer tells the web browser what should show up on the screen by using HTML coding which the web browser deciphered for the visitor to see.

How to Write an HTML Code ~ Build-a-Site

OK. Get your browser ready by opening up a new tab or window, because we’re going to make a simple website. Wait, you will need your text editor as well. I’m not going to set this up so you copy and paste. You won’t learn how to code if you just copy and paste what I put in these tutorials. You will learn to code better and faster if you actually type the code into your editor yourself.

Create a folder on your desktop. You can name the folder anything you want, I’m naming mine learn-html-online. Inside of the folder you just made, create an index.html file. With your text editor enter the code and save often.

Declared your DOCTYPE

 

EXAMPLE 4a

Build-a-Site ~ Doctype

<

!

DOCTYPE

html

>

 

Open HTML Tag

  1. Add The less-than < tag
  2. Now type html in lower case
  3. End it with the greater-than sign >

 

EXAMPLE 4b

Build-a-Site ~ Open HTML

<

html

>

 

Open Head Tag

  1. Add The less-than < tag
  2. Now type head in lower case
  3. End it with the greater-than sign >

 

EXAMPLE 4c

Build-a-Site ~ Open Head Tag

<

head

>

 

Title Tag

 

EXAMPLE 4d

Build-a-Site ~ Title Tag

<

title

>

How to Write an HTML Code

<

/

title

>

 

Meta Description

 

EXAMPLE 4e

Build-a-Site ~ Description Meta Tag

< First add your open tag

meta Now add include the word meta right next to the open tag

name= Add a space after meta, the equal sign is part of the code,

“description” No space after equal, yes, include quotations on both ends,

content= Yes, space after “keywords”. You got it, include the equal sign

“Build a website from scratch” Add your keywords between quotation marks separate words by comma

/ use the element with a forward slash

Close the meta with a closing tag

 

Add your keyword, author, and viewport meta tag. Try to remember how to add the rest of the meta tags. This is an open book quiz, so go back and look how it’s done or use the images.

 

Closing Head Tag

  1. Add The less-than < tag
  2. Now add the forward slash /
  3. Now type head in lower case
  4. End it with the greater-than sign >

 

EXAMPLE 4f

Build-a-Site ~ Open Head Tag

<

/

head

>

 

Open Body Tag

  1. Add The less-than < tag
  2. Now type body in lower case
  3. End it with the greater-than sign >

 

 

EXAMPLE 4g

Build-a-Site ~ Open Body

<

body

>

 

How to Write an HTML Code ~ Heading Element

 

EXAMPLE 4h

Build-a-Site ~ Heading Tag

<

h2

>

Learning how to Build a Website from Scratch

<

/

h2

>

 

How to Write an HTML Code ~ Paragraph Element

 

EXAMPLE 4i

Build-a-Site ~ Paragraph Tag

<

p

>

Your paragraphs will go between the open and closed paragraph tags. The paragraph element is placed between the open and closed body tag. See the image for a better understanding.

<

/

p

>

 

Closing Body Tag

  1. Add The less-than < tag
  2. Now your forward slash /
  3. Now type body in lower case
  4. End it with the greater-than sign >

 

EXAMPLE 4j

Build-a-Site ~ Open Body

<

/

body

>

 

How to Write an HTML Code ~ Close HTML Tag

Now that you have your elements in your document, you will need to learn how to write your HTML code closing tag like this:

  1. Add you less than sign< tag
  2. Now add your forward slash/tag
  3. Again, type html in lower case
  4. End it with the greater-than sign >

 

EXAMPLE 4k

Closing HTML

<

/

html

>

 

Take a Look & Take A Break

We will build on this in the next lesson. You should keep practice while you wait for the next tutorial.

 

EXAMPLE 4l

 

How to Write an HTML Code ~ Using Best practices

Allow Work Space ~ You will want to add a lot of space between your open HTML tag and Closing HTML tag. This will give you a workspace to add additional tags. The HTML closing tag will always be the last element in your document. Therefore, the first element after you declared your document will be The open HTML tag.

 

EXAMPLE 5a

Work Space

You will want to add space between the opening tag

and closing tag.

See example 4k image

  • You don’t have to be connected to the Internet to practice coding.
  • Always use a paragraph tag to write paragraphs. See example 4k image
  • use lower case to create your tags
  • More Best Practices in the Next Tutorial

 

Coming in Future Tutorials

  • HTML5 Lesson 2.1
  • Coding Requirements Lesson 2.1
  • Article Lesson 2.1
  • section Lesson 2.1
  • nav Lesson 2.1
  • aside Lesson 2.1
  • header Lesson 2.1
  • footer Lesson 2.1
  • Source Code Lesson 2.1
  • More HTML Elements Lesson 2.1
  • CSS Lesson 3.0
  • JS Lesson 4.0
  • PHP Lesson 5.0 ( or sooner)

 


How to Write an HTML Code: Lesson 2.0 Conclusion

This will conclude lesson 2.0 on How to Write an HTML Code. When we come back, we’re going to jump right into lesson 2. More HTML Structure (COMING SOON)  Are you ready to add more code to our website? Good, because now, we will learn the fundamentals of HTML while learning how to build a website from scratch.


Start Lesson 2.1 Coming Soon

That’s all for now. If you like this post, kindly hit the like button and share it with anyone you can think of that will benefit from it. If you have any questions, want to give an opinion, comments, or feedback, please leave them in the comment section down below. Thank you and God bless you.


Affiliate Bootcamp ~ 10 Free Lessons ~ Join Now ~

My feeling about creating a website by hand coding them; It’s like a Thanksgiving meal. Not just any kind of turkey day dinner. More like the kind grand mom’s cook; Make it from scratch she used to tell us. You’ll put more love into a homemade meal she would say. I guess I’m kind of old spirited and like creating things the old fashion way. Build them to last. ~ LeNard’s View ~



Build a better website in less than an hour. Start for free at GoDaddy.


Please share this post
Share

Leave a Reply

Your email address will not be published. Required fields are marked *