Clients are the typical web user's internet-connected devices (e.g. computer connected to Wi-Fi, or phone connected to mobile network) and web-accessing software available on those devices (usually a web brower like Chrome or Firefox).
Servers are computers that store webpages, sites or apps. When a client device wants to access a webpage, a copy of the webpage is downloaded from the server onto the client machine to be displayed in the user's web browser.
Your internet connection allows you to send and receive data on the web. It's basically like the street between your house and the shop.
Transmission Control Protocol and Internet Protocol are communication protocols that define how data should travel across the web. This is like a car or bike....
Domain Name Servers are like an address book for websites. When you type an web address into your browser, the browser looks at the DNS to find the website's real address before it can retrieve the website. The browser needs to find out which server the website lives on, so it can send the HTTP message to the right place. This is like looking up the address so you can access it. One DNS Google uses is 172.217.0.142 - Copy that into the address bar to get to Google.com
Hypertext Transfer Protocol is an application protocol that defines a language for clients and servers to speak to each other. This is like the language you use to order your goods.
A website is made up of many different files, which are like the different parts of the goods you buy from the shop. Those files come in two main types:
Websites are primarily built from HTML, CSS, and JavaScript, though others are used
This is a collective name for all the other stuff that makes up a website, such as images, music, videos, pdfs etc.
Real web address are special numbers that look like 63.245.215.20. This is called an IP address and it a unique location on the web. DNS names were invented to make web addresses easier to remember.
There are three types of lists:
Unordered list are bullet points. To display unordered lists we need two types of tags <ul> </ul> which go at the start and end of the list, and <li> </li> which are used for each individual bullet point.
<ul>Ordered list are numbered points. To display ordered lists we need two types of tags <ol> </ol> which go at the start and end of the list, and <li> </li> which are used for each individual numbered point.
To start a list at a particular value - or to continue a list from a particular number we can use
the start attribute as follows:
<ol start="4">
<li> Step 1</li>
<li> Step 2</li>
<li> Etc. </li>
</ul>
This will display the data as follows:
The default numbering system in HTML is 1. 2. 3. 4. We can change this to A. B. C. or i. ii. iii.
etc. using the Type attribute.
We can use the following code to change the default numeral:
<ol type="i">
<li> Point 1 </li>
<li> Point 2 </li>
<li> Point 3 </li>
</ol>
This will display our ordered list as follows:
Nested lists are lists within lists. To create a nested list we use the
following code:
<ol type="I">
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
<ol type="a">
<li> Sub-item 1</li>
<li> Sub-item 2</li>
</ol>
<li> Item 4</li>
<li> Item 5</li>
</ol>
This displays as:
Defininition Lists use <dl>, <dt>, <dd>, tags to create
well ordered lists for definitions etc.
The <dd> tag is used to describe a term/name in a description list.
The <dd> tag is used in conjunction with the <dl>
(describes a description list) and <dt> (defines terms/names).
Inside a <dd> tag you can put paragraphs, line breaks, images
links, lists etc.
<dl> Here is a definition list
<dt> Here we define the term e.g. Newton's Law</dd>
<dd> Here we give the text etc.
Newton's First Law
An object will remain at rest or at constant speed unless
acted upon by an external force
Nweton's Second Law
F = ma
Newton's Third Law
For every action there is an equal and opposite reaction
</dd>
</dl>
If we want to display text of high importance we use Strong Type.
Typically this is similar to BOLD type.
You display STRONG
using <strong> STRONG </strong>
To give a reference we use "cite". You display
Beginning web programming using <cite>
beginnning web programming</cite>
To give a short quote we use <q>
To be or not to be, that is the question </q> which renders
To be or not to be, that is the question
To give a long quote (over 20 words), known as a block quote we use
<blockquote> Big quote..... </blockquote>
Let me tell you something you already know. The world ain't all sunshine and rainbows. It's a very mean and nasty place, and I don't care how tough you are, it will beat you to your knees and keep you there permanently if you let it. You, me, or nobody is gonna hit as hard as life. But it ain't about how hard you hit. It's about how hard you can get hit and keep moving forward; how much you can take and keep moving forward. That's how winning is done! Now if you know what you're worth, then go out and get what you're worth, but you gotta be willing to take the hits, and not pointing fingers saying you ain't where you wanna be because of him, or her, or anybody. Cowards do that and that ain't you.
x = 7
y = 3
print(x*y)
Anchor tags are used to add links and other fun things
To Add an internal link we do the following:
<a href="Sir_index.html">Second Page </a>
a = anchor tag
href = hyperlink reference i.e. the page you want to send people to
Other Text (Second Page) = What you want to display on your page as the link to be clicked
Second Page
To use this internal link there must be a webpage in your project with the exact same name.
My second page is called "Sir_index.html" and clicking the link "Second Page" will bring you here.
Remember that your homepage must ALWAYS be called "index.html". When you are editing pages
Glitch will always show the homepage after a change is made. To make life easier you might want to called the page
you are working on "index.html" so you don't have to click the link each time. When you are finished editing you can
easily change them back.
To add an external link use the following format:
<a href="https://www.syngestreet.com/"> Synge Street Homepage</a>
Synge Street Homepage
To send an email:
<a href="mailto:SyngerCS@gmail.com"> Our Class Email</a>
href = email address
mailto = what will be done
SyngerCS@gmail.com = address it will be sent to
Our Class Email = What will be displayed on the webpage
Our Class Email
To draw a table use this code!
<table border="1.5">
<tr>
<td> Row 1, Column 1</td>
<td> Row 1, Column 2</td>
</tr>
<tr>
<td> Row 2, Column 1</td>
<td> Row 2, Column 2</td>
</tr>
<tr>
<td> Row 3, Column 1</td>
<td> Row 3, Column 2</td>
</tr>
</table>
| Row 1, Column 1 | Row 1, Column 2 |
| Row 2, Column 1 | Row 2, Column 2 |
| Row 3, Column 1 | Row 3, Column 2 |
To add a picture, open the image in a new tab, copy the link and then use the following code:
<img src="https://i.kym-cdn.com/photos/images/newsfeed/000/225/075/html_jokes_0000.jpg" alt="HTML Donuts" width="512" height="79" >
As you can see the image is not always going to display correctly. Here it is too wide, or not tall enough, but definitely not in proportion. Problems could also arise if you display on a browser on a phone, where the screen size is much smaller. In this image, the dimensions are hard coded as width="512" height="79". To display it properly on a PC, I will use dimensions width="338" height="79". These dimensions refer to the amount of pixels the image is set to.
Now the image is better proportioned, but too small for the screen, so I will treble all the dimension to make it much bigger and display as width="450" height="240"
Was the joke worth the wait? Probably not, but with your newfound HTML image skills this can be fixed easily. This problem can be tedious to
fix, you do not want to tinker constantly with the dimension to get the picture to fit properly. Sometimes it may appear too enlarged,
shrunk or stretched. If you only specify a "width" the "height" will autoadjust to make the image proportional. As so....
It is worth noting that this final image is a little bigger than my guess at the correct proportions, but this goes to show how
difficult it can be to size pictures properly in HTML. The following code will do this for you:
<img src="..." class="img-fluid" alt="Responsive image">
Finally, despite my separation, images can be inserted in paragraphs, which makes life easier. I did not ammend as it is good enough, and
more awkward to do having already separated them. If some files can not be displayed within a < p > tag you can use a < div > tag
where you can basically do whatever you like!
To make an image a clickable link you simply place the <img> tag inside an achor tag (<a>).
For example, to make our donut "joke" a link we simply do the following:
<a href = "https://offbeatdonuts.com/">
<img src="https://i.kym-cdn.com/photos/images/newsfeed/000/225/075/html_jokes_0000.jpg" alt="HTML Donuts" width="450">
</a>
The funniest donut HTML joke you are likely to see today!
In this example the link brings us to the online location of the image, as does the text link below it.
If we want to add an image that is on our computer, and not currently online, we first upload it to "assets" in the left hand window.
Once it is there you can click on it and copy the link and then insert it as before using the <img> tag. Here I have a
farmer and Gru pics (which are the same picture).
To play your video on a web page do the following: