March | 2018 | Olivia Shaw

Coding lecture – Mark Wells – 21.03.2018

HTML coding

TO REMEMBER:

HTML = content
CSS= how it looks

Dream weaver set up document

click colour space
standard screen
file > new > HTML
bottom of page is code
top is the preview area

start : <body>

end : </body> – this is where is ends due to the ‘/‘

heading is part of website you don’t see
body is the part you see

to insert heading use <h1> this is to start it is heading one

screen will look like: <h1> heading 1 </h1> (haven’t told it specifially what to look like so default is times new roman)

can have as many heading 2 as you like but only have one ‘heading 1’ on page (so google knows the most important part of the page in search)
to add in a paragraph use <p></p>

to add in a link use <a></a> (this will automatically go together but you can move the </a> to later on in paragraph

make sure to add in link using <a href=“http://www.google.com”> after

When saving use no spaces! (internet hates it) uses a – or _ EG…

Then to check drag from files into internet app and it should appear as you’ve done it:

then you click on blue link

It should go to the page such as:

If you finding trouble with formatting and something pastes into somewhere in a format that doesn’t fit what you want/ Go to text edit, past it in and then copy back over and the formatting should be gone.

NEXT: CSS

file > new > CSS

add in heading 1 by typing h1 followed by { } anything in these brackets will adhere to a style
so add in {font-family: this will list font options > click on font you want then add in }
to add a colour in use > ;colour before the end } and also put a ; before }
semi colon is key

Save make sure it has .CSS at the end of file

Now we need to link the two files together so go to CSS designer

Got to the HTML file
Click on + source and choose attach existing CSS file
Then browse files and choose original CSS file

See heading 1 has changed here

Then to continue the CSS file will be sat next to the HTML file at the top.

Click on this and continue to change headings

To change font add in: font-family; followed by size such as 20px

To change link colour write ‘a’ followed by {colour:}

To change the link once its been clicked on initially use
a:link {colour:blue}
a:visited {colour:red}

To make sure it doesnt or does change will hovering over link type
a:hover{text-decoration:none;}

If you want all headings to be the same colour and font then us you do add in ,h2,h3,h4 etc to the initial code:

In order to change whole chunks/ elements/ create boxes use <div> </div> :
this is to change boxes of info at one time (it is invisible as we haven’t applied any style to it yet but listed at the bottom lefthand cover of the screen)

Now to add a style to the <div> (or box) you need to go back to the CSS you can right a rule for it
Go the CSS page and type in #abox (this is to tell it what we want to change)
so you type #abox {background-colour:black;}

The box is very tight to words so to add space type : width:300px; padding: 20px; margin:40px;} EG below
width = full width of full from left to right across screen
padding = inside the box
margin = outside the box

To override this you can use #abox h2 {…..}
eg.. h2 {font-size:40px;}

I can go back and change the colour of the main text and then the heading 2 by changing them in the first line and last line

To change the size/ settings for the phone/tablet/website so it fits you type
@media only screen and (min-width:480px) – this is for mobile as min width up starts there
{#abox {background-colour:royalblue; width:100%}

Then copy above and change width and colours
@media only screen and (min-width:720px) – this is for mobile as min width up starts there
{#abox {background-colour:darkorange; width:700px}

But then the box width doesnt change so i need to go back and change
If I want menu to disappear eg when on a mobile site you want a menu to appear then you add (in the relevant code section) in eg.
h1{display:none;}

If you want something to appear you add in
h1{display:block;}

If you want to move something left of right you type in:
#abox {background-colour:black;width:300px; padding:20px; margin: 40px; float:right;} or #abox {background-colour:black;width:300px; padding:20px; margin: 40px; float:left;}

If you want to move something to the centre you can type that you have to use the margin and make it pull it equally typing: .. margin 0 auto}
#abox {background-colour:black;width:300px; padding:20px; margin 0 auto;}

Screenshot visual notes to accompany the above:

Olivia Shaw

Infatuated, transfixed and fascinated by the ever changing representation of Fashion

AD395

Website update – Sustainable City guide

Website update – Shop section

Blog post written content: 6×6 Challenge

Shaw Swap – toothpaste shoot

Business card update.

Social media content w/c 14th May

Final Exhibition

Ad boosting test results

6×6 Challenge image edit

Shop Shaw Business Card Process

Month / March 2018

CV Second Draft

Portfolio colour scheme

Tutorial Feedback

Coding introduction

Tutorial Notes

Tutorial Feedback