ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

My first website

Updated on May 27, 2009

An introduction to HTML

For many years now I am giving workshops HTML/Webdesign. Many of the participants in my workshops have been people who had never made a website before. When I teach people who have no experience at all with making websites, I prefer to follow the same path how I learned it. That is starting with plain, simple, basic HTML.

HTML is the language used to create websites. It stands for HyperText Markup Language. It is not a programming language. It is just a 'markup language'. And the basics of HTML are easy to learn. If you have no experience yet with using a program that offers a graphical interface to do webdesign, the best is to start with basic HTML.

Especially in the beginning it can be frustrating to work with HTML, which is in fact a very limited language. However, as soon as you get familiar with the basics of HTML, you will also understand a lot better any graphical program, 'wysiwyg editor', which you can use to do webdesign. And you will understand much better why some things 'simply just don't work'.

What about Dreamweaver?

Very often, when I start showing the basics of HTML, I am interrupted by one of the participants, with a remark such as: 'But it is possible to do that in Dreamweaver!'

For some reason it is very difficult to explain that Dreamweaver is just a tool to help you to create the code for your webpage and that Dreamweaver cannot do things you couldn't write yourself using a text editor. Dreamweaver is not a magic program which can create animated designs, popup menus and flashy gadgets, which would not be possible to create with other programs.

So, usually at this point, I tell my students to just forget about all the flashy, blinking websites, at least for the moment and to first go back to the beginning of HTML. As I wrote before, this can be a little frustrating in the beginning, but it will give you a big advantage in the end.


A simple text editor

One of the things which I have always liked about HTML is that it takes just a simple text editor to create your code. You can work on any computer, on any platform, with any system in any language. If you know the basics of HTML you do not depend on any program or system to create and update your webpages.

A simple editor, for example, is the program called Notepad on the Windows platform. This program can usually be found under Start -> All Programs -> Accessories -> Notepad

This program is a good example of a very simple editor. In this program you can type a text and save it, but you cannot design the text. In this program it is not possible to change the look of the text, for example to make text bold or to change the color. For your first experiments with HTML I recommend to use a really simple text editor, like Notepad, just to experience how it works and to see that it is really possible to create a website without any special program.

If you are working on Macintosh there used to be a program called SimpleText, which is perfect to use for your first HTML file. On linux I have been using gedit and kedit. Any simple text editor will do. Experienced linux users can also type directly in jed or vi. It is better not to use a more advanced editor, like Word, as this will only confuse you, especially in the beginning.

There are also many free editors available which are made especially to type HTML. When you enjoy coding HTML you could try out some of these HTML editors. Many of them can be downloaded for free. However, when you become more experienced with coding HTML, you might also start to use Dreamweaver as an HTML editor. Dreamweaver not only has a graphical interface to design websites, it also offers the possibility to directly edit the HTML code. When you become more experienced with writing HTML, you will also start to understand much better how to use the graphical interface of Dreamweaver combined with the possibility to edit the HTML code at the same time.

Writing your code and viewing your code

So, the best is to use a simple text editor to type your first HTML code. If you have no experience with programming, designing your website in a text editor might be a bit of an unusual experience at first. HTML is not a programming language, but the feeling of typing your code into a text editor to create a page is similar to the feeling of typing your code to program something.

If you want your website to look a little bit more attractive than the most basic website, you will need to include every detail of the design in your HTML code. Every detail that goes beyond the most standard layout needs to be added with HTML commands. And that really goes as far as including each new line as an HTML command.

When you are done typing down your code into the editor, you will want to see what your new page looks like. Viewing your page is done with a web browser. Before you can view your page with a browser, you need to save the file which you created in the text editor. There are many details to take care of when saving a file for a website, which I will include in a separate hub.

A web browser

A web browser is a program to view websites. On purpose I am calling this program a web browser. During the many workshops webdesign which I have given, I have noticed that many people are very much stuck inside the setup of their own computer. They usually know their way around on their own computer, but as soon as the environment is different, a different system or when different programs are installed, they are completely lost.

'A browser is a program to view websites.'
So, which program, for example, is a web browser?

For many people this question is not so easy to answer. I'll give you the answer right away, so you will understand what I am talking about. Probably the best known browser is 'Internet Explorer'. If you are using Windows this program is already installed on your computer. Then there used to be Netscape and Mozilla. These days Firefox is widely used. Besides Firefox and Internet Explorer there are many more programs, like Safari, Opera or Google Chrome.

Another correct answer to above's question would be:
'The program which you are using right now to read this article is a web browser.'

During my workshops there have been many participants who would answer that 'Google' is the program they use to view websites. 'Google' might be the first page to appear when you start Internet Explorer, but it is not a program. 'Google' is a website, a webpage, just like the page which you are viewing now. Any page on the Internet is opened inside a program which can display websites. You can open the Google page in any of the programs, 'the browsers', which I mentioned before. If this sounds complicated now, I will try to explain it again later.

The thing which all these 'browsers' have in common, is that all of them are able to read and understand HTML code. Web browsers are programs which are able to display HTML code as webpages. Web browsers translate your HTML code into a graphical display of your page and enable you to 'browse', to click through your pages. When you are using basic HTML to create your website, it doesn't really matter which of these programs, which 'browser', you are using to view your page. Any of these browsers is able to display your webpage.

And this is where the big advantage of good old HTML comes in. A page written in simple HTML should display more or less correctly in any of these programs, these browsers. There might be slight differences in the way how certain things are displayed, depending on which browser or platform you are using to view the page, but the general content and layout of the page should look more or less similar in each of these programs called web browsers.

Updating your page

Another advantage of using HTML is that you can update your page from anywhere. You don't depend on a certain program to make changes to your page. You can download your page wherever you are, open your page in any text editor, on any computer, make the necessary changes and upload the file again.

In order to upload your file you will need another program to be installed, a program which can do ftp or scp, depending on your server. And you will need username and password to upload the file to your server. I will write more details about uploading your website in a separate hub.

Putting it all together

This hub is only an introduction to HTML. It should explain some very basic things which are important to understand, when you start making your first webpage with HTML. If the information in this hub is still a bit confusing to you, don't worry. It will become more clear when you start actually doing it. When you start to type your first lines of HTML, saving it and viewing your first page in a browser, you will start to understand how all these programs work together.

I have put the first steps to create a webpage with HTML in a separate hub called 'My first webpage'. It will be good to come back again to this hub some time after you have made your first webpage with HTML. When you have a little experience with typing HTML in a text editor and viewing your page in a web browser, the information in this hub will make much more sense. So move on now to creating your first webpage and then come back here again!

Feedback - Leave a comment!

    0 of 8192 characters used
    Post Comment

    • adorababy profile image

      adorababy 

      8 years ago from Syracuse, NY

      At first, building a website can be overwhelming. Don't get me wrong, it is indeed overwhelming to process. But when you start to learn the step by step basics and the not so basics about web design, that is when you really feel the fulfillment of enjoying what you have accomplished.

    • profile image

      Ecommerce Website Design Company 

      8 years ago

      Wow... found it interesting... have a new idea in the post “Calling all business women!”….hope it'll be beneficial for me and my friends...

      I read this above tips. It is very informative. Thanks for clearing that up.

    • profile image

      gaajar 

      8 years ago

      fireFox is the best available browsers for developers

    • profile image

      msayyed75 

      8 years ago

      FireFox is one of the best browsers available for developers..

    • profile image

      adsense clicks 

      8 years ago

      Besides Firefox and Internet Explorer there are many more programs, like Safari, Opera or Google Chrome.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)