Update GCSE CS blog
This commit is contained in:
Matthew Grove
@@ -1,12 +1,32 @@
|
||||
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
|
||||
<h2>Cookies</h2>
|
||||
<p>
|
||||
Cookies are not, unfortunately, the treats made of dough. They are, in fact, small text files, stored in binary, usually one-line long, which store relevant
|
||||
information about websites visited by a computer. This might include a selected language, or ad preferences. Some websites even use
|
||||
cookies to store passwords that are set to ‘remember’. Thus, cookies need strong security and the ID of each one must be unfathomably
|
||||
difficult to find without permission, to reduce the risk of hacking. Cookies are stored on the computer, as opposed to the website.
|
||||
Because both HTTP and HTTPS don't transmit user data, none of the websites you visit know who you are. Therefore, whenever you
|
||||
visit a webpage, it reads the cookies it stored on your computer last time you visited it, in order to find out information like your email address.
|
||||
Many people are against cookies, due to privacy concerns; under new GDPR regulations, all end users in Europe must now be notified of
|
||||
cookie use on each website they visit (if the website uses cookies). Many sites also give an option to refuse cookies.
|
||||
</p>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/assets/roboto.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import Bootstrap -->
|
||||
<link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<h2>Cookies</h2>
|
||||
<p>
|
||||
Cookies are not, unfortunately, the treats made of dough. They are, in fact, small text files, stored in binary, usually one-line long, which store relevant
|
||||
information about websites visited by a computer. This might include a selected language, or ad preferences. Some websites even use
|
||||
cookies to store passwords that are set to ‘remember’. Thus, cookies need strong security and the ID of each one must be unfathomably
|
||||
difficult to find without permission, to reduce the risk of hacking. Cookies are stored on the computer, as opposed to the website.
|
||||
Because both HTTP and HTTPS don't transmit user data, none of the websites you visit know who you are. Therefore, whenever you
|
||||
visit a webpage, it reads the cookies it stored on your computer last time you visited it, in order to find out information like your email address.
|
||||
Many people are against cookies, due to privacy concerns; under new GDPR regulations, all end users in Europe must now be notified of
|
||||
cookie use on each website they visit (if the website uses cookies). Many sites also give an option to refuse cookies.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,32 +1,64 @@
|
||||
<!-- 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>
|
||||
font-size: 3rem;<br>
|
||||
}<br>
|
||||
.class_name {<br>
|
||||
height: 200px;<br>
|
||||
}<br>
|
||||
#id_name {<br>
|
||||
font-family: 'Roboto'<br>
|
||||
}<br>
|
||||
</code>
|
||||
<br>
|
||||
A comment in CSS is started with <code>/*</code> and ended with <code>*/</code>.
|
||||
</p>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/assets/roboto.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import Bootstrap -->
|
||||
<link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
|
||||
<script src="../scripts/css-presentation-slide.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>CSS</h2>
|
||||
<p>
|
||||
CSS, Cascading Style Sheets, are web documents that allow stylisation of HTML documents. CSS allows you to change the size, style, font, and colour of text; margins and padding; background colours and border styles. To change the appearance of something in CSS, there must be the following format:
|
||||
h1 {
|
||||
Background-color: red;
|
||||
}
|
||||
which would make the background colour of heading 1 tags (big headings) red. The spellings in CSS are American, for example color, and semicolons are extremely important. The following hyperlink has a list of all the CSS commands and what they do when you click on them.
|
||||
|
||||
|
||||
Cascading Stylesheets (CSS) allow the size, style, font & colour of text; background colours & border styles and more to be changed in HTML pages.
|
||||
A page without CSS can be very bland and boring:
|
||||
<br>
|
||||
<img class="presentation-image" src="../images/without_css.jpg">
|
||||
<br>
|
||||
But 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. A comment in CSS is started
|
||||
with <code>/*</code> and ended with <code>*/</code>.
|
||||
Here are some example declarations:
|
||||
<br>
|
||||
<code>
|
||||
p {<br>
|
||||
/* this changes the font size of all p elements */<br>
|
||||
font-size: 3rem;<br>
|
||||
}<br>
|
||||
.class_name {<br>
|
||||
/* this changes the height of all elements with the class name 'class_name' */<br>
|
||||
height: 200px;<br>
|
||||
}<br>
|
||||
#id_name {<br>
|
||||
/* this changes the font of all elements with the ID 'id_name' */<br>
|
||||
font-family: 'Roboto'<br>
|
||||
}<br>
|
||||
</code>
|
||||
<br>
|
||||
<span id="css_attribute_list_link"></span>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,15 +1,35 @@
|
||||
<!-- 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><p></code>,
|
||||
which displays a simple paragraph. Most tags must be closed with closing tags - like <code></p></code>,
|
||||
however some elements, like those for images (<code><img></code>) and linking external resources
|
||||
(<code><link></code>) are auto closing: they don’t need a closing tag. For example, an image is defined as follows:
|
||||
<br>
|
||||
<code><img src="image_source_url"></code>
|
||||
<br>
|
||||
HTML is closely linked with CSS and JavaScript; a comment in HTML is started with
|
||||
<code><!--</code> and ended with <code>--></code>.
|
||||
</p>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/assets/roboto.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import Bootstrap -->
|
||||
<link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<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><p></code>,
|
||||
which displays a simple paragraph. Most tags must be closed with closing tags - like <code></p></code>,
|
||||
however some elements, like those for images (<code><img></code>) and linking external resources
|
||||
(<code><link></code>) are auto closing: they don’t need a closing tag. For example, an image is defined as follows:
|
||||
<br>
|
||||
<code><img src="image_source_url"></code>
|
||||
<br>
|
||||
HTML is closely linked with CSS and JavaScript; a comment in HTML is started with
|
||||
<code><!--</code> and ended with <code>--></code>.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,9 +1,29 @@
|
||||
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
|
||||
<h2>HTTP</h2>
|
||||
<p>
|
||||
HTTP is Hypertext Transfer (or Transport) Protocol, the underlying data transfer protocol used on the World Wide Web.
|
||||
It defines what actions web servers and browsers should take in response to commands. For example, when a URL is opened
|
||||
or hyperlink (which is a URL) clicked, your web browser actually sends an HTTP request to the server which hosts the website you're
|
||||
trying to access, in order to fetch it and display it on your screen. Obviously, for each web server to understand these requests,
|
||||
the server and request must both follow this protocol.
|
||||
</p>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/assets/roboto.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import Bootstrap -->
|
||||
<link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<h2>HTTP</h2>
|
||||
<p>
|
||||
HTTP is Hypertext Transfer (or Transport) Protocol, the underlying data transfer protocol used on the World Wide Web.
|
||||
It defines what actions web servers and browsers should take in response to commands. For example, when a URL is opened
|
||||
or hyperlink (which is a URL) clicked, your web browser actually sends an HTTP request to the server which hosts the website you're
|
||||
trying to access, in order to fetch it and display it on your screen. Obviously, for each web server to understand these requests,
|
||||
the server and request must both follow this protocol.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,8 +1,28 @@
|
||||
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
|
||||
<h2>HTTPS</h2>
|
||||
<p>
|
||||
HTTPS is the 'Hypertext Transfer Protocol Secure', which means that it is a variation on the HTTP protocol - except it uses a secure socket layer
|
||||
(SSL) - an encryption protocol invoked by an HTTPS request, that enables authentication and encryption on the webpage being visited. SSL is
|
||||
essentially the usage of ‘digital passports’, and it functions by ‘hopping onto’ TCP protocols. It does not resend ‘lost’ packets or
|
||||
‘miscommunicated' data, because this increases security.
|
||||
</p>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/assets/roboto.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import Bootstrap -->
|
||||
<link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<h2>HTTPS</h2>
|
||||
<p>
|
||||
HTTPS is the 'Hypertext Transfer Protocol Secure', which means that it is a variation on the HTTP protocol - except it uses a secure socket layer
|
||||
(SSL) - an encryption protocol invoked by an HTTPS request, that enables authentication and encryption on the webpage being visited. SSL is
|
||||
essentially the usage of ‘digital passports’, and it functions by ‘hopping onto’ TCP protocols. It does not resend ‘lost’ packets or
|
||||
‘miscommunicated' data, because this increases security.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,12 +1,32 @@
|
||||
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
|
||||
<h2>Hyperlinks</h2>
|
||||
<p>
|
||||
A hyperlink is simply a link on the web to some other resource. It uses a special kind of command that jumps you to some other content in your web browser, usually to another page.
|
||||
<br>
|
||||
The way to tell if something is a hyperlink is by seeing if your mouse becomes a pointing hand when hovering over it. It is also usually either displayed as blue underlined text or an image/advert. However, the appearance does not change the function.
|
||||
<br>
|
||||
Some website owners wish to reserve the right to not be hyperlinked without permission.
|
||||
<br>
|
||||
Creating a hyperlink in html:
|
||||
<code><a href="LINK GOES HERE">TEXT GOES HERE</a></code>
|
||||
</p>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/assets/roboto.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import Bootstrap -->
|
||||
<link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<h2>Hyperlinks</h2>
|
||||
<p>
|
||||
A hyperlink is simply a link on the web to some other resource. It uses a special kind of command that jumps you to some other content in your web browser, usually to another page.
|
||||
<br>
|
||||
The way to tell if something is a hyperlink is by seeing if your mouse becomes a pointing hand when hovering over it. It is also usually either displayed as blue underlined text or an image/advert. However, the appearance does not change the function.
|
||||
<br>
|
||||
Some website owners wish to reserve the right to not be hyperlinked without permission.
|
||||
<br>
|
||||
Creating a hyperlink in html:
|
||||
<code><a href="LINK GOES HERE">TEXT GOES HERE</a></code>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,16 +1,36 @@
|
||||
<!-- 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>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/assets/roboto.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import Bootstrap -->
|
||||
<link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user