Skip to main content

Posts

Showing posts with the label MDN

Three Useful HTML Form Features: Radio Button, Drop-down Content & Data Validation

A simple register form like Facebook sign up form may only contains username, email and password. However, we may also see many complex forms out there such as survey form, visa application form, and school application form, etc. From Google Image Just like a random example form  above, this survey form not only has simple text fields such as "Name" & "Email" , but it also has drop-down content and checkbox to collect the information. With Drop-down and Checkbox, people feel easy to make a choice because they don't have to think their own answers. It also help company to collect the most relevant data and analyze results. How to add those useful features on your HTML form? Radio Button/Checkbox Radio Button and Checkbox are widgets whose state you can change by clicking on them. Both of them are created using the <input> element with its "type" attribute  set to the value "checkbox" or "radio" . ...

Project Study: How to Structure A "Complex" Planet Chart

I learned some basic html table elements such as <table></table>,<tr></tr>, <tb></tb>. Therefore, I can use these elements to create a simple table . Today, I continue to learn more html table elements to add more features to a table. <Caption> Since we are not likely to read every detail on each website; in the other word, we like to scan content to save time. If a web page has a table, it is better to have a title for the table. So, we can get a quick idea about this table. Therefore, we need to add <caption></caption> element under the <table></table> directly. screenshot from MDN Advanced Table Element <thead>, <tbody> & <tfoot> These three elements will help to mark up a header, body and footer section for a table. They are very useful for styling and layout. <thead>   </thead> stands for table header, which will be the first row containing the column heading...

Let's Create A Very Simple Web Page

Now we have learned the basic HTML elements and attributes. The first assignment from the course is to write a simple web page, which requires to include: Header, text, list, image, and hyperlink. Before we write any code, we need to know how to combine all the elements into an entire HTML page.  According to MDN Web Doc, it states that a HTML page must includes the following elements: <!DOCTYPE html> :  It is the shortest string of characters that counts as a valid doctype. <html></html> : This element wraps all the content on the entire page, and is sometimes known as the root element. <head></head> : This element acts as a container for all the stuff you want to include on the HTML page that  isn't  the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results. <meta charset="utf-8"> : This element sets the character set you...

Get Started to Learn HTML: Four Basic HTML Elements You Must Know

For the past two days, I had studied HTML from MDN Web Doc ,which is provided by Udemy course.  Before I started, I felt so excited and also  nerves . Can I really understand the content? What if the code language is too complex to understand?  Whatever......Not matter what, I told myself just start to learn. If I am too afraid to even open the web page , I would never figure it out. Try first, and then see what would happen.  As I read through the first part: Getting Started with HTML , I find it is not to difficult to understand the information. By following the instruction, I can start to write some basic HTML element in the test code box, and see the good result. At that moment, I feel so motivated. Now, I am going to share my study note and thought with you. What is HTML? According to MDN,  HTML is a markup language used to tell your browser how to structure the web pages to visit. Image you are building a house, HTML is like your...