Introduction To HTML
📘 HTML – Basics & Concepts
🔹 HTML
Html is tag based or browser oriented or text based language.
HTML stands for hypertext markup language.
🔹 Terminology
Hyper:- hyper represents the next document.
Text:- text is a collection of words (char, number or special characters)
Markup:- it is basically an HTML library where all the tags are defined (it communicates directly with the browser)
Language:- it works as a mediator between a user and computer
🔹 Tag-Based Structure
.........Html has a tag-based structure.........
<H1>this is a heading</H1>
Here, the content between the tags is called inner HTML
🔹 Types of Tags
Open tag →
<br>,<hr>,<i>,<b>,<img>Closed tag →
<h1></h1>
🔹 Development Rules
Create your own directory
Put all the resources into the directory (Audio, video, image, library, api or other)
Don't put spaces between your project's name
My project ✗
Myproject ✓
🔹 Important Tags
1) <del>
This tag is used to show the new text without replacing the old text but having a cut in old text.
e.g. technicial
2) <sub>
Used to write numbers in subscript.
3) <sup>
Used to write numbers in superscript.
4) <iframe>
iframe tag is used to embed the third party stuff into your webpage.
e.g. embed the youtube video into your webpage
5) <marquee>
marquee tag is basically used for moving text either horizontally or vertically.
Attributes:
Height → set height
Width → set width
bgcolor → background color
behavior → default scrolling, can be alternate
<marquee height="400" width="300" bgcolor="green" behavior="alternate"></marquee>
6) <img>
Image is defined as a graphical representation of information.
img tag is used to display image using src attribute.
<img src="hello.jpg" height="300" width="400">
(img is an open tag)
🔹 Navigation
Navigation is visiting from one place to another whether it is within the same web page, other web page, other document or API.
🔹 Types of Navigation
1) Page to page navigation
(web page to same/other webpage in same tab)
<a href="xyz.html">XYZ</a>
Open in new tab:
<a href="xyz.html" target="_blank">ABC</a>
2) Page to URL navigation
<a href="https://www.google.com">Google</a>
3) Page to document navigation
<a href="imp.pdf">IMP</a>
4) Page to API
API stands for Application program interface.
API is basically defined as (Next URL + own parameters).
<a href="https://wa.me/919111698641">whatsapp me</a>
🔹 HTML Controls
Html controls are those controls which do not directly communicate with the server because HTML works only on client side server (local server).
Controls:
Button
Textbox
Checkbox
Drop-down list
Radio button
To configure HTML controls with server, we use PHP (hypertext pre-processing language).
🔹 Form Related Tags
1) <form>
Used to define all HTML controls
2) <select> and <option>
Used for drop-down list
3) <textarea>
Used to create comment/message box
4) <input>
Used to define controls using type attribute
Example:
Name: <input type="text" placeholder="enter your name">
🔹 Page Management
Page Management is to manage a page such that it can display multiple content in a page.
🔹 <frameset> Tag
frameset tag is used to divide screen into frames.
1) Division into rows
<frameset rows="20,*">
<frame src="firstrow.html" name="f1">
<frame src="secondrow.html" name="f2">
</frameset>
2) Division into columns
<frameset cols="40,60">
<frame src="firstcol.html" name="f3">
<frame src="secondcol.html" name="f4">
</frameset>
3) Division into rows and columns
<frameset rows="20,*">
<frame src="firstrow.html" name="f1">
<frame src="secondrow.html" name="f2">
<frameset cols="40,60">
<frame src="firstcol.html" name="f3">
<frame src="secondcol.html" name="f4">
</frameset>
</frameset>
🔹 Targeting Frame
<a> tag has attribute called target
<a href="link.html" target="f1">LINK</a>
🔹 Screen Arrangement
Screen arrangement can only be attained using CSS (This is a drawback of HTML).
We cannot move controls in HTML; everything is arranged in order.
DIV tag is a part of CSS.
Example
<html>
<body>
<div id="d1"
style="height: 200px; width: 300px; background-color: red; top: 100px; left:300px;">
object
</div>
</body>
</html>
Comments
Post a Comment