Know Each Concept In HTML

HTML stands for HyperText Markup Language, and this markup language is used to create a web page. Webpages are generally viewed in a web browser, including writing, links, images, and videos. HTML is used to mark and describe these things on the browser and can display them correctly. 

Syntax of HTML: 

See the Pen My First Heading by Infoat One (@oneinfoat) on CodePen.

HTML Tools or Editors

There are different HTML tools/editors are available to create Web Pages

  1. CoffeeCup HTML Editor – The CoffeeCup editor tool offers a free HTML editor wherein you can create both HTML and CSS files and edit existing website files. It gives good customer support, and it is easy to use. 
  1. Komodo Edit – Komodo Edit HTML editor tool is a free Multilanguage HTML editor tool. It incorporates a few robust features, such as auto-completion and debugging tools. The tool can also edit a few other programming languages. Komodo is speedy and easy to use. 
  1. Apache NetBeans – Apache NetBeans is an open-source Integrated Development Environment (IDE). It assists you to develop in HTML5 and other several coding languages. The tool lets you auto-complete some codes, and it’s consistently reliable. 
  1. Notepad++ – It is only available for Windows users. Notepad++ provides a high level of functionality. It is a replacement for Notepad and also supports several languages. 
  1. Visual Studio Code – Visual Studio Code tool is a robust editor and free HTML editor edition of their IDE that supports all the programming languages. This software has fantastic customer service and offers a great range of functionality. 

Html Style Guide

  • HTML code always defines the document type as the first line in your document.

<! DOCTYPE html>

  • It permits you mix uppercase and lowercase letters in elements names. But we recommend using lowercase elements names as mixed letters looks bad.

<body>

<p> This is a paragraph </p>

</body>

  • Close all HTML Elements with “/”

<title>

</title>

  • Never skip the title element

<title> My First Webpage </title>

  • Always quote (“ ”) attribute value

<table class= “striped”>

  • Have to define alt, width, and height for Image

<image src=”html.gif” alt=”HTML5” style=“widhth:128px; height:128px”>

If required use comment.

<!–Comment –>

Html Basics tags     

  • Heading Tag <h2> </h2>

The heading <h1> tag/element gives heading in the content. It gives particular bold and font size to text.  

See the Pen Title of the documen by Infoat One (@oneinfoat) on CodePen.

  • Paragraphs Tag <p> </p>

The paragraph <p> tag defines a paragraph or content within the webpage that automatically adds a single blank line before and after <p> tags.

For Example:

See the Pen This is a paragraph. by Infoat One (@oneinfoat) on CodePen.

  • File path 

File path represents the location of the particular file in the device. 

See the Pen Untitled by Infoat One (@oneinfoat) on CodePen.

Attributes in HTML

  1. href Attribute – The <a> tag specifies a hyperlink and the href attribute defines the URL of the page the link goes to. 

       <a href=”http://www.infoatone.com”>Visit W3Schools</a>

  1. src Attribute – The <img> tag is utilized to embed an image in an HTML page. The src attribute defines the path to the image to be shown. 

      <img src=”img_girl.jpg”>

  1. width and height Attribute – The <img> tag should also carry the width and height attributes that define the width and height of the image.

      <img src=”img_balloon.jpg” width=”400″ height=”500″>

  1. alt Attribute – This attribute for the <img> tag defines an alternate text for an image.

<img src=”img_balloon.jpg” alt=”A balloon with a ribbon”>

  1. style Attribute – The attribute used to add styles to an element, like color, font, size, and many more. 

 <p style=”color:green;”>This is a green paragraph.</p>

  1. title Attribute – The title attribute defines some extra details about an element. 

<p title=”I’m a robot”>This is a main paragraph.</p>

Formatting

  1. <b> Tag – It defines bold text.

This HTML Formatting is a procedure of formatting content for better look and feel of the created website. It serves us ability to format text without using CSS. Lets see some formatting tags.

<b>This text is bold</b>

  1. <strong> Tag – This tag defines text with strong importance and text inside is typically displayed in bold. 

<strong>This text is important!</strong>

  1. <i> Tag – It defines a part of text displayed in italic. 

<i>This text is italic</i>

  1. <small> Tag – It defines smaller text.

<small>This is some smaller text.</small>

  1. <mark> Tag – The mark tag defines text that should be marked or highlighted.

<p>Do not forget to buy <mark>milk</mark> today.</p>

  1. <sub> Tag – It display text half a character below the normal line. And sometimes rendered in a smaller font, for example H2O.

<p>This is <sub>subscripted</sub> text.</p>

  1. <sup> Tag – The tag display text half a character above the normal line. And sometimes rendered in a smaller font. 

<p>This is <sup>superscripted</sup> text.</p>

Html Quotations

Html quotations are used to put quoted texts on a web page, that is, a portion of texts different from the standard texts on the web page. Let us see some HTML Quotations tags:

  1. <q> Tag – Defines a short quotation.

<p>RoboCamp’s goal is to: <q>Build a future where students can learn robotics in a fun way.</q></p>

  1. <abbr> Tag – This defines an abbreviation or an acronym, like “HTML”. 

<p>The <abbr title=”Info At One”>IAO</abbr> was founded in 2020.</p>

  1. <address> Tag – The tag defines the contact details for the owner of a document. It typically render the content in italic, and browsers will always add a line break before and after the <address> tag.

See the Pen Untitled by Infoat One (@oneinfoat) on CodePen.

Html Comments

Html Comments are used to explain the code, and it is not visible to the user. The browser will ignore anything written between these tags used. 

Example:

See the Pen Html Comments by Infoat One (@oneinfoat) on CodePen.

Html Color

Background Color – It is used to set the background color. 

See the Pen Background Color by Infoat One (@oneinfoat) on CodePen.

Text Color – It is used to set the color of the text.

See the Pen Text Color by Infoat One (@oneinfoat) on CodePen.

Border Color – It is used to set the color of borders. 

See the Pen Border Color by Infoat One (@oneinfoat) on CodePen.

Html Tables

<table>, <tr>, <th>, and <td> tags to create Table 

<table> – This defines an HTLM table.

<tr> Defines each row in the table. 

<th> It defines each table header. 

<td> – Defines each table data/cell.

See the Pen Html Tables by Infoat One (@oneinfoat) on CodePen.

Border Element – It used to give a border.

table, th, td {
  border: 2px solid black;
}

Collapsed Borders Element – This used to put borders collapse into one border. 

table, th, td {
  border: 2px solid black;
  border-collapse: collapse;
}

Cell Padding Element – The elements define the space between the cell text and its borders. 

th, td {
  padding: 15px;
}

Border Spacing – It is used to put space between the cells. 

table {
  border-spacing: 5px;
}

Html List

Types of HTML List 

  1. Unordered HTML List – This type of list starts with the <ul> tag in which each list item starts with the <li> tag. The list items are displayed with bullets by default. 

See the Pen Unordered HTML List by Infoat One (@oneinfoat) on CodePen.

  1. Ordered HTML List – This type of list starts with <ol> tag in which each list starts with the <li> tag. The list items are displayed with numbers by default. 

See the Pen Ordered HTML List by Infoat One (@oneinfoat) on CodePen.

  1. HTML Description Lists – This type of list starts with <dl> tag. Inside this <dt> tag specifies the tern (eg: name), and the <dd> tag describes each term. 

See the Pen HTML Description Lists by Infoat One (@oneinfoat) on CodePen.

Html Block & Inline

Block and inline elements are used for styling. 

A <span> element is utilized as an inline element where a<div> element is used as a block level element. 

<span> – This isn’t needed attributes, but style, class, and id are standard. With CSS, the <span> element can be utilized to style parts of the text. 

<p>My mom has <span style=”color:black;font-weight:bold”>blue</span> eyes and my dad has <span style=”color:darkolivegreen;font-weight:bold”>brown</span> eyes.</p>

<div> – This element has not needed attributes, but style, class and id are common for this. With CSS, the <div> element can be utilize to style blocks of content.

<div style=”background-color:black;color:white;padding:20px;”>
  <h2>London</h2>
  <p>Robotics is the trending education type. Most youth is attracted to Robotics.</p>
</div>

Html Iframes

Following are some iframes:

Iframe- Set Height and Width – Used to specify the iframe’s size. 

<iframe src=”first_iframe.htm” height=”150″ width=”250″ title=”This is first Iframe”></iframe>

Remove the Border – This iframe used to remove the border.

<iframe src=”first_iframe.htm” style=”border:none;” title=” first Iframe Example”></iframe>

Iframe Target for a link – Used to target frame for a link.

<iframe src=”first_iframe.htm” name=”iframe_a” title=”first Iframe Example”></iframe>

<p><a href=”https://www.infoatone.com” target=”iframe_a”>infoatone.com</a></p>

CSS

  • The full form of CSS Cascading Style Sheets. 
  • The CSS  gets in use to display the presentation of web pages, incorporating colors, layout, and fonts. 
  • It enables the display of web pages on different devices, like a large screen, small screens, or printers. 
  • CSS is independent of HTML and can be utilized with any XML-based markup language. 
  • CSS makes it simpler to maintain site share style sheets across pages in different environments. 

Html ID & Class

HTML ID

  • The HTML id is the attribute that is utilized to state a unique id for an HTML element. 
  • The attribute permits only one element with one unique id in an HTML document. 
  • While using id, write hash (#) character, followed by an id name, and specify the CSS properties inside curly braces {}.

See the Pen First Header by Infoat One (@oneinfoat) on CodePen.

HTML Class

  • The HTML class is an attribute that is used to define one or more class names for an element. 
  • HTLM Class is mostly used to point a class in a style sheet.

See the Pen This paragraph is essential. 🙂 by Infoat One (@oneinfoat) on CodePen.

Html Semantics

A semantic element perfectly states its meaning to both the browser and the developer. It involves such elements which clearly define its content. 

  1. <Section> – This element specifies a section in a document.  It groups the content, usually with a heading.

See the Pen <Section> by Infoat One (@oneinfoat) on CodePen.

  1. <article> – The tag defines independent, self-contained content. The Article element makes it available to read it separately from the rest of the website.

See the Pen <article> by Infoat One (@oneinfoat) on CodePen.

  1. <header> – The header element defines a header for a document or section used as a container for introductory content.

See the Pen <header> by Infoat One (@oneinfoat) on CodePen.

  1. <footer> – As the name says the elements define a footer for a document or a section. It normally carries the document’s author, copyright details, contact information, etc.

See the Pen Untitled by Infoat One (@oneinfoat) on CodePen.

  1. <nav> – Nav defines a set of navigation links. 

See the Pen <nav> by Infoat One (@oneinfoat) on CodePen.

  1. <aside> – The element defines some content aside from the content it is placed in. 

See the Pen <aside> by Infoat One (@oneinfoat) on CodePen.

  1. <figure> – It helps to group image and a caption togther

See the Pen <figure> by Infoat One (@oneinfoat) on CodePen.

Html Responsive

Making web design responsive means making the website adjustable for all devices. It lets HTML and CSS resize, hide, shrink or enlarge automatically to make it.

Setting the Viewport

<meta>  – The meta tag is used to set viewport to all created web pages. 

<meta name=”displayport” content=”width=gadget-width, initial-scale=2.0″>

  1. Responsive Image 

Width – To make image responsive keep the width at 100%, the image will be responsive and scale up and down.

<img src=”img_baby.jpg” style=”width:100%;”>

  1. Display various Images depending on Browser Width

<picture> – The tag permits you to define various images for various browser window sizes.

<picture>
  <source srcset=”img_mango.jpg” media=”(max-width: 600px)”>
  <source srcset=”img_fruit.jpg” media=”(max-width: 1500px)”>
  <source srcset=”fruits.jpg”>
  <img src=”img_flower.jpg” alt=”Flower”>
</picture>

  1. Responsive Text Size

vw – The text size can be set with a “vw” unit (viewport width).

<h1 style=”font-size:20vw“>Hi there</h1>

  1. Media Queries 

With media queries, individuals can define totally various styles for different browser sizes.

<style>
.left, .right {
  float: left;
  width: 30%; 
}

.main {
  float: left;
  width: 70%; 
}

/* Use a media query to insert a breakpoint at 900px: */
@media screen and (max-width: 900px) {
  .left, .main, .right {
    width: 100%; /* Width is 100%, when the viewport is 800px or less */
  }
}
</style> 

Html Canvas

  • The HTML <canvas> is an element that is used to draw graphics, on the fly, via JavaScript.
  • The element has a few methods for creating paths, boxes, circles, text, and images.
  • It defines an id, width, and height attribute to determine the canvas’s size and add a border, and it uses the style attribute. 
  1. Empty Canvas 

<canvas id=”FirstCanvas” width=”300″ height=”200″ style=”border:2px solid #100000;”>
</canvas>

  1. Line 

var c = document.getElementById(“FirstCanvas”);
var ctx = c.getContext(“2d”);
ctx.moveTo(0, 0);
ctx.lineTo(300, 200);
ctx.stroke();

  1. Circle

var c = document.getElementById(“FirstCanvas”);
var ctx = c.getContext(“2d”);
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

  1. Text

var c = document.getElementById(“FirstCanvas”);
var ctx = c.getContext(“2d”);
ctx.font = “30px Arial”;
ctx.fillText(“Hi there”, 10, 50);

  1. Stroke Text

var c = document.getElementById(“FirstCanvas”);
var ctx = c.getContext(“2d”);
ctx.font = “30px Arial”;
ctx.strokeText(“Hi there”, 10, 50);

  1. Linear Gradient

var c = document.getElementById(“FirstCanvas”);
var ctx = c.getContext(“2d”);

// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, “red”);
grd.addColorStop(1, “white”);

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 200, 90);

  1. Circular Gradient

var c = document.getElementById(“FirstCanvas”);
var ctx = c.getContext(“2d”);

// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, “red”);
grd.addColorStop(1, “white”);

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(12, 12, 152, 82);

Html SVG

  • The full form of SVG is Scalable Vector Graphics.
  • It is used to specify graphics for the web.
  • The <svg> element is a container for SVG graphics. This container contains several methods for drawing paths, boxes, circles, text, and graphic images. 
  1. Circle

<!DOCTYPE html>
<html>
<body>

<svg width=”100″ height=”100″>
  <circle cx=”50″ cy=”50″ r=”40″ stroke=”blue” stroke-width=”4″ fill=”yellow” />
</svg>

</body>
</html>

  1. Rectangle

<svg width=”400″ height=”100″>
  <rect width=”400″ height=”100″ style=”fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)” />
</svg>

  1. Rounded Rectangle 

<svg width=”400″ height=”180″>
  <rect x=”50″ y=”20″ rx=”20″ ry=”20″ width=”150″ height=”150″
  style=”fill:red;stroke:black;stroke-width:5;opacity:0.5″ />
</svg>

  1. Star

<svg width=”300″ height=”200″>
  <polygon points=”100,10 40,198 190,78 10,78 160,198″
  style=”fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;” />
</svg>

  1. Logo

<svg height=”130″ width=”500″>
  <defs>
    <linearGradient id=”grad1″ x1=”0%” y1=”0%” x2=”100%” y2=”0%”>
      <stop offset=”0%” style=”stop-color:rgb(255,255,0);stop-opacity:1″ />
      <stop offset=”100%” style=”stop-color:rgb(255,0,0);stop-opacity:1″ />
    </linearGradient>
  </defs>
  <ellipse cx=”100″ cy=”70″ rx=”85″ ry=”55″ fill=”url(#grad1)” />
  <text fill=”#ffffff” font-size=”45″ font-family=”Verdana” x=”50″ y=”86″>ROBO</text>
  Sorry, your browser does not support inline SVG.
</svg>

Leave a Reply

Your email address will not be published.