1) Go to Jsbin.com
2) Register on top right hand corner
3) In the HTML section enter content between body tag. E.g. <body> blah blah blah </body>
HTML for content
Tags Classify content
Title
<h1> title </h1>
Subheading
<h2> subheading </h2>
New Paragaph
<p> this is a paragraph </p>
Button- this will appear as a button
<Button> Click me! </button>
Link tag
<a href="http://www.google.com"> link</a>
*Note: The tags/ html codes can be on any line, same line or whatever. Doesn't matter. But space it out to make it neater or / and easier to read.
Image
<img src="ieducase.jpg">
or if its an image on web, right click on the image, select 'copy image location'
<img src="http://www.image.com/hehe.jpg">
Bullet points/ Unnumbered list
<ul>
<li> this is a bullet point </li>
</ul>
Numbered list. e.g. 1, 2, 3,
<ol>
<li> this is numbered list</li>
</ol>
To style your website click CSS on the tab at the top- CSS define how your tags look
1. h1{ <--- this refers to the heading in HTML2. Color: red; <--- this makes the header red
3. Text-align: center; <---- the aligns the heading to the center
4. font-size: 14px
5. text-decoration: underline;
6.font-weight: bold;
7. font-family: helvetica;
8.}
9. p
10.{color:blue;
11. font family: helvetica;
12. }
To make reference to certain paragraph. go to html and go to a paragraph <p class="paragraphone">
The go to CSS
.paragraphone{font-style: italic;}
Twitter Bootstrap is useful for getting codes
New page
JS BIN on top left hand corner--> New page
How to add Youtube video onto your page
On youtube, click on Share underneath the video--> select Embed--> The html code will appear, copy it--> paste it into your jsbin html page between the body tags.
You can always change the size of the video, by adjusting the width and height in the code.
Top right hand corner untick 'Auto-run JS' for the page to load quicker.
How to add like button for your Facebook page
1. Go to developers.facebook.com
2. search like button
3. scroll down to step 1
4. copy the jsbin address (the url, jsbin.com/yoursite)
5. paste into the URL to like field box. and add latest to the end of the url. e.g. jsbin.com/yoursite/latest
6. make any adjustments
7. click on Get code
8. copy the first bit of code in the box
9. paste it just under the body tag
10. copy the 2nd bit of code and paste it back to html.
11. If you want it to be below the video for example, paste it under the video code
To add a Comment pluggin,
1. go back to facebook developer
2. search for comments pluggin
3. copy the jsbin url
4. paste it the URL comment field box
5. get code
6. Copy the second bit of html code
7. paste it into the HTML section,
*note* the first bit of the code is to show your connection with Facebook (ideally right under the opening body tag), second bit (short code) of the code is for the pluggin.
You only need to the first bit (long code) of code once for Facebook pluggins. So you may have 3 Facebook pluggins but only need the long code once and 3 different short codes.
add <br/> under the pluggins' code to have a gap between pluggins.
To have something in the center, video for example.
Add <center> before the video code
Add </center> after the code
For more pluggins go to, addthis.com
For custom fonts, Google fonts.
For a background image, go to CSS
1.body{
2.background-image:
3.url('http://image.com');
4. background size: 2000px 1000px;
5. background-repeat: no-repeat;
6. }
If you see someone else's website and you like certain components of their page and would like to copy it. Right click--> inspect element (firefox)/ view page source (other browser)
How to "STALK" people, LOL!
Go to Facebook personal profile picture
change the url to http://graph.facebook.com/yourpage- basically add "graph" in front of facebook
Copy ID number
paste it on the url after facebook.com, replace your username in the url address.
e.g. http://graph.facebook.com/1234567
to see the picture of that person
add 'picture' after the ID
e.g. http://graph.facebook.com/1234567/picture?type=large
?type=large will make the picture large
Javascript
New Page
Add library-->jquery latest
Click Java script
inside body tag add <div class='facebookPhotos'>
go to freeformers.com/snippets
scroll down for Javascript
In the Javascript;
1. //adding an image
2. $('.facebookPhotos').append('<img src="http://fbfbfbdg'/>"};
3.
// LOOPfor (var i = 1; i <= 100; i++){// Stuff you want to happen on each loop goes here} //for// END LOOP
add the code in 2, after //stuff you want to happen...
How to find personal information
Go to Developers.Facebook.com
Click Tools on the top
Click Graph API explorer
Add the info you want to know about in box on the left.
Click get access code
That's about it I think. There's more next lesson.
No comments:
Post a Comment