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

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

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

17 − 15 =