[Home] [Growth Mindset] [What is Markdown?] [Coder’s Computer] [Revisions in the Cloud] [Getting Started With HTML] [CSS Beginner Basics] [Dynamic Web Pages With Javascript] [Computer Architecture and Logic] [Programming with JS] [Operators and Loops]

Getting Started With HTML: A Step-By-Step Guide

Start With Brainstorming and Visualizing Needs

Before a person starts creating a webpage they should decide who the target audience is and do research about the following:
- Who the site is for
- Why people might want to visit
- what the visitors might want to achieve
- what information visitors need
Next, a site map can be organized using cards to gropu information into sections or pages.
After that, A wireframe (sketch of sections/grids) can be created using a professional application such as Adobe Photoshop, Balsamiq, Draw io or a simple piece of paper.

Before Structuring the HTML/CSS

Decide on a code editor to use and download any necessary applications (such as VS Code or Adobe Dreamweaver)
Start by making sure the HTML declaration is stated (!DOCTYPE html).
Be sure the meta element is inside the head element to correctly explain the necessary information about the web page so search engines can correctly read it.
If linking to an external CSS page be sure this is set up within the head tags.
Write a title for the page within the title tags.

What is the Difference Between HTML and CSS?

HTML is a markup language that describes the actual structure of the webpage. While it isn’t a perfect analogy, you might think of it as a skeleton. CSS, on the other hand, is the decoration and style that that structure gets. A person might think of these as the clothing style a person chooses to have. The clothing (CSS) styles the skeleton (HTML).

Getting Started

The first thing a person should do after opening up the code editor and ensuring the Head tag is correct, is to define the body of the webpage. The body tag holds all of the structure of the webpage. Within the body tag, sections are usually created using div tags. Div tags are containers that hold more detailed tags. The first step is to create a div tag for the entire page. This usually is given an id or class of “container” or “wrapper” in order to style it using CSS.

Adding Tag Elements

Now you are ready to add the basic structure of the website.

First, make a header tag to define the title of the webpage. Here you may include an h1 tag for the title.
Next, structure the rest of your webpage using the wireframe that you developed previously as a guide.
For styling, be sure to give a class or id tag to important grouping such as section, articles, asides, headers, and footers.
Follow HTML semantics by referring to a trusted website for help. W3 Schools is an example of a website devoted to providing quick reference and tutorials. Also, utilize help within code editors such as the autocode function.
Test the webpage using the preview within the code editor application.