Introduction To HTML

-

 Html is tag based or browser oriented or text based language .HTML stands for hypertext markup language ,here 

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.  

.........Html has a tag-based structure......... 

<H1>this is a heading</H1>  

Here, the content between the tags is called inner HTML 

There are basically two types of tags- 

1.Open tag(<br>,<hr>,<i>,<b>,<img>)

2.Closed tag (<h1></h1>)  

Development rules :-

1.  Create your own directory.

2.  Put all the resources into the directory .the resources can be         (Audio,video,image,library,api or other).

3.  Don't put spaces between your project's name. 

      My project×                       Myproject✓   

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.

   Marquee tag has the following attributes:- 

   i. Height- we can set the height for the text to be moved. 

   ii. Width- we can also set the width ,In that area the text will be moving.  

   iii. bgcolor- the appropriate background color can be set using bgcolor property. 

   iv. behavior- by default, behavior is set to scrolling . we can also set it to alternate(it can make the text not go outside the defined area)

   e.g- <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 in the screen with the help of src (source) by giving the path of image in it (put all the images into your project directory unless the image will not be shown in the browser), you can also assign width and height attributes to the image. 

e.g- <img src="hello.jpg" height="300" width="400">(img is an open tag)

 Navigation:- 

Navigation is visiting from one place to another wheather it is within the same web page ,other web page,other document or API(Application program interface) 

Types Of Navigation:-  

1.Page to page navigation(web page to same/other webpage in the same tab)-

e.g. <a href="xyz.html">XYZ</a> 

note:- we can open the webpage in another tab using target attribute-

e.g. <a href="xyz.html" target="_blank" >ABC</a>

2.Page to URL navigation(a webpage to any URL) -

e.g. <a href="https://www.google.com">Google</a>

3.Page to document navigation(a webpage to document e.g. downloading pdf)- 

e.g. <a href="imp.pdf">IMP</a>

4.Page to API(Embed whatsapp in your webpage using API)-

API stands for Application program interface. API is basically defined as (Next URL + own parameters ).the best way to define API is to embed whatsapp using API 

e.g. <a href="https://wa.me/919111698641">whatsapp me</a>

here "https://wa.me" is a next URL and here we are passing own parameters (mobile number) with a oblique followed by country code for mo. no. and then the number and your whatsapp will be embedded to your web page.

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] 

Html controls are- 

1. Button 

2. Textbox 

3. Checkbox 

4. Drop-down list 

5. Radio button and etc.

To Configure the html controls with the server ,we use php ( hypertext pre-processing language)  

Tags:- 

1.<form> - form tag is a tag under which all the html controls are defined. 

2.<select> - this tag is used for drop-down list and <option> tag is used within the select tag to define options. 

3.<textarea> - this tag is used to create a comment box /message box.   

4.<input> - input tag is used to define the controls by applying the attribute(type) to radio ,checkbox or others .We have another attribute called placeholder ,the use of placeholder is in example- 

E.g. 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 basically used to divide the screen into frames whether  you can divide the screen into rows or into columns or into both . Inside frameset tag <frame > tag is defined and given name to each frame, as each frame has its own location in the frameset.

e.g- 

     1. Division into rows-

      <frameset  rows="20,*" >

           <frame src="firstrow.html" name="f1"> 

          <frame src="secondrow.html" name="f2"> 

      </frameset> 

     [Note:- here * is used to symbolise the remaining portion]

      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> 

Target the frame/location-   

 <a> [anchor tag] has an attribute called "target". we can target the frame by supplying the frame's "name" to target property of anchor tag. 

e.g- <a href="link.html" target="f1">LINK</a> 

[here, when we click on "LINK" then the link.html page will be displayed in the frame (f1)]

Screen Arrangement:- 

Screen arrangement can only be attained using CSS  (This is a drawback of HTML). 

we can not move the controls or any object in HTML. everything arranges in an HTML in an order.

DIV tag is a part of CSS.

Let's see how the movement can be done- 

<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

Popular posts from this blog

Parameter Query

-
If we pass the value with (, ' " ! $) symbols in the control that will not be accepted through normal query. Parameter Query is used to accept the value with special symbols in the control like textbox. Parameter Query use a user defined variable with an @ sign.  In Parameter Query control is written in a different syntax. Column name and variable name can not be the same. Without column_name we can not perform Parameter query. Syntax- Insert- string s= "insert into Table_name (Column_name) values (@variable_name)"; cm = new SqlCommand(s,cn); cm.Parameters.AddWithValue("variable_name", control_name); cm.ExecuteNonQuery(); Update- string q = "update Proc_table set name=@name1 where email = @email1"; cm = new SqlCommand(q, cn); cm.Parameters.AddWithValue("name1", TextBox1.Text); cm.Parameters.AddWithValue("email1", TextBox2.Text); cm.ExecuteNonQuery();  
Read more

Final Project

-
Image
Registration form project   CODING- using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data.SqlClient; using System.Configuration; public partial class RegPage : System.Web.UI.Page {     SqlConnection cn;     SqlCommand cm;     SqlDataReader dr;     FinalClass fc = new FinalClass();     protected void Page_Load(object sender, EventArgs e)     {         if (!IsPostBack)         {             statedisplay();         }     }     protected void connect()     {         string s = ConfigurationManager.AppSettings["Ch_Db"];         cn = new SqlConnection(s);         cn.Open();          }     protected void statedisplay...
Read more

Grid View Paging

-
  Grid View paging- Grid view paging is used when we have to read the data in bulk then we divide the complete data records into pages consists 10 records in one page. SqlDataAdapter - It is used for Grid View Paging Data Adapter reads data in group of 10 records unlike DataReader which reads the data line by line. DataSet - DataSet Object is created, it accepts the data in bulk. Fill() - Fill() is used. CODE - protected void display() { //Connection Code string s = ConfigurationManager.AppSettings["db"]; cn = new SqlConnection(s); cn.Open(); //DataSet Object DataSet ds = new DataSet(); string s = "select * from Videodb"; //SqlDataAdapter object SqlDataReader adp = new SqlDataAdapter(); adp.Fill(ds); GridView1.DataSoruce = ds; GridView1.DataBind(); } Source code-   <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"              Height="589px" Width="483px" OnPageIndexChanging="click...
Read more