Connect with us

Introduction To Html 5 Tutorial

Web Design

Introduction To Html 5 Tutorial

Introduction To Html 5 Tutorial

In this html 5 tutorial I will be teaching you all you need to no about html that will get you started. I make it easy for you to follow working through each topic, before moving on to the CSS Beginner Tutorial.

HTML which stands for Hyper Text Makup Language, In website building HTML represent nothing more then the structure of the content the visual formatting or styling of the content done by Cascading Style Sheet (CSS). There are many approaches when it come to presenting HTML to the web but what you need to put in mind is to focus on the best practice from the outset and getting into the frame of mind of doing things the right way from the start will lead to much better results in the end.

HTML Text Editors

Any Text Editor will get the job done. you can use the text editor that comes with your system or download one from the web. below are some of the few web builder, some are for free and others are not, depending on what you want but if you re a windows user I will recommend Notepad++ because is for free and it’s well built to get the work done and if you are a Mac OS user the I recommend Brackets is also an open source which make it free and has a regular updates.

  • Notepad++
  • Atom
  • Brackets
  • Sublimetext
  • Vim
  • Emacs
  • Komodo Edit
  • Buffer Editor
  • Create a new folder on your system and name it html
  • Open your text editor and type,  “I am so happy to create my first website”
  • save the file in the html folder you created and name it index.html
  • Inside your html folder Double click to open the text file in your browser.

Basics Of HTML With Examples

HTML Structure And Elements

In Every HTML documents the <!DOCTYPE html>must be declared first. 

The HTML document itself begins with <html> and ends with </html>.

The <head> element is a container for metadata. The invisible part of the HTML document. 

The <title> element displays the title of the page in the browser bar.

The main content that is visible to the human eye goes in between<body> and </body>.

<!DOCTYPE html>
<html>
<head>
<title>introduction to HTML</title>
<meta charset="UTF-8">
</head>
<body>

<h1>Learning HTML</h1>

<p>The quick brown fox Jump the wall</p>

<a href="https://item13.com">homepage</a>

<img src="https://item13.com/wp-content/uploads/2018/08/Item13-new-logo-1.png" alt="item13 logo" width="100" height="50">

<button>Submit this form</button>

</body>
</html>

Copy the code above into your text editor and save it then refresh the webpage. 

Headings

You can declare HTML headings with the <h1> to <h6> tags. Heading are important for search engine optimization, it allows search engines to know where and what to search. users can also navigate through your page easily. <h1> defines the most important heading. <h6> defines the least important heading:

<h1>This Heading is H1</h1>
<h2>This Heading is H2</h2>
<h3>This Heading is H3</h3>
<h4>This Heading is H4</h4>
<h5>This Heading is H5</h5>
<h6>This Heading is H6</h6>

if you need a bigger headings than <h1> tag then use use this code <h1 style=”font-size:100px;”>This Heading is than H1</h1>, you can change the size to what ever number you want.

Note: The HTML <head></head> has nothing to do with headings

Copy the code above into your text editor and save it then refresh the webpage. 

Paragraphs

HTML paragraphs are declared with the <p> as the opening tag and </p> as the closing tag:

<p>This is an example of a paragraph</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English.</p>

With modern web browser paragraphs automatically adjust itself to the screen size especially when dealing with long text. With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code. The browser will remove any extra spaces and extra lines when the page is displayed: Always make sure the the paragraph is closed </p>

Copy the code above into your text editor and save it then refresh the webpage. 

Inline Styles

Inline styles of an HTML element, can be set using the style attribute. The HTML style attribute has the following syntax:

<tag style=”property:value;“>

Below example shows how inline styles can be use to change the background color of HTML element.

<p style=”background-color:green;”>This is an example of a heading has green background</p>

<p style=”background-color:gray; color:blue;”>This is an example of a heading has a text color of blue</p>

Inline styles are useful when you want to change a whole or part of an HTML element. there are some many style attribute to choose from.

Copy the codes above into your text editor and save it then refresh the webpage.

HTML Text Formating

If you have ever used photoshop or any text processing application you would how text formatting works, you can format your text by either making it Bold, Italic, change the color of the text and a lot more, lets, look at the examples below

  • <strong> – Important text </strong>
  • <i> – Italic text </i>
  • <em> – Emphasized text </em>
  • <mark> – Marked text </mark>
  • <small> – Small text </small>
  • <sub> – Subscript text </sub>
  • <sup> – Superscript text </sup>

Copy the codes above into your text editor and save it then refresh the webpage.

Block Quotes Element

The block quotes element is use to indicate a quote usually from external source, example of a block quote below

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English.

By Item13.com

<blockquote>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English.<cite>item13.com</cite></blockquote>

Copy the codes above into your text editor, save it then refresh the webpage.

Creating Hyperlinks

HTML links are declared with the <a> as the opening tag and </a> as the closing tag:

<a href=”destination url” ></a>

<a href=”destination url” >Links</a>

The destination of the link is declared by using href attribute (attributes provides more information about HTML elements)

Example of a Link – <a href=”https://item13.com”>Item13.com</a>

you can also set colors for your links using the style attribute by declaring it inside the <head></head> 

<style>
a:link {
    color: green; 
    background-color: transparent; 
    text-decoration: none;
}

a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}

a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
</style>

You can also set the target attribute for the link either to open in the same window or in a new window.

<a href=”https://item13.com” target=”blank”>Item13.com</a>

<a href=”https://item13.com” target=”top”>Item13.com</a>

Copy the codes above into your text editor, save it then refresh the webpage.

Adding Images To Your HTML

Images can add a lot of difference to your website, before adding images to your HTM you need to declare the image attribute <img> tag which has no closing tag:

<img src=”image link”>

<img src=”item13.com” alt=”item13-logo” width=”200px” Height =”50px”>

The source file (src), alternative text (alt)width, and height are provided as attributes:

Adding Ordered And Unordered List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default: examples of ordered and unordered list.

Example of Ordered List

  1. School
  2. Hospital
  3. Markets
<ol>
<li>School</li>
<li>Hospital</li>
<li>Markets</li>
</ol>

You can also choose to style ordered list with this style attributes

Type 1 
<ol style="list-style-type:1">
<li>School</li>
<li>Hospital</li>
<li>Markets</li>
</ol>

Type A 
<ol style="list-style-type:A">
<li>School</li>
<li>Hospital</li>
<li>Markets</li>
</ol>

Type a 
<ol style="list-style-type:a">
<li>School</li>
<li>Hospital</li>
<li>Markets</li>
</ol>

Type I 
<ol style="list-style-type:I">
<li>School</li>
<li>Hospital</li>
<li>Markets</li>
</ol>

Type i 
<ol style="list-style-type:i">
<li>School</li>
<li>Hospital</li>
<li>Markets</li>
</ol>

Example of Unordered List

  • School
  • Hospital
  • Markets
<ul>
  <li>School</li>
  <li>Hospital</li>
  <li>Markets</li>
</ul>

You can also choose to style unordered list with this style attributes

The disc Style
<ul style="list-style-type:disc">
  <li>School</li>
  <li>Hospital</li>
  <li>Markets</li>
</ul>

The circle Style
<ul style="list-style-circle">
  <li>School</li>
  <li>Hospital</li>
  <li>Markets</li>
</ul>

The square Style
<ul style="list-style-type:square">
  <li>School</li>
  <li>Hospital</li>
  <li>Markets</li>
</ul>

The none Style
<ul style="list-style-type:none">
  <li>School</li>
  <li>Hospital</li>
  <li>Markets</li>
</ul>


Thanks for going through this tutorial to the end I believe it has helped you understand the basic concepts of HTML and I will advice you to keep practicing and in no time you will be perfect.

If you like this tutorial please don't go without sharing and please drop you comments below let me know how helpful this tutorial has been to you.

Alexander Sowah is a Web Developer/Designer, Social Media Strategist, Video Editor and Animator. For any Of This Services Call Call/WhatsApp: +233244033014

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

More in Web Design

Advertisement

Trending

Advertisement
To Top