welcome Anonymous
This is the left dummy section that maintains the three grid system.
Coding...
  • Topics
  • HTML Intro
    •
  • HTML Elements
    •
  • HTML Attributes
    •
  • HTML Headings
    •
  • HTML Marquee
    •
  • HTML Paragraphs
    •
  • HTML Span/Div
    •
  • HTML Style
    •
  • HTML Comments
    •
  • HTML Links
    •
  • HTML Tables
    •
  • HTML List
    •
  • HTML Iframe
    •
  • HTML Images
    •
  • HTML Video
    •
  • HTML Audio
    •
  • HTML Form
    •
  • HTML Inputs
    •
  • HTML Textarea
    •
  • HTML Button
    •
  • HTML Select
    •
  • HTML Javascript
    •
  • css intro
  • css syntax
  • CSS Backgrounds
  • CSS Margins
  • CSS Paddings
  • CSS Borders
  • CSS Text
  • CSS font
  • CSS display
  • CSS Position
  • CSS Colors
  • Sage.js Intro
  • Hiding elements
  • Showing elements
  • Togging elements
  • Getting input/textarea values
  • Setting input/textarea values
  • Getting HTML content
  • Setting HTML content
  • Toggling HTML content
  • Appending HTML content
  • Prepending HTML content
  • Getting attribute value
  • Setting attribute value
  • Event handling using when()
  • Selecting elements using document.querySelector()
  • Getting CSS using getStyle()
  • Setting CSS with setStyle()
  • Adding a class with addClass()
  • Removing a class with removeClass()
  • Toggling a class with toggleClass()
  • Slide show with slideShow()
  • Loading data with loadData()
  • Sending data with sendData()
  • File previewing with filePreview()
  • Getting location with myLocation()
  • Getting location by ip adress with locationByIp()
  • Copying text with copyText()
  • Making a clock with clock()
  • Making a count down with countDown()
  • Calling a function after sometime using after()
  • Calling a function every after sometime using every()
  • Stoping the executing function using stop()
  • Dragging & Dropping elements with dragDrop()
  • Creating a file with createFile()
  • Randomising numbers with random()
  • Creating a single page app (SPA) with createSPA()

HTML INTRO

HTML stands for HyperText Markup Language and it is used to create web pages (website). HTML is the language that is made up of elements that are used to format the web pages.HTML files have a dot ".html" extension name and are intrepreted by a web browser such as opera min and chrome.

Creating the first html page:
To create and run the first html page, open your favourite text editor in your pc for example "Notepad" in windows and then type the following:

<html>
<head>
<title> </title>
</head>
<body>
<h1> welcome to my webiste </h1>
</body>
</html>

Then save the file as "website.html" and open it using your preferred web browser like chrome or opera min and below is the result:
welcome to my webiste
Congrates! you have just written your first webpage now lets break down the code you typed in your editor:
First you typed the <html> element which specified that the document you are writing is html, then you typed <head> element and this is where meta information such as website titles and styles are written, then you typed <body> element in where the main content of the webpage is written.All the web contents should be written between the <body> opening and </body> closing tags.Finally you typed the <h1> that stands for 'heading' which had the 'welcome to my website' as its content. I know this might confuse you but you will understand them better later in the tutorial.

HTML ELEMENTS

HTML comes with the set of elements that are used to structure and format html web contents. Html elements are wrapped between the less than "<" and greater than ">" symbols. html contents are written between the opening and closing tags of the element. The opening and closing tags should have the same name or the code will not run as expected.

<html>
<head>
<title> </title>
</head>
<body>
<element> html content goes here </element>
</body>
</html>
The closing tag has the backslash that indicates the end of the element. The following table shows a number of elements and their functions.

Element Name Function
<html> html declares document type as html
<p> paragraph creates a paragraph
<h1> heading creates the heading of the content
<input> input gets user inputs a single line(inline)
<textarea> textarea gets user inputs from multiple lines
<select> select creates a dropdown options of items
<button> button creates a button
<ul> unordered list creates unorderd list
<ol> ordered list Creates ordered list
<li> list creates a list item
<u> underline underlines a text
<hr> horizontal makes a horizontal line
<style> style styles an html contents
<i> italic makes a text italic
<b> bold makes the text bold
<video> video creates a video
<audio> audio creates an audio
<img> image creates an image
<title> title sets the title of the website
<body> body defines the content of html
<table> table used to create a table
<a> anchor used to create a link
<marquee> marquee used to animate text elther from right or left
<link> link used to include external css files

HTML ATTRIBUTES

Attributes are the set of html keywords that add more information about the elements.All elements accept attributes that go in a "name=value" pair. This example shows how the attribute can used to perform a certain task and in this case we will use the "style" attributes to change the color of texts in the paragraph.

<html>
<head>
<title> </title>
</head>
<body>
<p style="color:green;"> text changes to green in paragraph </p>
</body>
</html>

text changes to green in paragraph
Example explained:
First we created the paragraph <p>with some contents in it , then we used the attribute called style to apply a green color to the paragraph contents

The following table shows some widely used attributes and their functions.

attribute Function
href holds the url path name of the file
src holds the file path location name
alt used as altenative when the image is broken
style used to style html content inline
border used on tables to add border lines
id used as an unique element identifier
class used as the multiple elements identifier
disabled disables an html input or button
contenteditable enables html contents to be editable
readyonly allows the user to read the content only from the inputs
required ensures that input or textarea has some values(not empty)
maxlength specifies the number of characters to be inserted
onclick excutes some functions when an element is clicked
direction used to specify the direction of text either left or right
loop sets the number of times the text should run

HTML HEADINGS

HTML headings are used to show/write the most important information such as an welcoming text on the website.heading are represented with <h1> tag which run from 1 to 6. you have ever visted a website that welcomed you in some awesome big font text such as the one below: welcome to my site
actually they use one the heading tags to achieve this and here you will know them and use them in your website.
Headings are in six distinct categories and they vary in the font sizes and weight
example
<html>
<head>
<title> </title>
</head>
<body>
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>
</body>
</html>


Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

As you can see, the heading 1 "<h1>" has the biggest font size and weight while heading 6 "<h6>" has the smallest font size and weight.Moreover, all these heading can be modified with the "style" attribute in any way such as setting their text color, font size etc.
example
This example shows how we can set the background color of h1 by using the "style" attribute:
<html>
<head>
<title> </title>
</head>
<body>
<h1 style="background-color:blue;"> welcome </h1>
</body>
</html>

welcome

HTML MARQUEE

<marquee> is an element used to animate html texts either from right or left direction.marquee uses a set of attributes used to manipulate the animation of texts.
"direction" is the attribute used to specify the direction of the animation either right or left.If the direction is not set, texts who will animate from right to left. Therefore, the default direction is left
Example:
<html>
<head>
<title> </title>
</head>
<body>
<marquee direction="right"> hello world </marquee>
</body>
</html>
hello world

"Loop" is another optional attribute used to specify the number of times the texts should run and stops.
This example uses a "loop" attribute to run the text twice(two times)and stops. You can kindly reload your page to see the effect:
<html>
<head>
<title> </title>
</head>
<body>
<marquee direction="left" loop="2"> hello world </marquee>
</body>
</html>
hello world

HTML PARAGRAPHS

<p> is an element used to make paragraphs in the web pages. it add some white spaces that separates one set of contents from the other on a new line.
Example:
<html>
<head>
<title> </title>
</head>
<body>
<p> This is a paragraph </p>
</body>
</html>

This is a paragraph

Creating a New Line:
<br> is a "break" element used to create a new line in html. its'an empty element that does not take any text and therefore it needs no closing tag. if the <br> is not used in html, all the inline elements will be in a single line.
Example:
This example shows how a <br> "break" is used to create a new line in the webpage
<html>
<head>
<title> </title>
</head>
<body>
<P> some texts in paragraph <br> texts on new line </P>
</body>
</html>
some texts in paragraph
texts on new line

HTML SPAN/DIV

<span> is an html inline element used to put items in a single line.span is commonly used to make some inline styles such as changing the font size, color of the texts and more. Besides, span element does not create any newline and this is why it's used in inline styling.
Example:
This example shows how span can be used to apply some styles in the paragraph
<html>
<head>
<title> </title>
</head>
<body>
<p> i have a black color <span style="color:blue;"> i have a blue color with the help of span </span>
</p>
</body>
</html>

i have a black color i have a blue color with the help of span


<div> is an html block element used to put items in a new line.Each div starts on a different newline everytime it's used as it creates break. Div is also used to group elements together which need a special style
Example:
The example below shows how a <div> element is used in the webpage. We have added the 'style' attribute to change the color of the text to orange.
<html>
<head>
<title> </title>
</head>
<body>
<p> i have a black color <div style="color:orange;"> texts have blue color starts on a new line </div>
</p>
</body>
</html>

i have a black color
we have a orange color and we on a new line

HTML STYLE

style is an html attribute used to style the elements. Style has a "property":"value" format of styling webpages however style attribute can not be used to apply one style to the entire webpage as its an inline attribute and as the result all the styles apply only to the current element where it is used. The example below will change the color of the texts in the paragraph to red.
example:
<html>
<head>
<title> </title>
</head>
<body>
<p style="color:red;"> my color has been changed to red
</p>
</body>
</html>

my color has been changed to red
Example explained:
style has been given a property which is "color" and its value which is "red" as the result, the color of the text in the paragraph are changed to red as expected.

CHANGING THE FONT SIZE:
The font-size property is used to change the font size of the text like this:
<html>
<head>
<title> </title>
</head>
<body>
<p style="font-size:25px;"> i have a font size of 25 pixes
</p>
</body>
</html>

i have a font size of 30 pixes

Example explained: style has been given a property which is "font-size"and its value which is always a numerical value "30".font-size is measured in either em or px. You can give the fonts(texts) any size you want using this method.

SETTING THE BACKGROUNG COLOR: The background-color property is used to set the background color of the contents in the element:
<html>
<head>
<title> </title>
</head>
<body>
<p style="background-color:green;"> my color has been changed to red
</p>
</body>
</html>

i have a background color of green

Example explained: style attribute has been given a property which is "background-color" and the color value of "green".
You will learn more about website styling when you take the cascading style sheet(CSS) tutorial.

HTML COMMENTS

comments in html are texts in the code which are ignored by the web browser and this enables programmers to 'comment' their codes which helps them to remember the meaning of every piece code. A web browser ignores every content written between <!-- and -->
example:
<html>
<head>
<title> </title>
</head>
<body>
<!-- this is a comment -->
</body>
</html>
The less than symbol, exclamation mark and double hyphen <!-- represent the start of the comment while the double hyphen and greater than symbol --> represent the end of the comment.
Therefore if this code is run nothing is going to show in the web browser because it's ignored

Links are the keystone in the website as they enable users to jump from one web page to the other within the website.Links in html are created with the anchor <a> element which contains the "href" attribute which specifies the file url(uniform resource locator). example:
<html>
<head>
<title> </title>
</head>
<body>
<a href="home.html"> Home page
</a>
</body>
</html>

Home page

Example explained:
The above example demostrates how a user can be taken to the "home page" of the website which has been created with the filename of "home.html".The "href" is the required attribute that contains the url or the filename and in our case is "home.html" and this is what enables page named "home.html" to be loaded.
The content between the opening and closing tags of the element acts as the link that can be clicked and by default it's blue in color and underlined.
Please note that if you don't put any characters or texts between the tags,the web browser is not going to show any link.

HTML TABLES

Tables can be created in html document through the use of <table> element as the main element with some sub elements whichs include:
<tr> which stands for "table row" which creates a cell
<td> which stands for "table data" which creates a row and
<th> which stands for table headings(headers) which makes columns.
example:
<html>
<head>
<title> </title>
</head>
<body>
<table border ="1">
<tr>
<th> name </th>
<th> age </th>
</tr>
<tr>
<td> chanda </td>
<td> 23 </td>
</tr>
</table>

</body>
</html>


name age
chanda 23

The Border attribute in the table element adds the border line of 1px across the table. If the border is not included, you will end up with the table without borders lines and it makes less sense!! so don't forget to include it.

HTML LIST

Lists can be created in the html document just like in other document!!.There are two types of list and these are: ordered list which is represented by <ol> element and unordered list element that is represented by <ul> element:
Unorderd List:
example:
This example shows how unorderd list is created in the webpage
<html>
<head>
<title> </title>
</head>
<body>
<ul>
<li> Unordered list 1 </li>
<li> Unordered list 2 </li>
<li> Unordered list 3 </li>
</ul>
</body>
</html>

  • Unordered list 1
  • Unordered list 2
  • Unordered list 3


Orderd List:
example:
This example shows how orderd list is created in the webpage
<html>
<head>
<title> </title>
</head>
<body>
<ul>
<li> ordered list </li>
<li> ordered list </li>
<li> ordered list </li>
</ul>
</body>
</html>
  1. ordered list
  2. ordered list
  3. ordered list
Changing list markers
By default ordered lists are marked by numbers while unordered list are marked by black circles. however these list markers can be modified.
ordered list markers
Ordered list markers can be changed using the type attribite in the <ol> element.
Example:
This example sorts list items in an uppercased alphabetical order.

<html>
<head>
<title> </title>
</head>
<body>
<ul type="A">
<li> List item </li>
<li> List item </li>
<li> List item </li>
</ul>
</body>
</html>
  1. list item
  2. list item
  3. list item
Please note that by putting a small letter 'a' in the type attribute, marks the list items with small alphabeltical order.
Example:
This example sorts list items in a lowercased(small letters)alphabetical order.

<html>
<head>
<title> </title>
</head>
<body>
<ul type="a">
<li> List item </li>
<li> List item </li>
<li> List item </li>
</ul>
</body>
</html>
  1. list item
  2. list item
  3. list item

Roman Numeral Marks:
List items can also be marked by roman numerals and this can be done by just putting small letter "i" for lowercase numerals or a capital leter "I" for upppercased numerals in the type attribute.

Example:
This example sorts list items in a lowercased(small letters)roman numerals.
<html>
<head>
<title> </title>
</head>
<body>
<ul type="i">
<li> List item </li>
<li> List item </li>
<li> List item </li>
</ul>
</body>
</html>
  1. list item
  2. list item
  3. list item

HTML IFRAME

<iframe> is an element used to create a webpage within a "webpage", sounds confusing right?? you can simply load another website in your own website using an iframe.An iframe is commonly used to embed youtube videos in the website.
Example:
<html>
<head>
<title> </title>
</head>
<body>
<iframe src="filename/website url"> </iframe>
</body>
</html>


Embending Youtube Videos:
Youtube videos can be included in your website by simply getting the iframe script from a video.Go to youtube and play a video and then tap on the share link and then choose "embed iframe" then copy the all iframe scripts and paste it in your own website.
The iframe comes with set of attributes and the common ones are height and width attributes which are used set the width and height of the frame.
Example:
<html>
<head>
<title> </title>
</head>
<body>
<iframe src="filename/website url" height="50" width="100">
</iframe>
</body>
</html>
This example gives the iframe the height of 50px and width of 100px. Remember that height and width attributes should be given unitless values therefore don't include units such as "px" or "em".The src is the required attribute where the filename or the url of the website is placed.Therefore if the height and width attribute are not set, the iframe is going to use the default values.

HTML IMAGES

<img> is an element that stands for "image" and it's used to add images in the website. <img> element has a required "src" source attribute that accepts the image file name.It also has the height and width attributes which are used to set the height and width of an image.
It also has the alt attribute which stands for 'altenative' that is used to display some texts when the image is broken( image fails to show). <img> is an empty element and it does not have the closing tag.
Example:
<html>
<head>
<title> </title>
</head>
<body>
<img src="image-filename" width="50%">
</body>
</html>


This example shows an image with the width of "50%".please note that you don't necessarily need to set the value of the height as it is set automaticaly when you set the width.Make sure that that you use the correct filename(basename) in the src attribute else the image will no show!

HTML VIDEOS

<video> is an element that stands for "video" and it's used to add videos in the website. <video> has a "src" source attribute that accepts the video file name.it also has the height and width attributes which are used to set the height and width of an video.besides, <video> element has a powerful attribute which is almost a required called controls which provides all the basic video controls such as pausing/playing the video, adjusting the volume of the video, casting and downloading the video. Therefore you just need to add the controls attribute which is a "boolean"
Example:
<html>
<head>
<title> </title>
</head>
<body>
<video src="video-filename" width="50%" controls>
</video>
</body>
</html>


Repeating The Video:
loop is an attribute that keeps repeating the video when it finishes
Example:
This example shows how to add a loop attribute to video element that repeats when it finishes playing
<html>
<head>
<title> </title>
</head>
<body>
<video src="video-filename" width="50%" controls loop>
</video>
</body>
</html>


Autoplaying The Video:
autoplay is an attribute used to 'autoplay' the video when the webpage loads. You don't have to press the "play" button as the video begins playing by itself "automatically"
Example:
<html>
<head>
<title> </title>
</head>
<body>
<video src="video-filename" width="50%" controls autoplay>
</video>
</body>
</html>

adding a video poster(thumbnail):
Poster is a video attribute used to add a video poster that represent the content of the video. a poster can be an image which is associated with the video content.For example if the video is about wrestilling, you can use the image of "john cena or undertaker".
if the poster is not included, the initial pictures of the video are used as the "poster".
Example:
<html>
<head>
<title> </title>
</head>
<body>
<video src="video-filename" width="50%" poster="image-filename" controls loop>
</video>
</body>
</html>

HTML AUDIO

<audio> is an element that stands for "audio" and it's used to add audio files (music) in the website. <audio> has a "src" source attribute that accepts the audio file name, this is where we put the name of the audio file such as song .Besides, <audio> element has a almost required attribute called controls which provides all the basic audio controls such as pausing/playing the audio, adjusting the volume of the audio and downloading the audio.
Example:
<html>
<head>
<title> </title>
</head>
<body>
<audio src="audio-filename" width="50%" controls>
</audio>
</body>
</html>


Repeating The Song:
loop is an attribute that keeps repeating the song when it finishes
Example:
<html>
<head>
<title> </title>
</head>
<body>
<audio src="audio-filename" width="50%" controls loop>
</audio>
</body>
</html>



Autoplaying The Song:
Autoplay is an attribute used to autoplay the song when the webpage loads. You don't have to press the "play" button as the song begins playing by itself "automatically" after the webpage finishes loading
Example:
<html>
<head>
<title> </title>
</head>
<body>
<audio src="audio-filename" width="50%" controls autoplay>
</audio>
</body>
</html>



HTML FORMS

<form> is the element used to process the data collected from the various input fields.forms are widely used in the scripting languages such as PHP and JAVASCRIPT.
Form element has the required attribute called method which shows how the form should be submitted wheather in "GET" or "POST" method. It also has the action attribute that specificies the location where the form will be processed
Example:
<html>
<head>
<title> </title>
</head>
<body>
<form method="POST" action="filename.html" >
<input type="text" >
<input type="submit" >
</form>
</body>
</html>


Action attribute:
action is the form attribute used to add the name of the file that will process the data entered in the input fields after the form is submitted.you will learn more on 'action' and 'method' attributes in PHP tutorial

HTML INPUT

<input> is an element used to collect data from the user in a single line(inline).The input element has a number of attributes which are used to modify the input field.

type attribute:
type is the required input attribute and it's used to specify data type to be entered in the field. These data types includes the following:

text-This accepts texts,numbers etc(all characters on the keyboard)
<html>
<head>
<title> </title>
</head>
<body>
<input type="text" >
</body>
</html>



number-This accepts numbers only(0-9)
<html>
<head>
<title> </title>
</head>
<body>
<input type="number" >
</body>
</html>



date-This enables the user to set the date
<html>
<head>
<title> </title>
</head>
<body>
<input type="date" >
</body>
</html>



color-This enables the user to set the color
<html>
<head>
<title> </title>
</head>
<body>
<input type="color" >
</body>
</html>



checkbox-This enables the user to select multiple items by checking the boxes
<html>
<head>
<title> </title>
</head>
<body>
<input type="checkbox" >Tomatoes
<input type="checkbox" >Lemons
</body>
</html>

Tomatoes
Lemons

radio-This enables the user to choose only one value from multiple options of values. For example, Radio buttons are used to the gender of the person which can only be either male or female.
Now in order to pick only one value from multiple values, all the inputs should have the same name as seen in the example below
<html>
<head>
<title> </title>
</head>
<body>
<input type="radio" name="gender" >Male
<input type="radio" name="gender"> Female
</body>
</html>

Male
Female

submit-This creates a button used to submit the form. this only works when the form method attribute has "POST" or "GET" values else the button will not send the form anywhere
<html>
<head>
<title> </title>
</head>
<body>
<form methods="POST" action="filename.html" >
<input type="text" >
<input type="submit" >
</form>
</body>
</html>




password-This transforms texts into asterics "*" or stars. Try to type something in the box and see how every character is converted into"stars or dots "
<html>
<head>
<title> </title>
</head>
<body>
<input type="password" >
</body>
</html>



OTHER INPUT ATTRIBUTES:
Apart from type attribute,there are different input attributes which are used after the expected data type has been set and these include the following:

placeholder-These are texts that tell the purpose of the input box.These texts disapper when the user begins entering or typing there own values.Placeholders can also act as labels of the input box.
<html>
<head>
<title> </title>
</head>
<body>
<input placeholder="enter your name" >
</body>
</html>



maxlength-This specifies the number of characters to be accomodated in the input field.The example below accomodates only 5 characters in the input field
<html>
<head>
<title> </title>
</head>
<body>
<input maxlength="5" >
</body>
</html>



value-This sets a pre-defined value in the input field.This is also used to set a name of the submit button when the type attribute is equal to submit .Users can then change the pre-defined values in the inputs if they want
<html>
<head>
<title> </title>
</head>
<body>
<input value="Am a pre-defined value" >
</body>
</html>



Required-This ensures that the input field has some values or is not empty. Required attribute is used in form handling where it makes sure that all the input fields have some values.
In the example below try to click the submit button without entering any values and see what happens.
<html>
<head>
<title> </title>
</head>
<body>
<form methods="POST" action="filename.html" >
<input type="text" required>
<input type="submit" >
</form>
</body>
</html>




disabled-This is used to disable input fields and buttons so that they become uninteractive with the user.When the "disabled" is set the user will not do anything with both input field and button.
<html>
<head>
<title> </title>
</head>
<body>
<input type="text" placeholder="am disabled" disabled>
<input type="submit" disabled>
</body>
</html>




readonly-This is used make pre-defined values in the input field "uneditable". This means that the user can only read the values and never change them as they can not be edited by any means. Try typing something in the input field below and you will see that nothing is done
<html>
<head>
<title> </title>
</head>
<body>
<input value="i can not be edited" readonly>
</body>
</html>



name- A name is used as a variable that stores all the input values.For example, if the users enters a number, it gets stored in the name's attribute value.nameattribute is commonly used in programing languages such as PHP during form handling.
<html>
<head>
<title> </title>
</head>
<body>
<input name="emali" placeholder="enter your email" >
</body>
</html>


So if the email address is entered it will be stored in the 'email' name.

HTML TEXTAREA

<textarea> is an input element that accepts users inputs in multiple lines(block).remember that input element accepts user inputs in single line however users can like to enter many characters in the fields such as sending a text message or other data that may require many characters and this is where a textarea is used.
textarea has two special attributes which are rows and cols
which stands for columns
rows is used to set the height of the textarea while cols is used to set the width of the textarea.Both rows and cols accept unitless numerical values.
Example:
<html>
<head>
<title> </title>
</head>
<body>
<textarea cols="20" rows="8" >
this is the textarea that has multiple lines
</textarea>
</body>
</html>




By using the rows and cols , a textarea can be adjusted in any kind of height and width. Also remember that the textarea accepts all the input element attributes such as type, name, maxlength, required, disabled, in short all the attributes you saw in the input element.

HTML BUTTON

<button> is an element used create a button in the website that can be clicked to perform some functions.
Example:
<html>
<head>
<title> </title>
</head>
<body>
<button
Click here
</button>
</body>
</html>

HTML SELECT

<select> is an element used create a "dropdown" menu in the website.select element has sub-elements called <option> which are used to create options of items to select from. In the example below, click on the dropdown button and select one color from the options
Example:
<html>
<head>
<title> </title>
</head>
<body>
pick one color:
<select>
<option value="red"> red </option>
<option value="black"> black </option>
<option value="blue"> blue </option>
</select>
</body>
</html>


pick one color:

The value attribute holds the real value of the option item. if the value is not set, the dropdown menu will not return any values.

HTML JAVASCRIPT

HTML allows inline javascript programming to add some "actions to the website" as html alone is boring and static!. javascript attribute can be included in any html elements however the most prefered elements are button and input elements which are more interactive.
HTML uses a number of javascript attributes to enable programmers to write some javascript codes and here we just pick the most widely used two javascript attributes which are onclick and onkeyup:

onclick-This is used to perform some functions when any specified element is clicked.The example below displays the current date when the button is clicked.Try to click the 'check date' button to display the current date and time
<html>
<head>
<title> </title>
</head>
<body>
<button onclick="this.innerHTML=Date()" >
Check date
</button
</body>
</html>



onkeyup-This is used to perform some function when any key on the keyboard is pressed and released.The example below displays the user's name as they begin typing it into the input field.javascript will select a <div> element by its id nsme called 'result' and then apply the values from the input into its inner html content. Try it and see!!
<html>
<head>
<title> </title>
</head>
<body>
<div id="result" > </div>
<input onkeyup="document.getElementById('result').innerHTML='your name is '+this.value;" >
</body>
</html>

your name will show here


Now that you have learnt the basics of HTML, you need to move on to cascading style sheet "CSS" which is used to style the webpages of the website.

English into Bemba dictionary App download (apk)
Learn the translation of the English words into a Zambian most popular local language bemba. This app works offline, comes with over 5,245 examples and quiz.
earn points , challenge friends, and make money as you interact with sageteche products
English into Bemba dictionary App downlo..
Sage AI is a state-of-the-art artificial intelligence language model that is designed to understand, interpret, and generate human language. With its advanced natural language processing capabilities, Sage AI can provide accurate and helpful responses to a wide range of questions and topics.
Sage AI is trained on massive amounts of text data, including books, articles, websites, and other sources of information. It uses a combination of machine learning algorithms and neural networks to analyze the structure and meaning of language, including grammar, syntax, and semantics. This allows Sage AI to understand the context and intent behind a question or statement, and provide a relevant and informative response.
When a user interacts with Sage AI, the conversation takes place in a conversational format, with the AI using a combination of pre-defined responses and machine learning to generate a response based on the input it receives. The AI can understand the user's question or statement, analyze its structure, and generate a response that is both accurate and engaging.
Sage AI can be used in a variety of applications, including customer service, chatbots, language translation, and content generation. For example, a customer service representative could use Sage AI to analyze a customer's complaint or question and provide a helpful and accurate response, or a language translator could use it to translate a document or conversation from one language to another.
Overall, Sage AI is a powerful tool for anyone who needs to interact with human language in a way that is efficient, accurate, and engaging. With its advanced natural language processing capabilities and machine learning algorithms, Sage AI can help businesses, organizations, and individuals communicate more effectively with their customers, colleagues, and partners.
Sage AI is a state-of-the-art artificial..
Ad
X
Here are ways of making money online