HTML (Hyper Text Markup Language)

Hyper Text Markup Language is used to create the structure of a webpage for the World Wide Web. It is not used to make the webpage look nice or aesthetically pleasing. It is possible to do this but it is not ideally used for this purpose. HTML code usually consists of “angle brackets” (or more than/less than symbols) which come in pairs for example…

<title> titlehere </title>

<body> texthere </body>

The first tag is called opening tag and the second is called closing tag. Content is usually inserted right in between the tags for it to work. The HTML code itself is not shown on the actual webpage, the code simply interprets the content of the page and the content that is intended to be shown is determined by the HTML code. HTML is able to implement images, videos, audio and other embedment that could allow the user to interact with the media. Other than media you can also insert quotes, paragraphs, lists, tables and other Microsoft Word similar features.

Below shows some examples of very simple HTML coding.

This is HTML (Hyper Text Markup Language) and above you see that I have created a simple code for text to be entered. <!DOCTYPE html> is declaration of the version of code that is used which is HTML5.

<body> texthere </body> is used here to insert text into the page of the website itself.

I have added in a title to my webpage and as you can see it has appeared at the top of the browser giving my webpage a name.

Here I have added in “Paragraphs” and this let the code sit on separate lines. This is needed because if the <p></p> was not there the text will sit on the same line. For example…

Here I have added in Italic emphasis to the word “is” and I have also made the word “Warning:” in bold with the tags shown above and all of the text is opened with <p> and closed with </p> right at the end.

CSS (Cascading Style Sheet)

Starting off with CSS is that you can reference CSS in HTML by using a link as shown above and making sure that they all in the same file so the code knows where to grab the reference from. The above shows that the CSS has changed the colour and font of the text and as long as I link the reference in it will work. CSS not only changed font and colour, they do much more complicated things such as drop down menus and much more interactive elements on the webpage. CSS can be used throughout the entire page and CSS is convenient in the sense that you can write the code just once and you can name it and afterward you can use it over and over again by just using the same template. This is called a class and there are examples shown above in pictures. Although Class is used, it is only used for code that needs to be used repeatedly. When a code only needs to be used once for example a button at the top of the page then it is called an ID, it is similar to a class but it is a unique code used for only 1 element.

The CSS does not have to be in the same document, as long as it is in the same folder and is referenced back in the html file then it can be used throughout the website without having to type the entire code out again. CSS is essentially the cosmetic of the page, it makes up of the website’s appearance and interactive elements.

.myNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

color: #FF0000;

}

.my2ndNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

color: #FF0000;

}

.my3rdNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

font-size: 12pt;

color: #FF0000;

}

And then the code below needs to be added in the correct place of the document as shown above.

And then

<h2 class="my3rdNewStyle">INSERT TEXT HERE</h2>

For it to work

Here I have added in a background and also margined the body and as you can see above, I have added in some extra code to margin the body of the text by typing in…

body { margin-left: 15%; margin-right:15%; }

This gave my page margins on each side.

I then added in a background for the body by using this code…

div {

background: rgb(204,204,255);

padding: 0.5em;

border: 1px solid #000000;

}

What? Why?

I will be creating an online portfolio to showcase my work and this will be a website that consists of a Home page, About page, Gallery page and Contact page. Home page will briefly grab the viewer’s attention on first glance and have the most essential information on there about myself, my occupation and my contact details. About page will have all information about me that is related to my occupation and only information that the client is interested in like my CV, Experience and any credentials from big title works I have worked with. That information could go on the home page if it is something that will grab someone’s attention. My gallery page should be 95% pictures and videos and 5% will be elucidations that briefly explaining what are shown within the media and the purpose of it. Last but not least, the most important page should be the Contact page so that the client can easily find me without searching all over the website for an email. It should be short and to the point.

The reason why I am creating this portfolio is so when I ever bump into someone who asks me what I do as a living I will be able to take my phone out and show them my portfolio right on the spot and give them my contact details. This will help me become efficient with technology and also make the most out of my smartphone. This also saves a lot of money as I will not need to create a thousand of business cards. The client will be able to access my page on any device and contact me straight away with the contact details right there.

Websites like this inspire me very much as it is similar to what I would like my website to look like. Also this website is perfectly laid out with the menu right at the top and clears to everyone with a slight darkness to the website to make it less straining to look at giving the viewer a cosy feeling. The pictures are at the top right on top of the menu so that the user can look at the picture and look at the menu at the same time making it easier for them to identify immediately where the menu is. All the detail of the page is right there and not hard to find. This is what I aim for, just simplicity.

Ebay has a great layout as well but significantly different to the studio ghibli website. There are much more navigations and less text, more buttons and images. The reason for this is because the users on this website do not want to look at text, they just want to immediately look at items to buy (the purpose of eBay) so they do not want to contain too much text on the homepage and a lot of promotions, pictures and menus for the user to navigate through easily and quickly.

Compared to the studio ghibli websites, Ebay’s purpose is to sell but the Studio Ghibli website’s purpose was to contain information and detail of the subject so there is more text and less menus and sub-menus as it is not required for the website to have so many menus compared to ebay. What they are similar in is that they both have their logo and homepage button on the top left of the page and content all goes from left to right. They both have information in the centre of the page and everything is easy to get to.

Games? Games.

HTML and CSS

What? Why?

Page

No comments:

Post a Comment