Open in app

Sign in

Write

Sign in

Web Development with HTML and CSS

Let’s learn HTML and CSS👩‍🎓👨‍🎓

Nipuni Madanayake

--

Hello everyone! We are going to learn about web development. HTML, CSS, and JavaScript are the three main topics when we are talking about web development. By using JavaScript you will be able to build a fully functional web application. But today we are not going to discuss JavaScript. Today we will learn how to develop web pages with HTML and CSS. In the end you will be able to implement your own webpage.

Let’s Start with HTML👌

HTML stands for Hypertext Markup Language. HTML is a markup language for creating web pages. It creates the main structure of the webpage. It’s the main file type that is loaded in your browser when you look at a website. Tim Berners-Lee is the founder of HTML. We can add paragraphs, headings, lists, tables, images to the website using HTML.

HTML elements

HTML consists of a series of elements. Element is defined by a starting tag, closing tag, and content in between those tags.

<p>This is a paragraph.</p>

Structure of an HTML document

As the first step, we should add the document type declaration to the HTML code. Document type declaration tells the browser about the markup language in which the current page is written. It helps the browser to display web pages correctly.

<!DOCTYPE html>

HTML document begins with <html> tag and ends with </html> tag.
We include internal CSS inside the<head> element. The content inside the <title> element is shown in the browser’s title bar. The Visible part of the HTML document is written inside the <body> tag.

Nested elements

Elements can contain inside another element. Those are called nested elements.

Empty elements

Elements that don’t have content is called empty elements.
Ex:
<br>- defines a line break
<hr>- defines a horizontal line
<img>- use to embed an image
<input>- specifies an input field where the user can enter data
<link>-use to link current document with an external resource.
<meta> -defines metadata about an HTML document.

<!DOCTYPE html>
<html><head>
 <title>My first Webpage</title>
</head><body>
  <h1>Sample Document</h1>
  <p>This is a paragraph. <br>This line prints in a new line.</p>
  <hr>
  <img src="image.jpg" alt="flower">
</body></html>

Output of the code:

Attributes in HTML

We use HTML attributes to provide additional information about elements. Attributes are always specified in the start tag.

The format of an attribute is: name=“value”

<img src="image.jpg" alt="a girl">

src, alt, href, style, title, width, height are some of the attributes.

HTML formatting

HTML contains several elements for defining text with a special meaning.

  • <b> - Bold text
  • <i> - Italic text
  • <strong> - Important text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <del> - Deleted text
  • <small> - Smaller text
  • <ins> - Inserted text
  • <sup> - Superscript text
  • <sub> - Subscript text
<!DOCTYPE html>
<html><head>
 <title>My first Webpage</title>
</head><body>
 <p>This is a normal text.</p>
 <p><b>This is a bold text.</b></p>
 <p><i>This is in italics.</i></p>
 <p><em>This text is emphasized.</em></p>
 <p><strong>This is an important text.</strong></p>
 <p><mark>This text is marked.</mark></p>
 <p><del>This is a deleted text.</del></p>
 <p>This is a<sup>superscript text</sup></p>
</body></html>

Output of the code:

Headings in HTML

We can add many headings which are in several levels such as main headings, and subheadings. In HTML, there are 6 heading levels.

<!DOCTYPE html>
<html><head>
 <title>My first Webpage</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>
</body></html>

Output of the code:

<h1> Defines the most important heading. <h6> Defines the least important heading. We can customize headings using CSS.

Paragraphs in HTML

We use <p> tag to include paragraphs to an HTML document. Browsers automatically add a blank line before and after a <p> tag.

<!DOCTYPE html>
<html><head>
 <title>My first Webpage</title>
</head><body> <p>This is 1st paragraph</p>
 <p>This is 2nd paragraph</p>
 <p>This is 3rd paragraph</p></body></html>

Output of the code:

Links in HTML

We can add hyperlinks to our webpage using <a> tag. These links allow us to link HTML documents together. Also, we can link any other resources such as other webpages, documents, videos, images to our website. We use href attribute to add URL.

<a href="url">text</a>

Ex:

<!DOCTYPE html>
<html><head>
 <title>My first Webpage</title>
</head><body>
 <h1>Links in HTML</h1>
 <p><a href="www.wikipedia.com">Text with link</a></p></body></html>

Output of the code:

The linked webpages will display in the current browser window. We can use target attribute to change this.

  • _blank - Opens the document in a new window or tab
  • _self - Default. Opens the document in the same window/tab as it was clicked
  • _top - Opens the document in the full body of the window
  • _parent - Opens the document in the parent frame
<a href="www.wikipedia.com" target="_blank"> Wikipedia</a>

Images in HTML

We use <img>tag to embed images to a webpage. This is an empty tag, which doesn’t have a closing tag. There are two required attributes in a <img> tag.

  • src- specify the path to the image
  • alt- shows an alternative text if the image can’t be displayed

Also, we can use width and height attributes or style attribute to specify width and height of the image.

<img src="image.jpg" alt="alternative text" width="100px" height="150px">OR<img src="image.jpg" alt="alternative text" style="width: 100px; height: 150px">

Example:

<html>
<head>
 <title>My first Webpage</title>
</head><body>
  <h2>Images</h2>
  <img src="image2.jpg" alt="smurfs" width="200px;">
</body></html>

Output of the code:

Tables in HTML

<table> tag defines a table. Inside the <table> tag we use <tr>,<th>,<td> to create a table.

  • Each table raw is defined with <tr> tag.
  • Each table header is defined with <th> tag. By default, the text inside the <th> elements are bold and centered.
  • Each table data is defined with <td> tag.
<!DOCTYPE html>
<html><head>
 <title>My first Webpage</title>
</head><body>
 <h3>Table</h3>
 <table>
  <tr>
   <th>Index Number</th>
   <th>Student Name</th>
   <th>Age</th>
  </tr>
  
  <tr>
   <td>100</td>
   <td>Kamal</td>
   <td>22</td>
  </tr>
  <tr>
   <td>102</td>
   <td>Seetha</td>
   <td>23</td>
  </tr>
 </table></body>
</html>

Output of the code:

Designed by freepik

Lists in HTML

There are two types of lists in HTML. They are ordered lists and unordered lists.

Ordered lists

Ordered lists starts with the <ol> tag. Inside the <ol> element we use <li> tag to define list items. The items will be marked with numbers in ordered lists.

<!DOCTYPE html>
<html><head>
 <title>My first Webpage</title>
</head><body>
 <h3>Ordered lists</h3>
 <ol>
  <li>Rose</li>
  <li>Sunflower</li>
  <li>Jasmine</li>
 </ol></body>
</html>

Output of the code:

Unordered lists

Unordered lists starts with the <ul> tag. Inside the <ul> element we use <li> tag to define list items. The items will be marked with bullets in ordered lists.

<!DOCTYPE html>
<html><head>
 <title>My first Webpage</title>
</head><body>
 <h3>Unordered lists</h3>
 <ul>
  <li>Rose</li>
  <li>Sunflower</li>
  <li>Jasmine</li>
 </ul></body>
</html>

Output of the code:

Forms in HTML

<form> element is used to create a form. There are different types of input elements inside the <form> element.

<input> element is used to take inputs from the user. We use type attribute to display <input> element in different ways.
Values for the type attribute can be text, password, email, submit, button etc.

Also, <input> element should have a name attribute. If the name attribute is omitted, the value of the input field will not be sent at all.

<form>
   <input type="text" name="fname">
</form>

The <label> tag defines a label for form elements. It is visible to the user. Then users will read out loud the label when they focus on the input element.

We use id attribute for <input> element and for attribute for <label>
to bind them together. So, values of id and for attributes should be equal.

<!DOCTYPE html>
<html><head>
 <title>My first Webpage</title>
</head><body>
 <form>
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name"><br>
    <label for="age">Age:</label><br>
    <input type="number" id="age" name="age"><br>
    <label for="email">Email:</label><br>
    <input type="email" id="email" name="email"><br><br>
    <input type="submit" value="submit">
 </form>
</body></html>

Output of the code:

We have reached the end of this article. I hope you learned the basics of HTML very well. Let’s continue CSS in the next blog.

Please leave a comment and give me a clap if you think this article fulfilled your requirements and helped you to learn HTML.

Thanks for reading! 😊

--

--

Nipuni Madanayake

Written by Nipuni Madanayake

24 Followers

Undergraduate of University of Moratuwa, Faculty of Information Technology.