HTML_GL
  1. What is HTML
  2. Features Of HTML
  3. HTML Editor
  4. HTML Skeleton
  5. HTML Basic
  6. HTML Comment
  7. HTML Elements
  8. What is HTML Elements Definition
  9. Types of Elements
  10. HTML Attributes
  11. HTML Tags
  12. HTML CSS
  13. HTML Classes
  14. HTML Marquees
  15. HTML File Path
  16. HTML Embed Multimedia
  17. HTML Quotations
  18. HTML Semantic Elements
  19. HTML Frames
  20. HTML IFrames
  21. HTML vs XHTML
  22. HTML Canvas
  23. HTML SVG

What is HTML

HTML Stands for HyperText Markup Language,where

  • HyperText stands for Link between web pages.
  • Markup Language means Text between tags that define the structure.

HTML is a markup language that is used to create web pages. It defines how the web page looks and how to display content with the help of elements. It forms or defines the structure of our Web Page, thus it forms or defines the structure of our Web Page. We must remember to save your file with .html extension

Learn Python, it is easy

Features Of HTML

  • The learning curve is very easy (easy to modify)
  • Creating effective presentations
  • Adding Links wherein we can add references
  • Can display documents on platforms like Mac, Windows, Linux, etc
  • Adding videos, graphics, and audios making it more attractive
  • Case insensitive language

HTML Editor

  • Simple editor: Notepad
  • Notepad++
  • Atom
  • Best editor: Sublime Text

HTML Skeleton

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

HTML Basic

<!DOCTYPE html>

Instruction to the browser about the HTML version.

<html>

  • Root element which acts as a container to hold all the code
  • The browser should know that this is an HTML document
  • Permitted content: One head tag followed by one body tag

<head>

  • Everything written here will never be displayed in the browser
  • It contains general information about the document
  • Title, definitions of CSS and script sheets
  • Metadata(information about the document)

<body>

  •  Everything written here will be displayed in the browser
  • Contains text, images, links that can be achieved through tags
  •  Examples:
  • ○ <p> This is our first paragraph. </p>
  • ○ <a href=”http://www.google.com”>Go To Google</a>
  • ○ <img src=”photo.jpg”>

HTML Comment

  • Comments don’t render on the browser
  • Helps to understand our code better and makes it readable.
  • Helps to debug our code
  • Three ways to comment:
  1. Single line
  2. Multiple lines
  3. Comment tag //Supported by IE

HTML Elements

  • Elements are created using tags
  • Elements are used to define the semantics
  • Can be nested and empty

 What is HTML Elements Definition

<p color=”red”> This is our first Paragraph </p>

Explanation:

  • Start tag: <p>
  • Attributes: color =” red”
  • End tag : </p> // optional
  • Content: This is our first Paragraph

Types of Elements

  • Block Level

○ Takes up full block or width and adds structure in the web page

○ Always starts from the new line

○ Always end before the new line

○ Example:

■ <p >

■ <div>

■ <h1>…<h6>

■ <ol>

■ <ul>

  •  Inline Level

○ Takes up what is requires and adds meaning to the web page

○ Always starts from where the previous element ended

○ Example :

■ <span>

■ <strong>

■ <em>

■ <img>

■ <a>

HTML Attributes

  • Properties associated with each tag is called an Attribute.
  • <tag name=”value”></tag> is the structure.
  • There are some Global Attributes that can be applied to all the tags.
    • Title: Add extra information (hover)
    • Style: Add style information(font,background,color,size)
  • There are some attributes that can be applied to specific tags.
    • <img src=” URL” width=”100” height=”70” alt=” File cannot be loaded”>
    • src is the attribute used in image tag to define the path
    • Width is an attribute used to define width in pixels
    • Height is an attribute used to define width in pixels
    • Alt i.e alternate text if an image is not loaded
  • <a href=” URL”> Name of the link </a>
    • href is used for defining the path of the link
  • <hr color=”red”>
    • color is used to set the color of the horizontal line drawn on the webpage.

HTML Tags

  • Enclosed within <>
  • Different tags render different meanings.
  • Example:
    • <title> 
      • Whatever is written this tag comes up in the web page’s tab
      • Defines the title of the page
      • Syntax: <title>Home </title>
  • <p>
    • Defines the paragraph
    • Syntax:<p > This is our first Paragraph </p>

List of Self-closing tags

●  <hr> tag

○  Stands for horizontal rule

○  Dividing the web page

○  Syntax:  <hr>

●  <br> tag

○  Stands for break line

○  Moving to next line

○  Syntax: <br>

●  <img> tag

○ To add images in the web page

○ Syntax:  <img src=”path”>

○ Example:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<img src="https://images.unsplash.com/photo-1592195241233-84b15fc81ecb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" title="lotus" style="width:500px">
</body>
</html>
HTML

●  <h1> tag …… <h6>tag

○  Stands for heading tag

○  Defines heading of a page

○  h1 represents most important page in the page

○  h6 represents least important page in the page

○  Syntax:  <h1>This is my first heading </h1>

○  Example:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<h1>This is heading 1 </h1>
	<h2>This is heading 2 </h2>
	<h3>This is heading 3 </h3>
	<h4>This is heading 4 </h4>
	<h5>This is heading 5 </h5>
	<h6>This is heading 6 </h6>
</body>
</html>
HTML

● <strong> tag

○  Defines the text to be bold

○  Replaced <b>tag //HTML5

○  Syntax:  <strong> This text is important </strong>

○  Example

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<p>
Lorem ipsum dolor sit <strong>amet, consectetur adipisicing elit, sed do eiusmod</strong>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
</body>
</html>

HTML

● <em> tag

○  Defines the text to be bold

○  Replaced <i>tag //HTML5

○  Syntax:  <em> This text is special </em>

○  Example

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<p>
Lorem ipsum dolor sit <em>amet, consectetur adipisicing elit, sed do eiusmod</em>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
</body>
</html>

HTML

● <ol> tag

○  Stands for an ordered list

○  To define a series of events that take place in some order

○  Example making a tea (like a flow chart)

○  Syntax: <ol>………</ol>

●  <ul> tag

○  Stands for unordered list

○  To define a series of events that take place where the order is not important.

○  Example your hobbies

○  Syntax: <ul>………</ul>

● <li> tag

○  Defines the list item

○  Used inside the ol and ul tag to define the events

○  Syntax: <li></li>

○  Example:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<ul>
       <li>  Cricket </li>
       <li>  Football </li>
       <li>  Hockey </li>
   </ul>

</body>
</html>
HTML
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<ol>
       <li>  Cricket </li>
       <li>  Football </li>
       <li>  Hockey </li>
   </ol>

</body>
</html>
HTML

● <div> and <span> tags

○  Both of these are used to group different tags .

○  Acts like a container.

○  Effective while styling.

○  Syntax: <div>………</div>

○  Syntax: <span>….</span>

○  Difference <div> is block level and <span> is inline level.

○  Example

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<p>
Lorem ipsum dolor sit amet, <div>consectetur adipisicing elit, seddo eiusmod tempor incididunt ut labore</div> et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>

</body>
</html>

HTML
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<p>
Lorem ipsum dolor sit amet, <span>consectetur adipisicing elit, seddo eiusmod tempor incididunt ut labore</span> et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>

</body>
</html>

HTML

● <a> tags

○  Used to add links in a web page

○  <a href=”url”> Name of the link </a>

○  Example

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<a href="https://www.google.com/">go to google</a>

</body>
</html>
HTML

● <table> tags

  • Used to create a table on a web page
  • Need other tags for completing the creation of a table
    • <tr> : for marking the table row
    • <th> : for table header
    • <td> : for table column data
    • Everything is always enclosed within <tr>
    • <thead> : to keep all header data
    • <tbody> : to keep all body data
  • Example:
<!DOCTYPE html>
<html>
<head>
	<title>Color Chart</title>
</head>
<body>
	<h1>My first Color Chart</h1>
	<table border="1">
		<thead>
			<tr>
				<th>Name</th>
				<th>Type</th>
				<th>Mixed with</th>
			</tr>
		</thead>
		<tbody>
			<!-- Red  -->
			<tr>
				<td>Red</td>
				<td>Turns to pink </td>
				<td>White</td>
			</tr>
			<!-- Dark Blue  -->
			<tr>
				<td>Dark Blue</td>
				<td>Turns to Sky Blue</td>
				<td>White</td>
			</tr>
			<!--  Green  -->
			<tr>
				<td>Green</td>
				<td>Turns to Black</td>
				<td>Blue</td>
			</tr>
		</tbody>
	</table>

</body>
</html>


HTML

● <form> tags

  • action attribute: It specifies the URL to send form data to
  • method attribute: specifies the type of HTTP request(GET or POST)
  • Example: <form action=”/my-form-submitting-page”  method=”POST”>
  • <input>: used to accept data from the user
  • Some types of inputs are:
  • Text: used to store text data. Syntax: type=”text”
  • Password: used to enter a secure password. Syntax: type=”password”
  • Placeholder: temporary text in input fields. It is generally accompanied by “text” and “password” attributes. Syntax: placeholder=”insert- text-here”
  • Button: used to include buttons in the form. Syntax: type=”button” value=”insert-text-here”
  • Submit button: For creating a submit button. All the data will get submitted when it is clicked. Syntax: type=”submit”
  • Checkbox: to provide the ability to check multiple options. Syntax: type=”checkbox”. To check options by default, set it with the checked attribute.
  • Radio Button: allows one to choose a single option. Syntax: type=”radio”. Keep the name attribute of all the options the same.
  • <select>: For every possible option to select, use an <option> tag<option>
  • Text Areas: multi-line plain-text editing control. Syntax: <textarea>. You can specify how large the text area is by using the “rows” and “cols” attributes
  • Labels: add captions for individual items in a form. Syntax: <label>. A label can be used by placing the control element inside the <label> element, or by using the “for” and “id” attributes.
  • Validations ensure that users fill out forms in the correct format, e.g.:
  • required: The Boolean attribute which makes a field mandatory:
  • email: the browser will ensure that the field contains an @ symbol.
  • Example:
<!DOCTYPE html>
<html>
<head>
	<title>Register</title>
</head>
<body>
	<h1>Register Form</h1>
	<form>
		<label>First Name: <input type="text" name="firstName" placeholder="firstName" required></label>
		<label>Last Name: <input type="text" name="lastName" placeholder="lastName" required></label><br>

		<label>Male <input type="radio" name="gender" value="male"></label>
		<label>Female <input type="radio" name="gender" value="female"></label>
		<label>Other <input type="radio" name="gender" value="other"></label><br>

		<label>Email: <input type="email" name="email" placeholder="your email" required></label>
<!-- 		<label>Password: <input type="password" name="password" placeholder="your password" minlength="5" maxlength="10"></label><br>
 --> 
 		<label>Password: <input type="password" name="password" placeholder="your password" pattern=".{5,10}" required title="Please enter password of length 5 to 10"></label><br>

		<label for="">Birthday: </label>
		<select id="birthday" name="Month">
			<option>Month</option>
			<option>Jan</option>
			<option>Feb</option>
			<option>Mar</option>
			<option>Apr</option>
		</select>
		<select id="birthday" name="Day">
			<option>Day</option>
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
		</select>
		<select id="birthday" name="Year">
			<option>year</option>
			<option>1990</option>
			<option>1991</option>
			<option>1992</option>
			<option>1993</option>
			<option>1994</option>
		</select><br>

		<label>I agree to the terms and conditions 		
			<input type="checkbox" name="check">
		</label><br>

		<input type="submit" name="submit">

	</form>
</body>
</html>
HTML

HTML CSS

You’ve already seen how styles can change the appearance of different elements. Cascading Style Sheets (CSS) is a language for outlining style (e.g. colours, fonts, margin and size) to HTML documents. Let’s see how the Style sheet works. You can attach CSS with HTML documents in 3 simple ways: 

  • Inline:

As the name says, inline CSS used to apply a style to one HTML element at a time with the help of style attribute. Let’s see the example.

  • Internal:

Now we know that inline CSS for one line. What if we want to style the same element (e.g. all <p> tags) in the single HTML document, then we can use internal CSS. An internal CSS is defined in the <Head> section within <Style> tags.

  • External:

In the above two methods, we embedded the style sheet in the HTML document using the style element. The external style sheets are commonly used when you want to do style modifications on different pages. An external style sheet (.css file) contains several style rules. You can attach a .css document to one or more HTML documents with the help of <link> tag inside the head section.

style.css file expressions like:

Let’s check some commonly used font-related CSS properties: 

color 
font-family
font-size
font-style

colorColour property of CSS used to change the colour of the text.
You can use the colour value (numeric | name)
font-familyfont-family property of CSS used to change the font
You can use values as (one or more font names separated by commas)
font-sizefont-size property of CSS used to change the font size
You can use values as (percentage | length unit)
font-stylefont-style property of CSS used to change the font style
You can use values as(italic | oblique)

Let’s check some commonly used box-related CSS properties:

Padding:

The area (space) between the content and boundaries is the padding.

Border:

The border is a line covering the element and its surrounding area such as padding.

Margins:

An optional amount of space added on the outside of the border is the margin.

HTML Classes

The class attribute organizes HTML elements into abstract groups. Different HTML elements can belong to the same class name. With the help of class attributes, you can use a single style rule to apply styles to all of the classed elements at once or manipulate them all with a script.

With the help of class attributes, you can apply styles to all of the classed elements together with a single style rule or control them all with a script.

We have to write (.)class_name to style that class. Let’s check one example of the class attribute.

HTML Marquees

The HTML < marquee > tag is used to rotate text or picture segments, depending on the settings, either horizontally or vertically the screen of your website. The marquee tag has deprecated in HTML5 for the same results you can use CSS and JavaScript. To learn more about JavaScript, you can check our JavaScript blog. 

HTML File Path

You can link different files externally by providing the path location of that file. You can use an absolute or relative path to attach the following files:

  • Web pages
  • Images
  • Style sheets
  • JavaScript

An absolute path is an URL whereas relative path points to a file in the folder. We’ll see an example of both attachment methods.

Absolute path example:

Relative path example:

<img src=” logo.jpg”>
<img src=”images/logo.jpg”>
<img src=”/images/ logo.jpg”>
<img src=”../ logo.jpg”>

HTML Embed Multimedia

In today’s world multimedia is the most important; component of the web. Multimedia can be almost anything, like images, audios, videos, records, music, animations, and many more. You can embed multimedia files in your website with the help of <embed> tag. 

There are many video and audio formats. HTML standard supports the MP4, WebM, and Ogg formats for video whereas MP3, WAV, and Ogg formats for audio. HTML5 provides native audio and video tags as <video> & <audio>. We’ll check both methods to embed multimedia in a web page.

Some attributes which needed for native elements as below:

src: The path/URL for the audio/video to be played.
height: The height of the video.
width: The width of the video.
Controls: it gives controls for audio/video like play, pause, volume, etc.  

Output: video and music file available in the output folder

HTML Quotations

The quotation elements used in HTML to quote any text in a web document. We can easily differentiate quoted texts apart from normal text. Let’s check commonly used quotation elements of HTML:

q quotation:

The < q > HTML tag is used to quote small parts of text. It’s an inline quotation with both opening and closing tags. 

blockquote quotation:

The <blockquote> HTML tag is used to quote a large section such as paragraph. It changes the alignment of the block to look unique from others.

address quotation:

 The <address> HTML tag used to create an area for an author contact information on the website. It is mostly positioned at the end of the document. The browsers always apply a line break before and after the <address> tag. 

abbr quotation:

The <abbr> HTML tag used to write a shortened form of a word or phrase. The full-form will be pop-up when you mouse hovers on the <abbr> element.

bdo quotation:

The <bdo> HTML tag is used to override a text in bi-directional format. Direction can be left-to-right or right-to-left. 

cite quotation:

The <cite> HTML tag is used for citation. The text written in the <cite> tags draws in italic on the browser.   

HTML Semantic Elements

Semantic elements accurately describe the meaning of words inside an HTML tag. For example, header, table, form, article, footer, etc. Let’s check some semantic elements of HTML:

figure and figcaption element:

The <figure> element used to add content that displays image, snippet, etc. on a web page. A description can attach above or below to the figure using the <figcaption> element. 

section and article elements:

To divide web documents into groups that have a meaningful reason to be grouped like Introduction, conclusion, etc. we can use <section> elements. The <article> tag includes independent content that does not need any other reference, Like YouTube page that contain a different kind of videos. 

mark elements:

The <mark> element is useful to draw special attention to words.

details and summary elements:

The <details> element used to deliver extra information that is hidden by default. When you use <details> element, <summary> element also needed to display heading for <details> element. Users can click on heading to view additional information.

header and footer elements:

The <header> element is used for a container that occurs at the top of a web page. The header element contains information like a logo, headings, etc. The <footer> tag contains information that usually comes at the end of a page such as its author, copyright information, etc.  

aside elements:

The <aside> element comprises independent content that does not need any other reference. An aside may hold a list of links, or anything else that might connect with the surrounding content but not part of it. 

nav elements:

The <nav> element provides a section that contains navigation links for a site. You can use the <nav> tag for the link that provides primary navigation around the website.

HTML Frames

HTML frames used to split the browser window into several sections where a separate HTML document can be loaded in each portion. The bunch of frames displayed in the browser window is called a frameset.  

You can see <frameset> tag replaced <body> tag while creating frames. <body> tag is the most important tag in HTML that’s the reason <frame> and <frameset> tag deprecated in HTML5.

HTML Iframes

<iframe> stands for Inline Frame. The <iframe> tag used to embed a separate HTML file within a web page which can load separately. Iframes are distinct from frames because they are added in a web page, much like an image or video. Iframes add all the advantages of frames and none of the flaws. 

HTML vs XHTML

XHTML stands for eXtensible HTML. XHTML has been introduced to make HTML more extensible and versatile to deal with other data formats (e.g. XML). XHTML has capabilities of both XML and HTML. It can be used as a superior version of HTML. The first version, XHTML 1.0, is almost similar to HTML 4.01. Let’s check face-to-face comparison of both markup language.

ParametersHTMLXHTML
Stands forHyperText Markup LanguageExtensible HyperText Markup Language
Extended fromSGML XML, HTML
File extension.html, .htm.xhtml, .xht, .xml
Closing tagsnot necessarynecessary
<!DOCTYPE>not necessarynecessary
Elements must be in Lowercasenot necessary necessary
Attribute Names must be in Lowercasenot necessary necessary

Let’s check one XHTML code:

HTML Canvas

The word canvas says that it’s a two-dimensional rectangular area for drawing. The <canvas> tag used to draw a graphical item on the web page with the help of JavaScript. The canvas is raster-based and made up of a bunch of tiny pixels, so it has low scalability.

HTML SVG

The <svg> HTML tag is used to draw scalable vector-based graphics for the web. Vector images are made up of a mathematical formula; hence there is no upper or lower limit for scaling. SVG can be customizable through script and CSS. SVG images can handle events. 

This brings us to the end of this tutorial. If you want to improve your skills be sure to enrol in our free programs. Click on the banner below to know more

0

LEAVE A REPLY

Please enter your comment!
Please enter your name here

nineteen − fourteen =