How to Design a Simple Webpage Using Html

Video demonstration of how to code a basic webpage using HTML

This tutorial is part 1 of a series of web design tutorials that I am currently putting together. It is designed to provide an introductory foundation to coding for the web. This tutorial starts off with the basics of working with HTML and covers the following topics:

1. The basic concept of HTML
2. The role of HTML and CSS
3. HTML structure
4. Coding tools
5. Useful references
6. File management
7. Creating an 'offline' website
8. Directory setup
9. File naming
10. The index file
11. HTML structure and formatting
12. Semantic HTML and default browser styling

By the end of this tutorial you should have a fundamental understanding of how HTML works. You will create a simple webpage that will include the following basic HTML elements:

• A main title (H1)
• A paragraph of text
• A list

Here is a link to Part 2, which is about developing a basic webpage including an introduction to CSS.

The basic concept of HTML

Visit a website (preferably using Chrome), right-click and select view source. You will see the code the browser is using to render the webpage. The code may seem a bit overwhelming if you are starting out, but the main point is that this code is an HTML document and your browser is translating this code into the webpage that you see.

It is worth noting that most websites use quite a few different code types that come together within the html. These include things like CSS, Javascript and PHP etc. The different coding languages have different roles and I will get into these in more detail in later tutorials.

For now we are going to concentrate on the very basics of HTML.

The role of HTML and CSS

It will make more sense when you actually start working with the code, but for now let's just say that HTML is the language of content and structure. The content for example includes things like text, images and links. The structure for example is whether a particular bit of text is heading or a paragraph, or whether it belongs in the document header or the document footer etc.

Let's say that CSS is the language of style. – How this content is presented. For example, it's colour, position, size etc.

I find it useful to concentrate on the content and structure first, keeping in mind that this is how search engines or 'bots' read and interpret the content. Bots use the structure of content to help understand it, like whether something is defined as heading or list of items. For search engine optimisation for example bots aren't necessarily interested in the visual styling of the content, say whether it is purple or green etc. They are mostly interested in the actual substance of the content, such as the actual words in the text, links, and images etc.

HTML structure

I had been coding websites for many years before it really clicked to me that a lot of the terminology that describes the structure of HTML is based on basic document formatting, similar say to a regular text document, or even say a hand written school assignment.

Typically if you a creating say a text-based document using something like Word or Google Docs your document would include a header, and a main heading that describes what the document is. It may also include sub-headings and different sections of the document, and a footer with things like page numbering. Your document may also include some information which is included in the document but is not necessary visible in the main document 'body'. For example this could be information about the author, comments, and copyright details etc.

To get started you need some sort of software application program that can edit and save HTML and CSS documents. Sometimes it is good to start with a basic tool that forces you to write all the code before using a tool that includes features such as code hinting which helps generate the code for you. In this tutorial I will suggest copying and pasting code from sources, however it forms a good habit to start by actually writing the code if you are up for it.

Here is a list of some of the coding tools available that I am familiar with.

• Notepad ++ (Windows, free)
• Atom (Mac, free)
• Brackets (Windows / Mac, free)
• Sublime Text (Mac / Windows. You can trial this for free, otherwise a license is currently $80USD)
• Dreamweaver (Mac / Windows. Part of the Adobe Creative Cloud Suite. Subscription fee).
• Visual Studio Code (Mac / Windows free with Microsoft account).

There are also some cool tools you can use to code straight into the cloud such as Codepen, however I would recommend starting with a basic code editor first.

A few notes regarding tools… Where I teach we normally use Notepad ++ because my teaching environment is Windows based and this program work really well, especially in terms of starting with a basic editor that does not include code hinting by default.

These days I tend to do most of my coding straight into the cloud on my website servers. I'll discuss in this in later tutorials, however for anything else, particularly when I want to simply code a webpage or similar, I work with Sublime text. I really like the way you can trial Sublime Text without a licence (it gives you an intermittent prompt when saving). I bought a license for Sublime text quite a few years ago now and I am really happy this program.

As far as I know Atom is a good free alternative to Sublime Text and I lot of people I know really like it. I tried Atom once and I felt that compared to Sublime text is felt ever so slightly slower, otherwise I'm tending to just stick with Sublime for the time being.

Useful references

I think the best reference / place to start is W3Schools. Really I think you could just work you way through everything listed in this site starting with HTML, then CSS, then Javascript.

I decided to create this series of tutorials to also explain some of the concepts in a really simple language that I don't think are necessarily explained as well as they could be on W3Schools.

Once you have got up and running with HTML, CSS, and Javascript I think the W3Schools 'How To' section is good to check out for examples of some basic components like image sliders etc that you may want to try adding to your webpages at some point.

File management

I would say that at least 80% of everything to do with making websites involves having a strong grip on file management. If your file management is currently all over the place, now is the time to start with some basic organisation. Website code can be brutal in that if something is not spelled exactly correctly, then it will not work.

Creating an 'offline' website

We are going to start by creating a simple 'offline' website. This means that this website will not be available to the public on the world wide web as such, but it can still be viewed through the browser. – I will cover getting sites online in a later tutorial.

Directory setup

1. Create a new empty folder on your computer (or external drive) in a logical location and call it 'my-webpage-1'.
2. Then within this folder add some empty folders called 'css', 'images', and 'js'.

This is a fairly standard basic setup. We might not necessarily need all these folders to begin with, but it will be useful to have them ready as a starting point for things covered in later tutorials.

Example directory setup

File naming

In terms of creating website documents it is a good habit to stick to the following naming convention:

• All letters lower case
• Hyphenate separate words
• Be sure to include the document format extension
• Eg. about-me.html, or my-image.jpg and NOT Home Page.html or Green Frog.jpg (make sure you can tell the difference.

The index file

Open your code editing program of choice, create a new blank document and save it into your website folder as 'index.html'.

Whenever you visit the address of a directory in your browser, for example something like my-computer/drive/my-webpage-1, the index.html file is often opened by the browser by default. Remember early on when I mentioned that a lot of the terminology of HTML documents relates to standard document structure. Typically an index file is the home page of your website and is in many ways meant to 'index' or outline the main content and the other pages of your website etc, similar to the index of a book.

HTML structure and formatting

Write the following code:

          <!DOCTYPE html> <html> </html>        

Then save your document.

This code essentially defines the document as HTML.

Now see the two 'tags' – html and /html. These are opening a closing tags and everything between them is defined as 'belonging' to the html element.

Congratulations you have created your first HTML document. However it doesn't have anything in it yet…

Now go to W3Schools – HTML. Select and copy the example HTML document code and paste it over the top of the code you have just written. This is a really good starting point for a basic webpage document. It should look something like this:

          <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body>  <h1>This is a Heading</h1> <p>This is a paragraph.</p>  </body> </html>        

Now save your document, visit the document on your computer and open it in a website browser (eg Chrome, Firefox, Explorer etc). You should see the document title in the browser tab and the other elements visible in the 'body' of the webpage.

Particularly when starting out I recommend using the tab key on the keyboard to indent and format the code as follows. This makes it easier to see the structure of the opening and closing tags:

          <!DOCTYPE html> <html>      <head>         <title> 	    Page Title 	</title>     </head>      <body>          <h1>             This is a Heading         </h1>          <p>             This is a paragraph.         </p>      </body>  </html>        

This is relatively extreme, most coders would keep tags like the title, h1, and p on the same line, but for an absolute beginner I think it useful to get into the habit of formatting your code in such a way as to more easily identify the opening and closing tags and see the structure at a glance.

Everything between the html tags is defined as or 'belongs' to the HTML definition. Similarly everything between the opening and closing h1 tags is defined as a main heading and so on.

As a general rule most tags have an opening and closing tag.

The important thing here is that there is a 'nested' structure. The h1 tag is inside the body tags, which is inside the html tags. This means that the h1 tag for example inherits the properties of its 'parent' tags and this nested structure is what defines the structure of the html.

This is a weird example but just say I wanted to code the structure of a house (and this is certainly not valid HTML code). I might do something like this:

          <house>     <wall>         <door>             <door-handle>             </door-handle>         </door>         <window>         </window>     </wall> </house>        

Then if I was say to position the wall in a certain location, the door and window would be relative to, or 'belong to' the wall and could therefore inherit certain properties assigned to the wall. The opening a closing tags define the structure. It's about what belongs to what and how the different components relate to each other. HTML is a language that defines structure by using this simple system of elements within elements.

Semantic HTML and browser default styling

When you view your website you should notice that the h1 tag is shown to be larger and bolder than the paragraph text. Here the browser is applying default styling to these elements based on their definition.

In chrome you can right-click and then 'inspect', and this will outline all the styling that the browser is applying to an element, including the default 'User agent stylesheet'.

I will get into CSS in more detail in the next tutorial.

Different browsers can apply different default styling and sometimes web developers prefer to use something like a CSS reset or CSS normalize in order to take better control of the browser default styling. I will get into this in more detail in later tutorials but for now I don't think you need to worry too much about this.

My approach is to generally piggy-back off the browser default styling and address browser inconsistencies are they apply only to the elements that I am using. However, I think it is really important to observe the browser default styling because especially when you a starting out, and also when you start worrying about search engine optimisation, this can help show you visually, in the most crudest form, what your different elements actually are.

And this relates to semantics. The type of elements you use helps search engines and bots understand what the content is. If it is a list of text items for example, such as a shopping list, the default browser styling will show it as a list when it is correctly defined as a list element.

Now is probably a good time to start editing the content of your website. You can start by editing the heading, the page title, and the paragraph, being careful not to mess delete or mess up any of the opening and closing tags.

Now visit W3Schools – HTML – Lists, and copy and paste a list into your document. Save it, then go to your browser and refresh it. Your code should look something like this.

          <!DOCTYPE html> <html>      <head>         <title>My First Webpage</title>     </head>      <body>         <h1>My First Webpage</h1> 	<p>             Hi, my name is Henry and this is my first website. I am interested in:         </p> 	<ul>             <li>Web design</li>             <li>Coding</li>             <li>Digital art</li> 	</ul>     </body> </html>        

Example webpage when viewed through the browser. Notice the 'local' file path in the address bar as well as the default browser styling applied to the different HTML elements.

---

I think this a good place to wrap up Part 1 however In my experience most students are eager to continue with the more 'fun' type of things I cover in Part 2, this includes:

• Adding links
• Adding images
• Working with placeholder content
• Applying basic CSS styling

---

If you would like to stay in the loop when I publish new tutorials you might want to consider subscribing to my Youtube Channel, or if you use RSS you can find feeds available for any or all of my tutorial categories.

How to Design a Simple Webpage Using Html

Source: https://henryegloff.com/how-to-code-a-basic-webpage-using-html/

Share this post