-
Notifications
You must be signed in to change notification settings - Fork 0
/
Page 2.html
66 lines (66 loc) · 5.5 KB
/
Page 2.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
<!DOCTYPE html>
<html>
<head>
<title>Coder's block</title>
</head>
<body style="background-color: aqua; text-align: center; font-size: 20px; padding-left: 10px;">
<h2>The tags</h2>
<p>Now that you know what HTML and CSS are, it's time to learn some different tags for HTML and CSS which allow the website to work properly and look how you want. Whenever using tags, you always use angle brackets (< >) around the tag. For example, if I put 'p' here, I would have to place < and > around it.</p>
<h3>HTML tags</h3>
<p>The first 2 HTML tags I think you should learn are the div (divider) and the p (paragraph) tags. The div and p tags allow you to put a break between different sections of your sentences. The break tag adds a break between different sentences. The div tag can also be used to hold different CSS attributes (which we'll get to in a bit) from 2 or more p tags to a whole website. It is necessary to use p or div tags to ensure there is text within the website. Here's an example where the break, div, and p tags are used.</p>
<img src="resources/images/div_p_br_example.png" alt="Example of div, p, and br tags">
<p>In a browser, it would look like this:</p>
<img src="resources/images/html_browser_view.png" alt="Rendered output in a browser">
<p>Next is the img (image) tag. When using this tag, you must always remember to put 'src' (source) after putting the img tag in. You can tell the computer where and what the image is using an image URL (uniform resource locator) or by saving an image to your local file (<a href="#">Coming soon</a>) and using the file's name (the file's name is called a URI) instead of using a website URL. As well as there being a way to put an image on a website, you can also do the same for a video. We'll explain this in full detail later. For now, let's focus on the images. You can pick a specific size using pixels and customize a border around it using CSS.</p>
<p>Here's a picture example of both:</p>
<img src="resources/images/img_src_uri.png" alt="Example of an image and its CSS style">
<p>This is while using an image URI from my own file. If you are having problems trying to download the image and then making it appear on the website, follow these steps on how to do it properly:</p>
<ol>
<li>Go to wherever you got your image and save the image to your file and give it an easy-to-remember name that is associated with whatever you are doing.</li>
<li>Make sure that you saved them to the file in which you saved all your coding (I put all my items in a file which I conveniently called "coding"). It shouldn't contain anything other than code and other things needed for code.</li>
<li>Insert this into the place where you wish to place your code: <code><img src="(in here place your image name here)"></code>. I can't place my angle brackets because otherwise, the computer thinks I am actually inserting an image.</li>
</ol>
<p>And that's all I can tell you for saving and showing your image on your website.</p>
<p>Next, you're going to see an image of the img tag being used for an image URL.</p>
<p>
<img src="resources/images/example_image_URL.png" alt="Example of img tag with an image URL">
</p>
<p>
The image's URL is a mixture of the website's URL and the image URL. For example: there is <code>http://(insert website here).com</code> (there is also .dev, .net, .info, etc. These are important for publishing a website) and an image's name, for example: <code>teamimage.jpg</code>. Together it would be <code>http://(insert website name here)/teamimage.jpg</code>.
</p>
<p>It's time to move on to the table, column, row, and table cell tags (table, th, tr, and td). They're in the exact same order as the list before this. I'm not much of a fan of this tag, but I still have to tell you how to use it and what it should look like in code and in a website. They are normally used to organize a dirty or difficult-to-read data (which of course is the exact opposite of my website, which is neat and tidy).</p>
<p>This is what it would look like in a website:</p>
<table style="background-color: aliceblue; border-collapse: collapse;
border-spacing: 0px;">
<thead>
<tr>
<th colspan="3">Animals</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 5px;border: 1px solid black;">mammal</td>
<td style="padding: 5px;border: 1px solid black;">reptile</td>
<td style="padding: 5px;border: 1px solid black;">amphibian</td>
</tr>
</tbody>
<tfoot>
<tr>
<td style="padding: 5px;border: 1px solid black;">Warm-blooded animal</td>
<td style="padding: 5px;border: 1px solid black;">Cold-blooded animal</td>
<td style="padding: 5px;border: 1px solid black;">Animals that have backbones and that live on land and water</td>
</tr>
</tfoot>
</table>
<p>In code, it would look like this:</p>
<img src="resources/images/table_example.png" alt="Example of a table in HTML">
<p>
The final HTML tag I'll teach you for now is the anchor tag (<code>a</code>). It's mostly used for hyperlinks to (as the name suggests) anchor them to a specific word. If a word/words are highlighted blue, that means
it's a hyperlink. For example <a href="https://en.dragon-ball-official.com/">this is a link to my favorite show.</a>
</p>
<p>Here is a the code example.</p>
<img src="resources/images/hyperlink example.png">
<p>Now that you've learnt all you need to know about Html (for now) we can finally move onto CSS. <a href="#">Coming Soon</a>
</p>
</body>
</html>