The Coding Express

Hi everyone, it's been 2 days seen my last post. So sorry, for this gap...but it was really unavoidable. I was also thinking what to do next in our web development journey. So let's discuss what I was planning... The Plan In the last 70 days, we have learned complete HTML and lot of CSS with various examples and layouts. We have covered almost all basic CSS needed for web development but yes, a lot is remaining which includes: CSS Grid CSS Flexbox CSS Animations Responsive layouts and much more... But before going any further, I think we should practice what we have already learned so that we become perfect in what we know.  How to practice? According to me(and many others) there is no better way to practice web development than Free Code Camp. If you have never heard about, freeCodeCamp is a nonprofit organization that consists of an interactive learning web platform. It has small quizzes where you have to write a code which will be checked and if it is ...

In the last article , we learned about embedding YouTube Videos in HTML pages which was pretty easy and straightforward.  After video and images, let's focus on the last element in media types that is audio. Let's see how we can use audios on our web pages to enhance them... HTML <audio> element To play an audio file in the HTML, we use <audio> tag. Let's see by an example... <audio controls>     <source src="sample.mp3" type="audio/mpeg"> </audio>  All the attributes and tags work just like <video> tag we seen in WDS20 article 2 days before. Following are the file formats and associated media types of music files: MP3: audio/mpeg Ogg: audio/ogg Wav: audio/wav  Most of the browsers support the MP3 format, so you should use it as your first preference. Just like video post, I can't show live code example in jsfiddle, so try it in your own web browser with any audio file you have with correct source...

In the last article , we learned about HTML videos and how we can add them easily to our web pages. We have seen that it is very difficult and struggle that some browsers do not support specific video format. So to play them in different browsers you any have to add different types of video format and for that, you have to convert videos manually from one format to another. Is there a better option? Definitely, yes!  An easier solution is to let YouTube play the videos for you. When you upload(or watch) a video on youtube, you will see that YouTube has the unique id for each video. We can use this id to play video on our web pages and yes, it will play on all the browsers and operating systems. Let's see how we can achieve this... YouTube Videos The simplest way to use a YouTube video on the HTML page is to head to any youtube video, right click and select "Copy Embed Code". This will directly copy the required HTML, to use. Let's see what code looks like: ...

In the last article we learned; <select> element <textarea> element which completed our discussion about forms in HTML. Now we have completed many things in HTML. We have also seen how to add images to HTML, but definitely there are more ways to enhance our web pages. Let's see how we can add media elements to our pages for more engagement of users and create more informative web pages... HTML5 Video HTML5 <video> element specifies a standard way to embed a video in a webpage. Although video could be embedded before HTML5, it was only using the plug-in like flash. Let's see how to use <video> element: Following attributes are used in <video> tag: width and height : To describe width and height of the video controls : This adds video controls like play, pause, and volume. autoplay : To start video automatically Inside <video> and </video> tags, we will add source text describing the source of video with following...

In the last article we learned: Some input fields in forms Important attributes to enhance input fields In this article, we will cover remaining elements of form excluding <input> that we covered in last 3 articles. Let's begin... The <select> Element This defines the drop-down list in HTML form. Inside of <select> element each drop-down option is added using <option> element.  If you want an option to be selected by default, then add selected attribute to it. You can also change a number of visible items instead of the default one by specifying size attribute in the <select> tag. To enable the user to add multiple options, use multiple attributes in the <select> tag. The user has to select multiple options using holding down Ctrl in Windows or Command in Mac. The <textarea> Element  This defines multi-line input field that is text area. Following attributes are used: rows : Visible number of lines in textarea ...

In the last article we learned: Input type Reset Input type Password Input type Color Input type Date Input type Email Input type Checkbox Including the first 3 input fields learned in the first article about HTML forms, now we can use 9 various types of input fields in our forms. There are more fields, some of which are not very important but you can check all other fields on Internet, but what we have learned about input fields is more than enough. Now let's see some input attributes so that we can customise our inputs. The value Attribute It is used to specify the initial value of an input field. <input type="text" name="lastname" value="Ronaldo"> The readonly Attribute It is used to specify that input field can not be edited that is it is fixed. <input type="text" name="lastname" value="Ronaldo" readonly> The disabled Attribute It is used to disable specific input fie...

In the last article we learned: HTML <form> element HTML <input> element Text Input Radio button input Submit button Let's start today with remaining <input> elements... Input Type Reset <input type="reset"> defines a reset button. It will rest all form values to provided default values. Default value can be provided with value attribute in each input element. Input Type Password <input type="password"> defines a password field. Input Type Checkbox This defines checkbox in HTML. Checkboxes let a user select none or more than one options of a limited number of choices. Input Type Color The <input type="color"> is used for input fields that contain a color. Color picker will be different for different operating systems and browser. Input Type Date The <input type="date"> is used for date input. Date picker will also different interface for diff...

In the last article we learned: HTML <meta> tag need All the attributes of <meta> tag including charset As I said in the last article, today we are going to study something that we see on every website and that is forms. Yes, we see forms everywhere for the purpose of contact, submitting user information, online polls and many other places. So let's see how we can create the form with the help of HTML... HTML <form> element HTML <form> element defines a form. All the other form related tags/ form elements will be nested inside it. There are different types of form elements in HTML which we can use inside <form> element. Let's see one by one: <input> Element It is the most important form element. <input> element has attribute type which desides what type of input you are taking. type="text" : Defines one-line text input field type="password" : Defines password list type="submit" : D...

In the last short article we learned about: HTML iframe element to display webpage inside webpage Now in this article, we are going to see something which will not make the direct impact on how you are seeing your webpage but will do a lot of background work. So let's get started... In the very first article on HTML, while learning basic HTML page structure we divided HTML document into two main parts: head and body. This head contains metadata about HTML document which we write in the body of HTML. Ler's see how to write this metadata... HTML <meta> element <meta> element is used to specify about author of webpage, various tags for article, page description and many other things. Metadata is used by browsers to decide how to display content and search engines to classify web pages according to tags and keywords. HTML Character set A defined list of characters recognized by the computer hardware and software. Each character is represented by a num...

In the last article we learned about: Block level and Inline HTML elements Important div and span elements In the today's article, we will study to display one webpage inside of other. So let's get started... Sometimes it is not sufficient just to provide the link to other website or put a screenshot of that website to give information. It is better to provide a  small box on the webpage where the other webpage is already opened and the user can simultaneously interact on both areas. Let's see how we can achieve this with help of HTML. HTML iframe element An iframe is used to display a web page within a web page. Syntax:  <iframe src="URL"> </iframe> Optional Attributes: height : Set height of iframe width :  Set width of iframe Attribute values are by default (without any specified units) are in pixels but we can also use percentage based values. By default, an iframe has a border around it. To remove it, we can use style a...

In the last article we learned about: Unordered list in HTML Ordered list in HTML Till now we have seen various HTML elements which we used to customise our document. This all the elements can be divided into two main parts. HTML Block-level Elements HTML Inline Elements HTML Block-level Elements A block level element always starts on a new line. This element takes up the full width available. Examples: <header> <ol> <ul> <li> <table> <blockquote> <p> <h1> to <h6> The good and realistic question is how will you know which element is taking full width available on screen? Simply set background color to non-white color and you will get your answer. <div> element which we will study later in this post, is one of the most important block level element which is used to create blocks in HTML to easily seperate one part from other.  HTML Inline Elements An Inline element does not start...

In the  last article we learned about: Simple HTML Tables colspan to expand cell more than one column rowspan to expand cell more than one row Now in this article let's study how to create lists in HTML. In HTML we can create two types of list: Unordered List Ordered List   Let's see each one of them in detail. Unordered HTML List An unordered list in HTML starts with <ul> and ends with </ul> tag. Each list item starts with <li> tag and ends with </li> tag. The list items will be marked with bullets by default but we can customise it with type attribute in starting <ul> tag. The type attribute can have any one of following values: type="disc" : Item marker is bullet. This is also the default. type="circle" : Item marker is empty circles. type="square" : Item marker is square. type="none" : Items will not be marked. Ordered HTML List An ordered list in HTML starts with ...

In the last article we learned about: Floating images in HTML How to create Image mapping in HTML In this article, we will start our discussion about tables in HTML. Tables are the great way to represent your information in tabular form. Following tags are used to create the table: <table> : HTML table is defined with this tag. <tr> : Each table row is defined with this tag. <th > : This is used for representing table headers. <td> : This tag is used for defining table data. By default HTML tables will not add any borders inside or outside of tables. To add borders use the border attribute inside <table> tag with the value equal to any integer inside quotes. You can also add the width attribute to <table> tag in percentage. You can also align particular text with align attribute . There is one more tag called <caption> which is used to give the table a name or heading which will be displayed on the table. It will be used in...

In the last article we learned about: How to use images as HTML links HTML links as bookmarks on large pages Advanced target attribute in links In this post, we will study little more about HTML images. We have seen that we can insert an image in HTML pages with the help of <img> tag and it will have following main attributes: src : To represent the source of an image alt : Alternate text to show if an image does not load width : To represent the width height : To represent the height We have also seen how to use images as the link in the last article. Now let's see some more stuff about images.  Aligning/ Floating Images Sometimes just placing images in the centre of Document does not look good. At such times we can place image left or on right and follow text on another side. For such case, we can use align attribute in <img> tag same as we use to align text. We can also do this with CSS but we will see that later when we will start learnin...