web protocol guidelines 24. oct. 2013 web authoring subin jin(sophia)

WEB PROTOCOLGUIDELINES

24. OCT. 2013

WEB AUTHORING

SUBIN JIN(SOPHIA)

0. PROTOCOL

1. WEB PAGE

2. HTML

3. CSS

4. TERMINOLOGY

INDEX

2013 WEB PROTOCOL GUIDELINES

PROTOCOLWhat is protocols?

Before we talk about web page construction, we need to know concept

of web protocols. What is protocols? Why it is important? Because it

means the standards, rules and accepted conventions. It is the start and

the core of web.

HTTP is Hyper Text Transfer Protocol, it is a protocol that are used on the

Web. It is rules for delivered to the user of web, and it is a standard de-

livered from all of common web server to the clients. When a user re-

quest documents user want by the web browser, server change the

document and web browser converted this document to the appropriate

type again. And it become displayed to the user. So, it serves to trans-

mitting files that contains web pages to user based on web protocols.즉 ,

In other words, when we communicate with Englishman, he can’t un-

derstand our words if we speak Korean. Likewise, people made stan-

dards that can communicate with all of webs. We called this standards

a protocol, and when we communicate on the web, we can communi-

cate to match web protocols.

_ CONCEPTUAL UNDERSTANDING


PROTOCOLHOW THE MIND WORKS

User’s computer - Internet – Web server(Google, Yahoo, etc.)

For example, we can see how the mind works when we write access to the google.

1. Enter http://www.google.co.uk in the address bar using a web browser.

2. Web browser request information to the google web server by the HTTP proto-

cols.

3. Web server receive requests, and it send the answer to the computer.

4. Web browser received the HTTP protocol information represented by texts and

pictures.

_ WORK

http://www.google.co.uk/


PROTOCOLWhat’s in it?

사용자 컴퓨터 - 인터넷 망 - 웹서버 ( 구글 , 야후 등등의 웹서버 )

In the other words, You can see HTTP protocol is standards when you send a letter.

The standards are as follows:

Address and name, ZIP code of sender -> sending computer’s IP and information of

web browser

Address and name, ZIP code of receiver -> receiving computer’s address

Letter’s information -> Request of sending computer

_ CONTENT

Component of HTTP

1. Transfer time

2. My computer IP

3. Web server IP

4. Method(get/post)

5. HTTP protocol version(1.0/1.1)

6. File format(flash, file data, etc.)

7. Reference(Previous web page ad-

dress)

8. Language(Language type)

9. Encoding(Encoding type of Ko-

rean)

10. Information of web browser(IE

6.0/Firefox 1.0, etc.)

11. Cookies (Cookie values stored on

my computer)

12. Real transfer content (id = iboss /

password=1234, etc.)


WEB PAGE_ WEB PAGE CONSTRUCTION

STRUCTURE OF A WEB PAGE

Web pages are now an essential part of people's lives and perform

their jobs. More and more computer functions are now moving to

web based applications and it is important that you are familiar

with this technology.

You can make some web sites using WYSIWYG editors such as

Front Page and Dreamweaver. We are going to take a look at the

code that these editors produce, and how to structure webpages

with code. Open google page in any browser and click CTRL+U in

Firefox / Chrome or View -> Page Source in Internet Explorer, you

should have the webpage code in front of you.

All web pages have the following basic

structure:

* HTML - specifies that this is a web page

= Head - contains the title of the page with

code

and css includes

= Body - displays the main page content

Which can be represented in HTML code using

the following Tags:<html>

<head>

<title>TITLE OF DOCUMENT</title>

<style> CSS CONTENT </style>

</head>

<body>

<b>CONTENT OF WEB, EXPRESS IN

TAGS</b>

</body>

</html>



TAGS

Web pages are built out of tags. These tags define what is on

the page and how it should be structured. There are two types

of tags that you can use, and all tags should be written in lower

case.

You can see the first type, it has an opening tag <h1> some-

thing in the middle "A book About Computing" and a closing

tag</h1>. This tells us that everything between these tags

should be treated as a level one heading (h1).

On line two you can see the second type of tag, there is no clos-

ing tag, the tag is entirely self contained. The <hr /> stands for

a horizontal rule, a line across the page.

1. <h1>A Book About Computing</h1>

2. <hr />

Block-level tags

Block tags allow you give a tag attributes

such as padding and margin. This allows you

to insert tags into various parts of a page.

And rely on the other elements there to

move to make space for it without worrying

about overlap.

Tag Content

<h#></h#> headings

<hr /> Horizontal rules

<p></p> Paragraphs

<br /> Make a new line

<ol></ol> Ordered lists

<ul></ul> Unordered lists

<li></li> List items

<div></div> div



INLINE TAGS

These don't take up any physical space on the page (they don't

cause a new line) and can overlap each other.

produces the following:

1. <span></span> : Break the page into sections but it don’t cre-

ate new lines.

2. <strong></strong> : It makes text bold.

3. <em></em> : It makes text itallic.

4. <a></a> : It creates a link or an anchor.

<a href=http://www.google.com> link </a> produces the following

link.

5. <img /> : It adds an image.

<img src =http://en.wikipedia.org/wiki/File:Googlelogo.png” />

HTML5

What I have been learning so far are the

very basics of web design. If I like what I've

been doing I better check out HTML5. HTML5

is starting to make websites fully interactive

with the ability to quickly embed videos and

interact with web pages. Over the next few

years I'll increasingly see applications mov-

ing over to this new technology.

http://www.google.com/

http://en.wikipedia.org/wiki/File:Googlelogo.png

http://en.wikipedia.org/wiki/File:Googlelogo.png


WEB PAGETEXT PROPERTIES

Text is the bare contents in web page construct. On the structural aspect, text properties is inline type,

block type, inline-block type. And, in physical side, it can adjust the scale, colour, movement and shadows

of text using Cascading Style Sheet.

_ TEXT

항목 Inline type Block type Inline-Block type

Area Contents Size

Value specified, (Does not spec-

ify) width= horizontal size of the

parent

Height = vertical size of the con-

tent

Value specified, (Does not specify)

width= horizontal size of the parent

Height = vertical size of the content

AlignTake effect on the alignment of

text.(All of text align properties)

Using margin(auto), padding(In the case of table, use vertical

align)

Take effect on the alignment of text.(All of text align properties)

Box modelMargin-left, right /padding, border,

floatMargin(If width value is fixed, you can intend for auto value)

Margin(can’t auto), padding, border, float

Nested el-ements

Only inline Inline, block Only inline

Characteris-tics

Positions are treated similar to text.(Take effect on the vertical

align)

There should be no element in the sides.

Positions are treated similar to text.(Take effect on the vertical align)

Typical ele-ments

Span, a, strong, em Div, h1~6, p, ul, li Img, input


WEB PAGE_ TEXT

Properties Values TypeInheri-tance

Internet Explore Fire Fox Safari Chrome Opera

letter-spacingnormal

All YesO O O O O

<length> O O O O O

line-height

normal

Block Yes

O O O O O

<length> O O O O O

<percentage> O O O O O

<number> O O O O O

text-align

auto

All Yes

O O O O O

left O O O O O

right O O O O O

center O O O O O

justify O O O O O

inherit O O O O O

text-decoration

none

All Yes

O O O O O

underline O O O O O

overline O O O O O

line-through O O O O O

TEXT PROPERTIES

O : In all versions of the browser supports the property

★ : Only new versions of the browser supports the prop-

erty

X : Not supports

※ The default value of this property is shown in bold


WEB PAGE_ TEXT

TEXT PROPERTIES

Properties Values TypeInheri-tance

Internet Explore Fire Fox Safari Chrome Opera

text-indent<length>

Block YesO O O O O


text-shadow

none

All Yes

X O O O ★

<color> X O O O ★

<x-offset> X O O O ★

<y-offset> X O O O ★

<blur> X O O O ★

text-transform

none

All Yes

O O O O O

capitalize O O O O O

uppercase O O O O O

lowercase O O O O O

vertical-align

baseline

Inline Yes

O O O O O

super O O O O O

sub O O O O O

<relative> O O O O O

<length> O O O O O


white-space

normal

All Yes

O O O O O

pre O O O O O

nowrap O O O O O

word-spacingnormal

All YesO O O O O

<length> O O O O O


WEB PAGEIMPORTANCE OF FONTS

In web design, font is most important part of web. Because it have a strong influence readability and visibil-

ity of web page. Readability of web page is relevant to typography, I have examples of serif and sans-serif.

Information delivery capability of web depends on the use of fonts, and it is relevant to accessibility.

_ FONTS

Serif

Serif is a small line attached to the end of a stroke

in a letter or symbol. Times new Roman is a repre-

sentative font of serif. Serif has highly readable

typography, but it is not consistent for Web page

design.

Sans-Serif

Sans means ‘None’ in French. In the other words,

it doesn’t have serif, and it is used accuracy and

rapidity. Helvetica is a representative font of sans-

serif, Apple’s display design use sans-serif fonts.


WEB PAGEFONT PROPERTIES

The font property sets all the font properties. The properties that can be set, are (in order): "font-style font-variant font-

weight font-size/line-height font-family". The font-size and font-family value is required. If one of the other value are

missing, the default values will be inserted. You can practice in this web site(http://

www.w3schools.com/cssref/tryit.asp?filename=trycss_font)

_ FONTS

Property/Value Description Values

font-style Specifies the font style. normal, italic, oblique, inherit

font-variant Specifies the font variant. normal, small-caps, inherit

font-weight Specifies the font weight. normal, bold, bolder, lighter, 100-900, inherit

font-size/line-height

Specifies the font size and the line-height.

none

font-family Specifies the font family.

captionUses the font that are used by captioned controls (like buttons, drop-downs, etc.)percifies the font family.

icon Uses the font that are used by icon labels

menu Uses the fonts that are used by dropdown menus

message-box Uses the fonts that are used by dialog boxes

small-caption A smaller version of the caption font

status-bar Uses the fonts that are used by the status bar

inheritSpecifies that the value of the font property should be inherited from the parent element

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_font

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_font


WEB PAGE_ COLOUR

COLOUR VALUES

Colors are displayed combining RED, GREEN, and BLUE light. In CSS, color is defined using a hexadecimal notation

for the combination of Red, Green, and Blue color values (RGB). The lowest value is 0 (hex 00). The highest value is

255(FF). The values are written as 3 double digit numbers, starting with a # sign. The combination of the Red,

Green and Blue values from 0 to 255 give a total of more than 16 million different colors to display with (256 x 256

x 256). Most of modern monitors are capable of displaying at the least 16384 different colors.

Color Color HEX Color RGB

#000000 RGB(0, 0, 0)

#FF0000 RGB(255, 0, 0)

#00FF00 RGB(0, 255, 0)

#0000FF RGB(0, 0, 255)

#FFFF00 RGB(255, 255, 0)

#00FFFF RGB(0, 255, 255)

#FF00FF RGB(255, 0, 255)

#C0C0C0 RGB(192, 192, 192)

#FFFFFF RGB(255, 255, 255)


WEB PAGE_ COLOUR

WEB SAFE COLOUR

Few years ago, when computers supported max 256 different colors, lists of 216 "Web Safe Colors" was sug-

gested as a Web standard. Now, This is not important, since the most computers can display millions of differ-

ent colors, but the choice is left to user. The 216 cross-browser color palette was create to ensure that the all

computers would displayed the colors correctly when running a 256 color palette.


WEB PAGEIMAGE FORMAT

There are many kinds of image formats, but JPG(JPEG), PNG, GIF is mainly used on the web. Then, What is

the difference between these three factors? And What is the characteristic of each format? The main charac-

teristics of the three image formats briefly be summarized as follows.

_ IMAGES

JPG(JPEG)

Lossy compression method. It is a way to reduce the

amount of image by damaging the original. The more I

resaved images, the quality of the image is steadily

declining disadvantage.(Deepening a staircase phe-

nomenon) Actually, it is the most widely used image

format on the web.

GIF

Lossless compression method. Image format is a loss-

less compression, but the color of the image can be

stored in one is limited. But if images with more than

256 kinds of color like true color(24 bit) save as gif

format, it is a loss occurs.

PNG

Lossless compression method. Original images can be

stored intact without any damage. It can give a trans-

parent effect precisely by adjusting the concentration

of images If you look at the quality of the image when

used to store pictures, it is often used. Because,

there’s no damage.

Format QualityCompres-

sion

BMP 100.0% 100%

JPG 5.2% 70%

GIF 4.1% 40%

PNG 4.7% 100%

TIFF 11.0% 100%


WEB PAGEJPG(JPEG)

The first, JPG format is lossy compression. It is way to remove information that difficult to identified in im-

ages. And, it is merge these areas(difficult to identified), so the file size is reduce. When you save image

files, if you lowered the image quality or save again and again, image is badly broken.

For reference, complex and unclear images can't identify the difference. But, simple and clear images is de-

tected damage more easily. So, JPG is a specific format for simple and unclear images..

_ IMAGES

HIGH QUALITY LOW QUALITY


WEB PAGEGIF

GIF is the lossless compression method, but it save only 256 colors is

expressed. It is different from JPG, PNG format that support 24

bit(16,777,216 colors). So, images carrying more than 256 colors in-

formation can lose quality.

However, 256 colors that are saved as GIF format is not fixed. when I

saved the image files, 256 colors are determine. After decide the

most common 256 colors in image, it reconfigure and save a image

file.

_ IMAGES

ORIGINAL GIF

similar color images aren't seriously damaged.

But, images in various colors and contrasts

aren't good for GIF format.


WEB PAGEPNG

_ IMAGES

PNG(596KB)

BMP(984KB) PNG format is lossless compression method, it

supported 24 bits colors and 8 bits alpha channel,

32 bit colors information. In other words, if we

save a image as PNG format, the image is not

damaged at all. Because, it is lossless compres-

sion method and supported all of colors. So, PNG

format mainly used to save the original image.

Let's compare PNG format to BMP format. BMP

means the source of the image. PNG images is

not original, but it reduce the capacity of the im-

age without any damage. So PNG format image is

smaller than BMP's. But it is still bigger than JPG

format and GIF format. PNG format is inefficient

in photographs.


WEB PAGEIMG TAG

_ IMAGES

<img src = “file name or URL” >

It means ‘image’

Command to load real image

Image file name

Real image address that stored in web

The tag represented the images is denoted by

img(acronym for image). Images have to defined

as "THIS IS A IMAGE", because it doesn't repre-

sent text. It is the role of the image tag. The file

path(URL) represents the address that contains

the file. If the images posted on the web, URL is

image's address on the web. And, if it is just file

of the computer, it means file path.

The way to express path

It is indicated by the folder where the document

is written.

When the image exist in same folder

: filename(ex. image1.gif)

When the image exist in subfolders

: folder name/file name

When the image exist in parent folder

: ../filename

If the images in subfolderSubfolder name/File name

If the images in same folderFile name

If the images in parentfolder../File name


WEB PAGETABLE TAG

Table tag is used to make diagram on the HTML page. Diagram means frame divided into horizontal and vertical

like excel sheet. If similar information is repeat, we can use table tag on the web. For example, class attendance,

bank account transactions. In the past, table tag is used for layout of the web, and it used for make the gap. But it

makes separation of code and design worse and more difficult to repair. Actually, table tag's processing speed is

quiet slower than div tag.

_ TABLES

TAG MEANING

tr Table Row

th Table Header

td Table Data

td td

tr

tr


WEB PAGETABLE TAG PROPERTIES

_ TABLES

Tag Description

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<caption> Defines a table caption

<colgroup> Specifies a group of one or more col-umns in a table for formatting

<col> Specifies column properties for each column within a <colgroup> element

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

<table border="1"

bordercolor="red">

<tr>

<td colspan="2"></td><td></td>

</tr><tr>

<td rowspan="2"></td><td></

td><td></td>

</tr><tr>

<td></td><td></td>

</tr>

</table>

Application

Connect


WEB PAGEWHAT IS THE HYPERLINK, HYPERTEXT, HYPERMEDIA?

_ HYPERLINKS

Hyperlink means 'connection'. It is the core concept of hypertext. Hypertext

means documents that linked to another documents. It is same as normal text

documents, but it can be connected to another documents. Hypertext docu-

ments can connect to any type connection beyond the physical and logical

space. In other words, it can be said new concept of the form of documents. If

you use Hypertext documents, you can read the necessary data at any time.

And, this connection method can be said the Hyperlink. Hyperlink plays a role

in transfer to the document or file you want. But, in the internet, it can be ac-

cess various media like text, sound, video, picture. So, it can be explained in-

tegration concepts.


WEB PAGEATTRIBUTES

_ HYPERLINKS

<a href="http://www.google.co.uk">Visit Gooooogle!</a>

EXAMPLE

Attribute Value Descriptioncharset char_encoding Not supported in HTML5. Specifies the character-set of a linked document

coords coordinates Not supported in HTML5. Specifies the coordinates of a link

download filename Specifies the hyperlink target to be downloaded

href URL Specifies the URL of the page the link goes to

hreflang language_code Specifies the language of the linked document

media media_query Specifies what media/device the linked document is optimized for

name section_name Not supported in HTML5. Specifies the name of an anchor

rel Alternate, author, bookmark, help, license, next, nofollow, noreferrer,

prefetch, prev, search, tag

Specifies the relationship between the current document and the linked document

rev text Not supported in HTML5. Specifies the relationship between the linked doc-ument and the current document

shape Default, rect, circle, poly Not supported in HTML5. Specifies the shape of a link

target _blank, _parent, _self, _top, frame-name

Specifies where to open the linked document

type MIME_type Specifies the MIME type of the linked document


WEB PAGECONCEPT OF METADATA

Put simply, metadata is “DATA ABOUT DATA". It is not real data(video, audio, text, etc.), but it provide in-

formation about real data. It can be described in this picture.

_ METADATA

Digital Camera can store metadata in

the image. These metadata provide in-

formation of sensitivity, type of camera,

exposure information, Shooting date. It

able to find the exact information about

the image. So, we can search and man-

age more easier. If you use metadata,

you can check data's type and informa-

tion. so, you can find the images you

want more faster. In the other words,

metadata is text, but it able to express

for various types media.


WEB PAGEMETADATA TAG PROPERTY

_ METADATA

<head>

<meta name="description" content="Free Web tutorials">

<meta name="keywords" content="HTML,CSS,XML,JavaScript">

<meta name="author" content="Style References">

<meta charset="UTF-8">

</head>

EXAMPLE

Attribute Value Description

charset character_set Specifies the character encoding for the HTML document

content textGives the value associated with the http-equiv or name at-tribute

http-equiv

content-type, default-style, refreshProvides an HTTP header for the information/value of the content attribute

nameapplication-name, author, descrip-tion, generator, keywords

Specifies a name for the metadata

scheme format/URINot supported in HTML5. Specifies a scheme to be used to interpret the value of the content attribute


HTML_ NATURE

What is HTML?

Uncomfortable, HTML is the abbreviation of "Hypertext Markup language". It

is too long, but I have to mention it. Because "HyperText Markup Language"

is most effective word to explain HTML.

Hypertext means document systems that can be choose information you

want. Analog book delivered information sequentially, but internet based on

hypertext system provide information non-sequential. In the internet, you

can get what you want in the various documents based on Connections.

So, What is the 'Mark-up'? We can find answers in Web's history. At first, in-

ternet was comprised of text, because computer's performance was not

good. But web has develped greatly, so developer have to express the web-

design more specifically. And, CSS and Javascript was developed, it helps

designing the web. CSS express the phisical design and Javascript make

web dynamically. When these language is working, it is connect to the

HTML. So, HTML can be described a frame of the web.

And, Mark-up can be explained "Making the frame". Hypertext Markup Lan-

guage = The Language that markup the structure of Hypertext, This is

HTML's Nature.


HTML_ FEATURES

1. There's no case-sensitive in tags.

If you use capital letters, computer recognizes it same as lower case.

2. Filename extension is '.htm' or '.html'.

You can use HTML filename extension either on '.htm' or '.html'.

But .htm is different than .html.

3. Enter, Space bar, Tab does not apply to HTML.

When you create some empty spaces, it will not apply to HTML

sources. If you want to make some spaces, you should to use special

character or tags that recognize the space.

4. You have to follow the order of tags.

Most tags consists of a pair of couple, beginning tag and exit tag. You

have to follow the order about beginning tag and exit tag.

5. It implement sequentially from beginning to end.

HTML implement sequentially from beginning to end. In the other

word, it implement the content of <head>, and next it implement the

order of <body>. So, javascript and css define in <head>.


HTML_ HOW TO USE

START TO HTML

Step 2: Edit Your HTML with Notepad

Type your HTML code into your Notepad:

Step 1: Start Notepad

Type[Start] - [All Programs] - [Accessories] - [Notepad]:


HTML_ HOW TO USE

START TO HTML

Step 3: Save Your HTML

Select [Save as] in Notepad's file menu. When you save an HTML file, you can use either

the .htm or the .html file extension. There is no difference, it is entirely up to you. Save the

file in a folder that is easy to remember.

Step 4: Run the HTML in Your Browser

Start your web browser and open your html file from the File, Open menu, or just browse

the folder and double-click your HTML file. The result should look much like this:


HTML_ HOW TO USE

HTML BASIC

HTML can be edited by using a professional HTML editor like this. Use method depends on HTML editor.

<html>

<head>


<style> CSS CONTENT </style>

</head>

<body>

<b>CONTENT OF WEB, EXPRESS IN TAGS</b>

</body>

</html>

Adobe Dreamweaver

Microsoft Expression Web

Microsoft Expression Web

This is basic coding of HTML.

HTML’ basic structure is com-

prised of <header>, <body>.

CSS style and metadata is in the

<header>. And, basic structure

and contents, information of the

web is in <body>.

Coffee Cup HTML Editor


XHTML_ NATURE

What is XHTML?

* XHTML stands for EXtensible HyperText Markup Language

* XHTML is almost identical to HTML 4.01

* HTML is a stricter and cleaner version of HTML 4.01

* XHTML is HTML defined as an XML application

* XHTML is supported by all major browsers.

* XHTML is a W3C Recommendation

Why we use XHTML? Many pages on the internet contain "bad" HTML. XML

is a markup language where documents must be marked up correctly and

"well-formed". Today's market consists of different browser technologies.

Some browsers run on computers, and some browsers run on mobile

phones or other small devices. Smaller devices often lack the resources or

power to interpret a "bad" markup language. Therefore - by combine the

strengths of HTML and XML, XHTML was developed. XHTML is HTML re-

designed as XML.

Extensible= Able to extend


1. <!DOCTYPE ....> is mandatory.

AXHTML document must have XHTML DOCTYPE declaration.

XHTML_ FEATURES

2. XHTML elements must be properly nested.

<b><i>This text is bold and italic</b></i> (X)

<b><i>This text is bold and italic</i></b> (O)

3. Empty elements must also be closed.

An image: <img src="happy.gif" alt="Happy face"> (X)

An image: <img src="happy.gif" alt="Happy face" /> (O)

4. XHTML elements must be in lower case.

<P>This is a paragraph</P> (X)

<p>This is a paragraph</p> (O)

5. Attribute names must be in lower case.

<table WIDTH="100%"> (X)

<table width="100%“> (O)

6. Attribute values must be quoted.

<table width=100%> (X)

<table width="100%">(O)

7. Attribute minimization is forbidden.

<input checked>

<input readonly>

<input disabled>

<option selected> (X)

<input checked="checked">

<input readonly="readonly">

<input disabled="disabled">

<option selected="selected"> (O)

Document Structure

XHTML DOCTYPE is mandatory

The XML namespace attribute in <html> is mandatory

<html>, <head>, <title>, and <body> is mandatory


XHTML_ FEATURES

The Most Important Differences from HTML

XHTML Ele-ments

XHTML elements must be properly nested

XHTML elements must always be closed

XHTML elements must be in lowercase

XHTML documents must have one root element

XHTML At-tributes

Attribute names must be in lower case

Attribute values must be quoted

Attribute minimization is forbidden


HOW TO USE XHTML

If you use XHTML, check the markup is valid and well-formed, as the specifications are strict than what you

used to. Rather than building the web pages that work and look the way you want, using XHTML means a try to

maintaining a high standard within your page structures.

DOCTYPE code is most commonly format, and it is divided into Transitional form and Strict form. HTML 4.01

Transitional support tags that was in the past, and it support missing tags. HTML 4.01 strict applied HTML

strictly. The best way to define DOCTYPE is using Strict form. It able to define all of the HTML tag properties by

CSS.

In the other words, if you write 'b{fontweight:normal;}, <b> does not see bold strokes. However, we have to

use <embed> or non-standard tags because of the compatibility of web. So best document format that pro-

vides the best browser compatibility is XHTML 1.0 Transitional.

XHTML_ HOW TO USE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XTML 1.1 STANDARD FORM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko-KR">

<head>


</head>

<body>

</body>

</html>


CSSWhat is CSS?

= CSS stands for Cascading Style Sheets.

= Styles define how to display HTML elements

= Styles were added to HTML 4.0 to solve a problem

= External Style Sheets can save a lot of work

= External Style Sheets are stored in CSS files

_ NATURE

HTML was never intended to contain tags for formatting a document. HTML was intended to define the

content of a document, like:

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a night-

mare for web developers. Development of large web sites, where fonts and color information were added

to every single page, became a long and expensive process. To solve this problem, the World Wide Web

Consortium (W3C) created CSS. In HTML 4.0, all formatting could be removed from the HTML document,

and stored in a separate CSS file. All browsers support CSS today.

<p>I am sophia.</p>


CSS1. Rich style effect

= It is possible to expression that not possible in HTML.

= margin, border, padding, layout, etc.

2. Easy to use

= It save information about visual effects in one place(CSS file), without distributed.

= If you change the <h2> tag property to purple in all pages,

3. Cascading

= Able to process the opposite regulation.

= Able to apply again to another pages.

= Able to redefine regulation that already defined.

Able to change CSS for the blind people and elderly people.

4. Small file size

= Gone meaningless elements like table tag for layout and font tag, etc.

= File size becomes more smaller, and able to reduce the loading time.

= More faster loading time, because it doesn't load the CSS that already loaded..

_ FEATURES

<h2><font color="purple">Purple title1,/font></h2>

If the webpage is 20pages, you have to change 20 times.


CSSHOW TO INSERT CSS

= External style sheet : The style sheet is ideal when the style is applied to many pages. With an external

style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the

style sheet using the <link> tag. The <link> tag goes inside the head section.

= Internal style sheet : An internal style sheet should be used when a single document has a unique style.

You define internal styles in the head section of an HTML page, by using the <style> tag, like this

= Inline style : To use inline styles you use the style attribute in the relevant tag. The style attribute can

contain any CSS property.

_ HOW TO USE

<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

<head>

<style>

hr {color:chocolate;}

p {margin-right:5px;}

body {background-image:url("images/subin.jpg");}

</style>

</head>

<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>


CSSCSS RULES

= A CSS rule has two main parts: a selector, and one or more declarations:

The selector is normally the HTML element you want to style. Each declaration consists of a property and a

value. The property is the style attribute you want to change. Each property has a value.

CSS EXAMPLES

= A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brack-

ets:

(1) In the case of Id selector (2) In the case of Class selector

_ HOW TO USE

#p{

color:blue;

Font-size:12px;

}

.contents {

color:blue;

Font-size:12px;

}


TERMINOLOGYAUTHORING

Web authoring is software that enables a user to develop Web content in a desktop publishing format. It is

also used to describe the process of building a website from writing the HTML(Hypertext Markup Language)

to the textual content of the pages. A web authoring package is a website development system which allows

web pages to be visually created like a desktop publishing program. It can generate the HTML code needed

for the pages and can switch back and forth between the HTML and the page layout.

WEB-AUTHORING APPLICATION/TOOL

A computer program used to create or maintain websites is often referred to as a ‘web-authoring tool’. Ex-

amples include: Macromedia Dreamweaver, Adobe Go-live Cyberstudio, Microsoft FrontPage, and BBEdit.

_ AUTHORING

Adobe Dreamweaver

Go-live Cyberstudio

MicrosoftFront-page

BBEdit


TERMINOLOGYNOTEPAD++

Notepad++ is a free software available on the internet for download. It is a text editor, similar to Microsoft

Notepad. It includes many extra features that make it more appealing than Notepad. It has a tabbed screen

system, colored text, and extra features specific to programming. All of these features were tested by the

class in our usability test.

_ AUTHORING

GOOD USABILITY

It is very useful tool when I make a simple web-

site. Because it based on MS notepad, but some

comfortable function was added it. Example, It

have excellent visibility. Color and line feed

helps me to concentrate coding. And, it able to

write as various programming language, not

only HTML or CSS. It’s very important strength

about web authoring, because recently, Web au-

thoring program is becoming more complex and

varied. Notepad++ is optimized into the latest

web authoring.


TERMINOLOGYSITES

A site is a related collection of World Wide Web (WWW) files that include a beginning file called the home

page. It is hosted on at least one web server that able to connect via the internet or LAN. Web page ex-

pressed in the form of HTML/XHTML, but generally, it is document written in a string. Web pages are con-

nected via HTTP, sometimes it provides security and Privacy to user using encryption over HTTPS. All Web

sites which can be connected in officially are collectively make up the World Wide Web.

_ SITES

TYPES of WEBSITES

Websites can be divided into two broad categories - static and interactive. Some web sites are produced for

personal use or entertainment. Many web sites do aim to make money, using one or more business models.

There are many kinds of websites, each specializing in a particular type of content or use. A few such divi-

sions might include,

(1)Blog : Sites generally used to post online diaries which may include discussion forums.

(2)Community site : A site where persons with similar interests communicate with each other.

(3)e-commerce : A site offering goods and services for online sale and enabling online transactions for such

sales.

(4)Government Site : A website made by the local, state, department or national government of a country.

(5)News site : Similar to an information site, but dedicated to dispensing news, politics, and commentary.

(6)Social networking site : site where users could communicate with one another and share media.

(7)Wiki site : A site which users collaboratively edit its content.


TERMINOLOGYEXAMPLE

1. UK Government Site : https://www.gov.uk/

: In government site’s url is always ends in gov.uk. ‘gov’ means government.

2. E-Commercial Site : http://www.ebay.co.uk/

: It buy and sell the things using internet.

_ SITES

https://www.gov.uk/

https://www.gov.uk/

http://www.ebay.co.uk/

http://www.ebay.co.uk/


TERMINOLOGYEXAMPLE

3. Blog Site : https://www.wordpress.org

: It helps people to make personal website. People can choose color and style, so they make their own web

page.

4. Information Site : http://en.wikipedia.org/wiki/Main_Page

: It give information about things you want. It’s very useful and It usually called ‘dictionary’.

_ SITES

https://www.wordpress.org/

https://www.wordpress.org/

http://en.wikipedia.org/wiki/Main_Page

http://en.wikipedia.org/wiki/Main_Page


TERMINOLOGYUPLOADING

Uploading is the transmission of a file from one computer system to an-

other, usually larger computer system. From a network user's point-of-

view, to upload a file is to send it to another computer that is set up to re-

ceive it. People who share images with others on Facebook upload files to

the Facebook. And transmission in the other direction is downloading -

from one, usually larger computer to another, usually smaller computer.

From an Internet user's point-of-view, downloading is receiving a file from

another computer.

When you send or receive an attached file with an e-mail note, this is just

an attachment, not a download or an upload. However, many people use

"upload" to mean "send" and "download" to mean receive. The term is

used loosely in practice and if someone says to you "Download (or upload)

such--and-such a file to me" via e-mail, they simply mean "Send it to me.“

In short, from the ordinary workstation or small computer user's point-of-

view, to upload is to send a file and to download is to receive a file.

_ UPLOADING


TERMINOLOGYEXAMPLE

Everyday, I upload my daily report on the school website. I can explain about upload concept using my

experience.

_ UPLOADING

In the UK, I upload my daily report file.It saved in server(I don’t

know where sever is)

In Korea, Teachers can find

my file on server.

In short, upload is save files on server, and down-

load means get the file on server. In the server,

people can exchange files anywhere.


TERMINOLOGYFTP

The File Transfer Protocol is the Internet facility for downloading and uploading files. It is a standard Internet

protocol for transmitting files between computers on the Internet. Like the Hypertext Transfer Protocol

(HTTP), which transfers displayable Web pages and related files, and the Simple Mail Transfer Protocol

(SMTP), which transfers e-mail, FTP is an application protocol that uses the Internet's TCP/IP protocols. FTP is

commonly used to transfer Web page files from their creator to the computer that acts as their server for

everyone on the Internet. It's also commonly used to download programs and other files to your computer

from other servers.

_ FTP


TERMINOLOGYFTP Commander Pro

It is FTP client for Windows. This program is developed by Internetsoft Corporation.

_ FTP

FTP Commander is simple and

easy to use ftp client. It's really

the bare minimum with no ex-

tra frills or thrills. It offers a no-

nonsense interface consisting

of two side-by-side local com-

puter and FTP server panels.

The latter contains a list of

about a dozen pre-set FTP

servers. It's easy as pie to es-

tablish a connection. All you

have to do is select the server

you want on the list and push

the Connect button.

WEB PROTOCOL GUIDELINES

WEDESIGNYOU 2013 SUBIN JIN

web protocol guidelines 24. oct. 2013 web authoring subin jin(sophia)

Documents

web page web pages

user of web

web sites

core of web

web server ip

concept of web protocols

information of web browserie

common web server