[Count: 2]

This is a quick HTML guide for absolute beginners.

HTML is used to define web page architecture. The browser understands the HTML tags e.g. head, body, h1, IMG, etc., parse them and show us the output.Following are some HTML tags with examples:Mostly HTML has two main sections, the head, and body. Following is an example of how to write it:

<html>
    <head>
    </head>
    <body>
    </body>
</html>

Where html, head and body are HTML elements that are defined through the start and end tags e.g. <html> ... </html>. The elements may have attributes (properties).

The title element is used to define the page title:

<title> Fullstack Hub! </title>

You can define different headings like the following:

<h1> Heading 1 <h1>
<h2> Heading 2 <h2>
<h3> Heading 3 <h3>
<h4> Heading 4 <h4>
<h5> Heading 5 <h5>
<h6> Heading 6 <h6>

Following is how you write the paragraph:

<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an 
unknown printer took a galley of type and scrambled it to make a type specimen book. It 
has survived not only five centuries, but also the leap into electronic typesetting, 
remaining essentially unchanged. It was popularised in the 1960s with the release of 
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
software like Aldus PageMaker including versions of Lorem Ipsum. </p>

Add the image in HTML like the following:

<img src ="https://media.edutopia.org/styles/responsive_2880px_original/s3/masters/d7_images/sutherland-inset4-ugcflex_0.jpg" >

Create the HTML table like the following, where tr is table row and td is table data (column):

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
</table>

There are two lists in HTML, ordered (1,2,3,4,…) and unordered list e.g. bullet list:

<!-- ul stands for unordered list whereas li is a list item --> 
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>


<!-- ol stands for orderedlist whereas li is a list item --> 
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Following is how you add the links in HTML:

<!-- a is an anchor tag, href stands for hypertext reference that is an attribute (property of a(anchor) tag -->

<a href="https://fullstackhub.io">Visit fullstack Hub!</a>

We can also specify the inline style to HTML elements like the following:

<div style="padding:20px" > I have some content</div>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

This is how you make HTML text bold, italic and underline:

<b> I am bold text </b>
<i> I am italic text </i>
<u> I am underlined text </u>

Fullstack Hub Blog!

More Than Just Hello World!

Quick HTML Guide

Yaseer Mumtaz

Leave a Reply Cancel reply

Share Blog

Subscribe to Fullstack Hub

Recent Articles

Categories

Archives

Send a Quick Message!