Secure Web Development using HTML/CSS
Welcome, you just found the right source to learn HTML. The blog covers the steps for constructing an HTML page with example codes, images & links. Whether you are a beginner looking to design a HTML page for the first time and an experienced player who wants to improve his coding skills, this content has been designed tailored to your unique web designing needs.
Our step-by step guide will help you to create your first web page within a few hours and learn how to add images and links to your page to make it visually appealing. Also, we will be sharing tips to avoid common mistakes that are usually done by experienced web developers.
What is HTML?
HTML or Hyper Text Programming Language is a web standard used to create pages and make them functional. The code that is used to make web page visually appealing is CSS but our focus here is to learn about HTML only. Two common elements of HTML are Tags and Attributes.
Tags are used to mark up the start of an element and it is usually enclosed on angle brackets. For example, <h1> </h1>. Most tags are closed to make them functional. At the same time, attributes are used to deliver extra piece of information.
An example is given below to better understand the concept.
Here “img” is a tag and src, alt are attributes giving extra information about the image tag. Make sure that tags are closed in the same order in which they were started.
HTML editors
Once you know about the HTML basics, it is the right time to discuss about HTML editors. We need the right tool to start with our first web page. there are plenty of options in the market and a few of them Notepad ++, Dreamweaver, KOMODO EDIT, etc.
Tip for Beginners and Advanced Users:
§ Don’t use any word processor or MS word to write HTML code. It would be great if you can choose some HTML editor or built-in Notepad can be the suitable option for the task.
§ Secondly, make sure to check the web page functionality on to different browsers. running your code on to one browser is bad designing practice and a common mistake made by advanced users too.
§ Keep in mind the front view of your code varies from browser to browser. So, use some common tags that will work for all browsers nicely.
Constructing your First Web page
Open the selected HTML editor and start writing your code. Here, you have to layout the page with different tags and attributes. Here are some elements for the basic construction of a web page.
§ <!DOCTYPE html>: This tag will specify the type of language you are going to use for the page. For example, if you are using HTML 5 then mention it here.
§ <html>: This tag gives the information from where you are going to start the HTML code
§ <head>: Here, metadata for the page is stored.
§ <body>: Here, the content of the page is aligned.
Let us try to understand these tags with the help of a quick diagram.
This is the way how an HTML page should be structured visually. Here, you can see <title> tag under the <head> tag. Here, we enter the page name that will appear at the top of web browser. Other common tag is <meta> tag where information about the document is stored and it is used for SEO purpose too where we can add keywords to make it search engine friendly. Here is one example how do we use title and meta tag for the web page.
Now, look at the <body> tag in the image. It is the portion where code has to be written. You can add paragraphs here or write a simple heading according to your wish. To add heading in HTML, these simple elements are used, <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. For important heading, you may choose <h1>, <h2> that you like the most and other heading elements can be used for sub-heading or less important text.
Let us check it out how it works? in your HTML editor, just type this simple line, and run into the default browser.
Aww, are you surprised? Yes, it is yours. Save the file with index.html name and HIT save. You are done with the first step. The discussion does not end here but there are plenty of interesting features that can be added the same way to make your web page simply beautiful and functional. These are:
<b>, <strong>, <i>, <em>, <mark>, <small>, <strike> , <u>, <ins>, <sub>, <sup>, etc.
Let us try them out!
Don’t forget to hit the save button every time you add new elements or making changes to the code. Also, refresh the browser to see the changes.
Moving ahead, let us see how to add links in HTML page.
Add LINKS to HTML
HTML coding is not complete with linking. At each site, you must have seen multiple links that either takes you to another site or they are linked with other pages of the same site. For this purpose, anchor tag is used to make a link. here is one example how anchor tags are used in HTML. In the first part, you have to add link and for the second part, you must give the description of link or text you want to display for the link. Add images to HTML
In the first part, you have to add link and for the second part, you must give the description of link or text you want to display for the link.
Add images to HTML
In the modern space, images are equally important as of links or other tags in HTML. Image tags has multiple attributes to set the dimensions of an image. Also, you can use an image as a link by adding anchor text to it. here is the basic format how image tag is used.
This is the way how to add images to your web page. Don’t afraid of playing with code while adding text, links, or images to check what’s new you can do with the web page to make it more attractive and functional.
All the Best!
