How to develop your first webpage?Starting with HTML-1
#shareyourwork
In the previous blog, I talked about what is html, css and js.In this blog, I will start with creating our first webpage.The things I will be discussing is what software I am using, what OS I will be using and how to run our first webpage.
For running our html, css or js codes a notepad is enough.But, it is very difficult to write the codes in notepad.So, I will be using Visual Studio Code which is freely available and it is a very interactive software to use. I will show the difference.
 |
Now, to run our codes we need a server. There are two ways of doing this.
i)Using Xampp Server
ii)Using Live Server available in Visual Studio Code marketplace
 |
| Xampp Control Panel |
i)If you have Xampp Server downloaded, open it and start Apache Server.
 |
| Start Apache Server |
Here, in my system it is using localhost:8082(look at the port id). Check yours port id in your system.
 |
| Apache Server is using port id 8082 |
Now open Google Chrome and type localhost:8082(type port id of your system).
After hitting enter, you will get this screen.
It shows that the server is running.
Now open Visual Studio Code.
Go to File menu.
Select Open File.
Go to C drive and search for xampp folder.
Open it.
Go to htdocs folder, open it.
Create a new folder inside the htdocs folder named as Web Development or whatever you like it.
Now in Visual Studio Code Explorer, if you want the same side view as in the fig, again Go to File->Select Open Folder->Select C Drive->Select xampp folder->Select htdocs folder.Now, in Visual Studio Code check for web development folder and add a new file by clicking the + sign as shown in the fig. and name it as myfirst.html or whatever you like it. Again, add a new file by clicking the + sign and name it as myfirst.css. Add another new file by clicking the + sign and name it as myfirst.js.
And now you are ready to write your first HTML, CSS or JS code inside all these three files.
I thought of using HTML, CSS and JS codes altogether but I think it would be wiser to first learn a little bit of HTML and then apply CSS on HTML content and lastly link all the HTML, CSS and JS altogether.
Now, what I will be doing is discussing some of the HTML tags first, then write HTML codes and explain the tags along the way.I won't discuss each and every tag of HTML beacuse I won't be practicing each and every tag myself because of the reason I am going to share now.
So, when I was searching for web development video or lecture series to practice, I got a youtube channel 'CodeWithHarry' videos in my search results. And, the best thing he suggests in this video is when we are new to website development, we shouldn't try to learn a language completely and then switch to the next language.Instead, we should try to learn all the three languages simultaneously. This is the biggest mistake people do. I have done this too. Also, according to him, to develop a website we should learn HTML 80%, CSS 40-60% and JS 50-70%. I am going to follow his advice. Now, let's discuss some basic and mostly used tags of HTML.
1.<html>- What goes inside these tags is all html webpage.
2.<head>- This tag contains the compulsory title element, which represents the document’s title or name.
3.<title>- What we write inside this tag, shows in the title bar of the webpage. Here is an example.
4.<body>- Whatever we write inside this tag is shown as the contents of the webpage.
5.<p>- This tag is used inside <body> tag. A paragraph is written inside this tag.
6.<h1>,<h2>.....<h6>- Heading tags- These tags are used to write the headings of the webpage in different font sizes.<h1> is the largest font size and <h6> is the smallest size.
7.<br>-Line Break tag- This tag is used when we want to start the statement from a new line.
8.<b>, <i>, <u>,<sup>, <sub>,<strike>- These tags are used to make the content bold, italic, underlined, seperscript, subscript and strike through respectively.
9.<em>,<strong>- <em> tag is used to emphasize the text by italicising it.<strong> tag is used to make strong emphasis on the text by making it bold.
10.<ul> and <li>-These tags are used to create unordered lists. It just looks like a bulleted list.
11.<ol> and <li>-These tags are used to create ordered lists. In this we use roman numerals, letters or numbers to represent a list.
12.<dl>, <dt> and <dd>- These tags are used to create definition lists.It is a special kind of list for providing terms followed by a short text definition or description for them.The <dl>element contains alternating <dt> and <dd>elements.
13.<div> and <span>- These tags are used to group elements to create sections or subsections ofa page. It is used in combination with CSS to attach a particular style to a section or subsection.
14.<a>- A webpage is different from a page when it has links to other webpages. This tag is used to link to other webpage.
15.<img>- This tag is used when we want to insert an image into the webpage.It uses attributes 'src' to provide the source from where the image will be uploaded and 'alt' to provide the alternative text if in anycase image is not loaded.
16.<table>- This tag is used to create a table. align,bgcolor, border etc are some attributes which are deprecated(that still works but has been replaced and may not work in future) but are still used with the <table> tag. align is used to align the table to left, right or center of the page.bgcolor is used to set the background color of the table.border is used to give a border to the table.
17.<tr> and <td>- These tags are used inside the <table> tag.<tr> indicates the start of a row and inside <td> tag we write some content of the table.
18.<form>- This is a tag used to create a form which is similar to a paper form e.g. admission form. Forms have areas where we enter text,boxes to check (or tick), options to choose from, and so on.In webforms, these are known as form controls and these boxes are known as textboxes, checkboxes, radio buttons etc. respectively.
Now, let's return to Visual Studio Code and start writing HTML codes inside the file myfirst.html. Do it as shown in the fig. below.
Now, it's time to run our first webpage using HTML.
Right click on myfirst.html file inside Web Development folder and copy the path.
Open Google Chrome. Paste the path in search bar and you will get the results as shown in the fig.
Some of the tags are left in this blog. I will try and share those tags in the next blog.
Comments
Post a Comment