Learn to Code HTML and CSS👨‍💻

Basics of Web Development

9 min readFeb 23, 2021

Hello Everyone!!!

This is my first article in Medium. Today I am going to talk about Basics of Web Development. If you are a beginner in web development, you will be amazed at how websites are created and how they interact with users. Creating a professional website is not an easy task for beginners. You need to learn HTML and CSS as the first step on your path to creating a website. This is the best guide, you can learn to code HTML and CSS..

Let’s start our journey..

What is a website?

First you need to get an idea about what is a website before learning HTML and CSS.

A website is a collection of linked web pages (plus their associated resources) that share a unique domain name.

A web page is a document which can be displayed in a web browser such as Firefox, Google Chrome, Opera, Microsoft Internet Explorer or Edge, or Apple’s Safari.

A web page can embed a variety of different types of resources such as

Media- text, images, sounds, and videos.
Style information- controlling a page’s appearance
Scripts- which add interactivity to the page

Each web page of a given website provides explicit links, most of the time in the form of clickable portion of text, that allow the user to move from one page of the website to another. To access a website, type its domain name in your browser’s address bar, and the browser will display the website’s main web page, or homepage.

Now you know what a website is..
But.. what is HTML and CSS?🤔

What is HTML?

HTML stands for Hypertext Markup Language. It is the standard markup language for web pages that define the structure of the content. HTML allows users to create and structure sections, headings, links, paragraphs, and more, on a website using various tags and elements. Almost everything you want to create on a web page can be done using a specific HTML code. HTML is not a programming language, it doesn’t have the ability to create dynamic functionality. Instead, it makes it possible to organize and format documents.

What is CSS?

CSS stands for Cascading Style Sheets.CSS is a design language we use to style an HTML document. CSS was designed to enable the separation of presentation and content. CSS is responsible for controlling the appearance of the web page. It describes how HTML elements are to be displayed on screen.

For an Example, HTML acts as the bones of the human body while CSS acts as the skin.

Don’t be upset if you can’t understand these things now, surely you will understand these things clearly as you go further in this article.

Let’s learn HTML and CSS one by one..

Part I
HTML: Building the Bones of a Website

HTML is responsible for creating the structure of a web page. You can recognize an HTML Document with its extension. HTML documents ends with .html extension. You can view a HTML page by any web browser. Browser reads the HTML document and renders its content.

Let’s start to code with HTML

First you have to install a text editor for your PC for coding. You can install a text editor like Sublime text, Atom or Visual Studio Code. It is easier to code with these editors since they have more features.

To start coding, you have to create a file with .html extension and open it with your text editor.

HTML elements

HTML document is consists of set of HTML elements. An HTML element is defined by a start tag, some content, and an end tag.

<tag_name>content</tag_name>

Parts of a HTML element

The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins to take effect .
The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends.
The content: This is the content of the element, which in this case, is just text.
The element: The opening tag, the closing tag, and the content together comprise the element.

HTML Document

Sample HTML Page

All HTML documents must start with a document type declaration.

<!DOCTYPE html>

The declaration represent the browser the type of the document and then browser can display the web pages correctly. The document type declaration must appear at the top of the document.

The HTML document itself begins with <html>and ends with </html>.The <html>element is the root element of an html page.
<head>element contains meta information about the web page such as a description of site content, name of the web page, linked style sheets.
<title>element specifies a title for the HTML page.
<body>element contains all the information that are visible to users.

Nested elements

HTML elements can contain other HTML elements. Those are called nested elements.

In the above sample HTML page, inside the <html>element there is <body> element. So that is nested. Inside the <body>element there are two other elements, <p>and <h1>.So they are also nested elements.

Empty elements

Some elements have no content and they are called empty elements.

<br>, <link>, <img>, <hr>, <meta>, <source>are some of empty elements.

<!DOCTYPE html>
<html><head>
   <title>Page Tittle</title>
</head><body>
   <p>This is a<br>line break</p>
   <img src="img_rose.jpg">
</body></html>

output of the code

In the above code <br>element and <img>element are empty elements.

HTML Attributes

All the HTML elements can have the attributes. Attributes are defined inside the start tag. Attributes provides the additional information about the HTML element.

you have to define attributes in name/value pairs as name=”value”

<img src="img_car.jpg" alt="A picture of a car">
<img src="img_car.jpg" width="400px" height="400px">
<p style="color:red"> This is a red paragraph</p>

Now let’s move into HTML elements one by one..

HTML Headings

A HTML heading or HTML <h>tag can be defined as a title or a subtitle which you want to display on the webpage. When you place the text within the heading tags , it is displayed on the browser in the bold format and size of the text depends on the number of heading.

There are six different HTML headings which are defined with the <h1>to <h6>tags, from highest level h1 (main heading) to the least level h6 (least important heading).

h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important heading and h6 is used for least important.

<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></body>

output of the code

HTML Paragraphs

HTML paragraph or HTML <p>tag is used to define a paragraph in a webpage. An HTML <p>tag indicates starting of new paragraph. Browsers itself add an empty line before and after a paragraph.

<body>
   
   <h1>The p element</h1>
   <p>This is a paragraph</p>
   <p>This is a paragraph</p>
   <p>This is a paragraph</p></body>

output of the code

HTML Lists

HTML Lists are used to specify lists of information. Mainly there are two types of lists in HTML.
1.ordered lists
2.unorderd lists

In the ordered HTML lists, all the list items are marked with numbers by default. The ordered list starts with <ol>tag and the list items start with <li>tag.

In Unordered HTML list, all the list items are marked with bullets. The Unordered list starts with <ul>tag and list items start with the <li>tag.

<body>
   <h2>An Unordered HTML List</h2>   <ul>
      <li>First Item</li>
      <li>Second Item</li>
      <li>Third Item</li>
   </ul>   <h2>An Ordered HTML List</h2>   <ol>
      <li>First Item</li>
      <li>Second Item</li>
      <li>Third Item</li>
   </ol></body>

output of the code

HTML Tables

HTML table tag is used to display data in tabular form. There can be many columns in a row.

We can create a table to display data in tabular form, using <table>element, with the help of <tr>, <td>, and <th>elements.

In Each table, table row is defined by <tr>tag, table header is defined by <th>, and table data is defined by <td>tags.

<body>
   <h2>Basic HTML Table</h2>   <table>
     <tr>
       <th>Employee No</th>
       <th>Employee Name</th> 
       <th>Salary</th>
     </tr>
     <tr>
       <td>01</td>
       <td>Smith</td>
       <td>$50</td>
     </tr>
     <tr>
       <td>02</td>
       <td>Jackson</td>
       <td>$60</td>
     </tr>
     <tr>
       <td>03</td>
       <td>Doe</td>
       <td>$80</td>
     </tr>
   </table>
<body>

output of the code

HTML Forms

HTML forms are used to collect data from the users such as name, email address , country, password, phone number etc. You can create a HTML form using <form>element, with the help of <label>and <input>elements.

An <input> element can be displayed in many ways, depending on the type attribute. type attribute can have different values such as text, password, email, submit depending on the input type that user have to enter. The name attribute defines the name of an input element and if the name attribute is omitted, the value of the input field will not be sent to the database.

A <label>element defines a label for an input element that is visible to users.
The <label>element has for attribute and it should be same as the id attribute of <input>element.

<body>   <h2>HTML Forms</h2>   <form>
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname"><br>
      <label for="lname">Last name:</label><br>
      <input type="text" id="lname" name="lname"><br>
      <label for="email">Email:</label><br>
      <input type="email" id="email" name="email"><br><br>      <input type="submit" value="Submit">
   </form><body>

output of the code

HTML Images

The <img>element is used to link an image to a web page. <img>element is an empty element. It contains only attributes. <img>element creates a holding space for the referenced image.

src and alt are the attributes commonly used inside the <img>element. src attribute specifies the path to the image and alt attribute specifies an alternate text for the image.

<body>
   
   <h2>HTML Images</h2>
   <img src="lamborghini.jpg" alt="Lamborghini Gallardo"></body>

output of the code

You can change the image size using width and height attributes inside the <img>element.

HTML Links

HTML links are hyper links. Hyper links are used to move from one document to another. A link can be a text, image or any other HTML element. The HTML <a> tag defines a hyperlink.

href is the most important attribute of <a>element and it indicates the destination of the link. The link text is the part that will be visible to the reader.

The target attribute specifies where to open the linked document. Target attribute can have on of the following values.

_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window

<body>   <h2>HTML anchor tag</h2>
   <a href="https://summerofcode.withgoogle.com/" target="_blank"> Google Summer Of Code</a></body>

output of the code

when you click on the link the home page of google summer of code opens in a new tab.

If you want to use an image as a link, you have to use <img>element inside the <a>element.

HTML Formatting elements

HTML formatting elements are used to display special types of text.

These are the formatting elements used in HTML.

<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text

<body>
   <p>This is a normal text.</p>
   <p><b>This is a bold text.</b></p>
   <p><strong>This is in italics.</strong></p>
   <p><i>This is in italics.</i></p>
   <p><em>This text is emphasized.</em></p>
   <p><mark>This text is marked.</mark></p>
   <p><small>This is in italics.</small></p>
   <p><del>This is a deleted text.</del></p>
   <p><ins>This is in italics.</ins></p>
   <p>This is a<sub>superscript text</sub></p>
   <p>This is a<sup>superscript text</sup></p></body>

output of the code

That’s all about HTML..

I think now you know what HTML is and how to code HTML. I highly encourage you to start small. Try to create the structure of your own website using HTML…

So if you think my article is important, please give me a clap and leave a comment…Let’s meet with CSS in the next article.😉

Learn to Code HTML and CSS👨‍💻

Basics of Web Development

What is a website?

What is HTML?

What is CSS?

Part IHTML: Building the Bones of a Website

Written by Prabhashi Wijesinghe

Part I
HTML: Building the Bones of a Website