User:Amy Suo Wu/the joys of html

From XPUB & Lens-Based wiki

lesson_01, HTML 4 for dummies

  • HTML: Hyper text mark-up language. XML, SMIL
  • The W3C standardized it.
  • Browsers can implement this standard.
  • Everything enclosed in tags are elements
  • Elements can have an attribute, e.g colour, font etc.
  • To break,
    or

  • Header: declare title--> what you see on the top of the browser. Here is the metadata--> what is this page and how to treat it.

e.g utf character encoding. Javascript or CSS is declared here.

  • Body is visible content
  • is image
<html>
<head>
<title>lesson 01</title>
</head>

<body bgcolor="FF0000">

<h1>
HTML FOR DUMMIES
</h1>

<center>
<h2>
lesson 01
</h2>

<p>
Hi, my name is amy. <br />
<strong>blah blah</strong>
</p>

<p>
HTML is kinda boring, but useful.HTML is kinda boring, but useful.HTML is kinda boring, but useful.
<br />
<img src="pics/under-construction-2.png" width="256" height="256" >
</p>

</center>
</body>
</html>



lesson_02 Hypertext linking

  • <a> is anchor
  • href stands for hypertext reference
  • tool tip is the yellow drop down thing that resembles a sticky
  • list is in

  • is a row
  • is a column
  • upload on server via terminal using scp(secure copy).
  • filezilla of cyberduck application to upload onto server


<html>
<head>
<title>lesson 02 - Advanced HTML</title>
</head>

<!-- a:link is for the text to change colour after you click, a:hover -->
<body a:hover="FF0000"; bgcolor="FF0000">


<p>
<a href="#Modern Japan">Modern Japan</a>
<br />
<a href="#Modern Europe and America">Modern Europe and America</a>
</p>

<!-- list -->
<p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</p>

<!-- % : no % is pixels -->
<table width="800" border ="100" ><tr><td><center>poop</center></td>
<td><center>love</centre></td><td><center>bras</center></td></tr>

</table>


<p>
<!-- second title refers to tool tip(yellow thingy -->
<a href="lesson_01.html" target="blank" title="lesson 01" >lesson 01</a>
</p>

<p>
The earliest known indication of shorthand systems is from Ancient Greece, namely the Parthenon in which a stone from mid-4th 
century BC was found. The marble slab shows a writing system primarily based on vowels, using certain modifications to indicate
 consonants. Hellenistic tachygraphy is reported from the 2nd century BC onwards, though there are indications that it might be 
older. The oldest datable reference is a contract from Middle Egypt, stating that Oxyrhynchos gives the "semeiographer" Apollonios 
for two years to be taught shorthand writing. Hellenistic tachygraphy consisted  of word stem signs and word ending signs. Over 
time, many syllabic signs were developed.
</p>

<p>
In Ancient Rome, Marcus Tullius Tiro (103–4 BC), a slave and later a freedman of Cicero, developed the Tironian notes so he could 
write down Cicero's speeches. The Tironian notes consisted of Latin word stem abbreviations (notae) and of word ending 
abbreviations (titulae). The original Tironian notes consisted of about 4000 signs but new signs were introduced so that their 
number might increase to as many as 13,000. In order to have a less complex writing system, a syllabic shorthand script was 
sometimes used. After the decline of the Roman Empire, the Tironian notes were no longer used to transcribe speeches, though they 
were still known and taught, particularly during the Carolingian Renaissance. After the 11th century, however, they were mostly 
forgotten.When many monastery libraries were secularized in the course of the 16th-century Protestant Reformation, long-forgotten 
manuscripts of Tironian notes were rediscovered.
</p>

<p>Imperial China
In imperial China, clerks used an abbreviated, highly cursive form of characters to record court proceedings and criminal 
confessions. These records were used to create more formal transcripts. One cornerstone of imperial court proceedings was that all 
confessions had to be acknowledged by the accused's signature, personal seal, or thumbprint, requiring fast writing.[not in 
citation given] Versions of this technique survived in clerical professions into the modern day, and influenced by western 
shorthand methods, some new methods were invented.
</p>

<a name="Modern Europe and America"><h2>Modern Europe and America</h2></a>
<p>An interest in shorthand or "short-writing" developed towards the end of the 16th century in England. In 1588 Timothy Bright 
published his Characterie; An Arte of Shorte, Swifte and Secrete Writing by Character which introduced a system with 500 arbitrary 
symbols each representing one word. Bright's book was followed by a number of others, including John Willis's Art of Stenography 
in 1602, Edmond Willis's An abbreviation of writing by character in 1618, and Thomas Shelton's Short Writing in 1626 (later 
re-issued as Tachygraphy).
</p>

<p>
Shelton's system became very popular and is well known because it was used by Samuel Pepys for his diary and for many of his 
official papers, such as his letter copy books. It was also used by Sir Isaac Newton in some of his notebooks.[6] Shelton borrowed 
heavily from his predecessors, especially Edmond Willis. Each consonant was represented by an arbitrary but simple symbol, while 
the five vowels were represented by the relative positions of the surrounding consonants. Thus the symbol for B with symbol for T 
drawn directly above it represented "bat", while B with T below it meant "but"; top-right represented "e", middle-right "i", and 
lower-right "o". A vowel at the end of a word was represented by a dot in the appropriate position, while there were additional 
symbols for initial vowels. This basic system was supplemented by further symbols representing common prefixes and suffixes.One 
drawback of Shelton's system was that there was no way to distinguish long and short vowels or diphthongs; so the b-a-t sequence 
could mean "bat", or "bait", or "bate", while b-o-t might mean "boot", or "bought", or "boat". The reader needed to use the 
context to work out which alternative was meant. The main advantage of the system was that it was easy to learn and to use. It was 
popular, and under the two titles of Short Writing and Tachygraphy, Shelton's book ran to more than 20 editions between 1626 and 
1710. Shelton's chief rivals were Theophilus Metcalfe's Stenography or Short Writing (1633) which was in its "55th edition" by 
1721, and Jeremiah Rich's system of 1654, which was published under various titles including The penns dexterity compleated 
(1669). Another notable English shorthand system creator of the 17th century was William Mason (fl.1672–1709) who published Arts 
Advancement in 1682.
</p>

<p>Tombstone of Heinrich Roller, inventor of a German shorthand system, with a sample of his shorthandModern-looking geometric 
shorthand was introduced with John Byrom's New Universal Shorthand of 1720. Samuel Taylor published a similar system in 1786, the 
first English shorthand system to be used all over the English-speaking world. Thomas Gurney published Brachygraphy in the 
mid-18th century. In 1834 in German, Franz Xaver Gabelsberger published his Gabelsberger shorthand. Gabelsberger, who ignored the 
English stenography tradition, based his shorthand not on geometrical shapes but on the shapes used in handwriting script.

</p>

<a name="Modern Japan"><h2>Modern Japan</h2></a>
<p>Our Japanese pen shorthand began in 1882, transplanted from the American Pitman-Graham system. Geometric theory has great 
influence in Japan. But Japanese motions of writing gave some influence to our shorthand. We are proud to have reached the highest
 speed in capturing spoken words with a pen. Major pen shorthand systems are Shuugiin, Sangiin, Nakane and Waseda [a repeated 
vowel shown here means a vowel spoken in double-length in Japanese, sometimes shown instead as a bar over the vowel]. Including a 
machine-shorthand system, Sokutaipu, we have 5 major shorthand systems now. The Japan Shorthand Association now has 1,000 members.

—Mr. Tsuguo KANEKO
</p>

<p>
Note that there are several other pen shorthands in use (Ishimura, Iwamura, Kumassaki, Kotani, and Nissokuken) leading to a total 
of 9 pen shorthands in use. In addition, there is the Yamane pen shorthand (of unknown importance) and 3 machine shorthands 
systems (Speed Warpro, Caver and Hayatokun or sokutaipu.) The machine shorthands have gained some ascendancy over the pen 
shorthands.[8]
Japanese shorthand systems ('sokki' shorthand or 'sokkidou' stenography) commonly use a syllabic approach, much like the common 
writing system for Japanese (which has actually two syllabaries in everyday use). There are several semi-cursive systems.[9] Most 
follow a left-to-right, top-to-bottom writing direction.[10] Several systems incorporate a loop into many of the strokes, giving 
the appearance of Gregg, Graham, or Cross's Eclectic shorthand without actually functioning like them.[11] (This is in fact 
similar to the Graham and Lindsley adaptations of Pitman for English; examples of Gregg, Graham and Eclectic are above.) The 
Kotani (aka Same-Vowel-Same-Direction or SVSD or V-type)[12] system's strokes frequently cross over each other and in so doing 
form loops.[13]
</p>

<p>
Gregg is English by origin and uses loops for several vowels between consonant strokes; Waseda (among others) is syllabic, and 
though there always is a vowel included in every syllable, and often a loop in writing a syllable, the vowel is not indicated in 
and of itself by any loop, and the operation of the systems is distinct. There exists a Japanese version of Gregg shorthand that 
was created in the early 20th century but which is not professionally used.Japanese also has its own variously cursive form of 
writing kanji characters, the most extremely simplified of which is known as Sōsho. The two Japanese syllabaries are themselves 
adapted from the Grass Script versions of the Chinese characters; the hiragana being direct adaptations and the katakana being 
adapted from the hiragana (both katakana and hiragana are in everyday use alongside the Chinese characters known as kanji; the 
kanji, being developed in parallel to the Chinese characters, have their own idiosyncracies, but Chinese and Japanese ideograms 
are largely comprehensible, even if their use in the languages are not the same.)Prior to the Meiji era, Japanese did not have its 
own shorthand (the kanji did have their own abbreviated forms borrowed alongside them from China). Takusari Kooki was the first to 
give classes in a new Western-style non-ideographic shorthand of his own design, emphasis being on the non-ideographic and new. 
This was the first shorthand system adapted to writing phonetic Japanese, all other systems prior being based on the idea of whole 
or partial semantic ideographic writing like that used in the Chinese characters, and the phonetic approach being mostly 
peripheral to writing in general (even today, Japanese writing uses the syllabaries to pronounce or spell out words, or to 
indicate grammatical words. Furigana are written alongside kanji, or Chinese characters, to indicate their pronunciation 
especially in juvenile publications. Furigana are usually written using the hiragana syllabary; foreign words may not have a kanji 
form and are spelled out using katakana.)[14]The new sokki were used to transliterate popular vernacular story-telling theater 
(yose) of the day. This led to a thriving industry of sokkibon (shorthand books). The ready availability of the stories in book 
form, and higher rates of literacy (which the very industry of sokkibon may have helped create, due to these being oral classics 
that were already known to most people) may also have helped kill the yose theater, as people no longer needed to see the stories 
performed in person to enjoy them. Sokkibon also allowed a whole host of what had previously been mostly oral rhetorical and 
narrative techniques into writing, such as imitation of dialect in conversations (which can be found back in older gensaku 
literature; but gensaku literature used conventional written language in-between conversations, however.)[15]
[edit] Pitman Shorthand
</p>

<p>Main article: Pitman shorthandTaylor's system was superseded by Pitman Shorthand, first introduced in 1837 by Sir Isaac Pitman,
 M.P., and improved many times since. Pitman's system has been used all over the English-speaking world and has been adapted to 
many other languages, including Latin. Pitman's system uses a phonemic orthography. For this reason, it is sometimes known as 
phonography, meaning 'sound writing' in Greek. One of the reasons this system allows fast transcription is that vowel sounds are 
optional when only consonants are needed to determine a word. The availability of a full range of vowel symbols, however, makes 
possible complete accuracy.The record for fast writing with Pitman shorthand is 350 wpm during a two-minute test by Nathan Behrin 
in 1922, although this result has been questioned.[citation needed][edit] Gregg ShorthandMain article: Gregg shorthand Pitman 
shorthand is still in widespread use, but in the U.S. and some other parts of the world it has been largely superseded by Gregg 
shorthand, which was first published in 1888 by John Robert Gregg. This system was influenced by the handwriting shapes that 
Gabelsberger had introduced. Gregg's shorthand, like Pitman's, is phonetic, but has the simplicity of being "light-line." Pitman's 
system uses thick and thin strokes to distinguish related sounds, while Gregg's uses only thin strokes and makes some of the same 
distinctions by the length of the stroke. In fact, Gregg claimed joint authorship in another shorthand system published in 
pamphlet form by one Thomas Stratford Malone; Malone, however, claimed sole authorship and a legal battle ensued.[16] The two 
systems use very similar, if not identical, symbols; however, these symbols are used to represent different sounds. For instance, 
on page 10 of the manual is the word d i m 'dim'; however, in the Gregg system the spelling would actually mean n u k or 'nook'. 
[17]
</p>

</body>
</html>



making an index

<html>
<head>
<title>HTML lesson </title>
</head>
<body>

<ul>

<li><a href="lesson_01.html">lesson_01</a></li>
<li><a href="lesson_02.html">lesson_02</a></li>

</ul>


</body>

</html>



lesson_03 CSS

  • cascading style sheet
  • <smil> is a type of html with similar tagging layout for multiplayer presentation
  • /* to comment out*/
  • p{} is same as html element
    start
    end
  • rel: relate/reference
  • font: order of priority. it takes the first, if not then the second. each type needs its own "quotation mark"
  • h1 are always bold by default
<html>

<head>

<title>lesson_03</title>
<LINK REL="stylesheet" type="text/css" href="css/lessons.css"/>
<!-- this is linking to the css file -->

<style>
        p{ color: yellow;}
</style>
<!-- this is for exceptions, to overrule -->

</head>

<body>
<h1>blahblah</h1>

<p style="color: black;">

this is our third lesson
</center>
</p>

<p>
boo is a term that is derived from the French word <span class=highlight>"beau"</span> meaning beautiful. In 18th century England 
it meant an admirer, usually male. It made it's way into Afro-Caribean language perhaps through the French colonisation of some 
Caribean islands.

</p>
<p>
blha blah <a href="http://amysuowu.hotglue.me">me</a>
</p>

<p>
<a href ="http://amysuowu.hotglue.me"><img src="pics/under-construction-2.png"/></a>
</p>
</body>


</html>

file:///Users/amywu/HTML_SITE/lesson_03.html goto