-
Notifications
You must be signed in to change notification settings - Fork 0
/
web-development.html
95 lines (92 loc) · 14.5 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-11-14T14:28:58.566325"><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="dk909h_5"><span id="dk909h_15"><font style="color:#ff8c00">HTML (HyperText Markup Language):</font></span> A declarative language that include directives with content.</p><p id="dk909h_6"><span id="dk909h_16"><font style="color:#8a2be2">Approach</font></span></p><ul class="list _bullet" id="dk909h_7"><li class="list__item" id="dk909h_17"><p id="dk909h_19">Start with content to be displayed.</p></li><li class="list__item" id="dk909h_18"><p id="dk909h_20">Annotate it with tags.</p></li></ul><p id="dk909h_8"><span id="dk909h_21"><font style="color:#8a2be2">Commonly-used Tags</font></span></p><ul class="list _bullet" id="dk909h_9"><li class="list__item" id="dk909h_22"><p id="dk909h_41"><span id="dk909h_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="dk909h_23"><p id="dk909h_43"><span id="dk909h_44"><font style="color:#ff00ff"><body>:</font></span> The main body of the document</p></li><li class="list__item" id="dk909h_24"><p id="dk909h_45"><span id="dk909h_46"><font style="color:#ff00ff"><p>:</font></span> New paragraph</p></li><li class="list__item" id="dk909h_25"><p id="dk909h_47"><span id="dk909h_48"><font style="color:#ff00ff"><br>:</font></span> Force a line break within the same paragraph</p></li><li class="list__item" id="dk909h_26"><p id="dk909h_49"><span id="dk909h_50"><font style="color:#ff00ff"><h1>, <h2>, <h3>, <h4>, <h5>, <h6>:</font></span> Headings</p></li><li class="list__item" id="dk909h_27"><p id="dk909h_51"><span id="dk909h_52"><font style="color:#ff00ff"><b>, <i>:</font></span> Boldface and italic</p></li><li class="list__item" id="dk909h_28"><p id="dk909h_53"><span id="dk909h_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="dk909h_29"><p id="dk909h_55"><span id="dk909h_56"><font style="color:#ff00ff"><img>:</font></span> Images</p></li><li class="list__item" id="dk909h_30"><p id="dk909h_57"><span id="dk909h_58"><font style="color:#ff00ff"><a href="...">:</font></span> Hyperlink to another Web page</p></li><li class="list__item" id="dk909h_31"><p id="dk909h_59"><span id="dk909h_60"><font style="color:#ff00ff"><!-- comments -->:</font></span> Comment tags</p></li><li class="list__item" id="dk909h_32"><p id="dk909h_61"><span id="dk909h_62"><font style="color:#ff00ff"><table>, <tr>, <td>:</font></span> Tables</p></li><li class="list__item" id="dk909h_33"><p id="dk909h_63"><span id="dk909h_64"><font style="color:#ff00ff"><ul>, <li>:</font></span> Unordered list (with bullets)</p></li><li class="list__item" id="dk909h_34"><p id="dk909h_65"><span id="dk909h_66"><font style="color:#ff00ff"><ol>, <li>:</font></span> uOrdered list (numbered)</p></li><li class="list__item" id="dk909h_35"><p id="dk909h_67"><span id="dk909h_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="dk909h_36"><p id="dk909h_69"><span id="dk909h_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="dk909h_37"><p id="dk909h_71"><span id="dk909h_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="dk909h_38"><p id="dk909h_73"><span id="dk909h_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="dk909h_39"><p id="dk909h_75"><span id="dk909h_76"><font style="color:#ff00ff"><link>:</font></span> Include CSS stylesheets and more</p></li><li class="list__item" id="dk909h_40"><p id="dk909h_77"><span id="dk909h_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="dk909h_10"><span id="dk909h_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="dk909h_12"><span id="dk909h_80"><font style="color:#8a2be2">XHTML:</font></span> XHTML is more strict about adhering to proper syntax.</p><p id="dk909h_13"><span id="dk909h_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="dk909h_82"><span id="dk909h_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="dk909h_84"><thead><tr class="ijRowHead" id="dk909h_90"><th id="dk909h_95"><p>CSS Selector</p></th><th id="dk909h_96"><p>CSS</p></th><th id="dk909h_97"><p>html</p></th></tr></thead><tbody><tr id="dk909h_91"><td id="dk909h_98"><p>Tag Name</p></td><td id="dk909h_99"><div class="code-block" data-lang="css">
h1 {
color: red;
}
</div></td><td id="dk909h_100"><div class="code-block" data-lang="markup">
<h1>Today's Specials</h1>
</div></td></tr><tr id="dk909h_92"><td id="dk909h_103"><p>Class Attribute</p></td><td id="dk909h_104"><div class="code-block" data-lang="css">
.large {
font-size: 16pt;
}
</div></td><td id="dk909h_105"><div class="code-block" data-lang="markup">
<p class="large"></p>
</div></td></tr><tr id="dk909h_93"><td id="dk909h_108"><p>Tag and Class</p></td><td id="dk909h_109"><div class="code-block" data-lang="css">
p.large {
font-size: 16pt;
}
</div></td><td id="dk909h_110"><div class="code-block" data-lang="markup">
<p class="large"></p>
</div></td></tr><tr id="dk909h_94"><td id="dk909h_113"><p>Element ID</p></td><td id="dk909h_114"><div class="code-block" data-lang="css">
#p20 {
font-weight: bold;
}
</div></td><td id="dk909h_115"><div class="code-block" data-lang="markup">
<div id="p20"></div>
</div></td></tr></tbody></table></div><p id="dk909h_85"><span id="dk909h_118"><font style="color:#8a2be2">CSS Pseudo Selectors</font></span></p><ul class="list _bullet" id="dk909h_86"><li class="list__item" id="dk909h_119"><p id="dk909h_121"><code class="code" id="dk909h_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="dk909h_120"><p id="dk909h_124"><code class="code" id="dk909h_126">a:link</code>, <code class="code" id="dk909h_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="dk909h_128"><li class="list__item" id="dk909h_129"><p id="dk909h_133"><span id="dk909h_134"><font style="color:#ff00ff">Predefined names:</font></span> red, blue, green, white, etc. (140 standard names)</p></li><li class="list__item" id="dk909h_130"><p id="dk909h_135"><span id="dk909h_136"><font style="color:#ff00ff">8-bit hexadecimal numbers for red, green, blue:</font></span> #ff0000 (RGB)</p></li><li class="list__item" id="dk909h_131"><p id="dk909h_137"><span id="dk909h_138"><font style="color:#ff00ff">0-255 decimal intensities:</font></span> rgb(255,255,0)</p></li><li class="list__item" id="dk909h_132"><p id="dk909h_139"><span id="dk909h_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="dk909h_141"><span id="dk909h_144"><font style="color:#8a2be2">Box Model</font></span></p><figure id="dk909h_142"><img alt="Box Model" src="Computer-Science-Study-Notes/w2-2-1.png" title="Box Model" width="2002" height="1160"></figure><p id="dk909h_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: 14 November 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>