تمارين html

HTML Tutorial |أمثلة شاملة في Html

صورة
صدام العويري
اخر تحديث :

مثال الوسم <html> في HTML

في المثال التالي قمنا باخراج جملة First HTML Page باستخدام بنية html الاساسية

المثال الاول

				<!DOCTYPE html>
				<html>
				<head>
				
				First HTML Page
				
				</head>
				<body>
				Simple HTML Code.
				</body>
				</html>

المخرجات:

Simple HTML Code.


مثال الوسم <p> في HTML

paragraph tag

المثال الثاني

				<!DOCTYPE html>
				<html>
				<head>

				paragraph tag
				</head>
				<body>
				
This is the First paragraph starting
 
				
This is the Second paragraph starting
 

				</body>
				</html>

المخرجات:

This is the First paragraph starting

This is the Second paragraph starting



مثال الوسوم <h1-h6> في HTML

Heading Tag

المثال الثالث

				<!DOCTYPE html>
				<html>
				<head>

				Heading Tag
				</head>
				<body>
				
Heading 1

				
Heading 2

				
Heading 3

				
Heading 4

				
Heading 5

				
Heading 6
 
				</body>
				</html>

المخرجات:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6


مثال الوسم <hr> في HTML

Used for creating a horizontal line. This is also called Horizontal Rule in HTML. This tag defines a thematic break in an HTML page (e.g. a shift of topic). Used to separate the content (or define a change) in an HTML page.

المثال الرابع

				<!DOCTYPE html>
				<html>
				<head>

				Horizontal line
				</head>
				<body>

                First Line 

				Second Line 

				Third Line 

				
				</body>
				</html>

المخرجات:

Horizontal line First Line
Second Line
Third Line


مثال الوسم <hr> في HTML

We can change the line colour, using color attribute.

المثال الخامس

				<!DOCTYPE html>
				<html>
				<head>

				Horizontal line color
				</head>
				<body>



				First Line 

				Second Line 

				Third Line 


				</body>
				</html>

المخرجات:

Horizontal line color First Line
Second Line
Third Line


مثال الوسم <hr> في HTML

We can change the default line size using size attribute. We can use more than one attribute. In this example we have used color and size attributes.

المثال السادس

				<!DOCTYPE html>
				<html>
				<head>

				Horizontal line size
				</head>
				<body>



				First Line 

				Second Line 

				Third Line 

				

				</body>
				</html>

المخرجات:

Horizontal line size First Line
Second Line
Third Line


مثال الوسم <hr> في HTML

We can change the default width using width attribute.

المثال السابع

				<!DOCTYPE html>
				<html>
				<head>

				Horizontal line width
				</head>
				<body>



				
				First Line 

				Second Line 

				Third Line 

				

				</body>
				</html>

المخرجات:

Horizontal line width First Line
Second Line
Third Line


مثال الوسم <b> في HTML

We can use Bold, Italic and Underline tag anywhere, but we should close all tags properly.

المثال الثامن

				<!DOCTYPE html>
				<html>
				<head>

				Text formatting
				</head>
				<body>

				
				This text is bold Text
				

				This text is italic Text
				

				This text is UnderLine Text
				

				 This is The Mixed Line

				</body>
				</html>

المخرجات:

Text formatting This text is bold Text
This text is italic Text
This text is UnderLine Text
This is The Mixed Line


مثال الوسم <span> في HTML

This tag is used for grouping and applying styles to inline elements. This tag is similar to div> tag, to see difference between the two, check the next example.

المثال التاسع

				<!DOCTYPE html>
				<html>
				<head>

				span tag
				</head>
				<body>



				
				This is the sample span was end.

				</body>
				</html>

المخرجات:

span tag This is the sample span


مثال الوسم <Div> في HTML

This tag is nothing more than a container unit that encapsulates other page elements and divides the HTML document into sections.

المثال العاشر

				<!DOCTYPE html>
				<html>
				<head>

				div tag
				</head>
				<body>

				

				

				  This is the first  Div
				  

				  
				  
				

				

				  This is the Second  Div
				  

				  
				


				</body>
				</html>

المخرجات:

div tag
This is the first Div
This is the Second Div


مثال الوسم <em> في HTML

This tag is a phrase tag. It renders as emphasized text. This tag marks text that has stress emphasis which traditionally means that the text is displayed in italics by the browser. It is not deprecated, but it is possible to achieve richer effect with CSS.

المثال 11

				<!DOCTYPE html>
				<html>
				<head>

				Emphasied text 
				</head>
				<body>


				
				Normal Text 
				

				Emphasized Text
				

				</body>
				</html>

المخرجات:

Emphasied text Normal Text
Emphasized Text


مثال الوسم <small> في HTML

This tag is used to make the text size smaller. This tag can not make the text smaller than the browser's minimum font size.

المثال 12

				<!DOCTYPE html>
				<html>
				<head>

				Small tag
				</head>
				<body>



				
				Normal Text 
				

				small Text
				

				This is  small Sample

				</body>
				</html>

المخرجات:

Small tag Normal Text
small Text
This is small Sample


تعديل المقال
الأقسام

مقالات قد تهمك

تعليقات