wm: doc

ref: 00ea80883d0fefb10dd0d6b3b7f31003f1a98b3f
dir: /webnotes.ms/

View raw version
.2C
.TL
notes on web
.AU
mkf
.NH
Intro
.LP
Web have gone thru three major versions,
.IP \(bu
WEB 1.0, uni-directional communication,
.IP \(bu
WEB 2.0, bi-directional and interactive communication,
.IP \(bu
WEB 3.0, decentrailzed communication.
.LP
each website consists of two parts,
.IP \(bu
Front-end, which is processed in client and is developed via
HTML, CSS and JavaScript.
.IP \(bu
Back-end, which is processed in server and is developed by
numerous languages, such as
PHP, Python, Perl, Java etc.

.LP
HTML is the skeleton of each web page
and CSS is the meat of that web page,
both of which are used to show static content,
JS is used to have client-side dynamic contnet.
.LP
Now, suppose we want to create a simple web page,
first we need to imagine what we want, either in paper or by using some software.
Afterwards we should make structer (?) of HTML tags,
which are later used in our CSS styles.

.NH
First example, formatting text with HTML
.LP
Let's write our first html document.
.P1
<html lang="en">
<body>
	Hello world!
</body>
</html>
.P2
output:
.PP
Hello world!
.LP
Every HTML document must have
.CW <html>
tags, and
.CW <body>
tags, while browsers are quite liberal in what they accept,
it's a good idea to follow standards.
from now on, we omit
.CW <html>
and
.CW <body>
tags, but don't forget to include them in your own documents.
.LP
Each document may have multiple headings,
.CW <h1>
to
.CW <h6> ,
for example
.P1
	<h1>Some heading</h1>
.P2
output:
.PP
.SH
Some heading
.LP
For a bullet list, we may use
.CW <li>
tag.
.P1
	<li>a</li>
	<li>b</li>
	<li>c</li>
.P2

It'll be showed like
.IP \(bu
a
.IP \(bu
b
.IP \(bu
c

For a paragraph, we may use
.CW <p>
tag.
To show special tags as text in browsers, you need to escape
.CW <
and 
.CW >
characters,
you may do it by
.P1
&lt;tagname&gt;
.P2

result:
.PP
<tagname>
.LP
And, for newlines, you have to use
.CW <br>
tag.
.NH 
Installing editor
.LP
This section is intentionally left empty.