BUILDING A WEBSITE-LESSON 1

HTML

Websites are made from a single or multple webpages. A webpage is written using Hyper Text Markup Language (HTML). "Markup" means that the text will be wrapped with formatting tags to change the size, color, font, position, margin and other attributes. Websites and even word processing software use markup language to format the text seen on a screen.

A formatted text is text that is arranged with line breaks to start new paragraphs, and how wide the space between paragraphs are, among other details to make txt more readable. Without markup language text tends to be one big blob of words only seperated by a single space, no padding, no line breaks.

Without line breaks, a paragraph will be rendered as a single line. Line breaks are what happens when you press the enter key using a word processor program like microsoft word, or Openoffice, to start a new line. Saying page break is the same thing as saying "new line".

README.MD

The opposite of markup is markdown (MD). Markdown is used mostly in text editors like microsoft notepad. This is very simple format that creates smaller files than microsoft word, this save space on hard-drive, loads and saves faster, but is very plain looking. Other uses for markdown is to write simple files to be stored by a database or other computer program. As you learn more programming you wiil see README.MD files more often. These are notes about programs that are contained in the same folder as the README.MD text file. We will use .txt and .MD files when building websites so it is important to understand these file extensions.

File extensions

File extensions are the letters after the name of a file. Format follows "name of file" followed by ".file extension". The name of the file and the file extension are seperated by a period, such as "image.png" or "song.mp3". File extensions tell the computer what program to use to open a file.

There are different types of computer files. Documents (doc) are written files like word documents, text documents, and html documents. Other files are images (img) like .png, .jpg, and .svg. And of course audio files like .mp3, .wav or .wav and video files like .mp4.

Different types of files are encoded such that they can only be opened correctly by certain programs designed to run them. Users set "file associations" to tell an operating system how to open a file. Common example: You have an android phone and take a selfie. You go to your file manager in the phone and tp on photo. Android asks what program you want to use to open the photo: gallery, or photo viewer. It also asks if you want to use this program just once or always. If you choose always then you have set the file association for that file type. A file association is a mapping of what file extensions to what program, also known as file extension defaults, these are programs that open by default without being changed by users.

Text Editors

To write HTML you need a text editor. Pick one: notepad, sublime, vs code, coffecup, web app editor or other. For these lessons I will use notepad and then sublime. Here is the minimal html needed to make a webpage:

But we want to use this:

Code inside brackets are called tags. These are HTML tags. Type the code above into an editor and save it as blank.html or blank.htm. This creates a blank template to make future pages.

Notepad

1. In notepad type blank.html for file name. Then change file type from .txt to "all files". This allows you to save the file with any file extension you choose. If you do not change the default setting it will save as a text file named blank.html.txt. This has a file name of "blank.html" with ".txt" as the file extension. If you change file type to "all files" notepad will save it as "blank.html" where the name of the file is simply "blank" and ".html" is the extension.

In Windows operating system file extensions are not shown so your file will only show "blank" not "blank.html" because file extensions are ugly and we do not want to see them. If viewing files as icons they will appear using the icon file for what type of program opens them. I use Chrome as my default web browser so "blank.html" will shoe up in my folder as "blank" with a logo icon for chrome telling me that it is a webpage or link to a website.

Sublime

2. If you are using sublime save file as "blank" and then use the drop down box to select "HTML" as the file type. If there are weird HTML options just use the normal one that says "HTML,HTM, etc, etc".

Explaination of code

I am going to number all 12 lines of the previous code and briefly explain them. Here is the code again:

1. Every webpage must declare it's type. The following tag is a called an HTML declaration tag:

<!DOCTYPE html>

It's job is to tell web browers it is a webpage rather than a different type of internet resource or service.

2. This tells search engines and browsers what language your page is written in. Here I am using English: <html lang="en">

3. This tag is used to nest metadata used by search engines for seo: <head>.

SEO stands for Search Engine Optimization, which means the better your SEO the higher up in searches your site will appear. This is important if your are running a business and you are using your website for advertising and marketing. More people will find your site and you will have more interactions with the public because your site is more public, more visibly seen.

4. This tag tells browsers what encoding to use to render site: <meta charset="UTF-8" />

Render means "to run code and make visible the results" . UTF-8 is the standard encoding for all text documents in English in the Westrern Hemisphere. Encpdings used here mean things like what alphabet you are using and what character set (char-set), not what language you are typing in. For example French have latin letters but a different keyboard so they would use a different encoding. Asian languages do not have latin letters at all so would need an encoding that handles Asian char-sets, for example simplified Chinese.

5. Viewport gives instructions on how webpages should be displayed on different devices with different screen sizes, such as monitors, tablets, and smartphones: <meta name="viewport" content="width=device-width, initial-scale=1.0" />.

This tells browser what text to display when a mouse hovers over a tab<title>Name of your website or page</title>.

6. This is a link to a favicon. A favicon is an avatar or logo for your website:

<link rel="icon" href="images/favicon.ico" type="image/x-icon" />

7. This is a link to a stylesheet. Css is a simple language used with HTML to format or style your webpages: <link rel="stylesheet" href="/css/styles.css" />

8. This is an end tag that closes the opening <head> tag: </head>

Html has two types of tags, open and closed. Closed tags are used to nest text which open tags operate bythemselves. Nested text is like <title> My Title </title> where you need <title> to start the tag and </title> to close the tag. An open tag is like <br> which does not have a matching </br>. <br> means "break space" and creates a new line.

This tells the browser what is to be visibly shown in your webpage: <body> This closes the <body> tag: </body> This closes the </html> tag: </html>

Summary