HTML Tutorial : Introduction for beginners (Basic)

CtechF - HTML 5 tutorial Introduction

What is HTML?

HTML (HyperText Markup Language) is developed by Tim Berners-Lee . An HTML document which can be displayed through a web browser is called a web page. HTML is not a computer language it’s a markup language.

Check this – Top 20 Programming Languages

Basic HTML Structure.

An HTML document consists of two parts. It’s <head> and <body>

<html>
	<head>
		<!-- Header contents -->
	<head>
	<body>
		<!-- All Contents goes here -->
	</body>
</html>

HTML Attributes

attributes have additional information about a tag. every tag have specific attributes

attribute name = “Value


HTML Tags

<tag name> Contents </tag name>

Heading Tag – <h1> to <h6>

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

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph tag – <p>

<p> CtehF HTML Tutorial </p>

CtehF HTML Tutorial


Text Formatting

Break Tag – <br>

<p> CtehF <br> HTML <br> Tutorial </p>

CtehF
HTML
Tutorial

Bold – <b>

<p> This is a normal Paragraph with <b> Bold text </b> </p>

This is a normal Paragraph with Bold text

Italic – <i> or <em>

<p> This is a normal Paragraph with <i> Italic text </i> </p>
<p> This is a normal Paragraph with <em> Italic text </i> </em>

This is a normal Paragraph with Italic text

This is a normal Paragraph with Italic text

Highlight – <mark>

<p> This is a normal Paragraph with <mark> Highlight text </mark> </p>

This is a normal Paragraph with Highlight text

Strikethrough – <del>

<p> This is a normal Paragraph with <del> Strikethrough text </del> </p>

This is a normal Paragraph with Strikethrough text

Underline – <u>

<p> This is a normal Paragraph with <u> Underline text </u> </p>

This is a normal Paragraph with Underline text

Subscript – <sub>

<p> This is a normal paragraph with <sub> Subscript text </sub> </p>
<p> O <sub> 2 </sub> </p>
<p> H <sub> 2 </sub> </p>

This is a normal paragraph with Subscript text

O 2

H 2

Superscript – <sup>

<p> This is a normal paragraph with <sup> Superscript text </sup> </p>
<p> 5 <sup> 2 </sup> </p>
<p> X <sup> 2 </sup> </p>

This is a normal paragraph with Superscript text

X 2

5 2

Blockquote – <blockquote>

<p> CtechF Website </p>
<blockquote> Confession of Tech Freakz </blockquote>

CtechF Website

Technology and Tutorial Blog

Small Text – <small>

<p> This is a normal paragraph with <small> Small text </small> </p>

This is a normal paragraph with Small text

Big Text – <big>

<p> This is a normal paragraph with <big> Big text </big> </p>

This is a normal paragraph with Big text

Address – <address>

<address>
Contact me: admin@ctechf@gmail.com <br/>
<br/>
Postal Address:
No 125, CtechF,
Test Address
</address>

Contact me: admin@ctechf@gmail.com

Postal Address: No 125, CtechF, Test Address

Center – <center>

<center><p>Center text</p><center>

Center text

Pre – <pre>

<pre>
..

Hello
Welcome to My Blog

..
pre>

..

Hello
Welcome to My Blog

..



Horizontal lines - <hr>

<hr/>


Tooltips (Hover the mouse on the "HTML") - <abbr>

<p>This is an <abbr title="HyperText Markup Language">HTML</abbr> Tutorial</p>

This is an HTML Tutorial


Inserting lists <li>

Unordered list - <ul>

Unordered list Types - disc, square, circle

<ul type= "disc">
	<li>Python</li>
	<li>Java</li>
	<li>HTML</li>
	<li>CSS</li>
</ul>

  • Python
  • Java
  • HTML
  • CSS

Ordered list - <ol>

Oedered list types -

  • ‘1’ - Hindu Arabic numbers (1, 2, 3, ….)
  • ‘A’ - English capital letters (A, B, C, D, ….)
  • ‘a’ - English simple letters (a, b, c, d, ….)
  • ‘i’ - Roman numbers (i, ii, iii, iv, …)
  • ‘I’ - Roman numbers (I, II, III, IV, V, …)
<ol type= "1">
	<li>Python</li>
	<li>Java</li>
	<li>HTML</li>
	<li>CSS</li>
</ol>

  1. Python
  2. Java
  3. HTML
  4. CSS

Description/definition list - <dl> and <dt>

<dl>
	<dt> What is HTML? </dt>
	<dd> HTML is a Markup Language. </dd>

	<dt>  What is Java? </dt>
	<dd> Java is a Open-source Programming Language </dd>
</dl>

What is HTML?
HTML is a Markup Language.
What is Java?
Java is a Open-source Programming Language


Inserting a hyperlinks <a>

<a href = "https://ctechf.com" target=_blank> (ctechf.com - _blank) - Click here </a>

Hyperlinks Attributes:

  • target
    • _blank - Open as a new tab or window.
    • _parent -
    • _self (default) - Open as a same tab or window.
    • _top -

Inserting a table <table>

<table border=2>
<caption> Country Table </caption>
<tr>
	<th>#ID</th>
	<th>Country Name</th>
	<th>Code</th>
</tr>
<tr>
	<td>1</td>
	<td>United State America</td>
	<td>USA</td>
</tr>
<tr>
	<td>2</td>
	<td>United Kingdom</td>
	<td>UK</td>
</tr>
<tr>
	<td>3</td>
	<td>China</td>
	<td>CH</td>
</tr>
</table>

Country Table
#ID Country Name Code
1 United State America USA
2 United Kingdom UK
3 China CH


Inserting an Images <img>

<img src="img/html.png/" alt="Image" width=750 height=422/>
CtechF - HTML 5 tutorial Introduction
CtechF - HTML 5 tutorial Introduction

Image Attributes:

  • src - Image path
  • alt - alternative text ( if the image given src attribute is not available in the text, that should be displayed image position indicated here.)
  • width - The width of the image
  • height - The height of the image
  • align - A suitable alignment value can be used among (left, right, top, bottom or middle)
  • border

Creating a Form - <form>

Text Field

<form>
  First Name: <input type="text" name="fname"/>
<br>
  Last Name: <input type="text" name="lname"/>
</form>

First Name:
Last Name:

Email

<form>
  Emails: <input type="email" name="email"/>
</form>

Emails:

Only support like example@domain.com

Text Area

<form>
  <textarea name="msg"> </textarea>
</form>

Text Area Attributes:

  • rows - For the visible height
  • cols - For the visible width

Buttons

<form>
  <input type="button" name="ctechf" value="Button"/>
<br><br>
<input type="submit" name="ctechf" value="Submit Button"/>
<br><br>
<input type="reset" name="ctechf" value="Reset Button"/>
</form>





Notice

submit - For the submit forms

reset - For the clear all inputs data (for the reset form)


Radio buttons

<form>
  <input type="radio" name="gender" value="Male"/> Male
<br>
 <input type="radio" name="gender" value="Female"/> Female
</form>
Male
Female

Checkbox

<form>
  <input type="checkbox" name="us" value="United State"/> United State
<br>
<input type="checkbox" name="uk" value="United Kingdom"/> United Kingdom
</form>
United State
United Kingdom

Combobox

<form>
  <select name="country">
    <option> United State </option>
    <option> United Kingdom </option>
  </select>
</form>

Input list

<form>
 <input list="prolang" name="prolang">
 <datalist id="prolang">
  <option value="Python"></option>
  <option value="Java"></option>
  <option value="C"></option>
  <option value="C++"></option>
  <option value="PHP"></option>
 </datalist>
<br>
</form>

Password

<form>
  Password: <input type="password" name="password"/>
</form>
Password:

Input Color

<form>
  Select a color: <input type="color" name="cocolor">
</form>
Select a color:

Hidden Input fields

<form>
  <input type="hidden" />
</form>

Date

<form>
  Date: <input type="date" name="date"/>
</form>

Date:

Time

<form>
  Time: <input type="time" name="time">
</form>

Time:

NoValidate Form

<form novalidate>
 ..
</form>

..

This forms not validating it's values (like email, maxlegth, required)


Complete Example Form

<form>
 ID: <input type="text"  name="id" value="1547" readonly/>
 <br>
 First Name *: <input type= "text" name="fname" placeholder="Enter your name" required />
  <br>
 Email: <input type= "email" name="email" placeholder="example@domain.com"/>
<br>
 Secret text: <input type="hidden" value=""/>
  <br> <br>
 Password: <input type= "password" name="passw" minlength="3" maxlength="6"/>
  <p> Minimum Characters - 3 / Maximum Characters - 6 </p>
  <br>
 Gender: 
   <input type="radio" name="gender" value="Male"/> Male
   <input type="radio" name="gender" value="Female"/> Female
<br><br>
 Favorite Sports:
   <input type="checkbox" name="favsp1" value="Football"/> Football
  <input type="checkbox" name="favsp2" value="United Kingdom"/> United Kingdom
<br><br>
Country: <br>
 <select name="country">
    <option value="United State America"> United State America </option>
    <option value="United Kingdom"> United Kingdom </option>
    <option value="China"> China </option>
    <option value="Japan"> Japan </option>
  </select>
  <br>
 Programming Languages: <br>
<input list="prolang" name="prolang">
<datalist id="prolang">
  <option value="Python">
  <option value="Java">
  <option value="C">
  <option value="C++">
  <option value="PHP">
</datalist>
<br><br>
  <input type="submit" value="Submit Details">
  <input type="reset" value="Clear Data">
  <br>
  <p> * Required fields </p>
</form>

We can use separate forms with two submit buttons

Form data validated here

ID:
First Name *:
Email:
Secret text:

Password:

Minimum Characters - 3 / Maximum Characters - 6


Gender: Male Female

Favorite Sports: Football United Kingdom

Country:

Programming Languages:



* Required fields


Form data not validated here

ID:
First Name *:
Email:
Secret text:

Password:

Minimum Characters - 3 / Maximum Characters - 6


Gender: Male Female

Favorite Sports: Football United Kingdom

Country:

Programming Languages:



* Required fields


Form Attributes:

  • required - For the required fields
  • placeholder - For the input sample value
  • minlength - minimum no of characters (like 2)
  • maxlength - maximum no of characters (like 12)
  • autofocus - autofocus field in start up
  • autocomplete ="off" - For the browser auto complete (value like off)
  • disabled - disabled inputs
  • readonly - Read only inputs
  • value - for enter default values

Marquee tag - <marquee>

scroll

<marquee behavior="scroll" direction="left" scrollamount = "10" width="50%" >This is marquee text</marquee>

This is marquee text

alternate

<marquee behavior="alternate" direction="left">This is marquee text</marquee>
This is marquee text

Attributes:

  • behavior - For the change marquee type (scroll, alternate, slide)
  • direction - For the change marquee direction (left,right,up,down)
  • scrollamount - For the change marquee speed (enter no like 8)
  • width - marquee display width (like 50% or 10)
  • height - marquee display height (like 50% or 10)
  • hspace - horizontal space around the marquee (like 0% or 10)
  • vspace - vertical space around the marquee (like 50% or 10)
  • loop - specific time to animate (Default: INFINITY)

Comment - <!-- -->

<p> Hello </p>
<!-- <p> This is an HTML Comment </p> -->

Hello


Related Post: How to be a Programmer | Part 1 : Introduction

Sources : https://pixabay.com/

Leave a Reply

25 Shares
Share
Tweet
Share
Pin
Share