πThe Id Attribute
The id attribute of an HTML tag can be used to uniquely identify any element within an HTML
page. There are two primary reasons that you might want to use an id attribute on an
element:
ο· If an element carries an id attribute as a unique identifier, it is possible to identify just
that element and its content.
ο· If you have two elements of the same name within a Web page (or style sheet), you
can use the id attribute to distinguish between elements that have the same name.
We will discuss style sheet in separate tutorial. For now, let's use the id attribute to distinguish
between two paragraph elements as shown below.
Example
<p id="html">This para explains what is HTML</p>
<p id="css">This para explains what is Cascading Style Sheet</p>
The id attribute of an HTML tag can be used to uniquely identify any element within an HTML
page. There are two primary reasons that you might want to use an id attribute on an
element:
ο· If an element carries an id attribute as a unique identifier, it is possible to identify just
that element and its content.
ο· If you have two elements of the same name within a Web page (or style sheet), you
can use the id attribute to distinguish between elements that have the same name.
We will discuss style sheet in separate tutorial. For now, let's use the id attribute to distinguish
between two paragraph elements as shown below.
Example
<p id="html">This para explains what is HTML</p>
<p id="css">This para explains what is Cascading Style Sheet</p>
πThe title Attribute
The title attribute gives a suggested title for the element. They syntax for the title attribute
is similar as explained for id attribute:
The behavior of this attribute will depend upon the element that carries it, although it is often
displayed as a tooltip when cursor comes over the element or while the element is loading.
Example
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>
The title attribute gives a suggested title for the element. They syntax for the title attribute
is similar as explained for id attribute:
The behavior of this attribute will depend upon the element that carries it, although it is often
displayed as a tooltip when cursor comes over the element or while the element is loading.
Example
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>
πThe class Attribute
The class attribute is used to associate an element with a style sheet, and specifies the class
of element. You will learn more about the use of the class attribute when you will learn
Cascading Style Sheet (CSS). So for now you can avoid it.
The value of the attribute may also be a space-separated list of class names. For example:
class="className1 className2 className3"
The class attribute is used to associate an element with a style sheet, and specifies the class
of element. You will learn more about the use of the class attribute when you will learn
Cascading Style Sheet (CSS). So for now you can avoid it.
The value of the attribute may also be a space-separated list of class names. For example:
class="className1 className2 className3"
πThe style Attribute
The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.
Example
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style="font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>
At this point of time, we are not learning CSS, so just let's proceed without bothering much
about CSS. Here, you need to understand what are HTML attributes and how they can be
used while formatting content.
The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.
Example
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style="font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>
At this point of time, we are not learning CSS, so just let's proceed without bothering much
about CSS. Here, you need to understand what are HTML attributes and how they can be
used while formatting content.
<table> β¦ </table>
Marks a table in a webpage.
<caption> β¦ </caption>
Description of the table is placed inside this tag.
<thead> β¦ </thead>
Specifies information pertaining to specific
columns of the table.
<tbody> β¦ </tbody>
The body of a table, where the data is held.
<tfoot> β¦ </tfoot>
Determines the footer of the table.
<tr> β¦ </tr>
Denotes a single row in a table.
<th> β¦ </th>
The value of a heading of a tableβs column.
<td> β¦ </td>
A single cell of a table. Contains the actual
value/data.
<colgroup> β¦ </colgroup>
Used for grouping columns together.
<col>
Denotes a column inside a table.
Marks a table in a webpage.
<caption> β¦ </caption>
Description of the table is placed inside this tag.
<thead> β¦ </thead>
Specifies information pertaining to specific
columns of the table.
<tbody> β¦ </tbody>
The body of a table, where the data is held.
<tfoot> β¦ </tfoot>
Determines the footer of the table.
<tr> β¦ </tr>
Denotes a single row in a table.
<th> β¦ </th>
The value of a heading of a tableβs column.
<td> β¦ </td>
A single cell of a table. Contains the actual
value/data.
<colgroup> β¦ </colgroup>
Used for grouping columns together.
<col>
Denotes a column inside a table.
Example
<table>
<colgroup>
<col span="2">
<col>
</colgroup>
<tr>
<th>Name</th>
<th>Major</th>
<th>GPA</th>
</tr>
<tr>
<td>Bob</td>
<td>Law</td>
<td>3.55</td>
</tr>
<tr>
<td>Alice</td>
<td>Medicine</td>
<td>3.61</td>
</tr>
</table>
<table>
<colgroup>
<col span="2">
<col>
</colgroup>
<tr>
<th>Name</th>
<th>Major</th>
<th>GPA</th>
</tr>
<tr>
<td>Bob</td>
<td>Law</td>
<td>3.55</td>
</tr>
<tr>
<td>Alice</td>
<td>Medicine</td>
<td>3.61</td>
</tr>
</table>
Simple website creating competition for HTML beginners
Our channel is preparing a website development competition for HTML beginners the competition is coding an HTML code for hotel booking it must be only riten by HTML and CSS becouse it is an exercise.
register at @codeadicted
https://telegram.me/codehtmlcss
Our channel is preparing a website development competition for HTML beginners the competition is coding an HTML code for hotel booking it must be only riten by HTML and CSS becouse it is an exercise.
register at @codeadicted
https://telegram.me/codehtmlcss
GET SOURCE CODE
QuickEdit.ver.1.4.7.build.112.apk
Code editor app for android users
GET SOURCE CODE pinned Β«Simple website creating competition for HTML beginners Our channel is preparing a website development competition for HTML beginners the competition is coding an HTML code for hotel booking it must be only riten by HTML and CSS becouse it is an exercise.β¦Β»
The following steps are required to design a registration form (Sign Up Form):
Step 1: Firstly, install a virtual server on your computer (eg Xampp, Wamp).
Xampp is a free and open-source cross-platform web server solution stack package developed by Apache Friends, consisting mainly of the Apache HTTP Server, MySQL database, and interpreters for scripts written in the PHP and Perl programming languages. XAMPP stands for Cross-Platform (X), Apache (A), MySQL (M), PHP (P), and Perl (P).
Xampp is a free and open-source cross-platform web server solution stack package developed by Apache Friends, consisting mainly of the Apache HTTP Server, MySQL database, and interpreters for scripts written in the PHP and Perl programming languages. XAMPP stands for Cross-Platform (X), Apache (A), MySQL (M), PHP (P), and Perl (P).
Step 2: Next we will require an editor where the HTML code has to be written. You can use any editor (such as Notepad++, Adobe Dreamweaver, NetBeans, etc). Here we will use Notepad ++.
Download the software here https://notepad-plus-plus.org/downloads/
Step 3 : Open the Notepad++ text editor and write the HTML code for designing the HTML Sign Up page.\
We will use various HTML tags to design the page.
You can include the fields according to your convenience (i.e whichever fields you require for the form).
Here I have included the fields according to my convenience.
Step 3 : Open the Notepad++ text editor and write the HTML code for designing the HTML Sign Up page.\
We will use various HTML tags to design the page.
You can include the fields according to your convenience (i.e whichever fields you require for the form).
Here I have included the fields according to my convenience.
01. < html >
02. < head>
03. < title > Registration Form </ title >
04. </ head >
05. < body>
06. < link href = "registration.css" type = "texcss" rel = "stylesheet" />
07. < h2 > Sign Up </ h2 >
08. < form name = "form1" action= "modified.form-data" >
09. < div class = "container" >
10. < div class = "form_group" >
11. < label > First Name: </ label >
12. < input type = "text" name = "fn>
13. </ div >
14. < div class = "form_group" >
15. < label > Middle Name: </
label >
16. < input type = "text" name = "m>
17. </ div >
18. < div class = "form_group" >
19. < label > Last Name: </ label >
20. < input type = "text" name = "ln>
21. </ div >
22. < div class = "form_group" >
23. < label > Password: </ label >
24. < input type = "password" name>
25. </ div >
26. </ div >
27. </ form>
28. </ body >
29. </ html >
02. < head>
03. < title > Registration Form </ title >
04. </ head >
05. < body>
06. < link href = "registration.css" type = "texcss" rel = "stylesheet" />
07. < h2 > Sign Up </ h2 >
08. < form name = "form1" action= "modified.form-data" >
09. < div class = "container" >
10. < div class = "form_group" >
11. < label > First Name: </ label >
12. < input type = "text" name = "fn>
13. </ div >
14. < div class = "form_group" >
15. < label > Middle Name: </
label >
16. < input type = "text" name = "m>
17. </ div >
18. < div class = "form_group" >
19. < label > Last Name: </ label >
20. < input type = "text" name = "ln>
21. </ div >
22. < div class = "form_group" >
23. < label > Password: </ label >
24. < input type = "password" name>
25. </ div >
26. </ div >
27. </ form>
28. </ body >
29. </ html >
Here I have included the LINK tag to link the CSS file for this HTML page.
HTML or Hypertext Markup Language is the standard and most basic language in use to create web pages.
CSS stands for Cascading Style Sheets
This is used for styling purpose. HTML coding is just a structure and CSS is applied to dictate your website's look and feel. Font size, font color, font style styling of images, page layout, mouse-over effects and more are determined by CSS. The CSS applied over the above HTML coding is given below.
HTML or Hypertext Markup Language is the standard and most basic language in use to create web pages.
CSS stands for Cascading Style Sheets
This is used for styling purpose. HTML coding is just a structure and CSS is applied to dictate your website's look and feel. Font size, font color, font style styling of images, page layout, mouse-over effects and more are determined by CSS. The CSS applied over the above HTML coding is given below.
01. .container {
02. max-width : 1350px ;
03. width: 100% ;
04. margin : 50px ;
05. height : auto ;
06. display : block ;
07. }
08.
09. body {
10. color : #8A2BE2 ;
11. font-size : 20px ;
12. font-family : Verdana , Arial , Helvetica, monospace;
13. background-color : #F0E8A0 ;
14. }
15.
16. h 2 {
17. text-align : center ;
18. }
19.
20. .form_group {
21. padding: 10px ;
22. ;
23. display : block ;
24. }
25.
26. label {
27. float: left ;
28. padding-right : 50px ;
29. line-height : 10% ;
30. display : block ;
31. width: 208px ;
32. }
02. max-width : 1350px ;
03. width: 100% ;
04. margin : 50px ;
05. height : auto ;
06. display : block ;
07. }
08.
09. body {
10. color : #8A2BE2 ;
11. font-size : 20px ;
12. font-family : Verdana , Arial , Helvetica, monospace;
13. background-color : #F0E8A0 ;
14. }
15.
16. h 2 {
17. text-align : center ;
18. }
19.
20. .form_group {
21. padding: 10px ;
22. ;
23. display : block ;
24. }
25.
26. label {
27. float: left ;
28. padding-right : 50px ;
29. line-height : 10% ;
30. display : block ;
31. width: 208px ;
32. }
Here you would be wondering why I have used <div> i n HTML. Let me explain to you the importance of using
<div> .
The <div> element is often used as a layout tool.
We need to see how to use them later on in the body section of the page. To use your class, all you need to do is add the class=" " attribute to the tag you wish to have the style of your class. So, if you wanted a line of text to be read, you could add the class attribute to a <DIV> tag, like this:
<div class="form_group"> . Here we have used this class because we can directly apply CSS on this class. The tags which has been opened should be closed also.
Now let us move further.
<div> .
The <div> element is often used as a layout tool.
We need to see how to use them later on in the body section of the page. To use your class, all you need to do is add the class=" " attribute to the tag you wish to have the style of your class. So, if you wanted a line of text to be read, you could add the class attribute to a <DIV> tag, like this:
<div class="form_group"> . Here we have used this class because we can directly apply CSS on this class. The tags which has been opened should be closed also.
Now let us move further.
Step 4 : Apply CSS on the HTML code. General rules for applying CSS are:
We use dot(.) beside any class to apply effects into it and β#β tag before any ID. E.g .
.container {
// css attributes will be written here
}
Here I have taken container as a class. Class is user-defined.
Note: Save the Sign_Up page in the xampp folder->htdocs->create a new folder( user-defined) . Inside this new folder, you have to keep all the data related to your project. It may be any kind of images used in webpage, HTML coding, or CSS coding. I mean to say all the things that are used in creating a web page must be under one roof (i.e under one folder).
We use dot(.) beside any class to apply effects into it and β#β tag before any ID. E.g .
.container {
// css attributes will be written here
}
Here I have taken container as a class. Class is user-defined.
Note: Save the Sign_Up page in the xampp folder->htdocs->create a new folder( user-defined) . Inside this new folder, you have to keep all the data related to your project. It may be any kind of images used in webpage, HTML coding, or CSS coding. I mean to say all the things that are used in creating a web page must be under one roof (i.e under one folder).
Next, we will insert data into the fields of the sign_up page and store the information in MySQL.
For that, we have to start the xampp controller. Start Apache and MYSQL in the XAMPP controller.
Now we will go to the next level where we will make use of PHP syntax.
For that, we have to start the xampp controller. Start Apache and MYSQL in the XAMPP controller.
Now we will go to the next level where we will make use of PHP syntax.
PHP
PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language. PHP is an acronym for " PHP: Hypertext Preprocessor".
PHP is a widely-used, open-source scripting language. PHP scripts are executed on the server. PHP is free to download and use. PHP code is executed on the server, and the result is returned to the browser as plain HTML. PHP files have extension " .php ". PHP can collect form data.
PHP can add, delete, modify data in your database. It runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.) and supports a wide range of databases. PHP is easy to learn and runs efficiently on the server-side.
PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language. PHP is an acronym for " PHP: Hypertext Preprocessor".
PHP is a widely-used, open-source scripting language. PHP scripts are executed on the server. PHP is free to download and use. PHP code is executed on the server, and the result is returned to the browser as plain HTML. PHP files have extension " .php ". PHP can collect form data.
PHP can add, delete, modify data in your database. It runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.) and supports a wide range of databases. PHP is easy to learn and runs efficiently on the server-side.