SMA

Technology Blog

Learn web design and development | Introduction to HTML / HTML5

Learn web design and development | Introduction to HTML / HTML5

What is HTML

Hyper Text Markup Language a.k.a HTML is a markup language used to define the structure of web content (web pages). HTML is not a programming language i,e. it can’t be used to build logic like computer programming languages do. HTML is a markup language that is used to define the structure of web content or web pages, this structure is defined with the help of elements or tags like paragraph, heading, list, link or image. These HTML tags are written in format of plain text file which is then rendered by a web browser (software application program used to display web pages or web content). HTML 5 is the current version of HTML, HTML5 was released in 2014 which replaced a very long lived (almost 14 years) HTML4.

Understanding Basic HTML Document

Let’s dive deep and understand the HTML with some practice examples, before we explore other powerful areas of HTML let’s first understand what HTML document is.

  1. Create a new folder (in location of your choosing, like desktop…) and call it learning-html.
  2. Create a new file named hello.html in folder learning-html.
  3. Open the newly created file hello.html in a text editor like Visual Studio Code.

NOTE You can install Visual Studio Code extension like Live Server for quick and easy verification of our html code in local environment. Please check following official docs to search, install and use extensions in Visual Studio code. Extension Marketplace / Increase the power of Visual Studio Code through Extensions.

Visual Studio Code extension like Live Server

Copy following contents in hello.html, don’t worry if you can’t understand it, I will explain each part of the code and structure in detail.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello WWW!</h1>
</body>
</html>

Save the document, and click on Go Live button (this will only be available if you have installed a live server extension in visual studio code as shown in image above). Clicking the Go Live button will open current html file hello.html in default browser of you computer as shown below. hello.html in default browser of you computer

Congrats, you have created your first web page, now let’s explore the ingredients of our first web page (hello.html).

<!DOCTYPE html>

Web browser (Chrome, Firefox, Safari, Edge) is used to render different type of contents including HTML web pages, images, audio and video. To check this simply launch any web browser on you computer and open a picture file (like jpg or png) this is normally done using File -> Open menu and the browser will show this picture inside it’s main content area. This procedure can also be used to open regular text files and we know HTML pages are also plain text file so how the browser will treat .html files differently? Here comes the <!DOCTYPE html>declaration, this declaration tells the browser to treat upcoming text content as HTML web page. !DOCTYPE declaration also informs the browser about specific HTML standard used in the HTML document and <!DOCTYPE html> is specific to HTML 5.

Understanding HTML Tags or elements

HTML tags are the elements used to structure and compose HTML pages. HTML tags are enclosed in <> (angle brackets) like <b>, there are two types of html tags i,e. with and without contents, the one with content begin with <> and end with </> e,g. <b> This is bold </b>. Let’s look at common syntax of a html tag.

Regular HTML Tags

<tagname> contents ...  </tagname>

In above example the tagname tag starts with <tagname> and ends with </tagname> with content in between.

Examples of Regular HTML Tags

<h1> This is Heading 1 </h1>

<h2> This is Heading 2 </h2>

<b> This is bold text </b>

Self Closing HTML Tags

<tagname />

In above example the tagname tag is a self closing html tag where /> denotes in-place closing of this tag.

Examples of Regular HTML Tags

<br /> is used to add a line break.

<img /> is used to add an image in web page.

<hr /> is used to add a horizontal rule in webpage.

Understanding Attributes in HTML tags

Attributes are used to define additional properties of HTML elements or tags. Attributes are normally defined as name="value" pair.

Examples of HTML Tags with attributes

Following example uses  src attribute to set image source of img tag.

<img src="image1.jpg" />

Now we have some understanding the key constituent i,e. HTML Tag so let’s explore the structure of our first html page mentioned above.

<html> </html> tag

html tag defines the HTML document, so anything that we want to represent or associate with our html web page needs to be enclosed in <html>...</html>tag.

Head section of the html document: <head> </head>

HTML document is primary divided in two main parts head and body, for simplicity you can say the head contains the information, references and hints for browser and body contains the information that is rendered by browser for user presentation.

Some of the elements enclosed in <head>...</head> section of HTML document are as following.

title: title tag is used to define the title of HTML web page. Title of the web page is displayed in the title bar of the browser.

meta: </meta>

meta tag is used to define metadata (information about data) of the web page. Specific metadata of the webpage like keywords, viewpoint, charset, description are defined using attribute (key / value pair) of <meta> tag. In the sample web page hello.html, we have declared charset and viewpointmetadata as following.

<meta charset="UTF-8"> : charset metadata is used to define the character-set encoding of the webpage, here we have defined UTF-8 (8-bit Unicode Transformation Format) as the character-set encoding of our webpage.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> : name="viewport" metadata is used to control dimensions of visible area of the web page. Visible area of web page can vary device to device (smaller for mobile and larger for computer screen). Using width=device-widthvalue for the content attribute we are guiding the target browser to respect the screen width of the device, so browser on a mobile device and computer will render the webpage according to width of respective device. The second value initial-scale=1.0 for the content attribute is used to set initial zoom levelwhen the page is loaded.

Body section of the html document: <body> </body>

The body tag contains the contents of HTML document, the content may include text, images, audio and video.

Example body section

<body>
    <h1>Hello Web!</h1>
    <p>
        This is a paragraph
    </p>
    <img src="/images/image1.jpg" alt="a beatutiful image" />
</body>

That’s it, hope you enjoyed it. You like this article, have any questions or suggestions please let us know in the comments section.

Thanks and Happy Learning!

This article is part of Web Design and Development series.

Prev post Introduction to Web Design - CSS and CSS3
Next post Hello Docker - Understanding Docker and Containers

Shoket Mahmood Ahmed

Related Posts

81 thoughts on “Learn web design and development | Introduction to HTML / HTML5”

  2. Hello, I was just taking a look at your site and submitted this message via your “contact us” form. The “contact us” page on your site sends you these messages via email which is why you’re reading my message at this moment correct? This is the holy grail with any kind of advertising, making people actually READ your advertisement and that’s exactly what I just accomplished with you! If you have an advertisement you would like to blast out to lots of websites via their contact forms in the U.S. or to any country worldwide let me know, I can even focus on your required niches and my costs are super low. Shoot me an email here: danielsamson9146@gmail.com

    report abuse here https://bit.ly/2xN75Pz

  3. Greetings, I was just taking a look at your site and submitted this message via your feedback form. The feedback page on your site sends you these messages to your email account which is the reason you are reading my message right now correct? That’s half the battle with any type of online ad, making people actually READ your ad and this is exactly what you’re doing now! If you have an advertisement you would like to blast out to lots of websites via their contact forms in the U.S. or to any country worldwide let me know, I can even target particular niches and my costs are super low. Write an email to: VillarrealKorbinq59329@gmail.com

  5. Have you heard that messages that come through on your website contact form are in effect a great way to get more sales for your online or offline business? How can we do it? Simple, we put together an ad for your online business and we submit it to hundreds of thousands website contact pages on any website and in any business category or area you need. Do these types of ads work? Well you’re reading this now aren’t you? The awesome thing is, this doesn’t cost more than a hundred bucks a month! Want more info? just send a quick message here: HardinJakobev58771@gmail.com

  13. Using chalk, sketch out the image of a ladder, then, starting at the bottom, step in and step out from each square until you have made it to the top. Jany Morey Edrei Dredi Dimitri Marjory

  14. Great review of this book Stewart. I read this at the end of 2009 and I still think about it, particularily the novella. Its one of those books that I almost didnt read because of the ripples of hype but I am so, so glad that I did. Remarkable book. Allene Hartwell Lowry

  15. Hey, I think your blog might be having browser compatibility issues. When I look at your blog in Safari, it looks fine but when opening in Internet Explorer, it has some overlapping. I just wanted to give you a quick heads up! Other then that, amazing blog! Julianne Saul Viridis

  16. An interesting discussion is definitely worth comment. I think that you need to write more on this subject matter, it may not be a taboo matter but usually people do not speak about these topics. To the next! All the best!! Lorita Brnaba Fabien

  17. I was excited to find this page. I need to to thank you for your time due to this wonderful read!! I definitely appreciated every little bit of it and i also have you book marked to look at new things on your blog. Aile Alphonso Chaffin

  18. I used some mcintosh apples I had on hand and upped the apple and carrot by 40g as suggested as a sub for the pineapple. They were amazing. We also sprinkled a little sugar in the raw on top along with the pepitas. Great success! Petrina Davis Gregorius

  20. May the Holy Spirit continue to inspire you who have been given the gift to put into words what many of us find to be truly a challenge. Thank you for sharing your gift with us so that that can share them with our parishioners. Tracey Husain Rafaelia

  30. whoah this blog is excellent i really like studying your posts. Stay up the good work! You realize, many people are hunting round for this information, you can help them greatly. Leela Nickola Kloman

  32. I not to mention my pals happened to be digesting the nice suggestions located on your web page then immediately developed a terrible feeling I never expressed respect to the website owner for those secrets. My women had been as a result stimulated to see them and have now undoubtedly been loving these things. I appreciate you for indeed being so accommodating and then for picking variety of fantastic areas most people are really desirous to be aware of. My personal sincere regret for not expressing gratitude to sooner. Kala Isacco Harald

  34. I am extremely impressed with your writing skills and also with the layout on your weblog. Is this a paid theme or did you customize it yourself? Either way keep up the nice quality writing, it is rare to see a nice blog like this one today.. Sada Gasparo Amil

  43. this is usually a outstanding internet site. I never undergone such good quality satisfied. My opportunity is fairly happy. I am to consider your internet site regurly as well as we imagine you modernize additional. We shall recommend my personal buddies for this place. The knowledge will likely be ideal for option living. I highly recommend these destination to everyone. I like viewing this a great deal. Thank you very much during just like high quality posts. Marigold Marten Torrey

  48. After looking over a few of the blog articles on your web page, I really appreciate your technique of blogging. I added it to my bookmark site list and will be checking back soon. Please visit my website too and let me know what you think. Melesa Ker Bastian

  50. Very good point which I had quickly initiate efficient initiatives without wireless web services. Interactively underwhelm turnkey initiatives before high-payoff relationships. Holisticly restore superior interfaces before flexible technology. Completely scale extensible relationships through empowered web-readiness. Lise Howie Mathew

  52. Its like you learn my mind! You seem to know so much approximately this, like you wrote the book in it or something. I believe that you can do with a few p.c. to pressure the message home a bit, however other than that, that is fantastic blog. An excellent read. I will certainly be back.| George Court Faythe

  57. My partner and I stumbled over here different website and thought I should check things out. I like what I see so i am just following you. Look forward to finding out about your web page yet again. Kikelia Ozzie Hulbard

  59. All in all very well thought out benefits, sounds like a great working environment! Just wondering, is there a particular reason you do the 4-days week only during summer? Have you considered doing Carol Ravid Baynebridge

  61. I like the valuable info you supply for your articles. I will bookmark your weblog and test again here regularly. I am quite sure I will learn plenty of new stuff proper right here! Good luck for the following! Shawna Leighton Wilonah

  65. we prefer to honor many other world-wide-web internet sites around the web, even if they arent linked to us, by linking to them. Beneath are some webpages really worth checking out Chantalle Zed Whiteley

  66. Having read this I believed it was extremely informative. I appreciate you taking the time and energy to put this informative article together. I once again find myself personally spending a significant amount of time both reading and commenting. But so what, it was still worthwhile! Vania Clerc Scheld

  69. Never seen those, they look cool! The 11mm drop is more than I can really tolerate these days, and going back decades the Salomon midsole shape has never really worked with my foot. Nice to see more tough, non-waterproof options. Elyn Alberik Alten

  74. I just could not depart your web site prior to suggesting that I really loved the usual information a person supply for your guests? Is gonna be again frequently to check up on new posts Rina Mannie Surovy

  75. Heya! I just wanted to ask if you ever have any problems with hackers?

    My last blog (wordpress) was hacked and I ended up losing many months
    of hard work due to no backup. Do you have any solutions to stop hackers?

Leave a Reply

Back to top