me/portfolio
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update HTML blog pages

Browse Source
This commit is contained in:
Matthew Grove
2018-12-08 17:38:35 +00:00
parent fdaee9edfa
commit ec306856ee
7 changed files with 74 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
computer-science-blog/css/main.css
View File

@@ -6,6 +6,12 @@
margin-bottom: 15px;
background: rgba(10,10,10,0.2);
}
.presentation-image {
width: 70%;
box-shadow: 3px 3px 6px 2px rgba(10,10,10,0.5);
margin: 10px;
border-radius: 6px;
}
/* place carousel indicators between the two buttons (next & previous) */
.presentation-flexbox {
@@ -55,6 +61,9 @@ p {
position: initial;
width: auto;
}
.carousel h1, .carousel h2, .carousel h3, .carousel .h1, .carousel .h2, .carousel .h3 {
margin-top: 0;
}
/* add side margins depending on screen size */
#main-content {

BIN
computer-science-blog/images/with_css.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
computer-science-blog/images/without_css.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

4
computer-science-blog/index.html
View File

@@ -113,12 +113,12 @@
</ol>
<!-- <div class="presentation-buttons-container"> -->
<!-- button to go to previous slide -->
<button class="presentation-button-left mdc-button mdc-button--outlined" href="#http_presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
<button class="presentation-button-left mdc-button mdc-button--outlined" href="#html_presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-button__icon">navigate_before</i>
Previous
</button>
<!-- button to go to next slide -->
<button class="presentation-button-right mdc-button mdc-button--outlined" href="#http_presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
<button class="presentation-button-right mdc-button mdc-button--outlined" href="#html_presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
Next
<i class="material-icons mdc-button__icon">navigate_next</i>
</button>

32
computer-science-blog/pages/css.html Normal file
View File

@@ -0,0 +1,32 @@
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
<h2>CSS</h2>
<p>
Cascading Stylesheets (CSS) are used to style websites - i.e. to make them look pretty.
Whereas a page without CSS is just displayed as plain content:
<br>
<img class="presentation-image" src="images/without_css.jpg">
<br>
One with CSS looks a lot more presentable:
<br>
<img class="presentation-image" src="images/with_css.jpg">
<br>
CSS declarations use the <i>tag names</i> (e.g. <code>p</code>), <i>classes</i> and IDs of
the elements on the page in order to style them. IDs are written with a preceding hashtag,
classes are written with a preceding full stop and tag names are written without any preceding characters.
The styles themselves (like <code>height</code>) should all end in semicolons.
Here are some example declarations:
<br>
<code>
p {<br>
&nbsp;&nbsp;&nbsp;&nbsp;font-size: 3rem;<br>
}<br>
.class_name {<br>
&nbsp;&nbsp;&nbsp;&nbsp;height: 200px;<br>
}<br>
#id_name {<br>
&nbsp;&nbsp;&nbsp;&nbsp;font-family: 'Roboto'<br>
}<br>
</code>
<br>
A comment in CSS is started with <code>/*</code> and ended with <code>*/</code>.
</p>

15
computer-science-blog/pages/html.html Normal file
View File

@@ -0,0 +1,15 @@
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
<h2>HTML</h2>
<p>
Hypertext Markup Language is the standard language used by browsers to display webpages.
HTML was invented by Tim Berners-Lee in 1990, and uses tags. This means that in order to define
an element (something like a heading or paragraph), you use a <i>tag</i> - such as <code>&lt;p&gt;</code>,
which displays a simple paragraph. Most tags must be closed with closing tags - like <code>&lt;/p&gt;</code>,
however some elements, like those for images (<code>&lt;img&gt;</code>) and linking external resources
(<code>&lt;link&gt;</code>) are auto closing: they don’t need a closing tag. For example, an image is defined as follows:
<br>
<code>&lt;img src="image_source_url"&gt;</code>
<br>
HTML is closely linked with CSS and JavaScript; a comment in HTML is started with
<code>&lt;!--</code> and ended with <code>--&gt;</code>.
</p>

16
computer-science-blog/pages/js.html Normal file
View File

@@ -0,0 +1,16 @@
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
<h2>JavaScript</h2>
<p>
JavaScript (JS) is a high-level, client-side language, meaning that it is like a human language
(rather than, for example, binary) and runs on the end user's computer. It is used for many purposes,
including editing content on a webpage, performing mathematical operations and storing variables.
Each line of JavaScript should end in a semicolon, for example:
<br>
<code>
// this code sets the content of the element with the ID "id_name" to "Hello World!"<br>
document.getElementById("id_name").innerHTML = "Hello World!";
</code>
<br>
A single line comment in JS is denoted by a double forward slash (<code>//</code>); a multi line comment
is started with <code>/*</code> and ended with <code>*/</code>.
</p>