A Guide to WEB-DEV for quite-the-noob by not-that-noob Part 2

TalionSlade December 30, 2020
If you have read the previous blog, I am pretty sure that you have quite the idea of what lies ahead of us. However, unwilling, boring or repetitive it may seem, HTML and CSS is the first "HELLO WORLD" to the journey through Web Dev.

 Well to ease the practice phase of HTML and CSS, we have brought forth an HTML cheat sheet. Not the most comprehensive and detailed one, but enough to get you started.


THE BASIC STRUCTURE



The entire page is enclosed within the opening and closing <HTML> tags. The entire page is divided into two halves:- the head and the body. The head section is meant for the metadata of the web page. Tags belonging to this section are:-
            
  • title:-  The title tag specifies the title for the page
  • link:- This tag is used to link external CSS.
  • meta:- defines the data in metadata
  • style:- used to add styling to the body elements via CSS
The body is quite expansive. It has a lot going on. Let's dive in. The <body> tag defines the document's body. The body tag includes various tags. To begin with, let's start with the heading tags. 


Next, we have some important HTML tags:-



Now we can move on to the use of <table> tag. The opening and closing table tags define the table. The <tr> tags describe each row of the table. The <th> indicates it to be a Header to a certain column while <td> is used to fill in data to the cell given.

A very important set of tags that we are yet to cover is lists. There are two types of lists:- Ordered and Unordered.


<div> and <section> tags are very useful once we start using CSS to beautify our webpage.


Now, head on to a very important topic, <input> tag. The <input> tag specifies an input field where the user can enter data. The <input> element can be displayed in several ways, depending on the type attribute:-
  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week

And, lastly, we have <form> tag. The <form> tag is used to create an HTML form for user input.

Here is a small example of the usage of the <form> tags with the others mentioned.
The output of what it looks like is.
I am pretty certain that you too understand that this is not just the output of the above. Yes, this is where CSS comes in. To know more or learn small tips and tricks on CSS, stay tuned.. and follow our blog posts.



0 Comments