Loading page...
Preparing SageTech
Learn HTML, CSS, and Sage.js from fully readable page content.
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 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.
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.
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>
<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
<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
<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
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.
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.
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>
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>
<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.
<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!
<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>
<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>
<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
<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>
<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> this is the textarea that has multiple lines 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.
<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> Click here
<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: red black blue 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 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> Check date 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.