-
Notifications
You must be signed in to change notification settings - Fork 0
/
web-development.html
95 lines (92 loc) · 14.6 KB
/
web-development.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html SYSTEM "about:legacy-compat">
<html lang="en-US" data-preset="contrast" data-primary-color="#6860F6" data-link-color="#307FFF" data-resizable-sidebar="true" data-sidebar-width="260"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="UTF-8"><meta name="built-on" content="2024-12-10T15:14:05.544512"><title>Web Development | Computer Science Study Notes</title><script type="application/json" id="virtual-toc-data">[{"id":"1-html","level":0,"title":"1 HTML","anchor":"#1-html"},{"id":"2-css","level":0,"title":"2 CSS","anchor":"#2-css"}]</script><script type="application/json" id="topic-shortcuts"></script><link href="https://resources.jetbrains.com/writerside/apidoc/6.10.0-b518/app.css" rel="stylesheet"><link href="static/custom.css" rel="stylesheet"><link rel="icon" type="image/png" sizes="16x16" href="Computer-Science-Study-Notes/photo.png"><meta name="image" content=""><!-- Open Graph --><meta property="og:title" content="Web Development | Computer Science Study Notes"><meta property="og:description" content=""><meta property="og:image" content=""><meta property="og:site_name" content="Computer Science Study Notes Help"><meta property="og:type" content="website"><meta property="og:locale" content="en_US"><meta property="og:url" content="writerside-documentation/web-development.html"><!-- End Open Graph --><!-- Twitter Card --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content=""><meta name="twitter:title" content="Web Development | Computer Science Study Notes"><meta name="twitter:description" content=""><meta name="twitter:creator" content=""><meta name="twitter:image:src" content=""><!-- End Twitter Card --><!-- Schema.org WebPage --><script type="application/ld+json">{
"@context": "http://schema.org",
"@type": "WebPage",
"@id": "writerside-documentation/web-development.html#webpage",
"url": "writerside-documentation/web-development.html",
"name": "Web Development | Computer Science Study Notes",
"description": "",
"image": "",
"inLanguage":"en-US"
}</script><!-- End Schema.org --><!-- Schema.org WebSite --><script type="application/ld+json">{
"@type": "WebSite",
"@id": "writerside-documentation/#website",
"url": "writerside-documentation/",
"name": "Computer Science Study Notes Help"
}</script><!-- End Schema.org --></head><body data-id="Web-Development" data-main-title="Web Development" data-article-props="{"seeAlsoStyle":"links"}" data-template="article" data-breadcrumbs=""><div class="wrapper"><main class="panel _main"><header class="panel__header"><div class="container"><h3>Computer Science Study Notes Help</h3><div class="panel-trigger"></div></div></header><section class="panel__content"><div class="container"><article class="article" data-shortcut-switcher="inactive"><h1 data-toc="Web-Development" id="Web-Development.topic">Web Development</h1><section class="chapter"><h2 id="1-html" data-toc="1-html">1 HTML</h2><p id="-wpnplh_5"><span id="-wpnplh_15"><font style="color:#ff8c00">HTML (HyperText Markup Language):</font></span> A declarative language that include directives with content.</p><p id="-wpnplh_6"><span id="-wpnplh_16"><font style="color:#8a2be2">Approach</font></span></p><ul class="list _bullet" id="-wpnplh_7"><li class="list__item" id="-wpnplh_17"><p id="-wpnplh_19">Start with content to be displayed.</p></li><li class="list__item" id="-wpnplh_18"><p id="-wpnplh_20">Annotate it with tags.</p></li></ul><p id="-wpnplh_8"><span id="-wpnplh_21"><font style="color:#8a2be2">Commonly-used Tags</font></span></p><ul class="list _bullet" id="-wpnplh_9"><li class="list__item" id="-wpnplh_22"><p id="-wpnplh_41"><span id="-wpnplh_42"><font style="color:#ff00ff"><head>:</font></span> Contains miscellaneous things such as page title, CSS stylesheets, etc</p></li><li class="list__item" id="-wpnplh_23"><p id="-wpnplh_43"><span id="-wpnplh_44"><font style="color:#ff00ff"><body>:</font></span> The main body of the document</p></li><li class="list__item" id="-wpnplh_24"><p id="-wpnplh_45"><span id="-wpnplh_46"><font style="color:#ff00ff"><p>:</font></span> New paragraph</p></li><li class="list__item" id="-wpnplh_25"><p id="-wpnplh_47"><span id="-wpnplh_48"><font style="color:#ff00ff"><br>:</font></span> Force a line break within the same paragraph</p></li><li class="list__item" id="-wpnplh_26"><p id="-wpnplh_49"><span id="-wpnplh_50"><font style="color:#ff00ff"><h1>, <h2>, <h3>, <h4>, <h5>, <h6>:</font></span> Headings</p></li><li class="list__item" id="-wpnplh_27"><p id="-wpnplh_51"><span id="-wpnplh_52"><font style="color:#ff00ff"><b>, <i>:</font></span> Boldface and italic</p></li><li class="list__item" id="-wpnplh_28"><p id="-wpnplh_53"><span id="-wpnplh_54"><font style="color:#ff00ff"><pre>:</font></span> Typically used for code: indented with a fixed-width font, spaces are significant (e.g., newlines are preserved)</p></li><li class="list__item" id="-wpnplh_29"><p id="-wpnplh_55"><span id="-wpnplh_56"><font style="color:#ff00ff"><img>:</font></span> Images</p></li><li class="list__item" id="-wpnplh_30"><p id="-wpnplh_57"><span id="-wpnplh_58"><font style="color:#ff00ff"><a href="...">:</font></span> Hyperlink to another Web page</p></li><li class="list__item" id="-wpnplh_31"><p id="-wpnplh_59"><span id="-wpnplh_60"><font style="color:#ff00ff"><!-- comments -->:</font></span> Comment tags</p></li><li class="list__item" id="-wpnplh_32"><p id="-wpnplh_61"><span id="-wpnplh_62"><font style="color:#ff00ff"><table>, <tr>, <td>:</font></span> Tables</p></li><li class="list__item" id="-wpnplh_33"><p id="-wpnplh_63"><span id="-wpnplh_64"><font style="color:#ff00ff"><ul>, <li>:</font></span> Unordered list (with bullets)</p></li><li class="list__item" id="-wpnplh_34"><p id="-wpnplh_65"><span id="-wpnplh_66"><font style="color:#ff00ff"><ol>, <li>:</font></span> uOrdered list (numbered)</p></li><li class="list__item" id="-wpnplh_35"><p id="-wpnplh_67"><span id="-wpnplh_68"><font style="color:#ff00ff"><div>:</font></span> Used for grouping related elements, where the group occupies entire lines (forces a line break before and after)</p></li><li class="list__item" id="-wpnplh_36"><p id="-wpnplh_69"><span id="-wpnplh_70"><font style="color:#ff00ff"><span>:</font></span> Used for grouping related elements, where the group is within a single line (no forced line breaks)</p></li><li class="list__item" id="-wpnplh_37"><p id="-wpnplh_71"><span id="-wpnplh_72"><font style="color:#ff00ff"><form>, <input>, <textarea>, <select>:</font></span> Used to create forms where users can input data</p></li><li class="list__item" id="-wpnplh_38"><p id="-wpnplh_73"><span id="-wpnplh_74"><font style="color:#ff00ff"><title>:</font></span> Specify a title for the page, which will appear in the title bar for the browser window.</p></li><li class="list__item" id="-wpnplh_39"><p id="-wpnplh_75"><span id="-wpnplh_76"><font style="color:#ff00ff"><link>:</font></span> Include CSS stylesheets and more</p></li><li class="list__item" id="-wpnplh_40"><p id="-wpnplh_77"><span id="-wpnplh_78"><font style="color:#ff00ff"><script>:</font></span> Used to add Javascript to a page (can be used in body as well)</p></li></ul><p id="-wpnplh_10"><span id="-wpnplh_79"><font style="color:#cd5c5c">Example</font></span></p><div class="code-collapse" data-lang="markup" data-is-expanded="false" data-synopsis="<!DOCTYPE html>">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Document</title>
</head>
<body>
<h1>Heading 1</h1>
<p>Paragraph 1</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
<a href="https://www.google.com">Google</a>
<img src="image.jpg" alt="Image">
</body>
</html>
</div><p id="-wpnplh_12"><span id="-wpnplh_80"><font style="color:#8a2be2">XHTML:</font></span> XHTML is more strict about adhering to proper syntax.</p><p id="-wpnplh_13"><span id="-wpnplh_81"><font style="color:#ff69b4">Example</font></span></p><div class="code-collapse" data-lang="markup" data-is-expanded="false" data-synopsis="<?xml version="1.0" encoding="utf-8"?>">
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Hello World</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
</div></section><section class="chapter"><h2 id="2-css" data-toc="2-css">2 CSS</h2><p id="-wpnplh_82"><span id="-wpnplh_89"><font style="color:#ff8c00">CSS:</font></span> Style sheets to specify style to use rather than browser default.</p><div class="code-collapse" data-lang="css" data-is-expanded="false" data-synopsis="body { // Selector">
body { // Selector
background-color: lightblue; // Property: Value
color: white;
font-family: Arial, sans-serif;
} // Declaration Block
</div><div class="table-wrapper"><table class="wide" id="-wpnplh_84"><thead><tr class="ijRowHead" id="-wpnplh_90"><th id="-wpnplh_95"><p>CSS Selector</p></th><th id="-wpnplh_96"><p>CSS</p></th><th id="-wpnplh_97"><p>html</p></th></tr></thead><tbody><tr id="-wpnplh_91"><td id="-wpnplh_98"><p>Tag Name</p></td><td id="-wpnplh_99"><div class="code-block" data-lang="css">
h1 {
color: red;
}
</div></td><td id="-wpnplh_100"><div class="code-block" data-lang="markup">
<h1>Today's Specials</h1>
</div></td></tr><tr id="-wpnplh_92"><td id="-wpnplh_103"><p>Class Attribute</p></td><td id="-wpnplh_104"><div class="code-block" data-lang="css">
.large {
font-size: 16pt;
}
</div></td><td id="-wpnplh_105"><div class="code-block" data-lang="markup">
<p class="large"></p>
</div></td></tr><tr id="-wpnplh_93"><td id="-wpnplh_108"><p>Tag and Class</p></td><td id="-wpnplh_109"><div class="code-block" data-lang="css">
p.large {
font-size: 16pt;
}
</div></td><td id="-wpnplh_110"><div class="code-block" data-lang="markup">
<p class="large"></p>
</div></td></tr><tr id="-wpnplh_94"><td id="-wpnplh_113"><p>Element ID</p></td><td id="-wpnplh_114"><div class="code-block" data-lang="css">
#p20 {
font-weight: bold;
}
</div></td><td id="-wpnplh_115"><div class="code-block" data-lang="markup">
<div id="p20"></div>
</div></td></tr></tbody></table></div><p id="-wpnplh_85"><span id="-wpnplh_118"><font style="color:#8a2be2">CSS Pseudo Selectors</font></span></p><ul class="list _bullet" id="-wpnplh_86"><li class="list__item" id="-wpnplh_119"><p id="-wpnplh_121"><code class="code" id="-wpnplh_123">hover</code>: Apply rule when mouse is over element (e.g. tooltip)</p><div class="code-block" data-lang="css">
p:hover, a:hover {
background-color: yellow;
}
</div></li><li class="list__item" id="-wpnplh_120"><p id="-wpnplh_124"><code class="code" id="-wpnplh_126">a:link</code>, <code class="code" id="-wpnplh_127">a:visited</code>: Apply rule when element is being activated (e.g. button press)</p><div class="code-block" data-lang="css">
a:link {
color: blue;
}
a:visited {
color: green;
}
</div></li></ul><section class="chapter"><h3 id="2-1-Color-Properties" data-toc="2-1-Color-Properties">2-1 Color Properties</h3><ul class="list _bullet" id="-wpnplh_128"><li class="list__item" id="-wpnplh_129"><p id="-wpnplh_133"><span id="-wpnplh_134"><font style="color:#ff00ff">Predefined names:</font></span> red, blue, green, white, etc. (140 standard names)</p></li><li class="list__item" id="-wpnplh_130"><p id="-wpnplh_135"><span id="-wpnplh_136"><font style="color:#ff00ff">8-bit hexadecimal numbers for red, green, blue:</font></span> #ff0000 (RGB)</p></li><li class="list__item" id="-wpnplh_131"><p id="-wpnplh_137"><span id="-wpnplh_138"><font style="color:#ff00ff">0-255 decimal intensities:</font></span> rgb(255,255,0)</p></li><li class="list__item" id="-wpnplh_132"><p id="-wpnplh_139"><span id="-wpnplh_140"><font style="color:#ff00ff">Percentage intensities:</font></span> rgb(80&#37;,80&#37;,100&#37;)</p></li></ul></section><section class="chapter"><h3 id="2-2-Size-Properties" data-toc="2-2-Size-Properties">2.2 Size Properties</h3><p id="-wpnplh_141"><span id="-wpnplh_144"><font style="color:#8a2be2">Box Model</font></span></p><figure id="-wpnplh_142"><img alt="Box Model" src="Computer-Science-Study-Notes/w2-2-1.png" title="Box Model" width="2002" height="1160"></figure><p id="-wpnplh_143">Total element width = width + left padding + right padding + left border + right border + left margin + right margin</p></section></section><div class="last-modified">Last modified: 10 December 2024</div><div data-feedback-placeholder="true"></div><div class="navigation-links _bottom"><a href="rust-programming.html" class="navigation-links__prev">Rust Programming</a><a href="postscript.html" class="navigation-links__next">Postscript</a></div></article><div id="disqus_thread"></div></div></section></main></div><script src="https://resources.jetbrains.com/writerside/apidoc/6.10.0-b518/app.js"></script></body></html>