Website Design Basics – Anatomy of a Website
Website anatomy
1. Website address – links and URLs
The main language used to create websites is known as HTML which stands for Hypertext Markup Language. Hypertext implies that the content is built by linking various bits of information. When linking to web pages we need to know the address of the website.
Uniform Resource Locator (URL) is the official term used for website address, which starts from "http: // www" and ends with something like.org, .com etc.
The URL consist of:
– Scheme, which tells the browser which interface should be used to access the address;
– Domain, which helps identify which computer hosts the pages;
– Path, which shows the location of the information that should be displayed.
Example:
Consider the following address for identifying the elements of the website address
http: // www. ojosolutions.com/search-engine-optimisation
– Scheme – http: //
– Domain – ojosolutions.com
– Path – / search-engine-optimization
2. Websites and webpages
While visiting a particular website you will see a webpage containing a combination of text, images, audio and video. The phrase web page is used to describe the content displayed within a browser after the file has loaded, even if you must scroll to view all the content.
Websites are usually built from many web pages, related to different subjects. There are basic websites which contain only one webpage and very complex websites contracting of as many web pages as needed.
3. Web Publishing languages
The first way of publishing content on the World Wide Web was based on the framework of desktop publishing module, more specifically the concept of pairs of tags which were used to tell when to start an action and when to stop it. There were specific tags for features like Title, paragraph, heading etc. For example the opening tag <p> denotes the start of a new paragraph, while the closing tag </ p> denotes the closing of the paragraph.
Knowing the code, you can easily create a HTML web page using a notepad. If you save the file as html file and then open the file in your browser, it will display a HTML web page.
The idea was improved and the tags for images and links were developed. This allowed other elements to be displayed within the textual content of the web page such as images and other graphic or audio elements, etc.
HTML went through so any changes and improvements that the need for a set of universal standards appeared. The World Wide Web Consortium (W3C) was formed and it maintains the web publishing standards for the global internet.
HTML and CSS became the main two publishing standards among others. Both languages, when combined together can be used to build a complete web page.
– HTML – Hypertext Mark-up Language – which is used to create the framework for each web page and defines the primary structure of a web page including such elements as title of the page, heading, subheadings, and paragraphs. HTML tags are also used to include some graphic elements, tables and pictures.
– CSS – Cascading Style Sheets which is used to style each web page, more precisely CSS styles the content in HTML structure. In the beginning there were few options for styling text available in HTML itself, but very limited. There was a higher interest in the control over the style of website.All the other aspects of the design, such as background color, fonts and their characteristics, style and size of textboxes etc. can be described by CSS.
Now, let's have a look what's behind it. If you want to see what it looks like from developer's perspective just open any web page in Google Chrome. It will allow you to view the source of the web page including HTML and CSS codes. Once the webpage has been opened you need right click and choose 'Inspect Element' position from the option menu.
The HTML code is displayed on the left hand side, in HTML box we can check what position separate elements of the code hold in the structure. If the HTML element is highlighted a corresponding CSS code is displayed on the right hand side.
You can view and inspect the codes of any web page. You do not have to be a website designer to see how HTML and CSS work together.
