HTML Tutorial for Beginners



code editor colorTools for working with HTML

If you’re like me back in my learning days, maybe you have no clue where to begin, and here is a short list of the tools I recommend you get. There’s no need of fancy computers, and pretty much any will do the work.

  1. Download and install a source code editing software such as Notepad++. It’s free and has many options.
  2. Download and install an FTP client. We use WinSCP (only available for windows) but there are other options such as Filezilla for other systems. They are free.
  3. Download and install Google Chrome browser.

If you’ve already added these tools to your arsenal, we can then move onto the next step.

Anatomy of an HTML document

An HTML page is made up of elements named “tags”, and these tags tell the browser how to display the content. Each tag is represented by an abbreviation such as p, h1, span, etc.

Breakdown of an HTML element or tags
HTML tags are surrounded by angle brackets, and they usually come in pairs, with a starting and ending tag like this:

<tagname>content goes here…</tagname>

Here is an alphabetical tag list that you can use as reference.

What an HTML page looks like

This is what the source code of a basic HTML page looks like:

And this is how it’s displayed by the browser:

This is a Heading

This is a paragraph.

If you’re a beginner, don’t worry about memorizing ALL the HTML tags, that can happen over time. Find and memorize ONLY the most commonly used HTML tags. For example tags for embedding images, for writing titles, paragraphs, adding spaces, etc.

This is what these tags represent:

  • The <!DOCTYPE html> declaration defines this document to be HTML5
  • The <html> element is the root element of an HTML page
  • The <head> element contains meta information about the document
  • The <title> element specifies a title for the document
  • The <body> element contains the visible page content
  • The <h1> element defines a large heading
  • The <p> element defines a paragrap

There are two tags in particular that deserve attention:

  • The <head> tag contains meta information about the document
  • The <body> tag contains the visible page content

The head tags are usually only visible to search engines, while the body tags to visitors, and we will concentrate in editing within this tag.

Editing body HTML tags

So lets say you’d like to change the text inside the <h1></h1> and <p></p> tags in our page example.

Just edit the text within the opening and closing tags and save the document. Easy right?

You can rename any tag to change their size and their importance. For example, an h1 tag will have a bigger font by default, and it’s used at the top of a page to denote importance. An h6 tag will be displayed in a smaller font and denotes secondary importance to search engines.

Having said that, don’t make the mistake of thinking you can only use h1 tags to get better search engine rankings. This something you can learn by learning On-Page SEO.

Our goal is not to cover every singe aspect of creating an entire website from scratch, but to teach you how to skip all of these hurdles by using a free framework used by thousands of web developers. This framework is know as Bootstrap, and learning how to use it will prove to be a great advantage as opposed to coding everything yourself.

Introduction to Bootstrap framework

So what is Bootstrap?

  • Bootstrap is a free front-end framework for faster and easier web development. You can download it here, however we recommend you use something more developed and download a free HTML template from tinysitebuilder.com.
  • Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.
  • Bootstrap also gives you the ability to easily create responsive designs.

Get familiar with the term Bootstrap, because we will use it constantly whether building an HTML, WordPress or Joomla website..

Here is what a basic Bootstrap page looks like:

And this is how the page is displayed by the browser.

Our example Bootstrap HTML document is made up of one css source (line 7) and two js scripts (lines 8 and 9).

Our Bootstrap page is more developed than our initial HTML page, and the reason for that is because Bootstrap is a well developed platform ready for use that includes both css and js files.

Bootstrap layout

Bootstrap’s grid system allows up to 12 responsive or mobile-friendly columns across a page. You can add any type of content such as video, images and text inside any of those single columns, just make sure the columns are wide enough to display your content the best way possible.
If you do not want to use all 12 column individually, you can group the columns together to create wider columns.
Here are some possible column combination examples:

col 1col 1col 1col 1col 1col 1col 1col 1col 1col 1col 1col 1
col 4col 4col 4
col 4col 8
col 6col 6
col 12

Since these columns are responsive, you can choose how to display them based on device width.
These are Bootstrap‘s column options for different devices:

    • .col- (extra small devices – screen width less than 576px)
    • .col-sm- (small devices – screen width equal to or greater than 576px)
    • .col-md- (medium devices – screen width equal to or greater than 768px)
    • .col-lg- (large devices – screen width equal to or greater than 992px)
    • .col-xl- (xlarge devices – screen width equal to or greater than 1200px)

For example, the class=”col-lg-4 col-sm-12″ can display 3 horizontal sections on large screens, while displaying a single one in small devices.
More on column options:

Extra small
<768px
Small
>=768px
Medium
>=992px
Large
>=1200px
Class prefix.col-xs-.col-sm-.col-md-.col-lg-
Suitable forPhonesTabletsSmall LaptopsLaptops & Desktops
Grid behaviourHorizontal at all timesCollapsed to start, horizontal above breakpointsCollapsed to start, horizontal above breakpointsCollapsed to start, horizontal above breakpoints
Container widthNone (auto)750px970px1170px
# of columns12121212
Column widthAuto~62px~81px~97px
Gutter width30px (15px on each side of a column)30px (15px on each side of a column)30px (15px on each side of a column)30px (15px on each side of a column)
NestableYesYesYesYes
OffsetsYesYesYesYes
Column orderingYesYesYesYes

In order to implement this column or grid system, you must adhere to the following rules:

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns
  • Content should be placed within columns, and only columns may be immediate children of rows.

To create the layout you want, create a container (<div class=”container”> line 1). Next, create a row (<div class=”row”> line 2). Then, add the desired number of columns (tags with appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.
Finally add your content with the tags that will define it (E.g. <h3> and <p>).
Don’t forget to end every <div> with its respective closing tag or </div>.
For example, our <div class=”container”> is closed at line 8, and <div class=”row”> at line 7.

The following is a basic structure of a Bootstrap grid:

You can create any website you want using the Bootstrap framework, and thousands of web developers rely on the framework to develop beautiful and professional website all around the world.

Note that learning how to edit HTML is only one aspect of what you must learn, however our next subject, “CSS Tutorial for Beginners” is as easy as HTML.






Search