Web Protocol1. Web page

A. Web page construction

A web page is an each web document on World Wide Web. Usually, they are made up of HTML(or XHTML), CSS, JavaScript, images and videos, and more than two web pages can be connected by hyperlinks. When they are collected, they will become a web site.

We can see two meanings from ‘Web page construction’, one of them is about content, which means information that a page wants to show people. Another one is for an appearance.

Figure 1 Web page design construction

When you design a web page, make sure to follow accessibility rules for clients to access.

- Content: All the web sites have specific subject. The information which is included in a page should be related on the web site, if it is composing a web site.

- Availability: Web pages must be familiar with users and the interface should be simple and gives credibility.

Furthermore, there is a fantastic skill for the web design. These days, most of them have different appearances when users access the page on their smart devices such as mobile phones. It was a problem for web developers that creating all the versions for each access environment. A responsive web is the solution, which optimizes the layout, reacting by the

browser’s width, so the page can provide the best quality of contents.

Figure 2 Responsive web

B. Text

Text is direct way to deliver information. Especially, it plays this role in the website. Many web pages are providing information by text. Text can come in a variety of forms, with different ranging colours, fonts, sizes and space and depending on the purpose of the text. When we put texts into the web page, one of the strengths of using text as the content is lightness. It doesn’t require a big memory or loading time so it takes the shortest time to load among other ways such as images or videos. Another one is high accessibility. If there are the blind who want to use your web page which included some information expressed by images, they would never read it but if the information were written in text, the web page can provide it through such as reading services, so that is a powerful strength. However, the weakness is that, it can make people who read that bored. Actually, it is the worst efficient way to provide information. Therefore, to catch people’s eyes, you can choose another way that is more efficient and interesting than text, if you want to express what you want to say more powerful and creative.

However, there is an efficient way using text. It is a combination of text, font, images and else. It is called typography. You can use all the way to express something. It’s

Figure 3 Typography

the art and technique of arranging type in order to make language visible.

C. Fonts

A font is a particular size, weight and style of a typeface, and it is absolutely important when you provide information by texts. Text and font are very close so it depends on which font you used that how strong the message of texts is. You need to avoid following too visually designed or fancy fonts because it controls a typographic readability of the page.

There are two fonts which are used when we design a web page, Serif and Sans-Serif. ‘Serif’ means the protrude shape of strokes’ end in typography and ‘Sans’ means no strokes. Because of these different shapes, Serif fonts are easier to read in printed works and Sans-Serif fonts are better on the web. The another reason is, printed works generally have a resolution of at least 1,000 dots per inch but computer monitors are typically around 100 dots per inch.

Figure 4 Serif and Sans-Serif fonts Figure 5 Examples of Serif and San-Serif fonts

D. Colour

The main purpose of web page is providing information to people and the design is the second important thing in the web page. Therefore, using the wrong colors is likely to make your content hard to read, and make people turn away, so you need to be careful when you combine colors when you design a page.

Figure 6 Color spectrum

A computer monitor is made up of thousands of tiny little red, green and blue dots which are grouped three and three. And each of the three dots can have any value from 0 to 255, which means that the total number of possible colors is 256*256*256 = 16,777,216. Any color can be expressed by combinations of these three numbers. For example, the yellow has the number 255, 255, 0. At the time, the first number means the red dot, the second one means the green dot and the last one means the blue.

This color-scheme information is mentioned by CSS instructions. It can be included in the HTML file or referenced within in the HTML file as a separate file.

CSS Example:

body{background-color:#d0e4fe;}

h1{color:orange; }

E. Images

A web page can contain Not-textual information such as images, graphics, videos or audios. Among those types, images can be distinguished into static and animated images. When

you put a static image, it should typically be GIF, JPEG or PNG. And you can use animated GIF and SVG, maybe Flash, Shockwave or Java applet as an animated images.

Small images download faster, and the faster your page downloads the more likely people will stay. A good maximum size for images is 10K. Plus, search engines prefer sites that load quickly, so keeping your images small is the first step to making them faster.

Some ways to keep images small:

- use JPG images for photographs and GIF images for flat color pictures

- crop the pictures to only include the important parts

- with GIF images, use the fewest number of colors

- with JPG images, compress them as small as possible

Images can be added to the web page by using <img> tag on the HTML code. And there are a few attributes for the tag, which are height, width, title and alt. Alt means alternative for the situation that the image isn’t loaded. You don’t need ending tag of the <img> tag in the HTML.

How to use <img> tag in HTML:

<img src="graphic.gif" width="10" height="10" alt="alternate text">

F. Tables

Figure 7 HTML Table

Tables are great way to show lots of information which can be categorized into common items. It makes better people to recognize it at one go.

How to use <table> tag in HTML:

<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td>

</tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>

The HTML5 specification still recommends that you don't use tables for layout, but if you do, you should make the tables different from tables that are used for providing information.

According to the HTML5 specification, some developers use tables to design the layout web page. Even if HTML5 allows using tables for layout, it should not be used as layout because tables can be difficult for accessibility tools like screen readers or search engines to navigate pages.

In addition, there are some other reasons:

- Tables are inflexible.

- Tables load more slowly than CSS for the same design.

- Tables can hurt search engine optimization.

- Tables don’t always print well.

G. Hyperlinks

Figure 8 Hyperlinks

Hyperlink is a reference which can point all the types of data directly in a HTML document and hypertext is text with hyperlinks. You can make hyperlinks by using <a> tag in the HTML documents.

How to add hyperlinks into HTML:

<a href="URL" title="link title" target="link target" class="link class">link label</a>

Usually, the colour of unvisited hyperlinks is blue and visited one’s colour is purple. These days, you can use CSS to make the look and feel of hyperlinks better. If you apply proper CSS on hyperlinks, it can produce some amazing interactive effects.

H. Metadata

There is a data for data and it is called metadata. It means additional information which follows the main information of web page for analysis it. For example, on digital camera, whenever you take a photo, data of the photo would be saved, such as information of the camera, time, whether flash turned on or off, resolution or size. Even if it never effect on web page because it is just additional, metadata is really useful and important. By analysis the data, it becomes very valuable information when you process main information and also, metadata improve findability.

You can describe metadata within an HTML document by sung <meta> tag. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata that you wrote on would be used by browsers and search engines (keywords) but it will not be displayed on the page.

Describe metadata within an HTML document:

<head><meta name="description" content="Free Web tutorials"><meta name="keywords" content="HTML,CSS,XML,JavaScript"><meta name="author" content="Ståle Refsnes"><meta charset="UTF-8"></head>

2. HTML

A. Nature of HTML and XHTML

HTML(Hypertext Markup Language) is a language for web page. It means a structural things for the content such as title, paragraph, list and else. And also, it provides a way for making structure of documents with links. HTML is written with just tags which are HTML elements but you can make it include scripts like JavaScript or CSS to effect on a process and appearance. Usually, however, it’s recommended that using CSS for exact markup.

XHTML(Extensible Hypertext Markup Language) is a markup language which is on an equal expression with HTML but it has a stricter grammar. It is an application of XML. That’s why it can automatically process using XML library unlike HTML because XHTML document is one of XML documents and it has to be exact in grammar.

B. Features of HTML and XHTML

HTML:

- It doesn’t distinguish upper case and lower case so it recognizes as same letters. In In protocols, however, they encourage using lower case. e.g. <font> = <Font>

- Every tag should be wrapped between ‘<’ and ‘>’. e.g. <font>

- Some tags are made up of starting tag and ending tag. You must be careful with the order because we usually use tags, mixing them. At that time, the order has to be correct. e.g. <font> content </font>, content <br>

- Tags are sequentially executed but if an error happened, you can’t see them on your browser or page.

XHTML:

- It does distinguish upper case and lower case. Also, every element and attribute must be written in lower case. e.g. <font> ≠ <Font>

- All the kinds of tags are made up of starting tag and ending tag. e.g. <font> <Font>

- Tags are sequentially executed but if an error happened, you can see them on your browser unlike HTML. Therefore, you will feel more comfortable than HTML which doesn’t show the result of code with errors.

C. How to use HTML and XHTML

When you use HTML, you must make sure putting the document type declaration the very first thing in your HTML document, before the <html> tag. It explains to clients, web browsers what version of HTML the page is written in.

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>

And when you use XHTML, you must make sure putting the document type declaration the very first thing in your HTML document, before the <html> tag as well. It explains to clients, web browsers what version of XHTML the page is written in. In a XHTML document, the character encoding has to be mentioned in XML declaration or meta http-equiv. If there isn’t

character encoding in the document, the XML interpreter programme thinks it as UTF-8 or UTF-16 unless it wasn’t declared in the high protocol.

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Title of document</title></head><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>

3. Cascading style sheets

A. Nature of CSS

CSS(Cascading Style Sheet) is a language which describes how the markup language be expressed actually and it is usually used on HTML, XHTML and also on XML. It makes a layout and design of web page so it can decide text size, fonts, image alignment and else. It was developed by W3C and they are continually making new versions of CSS. Nowadays, people started to use CSS3. CSS1 was released in 1996 and it was the first CSS series. CSS2.1 was released, being added new functions and tools. Most of web browsers support it well but in the case of Internet Explorer, they’ve supported it since they got IE 7. Now, W3C makes CSS3 as a standard.

HTML is originally for structuring content of page and CSS is for decorating this structured HTML page. You can make a web page which has a great accessibility and which is loaded quickly by using <div> tag and CSS, not making a terrible layout from tables which consist of complicated tags and attributes.

B. Features of CSS

- CSS provides many ways to select specific part which would be decorated on the web page. e.g. id & class selector

- CSS makes easy to update the web page.

- CSS file has a small file size because there aren’t unnecessary elements such as table to for layout or font for decorating text. Therefore, you can reduce loading time.

- CSS has various style effects which cannot be expressed in HTML. e.g. margin, border, padding

C. How to use CSS

- Inline Styles: It applies styles in an HTML tag that you want to decorate but it is not good way as a separation content and style. e.g. <p style=”color:gray;”>

- Internal Style Sheet: It applies styles by being declared between <head> and </head> tag.

<html><head><style>      font{font-size:20pt;color:red;}</style></head><body><font>WELCOME</font></body></html>

- External Style Sheet: It applies style by linking a style sheet file to the HTML document. The strength of this way is that it is really efficient to change and keep all the style at once. You’d better to use it if you are trying to make a professional web page.

<head><link rel=”stylesheet” type=”text/css” media=”screen” href=”css/stylefile.css”></head>

Two main parts of CSS rule:

Figure 9 CSS Syntax

Normally, the selector is HTML tag but there are other two selectors which can be used, id and class selectors. The id selector is for a single, unique part of web page. It uses the id attribute of HTML elements and it is defined with “#”.

Example of id selector:

#para1{text-align:center;color:red;}

The class selector is for a group of elements or parts. You can set a particular, common and same style on many HTML elements. It uses the HTML class attribute, and is defined with “.”.

Example of class selector:

.center {text-align:center;}

4. Terminology

A. Authoring

The word, Authoring can be used by many fields, we can say DVD authoring, book authoring and else. Generally, It means creating or making something. However, in web field, Authoring means whole processes of creating, designing or building web content such as HTML pages, web site, JavaScript or flash, which are for use on the World Wide Web.

A computer program used for web authoring is called a ‘web authoring tool’. For instance, there are Macromedia Dreamweaver, Adobe Go-ilve Cyberstudio, Microsoft FrontPage, and BBEdit.

B. Sites

Site means a location of somewhere so it can be an area on the Earth’s surface in geography and a place which is evidence of history in archaeology. In information technology, site is web site, which is a set of related web pages containing content in network. It is based on internet protocols. It is hosted on web server that can be accessed through internet or LAN. Web page is accessed through HTTP and sometimes, it provides people who use the content security by encoding through HTTPs.

Kinds of web site:

- Portal site: It was made to be basically passed when people access internet. It provides searching and communication function such as news, a home shopping, a blog and an e-mail.

- Searching site: It shows the information that the user looks for among lots of web documents.

- E-commerce site: People sell and buy something through internet, e-commerce site.

- Download site: It is for downloading software, computer programs or tools.

C. Uploading

Upload is usually used with download. They are words to refer transferring electronic data between two computers. Upload has opposite meaning of download, so it means sending data from local system to web server, FTP server or web site. For example, we say uploading a video on YouTube, which means sending the video to web site from local computer.

D. File transfer protocol (FTP)

FTP(File Transfer Protocol) is a protocol to transfer a file between server and client, using TCP/IP protocol. There are two kinds of connection.

Figure 10 FTP Connections

- Command connection: First of all, the control port, port 21 makes a connection for certification and command, and then, commands that the clients made are delivered through it.

- Data transfer connection: Actually, file transferring needs a new connection. There are active mode and passive mode of this connection.

Because FTP can change or delete files on server, certification process must be needed. Usually, the password is not be encoded in FTP so if you want to make the security strong, it is recommended that using other protocols such as SFTP or SCP.