There are some key points regarding the HTML, which
will be used in future for making the HTML page so effectively.
HTML (Hyper Text Markup Language): -
i)
HTML is not any programming language
like C and C++. It is used for web designing for creating the interface or
front-end of the website. It is used as an interpreter not complier.
ii)
It is a static language means through
the HTML we can create static website (In the static website we cannot change
in the runtime)
iii)
We know that we can create static
website in HTML, but though this we can also create Dynamic website (but not
fully dynamic).e.g: - When cursor moves on the hyperlink at runtime the color
of the hyperlink will be changed automatically.
iv)
In the HTML, we use predefined tags.
v)
Tag:
- A tag is a specified and bounded area which is used to perform any specified
task and already encoded into any browser library known as a tag. Syntax: -
<>
vi)
Types of tags
1. Paired
tags(<> opening tag, </ >
closing tag>)
2. Unpaired
or single tag(there is only single tag contains the information regarding the
closing and opening tag such as <br>, <hr>, <input>)
HTML
Element: -
In the HTML syntax, most elements are written
with a start tag and an end tag, with the content in between. Tags are composed
of the name of the element
For
example, a paragraph, which is represented by the p element,
would be written as
<p>In
the HTML syntax, most elements are written ...</p>
We call HTML as a markup language, because we
use a markup tag that is inbuilt tag, so we call it markup language.
HTML
language is not case sensitive.
We use HTML to access
the Internet through the web browser and there is no need of any server to
execute the HTML page. It works on client side.
The extension of HTML
page is .html or .htm (Windows operating system) but DOS operating system does not support .htm
extension.
The HTML tag at the top
of position is not compulsory, means if we don’t use the HTML tag after that
the page will be executed.
Example
<html>
Attribute Property of attribute
·
<h1>This is the maximum
size</h1>
(This is the heading
tag and we can use the h1 to h6 for maintaining the size of the heading)
·
By default the size of the text is 6
pixel, we can increase or decrease by the properties.
·
Div:
- We use the div tag in HTML for making the partition of the page or represent
the part of the page uniquely known as div tag. It is a paired tag in HTML.
·
Syntax:
- <div style=”background color:gray;height:300px:width:200px”>
</div>
·
<ol></ol> Ordered list tag which
represent the sequence of the information.
<ol
type = I start=5> (numbering will be started from 5 in roman way)
<li>abc</li>
</ol>
·
<ul></ul> Unordered list tag which
represent information in the form of square ,
Bullet, circle or disc
·
<ul type=circle> representing the circle in front of
list of item.
<li>xyz</li>
<li>kkk</li>
</ul>
·
<button>click</button> #for creating the button HTML page
</html>
Assignment no: - 1
Make a format of resume with div
tag,<ol></ol> and <ul></ul>tags. See the picture below:
-
We
can also use Dreamweaver software for making the interface of the website
through the HTML tags. If we use the tags in this software, we can get automatic
help through this we can easily use the tags. But if we use notepad for
creating the page then there is no option for automatic help, that’s why during
php course work we always prefer Dreamweaver software for creating the webpage
so effectively.
There
are some important tags in HTML, which will be used mostly trough the web
designing of the website through HTML.
Tag attributes Property Represents the ID
BY
default textbox contain 20 characters but we can increase the size of the text
box by size property.
Tag attributes Property Represents the ID
The
name attribute of the tag is optional. It will be used later when we pass the
data in between the pages through php programming.
For
creating the radio button the page we use the following syntax: -
<input
type=radio name=s1
value=abc>Male<br>
<input
type=radio name=s1 value=xyz>Female
Note: - If we use the
same name in both male and female category then only one will be activated at
runtime and in case name of both r different then both will be selected
individually.
Form
Element: -
There
are mainly two types of form elements: -
1)
GET
method 2) POST method
See
the example of GET and POST methods: -
<html>
<head>
<title>My first styled
page</title>
<link
rel="stylesheet" href="abc.css">
</head>
<body>
<!--
Site navigation menu -->
Represents the path of Represents the info in URL Represents the info
Next page. Of the next page through query
string on the next page
But not in URL
<ul
>
<li><a
href="index.html">Home page</a>
<li><a
href="musings.html">Musings</a>
<li><a
href="town.html">My town</a>
<li><a
href="links.html">Links</a>
</ul>
<div
class = "abc">
<p>Welcome
to my styled page!</p>
<h1
>My first styled page</h1>
</div>
</div>
</form>
</body>
</html>
From
the security point of view, we always prefer POST method for transferring the
information on the next page.
GET
method: -
When we use GET
request then everyone can see parameters values on the address bar, it is not
secure, one more thing we can take or transmit less amount of information(max
40 characters).
POST
method: -
When we use POST method, then no one can
parameters value on the address bar and its is secure through this we can take request
from small as well as large file. It is most probably used into websites.
<a
href=”abc.html” target=_blank>login</a>
See
the See the
Info
at another info in same
Window window
So
finally a journey of HTML forms starting to end in short description.
HTML
:-( Hyper Text Markup Language)
Tags
Used In html:-
Tag Function
<DOCTYPE
.../> Specifies the HTML
document’s DTD.
<html></html> Specifies an HTML document.
<head></head> Specifies an HTML document’s header.
<title></title> Specifies an HTML document’s title.
<meta></meta> Specifies metadata about an HTML
document.
<body></body> Specifies an HTML document’s body.
Basic
Structure:-
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Note: - The document needs is a
"head", which provides information about your document, and a
"body", which is the content of the document. Since HTML is nothing
if not logical, the head (
<head> and </head>) is on
top of the body (<body> and </body>).
Tags
Used In html:-
Tag Function
<h1></h1> Specifies a first level heading.
<h2></h2> Specifies a second level heading.
<h3></h3> Specifies a third level heading.
<h4></h4> Specifies a fourth level heading.
<h5></h5> Specifies a fifth level heading.
<h6></h6> Specifies a sixth level heading.
<p></p> Specifies a paragraph.
<ul></ul> Specifies an unordered (bulleted)
list.
<ol></ol> Specifies an ordered (numbered)
list.
<li></li> Specifies a list element.
<b></b> Emboldens text.
<br/> Places a line-break in text.
<i></i> Italicises text.
<big></big> Enlarges text.
<small></small> Makes text smaller.
<em></em> Emphasises text.
<strong></strong> Emphasises text, with more emphasis than
the em tag.
<sub></sub> Subscripts text.
<sup></sup> Superscripts text.
<del></del> Specifies enclosed text as deleted.
<ins></ins> Specifies enclosed text as inserted.
<kdb></kdb> The KBD tag
defines text that should be entered by a user
as
in a keyboard. Most browsers display this text in
a Monospaced font
<a></a> Anchor tag
<caption> </caption> Defines the table caption
<cite>
</cite> Defines
the title of work
<datalist></datalist> specifies
a list of pre-defined options for an <input> element
<link></link> Specifies the connectivity
b/w the document and resources
<meta></meta> provides the metadata of the html document
<iframe></iframe>
specifies web document within the web document
<select> </select> <select>
element is used to create a drop-down list.
<option></option> specifies the options in the list
<fieldset></fieldset> specifies the form element in group
<marquee></marquee> specifies the moving text and images
<legend></legend> defines the caption of group defined by
<fieldset>
<object></object> defines the embedded object in HTML
document
<param></param> pass the parameter to plug-in that embedded
in <object> tag
Special
Character Tags:-
Tag
character Meaning
& & ampersand
non-breaking space
£ £ pound sterling character
¢ ¢
cent character
© © copyright character
® ® registered character
° °
degree character
± ± plus or minus character
× x
multiplication character
÷ ÷ division character
< <
less-than sign
> >
greater-than sign
Assignment No: - 2
We will create a login page along with registration
navigation, and when we press the registration hyperlink then we get the
registration in another window. On the right side of the login page we want set
of four images.
CSS (Cascading Style Sheet)
Introduction:
-
A
style is just the representation of the document on the interface. It contains
the settings for the color, size, type
and weight (Boldness) and style (italic, normal) of the text on your document.
What are the cascading Style Sheets: -
Cascading
style sheets are like Dreamweaver templates. They allow creating files that
defined how text will look on the entire site. Css files can even define
the appearance of the page layouts.
Sometimes,
styles can be defined in the <HEAD> section of an HTML document. There
are mainly two ways for creating the CSS.
Style
sheets are saved completely independent
files and we can import the file
or can say that uploaded the file on HTML elements, which is the part of
website and when we execute the website, then the line of code which created in
CSS that tells the browser to go get that style sheet in the same way that
pages refer browsers to graphics and other pages.
You
can create or implement the style sheet in between
the HTML elements but that style sheet will only work for the particular
page not for all pages of the website.
Anatomy
of a Style: -
All
the style have the same basic parts, through this we can create the style
sheets with full of functionalities that will affect the HTML documents.
SELECTOR:
- The selector is simply the HTML element that is
linked to a particular style or you can create your own selector.
P {
text-align: 3em}
Such
as: - h1 {color: purple}
In
the example given, any text that falls between <h1> tags would be made
purple.
Multiple
style declarations for a single selector may be separated by a semicolon:
Selector {propety1:value1;
property2:value2}
Class
Selectors
A
simple selector can have different classes, (A class is the combination
of different styles which would be used for representing the pages more
attractive) thus allowing the same element to have different styles. For
example, an author may wish to display code in a different color depending on
its language:
code.html { color: #191970 }
code.css { color: #4b0082
}
In
the above example has created two classes, css and html for use with HTML's CODE element. The CLASS attribute is used in HTML to indicate the class of
an element, e.g.,
<P
CLASS=warning>Only one class is allowed per selector.For
example, code.html.proprietary is invalid.</p>
Classes
may also be declared without an associated element:
.note
{ font-size: small ;}
DECLARATION: - This is
tells the part between the curly brackets that the browser how to render parts
of the page to which the selector has been applied.
Properties
or Arguments
A property or Arguments is
assigned to a selector in order to manipulate its style. Examples of properties include color, margin, and font.
Values
The
declaration value is an assignment that a property
receives. For example, the property color could
receive the value red.
Grouping
In order to decrease repetitious statements within style sheets, grouping of selectors and declarations is
allowed. For example, all of the headings in a document could be given
identical declarations through a grouping:
H1,
H2, H3, H4, H5, H6 { color: red; font-family: sans-serif }
Style Sheet Syntax: -
Every statement must have a selector
and declaration. The declaration
comes immediately after the selector and is contained by a pair of curly
brackets { }
H1
{font: Arial, Impact, Sans Serif}
The
declaration is one or more properties separated by semicolons. That is
H1 {Font-family: Arial; Color:
blue}
Some
property or argument can take a number of values, as in the font-family example
above. The values in the list should be separated by comma and a space.
For
example, the following code segment defines the color and font-size properties
for H1 and H2 elements: -
<HEAD>
<TITLE>CSS
TEMPLATE</TITLE>
<STYLE SHEET =
“text/css”>
H1 {font-size: x-large; color: red}
H2 {font-size: large;
color: blue}
</STYLE>
<H1>Simple CSS
template</H1>
</HEAD>
In
the above example you can create the
style in the HTML elements with Selector and property, with the syntax of
CSS.
Comments
Comments are denoted within style sheets with the same conventions
that are used in C programming. A sample CSS1 comment would be in the format:
/* COMMENTS CANNOT BE NESTED */ H1 {color: red} /* red really red!! */
Ways
for creating the Style Sheet: -
Style
sheet information is the textual in the nature and is included either within
the HTML document itself or in a separate text file referred to by a HTML
document. These three types of styles are embedded, inline and linked or
external.
Embedded
Styles: -
Embedded
styles are placed within the head element and use the style element. Embedded
styles affect every instance of the element specified.
<html>
<head>
<title></title>
<style type="text/css">
body
{
font-family: "Angsana
New";
text-decoration: underline;
font-style: normal;
font-variant: small-caps;
text-transform: lowercase;
font-weight: 200;
font-size: large;
}
</style>
</head>
<body>
<p>How we use the Css within the HTML</p>
<asp:Label ID="Label1" runat="server"
Text="Label"></asp:Label>
</body>
</html>
If you create the class or can say method with user defined name,
then you have to use the dot operator for accessing the properties on a
particular HTML tag. Such AS: -
<html>
<head>
<title> </title>
<style type="text/css">
.abc
{
font-family:
"Times New Roman", Times, serif;
font-size:
x-large;
font-style:
normal;
}
.navbar
{
font-family:
ADMUI3Lg;
border-style:
double;
border-width:
medium;
text-align:
justify;
white-space:
normal;
}
</style>
</head>
<body>
<div class = “abc”>
<h1> The
most important part of the css </h1>
<p>This
is the way for creating the css </p>
</div>
<div class = “navbar”>
<a href =
“default.aspx”>home page</a>
</div>
</body>
</html>
Inline
Styles: -
Inline
styles, as you know, they are placed inside elements within the body of an HTML
document. Using the attribute “style” any element can be affected, for example:
-
<h1
style = “align-text: center”>
<p
style = “background-color: red”>
In
the three cases above you can see the attribute “style” used with the
Heading
(h1)
Paragraph(p)
And
anchor(a) elements
In
all cases, the style affects only that specific instance of the element. Such
as style of h1 would affect only h1 element and p would affect only p element
not h1.
External
Style Sheets
Once
you created the embedded styles, you can create external or linked style
sheets. You can move the style information which you embedded in HTML document
transferred into new file. Save the file as a text document with the .CSS
extension. Such as abc.css.
In
the external style sheets, save your file with extension “.CSS”.
Here
we use a special tag is called <LINK>tag. The <LINK> tag goes in
the head of any HTML document that you would like to apply your external sheet
to. We use the <LINK> tag to refer to the style sheet which you just
created on different notepad with the extension of “.CSS”.
<head>
<link rel="stylesheet"
href="copy of xyz.css">
</head>
The
basic Cascade (means through an example how we can attach the CSS with HTML
element)
There
is a basic rule of the cascade the external style sheet with the HTML elements.
Suppose
you have an external style sheet (abc.css), which states the following
text, So open your notepad window and
type the following text: -
Body
{
padding-lefy:11em;
font-family:
Georgia,"Times New Roman",Times;
color:red;
background-color:
blue
}
h1 (H1 is the HTML element. So there is
no need of. (Dot) to access the properties of attributes
{
color:
green;
background-color:purple
font-size:15px
}
a:hover
{
text-decoeration:overline;
font-size:large;
background-color:red
}
.abc
{
pedding:1em;
margin:
1em;
bordar-bottom:
1px
}
Note:
-
(Creation of method or class with attribute and its properties, here we use.
(Dot) before the name of method or class and we can access the class anywhere
on the HTML according to the Customer’s need.
Notice that in the
<
div class = “abc”>
<p>
here we are defining the paragraph</p>
<h1>
represents the size of heading</h1>
</div>
Means every tag which represented in div tag
will automatically affected. If we attach the class or method with the div tag
with following syntax
P.green
{
font-style:normal;
text-decoeration:underline;
font-size:small;
background-color:red
}
Here it means, here we already defined a
SELECTOR that is <P> tag followed by a (.), followed by the class name or
method.
So now will see the complete HTML PAGE after
cascading the style sheet.
<html>
<head>
<title>My first styled
page</title>
<link
rel="stylesheet" href="abc.css">
</head>
<body>
<!--
Site navigation menu -->
<ul
>
<li><a
href="index.html">Home page</a>
<li><a
href="musings.html">Musings</a>
<li><a
href="town.html">My town</a>
<li><a
href="links.html">Links</a>
</ul>
<div
class = "abc">
<p>Welcome
to my styled page!</p>
<h1
>My first styled page</h1>
</div>
</div>
</body>
</html>
No comments:
Post a Comment