Transcript **** 1 - WordPress.com

About
Web
DAEUN KIM
Web standard
Web browser can have a Graphical User
Interface, like Internet Explorer, Mozilla Firefox,
Safari, Chrome and Opera.
If you develop web site, you must think
browser. You must set same result about each
browser. We called that is web standard.
If you don’t keep web standard, maybe you
can’t see each browser each result.
Very horrible thing. Layout position will be
changed and confused. So it is very important.
If you web developer, you must observe this
rules. And this is promised between
programmer. So you can conversation with
programmer. Therefore all programmer can
analysis your web site easily.
* Web standard : (X)HTML, CSS, XML
* You can check your web page use this site. (http://validator.w3.org/ )
This site is talked to you that your web page is keeping Web standard.
Web accessibility
Web accessibility means all people can use website
easily.
This means, disabilities people can use website too.
Disabilities people is people. They want to use
website.
If web developer don't keep Web accessibility,
disabilities people don't used website.
It is sure. Because they don't see or heard.
Therefore Web accessibility is important to
disabilities people.
However some web developer didn't keep this rules.
I think most web developer should keep Web
accessibility.
* If you want to use this function, you should need
some equipment. And user should need each
equipment.
* This is video about Google Web accessibility.
Google support web accessibility service.
http://www.youtube.com/watch?v=mIC6tEf7VK8
How keep Web accessibility?
Web developer consider something.
•
•
•
•
Visual : blindness, low vision, color blindness.
Auditory : a hearing-impaired person.
Cognitive/Intellectual : dyslexia, developmental disability.
Motor/Mobility : muscular atrophy, Parkinson's disease.
How can we help them?
Web developer help blindness to textual equivalents provided for
images and with links named meaningfully, this helps blind users
using text to speech software and/or text to Braille hardware. And
when text and images are large, it is easier for they to read and
understand the content.
When a hearing-impaired person saw video, Web developer help
them to give a sign language service or subtitles. It feels more
better them. And they feel thanks.
Web accessibility Example
[ Blindness ]
<- Support Voice service
http://www.webbie.org.uk/ko/
[ Hearing-impaired person ]
<- Support Subtitles
and sign language
http://www.bda.org.uk/
* This web site is good example about Web accessibility.
They got a certification-mark that is goo at Web accessibility.
http://www.samsungb2b.co.kr
Web page
Web page is a document on the World Wide Web. So Web page is
suitable for the web browser. Every Web page is identified by a
unique URL (Uniform Resource Locator).
If you make Web page, You usually use to mark-up language like
HTML.
What is the difference between a website and web page?
Website means gather web page. Website contains more than one
web page. And Web page that you are reading now is considered.
<-This is Web page example.
If you click this picture, you show Web page.
Text
When we coding HTML, text is a very easy thing to add and
format.
In HTML, text is same way that a typical word processor such
as Word formats text. We can set bold text and italics.
Text has a many format. This site gives format information.
We can reference.
http://www.w3schools.com/html/html_formatting.asp
Why need Text?
Text is showing web site purpose or information. If you read
text, you can understand easily. It is important to give
information to user. Actually text usually gets formatted using
CSS. So you can design text style.
If text is not enough in site, I think that site is just funny site
like this.
They can't get information. So text in Web is important to
give information to user.
http://www.imagechef.com/ic/word_mosaic/
Text
In HTML5, text tags added tag. It is <mark> tag. The <mark> tag
defines marked text. If you want to highlight parts of your text you
use <mark>tag. For example, you write like this,
You can see like this.
Font
Font is give information to user. So readability is very important.
Web designer should think readability. If they want design font,
something like
But If you use this font title, it is Okay.
Font has different atmosphere. I will explain each font atmosphere .
It is difficult to read information. In this case is not good web design.
Therefore normally web designer use serif or sans serif.
Serif font characteristic is end part. It is snap.
On the other hand, sans serif is straight line.
Helvetica is famous sans serif type. And nowadays usually use sans
serif type in web site.
* In HTML, <font> tag was supported.
But in HTML5, the <font> tag is not supported. Use CSS instead.
Font
Actually, Font atmosphere is decision about Web atmosphere.
I will show you.
This font looks simple, but it has luxury. So usually cosmetics site use
like this font. -> http://www.chanel.com/
This font looks strong and wild. -> http://www.drmartens.com/
This font will use event card. For example, discount event promotion
site. -> http://www.glastonburyfestivals.co.uk/
Font
This font has romantic mood. Maybe this font use atmosphere site.
-> http://thehawksmoor.com/
This font has funny mood. This font likes kids. If you want to make
for Child site, maybe this font is useful. -> http://www.kidsites.com/
This font feel horrible. So If you make horror site, this font is suitable.
-> http://www.horror-movies.ca (Don’t click this link.)
Color
In HTML, you can specify color using the
color name, hexadecimal value or the
RGB(Red, Green, Blue) value.
RGB are usually given in the 0–255
range.
Hexadecimal value starting with a # sign.
For example, if you want to use red color,
in RGB you write red but in hexadecimal
you write #ff0000 or #f00(If character is
same like ff 00 00, you can reduce
character like f 0 0).
* Some browsers do not support colors. For colorblind users,
Web content depending on colors can be unusable or difficult to use.
If you are careful color blindness, you don't use red
and gray colors together.
Maybe they will see all gray colors.
And also red and green colors.
They don't distinction that colors.
* This site give you a lot of color code.
http://html-color-codes.info/
Color
Web safe color?
Some years ago, when
computers supported max
256 different colors, a list of
216 "Web Safe Colors" was
suggested as a Web
standard, reserving 40 fixed
system colors.
This means all computers
would display the colors.
But this is not important
today, since most computers
can display millions of
different colors.
Color
Color has atmosphere too. It is decision about Web atmosphere.
This is important. Actually, many company has own color. F
Red : Red makes feel warm and dynamic. People think eyecatching to web. For example, LG site -> http://www.lg.com/uk.
Blue : Blue makes feel confidence and trust. People think that
company is good. So Many company use Blue color to their own
site. For example, SAMSUNG site ->http://www.samsung.com/uk/
Black : Black : Black is simple and clearness. So this color used a
lot. This color feel luxurious. For example, Chanel site ->
http://www.chanel.com/en_WW/
Green : Green makes feel fresh and relaxation. People feel
composure and safety. For example, NHnonghyup site. This site is
Korean bank site -> http://www.nonghyup.com/
Images
In HTML, images are defined with the <img> tag.
<img src="url" alt="some_text"> <- this is Syntax for defining an
image. Images has each URL. This is like address that is the location
where the image is stored.
Alt means, if image is not show in browser, that text show instead.
So user know what is this picture.
What is difference between jpg, gif and png?
Images has some format such as jpg, gif, png.
• JPGs have become the standard image of the internet because
they can be compressed a lot.
• GIF means Graphics Interchange Format. That is an older file type.
GIF also is supports animations.
• PNG is good option for transparency and non-lossy, smaller files.
In web, normally use jpg type.
Images
Why We use images?
In this case, this is same as text.
If web text is not enough, it doesn't have information .
On the other hand, If web text is too much, it is hard to read.
So We put the images. Images help to understand text.
[ For example ]
Images help to understand text :
http://en.wikipedia.org/wiki/Web_browser
We can understand about web browser. easily. Because Images help
to understand.
Only text : http://www.webopedia.com/TERM/B/browser.html
This is only text site. You can’t see images. And you can’t understand
text easily.
* So Images are very important to understand text easily.
Tables
Tables How to create tables in an HTML document.
Some years ago, table was one of best tags about Web
design. Web designer or developer used table tag to make
layout. But nowadays it doesn't use.
Because speed. The layout algorithm for tables is much
harder, the browser often has to wait for the whole table to
load before it can begin to layout the content.
And it is hard to maintain. A lot of <tr>, <td> tags. How
can you understand a lot of tables tags and layout? Very
difficult to each other. And If New Web developer come, how
can analysis? So we promised don't use table tag to make
layout.
Table tag is not use to make layout.
But it use just chart. Like this.
Tables
How can you make layout without table?
You use <div>tag. It is more clear. And <div> tag must has
id or class. So you can design easily. It is more faster upload
than <table> tag. And more easier maintain.
Therefore If you make layout, you can use <div> tag.
Hyperlinks
Hyperlink is an element in an web document that links to
another place in the same document or to an entirely
different document.
Hyperlink has rule.
When you move the cursor over a link in a Web page, the
arrow will turn into a little hand.
If you changed cursor design, user don't know that is
hyperlink. User know, if they move cursor and it was
changed a little hand, it is hyperlink.
And color rule. By default, hyperlinks will appear as follows
in all browsers.
• An unvisited link is underlined and blue.
• A visited link is underlined and purple.
• An active link is underlined and red.
But you can change that color to use CSS.
Nature of HTML
•
•
•
•
•
Short for Hyper Text Markup Language.
HTML is mark-up language.
HTML is a set of tags.
The tags describe document content.
HTML documents contain HTML tags and
plain text.
[ HTML5 ]
Nowadays most web developer is using HTML5 instead of HTML.
Why? What is HTML5? and What is difference between HTML and HTML5?
I will explain to you easily.
HTML5
What is HTML5?
• Fifth major revision of the Hypertext Mark-up HTML.
• Intended to subsume not only HTML 4, but also XHTML 1.
• HTML5 is Web Applications.
What is difference between HTML and HTML5?
HTML5 removed style tag. For example, <font>, <center> and frame tag too.
They think style is CSS part.
And added preface, footer and <canvas>, <video>.
HTML5 structure is different to HTML structure.
DOCTYPE define way was changed.
[ HTML ] - <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
[ HTML5 ] - <!DOCTYPE HTML>
HTML5
HTML make layout to use <div>tags. But In HTML5, it use own tags.
HTML5 construction
I think, HTML5 construction is position of function.
Web page has logo, menu , content, copyright.
I will explain to use some examples. This is Korean portal site "Naver".
http://www.naver.com
1) logo, menu
LOGO ->
<- MENU
Most Web page has a individual logo. In HTML5, this part is <header>.
<header> means this is headline. Logo is located in headline.
In HTML5, Menu is <nav>.
HTML5 construction
2) Content
This is main content of web page.
In HTML5, it is <article> or <section>.
We divided two part.
Actually, it doesn’t big meaning. Just
divided.
So you can use anything.
3) Copyright
This is copyright part. This part is located web page under.
In HTML5, this is <footer>. In <footer>, We write like copyright
or company introduction.
The benefits of HTML5
1) HTML5 makes the web faster.
2) HTML5 has <Canvas> tag. That is a
powerful tool for creating graphic content.
You can draw in your web.
3) Internet browsers are supporting HTML5.
4) HTML5 has video capabilities. They
suspend flash capabilities.
5) HTML5 is available on a multitude of
platforms and performs great on PC’s,
mobile phones and tablets.
* This sites made HTML5.
http://www.nevermindthebullets.com/?fbid=8CJTeZgC5TZ
http://10k.aneventapart.com/
Nature of XHTML
• Short for Extensible Hypertext Markup Language.
• XHTML is more extensible and increase
interoperability with other data formats.
• XHTML is HTML defined as an XML application.
• XHTML is supported by all major browsers.
The benefits of XHTML
1) Internet browsers support XHTML. And W3C designate Web standard language.
2) And XHTML usually use to make webpage.
3) XHTML making time is faster than HTML5.
Feature of HTML
If you use HTML, you keep some rule.
1) You should save the name of first page for index. Index means this is first page.
For example, "index.html".
2) You should write meta tag. Because, If you don't write meta tag, you can see
broken text. So you write like this.
<meta http-equiv="ContentType" content="text/html; charset=utf-8">
3) If you use tags, you should close tags.
4) Each title of content use <h>tags. <h>tags has h1~h6 step.
5) It doesn’t distinguish upper case and lower case. Because it recognizes as same
letters.
Feature of XHTML
If you use XHTML, you keep some rule.
1) It is not allowed reiteration. XHTML strict about grammar.
2) If you use tags, you must close tags. For example, <p> even though <br>,
</br>
3) Attribute value must cover for quotation marks.
4) It does distinguish upper case and lower case. XHTML use lower case. However
value use upper case and lower case both.
5) Disappear name attribute. And that attribute change id attribute.
How to use HTML
HTML has basic structure.
[ Example ]
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
If you keep this frame, you can do it easily. <head> part is not show in your
browser. So you should put your content <body> part. Then, you can show your
content in webpage.
* This is tutorials about How to use HTML.
http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-andtechniques-you-must-know/
How to use XHTML
XHTML has basic structure.
[ Example ]
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml11/DT
D/xhtml1-strict.dtd">
<html>
I think, If you know HTML, you can write XHTML.
<head>
Just be careful about some grammar. It is same to
<title></title>
use.
</head>
<body>
<img src=“#”
alt=“text”> </img>
</body>
</html>
I don't know What I use. HTML or XHTML?
This is just your choose. Because some expert
encourage HTML more than XHTML. And some
expert encourage XHTML more than HTML. So It is
your choose.
Nature of CSS
CSS is short of Cascading Style Sheets. CSS is language of design decorated HTML.
Why web developer use CSS?
CSS adds design to HTML documents.
HTML is just whole structure about web document. This means HTML is just content. So CSS
helps us create web site that looks like real web site. For example, like this page which you are
seeing.
In the past, HTML includes design elements. For example, <font> tag, <b>tag or <i>tag.
If I use <b> tag, text is bolding. And If I use <i> tag, text is slanting.
That time all layout and design information were input to HTML document. What a terrible
happen.
As a result, HTML document meaning was changed. HTML basic intrinsic merit disappeared.
HTML became a design document.
So W3C made CSS. They divided design part and content part and their purpose was making
HTML to structural documents.
Feature of CSS
CSS is helping layout, background and text disposition make more detail setting than HTML.
And If I change <h1> tag design, all designs of<h1> tags would be changed. You don't need to
change each <h1> tags. CSS is very comfortable.
Because of divided CSS file, between web developer and designer cooperative work become
easily. CSS isn't able to do work in the old browser(explorer 6 or 7) version.
CSS History
CSS3 is the latest standard for CSS. And it is completely backwards-compatible with earlier
versions of CSS. So very similar.
CSS3 add a lot of function. For example, Backgrounds and Borders or Text Effects or Animations
etc. Actually CSS3 is not finish developing. It is developing now. However many browser use
CSS3.
How to use CSS
CSS connection has three ways. If you want to use CSS, you must declare inside <head> tag.
One is direct way. This way is HTML which is including CSS.
For example, <style type=“text/css”> </style> -> This is no CSS file. Just HTML file.
This way is called inline way.
And Two things are outside way. One is link way.
For example, <link rel=“stylesheet” type=“text/css” href=“file.css” media=“all”>
One is @import way.
For example, <style type=“text/css”> @import url(file.css);</style>
If you use @import, you must declare in front of the document. If you don't declare in front of
the document, nobody know the result.
And some IE(under 6 version) doesn't support @import media type so you can hide if you write
this one ( <style type="text/css"> @import url(file.css) all; </style> ).
This is outside way ->
High spot of CSS
Do you know? You should use CSS to different way about each browser.
[For example]
For example,
div{
moz
Firefox
o
Opera
ms
IE
webkit
Chrome, Safari
}
border-image:url(border.png) 30 30
round;
-moz-border-image:url(border.png) 30 30
round;
-webkit-border-image:url(border.png) 30
30 round;
-o-border-image:url(border.png) 30 30
round;
Webview of iPhone and Android were followed each browser nature. Webkit option is apply to two things.
When I use this?
CSS3 gradients, text-shadow and CSS3 Animations etc.
But Internet Explorer 9, and earlier versions, does not support the animation property.
You must test what option support each browser. And you declare all browser declaration way.
Consideration for disabled person
CSS supports voice service by blind people. So you can make speech web site.
This function is called aural style.
Aural style sheets use a combination of speech synthesis and sound effects to make the user
listen to information, instead of reading information.
If you use this function, you needs screen reader. Experimentally supported in Opera.
This is same function like “CSS Speech Module” .
[ For example ]
h1,h2,h3,h4{
voice-family:male;
richness:80;
cue-before:url(“test.au")
} // you can hear male voice. And He read titles.
Authoring
Do you know about authoring?
Authoring means to make program without program language.
Many Web developer are using web authoring tools.
It is of course. Some years ago, they just write web coding
using notepad. But web authoring software was developed such
as Dreamweaver, Edit plus.
[ Dreamweaver ]
Adobe makes Dreamweaver software. Dreamweaver is a web
design and development application editor.
• Dreamweaver makes sentence oneself. This means If I want to
write "<img src="img_src" alt="img_text" " and I write "<img“,
dreamweaver makes finished sentence. We can think auto
service. It is very comfortable. We reduce time to write
coding.
Authoring
• Dreamweaver gives many format. You can choose format such
as .html, .css, .js or .php.
• Dreamweaver gives test to mobile or tablet which changing
size.
• Dreamweaver has the Design view. It is facilitates rapid layout
design and code generation as it allows users to quickly
create and manipulate the layout of HTML elements. You can
see result straight. So you can change and show real time.
Why many developer use Dreamweaver?
Dreamweaver has created a suite of site building tools aimed at
all users, from web novices to HTML experts.
Dreamweaver contains advanced function for advanced users.
So From beginner to advanced users can use comfortable.
Authoring
[Edit plus]
Edit plus is Korean software.
• This software supports complete Unicode and it is possible to
changed word easily.
• And It is supports each OS such as WindowOS, LinuxOS and
MacOS.
• It is easy to see result to use Edit plus own browser.
• If you write wrong words, it change words to correct words
automatically.
• And grammar correct function supports American English and
British English.
I think Edit plus suitable with beginner.
Sites
Site means Web site. Site is using http protocol.
A Web site is a related collection of WWW files that
includes a beginning file called a home page.
And it is document to use URL like www.google.com.
Most company or organization have own website.
Recently individual has own website too.
Websites can be the work of an individual, a business
or other organization, and are typically dedicated to a
particular topic or purpose.
You can have multiple Web sites that hyperlink to files
on each others' sites or even share the same files.
Dynamic website?
A dynamic website is one that changes or customizes itself frequently and automatically.
For example, If I bought computer books in ebay site,
later ebay site show me about kind of computer books. Ebay site is dynamic website.
Dynamic sites can be interactive by using HTML forms , storing and reading back
browser cookies , or by creating a series of pages that reflect the previous history of clicks.
Uploading
Uploading is the transmission of a file from one
computer system to another large computer system.
For example, When you share your image file for
online, you upload the files from your PC to the
network. In this case, you can say "I upload my file."
When you send or receive an attached file with an email, this is just an attachment, not a download or an
upload. However, in practice, many people use
"upload" to mean "send" and "download" to mean
“receive”. You should know each meaning.
Upload means to send a file to browser. Download
means to transfer a file from another computer to your
own. You might download a file from your Web
Hosting account to your home PC.
FTP
What is FTP?
Short for File Transfer Protocol.
FTP has TCP/IP protocol. That use to transmission
between server and client. This is old system but
usually used in internet browser.
FTP usually use to make web site.
People is Sharing data to use FTP. This way is
shared ftp id and password.
FTP is easily and simple. So many people use.
How can you use FTP?
Normally internet address is WWW(http://). But FTP server internet address is ftp://.
For example, Google WWW address is "http://www.google.com". But FTP address is
ftp://ftp.google.com“
FTP
Differences from HTTP
When operating in its modern passive mode, FTP uses a single socket for both
signaling and for actual file data, just like the HTTP protocol.
HTP process
This is ftp process. Client and server changed each data and command.
End
Have a good time
Thank you