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:
