Post: Very Basic JavaScript and HTML5 with CSS
Options
12-24-2016, 07:29 PM
#1
Algebra
[move]mov eax, 69[/move]
Just some basic JavaScript information to know!
1. Before adding JavaScript to your Website or Application etc you first will obviously need to learn the Language.
2. You can buy plenty of books online or you can look on youtube for demonstrated tutorials.
Okay so let's start off
TOC
0. Material
1. HTML5
2. CSS
3. JavaScript Styling
4. JavaScript Functions
5. Creating a Local Website
Material
A laptop/PC/Mac & a text editor that allows you to save files as .html or .css or .js or if you're using this to include in your online website then .php but you can do fine without .php if your website doesn't contain MYSQL functions or PHP functions then you should be good.
What are MYSQL & PHP functions, well these can be associated with the following examples ==> ( User Login System, User Data Storing, Email sending, Form Data inputting into a Database, Storing User Cookies etc ) all the array of examples I submitted can involve MYSQL and PHP implementation.
Also you will need a brain lel :/
HTML5
HTML5 Hypertext Markup Language comprises of different types by types I mean tags. When I refer types as tags I am referring to them as different data types for example ( <script> <a> <link> <meta> ) and plenty of more, these attributes gather information differently but I won't be explaining them individually in this thread please do some research about the tags and information you get perplexed about.
CSS
CSS Cascading Style Sheets acts like a makeup artist lol it's the best way of explaining it. Basically this makes our web page from ugly to lovely lol this can contain all our mathematical layouts which we will manually configure ourselves and also not to mention the GUI design.
JavaScript Styling
JavaScript Styling is basically acting like a onload styling configurator or an onclick styling configurator. It has the ability to style your webpage on a requested event whereas CSS style is manually loaded instantly.
JavaScript Functions
JavaScript Functions are needed to do certain activities on our website. For instance the if we wanted to change an element in our web script on a set time or on a user click then we would add an event handler using a JavaScript function or method. JavaScript is a great O.O.P.L ( Object Oriented Programming Language ) for web applications.
Creating a Local Website
Okay so you have listened to all my summaries about the stuff we will be using in our Local Website. So now let's go over some abbreviations on some unique words you might want to know. I won't be explaining them I will only be identifying them as there specified meaning.
1. HTTP / HTTPS : Hypertext Transfer Protocol / Hypertext Transfer Protocol Secure
2. URL : Uniform Resource Locator
3. UTF-8 : Unique Transformation Format
4. HTML : Hypertext Markup Language
5. PHP : Personal Home Page
6. Structured Query Language
Simple Layout :
Picture 1
You must login or register to view this content.
Picture 2
You must login or register to view this content.
Information
This is an example site & you wouldn't do this type of design in a modernised website lol well atleast i hope not. I just wanted to show a brief example of what can be done with the tags in the source this only took me 20 mins or something to do and if i was doing a proper website it would contain bootstrap.
Now Layout with JavaScript Functions and Styling
What's the difference?
The difference is that there is a couple of adding functions & Styling in a separated script named script.js.
[URL="https://[URL="https://[url%3Dhttps://mega.nz/#!7NBzEb4b!Tzh5bF_bQKCOZSKcxT5Ng3vh5LRc-34f7YS6JgEHOhQ""]https://mega.nz/#!7NBzEb4b!Tzh5bF_bQKCOZSKcxT5Ng3vh5LRc-34f7YS6JgEHOhQ[/URL]
Please research the functions I applied to this shitty website and try applying your own function etc
HTML code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="css, bootstrap, html, tags, elements, animations">
<meta name="description" content="This is an example site for releasing to the public">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Derek Brazil">
<link rel="stylesheet" href="css/layout.css">
<title> Example site </title>
</head>
<body>
<style type="text/css">body, a:hover {cursor: url(https://cur.cursors-4u.net/cursors/cur-4/cur337.ani), url(https://cur.cursors-4u.net/cursors/cur-4/cur337.png), progress !important;}</style><a href="https://www.cursors-4u.com/cursor/2010/05/04/mac-os-x-radioactive-busy.html" target="_blank" title="Mac OS X Radioactive Busy"><img src="https://cur.cursors-4u.net/cursor.png" border="0" alt="Mac OS X Radioactive Busy" style="position:absolute; top: 0px; right: 0px;" /></a>
<header> WELCOME TO OUR EXAMPLE SITE! </header>
<nav>
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<h2 id="date"> Click the button below to display the Date</h2>
<ol>
<marquee direction="across"> Just an example site </marquee>
<br>
<style>
img{
margin-left: 200px;
margin-right: 200px;
}
button{
padding: 15px;
position: relative;
overflow: hidden;
background-color: transparent;
box-shadow: 5px 10px red;
border: 2px;
border-color: red;
color: red;
}
button:hover{
padding: 15px;
position: relative;
overflow: hidden;
background-color: #100;
box-shadow: 5px 10px red;
border: 2px;
border-color: red;
color: red;
font-size: 25px;
}
#b1{
width: 125px;
padding: 15px;
position: relative;
overflow: hidden;
background-color: transparent;
box-shadow: 5px 10px red;
border: 2px;
border-color: red;
color: red;
}
#b1:hover{
width: 125px;
padding: 15px;
position: relative;
overflow: hidden;
background-color: #100;
box-shadow: 5px 10px red;
border: 2px;
border-color: red;
color: red;
font-size: 25px;
}
</style>
<img id="anonSwitcher" alt="Anonymous" width="auto" height="auto" src="img/anon1.jpg"></img>
<br>
<button onclick="document.getElementById('date'
.innerHTML = Date()"> Display Date </button>
<button onclick="imgSwitch()"> Anonymous </button>
<button onclick="imgSwitch2()"> Anonymous 2</button>
<button id="b1" onclick="alert1()"> Alert </button>
<br>
<li><p> label</p></li>
<li><p> label</p></li>
<li><p> label</p></li>
<li><p> label</p></li>
<li><p> label</p></li>
<li><p> label</p></li>
<li><p> label</p></li>
<li>
<h5>For more information on our Services <a href="service.html">Click here.</a></h5>
</li>
<br>
</ol>
<footer id="footer" class="top-space">
<div class="footer1">
<div class="container">
<div class="row">
<div class="col-md-3 widget">
<h3 class="widget-title">Contact</h3>
<div class="widget-body">
<p>+353 085 222sexy4u<br>
<a href="mailto:#">[email protected]</a><br>
<br>
This address tho <br> 123 example lane
</p>
</div>
</div>
<div class="col-md-6-widget">
<h3 class="widget-title1">Information</h3>
<div class="widget-body2">
<h6>Contact us by email [email protected]</h6>
<h6>This is an example of an email & you can put your phone# here aswell</h6>
</div>
</div>
</div>
<!-- /row of widgets -->
</div>
</div>
<div class="footer2">
<div class="container">
<div class="row">
<div class="col-md-6 widget">
<div class="widget-body">
<p class="simplenav">
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Services</a> |
<a href="#">Contact</a>
</p>
</div>
</div>
<div class="col-md-6 widget">
<div class="widget-body">
<p class="text-right">
Copyright © 2016, Developed by Someone
</p>
</div>
</div>
</div>
<!-- /row of widgets -->
</div>
</div>
</footer>
<script type='text/javascript' src="js/script.js"></script>
</body>
</html>
CSS code:
.footer1 .widget-body2 {
color: #aaa;
margin: 0 0 20px;
text-align: center;
width: 0 200px;
}
.footer1 {
background: transparent;
padding: 30px 0 0 0;
font-size: 12px;
color: #aaa;
box-shadow: 5px 5px 15px 10px red;
}
hr{
box-shadow: 5px 5px 10px 5px red;
}
.footer1 a {
color: #aaa;
}
.footer1 a:hover {
color: #000;
}
.footer1 .widget {
margin-bottom:30px;
}
.footer1 .widget-title {
font-size: 17px;
font-weight: bold;
color: #eee;
margin: 15px 0 20px;
text-align: center;
}
.footer1 .widget-title1{
font-size: 17px;
font-weight: bold;
color: #eee;
margin: 15px 0 20px;
text-align: center;
}
.footer1 .entry-meta {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 0 0 35px 0;
padding: 2px 0;
color: #888888;
font-size: 12px;
font-size: 0.75rem;
}
.footer1 .entry-meta a {
color: #333333;
}
.footer1 .entry-meta .meta-in {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 10px 0;
}
.footer2 {
background: transparent;
padding: 15px 0;
color: #aaa;
font-size: 12px;
box-shadow: 10px red;
}
.footer2 a {
color: #aaa;
}
.footer2 a:hover {
color: #fff;
}
.footer2 p {
margin: 0;
}
.widget-simplenav {
margin-left:-5px;
}
.widget-simplenav a{
margin:0 5px;
}
nav{
background-color: black;
border-bottom: solid 5px #565656;
border-radius: 10px;
box-shadow: 5px 5px 10px 5px red;
position: relative;
}
body{
background-color: #000;
border: solid 5px black;
box-shadow: 5px 5px 10px 5px red;
border-radius: 5px;
}
nav li a{
margin: 0;
display: block;
color: red;
text-align: center;
margin-top: 10px;
padding: 10px;
text-decoration: none;
}
nav ul li {
list-style-type: none;
margin: 0 auto;
margin-top: 20px;
overflow: hidden;
background-color: black;
width: 200px;
}
nav li {
margin: 0 auto;
}
header
{
font-size: 25px;
color: #ddd;
text-align: center;
}
nav ul li a:hover{
font-size: 25px;
background-color: #111;
color: red;
}
hr{
margin: 0;
}
li h5 a:hover
{
list-style-type: none;
margin: 0 auto;
text-align: center;
padding: 14px 16px;
padding: 0;
overflow: hidden;
background-color: transparent;
color: #FFF;
text-decoration: none;
}
li h5 a
{
list-style-type: none;
margin: 0 auto;
text-align: center;
padding: 14px 16px;
padding: 0;
overflow: hidden;
background-color: transparent;
color: red;
text-decoration: none;
}
li h5
{
margin: 0 auto;
text-align: center;
padding: 14px 16px;
padding: 0;
overflow: hidden;
background-color: transparent;
color: #aaa;
}
li p{
list-style-type: none;
margin: 0 auto;
text-align: center;
padding: 14px 16px;
padding: 0;
overflow: hidden;
background-color: transparent;
color: #aaa;
}
ol h5{
color: #aaa;
}
ol h5 a{
color: #284aba;
}
h1 {
color: #eee;
text-align: center;
}
h2{
color: #bbb;
text-align:center;
}
h4{
color: #aaa;
text-align: center;
}
p{
color: #aaa;
text-align: center;
}
h4 a{
color: #284aba;
}
p{
color: #aaa;
text-align: center;
}
p{
color: #aaa;
text-align: center;
}
JavaScript code:
function imgSwitch()
{
document.getElementById("anonSwitcher").src="img/anon1.jpg";
document.getElementById("date").innerHTML = "Anonymous picture 1";
}
function imgSwitch2()
{
document.getElementById("anonSwitcher").src="img/anon2.jpg";
document.getElementById("date").innerHTML = "Anonymous picture 2";
}
function alert1()
{
alert("Hello there how are you ?");
}
Last edited by
Algebra ; 12-24-2016 at 07:35 PM.
Copyright © 2024, NextGenUpdate.
All Rights Reserved.
