Web Development for Dummies

HTML Tutorial - Part 1- Web Development for Dummies

by
published on

In this tutorial, we will start off by covering the very basics of HTML. HTML is the most basic building block of the web and every website will need it. It is our first fundamental step in understanding how to build web applications. Later on we will learn other technologies such as CSS to style HTML and JavaScript to add functionality.Once we reach the Python and Django section of this series we will learn how to add django template tags to dynamically generate content based off a user's interaction with the website.

Your First HTML webpage

Let's start by exploring the basics of what an HTML file looks like and how we can open it in a browser.

Open any text editor an type the following code below:

<!DOCTYPE html>
<html>
<head>
 <title>My First Webpage</title>
</head>
<body>
<!-- This is an comment it won't be rendered -->
<p>Hello World!</p>
</body>
</html>

This is the skeleton code of an HTML file. Now let's walk through this and understand what's actually going on.

  • In this very first line we see <!DOCTYPE html> which will tell the browser that this is an HTML5 Document(Note: HTML 5 is the latest version of HTML and we will be learning it in this tutorial). 
  • The head section is going to contain all the meta data; for this part of the tutorial we are not going to use it much. We will using it when we learn CSS and JavaScript. The head section also contains title tag which defines the title of our webpage.
  • The body section contains the actual content that will be rendered on your browser's screen. For now we have just added Hello World within <p> tag which is used for creating a paragraph.
  • The text enclosed within <!--  and  --> is known as comment and it won't be rendered by your browser. We have added one comment in the above code for your understanding.

Now save the file as webpage.html and open it by double clicking the file. You will see something like this : 

Don't worry if you don't see Hello World! with larger font size as; we have zoomed in the image.

Note: Don't forget to save the file with .html extension

Headings and Paragraphs in HTML

<!DOCTYPE html>
<html>

<head>
 <title>Headings</title>
</head>
<body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
 <p>This is a paragraph</p>
</body>
</html>

In the above code we have defined six headings and one paragraph

  • <h1> to <h6> : H1 tag is used for largest heading size and H6 tag is used for smallest heading size. Such hierachy for heading sizes is followed:
    • h1 > h2 > h3 > h4 > h5 > h6
    • The text enclosed within heading tags will be bold.

  • <p> : <p> tag is used to define a paragraph in HTML.

The output of the above code will be

Text Effects in HTML

Various effects can be applied on text or content in HTML like Bold, Italics and Underline

<!DOCTYPE html>
<html>

<head>
 <title>Text Effects</title>
</head>
<body>

 <p><b>This text will be bold</b></p>
 <p><i>This text will be italics</i></p>
 <p><u>This text will be underlined</u></p>

 <!-- The same effect can be achieved with following tags -->
 <p><strong>This is bold</strong></p> <!-- bold effect -->
 <p><em>This is italics</em></p> <!-- underline effect --> 
 <!-- More effects -->
 <p>(a+b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup></p>
 <p>Water = H<sub>2</sub>O</p>
 <p><mark>This text is highlighted</mark></p>
</body>
</html>
  • Bold: Bold effect can be applied by <b> or <strong> tag.
  • Underline: Underline effect can be applied by <u> tag.
  • Italics: Italics can be applied by <i> or <em> tag.
  • <sup> tag is used to make superscript effect.
  • <sub> tag is used to make subscript effect.
  • <mark> tag is used to highlight the text.

Output of the above code will be: 

Lists in HTML

There are two types of lists in HTML ordered lists and unordered lists. Ordered lists are the lists which start from numbers and are in a sequential position. Unordered lists start from bullets and are not in a sequential position.

  • Ordered Lists: Ordered lists can be created with <ol> tag. To add list items to the lists <li> tag is used.

  • <html>
    <head>
        <title>Lists</title>
    </head>
    <body>
      <ol>
        <li>First item</li>
        <li>Second Item</li>
        <li>Third Item</li>
      </ol>
    </body>
    </html>
  • Output of the above code will be:
  • Unordered Lists: Unordered lists can be created with <ul> tag and <li> tag is used to add list items.
  • <html>
    <head>
        <title>Lists</title>
    </head>
    <body>
      <ul>
        <li>First item</li>
        <li>Second Item</li>
        <li>Third Item</li>
      </ul>
    </body>
    </html>
  • Output of the following code will be

HTML Attributes

Attributes allows us to add more information to HTML tags. They define how the element should interact like or look like. 

Syntax: <tag attribute="meta-data"></tag>

Common Attribute Examples:

  • src attibute in images: 
    • <img src="path.png">. Here in this tag src is the attribute which defines the source of the image from where it is displayed.
  • href attribute in links:
    • <a href="https://google.com">. In this anchor tag href is the attribute which contains the path to another html file or a url
  • style attribute in elements:
    • <p style="color: red;">. In this paragraph tag, style attribute is used to add CSS properties to the element.

To learn more about HTML attributes visit w3schools.com

Images and Hyperlinks in HTML

Images

Images can be also added to a HTML document by using the <img> tag. 

<!DOCTYPE html>
<html>
<head>
    <title>Images</title>
</head>
<body>
    <img src="./django.png"></img>
    <!-- Image path needs to be provided in src attribute -->
    <!-- If no image is found or the path is broken alt attribute
can be used to display alternate text instead of image-->
    <img src="./noimg.file" alt="Img not found"></img>
</body>
</html>

Output of the above code will be

Hyperlinks

Hyperlinks are used to reference an external HTML document or webpage. Hyperlinks can be added with <a> tag.

Example:

<a href="another-page.html">Click Me</a>
<a href="https://google.com">Open Google</a>
<a href="https://google.com" target="_blank">Click to open google in new tab.</a>

 Output:

That's all about this part. Stay tuned for next post in which you'll learn how to add tables and forms to your webpage.

 

Comments