|
In this article I will be discussing elements of a website, what they do and understand common protocols in the creation of a website.
Firstly, to reach any website, you will more than likely have to enter an URL (Uniform Resource Locator). An example of a URL is http://www.google.com. Clicking the text here will also lead you to the page that the URL belongs to, in this case, Google. This is known as a hyperlink, which are very useful for navigating to other pages on the same website, or as demonstrated here, to another website. Almost every site you visit will include hyperlinks, usually to navigate their sites. |
Also in a hyperlink, you will usually find HTTP and WWW. HTTP is short for hyper-text transfer protocol and is used in every website and this is used for exchange and transfer hypertext (the website itself). WWW stands for World Wide Web. Many websites use this as their prefix to determine themselves as a website and as a part of the World Wide Web.
When visiting different websites, you will probably notice many of the same things, things like main menus, hyperlinks and buttons are a standard on many websites. These are there to make the experience enjoyable and easy when a user browses the website, for fast navigation. Different text, images, fonts, and colors are used to make the website visually appealing, and to keep a user interested, but also to show off a product, for example a clothes shop will have a website with images of all their clothing to show a potential customer what they will be purchasing.
In websites you will also usually find Headers and Footers. Headers usually include the title of the website, maybe a search bar and will usually, as suggested by the name, be at the top of the website. At the bottom of the website you will find the footer, which usually has information, contact information and copyright information if necessary.
Also within the HTML you will usually find Metadata. This is where "tags" are defined, and this is what helps people to find your website on other search engines such as google or bing. As shown by the picture, within the Metadata you will define the content of the website, the title, the author and anything else that will help people to find your website.
To use HTML, a typical program used to code basic HTML and CSS websites is Notepad and Notepad++. To start off making a website, you will usually include <!DOCTYPE html> to define that what you are making is a HTML file. After that, you are free to start adding elements such as the title of the website and the content itself. Typically websites will use CSS (Cascading Style Sheets) to design and figure out the visuals on their websites, for example the colors of the backgrounds, the types of fonts and how big the fonts are. CSS files are usually, but not always, stored separately from the HTML files, and then referenced within the HTML file. There is also internal CSS which works in the same way.Having external CSS helps keep the HTML file look tidy and helps to keep everything in the same style. To start using CSS, you will first create a separate file, using a text editor such as notepad with the colors and fonts you want to use on the website defined inside the CSS file. Here is an example of a basic CSS file:
When visiting different websites, you will probably notice many of the same things, things like main menus, hyperlinks and buttons are a standard on many websites. These are there to make the experience enjoyable and easy when a user browses the website, for fast navigation. Different text, images, fonts, and colors are used to make the website visually appealing, and to keep a user interested, but also to show off a product, for example a clothes shop will have a website with images of all their clothing to show a potential customer what they will be purchasing.
In websites you will also usually find Headers and Footers. Headers usually include the title of the website, maybe a search bar and will usually, as suggested by the name, be at the top of the website. At the bottom of the website you will find the footer, which usually has information, contact information and copyright information if necessary.
Also within the HTML you will usually find Metadata. This is where "tags" are defined, and this is what helps people to find your website on other search engines such as google or bing. As shown by the picture, within the Metadata you will define the content of the website, the title, the author and anything else that will help people to find your website.
To use HTML, a typical program used to code basic HTML and CSS websites is Notepad and Notepad++. To start off making a website, you will usually include <!DOCTYPE html> to define that what you are making is a HTML file. After that, you are free to start adding elements such as the title of the website and the content itself. Typically websites will use CSS (Cascading Style Sheets) to design and figure out the visuals on their websites, for example the colors of the backgrounds, the types of fonts and how big the fonts are. CSS files are usually, but not always, stored separately from the HTML files, and then referenced within the HTML file. There is also internal CSS which works in the same way.Having external CSS helps keep the HTML file look tidy and helps to keep everything in the same style. To start using CSS, you will first create a separate file, using a text editor such as notepad with the colors and fonts you want to use on the website defined inside the CSS file. Here is an example of a basic CSS file:
In this basic CSS file, the background color of the website is defined, and in this case is light blue. The CSS file here also defines the style of <h1>, which is a HTML tag used to define headings, so the CSS file tells the HTML file that whenever the <h1> tag is used, it will be a navy colour. Because this CSS file is seperate to the main website, it will need to be referenced in the HTML in order to be used. To do this, you include this text at the top of your HTML document. For this to work, the CSS file has to be in the same location as the html file.
This is what the final product will look like with the example above. I have added a <h1> and as you can see, the text is navy, just as defined in the css file. This is an example of an external cascading style sheet.
An internal style sheet works in the same way as the external, but instead of having a separate file, all of the defining for the background and font colors will be done inside the HTML file. This is how it will look if you were to do this.
To add an image to a html document, similarly to the external CSS files, the image you want to present on your website will have to be located in the same place as your html file. To then show it on your website you need to use the <img> tag. Inside the <img> tag, you will give the location of the image, and the size of it. Here is an example, with the code on the left and the finished product on the right. As you can see in the code, i have referenced tree.jpg, which is in the same location as the html file, and i have defined the size, in this case, 480x640.
Once you have a finished HTML website made, you will typically want to upload it to the World Wide Web. To do this, you will need to upload your css files and html files, and any pictures you have on your website to a server that is hosting files to be published as websites. To do this, you can use a FTP (File Transfer Protocol) program, such as FileZilla or Cyberduck in order to upload your files to the server in order for that server to present them to the Web. Once your files are on the server that you uploaded to, they will be available to view from anywhere using a URL (As described earlier).