Web Guideline_Sophia
Download
Report
Transcript Web Guideline_Sophia
WEB PROTOCOL
GUIDELINES
24. OCT. 2013
WEB AUTHORING
SUBIN JIN(SOPHIA)
INDEX
0. PROTOCOL
1. WEB PAGE
2. HTML
3. CSS
4. TERMINOLOGY
2013 WEB PROTOCOL GUIDELINES
PROTOCOL _ CONCEPTUAL UNDERSTANDING
What 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 delivered from
all of common web server to the clients. When a user request 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 transmitting files that contains web pages
to user based on web protocols.
즉,
In other words, when we communicate with Englishman, he can’t understand
our words if we speak Korean. Likewise, people made standards that can
communicate with all of webs. We called this standards a protocol, and when
we communicate on the web, we can communicate to match web protocols.
2013 WEB PROTOCOL GUIDELINES
PROTOCOL _ WORK
HOW 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 protocols.
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.
2013 WEB PROTOCOL GUIDELINES
PROTOCOL _ CONTENT
What’s in it?
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 address)
8. Language(Language type)
사용자 컴퓨터 - 인터넷 망 - 웹서버(구글, 야후 등등의 웹서버)
9. Encoding(Encoding type of Korean)
10.
Information
of
web
browser(IE
6.0/Firefox 1.0, etc.)
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
11. Cookies (Cookie values stored on my
computer)
12. Real transfer content (id = iboss /
password=1234, etc.)
2013 WEB PROTOCOL GUIDELINES
WEB PAGE _ WEB PAGE CONSTRUCTION
STRUCTURE OF A WEB PAGE
All web pages have the following basic structure:
Web pages are now an essential part of people's lives and perform their
* HTML - specifies that this is a web page
jobs. More and more computer functions are now moving to web based
applications and it is important that you are familiar with this technology.
= 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>
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.
<body>
<b>CONTENT OF WEB, EXPRESS IN TAGS</b>
</body>
</html>
2013 WEB PROTOCOL GUIDELINES
WEB PAGE _ WEB PAGE CONSTRUCTION
TAGS
Block-level tags
Web pages are built out of tags. These tags define what is on the page
Block tags allow you give a tag attributes such
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.
1. <h1>A Book About Computing</h1>
2. <hr />
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
the middle "A book About Computing" and a closing tag</h1>. This
<hr />
Horizontal rules
tells us that everything between these tags should be treated as a level
<p></p>
Paragraphs
<br />
Make a new line
<ol></ol>
Ordered lists
<ul></ul>
Unordered lists
<li></li>
List items
<div></div>
div
You can see the first type, it has an opening tag <h1> something in
one heading (h1).
On line two you can see the second type of tag, there is no closing tag,
the tag is entirely self contained. The <hr /> stands for a horizontal rule,
a line across the page.
2013 WEB PROTOCOL GUIDELINES
WEB PAGE _ WEB PAGE CONSTRUCTION
INLINE TAGS
HTML5
These don't take up any physical space on the page (they don't cause
a new line) and can overlap each other.
1. <span></span> : Break the page into sections but it don’t create 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.
What I have been learning so far are the very
<img src =http://en.wikipedia.org/wiki/File:Googlelogo.png” />
basics of web design. If I like what I've been
doing I better check out HTML5. HTML5 is
produces the following:
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 moving over to this
new technology.
2013 WEB PROTOCOL GUIDELINES
WEB PAGE _ TEXT
TEXT 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.
항목
Block type
Inline-Block type
Value specified, (Does not specify)
Value specified, (Does not specify) width=
width= horizontal size of the parent
horizontal size of the parent
Height = vertical size of the content
Height = vertical size of the content
Align
Take 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 model
Margin-left, right /padding, border,
float
Margin(If width value is fixed, you
can intend for auto value)
Margin(can’t auto), padding, border, float
Nested
elements
Only inline
Inline, block
Only inline
Characteristics
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
elements
Span, a, strong, em
Div, h1~6, p, ul, li
Img, input
Area
Inline type
Contents Size
2013 WEB PROTOCOL GUIDELINES
WEB PAGE _ TEXT
TEXT PROPERTIES
O : In all versions of the browser supports the property
★ : Only new versions of the browser supports the property
X : Not supports
※ The default value of this property is shown in bold
Properties
letter-spacing
Values
Internet Explore
Fire Fox
Safari
Chrome
Opera
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
<number>
O
O
O
O
O
auto
O
O
O
O
O
left
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
justify
O
O
O
O
O
inherit
O
O
O
O
O
none
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
normal
<length>
Type
Inheritance
All
Yes
normal
line-height
text-align
text-decoration
<length>
<percentage>
right
center
underline
overline
line-through
Block
All
All
Yes
Yes
Yes
2013 WEB PROTOCOL GUIDELINES
WEB PAGE _ TEXT
TEXT PROPERTIES
Properties
text-indent
text-shadow
text-transform
vertical-align
Values
Internet Explore
Fire Fox
Safari
Chrome
Opera
O
O
O
O
O
O
O
O
O
O
none
X
O
O
O
★
<color>
X
O
O
O
★
<length>
<percentage>
<x-offset>
Type
Inheritance
Block
Yes
X
O
O
O
★
<y-offset>
X
O
O
O
★
<blur>
X
O
O
O
★
none
O
O
O
O
O
O
O
O
O
O
capitalize
uppercase
All
All
Yes
Yes
O
O
O
O
O
lowercase
O
O
O
O
O
baseline
O
O
O
O
O
super
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
<length>
O
O
O
O
O
<percentage>
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
O
sub
<relative>
Inline
Yes
normal
white-space
pre
All
Yes
nowrap
word-spacing
normal
<length>
All
Yes
2013 WEB PROTOCOL GUIDELINES
WEB PAGE _ FONTS
IMPORTANCE OF FONTS
In web design, font is most important part of web. Because it have a strong influence readability and visibility 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.
Serif
Serif is a small line attached to the end of a stroke in a
letter or symbol. Times new Roman is a representative
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.
2013 WEB PROTOCOL GUIDELINES
WEB PAGE _ FONTS
FONT 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)
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.
font-family
Specifies the font family.
caption
Uses the font that are used by captioned controls (like buttons, dropdowns, 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
inherit
Specifies that the value of the font property should be inherited from
the parent element
none
2013 WEB PROTOCOL GUIDELINES
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)
2013 WEB PROTOCOL GUIDELINES
WEB PAGE _ COLOUR
WEB SAFE COLOUR
Few years ago, when computers supported max 256 different colors, lists of 216 "Web Safe Colors" was suggested as a Web
standard. Now, This is not important, since the most computers can display millions of different 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.
2013 WEB PROTOCOL GUIDELINES
WEB PAGE _ IMAGES
IMAGE 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 characteristics of the
three image formats briefly be summarized as follows.
Lossy compression method. It is a way to reduce the amount of
JPG
(JPEG)
Format
Quality
Compression
BMP
100.0%
100%
JPG
5.2%
70%
GIF
4.1%
40%
PNG
4.7%
100%
TIFF
11.0%
100%
image by damaging the original. The more I resaved images, the
quality of the image is steadily declining disadvantage.(Deepening a
staircase phenomenon) Actually, it is the most widely used image
format on the web.
Lossless compression method. Image format is a lossless
GIF
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.
Lossless compression method. Original images can be stored intact
without any damage. It can give a transparent effect precisely by
PNG
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.
2013 WEB PROTOCOL GUIDELINES
WEB PAGE _ IMAGES
JPG(JPEG)
The first, JPG format is lossy compression. It is way to remove information that difficult to identified in images. 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 detected
damage more easily. So, JPG is a specific format for simple and unclear images..
HIGH QUALITY
LOW QUALITY
2013 WEB PROTOCOL GUIDELINES
WEB PAGE _ IMAGES
GIF
similar color images aren't seriously damaged.
ORIGINAL
GIF
GIF is the lossless compression method, but it save only 256 colors is expr
essed. It is different from JPG, PNG format that support 24 bit(16,777,21
6 colors). So, images carrying more than 256 colors information can lose
quality.
However, 256 colors that are saved as GIF format is not fixed. when I save
d the image files, 256 colors are determine. After decide the most commo
n 256 colors in image, it reconfigure and save a image file.
But, images in various colors and contrasts aren't
good for GIF format.
2013 WEB PROTOCOL GUIDELINES
WEB PAGE _ IMAGES
PNG
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 compression 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
PNG(596KB)
the source of the image. PNG images is not original, b
ut it reduce the capacity of the image without any da
mage. So PNG format image is smaller than BMP's. Bu
t it is still bigger than JPG format and GIF format. PNG
format is inefficient in photographs.
2013 WEB PROTOCOL GUIDELINES
WEB PAGE _ IMAGES
IMG TAG
The way to express path
It is indicated by the folder where the document is
<img src = “file name or URL” >
It means
‘image’
written.
Image file name
Command to
load real image
Real image address
that stored in web
If the images in subfolder
Subfolder name/File name
If the images in same folder
File name
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 represent text.
If the images in parentfolder
../File name
It is the role of the image tag. The file path(URL)
represents the address that contains the file. If the
When the image exist in same folder
images posted on the web, URL is image's address on
: filename(ex. image1.gif)
the web. And, if it is just file of the computer, it
means file path.
When the image exist in subfolders
: folder name/file name
When the image exist in parent folder
: ../filename
2013 WEB PROTOCOL GUIDELINES
WEB PAGE _ TABLES
TABLE 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.
TAG
MEANING
tr
Table Row
th
Table Header
td
Table Data
tr
tr
td
td
2013 WEB PROTOCOL GUIDELINES
WEB PAGE _ TABLES
TABLE TAG PROPERTIES
Tag
<table>
Description
Defines a table
Application
<table border="1" bordercolor="red">
<th>
Defines a header cell in a table
<tr>
<tr>
Defines a row in a table
<td colspan="2"></td><td></td>
<td>
Defines a cell in a table
</tr><tr>
<caption>
Defines a table caption
<colgroup>
Specifies a group of one or more colu
mns 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
<td rowspan="2"></td><td></td><td></td>
</tr><tr>
<td></td><td></td>
</tr>
</table>
2013 WEB PROTOCOL GUIDELINES
WEB PAGE _ HYPERLINKS
WHAT IS THE HYPERLINK, HYPERTEXT, HYPERMEDIA?
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 documents 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 access various media like
text, sound, video, picture. So, it can be explained integration concepts.
Connect
2013 WEB PROTOCOL GUIDELINES
WEB PAGE _ HYPERLINKS
ATTRIBUTES
EXAMPLE
<a href="http://www.google.co.uk">Visit Gooooogle!</a>
Attribute
charset
Value
char_encoding
coords
coordinates
download
filename
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
text
shape
Default, rect, circle, poly
type
Not supported in HTML5. Specifies the coordinates of a link
Specifies the hyperlink target to be downloaded
Alternate, author, bookmark, help, licen Specifies the relationship between the current document and the linked document
se, next, nofollow, noreferrer, prefetch,
prev, search, tag
rev
target
Description
Not supported in HTML5. Specifies the character-set of a linked document
Not supported in HTML5. Specifies the relationship between the linked document a
nd the current document
Not supported in HTML5. Specifies the shape of a link
_blank, _parent, _self, _top, framename Specifies where to open the linked document
MIME_type
Specifies the MIME type of the linked document
2013 WEB PROTOCOL GUIDELINES
WEB PAGE _ METADATA
CONCEPT OF METADATA
Put simply, metadata is “DATA ABOUT DATA". It is not real data(video, audio, text, etc.), but it provide information
about real data. It can be described in this picture.
Digital Camera can store metadata in the
image. These metadata provide information
of sensitivity, type of camera, exposure
information, Shooting date. It able to find
the exact information about the image. So,
we can search and manage more easier. If
you use metadata, you can check data's
type and information. 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.
2013 WEB PROTOCOL GUIDELINES
WEB PAGE _ METADATA
METADATA TAG PROPERTY
EXAMPLE
<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>
Attribute
Value
Description
charset
character_set
Specifies the character encoding for the HTML document
content
text
Gives the value associated with the http-equiv or name attribute
http-equiv content-type, default-style, refresh
name
scheme
Provides an HTTP header for the information/value of the conte
nt attribute
application-name, author, description,
Specifies a name for the metadata
generator, keywords
format/URI
Not supported in HTML5. Specifies a scheme to be used to inter
pret the value of the content attribute
2013 WEB PROTOCOL GUIDELINES
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,
internet was comprised of text, because computer's performance was not
good. But web has develped greatly, so developer have to express the
webdesign 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
Language = The Language that markup the structure of Hypertext, This is
HTML's Nature.
2013 WEB PROTOCOL GUIDELINES
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>.
2013 WEB PROTOCOL GUIDELINES
HTML _ HOW TO USE
START TO HTML
Step 1: Start Notepad
Type[Start] - [All Programs] - [Accessories] - [Notepad]:
Step 2: Edit Your HTML with Notepad
Type your HTML code into your Notepad:
2013 WEB PROTOCOL GUIDELINES
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:
2013 WEB PROTOCOL GUIDELINES
HTML _ HOW TO USE
HTML BASIC
This is basic coding of HTML.
<html>
<head>
HTML’ basic structure is comprised
<title>TITLE OF DOCUMENT</title>
of <header>, <body>. CSS style and
<style> CSS CONTENT </style>
metadata is in the <header>. And,
</head>
basic
<body>
structure
and
information of the web is in
<b>CONTENT OF WEB, EXPRESS IN TAGS</b>
<body>.
</body>
</html>
HTML can be edited by using a professional HTML editor like this. Use method depends on HTML editor.
Adobe
Dreamweaver
Microsoft
Expression Web
contents,
Microsoft
Expression Web
Coffee Cup
HTML Editor
2013 WEB PROTOCOL GUIDELINES
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 "wellformed". 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 redesigned as XML.
Extensible
= Able to extend
2013 WEB PROTOCOL GUIDELINES
XHTML _ FEATURES
1. <!DOCTYPE ....> is mandatory.
6. Attribute values must be quoted.
AXHTML document must have XHTML DOCTYPE declaration.
<table width=100%> (X)
2. XHTML elements must be properly nested.
<table width="100%">(O)
<b><i>This text is bold and italic</b></i> (X)
7. Attribute minimization is forbidden.
<b><i>This text is bold and italic</i></b> (O)
<input checked>
3. Empty elements must also be closed.
<input readonly>
An image: <img src="happy.gif" alt="Happy face">
(X)
<input disabled>
An image: <img src="happy.gif" alt="Happy face" /> (O)
<option selected>
4. XHTML elements must be in lower case.
<input checked="checked">
<P>This is a paragraph</P> (X)
<input readonly="readonly">
<p>This is a paragraph</p> (O)
<input disabled="disabled">
5. Attribute names must be in lower case.
<table WIDTH="100%"> (X)
<table width="100%“>
(O)
<option selected="selected">
(X)
(O)
2013 WEB PROTOCOL GUIDELINES
XHTML _ FEATURES
The Most Important Differences from HTML
Document Structure
XHTML Elements
XHTML Attributes
XHTML DOCTYPE is mandatory
The XML namespace attribute in <html> is mandatory
<html>, <head>, <title>, and <body> is mandatory
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
Attribute names must be in lower case
Attribute values must be quoted
Attribute minimization is forbidden
2013 WEB PROTOCOL GUIDELINES
XHTML _ HOW TO USE
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 provides the best
browser compatibility is XHTML 1.0 Transitional.
XTML 1.1 STANDARD FORM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!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>
<title>TITLE OF DOCUMENT</title>
</head>
<body>
</body>
</html>
2013 WEB PROTOCOL GUIDELINES
CSS _ NATURE
What 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
HTML was never intended to contain tags for formatting a document. HTML was intended to define the content of a
document, like:
<p>I am sophia.</p>
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare 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.
2013 WEB PROTOCOL GUIDELINES
CSS _ FEATURES
1. 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,
<h2><font color="purple">Purple title1,/font></h2>
If the webpage is 20pages, you have to change 20 times.
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..
2013 WEB PROTOCOL GUIDELINES
CSS _ HOW TO USE
HOW 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.
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
= 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
<head>
<style>
hr {color:chocolate;}
p {margin-right:5px;}
body {background-image:url("images/subin.jpg");}
</style>
</head>
= Inline style : To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS
property.
<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>
2013 WEB PROTOCOL GUIDELINES
CSS _ HOW TO USE
CSS 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 brackets:
(1) In the case of Id selector
(2) In the case of Class selector
#p{
.contents {
color:blue;
color:blue;
Font-size:12px;
Font-size:12px;
}
}
2013 WEB PROTOCOL GUIDELINES
TERMINOLOGY_ AUTHORING
AUTHORING
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’. Examples
include: Macromedia Dreamweaver, Adobe Go-live Cyberstudio, Microsoft FrontPage, and BBEdit.
Adobe
Dreamweaver
Go-live
Cyberstudio
Microsoft
Front-page
BBEdit
2013 WEB PROTOCOL GUIDELINES
TERMINOLOGY_ AUTHORING
NOTEPAD++
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.
GOOD USABILITY
It is very useful tool when I make a simple website.
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 authoring program is
becoming more complex and varied. Notepad++ is
optimized into the latest web authoring.
2013 WEB PROTOCOL GUIDELINES
TERMINOLOGY_ SITES
SITES
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 expressed in the form of
HTML/XHTML, but generally, it is document written in a string. Web pages are connected 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.
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 divisions 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.
2013 WEB PROTOCOL GUIDELINES
TERMINOLOGY_ SITES
EXAMPLE
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.
2013 WEB PROTOCOL GUIDELINES
TERMINOLOGY_ SITES
EXAMPLE
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’.
2013 WEB PROTOCOL GUIDELINES
TERMINOLOGY_ UPLOADING
UPLOADING
Uploading is the transmission of a file from one computer system to another,
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 receive 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.
2013 WEB PROTOCOL GUIDELINES
TERMINOLOGY_ UPLOADING
EXAMPLE
Everyday, I upload my daily report on the school website. I can explain about upload concept using my
experience.
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 download
means get the file on server. In the server, people can
exchange files anywhere.
2013 WEB PROTOCOL GUIDELINES
TERMINOLOGY_ FTP
FTP
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.
2013 WEB PROTOCOL GUIDELINES
TERMINOLOGY_ FTP
FTP Commander Pro
It is FTP client for Windows. This program is developed by Internetsoft Corporation.
FTP Commander is simple and
easy to use ftp client. It's really the
bare minimum with no extra frills
or thrills. It offers a no-nonsense
interface consisting of two sideby-side local computer and FTP
server panels. The latter contains
a list of about a dozen pre-set FTP
servers. It's easy as pie to establish
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