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.
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!
- 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.
A Lovely analogy
HTML = Card physique (solely metallic)
CSS = Automotive paint, design, and so forth.
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.
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
<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.
- 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 –>
HTML is a case insensitive language. <H1> and </H1> tags are the identical.
Chapter – 1 Apply Set
- Examine your favourite web site and alter one thing on the web page which is displayed.
- 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?
- Write any HTML code inside a textual content file. Does it work in case you write it utilizing notepad?
We will add components contained in the physique tag to outline the web page format.
Every part from beginning to the ending tag
<physique> – Opening tag
</physique> – Closing tag
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.
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>
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 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
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
This is written Utilizing pre Tag
Observe: Above textual content will get rendered as it’s.
Chapter – 2 Apply Set
- Create an HTML web page with a heading (title heading), a major heading, and a subheading. Which tags did you employ?
- Create a web page with 5 wallpaper photos taken from the web
- Use br and hr tags to show a chunk of textual content with line-breaks
- Attempt to write the next chemical equation utilizing HTML C + O2 -> CO2
- Attempt to write a Wikipedia article utilizing HTML
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)
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.
<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
- Create an web optimization pleasant web site utilizing HTML
- Create an HTML web page which opens google when clicked on a picture
- Create an internet site which has your 5 prime used web sites bookmarked. The hyperlinks ought to open in a brand new tab.
Lists are used to show content material which represents an inventory
Unordered record: Used to record unordered objects
<li> Residence </li>
<li> About </li>
Ordered record: Used to record ordered objects
<li> Telephone </li>
<li> PC </li>
<li> Laptop computer </li>
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
This attribute is used to create cells spanning a number of columns.
<th colspan=”3”> FlowInCode </th> [Spans 3 columns]
An HTML kind is used to gather enter from the consumer.
kind tag is used for a similar
-Ingredient of the form-
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.
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
- Create an HTML web page with video embedded inside it.
- Change the video in question-1 with a YouTube video.
- Create an HTML kind for a journey web site to e-book a trip.
- 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