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.
HTML
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
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
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;}
p.sansserif{font-family:Arial,Helvetica,sans-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:
Bibliography
Disclaimer: The websites below I do not own any
images used above belong to the owners.
No comments:
Post a Comment