Showing posts with label HTML 5. Show all posts
Tuesday, January 1, 2019
PRACTICAL STEPS ON CREATING SEARCH BOX AND OTHER FORMS ON A WEB PAGE
Hi, I welcome you to our last lesson on HTML 5 and I’m glad we’re finishing strong. In this lesson, I will teach you how to create a search box and a few other HTML 5 simple forms on a web page. Some of the features we will be using here are entirely strange but not unconnected HTML5. So don’t get twisted. As we progress (especially when we get to CSS, PHP and Java) you will understand better. At the moment, just open your mind to the following explanations.
1. CREATING A SEARCH BOX WITH ‘SUBMIT’ BUTTON
Creating a search box in a website using HTML 5 is very easy. To make it look more beautiful, you can as well add CSS, PHP and/or JavaScript.
Let us consider a simple example for more clarification
So open your text editor and key in the following codes
<input id="mysearch" name="searchitem"
placeholder="search" type="search" />
<input type="submit" name="submit" /></input>
<button type="submit">search</button>
It will look like this
Save and open it. it will look exactly like this
EXPLANATION
a) ‘id’ is used for reference in JavaScript. (I will explain more when we get to Javascript)
b) ‘placeholder’ is a new feature in HTML5 and it is used to hint the user on what is expected to enter in the field.
c) ‘name’ is used when you submit a form.
d) ‘search’ is the data to be submitted and this data is usually carried to another page.
e) ‘searchitem’ is simply the data you have typed in the search bar. All these will become clearer when we get to PHP and JavaScript.
2. ‘’YOUR NAME’’ FORM
To create ‘your name’ form, in HTML 5, you have to use the <form> element, the label element and also the importantly the input element. Let us consider the example below:
<form>
<label>Your Name</label>
<input id="user" name="username" type="text" />
</form>
(NOTE: <input> is a self-closing tag, that is why /> is used at the end of the input element.)
It will look like this in your text editor
Save and open it, it will look like this
3. ‘’ USERNAME AND PASSWORD’’ FORM
For ‘your name and password form’
Type the following
<form>
<label>Username</label>
<input id="user" name="username" type="text" />
<input id="user" name="password" type="number" />
<button><label>submit</label></button>
</form>
(NOTE: <button> tags is used to create a submission button.)
IT will look like this on your text editor
Save and open it, it will look like this
4. ‘’YOUR E-ADDRESS FORM’’
To create your ‘e-mail address form’
Kindly write the following codes below. I will explain later
<form>
<label for="e-mail">Your e-mail adress</label>
<input type="text" name="e-mail" placeholder="e-mail@example.com" />
</form>
It will look like this in your text editor
Save it and open it. it will look like this
NOTE ALSO THIS IMPORTANT EXAMPLE BELOW
Write the following codes on your text editor
<form autocomplete="on">
<label for="e-mail">Your e-mail address:</label>
<input name="e-mail" placeholder="e-mail@example.com" type="text" required />
<input type="submit" value="submit" />
</form>
It will appear like this on your text editor
Save and open it, it will look like this
EXPLANATION
a. ‘placeholder’ is a new feature in HTML5 and it is used to hint the user on what is expected to enter in the field.
b. ‘autocomplete’ is used to indicate whether the browser should automatically complete a value based on the previously entered value
c. ‘’required’’ is used to force the website visitor to fill in the value required.
WRAPPING UP
I believe you’ve learnt a lot of things in this lesson. Keep practising and don’t forget to share with your friends. We are moving to CSS in our next lesson.
Monday, December 31, 2018
HOW TO CREATE DIFFERENT SHAPES WITH SVG IN HTML 5 |DETAILED GUIDE
HTML 5
,
SHAPES
,
SVG
No comments
:
Hi, in this lesson, I’m going to hold you by hand and work you through various steps you can use to create shapes using Scalable Vector Graphics (SVG). SVG provides you with different methods for drawing circles, graphic images, paths, boxes, to mention but a few. One remarkable thing about SVG shapes is that it is not defined by pixels or percentages. This means that it can be magnified infinitely without losing its quality and beauty. Let us randomly pick five shapes, code them in HTML 5 and see how the results look.
CREATING SHAPES USING SVG
To put the cart before the horse, there’s one important thing I would like you to note. And that is; you have to create an <svg> tag first before you begin your shape drawing journey. Within the opening and closing tag of <svg>, you have to specify the width and the height of the shape you want to draw.
Below is how the <svg> along with the width and the height, will look like
<svg width=’’ ‘’ height=’’ ‘’></svg>
Now let’s start creating shapes. I will consider 5 shapes because of time and space, you can try as many as you want on your own.
1. CIRCLE
To create a circle with scalable vector graphics, you have to include <circle> tag within the <svg> element in order to indicate the shape type.
Let us consider the example below:
<svg width=’’3000’’ height=’’3000’’>
<circle cx=’’100’’ cy=’’100’’ r=’’60’’ fill=’’green’’ />
</svg>
Save and open it. (On latest browser preferably)
NOTE THESE
a. ‘cx’ is used to push the center of the circle further to the right of the screen
b. ‘cy’ is used to push the center of the circle further down from the top
c. ‘r’ is used to indicate the radius of the circle.
d. ‘fill’ is used to fill in the color of the circle
2. RECTANGLE
To draw a rectangle, you should use <rect> element. Consider the example below
<svg width ‘’1000’’ height=’’1000’
<rect width=’’400’’ height=’’200’’
X=’’20’’ y=’’20’’ fill=’’green’’ />
</svg>
3. LINE
To draw a line, use the <line> element. Consider the example below
<svg width ‘’500’’ height=’’500’
<line x1=’’10’’ y1=’’10’’ x2=’’210’’ y2=’’100’’
Style=stroke:#0000FF; stroke=line cap:round;
Stroke width:’’20’’ />
</svg>
NOTE
X1, y1 indicates the start coordinates while x2, y2 signifies the end coordinates
4. ELLIPSE
Drawing ellipse is similar to drawing a circle. The only difference is that you can change the horizontal and vertical axes of the radius using the ‘’rx’’ and ‘’ry’’ attributes. Consider the example below:
<svg height=’’600’’ width=’’1000’’
<ellispse cx=’’290’’ cy=140’’ rx=’’167’’ ry=’’79’’
Style=’’fill:green’’ />
</svg>
5. POLYGON
‘Polygon’ comes from two Greek words: ‘poly’ meaning ‘many’, and ‘gon’ meaning angle. Hence, a polygon can simply mean an angle with more than two sides. To create a polygon in HTML 5, you can use <polygon elements to create a shape of at least three sides. The unique thing about <polygon> element is that it automatically closes off the shape for you after you finish creating it.
Consider the example below:
<svg width=’’3000’’ height=2400’’>
<polygon points=’’100 100 200 200 300 300’’
Style=’’fill:green; stroke:black; />
</svg>
WRAPPING UP
It is often said that practice makes one perfect. On this note, I humbly adjure you to put all the lessons on HTML into practice so that you won’t have difficult when we move to CSS tomorrow
Sunday, December 30, 2018
COMPLETE GUIDE ON HOW TO USE AUDIO, VIDEO AND PROGRESS ELEMENT
In this lesson, we will be considering audio, video and progress element. To avoid complexity, I adjure you to practically follow me as we move on.
The <audio> element
The Audio element helps you to add audio to a web page. Prior to the introduction of HTML 5 in 2016, playing audios on a web page almost seems impossible. You either download the audio file and listen to it afterwards or you forget about it. Thanks to HTML 5 for providing a unique way of embedding audio (s) on a web page. All you need to do is to add the URL of the audio inside the audio element. C’ést fini.
Strikingly, you can do this using two methods. One is expressed as follows
<audio src=’’audio URL’’ control>
Your browser may not support audio
</audio>
Note These:
a. Those words within the audio element (i.e ‘’Your browser may not support audio’’). It will appear if you are not using the latest web browser.
b. To check if your browser is compatible with HTML 5, visit: www.html5test.com. It will tell you everything about your current browser.
c. You can also download HTML code play on Google play store if you are using an android phone.
Another way to embed the audio file on a web page is expressed below:
<audio control>
<source src=’’audio URL’’ type=’’audio/mpeg’’>
<source src=’’audio URL’’ type=’’audio/ogg’’>
Your browser may not support audio
</audio>
Note Also
HTML 5 as at the time I'm writing this article (Dec 30th, 2018) only support three audio formats. Namely; mp3, ogg and wav.
Let us consider one example before we move to the video element. Open you text editor now an write the following codes below
<audio src=’’http://www.centapreneur.com/upload/audio.mp3’’ control>
Your browser may not support audio
</audio>
It will look like this on your text editor
Save and open it, you will see something like this
NOTE
If you want the audio to start playing as soon as it loads without asking for the persmission of your website visitors, simply use the <autoplay> attribute.
Example
<audio controls autoplay>
<Source src=’’http://www.centapreneur.com/upload/audio.mp3’’ control>
Your browser may not support audio
</audio>
Save it and open it the audio will automatically start playing without your consent.
2. The <Video> element
The video element is similar to the audio element. The only difference is that the video element displays audio-visual characters, unlike the audio element. Also, the video source URL is indicated in the video element. To elaborate further, it will be appropriate if we consider an example.
So study the following codes below:
<video control>
<source src ’’http://www.centapreneur.com/upload/video.mp4’’ type ‘’video/mp4’’>
<source src ’’http://www.centapreneur.com/upload/video.ogg’’ type ‘’video/ogg’’>
</video>
It will look like this in your text editor
Save and open it, the result looks like this
IMPORTANT
a. HTML5 at the moment of the composition of this article (30/Dec/2018) only supports three video formats; namely mp4, WebM, and Ogg.
b. Also, if you want autoplay of the video, succinctly follow the formats stipulated in audio element.
3. The <progress> element
You may have come across a loading bar or status bar when downloading something over the internet. It can be created using the progress element. Relax, I will teach you how to do that in a moment. However, it important to sagely state here that the progress element can be used inside <heading>, <body> or <p> tags. The choice is totally yours.
IMPORTANT
There are a few things I would like you to note before we continue. They include:
VALUE: it is used to indicate the current value of a task that has been completed
MIN: it is used to define the lowest value of a task
MAX: it indicates the total value required for completion of a task.
To drive home the above points, it won’t be inappropriate if we consider at least one example.
Write the following codes into your text editor
Status: <progress min’’0’’ max‘’100’’ value‘’67’’
</progress>
It will look like this in your text editor
Open it after you’ve saved it, it will look like this
WRAPPING UP
Next lesson will be on creating beautiful but amazing shapes using scalable Vector graphics. Keep learning, keep investing in yourself.
Saturday, December 29, 2018
HOW TO USE ARTICLE, SECTION AND ASIDE ELEMENTS
Hi, in today’s lesson I will be discussing with you some important HTML 5 elements which include: <article>, <section> and <aside> element. I don’t want to waste your time on endless preambles, so let’s get to walk.
1. THE <ARTICLE> ELEMENT
This element provides you with a large and independent section that is usually reserved for entries such as blog posts, comments and other pieces of content. If you are building a website or a blog for instance, <article> element is what you will use to create space for entry of contents. In HTML 4, <div> element was what website builders used before the advent of HTML 5. In other words, <article> element is the replacement of <div> element.
Let’s consider an example to clearly understand how <article element works.
<article>
<h1>Welcome To Codinglegit<h1>
<p>enter the content of your article</p>
</article>
It will look like this on your text editor
Save and open it, the result will look exactly like this
2. THE <SECTION> ELEMENT
The <section> element segmentally contains the blog post or page of a website. It is used to partition contents of an article or blog post. It is important to note that <section> element is used inside the <article> element.
Carefully observe the example below:
<article>
<h1>Welcome To Codinglegit<h1>
<section>
<h1>Our services</h1>
<p>enter here what you offer</p>
</section>
</article>
It will look like this
Save it and then open it, the result will resemble this
3. THE <ASIDE> ELEMENT
The word ‘’word’’ aside is not unfamiliar especially to literature students. Aside in this context is used to refer to contents that are separate but indirectly related to the main content. For instance, contents in the sidebar of a website can be regarded as an aside. More so, <aside> tag can be used within an <article> tag. If you want to use it with article tag, make sure that the content within the <aside> tag is not unconnected to the main content.
Let us consider an example
<article>
<h1>Welcome To Codinglegit</h1>
<p>In this website you will be learning HTML, CSS, PHP, etc</p>
<aside>
<p>All the lessons on this website are free access</p>
</aside>
</article>
It will look like this on your text editor
Save and open it, the result will look like this
WRAPPING UP
In our next lesson, we’ll be looking at Scalable Vector Graphics (SVG), alongside <audio>, <video> and <progress> elements. Till then, keep investing in yourself. In case you have any question, inquiries, etc, feel free to use the comment box below.
Friday, December 28, 2018
GETTING STARTED WITH HTML 5| ALL YOU NEED TO KNOW
HTML 5 is the latest version of HTML. This means that HTML has older versions such as HTML 4, HTML 3,and so on. HTML 5 came with numerous features that made it uniquely unique. It has, for instance, a default character encoding commonly known as ‘charset.’ The ‘’charset’’ of a thing is expressed in the manner below:
<meta charset=’’UTF=8’’>.
Another striking feature of HTML 5 is its introduction of ‘’DOCTYPE’’ (document type) at the beginning of HTML document. My mentor often calls it ‘Door-opener’ of markup language.
This means that for a code to be valid in HTML 5, you must first declare the ‘’DOCTYPE’’. In other words, you have to signify the language you are using before you proceed. The format you can use to declare your document type is below:
<!DOCTYPE html>
It is also pertinent to note that some special elements are included in HTML 5. These elements include <video>, <audio>, <datalist>, <aside>, <canvas>, <progress> and many more. More so, this newest version of HTML has API (That is, Application Programming Interface). That sounds amazing.
But wait a minute… you seem confused? Hmm, well, never mind, as we progress you will understand better, I promise.
If you’ve not studied our previous lessons on HTML, then double confusion continues. But if you’ve practically been following me, can I once again take you by hand and walk you through this HTML hot-cake? Okay, let’s move on.
THE IMPORTANT PAGE ELEMENTS OR STRUCTURES IN HTML 5
One of the important page elements or structure in HTML 5 is the <header> (this is totally different from the <head> tag we discussed in our first lesson on HTML). The <header> here may contain things such as the site logo, etc. Other HTML 5 elements include: the <nav> element (for easy navigations), the <footer> element (usually at the bottom of a website), the <video>, the <audio>, the <section>, the <canvas>, the <aside> element and so on.
These are the most important aspect of HTML 5, hence, I will try my possible best to resist every temptation of rushing over the lesson. Make sure you practice with me, please.
For easy comprehension, I will be considering the first three most important page element in this lesson. Are we good to go? That’s splendid!
1. The <header> element
This element is different from the <head> as we’ve stated above. The <header> element is used between the <body> tags to indicate website or blog headings. It is also good for placing advertisements. For instance, If you are applying for Google AdSense (for monetization of a blog), they will request you place a certain ad code within your blog <header> section.
The example below provides us with a resplendent illustration on how the <header element work. Open your text editor and type in the following codes (Remember, we will first declare our doctype.
In a jiffy, can you succinctly tell me the doctype we will be using? ….no, try again…… Yes, you got it!).
So write the following code below
<!DOCTYPE html>
<html>
<head></head>
<body>
<header>
<h1>Happy Christmas Dear</h1>
<h4>And Happy New Year</h4>
</header>
</body>
</html>
It will look like this on your text editor
Save it and then open it with your web browser. It will look like this ( Note: it doesn’t require internet connection)
2. The <nav> element
The <nav> Element is used to define a page or part of a page that is linked to another page or part of a page.
Let’s critically examine the example below:
(NOTE: the hashtag symbol (#) is where you can put your link to the page.)
<nav>
<ul>
<li><a href=’’#’’>Home</a></li>
<li><a href=’’#’’>About Us</a></li>
<li><a href=’’#’’>Contact Us</a></li>
<li><a href=’’#’’>Disclaimer</a></li>
<li><a href=’’#’’>Privacy Policy</a></li>
</ul>
</nav>
It will look like this in your text editor
Save it and then open it. You will definitely see something like this
3. The <footer> element
The <footer> element as the name suggests, is located at the bottom of every website or blog. When building or designing the footer of a website or blog, this element usually plays a very significant role.
Follow the format below whenever you want to work on the footer section of a website or a blog.in ot
<footer></footer>
For example,
<footer>About the Author</footer>
WRAPPING UP
Practice, Practice, Practice. That is the success secret that remained secret to most people reading this. See you in my next lesson.
Subscribe to:
Posts
(
Atom
)
