Create new has different forms
HTML is the simplisest form - just text
CSS is more complex coding that acts as global code across the whole website
PHP is like amazon and ebay where they access a excel spreadsheet with all the products on and there are only a few website page layouts
Creating HTML
At the top you get options
Design shows what it will look like online
Code shows the coding
Tells the computer its the start of <html> like its a language so it nos how to read it
not visible
how the site is going to function eg.possible languages for the site
forward slash represents the end of the code
meta tags is most used for searchable by browser eg. google
Function on how text is going to be displayed etc.
document name is the name that appears in the top of the browser
body is everything that is visible on site
You have to create one folder to keep everything in in order for the website to work
create new folders - name has to be lowercase and no punctuation - keep it short
- first a root folder - website name
- then a sub folder - images - where are all your media will be kept
Start a new site:
Change the site name and then find the folder you have just set up and save
Then the folders you have made show up in files section
Save the website in root folder
saved it as index NOT home as thats only english and the website will be global
To preview in a browser to see how it will look online
The top of the browser has the title
The coding and the bar at the top are connected so you can type in either and it will change the coding
When theres a star by the file tab then it means you have made changes and not yet saved them
Creating CSS
Create new
choose CSS option - no layout options so just click create
the first line is just explaining its keyboard language
The /* is notes so you can note each section of coding to help you find what you want in the coding
List comes up with all the options for in the body of the website
start to type and it will appear, click enter to choose which one
Chosen font family
save the CSS file in the same root folder you made earlier - style sheet is a good name
on the html file you have this on the right hand side
click the paperclip button to link the files
find the stylesheet file you saved
adding more detail to the type for the website
the default colour is black for text so you don't have to code this unless its a different colour
Creating a layout
div means divide
id is one off
class is reused on different areas
write in the height and width of how big you want the whole site page to be
put hashtag in front of it to make the html identify and id (alt 3)
put a fullstop in front of it to make the html identify a class
for the html to identify it in the stylesheet coding you have to input that with the name in-between the body
What the container looks like
Creating the navigation
enter this in between the div of the container
Creating columns
its good to tab the coding to separate them so you can read and find codes better
more organised
initially appear like this
inorder to position them in place
to get the container to the edge of the page you have to choose absolute
columns have to be relative and float so they will, moved automatically to where theres room
you have to make a margin by the navigation to make central and then the columns will not be able to move in this space and will float in the correct area
No comments:
Post a Comment