This is where I will record all my learning progress!

The first subject which I have learned form DFab is

Web Develpment and Design

What have been taught in this subject is on how to create an website, followed by designing and editing your website and finally, uploading your website online for everyone to see!

To start off, in order to start making your website your are required to have at least one of the programmes listed below:

  • Notepad(avaliable upon purchase of laptop/pc)

  • Brackets(<-- Link for download)

  • Visual Studios(The most powerful software of the 3, can also be used to include programmes)

Next, its about choosing the language which you want to write your website in, theres HTML and Markdown. For my website, I chose to use HTML as it allows my website to be abit more fancier as compared to Markdown.

To start creating your website, open up your software and create a new file. Name it as index.html. This causes your system to recognise this file as a website and when you open it, you can see it will open up a blank page in your browser.

Following that, please type the following into your newly opened file, these are the series of codes that make up a HTML website

So, let me explain what does the tags mean.

  • !DOCTYPE html: This tag defines this file and everything that you type into this file to be recognised as the language of HTML

  • Html: This tag defines whatever that is written inside to be of the language of html.

  • Head: This tag serves as a container for the title tag and will also contain the relation tag with css that will be covered later.

  • Title: The text that you write inside this tag wil become the name of your page.

  • Body: This is the main component of your webpage, where all of the information on your website are written.

Here is a short tutorial that explains further in depth and shows examples on the information listed above.

After taking a look at the video, you would have familarised yourself with the basics of building a HTML website. Here is another useful link that provides you with all the avaliable texts to spicen up yor website!

Useful

Commonly used texts

  • h1-6: These tags represents the size of the text that is written within them, with h1 being the largest and h6 being the smallest.
  • div: This tag divides the text within from the text outside, and also makes targetting a certain seciton much easier.
  • a href="": This tag allows for a clickable link that cn lead to either another html page or a website.
  • img src="": This tag allows for a image to be displayed on your site. The size of the image can also be adjusted easily by labelling the width,length and height after the "".

After knowing these basics to starting a html website, you should be able to start writing a basic black and white html site. But now your may be wondering, how do I make my website colorful or organised like the ones I see on the outside? Well, no worries as these shall be taught to you in the second part of web development.

Part 2