Menu
IDC 40 - Web Design
WWW
The world-wide-web is the way much information is communicated on the internet ("international network"). We will not be doing significant web design in the course, but you should have an understanding of the basic concepts below.
Browser
A browser is used to access the web. Some common browsers:
- Explorer
- Chrome
- Firefox
HTML
HyperText Markup Language is not exactly a programming language, but does allow you to put program snippets inside of it. Files with the .html extension are the standard type of document that a browser will read.
URL
The "earl" or URL is the internet address of the html file that you are trying to load into the browser. It is found at the top of your browser and starts with "http"
Editor
The editor that you use for an HTML document can be just a word processor. I prefer to use something simple like Microsoft Notepad, but there are better tools for the job which will highlight keywords in different colours.
<Tags>
Tags are used to adjust the formatting of text in an html document. They are easily identified with <> symbols and will have a letter in the middle to determine what action is to be applied to the text.
<br> will add a page break and there is no other tag needed However, if you want to make a single word appear in bold, then you need two tags (before and after). The ending tag looks like the beginning tag but with a slash in it. this tag <b> makes things bold </b> and the end tag will end the bold letters Once you have created your document, you will save it with a .html extension. |
Microsoft Windows has list of recognized file extensions. This list is called the Windows Registry . It recognizes the .html extension and associates it with your default web browser. So when you search for it in the file explorer, Windows will place a browser icon beside it (in the example on the right, the test file has a Chrome icon beside it). If you double-click on it, then the registry will automatically open it up in the default browser. However, you can choose to open it up in any app that you want...
|
The HTML file will have a different appearance depending on which app you open it with.
If you open the HTML file in a word processor (left), then you will see the <tags>. However, if you open it up in a browser (right), then you will not see the tags. Instead, you will see the text is formatted differently. |
HyperLinks
One of the most useful concepts in HTML is the hyperlink. It allows you to create a word that the user can click on and then the user will be transported to a specific URL. Look at the example below and notice the following:
- the hyperlink tag starts with <a href= and it includes the URL
- the URL is in quotation marks
- the opening tag is finished after the URL
- the words that follow the opening tag will be the words that the user can click on
- it requires a </a> closing tag because we don't want ALL of the words to be clickable
Comments
Just like any other programming language, you can add comments to html using a single comment tag. Remember, comments are your opportunity to get communication marks!
<!-- This is a comment -->
<!-- This is a comment -->
More Tags
A few tags you may also wish to try:
Italics: <i>
Large font: <h1>
Small font: <h6>
There are too many tags to list. You are not expected to memorize tags for the course. One of the best resources for html tags can be found in the tutorial link below.
Italics: <i>
Large font: <h1>
Small font: <h6>
There are too many tags to list. You are not expected to memorize tags for the course. One of the best resources for html tags can be found in the tutorial link below.