Information and Communication Technology English Version chapter 4: Introduction to Web Design and HTML

Chapter Four

Introduction to Web Design and HTML

Figure: The whole world is now connected via the internet

We all use the internet for emails, messaging, file sharing, video calling and numerous other services. Among this, the web is the most popular model for information sharing. Web is the short form of the World Wide Web. Two or more devices can exchange information through the internet using the web. The web is basically a database where much information is stored as resources or web documents. In the present day, we are in many ways dependent on the web for sources of information. In this chapter we will focus on how to build an effective and working website so that the students can build one for themselves.

After completing this chapter students will be able to

• Explain the concepts of web design
• Describe the structures of a website
• Know the concepts of HTML

Practical

• Design a web page using HTML
• Publish a website

Printed page 115

4.1 Concept of Web Design

In the first age of computers, only the largest universities, laboratories and important government organizations like the defence or the military had access to computers. These computers were used only for processing data, counting numbers, evaluating research results and such works. The need to connect a computer to another was soon realized and thus with that demand we saw the birth of the internet. The demand of transferring files from one computer to another made Tim Berners-Lee create the World Wide Web. He was working at CERN at that time, a famous research institute situated in Switzerland. In 1989, he proposed a concept where using IP addresses a computer can send documents to another computer. Tim thought, using this way researchers from around the world can easily share their research findings and compare notes on each other's works. His proposed system described a way so that researchers do not have to download a thousand page document but can view the document from the internet. Each page will be linked with another important page related to that. So a user can only download the pages he or she needs. He named these written texts on the internet as Hypertexts. The network addresses in which these hypertexts will be found were called Hyperlinks. Information on the internet which are in media format like photo, video or audio were called Hypermedia. Tim thought of a system where users can get the hypertexts from the hyperlinks with just a click of the mouse. In 1990, with the help of his co-workers he proposed a more detailed solution to this. He made a separate software to view these web documents from another computer. He called the software a web browser which is known as World Wide Web.

These are the concepts upon which the modern web was built. There are countless websites on the internet at present. We visit and browse these websites using different softwares. These softwares are known as web browsers. Mozilla Firefox, Google Chrome, Safari, Internet Explorer, Microsoft Edge are some popular web browsers. In the past, most websites were static. They had static information that users can view through web browsers. But now almost all websites are dynamic, in the sense that they produce different outputs depending on the user inputs. These are also known as web applications. Google.com, services.nidw.gov.bd, passport.gov.bd are some examples of such web applications. Every website has two sides, server and client. The client software collects data or input from the user and sends the data to the server. This action is known as a Request. Server software analyzes the data and produces the desired output and sends it to the client, which is known as a ‘Response’. For example, when a user wants

Printed page 116

to create a user account on a website, they input the necessary information to a browser and clicks a button. That button click sends the form data to the server which processes the data for errors and duplicity. If there is no problem in the processing, the server creates the account and sends a success response to the client. If there are problems, the server may send error responses to the client.

Figure: Figure 4.1: Server and clients connected through the internet

Labels: Client, Internet, Server Description: A laptop, a mobile phone and a desktop computer (client) are drawn on the left, each connected by a line to a cloud labelled Internet. From the Internet cloud, a line leads to a server on the right, labelled Server.

The server softwares is generally written in a programming language. PHP, Python, Ruby, Java are some popular languages for these kinds of works.

The web applications run in web browsers use HTML and CSS. The full form of HTML is Hyper Text Markup Language. HTML is a markup language, not a programming language. HTML makes the information in a website or a web application readable through a browser. A web browser knows the HTML tags and purses them to display the information properly as intended.

Although you can create a website with only HTML, you will need CSS or Cascading Style Sheet to make it look good. All modern websites use the CSS in conjunction with the HTML.

It is not necessary that a web application has to send data to the server side for processing. Some tasks can be processed at the client end. Client end processing is very popular nowadays. Javascript is a popular language for this type of work.

Printed page 117

4.1.1 Website Structure

A website can have one or more web pages. The first page of a website is called the Homepage. Different types of websites contain different types of pages depending on their utility. An audio/video sharing website will have a page for streaming audio/video. Most websites have a user profile page which shows the user information. Blog sites have separate pages for each blog post. Some pages are very common and can be seen in almost every website, like the ‘Contact Us’ page, ‘About Us’ page or the FAQ page.

4.2 HTML Basics

The 4.2 section of this chapter is a practical section. This section is meaningful only in an environment where the students have the facilities to write programming codes.

To work with HTML first we need to create a file with the extension .html. We can name the file anything as we please, like mypage.html. If we open the file with a web browser we will see a blank page because we haven't written anything in it yet. To edit an HTML file, we can use any text editors. Notepad, Notepad++, sublime text are popular text editors in this line of work.

HTML Element

A book can have several parts and each part can contain several chapters. Each chapter can contain headings, subheadings, lists and paragraphs. A book can contain images, captions, tables and lists. Similarly an HTML page can have different elements like in a book. These are called HTML elements. Tags are used to write html elements. Tags are similar to brackets. Each html element has an opening and a closing tag. Opening and closing tags and the content in between comprises to make an html element. Some tags do not have any contents inside them so they do not need tag. These are called empty tag.

Opening and closing tags of an element looks like this - < tag _name> and </ tag _name>. Opening tags are enclosed between two angle brackets, while the closing tags have a forward slash in front of the name. The writing inside both opening and closing tag must be same.

Printed page 118

A sample html code looks like this:

<!DOCTYPE html><html><body>Hello World!</body></html>

If we type and save this code in an html file, it will look like this after opening the file in a web browser.

Figure

Labels: hello.html, File, C:/Users/rafit/Desktop..., Incognito, Hello World! Description: ওয়েব ব্রাউজারের উইন্ডো দেখানো হয়েছে; ট্যাবে hello.html নাম, ঠিকানা বারে File C:/Users/rafit/Desktop... লেখা। নিচের অংশে Hello World! লেখাটি প্রদর্শিত হচ্ছে।

Let's analyse the above code a bit more closely. The first line reads - this is called the document type declaration. From this a browser knows that this is a html 5 standard document and renders the documents as such. This is not part of the document but it is very important.

All the html elements are contained inside a main element which is html. This is why the second line of the document contains a opening tag and the document ends with a closing tag. After that we have the tag. Everything that is displayed inside the web browser should be inside the body tag. We have written Hello World inside the body tag and our browser displayed that.

If there is a body, there should be a head too. Everything visible from the browser is written inside the body element while the other information such as information about the website, different settings, styles and scripts are written inside the head element. The website title that we see in the browser tab is written inside the head element. Let's add a title to our web page.

Printed page 119

<!DOCTYPE html><html>  <head>    <title>My first html doc</title>  </head>  <body>Hello World!  </body></html>

If we save this code and run it in the browser we can see the Hello World! Text as before and additionally we will notice that the browser title bar is displaying our title. The title of the web page should be written inside ... tag inside the head element.

Figure

Labels: My first html doc, File, C:/Users/rafit/Desktop..., Incognito, Hello World! Description: ওয়েব ব্রাউজারের উইন্ডো দেখানো হয়েছে; ট্যাবের শিরোনাম My first html doc। নিচের অংশে Hello World! লেখাটি প্রদর্শিত হচ্ছে।

How to write an element

We can write the elements in an html document sequentially, one after another. We can also write one or more elements inside another element. But one element can not overlap another element. We can compare the elements with differently sized boxes. You can put one or more small sized boxes inside a large box. You can put a box over another or place the boxes side by side. But a box can not reside inside two or more boxes. The box's top and bottom can be compared to opening and closing tags.

<p><em>Abracadabra</p></em> Wrong<p><em>Abracadabra</em></p> Right

Printed page 120

Figure: Figure 4.2: Different parts of a Web browser and a Web Page

Labels: Webpage Menu, Nevigation Menu, Webpage Icon, Webpage Title, Browser Tab, Browser Window, Address Bar, Window Control, Bookmark Sign, Bookmark Bar, Scrollbar, Logo, Searchbar, Heading, Webpage, Image, Audio Media Description: একটি ব্রাউজারের উইন্ডোতে উইকিপিডিয়ার "বাংলাদেশ" পাতা দেখানো হয়েছে। উপরের দিকে বাম থেকে ডানে ট্যাব, ঠিকানা বার, বুকমার্ক বার ও উইন্ডো নিয়ন্ত্রণ; বাম পাশে নেভিগেশন মেনু, মাঝখানে শিরোনাম "বাংলাদেশ", ডানে পতাকা ও প্রতীকের ছবি এবং অডিও মিডিয়া। প্রতিটি অংশের নাম তীর-চিহ্ন দিয়ে ডান পাশের লেবেলের সঙ্গে যুক্ত।

Heading

We can see headings of different sizes in newspapers. The main heading is written in the largest font then there are subheadings of different but smaller font sizes. We can do similar things with html headings too. Html has six heading elements. These are expressed as h1, h2, h3, h4, h5 and h6. Here h1 is the largest and h6 is the smallest heading size. To compare the sizes, let's write a code.

<!DOCTYPE html><html>  <head>    <title>HTML Heading</title>  </head>  <body>    <h1>This is heading 1</h1>    <h2>This is heading 2</h2>    <h3>This is heading 3</h3>    <h4>This is heading 4</h4>    <h5>This is heading 5</h5>    <h6>This is heading 6</h6>  </body></html>

If we run the code in the browser, we will see something like this.

Printed page 121

Figure: Figure 4.3: HTML heading of different sizes

Labels: HTML Heading, File, C:/Users/rafit/Desktop/a.html, This is heading 1, This is heading 2, This is heading 3, This is heading 4, This is heading 5, This is heading 6 Description: ব্রাউজারের উইন্ডোতে HTML Heading শিরোনামের ট্যাব দেখানো হয়েছে। নিচে h1 থেকে h6 পর্যন্ত ছয়টি শিরোনাম উপরথেকে নিচে ক্রমান্বয়ে ছোট আকারে লেখা আছে।

Some important elements

Let's add some more lines of code to mypage.html.

<!DOCTYPE html><html><head>  <title>This is my first HTML page</title></head><body>Hello World!This is an html document.</body></html>

Save this code in the file and refresh the page in the browser. You can refresh the page by either pressing the reload icon on the browser or hitting the F5 key. We will see that we have written two separate lines inside the body tag but it is showing in the same line in the browser.

Printed page 122

Figure

Labels: This is my first HTML page; File C:/Users/rafit/Desktop...; Hello World! This is an html document. Description: A web browser window (Incognito mode) with the tab titled "This is my first HTML page" open, showing the text "Hello World! This is an html document." on a single line.

So, how can we display these texts into two separate lines? We have to use a new element
. This is an empty element so it has no closing tag.

<!DOCTYPE html><html><head>  <title>This is my first HTML page</title></head><body>Hello World! <br>This is an HTML document.</body></html>

Now if we save the code and refresh the page, we will see the texts are in separate lines.

<!DOCTYPE html><html><head>  <title>This is my first HTML page</title></head><body>  Hello World! <br>  <p>This is an html page. This is paragraph one.</p> <p>This is paragraph two.</p></body></html>

If we want to write a paragraph we have to use the

element. Save the code and refresh the page in the browser and we will get.

Printed page 123

Figure: Figure 4.4: Creating paragraphs

Labels: This is my first HTML page; File C:/Users/rafit/Desktop/a.html; Hello World!; This is an html page. This is paragraph one.; This is paragraph two. Description: A browser window showing the page with three separate blocks: "Hello World!", "This is an html page. This is paragraph one.", and "This is paragraph two.", each separated by vertical space.

Here we did not have to explicitly mention a line break or use the
element. The p element itself managed an empty space between lines. But if needed one can use
element inside a paragraph.

<p>This is an html page. This is <br> paragraph one.</p><p>This is paragraph two.</p>

Figure

Labels: This is my first HTML page; This is an html page. This is; paragraph one.; This is paragraph two. Description: A browser window showing the first paragraph broken onto two lines after "This is", followed by the second paragraph below.

We can see that a paragraph break takes more space than a line break. If we want to draw a horizontal line, we have to use the

<p>This is an html page. This is paragraph one.</p> <hr><p>This is paragraph two.</p>

Printed page 124

Figure

Labels: This is my first HTML page; This is an html page. This is paragraph one.; This is paragraph two. Description: A browser window showing "This is an html page. This is paragraph one." followed by a horizontal line and then "This is paragraph two.".

Text Formatting

The most used text formatting are bold, italics and underlined texts. To use these inside an html we have to use the , and elements.

<!DOCTYPE html><html><head>  <title>Text Formatting</title></head><body>  <p>This is normal text</p>  <p><b>This is bold text</b></p>  <p><i>This is italic text</i></p>  <p><u>This is underlined text</u></p></body></html>

<p>This line contains a <sup>super</sup>script and a <sub>sub</sub>script.</p><p>(a + b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup></p><p>f<sub>n</sub> = f<sub>n-1</sub> + f<sub>n-2</sub></p>

<p>The word <em>Emphasize</em> means giving special value to something.The word <strong>Strong</strong> is something stronger than emphasizing.</p>