Monday, 14 July 2014

Preparing for Web Assignment: How To Create A Webpage

Web pages to the amateur eye seem extremely easy to make which is why many people get confused over people who declare they’re web designers and such. On the other hand many do not realise that web pages and the internet itself is made entirely of script, markup languages and coding. However the main one, people use to lay the foundations for their webpage would be HTML which stands for Hyper- Text- Markup- Language and then back it up with a CSS document which now stands for :  Cascading Style Sheet.
As explained earlier Hyper-Text-Markup-Language proceeds as the ‘backbone’ of a web page, being written in the form of tags enclosed in angle brackets that are either open, to allow coding to appear on your web page, or closed to tell the system that’s the end of the tag.
The purpose of this is so web browsers can easily read HTML documents and compose them into web pages, now the browser doesn’t display these tags yet uses them to interpret the web page. Some HTML elements have empty content which are then closed in a start tag.

Tags can be various formats and mean specific commands, if we look at a webpage we shall be able to distinguish the difference between tags and what they do.

At the start of creating a webpage we always begin with <Doctype html>, <html> <body> . Basically this defines the page as a web page and allows us to start coding what we want to appear on our page.
<H1> Stands for first heading. H is a basic command for headings and will appear once the h has been used in conjunction with the angle brackets. On the other hand unless you only plan to use one header, then you have to give the number of what heading you want to appear on your page. For example <h1> KawaiixFukuro Studios</h1> stands for the first header in the script. Now what I’ve written above is <centre> which again is another command, that makes my header appear in the centre of the page.
<p> Means paragraph and follows similar suit to the headings and how you use them, all that’s different is you’re now writing a paragraph instead of a header. Just remember to end the tag by using </p>
To add in a hyperlink you need to start with <a href=”(add the websitelink you want!)”</a>, I’ve used Deviantart as mine, go to the end result of this code and you’’ be able to see what the hyperlink looks likes.

So now that we have the basics covered, what else could be potentially used at our arsenal?
To get an image appear on your webpage can be quite tricky but here is the code:
<img src= “(add your image destination here, so for example I used a DeviantArt link to one of my art or use a folder within your laptop so it would go Pictures/image name.jpg)” alt=”(Name of your image)” >
The src basically is telling the web where you can find this image whether it be on another website or on your computer. The alt is also another important factor as it allows the image to appear on different web browsers rather than just one and then if you want your image to be a certain height, then all you have to do is carry on with that html code before the tag ends but write: width=”(enter your size here)” height= “(enter your height here)”>
<f> stands for footer, so if you want something specifically at the bottom of your web page you use this tag and command, just remember to close it using </f>
The next two are pretty simple and allow you to use emphasis on your words, for italics simply use <em>  then as usual write what you want to be in italics and close up with </em>. Bold typography is also simple, same with italics write <strong> instead on ‘em’ and end on </strong>. Below is how the code above now would look like on a web page.

Now a Metatag/Metadata is actually information about data. The meta tag (<meta>) provides metadata about the HTML document but isn’t displayed as the final product like most of the other coding, but is machine passable. Elements of this kind are basically used to specify a page’s author, description, keywords, recent modifications and other metadata meaning this can be used by browsers like Chrome, Firefox, Opera ect by helping them display or reload pages, search engines such as Google, Yahoo and Bing for keywords or other web services. An example of writing this type of code can be found below:
CSS Document:
CSS stands for Cascading Style Sheet, they allow you to define a certain style for HTML elements meaning external style sheets can actually save a lot of time and effort, as they’re saved within CSS files.
The rule for CSS consists of a selector and a declaration block as shown below:

Now the selector goes with the HTML element you wish to style, meaning each declaration has to have a property name and a value separated by colons, yet if the block contains one or more declarations they must be separated using a semi-colon as shown above whilst the group of declarations are surrounded by curly brackets. To make this easier for you to read, instead of having the declaration all on one go you can spilt them up so each declaration is on one line.

By looking at the image above we can see that to set up a style, we start with the usual HTML style but then after adding or leaving behind your header (<head>) , add in the CSS which starts with <style>, choose what your selector is which here is p for paragraph and then write in your style format. End of the CSS with </style> and then continue writing in html as I have done below.
The system already knows we want the CSS style to be based on paragraphs so when we command paragraphs in html format and write what’s going to be in that paragraph, then everything is going to be in the CSS style so my writing should be in blue!
If we wanted a certain set of paragraphs to be in different colours then instead of using p, we would have to write p1,p2, p3 ect and create a different style for each one as shown below.

Now to name each of your styles so it doesn’t look as confusing as mine, simply do this as shown below:
If we use /*(enter comments here)*/, then the browsers ignore this information and when we come back to change certain pieces in our CSS styles then we know where each one potentially starts and ends. Again I’ve shown how you can do this multiple times!

If however you wanted the same paragraphs to have the same colour all you have to do is put all the selectors you wish to be the same on the same line? The image below shows that we want header 1 and 2 and all paragraphs to be in the same style, this saves time instead of having to write out every selector and style if you want them to be the same. Other people would class this as grouping selectors.

Inserting CSS styles can be dealt with in three ways, them being: external, internal and inline. All three are written different so I will show how you add each one in that order.
An external style sheet is usually applied to web pages because you can change he entire look of the web site itself by altering one file. Each page must link the style you’ve made using the <link> tag which goes within each head section of your code. Any written CSS can be done in any text editor, meaning the file should not contain any html tags and should be saved as a .CSS extension
This is an example of where you shall place your <link> tag in an html document, if you want to use an external style sheet.
An internal style sheet should only be used when a single documentation has a unique style and again written in the head of your html document, using the <style> tag instead of <link> tag. Look at the example below

 Inline styles have a disadvantage because it mixes content with presentation unlike other style sheets, meaning you can’t use this method all the time. To use inline though you use style attributes in the relevant tag which can contain CSS elements. The example given below allows us to change colours and the left margin of a paragraph.

Now that we know how to insert CSS inside of our HTML, we can go back to designing our web page. To add a background, it’s pretty simple can be done either using a web index colour which you can find a colour code palette on the internet, then look for your wanted colour which will reveal the code needed, otherwise using an image for the backdrop of your webpage.
By looking at the document above we can see we use the usual CSS format to colour code our lettering but after your first curly bracket write in:
Background=colour: (then add in your index colour code)
Which will then appear around whatever selector you wish to have the colour around. Up above they’ve chosen three different blues that define headers, divisions and paragraphs. To add in an image follows closely to how you would add one in html tags. Instead you would write:
Body (your selector) {(your background images name or background-image):(the url of your image/ file destination) “(the name of the image).jpg or gif ect”;} Then you should get the result as shown below.
Going back to font and typography we could also change the styles that we want our text to be in, making our web page more unique and personal. To change the typography we have to declare it using the usual CSS style:
p.serif{font-family:"Times New Roman",Times,serif;}
The P stands for paragraph again but Serif stands for certain types of typography that have small lines at the ends of the characters and sans serif means that these types don’t have the lines. Usually Sans Serif and Serif are the main font’s people use on web pages, magazine articles, books ect. Now to make sure these actually work, when you come to declare your chosen selector in html (like h1 for example), you have to write:
<p class= “Serif/Sansserif”>
This will then put whatever you’re going to write in that typography, but remember to write one or the other!
Another way to define your typography would be to create bold, italics or oblique. Again go to where you declare your styles and write in:
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
These here will allow your characters to be shown on the web page in these fonts yet just like the typography, when you come to write in your commands in html you have to write in:
<p class=”normal/italic/oblique”>
Remember to choose either one and whatever is written in that paragraph will appear on your web page. Below is an example of incorporating both typography and font styles:

Finally all that’s left is to style hyperlinks so that when someone clicks on one of these on your webpage, go onto a new page then return back to the page they were on that hyperlink would then be a new colour so that people knew which hyperlinks they’ve visited. Do to this we need to know the different types of hyperlinks.
Ø  A:link- a normal link that no one’s visited
Ø  A:visited – a link someone has viewed
Ø  A:hover – a link when someone overs over it in some text for example.
Ø  A:active – a link the moment it is clicked
Please note though when setting the style for multiple links, you have to put them in a certain order. That being a: hover must come after a:link and a:visited and a:active must come after a:hover. To use these again go back to your style sheet and type in as well as adding a colour to each link:
Then to add them into your html you have to write something like:
<P><b><a href=”(add in your wanted url as I have done below)” target “(Name your link, e.g Youtube)”> (Write what you want to appear as your link) </a></b></p>
The p stands for your paragraph but the b and a stand for your hyperlink style formatted in a true for false style. So if the person hasn’t viewed the link it stays in that colour until they have, for more information check out the example below:
Disclaimer: The websites below I do not own any images used above belong to the owners.
1. (Used on 22/3/14-1/5/14 for images and referencing)

No comments:

Post a Comment