HTML - WordPress.com

warbarnacleΑσφάλεια

5 Νοε 2013 (πριν από 3 χρόνια και 11 μήνες)

64 εμφανίσεις

HTML


HTML stands for
H
yper
T
ext
M
arkup
L
anguage


HTML is not a programming language, it is a
markup language



A markup language is a set of
markup tags



HTML uses
markup tags

to describe web
pages

Tags, Attributes, and Elements



The basic structure of an HTML document includes
tags
, which surround content and apply meaning to
it.


HTML tags are keywords surrounded by
angle
brackets
like <html>


HTML tags normally
come in pairs

like <h1> and
</h1>


The first tag in a pair is the
start tag,

the second tag
is the
end tag



Start and end tags are also called
opening tags

and
closing tags

Tags, Attributes, and Elements



Tags


<html>


<head>


<title>web technology</title>


</head>


<body>


Welcome to my web page


</body>


</html>


Tags, Attributes, and Elements



Attributes


Tags can also have
attributes
, which are extra bits of
information. Attributes appear inside the opening tag and their
their value is always inside quotation marks .


They look something like <tag attribute="value">text</tag>.


<html>


<head>


<title>web technology</title>


</head>


<body bgcolor="yellow" text="red">


Formatting my web page


<font face="comic sans MS" color="blue" size="4"><b>changing
the font</b></font>


</body>


</html>





Tags, Attributes, and Elements



Elements


Tags tend not to do much more than mark the
beginning and end of an
element
.


Elements are the bits that make up web
pages.



You would say, for example, that everything
that is in
-
between and includes the <body>
and </body> tags is the body element.



Example <title>Rumple Stiltskin</title>' is a
title
element
.

<html> Element...</html>


<html> begins and ends in each and every
web page.


Its sole purpose is to encapsulate all the
HTML code and describe the HTML
document to the web browser.


One should close our HTML documents with
the corresponding </html> tag at the bottom
of the document.

Paragraphs



If we want text to appear on different lines, we
need to explicitly state that.


The
p

tag is for
paragraph
.


<p>This is my first web page</p> <p>How
exciting</p>

Emphasis



You can emphasise text in a paragraph using
em

(emphasis) and
strong

(strong emphasis).


These are two ways of doing pretty much the same
thing,


although traditionally, browsers display
em

in italics
and
strong

in bold.

Line breaks



The line
-
break tag can also be used to
separate lines .


If we want more than one line breaks instead
of the paragraph tag we should use the line
break tag.


Example: <br><br>break tag can give more
than one line break while paragraph tag can
provide only one

Headings



If we have documents with genuine
headings
,


then there are HTML tags specifically
designed just for them.


They are
h1
,
h2
,
h3
,
h4
,
h5

and
h6
,

Headings example


<html>


<head>


<title>web technology</title>


<h1>Introduction</h1>


<h2>HTML</h2 >


<h2>DHTML</h2>


<h2>XHTML</h2>


</h3>VBscript</h3>


<h3>JavaScript</h3>


<h1>ASP</h1>



</head>

Drawing Lines


The tag <hr> draws lines and horizontal rules.


The attributes of <hr> tag are:
-


Align :Aligns line on the browser screen which is by
default aligned to the center.


Align=“left” :will align the line to the left of screen


Align=“right” :will align the line to the right of screen


Align=“ center “ :will align the line to the center of
screen


Size:Changes the size of the rule.


Width:Sets the width of the rule to a percentage of
available screen width.






Text Styles


Bold:
-
Displays text in bold face style.The tags
used are <b>…</b>


Italics:
-
Displays text in italics.The tags used
are between <I>…</I>


Underline:
-
Displays text as underlined.The
tags used are between <U>….</U>


Example:<B><I><U>Welcome to our home
page </U></I></B>


Text Effects


Font tag:
-
All text specified within the tags <font> and
</font> will appear in the font ,size and color as
specified as the attributes of the tag <font>.


Attributes


Face:Sets the font to the specified font name.


Size:Sets the size of the text.(range 1 to 7)


Color:Sets the color of the text


Example: <font face=“comic sans MS” size=“6”
color=“red”>Welcome to our home page</font>


Lists



There are three types of list;



unordered lists


ordered lists



definition lists
.


Unordered Lists


An unordered list or bulleted list starts with
the tag <UL> and </UL>


Each list item starts with the tag <LI>


The attributes with the tag<UL> are:
-



Type=“fillround”


Type=“square”


Example UL list


<ul type=“fillround”>types of memories</ul>


<li>floppy


<li>hard disk


<li>CDROM


</ul>

Ordered lists


Ordered lists or lists with numbering starts
with <OL> and ends with </OL>


Attributes


Type=“1”:will give counting numbers(1,2……)


Type=“A” will give uppercase
letters(A,B,C….)


Type=“a” will give lowercase letters(a,b,c….)


Type=“I”:will give uppercase roman numerals


Type=“I”:will give lowercase roman numerals

Ordered list


<ol type=“1”>


<li>C#</li>


<li>Internet Technology</li>


<li>crm</li>


<br>


</ol>



Definition Lists


Definition list values appear within tags <DL>


And</DL>


Definition Term: Appears after the tag <DT>


Definition Description: Appears After the tag
<DD>


CODE



<DL>


<DT>KEYBOARD


<DD>INPUT DEVICE


<DT>PRINTER


<DD>AN OUTPUT DEVICE


</DL>