Hello everyone welcome to Flow In Code,

In this post, I will tell you Complete HTML Tutorial For Learners In One Articls (PDF Notes) – FlowInCode.

Complete HTML Tutorial For Learners In One Articls
Complete HTML Tutorial For Learners In One Articls

Chapter – 0 (Introduction)

HTML – Hyper Textual content Markup Language

Html is the language of the net. It’s used to create web sites.

We use HTML tags to outline the appear and feel of an internet site.

With an understanding of those tags and Tips on how to put them collectively, we are able to create lovely web sites simply!

Then why CSS and JavaScript

  • HTML is used for outlining the format of a web page – A barebone web page construction.
  • CSS is used so as to add styling to that barebone web page created utilizing HTML.
  • JavaScript (JS) is used to program logic for the web page format. E.g. what occurs when a consumer hovers on a textual content when to cover or present components and so forth?

A Lovely analogy

HTML = Card physique (solely metallic)

CSS = Automotive paint, design, and so forth.

JavaScript = Automotive engine + Inside logic

We’ll begin studying tips on how to construct lovely layouts on this course.

Putting in VS Code

We will use any textual content editor of our selection. Right here, I’m utilizing VS Code as a result of it’s light-weight, open-source & from Microsoft.

  • Go to google, seek for VS Code, obtain and set up it.

NOTE: You possibly can write HTML even in Notepad. Textual content editors like VS Code simply makes issues simpler.

Chapter – 1 (Creating our first web site)

We begin to construct an internet site by making a file named index.html, index.html is a particular filename that’s introduced when the web site root handle is typed.

A Fundamental HTML Web page

<!Doctype html> – Specifies that is an html5 doc

<html> – root of an HTML web page

<head> – Comprises web page metadata

<title> Harry’s Web site </title> – Comprises title

</head>

<physique> – Fundamental physique of the web page (rendered by browser)

<h1> It is a heading </h1> – heading tag

<p> My paragraph </p> – paragraph tag

</physique> – closing physique tag

</html> – closing html tag

A tag is sort of a container for both content material or different HTML tags.

Essential Notes:

  • Head & physique tags are kids of HTML tag.
  • HTML is the mother or father of Head and Physique tags.
  • A lot of the HTML components have opening & closing tag with content material in between opening and shutting tags.
  • Some HTML tags don’t have any content material. These are known as Empty components. For instance, tag
  • We will both use .htm or .html extension to save lots of our html code.
  • You should use the “Examine Ingredient” or “View Web page Supply” possibility from chrome to look into an internet site’s HTML code.

HTML component = Begin tag + Content material + Finish tag

Feedback in HTML

Feedback in HTML are used to mark textual content which shouldn’t be parsed. They will help throughout documentation of the supply code.

<!– HTML Remark –>

Case Sensitivity

HTML is a case insensitive language. <H1> and </H1> tags are the identical.

Chapter – 1 Apply Set

  1. Examine your favourite web site and alter one thing on the web page which is displayed.
  2. Go to your favourite web site and attempt to view the web page supply and write the precise traces of code. Does it clone the web site? Why?
  3. Write any HTML code inside a textual content file. Does it work in case you write it utilizing notepad?

Chapter – 2 (Fundamental HTML Tags)

We will add components contained in the physique tag to outline the web page format.

HTML Ingredient

Every part from beginning to the ending tag

<physique> – Opening tag

-Content material-

</physique> – Closing tag

HTML Attributes

Used so as to add extra data similar to an HTML tag.

Instance: <a href=”https://flowincode.com/”> FLowInCode’s Web site </a>

<a = anchor tag

href is the attribute of above component

We will both use single or double quotes in attributes.

The Heading Tag

Heading tag is used to mark heading in HTML. From h1 to h6, now we have tags for crucial to the least vital heading.

<h1> Most vital heading </h1>

<h2> One other heading H2 </h2>

<h3> One other heading H3 </h3>

<h4> One other heading H4 </h4>

<h5> One other heading H5 </h5>
<h6> Least vital heading </h6>

Observe: We should always not use HTML headings to make textual content thick or daring.

The Paragraph Tag

Paragraph tags are used so as to add paragraphs to an HTML web page.

<p> It is a paragraph </p>

The Anchor Tag

The Anchor tag is used so as to add hyperlinks to current content material inside an HTML web page.

<a href=”https://flowincode.com/”> Click on Me </a>

The img Tag

img tag is used so as to add photos in an HTML web page.

<img src=”picture.jpeg”>

Observe: In src attribute, now we have to specify the relative path of the picture.

Daring, italic and underline Tags

We will use daring, italic and underline tags to focus on the textual content as follows:

<b> That is daring </b>

<i> This is italic </i>

<u> That is underline </u>

br Tag

The br tag is used to create line breaks in an HTML doc.

Large and small Tags

We will make the textual content a bit bigger and a bit smaller utilizing huge and small tags respectively.

hr Tag

<hr> tag in HTML is used to create a horizontal ruler typically used to separate the content material.

Subscript and Superscript

We will add subscript and superscripts in HTML as follows:

<sub> this </sub> is subscript

<sup> this </sup> is superscript

pre Tag

HTML at all times ignores further areas and newlines. With a purpose to show a chunk of textual content as it’s, we use pre tag

<pre>

 This is written Utilizing pre Tag

</pre>

Observe: Above textual content will get rendered as it’s.

Chapter – 2 Apply Set

  1. Create an HTML web page with a heading (title heading), a major heading, and a subheading. Which tags did you employ?
  2. Create a web page with 5 wallpaper photos taken from the web
  3. Use br and hr tags to show a chunk of textual content with line-breaks
  4. Attempt to write the next chemical equation utilizing HTML C + O2 -> CO2
  5. Attempt to write a Wikipedia article utilizing HTML

Chapter – 3 (Making a web page format)

Once we use the appropriate tag in proper place, it ends in a greater web page format, higher indexing by engines like google, and higher consumer expertise.

We use the next tag to get the job accomplished

<header> #It accommodates nav tag (Navigation bar)

<major>

<footer>

Above tags are used for web site format

Inside the principle tag we insert the next tags:

<major> #The principle opening tag

<part> #A web page part

<article> #A self-contained content material

<apart> #Content material except for the content material (e.g. Advertisements and so forth.)

</major> #the principle closing tag

Making a web page like this isn’t mandatory but it surely creates a readable and structured format. Additionally, they’re helpful for web optimization.

Hyperlink attributes

<a href=”/contact”> Contact Us </a>

above tag will enable the contact web page to open in identical tab

<a href=”/contact” goal=’_blank’> Contact Us <a>

above tag will open contact web page in new tab

We will put any content material inside an anchor tag (photos, headings, and so forth. are all allowed)

If the web page is inside a listing, we have to guarantee that we hyperlink to the right web page. [Same applies to img tag as well]

We will add hyperlinks to photographs like this

<a href=”/about”><img src=”a.jpg” width=”120”></a>

[Height of image will be set automatically]

The Div tag

div tag is commonly used as a container for different components.

div is a block-level component. [Always takes full width]

The span tag

span is an inline container. [Takes as much width as necessary]

Chapter – 3 Apply Set

  1. Create an web optimization pleasant web site utilizing HTML
  2. Create an HTML web page which opens google when clicked on a picture
  3. Create an internet site which has your 5 prime used web sites bookmarked. The hyperlinks ought to open in a brand new tab.

Chapter – 4 (Lists, Tables & Types)

Lists

Lists are used to show content material which represents an inventory

Unordered record: Used to record unordered objects

<ul>

<li> Residence </li>

<li> About </li>

.

.

</ul>

Ordered record: Used to record ordered objects

<ol>

<li> Telephone </li>

<li> PC </li>

<li> Laptop computer </li>

</ol>

Tables

The <desk> tag is used to outline tables in HTML.

It’s used to format & show tabular information.

tr tag: used to show desk row

td tag: used to show desk information

th tag: used rather than desk information for displaying desk headers

We will outline as many desk rows as we wish.

So as to add a caption to the desk, we use <caption> tag contained in the desk.

thead tag: used to wrap desk head (caption & tr with th)

tbody tag: used to wrap the desk physique

Colspan attribute

This attribute is used to create cells spanning a number of columns.

<th colspan=”3”> FlowInCode </th> [Spans 3 columns]

HTML Types

An HTML kind is used to gather enter from the consumer.

kind tag is used for a similar

<kind>

-Ingredient of the form-

</kind>

There are completely different kind components for various sorts of consumer enter.

  • enter component: Might be of kind textual content, checkbox, radio, button and submit. We even have a ‘file’ kind
  • textarea component: Defines a multi-line textual content enter. Cols and rows attributes can be utilized to measurement the textarea.
  • choose component: Defines a drop down record

Observe: You don’t have to recollect all of the tags, you’ll mechanically memorize them with follow.

Embedding Movies

Video tag is used to play movies in HTML

<video src=”flowincode.mp4”> Error </video>

Attributes for video

We will use:

 Width: To regulate width of a video (Top mechanically adjusts) We will use autoplay/loop to autoplay or loop the video.

Chapter – 4 Apply Set

  1. Create an HTML web page with video embedded inside it.
  2. Change the video in question-1 with a YouTube video.
  3. Create an HTML kind for a journey web site to e-book a trip.
  4. Create a desk displaying rating of cricket gamers in a match utilizing HTML.

Chapter – 5 (web optimization)

We’ll focus solely on HTML standpoint of web optimization. We won’t be wanting into key phrase constructing and content material optimization side of web optimization

Sorts of web optimization

  • On web page web optimization [Can be done by HTML developers]
  • Off web page web optimization

HTML web optimization

HTML builders can implement web optimization utilizing the next strategies:

  • Set the title very good & to the purpose
  • Set the meta description

<meta identify=”description” content material=”………….”>

  • Set a pleasant URL Slug
  • Set the meta key phrase tag
  • Set the meta writer tag

<meta identify=”writer” content material=”FlowInCode”>

  • Set a favicon
  • Compress photos & different assets
  • Take away unused HTML/CSS & JS recordsdata + Compress them
  • Add alt textual content to photographs

Latest Articls from FlowInCode