Scribd
Upload
9 views126 pages

HTML Text Formatting and Lists Guide

This document provides an overview of HTML, focusing on text formatting, paragraph tags, and lists. It explains various HTML tags, their attributes, and examples for creating structured content on web pages. Key topics include paragraph alignment, text styling, lists, links, and comments in HTML.

Uploaded by

hhabtamu428
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
9 views126 pages

HTML Text Formatting and Lists Guide

This document provides an overview of HTML, focusing on text formatting, paragraph tags, and lists. It explains various HTML tags, their attributes, and examples for creating structured content on web pages. Key topics include paragraph alignment, text styling, lists, links, and comments in HTML.

Uploaded by

hhabtamu428
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd

Internet Programming

Chapter two

HTML

1 11/07/2025
How text inside paragraphs is displayed

Paragraph <P> Tag


 The Paragraph Tag will allow you to separate text
blocks.
 It tells the text to stop displaying on the current
line and drops the cursor down two lines to begin
the next line.
Attributes:
ALIGN= allows you to specify how your
paragraph should be aligned on the page.
Possible values are: LEFT, RIGHT and CENTER.
e.g: <P ALIGN="center">
2 11/07/2025
How text inside paragraphs is displayed

Example
<html>
<body>
<p>This paragraph contains a lot of lines</p>

<p>This paragraph contains a lot of spaces in


the source code, but the browser ignores
it.</p>
</body>
</html>

3 11/07/2025
HTML text formatting tags
Line Break <BR>
The Line Break Tag tells a line of text to stop
displaying on the current line and drops the
cursor to the beginning of the next line.
e.g: text on one line <BR> text on the next line
Heading <H#> </H#>
The Heading Tag allows you to define the size of
a block of text and Bold it in one step.
Possible values are H1, H2, H3, H4, H5, H6, H7.
H1 is the largest and H7 is the smallest.
e.g: <H1> header text here </H1>
4 11/07/2025
Comments in the HTML source

Comment <!-- --> tag


The Comment Tag allows you to add
comments to your source code that is NOT
visible on the page.
This is useful if you have a complicated set of
coding and need to keep notes within the
code.
Using the Comment Tag:
e.g: <!-- put your comment here -->

5 11/07/2025
Insert a horizontal rule
Horizontal Rule <HR> tag
Allows you to place a Horizontal Line on your
page.
The Horizontal Rule Tag is a one-sided tag (with
out the corresponding closing tag) – like <br> tag
Attributes:
 ALIGN= allows you to specify the horizontal alignment
of the line on your page. Possible values are: LEFT,
RIGHT and CENTER.
e.g: <HR ALIGN="center">
 COLOR= allows you to specify the color of the
horizontal line.
e.g: <HR COLOR="#rrggbb">
6 11/07/2025
Insert a horizontal rule…
SIZE= allows you to specify the height, in
pixels, of the horizontal line.
e.g: <HR SIZE="5">
SRC= allows you to specify an image to be
used as your horizontal line.
e.g: <HR SRC="[Link]">
WIDTH= allows you to define how wide the
horizontal line should appear on your page.
You can use a percentage of the page ("50%")
or the exact number of pixels ("200").
e.g: <HR WIDTH="50%" or "200">

7 11/07/2025
Text formatting
Bold , strong and big tag
These Tags allows you add boldface
formatting to text.
e.g: <B> text you wish to appear bold
here </B> <strong> text
you wish to appear bold here </strong>
<big> text you wish to appear bold
here </big>
Emphasized <EM> </EM>
The emphasized tag defines text that
should be emphasized
8 Most browsers will display it in italics. 11/07/2025
Text formatting…
HTML Marked Formatting
 The HTML <mark> element defines marked or
highlighted text:
Example
<h2>HTML <mark>Marked</mark> Formatting</h2>
Italics <I> </I>
 The Italic Tag allows you add italic formatting to text.
e.g: <I> text you wish to appear italic here </I>
Underline <u> </u>
 The Underline Tag allows you add underline
formatting to text.
e.g: <u> text you wish to appear underline here </u>

9 11/07/2025
Text formatting…
Small <small> </small>
 Allow you to add small font size text.
e.g: <small> text</small>
subscript <sub> </sub>
 The subscript Tag allows you add subscript formatting
to text.
e.g: <sub> text you wish to appear subscript here
</sub>
Superscript <sup> </sup>
 The subscript Tag allows you add superscript
formatting to text.
e.g: <sup> text you wish to appear superscript here
</sup>
10 11/07/2025
Example for Text Formatting
<html><body>
<b>This text is bold</b><br>
<strong> This text is strong</strong><br>
<big> This text is big</big><br>
<em> This text is emphasized</em><br>

<i>This text is italic</i><br>


<u>this is underlined text</u><br>
<small>This text is small</small><br>
This text contains subscript
H<sub><small>2</small> </sub>O<br>
This text contains superscript
pi r <sup><small>2</small></sup>
</body></html>

11 11/07/2025
Text formatting…
Pre-formatted Text <PRE> </PRE>
The preformatted text tag defines text
that should be shown in a fixed width,
line breaks and other white space
specified by the page author.
There is no need to use <BR> tags to
indicate line breaks
In addition multiple spaces will be
displayed as multiple spaces.
Typically used for several lines of program
code
12 11/07/2025
Text formatting…
Example
<html><body>
<p>The pre tag is good for displaying
computer code </p>
<pre>
for i = 1 to 10
print I
next I
</pre></body></html>

13 11/07/2025
Text formatting…

Insert an address
Address tag <address> </address>
It is a standard to put address texts inside
the address tags.
Example
<html><body>
<address> Mizan-Tepi University <br> BOX
121 <br>Tepi<br> Ethiopia </address>

</body></html>
14 11/07/2025
Text formatting…
Acronyms <acronym> </ acronym >
Are used to write short representation of
words.
Acronym works only for in IE 5, in Netscape
6.2 and later.
Attributes:
TITLE= is used to show the spelled-out
version when holding the mouse pointer
over the acronym.
 e.g: <acronym title="World Wide
Web">WWW</acronym>
15 11/07/2025
Text formatting…
Bi Directional Override <bdo> </bdo>
 The <bdo> element overrides the default text direction.
Attributes:
 DIR= allows you to specify the text direction, it takes the
value “ltr” for left to right expression and “rtl” expression
 e.g: <bdo dir = dir="rtl"> the text goes here!</bdo>
Example
<html><body>
<p>If your browser supports bi-directional override
(bdo), the next line will be written from the right to the
left (rtl):</p>
<bdo dir="rtl">Here is some Hebrew text</bdo>
</body></html>

16 11/07/2025
How to mark deleted and inserted text
Deleted and Inserted texts <del> </del>,
<ins> <ins>
If we want to Change information in your
website you need to insert the former inside
the <del> tag which will be replaced by the
new one inside the <ins> tag.
Most browsers will overstrike deleted text and
underline inserted text.
e.g: < del> former information here </del>
<ins> the new information goes
here </ins>
17 11/07/2025
HTML Lists
 HTML supports ordered, unordered and definition lists.
An unordered list
 An unordered list is a list of items where the list items
are marked with bullets.
 An unordered list starts with the <ul> tag.
 Each list item starts with the <li> tag.
An unordered list example
<html><body>
<h4>An Unordered List:</h4>
<ul> <li>Coffee</li>
<li>Tea</li>
<li>Milk</li></ul>
</body></html>

18 11/07/2025
HTML Lists…
An ordered list
 An ordered list is a list of items where items are
marked with numbers.
 An ordered list starts with the <ol> tag.
 Each list item starts with the <li> tag.
An ordered list example
<html><body>
<h4>An Ordered List:</h4>
<ol start=“4” type=“1”> <li>Coffee</li>
<li>Tea</li>
<li>Milk</li></ol>
</body></html>

19 11/07/2025
HTML Lists…
Attributes
 TYPE= allows you to specify how specific 'bullets' or
'numbers' will appear on the list.
 Possible values are SQUARE, DISC, CIRCLE for Unordered
Lists, and A, a, I, i, 1 for Ordered Lists as shown below:
 Unordered List
 TYPE="circle"
 TYPE="square"
 TYPE="disc"
 Ordered List
 TYPE="A" (Upper Case Letters... ie, A,B,C etc.)
 TYPE="a" (lower case letters... ie, a,b,c etc.)
 TYPE="I" (Upper Case Roman Numerals... ie,II,III,IV etc.)
 TYPE="i" (lower case roman numerals... ie,ii,iii,iv etc.)
 TYPE="1" (Standard numbers... ie, 1,2,3 etc.

20 11/07/2025
HTML Lists…
Example Nested list
<html> <body>
<h4>A nested List:</h4>
<ul> <li>Coffee</li>
<li>Tea</li>
<ul>
<li>Black tea</li>
<li>Green
tea</li>
</ul>
<li>Milk</li>
</ul>
</body> </html>

21 11/07/2025
HTML Lists…
Definition list
A definition list is not a list of items.
This is a list of terms and explanation of the
terms.
A definition list starts with the <dl> tag.
Each definition-list term starts with the
<dt> tag.
Each definition-list definition starts with the
<dd> tag.

22 11/07/2025
HTML Lists…
 Example for Definition list
<html> <body>

<h4>A Definition List:</h4>


<dl>
<dt>Coffee
<dd>Black hot drink
<dt>Milk
<dd>White cold drink
<dd>White hot drink
</dl>
</body> </html>

23 11/07/2025
HTML Link
 HTML uses a hyperlink to link to another document
on the Web.
 HTML uses the <a> (anchor) tag to create a link to
another document.
 An anchor can point to any resource on the Web: an
HTML page, an image, a sound file, a movie, etc.
 The syntax of creating an anchor: <a
href="url">Text to be displayed</a>
 The href attribute is used to address the document
to link to.
 The words between the open and close of the
anchor tag will be displayed as a hyperlink.

24 11/07/2025
HTML Link…
When you move the mouse cursor over a
link, two things will normally happen:
The mouse arrow will turn into a little hand
The color of the link element will change
By default, links will appear as this in all
browsers:
An unvisited link is underlined and blue-Link
An active link is underlined and red-Alink
A visited link is underlined and purple-VLink

25 11/07/2025
HTML Link…
Attributes:
HREF= Hypertext Reference. This attribute
must be used to create a link
e.g: <A HREF="[Link]
text</A>
NAME= Use this to provide an Anchor Name.
To create a book mark inside a document.
e.g: <A NAME="anchorname">topic name</A>
Link to the Anchor Name like this:
e.g: <A HREF="#anchorname">link text</A>
TARGET= allows you to specify a Frame or New
Window to open a page in.
26 11/07/2025
HTML Link…
Target attribute has several values of it's own:
 "_blank" Will cause the link to be loaded into a
new blank window
 "_top" Will cause the link to be loaded into the
full body of the current window

27 11/07/2025
HTML Link…
Example How to create hyperlinks
<html><body>
<p><a href="[Link]">This text</a> is a link to a page on this Web
site.</p>
<p> <a href="[Link] This text</a> is a link on the
World Wide Web.</p>
</body></html>
Open a link in a new browser window
<html><body>
<a href="[Link]" target="_blank">Last Page</a>
</body></html>
Set an image as a link
<html><body>
<a href=“[Link]"><img border="0" src="[Link]" width="65”
height="38"></a>
</body></html>
28 11/07/2025
HTML Link…
Jump to another part of a document (on the same
page)
<html> <body>
<a href="#C4">See also Chapter 4.</a>
<h2><a name="ch1">Chapter 1</a></h2>
<h2>Chapter 2</h2>
<br> <br><br><br><br><br><br><br>
<h2>Chapter 3</h2>
<br><br><br><br><br><br><br><br>
<h2><a name="C4">Chapter 4</a></h2>
<br><br><br><br><br><br><br><br>
<a href=”#ch1”> return to chapter one</a>
<h2>Chapter 5</h2>
<br><br><br><br><br><br><br><br><br>
</body></html>
29 11/07/2025
How to insert image to HTML
page
Image <IMG>
 The Image Tag allows you to embed images into your
web page.
 This is a one-sided tag and does not require a closing
tag.
 Note: The <IMG> Tag requires you always use the
SRC= attribute.
Attributes:
 ALIGN= this allows you to specify how the text next
to the image should be aligned in relation to the
image.
Possible values for this attribute are LEFT, RIGHT,
TOP, MIDDLE, BOTTOM.
e.g: <IMG ALIGN="bottom">
30 11/07/2025
How to insert image to HTML
page…
 ALT= allows you to provide text which will be displayed in
browsers that do not display images.
 The text will also display in browsers able to display images
and this can be used to provide more detail about the image
or the image function.
e.g: <IMG ALT="text you wish to display here">
 BORDER= allows you to set the width of the border in the
number of pixels.
 Using a border value of 0 will remove the border around the
image.
e.g: <IMG BORDER="0">
 HEIGHT= This specifies the height of the image, according to
the UNITS attribute.
e.g: <IMG HEIGHT="250">
 HSPACE= allows you to specify the amount of Horizontal space,
in pixels, on each side of the image.
e.g: <IMG HSPACE="5">
31 11/07/2025
How to insert image to HTML
page…
 LOWSRC= allows you to specify that a secondary image be
loaded while the original, or primary, image is loading.
 This is useful when you are using image files that have very
large file sizes.
 You can preview a smaller less graphically intense image while
the visitor waits for the original image to load.
e.g: <IMG LOWSRC="[Link]">
 SRC= allows you to define a static image file you wish to display
on your page.
 You can enter the URL to the file, or just the filename.
e.g: <IMG SRC="[Link]">
 VSPACE= allows you to specify the amount of Vertical space, in
pixels, above and below the image.
e.g: <IMG VSPACE="5">
 WIDTH= allows you to specify the width of the image.
e.g: <IMG WIDTH="250">
32 11/07/2025
HTML Table
 Tables is a grid consisting of cells arranged in
columns and rows, where each cell can be spanned
for more than one column or rows.
Attributes of table tag
 Align="{right: left: center} "; aligns the table
either to the right, left or center.
 background=" URL" , set the background with the
specified URL image.

 bgcolor=" #color" , sets the background color for


the table
 Border="n", where n specifies the thickness of the
border in pixels .
33 11/07/2025
HTML Table…
Width="n" or "(n %)", where n specifies
the width of the table in pixels or we can
specifies the width of the table in
percentage in relative to the size of the
screen.
Height= "n" or " (n %)" where n specifies
the height of the table in pixels or
percentage in relative to the size of the
screen.
Bordercolor="color “, set a color for a
table border
34 11/07/2025
HTML Table…
Tags inside a table tag
 With in the table tag we need to define one or more table rows
using the table row tags <tr></tr>.
 With in each rows of a table we can define one or more cells
using the table data tags <td></td>.
 The table heading tags <th></th> can be substituted for the
table data tags.
The difference is that the table heading is displayed in bold
face.
 Like the table tag, the table data and heading tags <td> and
<th> also has attributes mentioned above.
 Within the table data tag and heading tag you can place any
HTML tag, including another table.
 If you want your table to have a title. You can put the title
enclosed in the <caption></caption> tags just after the <table>
tag.
35 11/07/2025
HTML Table…

HTML <tr> tag


Defines a row in a table.

Attribute Value Description

align Right, left, Defines the text alignment in


center, cells
justify, char
bgcolor colorname Specifies the background color
of the table cell.
valign Top, middle, Specifies the vertical text
bottom alignment in cells
baseline

36 11/07/2025
HTML Table…
Example
<html><body><table border = "1">
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
<tr>
<td>Cell C</td>
<td>Cell D</td>
</tr>
</table></body></html>
37 11/07/2025
HTML Table… <td> tag
Defines a cell in a table.
A cell is a crossectional area made by
combination of rows and columns.
Attribut Value Description
e
align Left, right, Specifies the horizontal alignment of
center cell content
justify, char
bgcolor Color name Specifies the background color of
the table cell.
colspan number Indicates the number of columns
this cell should span
height pixels Specifies the height of the table cell.
rowspan number Indicates the number of rows this
cell should span
valign Top, middle, Specifies the vertical alignment of
bottom cell content
baseline
width pixels Specifies the width of the table cell.
%

38 11/07/2025
HTML Table…
HTML <th> tag
Defines a table header cell in a table.
Attribute Value Description
align Left, right, Specifies the horizontal alignment of cell
center content
justify, char
bgcolor colorname Specifies the background color of the table
cell.
colspan number Indicates the number of columns this cell
should span
height pixels Specifies the height of the table cell.
rowspan number Indicates the number of rows this cell
should span
valign Top, middle, Specifies the vertical alignment of cell
bottom content
baseline
width pixels Specifies the width of the table cell.
%

39 11/07/2025
HTML Table…
Example
<html><body><table border = "1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table></body></html>
40 11/07/2025
HTML Table…
HTML <caption> tag
This element defines a table caption.
The <caption> tag must be inserted
immediately after the <table> tag.
You can specify only one caption per table.
Usually the caption will be centered above
theAttribute
table. Value Description
align Left, How to align the
right, caption.
top,
bottom

41 11/07/2025
HTML Table…
Example
<html><body><table border="1">
<caption>This is a caption</caption>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table></body></html>

42 11/07/2025
Example of tables
<Html>
<body><table border="1" width="50%"
height="10%" bgcolor="yellow" >
<caption align="center">table with one column and
row</caption>
<tr> <td>jhone</td> </tr>
</table><br><br>
<table border="2" width="50%" height="20%"
bgcolor="silver">
<caption> table with one row and three
columns:</caption>
<tr> <td>ana</td>
<td>kit</td>
<td>john</td></tr></table><br><br>
</body></html>
43 11/07/2025
HTML Table…
Table cells that span more than one column
<html>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr> <th>Name</th> <th
colspan="2">E-mail</th> </tr>
<tr> <td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td></tr>
</table>
</body></html>
44 11/07/2025
HTML Table…

Table cells that span more than one raw


<html>
<body>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr> <th>First Name:</th>
<td>Bill Gates</td></tr>
<tr> <th rowspan="2">Telephone:</th>
<td>555 77 854 </td> </tr>
<tr> <td>555 77 855</td></tr>
</table></body></html>

45 11/07/2025
HTML Form
Html forms is a section of a document containing
controls such as checkbox, text box, radio buttons
and likes
While almost all other elements in HTML are for
controlling the display and presentation, HTML
FORM and INPUT tags add interactivity to the web
site.
They are used to pass data to the server.
The HTML forms handle very important operations
for the website like taking orders and user
registration.
The Form Tag allows you to set up an online form
that visitors can fill out and send you information.
46 11/07/2025
HTML Form …
HTML form attributes
 ACTION=This Attribute specifies the page which handles the
input from the user.
 Usually, this will be a script that processes the data supplied by
the user. (Like storing the information in database, completing
the order etc)
e.g:<FORM ACTION="[Link]
 METHOD ="GET"|"POST" ( is either GET or POST.)
If you use GET method, the input values are passed as part of
the URL.
If it is POST, the information is sent to the server as part of the
data body and will not be visible in the URL box in the user's
browser.
If you don't specify the method, GET is taken by default.
e.g: <FORM METHOD="POST" or "GET">
 Forms use several different INPUT tags to specify the type of
information you want, and the way it is displayed:
47 11/07/2025
HTML Form …
Form Check Box <INPUT TYPE="CHECKBOX">
 The Check Box allows you to place a small box in your
form that can be checked on or off.
 Check Boxes allow you to specify several possible
answers to a question.
Attributes:
 ALIGN= allows you to specify the position of the field.
Possible values are: TOP, BOTTOM, MIDDLE, LEFT or
RIGHT.
e.g: <INPUT TYPE="CHECKBOX" ALIGN="bottom">
 CHECKED allows you to specify a box or boxes which
are pre-checked by default.
e.g: <INPUT TYPE="CHECKBOX" CHECKED>

48 11/07/2025
HTML Form …
Attributes…
DISABLED allows you to display a field but the
visitor will not be allowed to enter information
into the field.
e.g: <INPUT TYPE="CHECKBOX" DISABLED>
NAME= allows you to specify the name of the
form.
e.g: <INPUT TYPE="CHECKBOX" NAME="my
form">
VALUE= allows you to specify which value is
returned if the box is checked.
e.g <INPUT TYPE="CHECKBOX" VALUE="Yes">

49 11/07/2025
HTML Form …
Example
<html><body><b> Select your color
choices</b><br>
<FORM ACTION="[Link]
METHOD="POST">
Red:<INPUT TYPE="CHECKBOX" ALIGN="top" CHECKED
NAME="my form" VALUE="Yes”><br>
Green:<INPUT TYPE="CHECKBOX" DISABLED
NAME="my form"> <br>
Blue:<INPUT TYPE="CHECKBOX" NAME="my
form"><br>
Yellow:<INPUT TYPE="CHECKBOX" NAME="my form">
</form></body></html>
50 11/07/2025
 int pop()
{
int del_val = 0;
if(top == -1)
 cout<<"Stack underflow"; /*step-1*/
else
{
del_val = stack[top]; /*step-2*/
stack[top] = NULL;
top = top -1;
}
return(del_val);
}
 Note: - Step-2:(b) signifies that the respective element
has been deleted.
51 11/07/2025
HTML Form …
Form Input Text <INPUT TYPE="TEXT">
 The text type input tag specifies a single line text
entry field within the form that contains it.
 The NAME attribute is a required field and is used to
identify the data for the field.
Attributes:
 ALIGN= allows you to align your button.
Possible values are: TOP, BOTTOM, MIDDLE, LEFT or
RIGHT
e.g: <INPUT TYPE="TEXT" ALIGN="bottom">
 DISABLED allows you to display a field but the visitor
will not be allowed to enter information into the field.
e.g: <INPUT TYPE="TEXT" DISABLED>

52 11/07/2025
HTML Form …
 NAME= allows you to specify a name for the form.
e.g: <INPUT TYPE="TEXT" NAME="name here">
 MAXLENGTH= allows you to specify the maximum
number of characters a visitor can enter into the field.
If you do not set this value there will be no limit to the
amount of characters a visitor can enter.
e.g: <INPUT TYPE="TEXT" MAXLENGTH="80">
 SIZE= allows you to set the width of the field that is
displayed to the visitor.
e.g: <INPUT TYPE="TEXT" SIZE="20">
 VALUE= allows you to specify the value associated
with this field.
e. g: <INPUT TYPE="TEXT" VALUE="value here">

53 11/07/2025
HTML Form …
Example
<html><body>
<FORM ACTION="[Link]
METHOD="get"> Enter the following data :<br>
First Name :<INPUT TYPE="text" DISABLED> <br>
Middle Name :<INPUT TYPE="text" ALIGN="bottom"
MAXLENGTH="80> <br>
Last Name:<INPUT TYPE="text" ALIGN="bottom"
SIZE="20"> <br>
Age:&nbsp;&nbsp; <INPUT TYPE="text" VLUE="20">
<br>
</form></body></html>

54 11/07/2025
HTML Form …
Form Input Radio Button <INPUT TYPE="RADIO">
 The Radio Button allows you to ask visitors to choose
ONE option of several.
 You cannot select more than one radio button.
 Use the Check Box if you have more than one possible
option for visitors to choose.
Attributes:
 ALIGN= allows you to align your button.
 Possible values are: TOP, BOTTOM, MIDDLE, LEFT or RIGHT
e.g: <INPUT TYPE="RADIO" ALIGN="bottom">
 CHECKED allows you to set a radio button as a pre-
selected default choice.
 Only one button should ever have this option
e.g: <INPUT TYPE="RADIO" CHECKED>
55 11/07/2025
HTML Form …
DISABLED allows you to display a field but
the visitor will not be allowed to enter
information into the field.
e.g: <INPUT TYPE="RADIO" DISABLED>
NAME= allows you to specify the name of the
form and is required for the radio button to
work properly.
e.g: <INPUT TYPE="RADIO" NAME="name
here">
VALUE= allows you to specify what the value
for the radio button is.
e.g: <INPUT TYPE="RADIO" VALUE="Yes">
56 11/07/2025
HTML Form …
Example
<html>
<body>
<FORM ACTION=[Link]
METHOD="get">
Please select your Nationality:<br>
Ethiopian <input type="radio" value="1"
name="Nationality"><br>
American <input type="radio" value="2"
name="Nationality"><br>
Japanese <input type="radio" value="3“
name="Nationality"><br>
</form></body>
</html>
57 11/07/2025
HTML Form …
Form Input Submit <INPUT TYPE="SUBMIT">
 The Input Submit tag allows you to create button in your form
that visitors can use to click on and submit the form information
to you.
Attributes:
 ALIGN= allows you to align your button.
 Possible values are: TOP, BOTTOM, MIDDLE, LEFT or RIGHT
e.g: <INPUT TYPE="SUBMIT" ALIGN="bottom">
 DISABLED allows you to display a field but the visitor will not be
allowed to enter information into the field.
e.g: <INPUT TYPE="SUBMIT" DISABLED>
 NAME= allows you to specify a name for the form.
e.g: <INPUT TYPE="SUBMIT" NAME="name here">
 VALUE= allows to specify the text that appears on the button
that is created.
e.g: <INPUT TYPE="SUBMIT" VALUE="Submit Your Info Now">

58 11/07/2025
HTML Form …
Example
<html><body>
<FORM ACTION="[Link]
METHOD="get">
click Submit to enter your data :<br>
<INPUT TYPE="SUBMIT" ALIGN="bottom"> <br>
<INPUT TYPE="SUBMIT" ALIGN="bottom"
DISABLED> <br>
<INPUT TYPE="SUBMIT" ALIGN="bottom"
VALUE="Submit Your Info Now">
</form></body>
</html>
59 11/07/2025
HTML Form …
Form Input Image <INPUT TYPE="IMAGE">
 The Input Image Tag allows you to specify image that
your visitor can use to click on to submit the information
in the form to you.
Attributes:
 ALIGN= allows you to align images and text in the same
manner as the <IMG> Tag.
Possible values are: TOP, BOTTOM, MIDDLE, LEFT or RIGHT
e.g: <INPUT TYPE="IMAGE" ALIGN="bottom">
 NAME= allows you to specify a form name.
e.g: <INPUT TYPE="IMAGE" NAME="name here">
 SRC= allows you to define the full URL to an image you
want to display or specify an image filename.
e.g: <INPUT TYPE="IMAGE" SRC="[Link]">

60 11/07/2025
HTML Form …
<html><body>
<FORM
ACTION="[Link]
METHOD="POST">
<INPUT TYPE="IMAGE" align="left"
src="[Link]" width="100"
height="100">
</form>
</body></html>

61 11/07/2025
HTML Form …
Form Input Password <INPUT TYPE="PASSWORD">
 The Input Password Tag specifies a text field that you
can use to have visitors enter a password .
 The password will be hidden as it is entered (usually by
replacing the characters with asterisks)
 The NAME attribute is required in this tag.
Attributes:
 ALIGN= allows you to align your entry field.
Possible values are: TOP, BOTTOM, MIDDLE, LEFT or RIGHT
e.g: <INPUT TYPE="PASSWORD" ALIGN="bottom">
 DISABLED allows you to display a field but the visitor
will not be allowed to enter information into the field.
e.g: <INPUT TYPE="PASSWORD" DISABLED>

62 11/07/2025
HTML Form …
MAXLENGTH= allows you to specify the maximum
number of characters that can be entered into this
field.
If you do not specify a value here there will be no limit to
the number of characters visitors can enter.
e.g: <INPUT TYPE="PASSWORD" MAXLENGTH="80">
NAME= allows you to specify the name of the form.
You must have this attribute set in the password input tag.
e.g: <INPUT TYPE="PASSWORD" NAME="name here">
SIZE= allows you to specify how wide the entry field is
displayed in the visitors browser.
The default entry field size varies from browser to
browser.
e.g: <INPUT TYPE="PASSWORD" SIZE="20">

63 11/07/2025
HTML Form …
Example
<html><body>
<FORM
ACTION="[Link]
METHOD="POST">
<INPUT TYPE="PASSWORD" ALIGN="bottom"
NAME="name here"><br>
<INPUT TYPE="PASSWORD"
MAXLENGTH="4">
</body>
</html>
64 11/07/2025
HTML Form …
Form Input Reset <INPUT TYPE="RESET">
 The Input Reset Tag allows you to create a button in your
form that visitors can use to click on and clear all the fields
in that particular form.
e.g: <INPUT TYPE="RESET">
Example
<html><body>
<FORM ACTION="[Link]
METHOD="get">
click reset to enter your data again:<br>
<INPUT TYPE="RESET">
</form>
</body></html>
65 11/07/2025
HTML Form …
Form Select <SELECT> </SELECT>
 The Form Select Tags allows you to create drop-down
boxes with different options listed.
 This tag works in conjunction with the <OPTION> Tag
to define the individual choices you want in the drop
down box.
Attributes:
 ALIGN= allows you to align your button.
Possible values are: TOP, BOTTOM, MIDDLE, LEFT or RIGHT
e.g: <SELECT ALIGN="bottom">
 DISABLED allows you to display an option field but the
visitor will not be allowed to select it.
e.g: <SELECT DISABLED>

66 11/07/2025
HTML Form …
 MULTIPLE allows you to specify that a visitor can choose
multiple options.
e.g: <SELECT NAME="name here" MULTIPLE>
 NAME= allows you to specify a name for the field.
e.g: <SELECT NAME="name here">
 SELECTED allows you to specify which option item will be
displayed to the visitor as the default choice.
e.g:
<SELECT>
<OPTION SELECTED>Item 1
<OPTION> Item 2
</SELECT>
 SIZE= allows you to specify how many lines of options will
be displayed. Default is 1.
e.g: <SELECT SIZE="5">
67 11/07/2025
HTML Form …
Example
<html><body>
<FORM ACTION="[Link]
METHOD="get">
<h4>Select one item</h4>
<SELECT ALIGN="bottom" MULTIPLE NAME="name here"
size="3">
<OPTION >Item 1
<OPTION >Item 2
<OPTION SELECTED>Item 3
<OPTION >Item 4
</SELECT><br><br>
</form> </body>
</html>
68 11/07/2025
HTML Form …
Form Textarea <TEXTAREA></TEXTAREA>
 The Textarea Tag allows you to define a multiple
line text entry field that visitors can type large
amounts of information into.
Attributes:
 ALIGN= allows you to align your text area box.
Possible values are: TOP, BOTTOM, MIDDLE, LEFT
or RIGHT
e.g: <TEXTAREA ALIGN="bottom">
 COLS= allows you to specify the width in
characters of the text area
e.g: <TEXTAREA COLS="40">

69 11/07/2025
HTML Form …
DISABLED allows you to display an option field
but the visitor will not be allowed to fill in to it.
e.g: <TEXTAREA DISABLED>
ROWS= allows you to specify the number of
lines the text area contains.
e.g: <TEXTAREA ROWS="4">
WRAP= allows you to define how the words
that the visitors enter will be wrapped in the
box, or let you disable wrapping altogether.
Possible Values are: OFF, SOFT, HARD, PHYSICAL
and VIRTUAL.
e.g: <TEXTAREA WRAP="virtual">

70 11/07/2025
HTML Form …
Example
<html>
<body>
<FORM
ACTION="[Link]
METHOD="get">
<h4>Enter your segestion here</h4>
<TEXTAREA ALIGN="bottom" COLS="20"
ROWS="4" WRAP="hard">
</textarea>
</form></body></html>
71 11/07/2025
HTML Form …
How does a web form work?
A visitor visits a web page that contains a
form.
The web browser displays the HTML form.
The visitor fills in the form and submits
The browser sends the submitted form data
to the web server
A script running on the web server processes
the form data
A response page is sent back to the browser.

72 11/07/2025
HTML Frames
 It allows you to display several WebPages on a single screen, one
page per frame.
 To do so we need to create a separate “FRAMESET” file that
defines this set of or collection of frames.
 Note: that the frameset tag (<frameset> </frameset>) replaces
the <body> tag.
 You can control the number of frames and the size of each frame
in frameset by using either the rows or cols attribute.
 Rows: attribute divides the screen horizontally in to frames from
top to bottom and
 Cols: attribute divides the screen vertically into frames from left
to right.
 We separate each frame by comma and define the size of the
frame in absolute pixel, as a percentage of the entire screen, or
by using a strike (*) i.e. to tell the browser to use whatever space
is left on the screen.

73 11/07/2025
HTML Frames…
 The frameset takes the following format:
<FRAMESET ROWS="numbers, percentages,*"
COLS="numbers, percentages, *">
 An example like the following would create two
rows: one 50 pixels long and another row that
took up the rest of the page:
<FRAMESET ROWS="50,*">
<FRAMESET COLS="25%, 75 %">
 After we define the frame set you need to tell the
browser what web page goes into each frame, to
do this we use the frame tag (<frame>) and its
SRC attribute to reference a web page.

74 11/07/2025
HTML Frames…
Example for create a vertical frameset
with 3 different documents
<Html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.htmll">
<frame src="frame_b.html">
<frame src="frame_c.html">
</frameset>
</html>

75 11/07/2025
HTML Frames…
How to create a horizontal frameset with 3
different documents
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.html">
<frame src="frame_b.html">
<frame src="frame_c.html">
</frameset>
</html>

76 11/07/2025
HTML Frames…
How to mix a frameset in rows and
columns
<html>
<frameset rows="50%,50%">
<frame src="frame_a.htm">
<frameset cols="25%,75%">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</frameset></html>

77 11/07/2025
HTML Frames…
Example of Frame
<html>
<frameset rows="20%,60%,20%">
<frame src="[Link]">
<frameset cols=“35%,*”>
<frame src="[Link]">
<frame src="[Link]">
</frameset>
<frame src="[Link]">
</frameset>
</html>
78 11/07/2025
HTML Frames…
Jump to a specified section within a
frame

<html>
<frameset cols="20%,80%">
<frame src="[Link]">
<frame src="[Link]#C10">
</frameset>
</html>

79 11/07/2025
HTML Frames…
Some attributes of <frame> tag
Scrolling=“yes: no: auto” :- it is used to
determine weather the frame should have a
scrollbar or no
Noresize:- it indicates that the frame is not
resizable by dragging the border.
Marginwidth=“n”:-is used to control the
margin of a text or an image, where “n”
specifies the margin in pixel.
Marginheight=“ n”:- is used to control the
upper and the lower margin of a text or an
image, where “n” specifies the margin in pixel.
80 11/07/2025
HTML Frames…
Some attributes of <frame>tag …
Name=“name”:- this attribute assigns a
name to the current frame. This name may
be used as the target of subsequent links.
Src=“url”:- This attribute specifies the
location of the initial contents to be
contained in the frame.
Frameborder=“1 : 0”:- This attribute
provides the user with information about
the frame border.

81 11/07/2025
HTML Frames…
Some attributes of <frameset>tag
 Frameborder=”1:0”:- attribute provides the user with
information about the frame border in all frames in the
frameset.
 Framespacing=”n”:- sets the thickness of the border
between the frames in the frameset.
The <NOFRAMES> Tag
 This container tag is used to contain HTML tags intended
for browsers that do not support the frames specification.
 Text and HTML tags inside the <NOFRAMES> container
are ignored by frames-capable browsers.
 All others browser ignore the frames tags (which they
won't recognize), but display the text in between the
<NOFRAMES> tags.
82 11/07/2025
HTML Frames…
How to use Noframe
<html>
<frameset cols="25%,75%">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
<noframe>
<body>
<h3> the frame equivalent will go here</h3>
</body>
</noframe>
</html>
83 11/07/2025
Marquee <MARQUEE>
</MARQUEE>
 The Marquee Tag gives you the ability to set up blocks of
text or objects that move around the page when the
visitor views the page.
Attributes:
 ALIGN= used to set the location of the surrounding text.
Possible values can be: TOP, BOTTOM, or MIDDLE.
e.g: <MARQUEE ALIGN="bottom">
 BEHAVIOR= this allows you to define how the text in the
Marquee behaves.
Possible values are: SCROLL, SLIDE and ALTERNATE.
e.g: <MARQUEE BEHAVIOR="scroll">
 BGCOLOR= allows you to set the background color of the
Marquee text area.
e.g: <MARQUEE BGCOLOR="#000000">

84 11/07/2025
Marquee <MARQUEE>
</MARQUEE>
 DIRECTION= allows you to specify which direction the text
will move.
 Possible values are: LEFT and RIGHT.
e.g: <MARQUEE DIRECTION="left">
 HEIGHT= allows you to specify the height of the Marquee
text area.
 Use absolute pixel size or a percentage of the height of the
page.
e.g: <MARQUEE HEIGHT="50%"> or <MARQUEE
HEIGHT="200">
 LOOP= allows you to define how many times the text
should move across the screen.
e.g: <MARQUEE LOOP="10">
 Using the value "INFINITE" will move the text continuously as
long as the page is open.
e.g: <MARQUEE LOOP="infinite">
85 11/07/2025
Marquee <MARQUEE>
</MARQUEE>
SCROLLDELAY= allows you to define the
delay, in milliseconds, between drawings.
e.g: <MARQUEE SCROLLDELAY="20">
WIDTH= allows you to specify the width of
the Marquee text area. Use absolute pixel
size or a percentage of the width of the
page.
e.g: <MARQUEE WIDTH="200"> or
<MARQUEE WIDTH="50%">

86 11/07/2025
Marquee <MARQUEE>
</MARQUEE>
Example
<html>
<body>
<h1><marquee BGCOLOR="YELLOW"
BEHAVIOR="scroll" DIRECTION="right" WIDTH="50%"
SCROLLDELAY="2" >
Computer science
</marquee></h1>
</body>
</html>

87 11/07/2025
HTML Character Entities
 Some characters have a special meaning in HTML, like
the less than simbol (<) that defines the start of an
HTML tag.
 If we want the browser to actually display these
characters we must insert character entities in the
HTML source code.
 A character entity has three parts:
an ampersand (&), an entity name and finally a
semicolon (;) or
&# , an entity number, and finally a semicolon (;).
 To display a less than sign in an HTML document we
must write: &lt; or &#60;
 Note: that the entitie names are case sensitive.

88 11/07/2025
HTML Character Entities…
The most common character entity in HTML
is the non-breaking space.
Normally HTML will truncate spaces in your
text.
If you write 10 spaces in your text HTML will
remove 9 of them.
To add spaces to your text, use the &nbsp;
character entity.

89 11/07/2025
HTML Character Entities…

The Most Common Character Entities:

Entity Entity
Result Description
Name Number
non-
breaking &nbsp; &#160;
space
< less than &lt; &#60;
greater
> &gt; &#62;
than
ampersan
& &amp; &#38;
d
quotation
" &quot; &#34;
mark
&apos;
90 apostroph (does 11/07/2025
' &#39;
e not work
Coding Sound in HTML
Sound Formats
There are many sound formats supported by web
page.
The three most popular formats are WAVE, AU, and
MIDI.
WAVE (Waveform Audio File Format, with the file
extension .wav) was invented for Windows by Microsoft.
AU (Audio File Format, file extension .au) was invented
by Sun. It is widely accepted on many platforms, and are
common on web pages.
MIDI (Musical Instrument Digital Interface)
 The standard file extensions for MIDI are ".mid" and ".midi".

The simplest way to call a sound file is to simply put a


link to the file.
91 11/07/2025
Coding Sound in HTML…
Example
<html>
<body>
<a href="[Link]"> Play My
Song </a>
</body>
</html>

92 11/07/2025
Coding Sound in HTML…
Embedding a background sound
It is also possible to embed a media into the html
code for a page so that it will play in the background.
Background Sound <BGSOUND>
introduced by Microsoft
Attributes:
SRC= allows you to specify the filename of the sound
file
e.g: <BGSOUND SRC="[Link]:>
LOOP= allows you to specify how many times you
want the sound file to play
e.g: <BGSOUND LOOP="5">

93 11/07/2025
Cascading Style Sheets
CSS is a web page layout method that has been
added to html to give web developers more
control over their design and content layout.
Allow as to separate our website html content
from its style.
It allow as to create a standard set of command
that control the style and format of a webpage.
CSS defines HOW HTML elements are to be
displayed.
External Style Sheets are stored in CSS files (.css
files extension)
All browsers support CSS today.

94 11/07/2025
Cascading Style Sheets
A CSS rule set consists of a selector and a
declaration block:

The selector points to the HTML element you want to


style.
The declaration block contains one or more
declarations separated by semicolons.
Each declaration includes a property name and a
value, separated by a colon.
95 11/07/2025
Cascading Style Sheets
A CSS declaration always ends with a
semicolon
Declaration groups are surrounded by curly
braces:
Example
p{
color:red;
text-align:center;
}
96 11/07/2025
CSS Selectors
 CSS selectors allow you to select and manipulate
HTML element(s).
 CSS selectors are used to "find" (or select) HTML
elements based on their id, classes, types, attributes,
values of attributes and much more.
The element Selector
 The element selector selects elements based on the
element name.
 You can select all <p> elements on a page as follow:-
p{
text-align: center;
color: red;
}

97 11/07/2025
CSS Selectors…
The id Selector
 The id selector uses the id attribute of an HTML tag to
find the specific element.
 An id should be unique within a page, so you should use
the id selector when you want to find a single, unique
element.
 To find an element with a specific id, write a hash
character, followed by the id of the element.
 For example:- The style rule below will be applied to the
HTML element with id="para1":
#para1 {
text-align: center;
color: red;
}
98 11/07/2025
CSS Selectors…
The class Selector
The class selector finds elements with the specific
class.
The class selector uses the HTML class attribute.
To find elements with a specific class, write a period
character, followed by the name of the class:
In the example below, all HTML elements with
class="center" will be center-aligned:
.center {
text-align: center;
color: red;
}

99 11/07/2025
CSS Selectors…
You can also specify that only specific HTML
elements should be affected by a class.
In the example below, all p elements with
class="center" will be center-aligned:
Example
[Link] {
text-align: center;
color: red;
}

10 11/07/2025
0
CSS Selectors…
Grouped selector
 If more than one selector shares the same type,
they may be grouped in a single rule, separated by
commas.

H1 {color:red;font-face:aerial}
H2 {color:red;font-face:aerial}
H3 {color:red;font-face:aerial}

 The above declaration can be condensed in the


following format.
H1, H2, H3 {color: red; font-face: aerial}

10 11/07/2025
1
Adding CSS to web pages
We can add CSS to a page using three
different ways.
External style sheet
Internal style sheet
Inline style sheet

10 11/07/2025
2
External style sheet
External style sheet keeps your style sheet in a
separate file and link to it from a document or a
set of documents, using a <LINK> tag in the
<HEAD> section of the linking document as
follows.
< LINK REL=“stylesheet” TYPE=”text/css”
HREF=”[Link]”>
An external style sheet is used when the style is
applied to many pages.
The linked style sheet consists of a set of style
rule, exactly like an internal style sheet, except
that the style rules are not enclosed in
<style></style> tag.
10 11/07/2025
3
External style sheet…
An external style sheet can be written in any text
editor.
The file should not contain any html tags.
The style sheet file must be saved with a .css file
extension.
An example of a style sheet file called "[Link]",
is shown below:
body {
background-color: lightblue;
}
h1 {
color: blue;
margin-left: 20px;
}
10 11/07/2025
4
Internal style
To use an internal style sheets, we define a
style block ( delimited by the <style
type=”text/css”> and </style> tags), which
would be placed in the <head> section of the
document.
This block consists of a set of style rules, where
each rule defines a style for an HTML element
or group of elements.
An internal style sheet should be used when a
single document has a unique style.
You define internal styles in the head section of
an HTML page, inside the <style> tag.
10 11/07/2025
5
Internal style-Example
<html><head>
<style type="text/css">
body{
background-color:blue;
}
h1{
color:red;
margin-left:40px;
}
</style>
</head>
<body>
<h1>Computer Science</h1>
</body></html>

10 11/07/2025
6
Inline style
To use inline styles, add the style attribute to the
relevant tag.
The style attribute can contain any CSS property.
Tag syntax
< tag style=“property: value; property: value….”>
</tag>
The example shows how to change the color and the
font size of a <b> tag:
<b style=“color: red; font-size: 10”> red colored
text</b>
Using inline styles to format a document allows for great
precision, but can be pretty tedious to code.
If you have a lot of styles, inline style method can also
result in a fair amount of unnecessary code.
10 11/07/2025
7
Inline style-Example
<html>
<head><title>Inline sheet style</title></head>
<body>
<b style="color: red; font-size: "10"> red colored
text</b>
<P style="border:silver thick solid; background-
color:blue; text-align:center">this is a
paragraph</p>
<H1 style="color:red;font-face:aerial"> this is
heading level 1</H1>
</body>
</html>
10 11/07/2025
8
CSS Comment
Comments are used to explain your code, and
may help you when you edit the source code at
a later date.
 A comment will be ignored by browsers.
A CSS comment begins with "/*", and ends with
"*/"
Example
/* This is a comment */
p{text-align: center; /* This is another comment */
color: black;
font-family: arial
}
10 11/07/2025
9
Some Common CSS properties

CSS Background Properties


Used to define the background effects of an
element.
Property Description Values
background- Sets whether a background Scroll, fixed
attachment image is fixed or scrolls with
the rest of the page
background- Sets the background color of color-rgb, color-hex, color-
color an element name, transparent
background- Sets an image as the url, none
image background
background- Sets the starting position of a top left, top center, top right,
position background image center left, center center,
center right, bottom left,
bottom center, bottom right,
x-% y-%, x-pos y-pos
background- Sets how a background Repeat, repeat-x, repeat-y, no-
repeat image will be repeated repeat
background A shorthand property for background-color, background-
setting all background image
11 properties in one declaration background-repeat, 11/07/2025
0
background-attachment
CSS Background Properties Example
body{
background-color:blue;
background-image:[Link];
background-repeat:repeat-x;
background-attachment:scroll;
background-position:center top;
}
 To shorten the code, it is also possible to specify all
the properties in one single property. This is called
a shorthand property.
body {
background: blue url no-repeat fixed right top;
}
11 11/07/2025
1
CSS text properties
The CSS text properties allow you to control
the appearance of text.
Property Description Values
color Sets the color of a text color
direction Sets the text direction Ltr, rtl
letter-spacing Increase or decrease the Normal, length
space between characters
text-align Aligns the text in an Left, right, center,
element justify
text-decorationAdds decoration to text None, underline,
overline,
line-through , blink
text-indent Indents the first line of text Length, %
in an element
text-transform Controls the letters in an None, capitalize,
element uppercase
lowercase
word-spacing Increase or decrease the Normal, length
11 space between words 11/07/2025
2
CSS text properties…
Example
p{
color:red;
text-alighn:right;
direction:rtl;
text-transform:uppercase;
word-spacing:20;
text-decoration:underline;
letter-spacing:12;
}

11 11/07/2025
3
CSS Font Properties
The CSS font properties allow you to
change the font family, boldness, size, and
the style
Property of a text.
Description Values
font-familyA prioritized list of font family family-name, generic-family
names and/or generic family
names for an element
font-size Sets the size of a font xx-small, x-small, small,
medium, large
x-large, xx-large, smaller,
larger, length,%
font- Condenses or expands the Normal, wider, narrower,
stretch current font-family ultra-condensed, extra-
condensed, condensed, emi-
condensed, semi-expanded,
expanded
extra-expanded, ultra-
expanded
font-style Sets the style of the font Normal, italic, oblique
11 font- Sets the weight of a font bold, bolder, lighter, 100,
11/07/2025
4 weight 200, 300, 400, 500, 600,
CSS Font Properties…
h1{
font-family: Times New Roman;
font-size: large;
font-stretch: extra-condensed;
font-style: italic;
font-weight: 900;
}

11 11/07/2025
5
CSS
The CSS Border
border Properties
properties allow you to
specify the style and color of an element's
border.
with CSS border properties we can create
borders that can be applied to any
element.
Property Description Values
border A shorthand property for setting all border-width, border-
of the properties for the four style, border-color
borders in one declaration
border- A shorthand property for setting all border-bottom-
bottom of the properties for the bottom width, border-style
border in one declaration border-color
border- Sets the color of the bottom border border-color
bottom-color
border- Sets the style of the bottom border border-style
11 11/07/2025
6 bottom-style
CSS Border Properties…
Property Description Values
border-color Sets the color of the four color
borders, can have from one to
four colors
border-left A shorthand property for border-left-width,
setting all of the properties for border-style
the left border in one border-color
declaration
border-left- Sets the color of the left border border-color
color
border-left- Sets the style of the left border border-style
style
border-left- Sets the width of the left border Thin, medium, thick,
width length
border-right A shorthand property for border-right-width,
11
setting all of the properties for border-style 11/07/2025
7 the right border in one border-color
CSS Border Properties…
border- Sets the style of the four None, hidden,
style borders, can have from one dotted, dashed,
to four styles solid , double,
groove, ridge, inset,
outset
border-top A shorthand property for border-top-width,
setting all of the properties border-style
for the top border in one border-color
declaration
border-top- Sets the color of the top border-color
color border
border-top- Sets the style of the top border-style
style border
border-top- Sets the width of the top Thin, medium, thick,
11 11/07/2025
8 width border length
CSS Border Properties…
Example
p{
border-style: dashed;
border-color: red;
border-width:medium;
}

11 11/07/2025
9
CSS Margin Properties
The CSS margin properties define the space
around elements.
Property Description Values
margin A shorthand property for margin-top, margin-
setting the margin right, margin-bottom,
properties in one margin-left
declaration.
margin- Sets the bottom margin of Auto, length, %
bottom an element
margin- Sets the left margin of an Auto, length, %
left element
margin- Sets the right margin of an Auto, length, %
right element
12 11/07/2025
0 margin- Sets the top margin of an Auto, length, %
CSS Margin Properties…
p{
margin-top: 10px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
Shorthand from
P{
margin:20px 50px 100px 70px;
}
12 11/07/2025
1
CSS Padding Properties
The CSS padding properties define the
space between the element border and the
element content.
Property Description Values
padding A shorthand property for padding-top
setting all of the padding-right
padding properties in padding-
one declaration bottom
padding-left
padding- Sets the bottom padding Length,%
bottom of an element
padding- Sets the left padding of Length, %
left an element
12 padding- Sets the right padding of Length,11/07/2025
%
2
CSS Padding Properties…
p{
padding-top: 25px;
padding-right: 50px;
padding-bottom: 25px;
padding-left: 50px;
}
shorthand form
p{
padding: 50px 50px 50px 50px;
}
12 11/07/2025
3
CSS List Properties
The CSS list properties allow you to place
the list-item marker, change between
different list-item markers, or set an image
Property Description Values
as
list-style
the list-item marker.
A shorthand property for list-style-type, list-
setting all of the properties for style-position
a list in one declaration list-style-image
list-style- Sets an image as the list-item None, url
image marker
list-style- Sets where the list-item Inside, outside
position marker is placed in the list
list-style- Sets the type of the list-item None, disc, circle,
type marker square, decimal,
decimal-leading-zero
lower-roman, upper-
roman
lower-alpha, upper-
12 11/07/2025
4
alpha
CSS List Properties…
Example
ul{
ist-style-image:none;
list-style-position:inside;
list-style-type:square;
}

12 11/07/2025
5
Reading assignment
Read others CSS
properties

12 11/07/2025
6

You might also like