HTML TUTORIALS FOR BEGINNERS

Starting With HTML using Notepad and a Web Browser

Introduction

What sup guys!!! and welcome to Gyamblex online IT tutorials. In this lesson we will be discussing about the development of a webpage. We will be using simple easy to use default software in this lesson. All windows PC and Mac book comes with Notepad and TextEdit respectively. So no matter the device you use, you can still tag along. If you are wondering why you need to learn something about web development then continue reading. If you are starting a small business and you want to boost you online presence but you do not have enough funds to hire a professional web developer; this lesson can help you start and development a simple website for your business. Secondly, this tutorial can help you understand what your hired web developer is doing. In web development, there are at least two programming languages that you will need to get started. These are HTML (defines the structure of the webpage) and CSS (handles the design of the website). There are other languages that can be used such as PHP (usually used to communicate with the user and the server) and JavaScript (behavior of the site). But in this blog we will start with HTML. We will be starting from scratch (bases) so you will not need any previous knowledge in coding or knowledge in any other programming language before you start. Once you can boot (switch on) your laptop, pc or Mac book, can find you keyboard, mouse and touchpad you are good to start. Let us begin this lesson. 

Let Start HTML

As discussed earlier, in this lesson we will be discussing the basic knowledge about HTML. HTML stands for Hyper Text Mark Language. It is one of the programming languages that are used in creating webpage(s). HTML is used to design the structure of the webpage(s). This code tells the web browser how to display the page. In order to start creating a web page we will need two software; these are a: Text Editor and a Web Browser.

 

What is a Text Editor

A Text Editor is a type of computer software that is used to edits plain text. We will need this software to write the html code. Example of such software is the Notepad, Windows comes with Notepad preinstalled. Mac users can use TextEdit. There are other software that can be downloaded online; software such as Notepad++, Visual Studio Code, Dreamweaver, among software others. All these software can be used to write HTML code. In this tutorial we will be using the default software to work, thus the Notepad or TextEdit depending on your operating system. Whatever system you use or the software you choose the code is the same for all. Am currently working on a windows pc; so, I will be using the Notepad for all the illustrations in this blog. For those on Mac don’t worry, just remember the code is same across all platforms.

 

Stepping to Open Notepad (Windows)

On Windows 8 or Higher:

1. Open the Start Screen that is the Window symbol at the left bottom of the screen
2. Search for Notepad
3. Click on the Notepad Icon to Launch application

On Window 7 or earlier versions

1. Click the Start button:  Window symbol at the left bottom of the screen
2. Select all program from the popup list
3. Open Accessories 
4. Click Notepad to launch

Stepping to Open TextEdit (Mac)

1. Open Finder
2. Select Application
3. Select TextEdit

 

What is a Web Browser

Web browsers are software that are used mainly to display webpages or translate HTML code into a meaningful, easy to understand display for the user. These include, Safari, FireFox, Google Chrome, Microsoft Edge (default for Windows), Opera and others. There is no need to install all these browsers. Just install one or use the default one on your system and we are good to start. If you are using Windows 7 or lower you will find Microsoft Internet Explorer; it serves the same purpose.

Let Start Coding HTML

Now that we have the software setup we can start with the actual coding. To start: open your text editor and write or copy and paste the code below into the text editor.

 <!DOCTYPE html >

<html>

<head>

         <title> Title:  Appears in Browser Tab </title>

</head>

<body>

    Contents Here appear in browser window

</body>

</html>

 

After you have pasted or typed the code above into the text editor, the next step is to save the file. In this step you have to save the file with (.html) extension. For example, if you want to save the file with the name “Firstpage” or “index” then you have to make it “Firstpage.html” or “index.html” (please don’t add “” to the file name). After giving the name, select the location you want to the file and save it. Please note that you can give any filename to you page. But remember to add the .html extension to it. This extension is what will tell the operating system that, the file is a webpage and as such it should use a web browser software to open the file anything it is double clicked.

 

Opening the Webpage

To open your newly created file, first open the folder where you saved the file. Double click on it and your first webpage has been created.  You should see a similar page like the one below else it means you did not do something right. Just do a quick run through the step above to find the error.

NB: your file path will be different for the one above. The file path will be depend on where you saved the file

Meaning and Function of Tags

<!DOCTYPE html > This declares the document as a HTML5 document. 

<html> this is the main or the root element for an HMTL tag. All other tags and content must be placed or typed within it.

<head> this tags contains the meta tags (information about the web page, the title and links to style sheet and sometimes JavaScript files.

<title> this tag is placed in the head tag. This is tag display the title of the page in the tab of the browser. 

<body> It displays its contain in the browser window. It can contain tag such as the heading, navigation, paragraphs tables, hyperlinks, images, among other. In simple terms all items that appears will appear in the browser window is placed between this tag.

What is an HTML Element?

HTML elements consist of an opening or starting tag, some information within the tag and the closing or end tag. An opening tag is written as <tagname>. The closing or end tag is written in the similar manner but the main difference is the use of / symbol at the beginning of the name eg: </tagname>. In simple terms; HTML element is everything from the starting tag to the end tag. An example of an element is title used above ( <title> Title:  Appears in Browser Tab </title>). So from <title> to </title> constitute the HTML elements.

It is important to mention that, not all HTML elements have content and an ending or closing tag. Example of such element are <br> (used for line break), <hr> (draw horizontal line) etc. These elements are referred to as the Empty elements. Type or copy and paste the code below into the text editor (must be in the body tag where we have type “Contents Here appear in browser window”), save and refresh your browser to see it effect. (Shortcut key for refreshing web browsers is F5 usually at the top of the keyboard)

 

Copy Code

Gyamblex <hr> HTML tutorials for beginners <br> My First HTML Course.

History and Development of HTML

Since the introduction of the World Wide Web there have been many versions of HTML code. Each version is an improvement on the previous version with new tags and features being added to make the language easier and better for all. The development of HTML can be traced to the 1989 when Tin Berner-Lee invented the World Wide Web (www). He introduced the HTML in 1991. In 1993 Dave Ragget introduced HTML+, 1995 HTML 2.0 was introduced. 1997, 1999 and 2000 W3C recommended HTML 3.2, HTML 4.01 and XHTML 1.0. The current version of HTML being used is HTML 5.2. 

 

Summary and Conclusion

In this tutorial we have learnt how to use Notepad and web browser to write and view webpage. We said that you must always remember to save the file with the extension .html. This extension is what makes it run as a webpage. We have also learnt about html tags and HTML element. Furthermore, we have talked about the introduction and history of HTML. Please note: there are cool software that you can either buy or download online that can assist you in developing a webpage. Some popular once are Visual Studio Code, Notepad++ and Dreamweaver. Some of these software are totally free other you have to pay for it. There are other website such Wix, WordPress, and other site that have tools and resources that you can use in building and even host your site. However, you can still build a web page with just your text editor and display it with your web browser without paying for any advance software. This has been the focus of this blog. I believe this tutorial was help for you. Thanks for reading and happy coding.

 

Gyamblex