Navigation

HTML

We learnt that we had to do web page programming to journal down what we have learnt during the dfab lessons. In the end, I used brackets to program our html pages. We used videos like this(learn html) and this(Learn more html) to learn how to do webpage programming on our notepads. However this can easily be adapted to brackets as the mcommands are all basically the same. Furthurmore, with brackets, it allows 'shortcuts' by where you start typing something like {p} then {/p} would automatically show up.(i could not use the <> sign for explaining the paragraph start just now as it was be regestiered as a tag, thus i resorted to {}. Additionally we were thought we could also use mark down, but i did not really see the need to do so as i already had the main structure of the website programmed in CSS and brackets. Also for this, as it was impossible to make < or >, therefore, we used this website https://rapidtables.com/web/html/html-codes.html to reference the code for the tags.

Tags used often in brackets(html):

<!doctype> This basically Declares what version of HTML file the HTML is. Although it already is a html, this is needed as there are many HTML file versions and the browser might not know which one this is, so this is needed.

<HTML></HTML> This is to state that this is the start of the HTML file

<title>Title of the file<title> This is needed so that when the HTML file is opened, this will be the title that is showm, basically the name that is shown at where the link is.

<p></p>(This is to make a new paragraph appear)

<br></br>(This is a break that make a new line)

<ul><li></li></ul>
(This is used to make a dotted lists .<ul></ul> starts the dotted list and {li}{/li} to make a dotted point)

<oi></oi><li></li>(This is basically the same as the dotted lists but instead this creates a numbered lists.)

{a href="https://"websitelink"}"what you wamt the link to show up as</a>
(this is gonna be very important as this is the way to add a website to your website which would be very useful when you need to reference to something.)

<img src="file location of the image/name of the picture" width="the amount of horizontal pixels you want" length="The amount of vertical pixels you want and alt="What text you want show up if the picture cannot">
This is a way you can add pictures into your website. If the picture is in the same folder as the html file, then the portion where the file location is not neccessary. However is the location of the file is in a folder in the folder that the html file is, then you would need to just write the folder name as the file location. Else you would need to write the location of the file starting from the partition it is in. The name of the picture would be the same regardless of where it is. For the alt, that one is not neccessary, but it would be useful incase the pircture could not be shown, or the website could not find the picture file. Using this would shows the alt name in case the picture cannot be shown.

<a href="either a link or html file"> The name you want the link to show up as </a> For the thing after href, you can either put a link to a website, or you can put the name of the html file that is stored locally. If the file i saved in the same folder, then all that is needed to put the naem of the file and a .html at the back. If this is stored at another location, then it required to put the file directary before the file name. On top of that, i would also be required to upload the file the link leads to together with the original file. The name of the link that is to show up, can be anything, it can also be the website link itself. All it does is that i directs you to the website or the file that is in the first part of the tag.

<h(then a number from 1-6)>The name of the header</h(number from 1 to 6)> This is the tag to put a header into the html file. The number from 1 to 6 that comes after h decides the font size of the header text.

Actually you might be thinking, how can i make <> appear here, since if you try to type <> in brackets, even if you used "", this still take it as if you are typing in a tag and will not appear. This is because i used and < and > as they are the character codes for the <>. In fact, everything character has its own code in html and can be found in at this website: https://rapidtables.com/web/html/html-codes.html

<video width="960" height="540" controls> <source src="Projectfiles/DFAB%20video2.mp4"></video>
This is used to when trying to upload a mp4 or video files on the HTML file, and this will also allow that video to the interacted with, so by clicking on it, will enable the video to start playing.

CSS

As breifing mentioned before in the HTML portion, CSS is mainly used to give the website structure and eye-candy. But as this did not really impact the content on the page, i did not really pay too much attention to it. I used this website tp learn about css and it was really all that i used to make this website. However to make CSS work(or the version you are seeing now) it was crucial that i used divisions to seperate the parts of the files. So for example, i would seperate the the website to the navigation bars, the content, the copyright portion and so on. Then i was important to group all the divisions together into one larger division. This way, i was possibel to have spaces at the sides of the website, making it so that i was not word from 1 edge to the other. Similarly, with the smaller divisions, i was possible to shift them around the page, making navigation bar to the left of the contents container, or the copyright division all the way at the bottom of the page. Additionally, with divisions and CSS, I was able to add colour to the words and also the background, as well as changing the font.

Tags used in brackets(CSS):

#"name of the division you want to edit"("Tags/commands in here)

width:"number of pixels or auto" and length:"number of pixels or auto"
same as that of the HTML

Margin (left right bottom or top): this is basically telling the website that to leave some space from the said direction. This could be useful if i wanted to make the text not go from border to border, or maybe leave some space between parts.

For the division or components of the website, you can set the background colours for those components, or can also set the text colours by using background colour and colour.

Other than the HTML and CSS code, there is also the github part. Github is where we will be placing our HTML files and all the other relevant documents for our website. When using github, you first have to create a 'repository'. This is basically where your files will be uploaded and this will also allow ur HTML files to become websites, where people with the link can access. 1 important thing after having your link, is that at the end, you have to also add in the name of the file you want to access, or maybe the hompage if the homepage would act as a way to access all the other files. An example would be this https://mtgbootz.github.io/EP1000/V2.html. If i had not written the V2.html at the back, then you would not be directed into any of the files, but because i placed the file name at the back, when clicking this link, you will be taken to this file. Now, all of this may be cool and all, but how do you actually make a repository. Well first you open up github, then click on new repository. Now put in the name of your repository, and then the rest is not really that important. Just at the bottom, you might also want to tick the add a readme file.

Then ur set, you have created ur on repository. Now you can click on the new file and upload file.

This way, you can add in all your HTML, CSS and other relevant files. One you have placed in all the files, click on the commit changes button

. Lastly, you have to go over to the settings and change the branch to a master branch.

Only now, will you be able to get the link for your website.

Website desgin

Navigation

HTML

Tags used often in brackets(html):

CSS

Tags used in brackets(CSS):