ref: 3a3e0f8dd3faed80b502516e992f9230e9e9cd2d
dir: /webnotes.ms/
.TL Notes on web .LP These are notes taken from Behzad Bayat's youtube tutorials. .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 <tagname> .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. .NH HTML tags and elements .LP There are two types of HTML tags, one is inline tags, which look like .CW <tag attr=value> ; The other type are container tags, which have two tags enclose (some) values: .CW <tag>value</tag> . as stated before, each document should have .CW <html> , .CW <head> and .CW <body> tags. Body tag is what displayed by the browser in the main window, and head tag displays other page related information, such as document title ( .CW <title> tag ).