Introduction of HTML
Definition
WWW - Word Wide Web
HTML - Hyper Text Markup Language - The language of Web Pages on the Word Wide Web.
URL - Uniform Resourse Locator.
Browser - A software program which is used to show web pages.
“Normal text” surrounded by bracketed tags that tell browsers how to display web pages
Pages end with “.htm” or “.html”
HTML Editor – A word processor that has been specialized to make the writing of HTML documents more effortless.
Tags
Codes enclosed in brackets
Tags
|
Description
|
<A></A>
|
Anchor Tag
For Example
<p><a href="example.com"></a></p>
|
<B></B>
|
Content is show as Bold type
For Example
<p><a href="example.com"></a></p>
|
<BIG></BIG>
|
Content is shown as large type
For Example
<p><a href="example.com"></a></p>
|
<BLOCKQUOTE></BLOCKQUOTE>
|
Content is shown as an indented block, should be used only for long quotation
For Example
<p><a href="example.com"></a></p>
|
<BODY></BODY>
|
The body part of HTML document
For Example
<p><a href="example.com"></a></p>
|
<BR>
|
Force line break within paragraph.
For Example
<p><a href="example.com"></a></p>
|
<CENTER></CENTER>
|
Content is center in the page
For Example
<p><a href="example.com"></a></p>
|
<DEL></DEL>
|
Use indicate a deletion from a previous version of documents
For Example
<p><a href="example.com"></a></p>
|
<DIV></DIV>
|
The dummy element which content block-level content element
For Example
<p><a href="example.com"></a></p>
|
<EM></EM>
|
Emphasis. Text usually displayed in italics.
For Example
<p><a href="example.com"></a></p>
|
<FONT></FONT>
|
Use to define characteristics of font, according to attributes.
For Example
<p><a href="example.com"></a></p>
|
<HEAD></HEAD>
|
The head part of the HTML document
For Example
<p><a href="example.com"></a></p>
|
Defination Web Page:
There are various browser and so are the word processors. In fact, there are various version of HTML too. So in the first line of the document, You put all the information that you hava about the file.
Basic Structure of an HTML Document
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
1.!DOCTYPE html : This is needed to inform browser that the file is in HTML mode and is a document type.
2.PUBLIC : This define that the text is not private and does need any kind of password to open it.
3.//W3C//DTD HTML : This significance that we are using the HTML developed by W3 consortium.
4. //EN"> :We this we end the defination of the line for the HTML.
Heading:
<H1>Heading 1<H1>
<H2>Heading 2<H2>
<H3>Heading 3<H3>
Formatting Text in HTML:
1. Text Styling
2. Text Positioning
3. Text Appearance
1. Text Styling :
You can make the characters bold, italics, underline, and strikethrough in HTML. This can be applied to a set of character or even on a single one too.
To make text bold, you have to use the follow way:
1.Before the text which you want to made bold,type<B>.
2.Type the text .
3. close it with </B>.
Similarly, you can make the text italics too.
1. Type <I> before the text which you want to make italics.
2.Type the Text.
3.Close it with </I>.
Also, you can make the text underline too.
1. Type <U> before the text which you want to make italics.
2.Type the Text.
3.Close it with </U>.
Also, you can make the text strikethrough too.
1. Type <STRIKE> before the text which you want to make italics.
2.Type the Text.
3.Close it with </STRIKE>.
eg.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<B>This line is Bold</B>
<br>
<I>This line is Italics</I>
<br>
<STRIKE>This line is Strikethrough</STRIKE>
</body>
</html>
2. Text Positioning :
a. Paragraph Tag <P></P>
The <P> tag is used to create a new paragraph on your page. These is normally the preferred way to split your paragraphs up on web page. Include the</P> at the end of tag.
eg.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<P>This line is Paragraph</P>
</body>
</html>
b. CENTER Tag <CENTER></CENTER>
To center your text, we used the <center> tag, and yes you guessed to need to close the tag afterwards with the </CENTER> tag .We can even combine elements on the page to get a bold look.
eg.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<P>This line is Paragraph</P>
<CENTER><P>This line is Paragraph</P></CENTER>
</body>
</html>
2. Text Positioning :
a. COLOR
"#FFFF" OR "WHITE" :- It indicate of the text color of the text user to display. You can type color name or substitute RGB hexadecimal values to it.
b. FACE
"Font-Name" :- It specifies a common separated list of font names the browser uses to render to text.
a. COLOR
"#FFFF" OR "WHITE" :- It indicate of the text color of the text user to display. You can type color name or substitute RGB hexadecimal values to it.
b. FACE
"Font-Name" :- It specifies a common separated list of font names the browser uses to render to text.
c. SIZE
It specifies the size of the size affected by the FONT tag. You can specifies the size as a digits numbers.
eg.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<font color="red">Thease line is of RED COLOR.</font>
<br>
<font face="comic sans ms">This line is in COMICS SANNS MS.</font>
<br>
<font size="20">These line is of size</font>
<br>
<font color="red" face="comic sans ms" size="20"> This line is Formatting using all there attributes.</font>
</body>
</html>
It specifies the size of the size affected by the FONT tag. You can specifies the size as a digits numbers.
eg.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<font color="red">Thease line is of RED COLOR.</font>
<br>
<font face="comic sans ms">This line is in COMICS SANNS MS.</font>
<br>
<font size="20">These line is of size</font>
<br>
<font color="red" face="comic sans ms" size="20"> This line is Formatting using all there attributes.</font>
</body>
</html>
Link: Links are fundamental to the Web; they are they are constitute hypertext.A link appears on the browser screen as a a text in a special color and underlined; clicking on it sends to some other page on part of the page, ect.
A link of used in anchor tag
<a href=""> </a>
Type of Address
Relative Link:
A relative URL is incomplete; it defines in term of the current of document
Internal Link :
To another a link to another part of the same page, you need first to destination anchor. The easiest way to create anchor element to with a NAME.
Images
Images or pictures have to stored as separate file from the HTML file. Image are usually either GIF file (*.gif) ,PNG(*.png) or JPG File (*.jpg).
In the HTML file, an image element <IMG> image indicate that an image should be display at the end at that end
eg.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="IMG_20200308_074017.jpg" style="width: 300px; height: 400px;">
<img src="https://images.pexels.com/photos/1839963/pexels-photo-1839963.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="width: 300px; height: 400px;">
</body>
</html>
A relative URL is incomplete; it defines in term of the current of document
Internal Link :
To another a link to another part of the same page, you need first to destination anchor. The easiest way to create anchor element to with a NAME.
Images
Images or pictures have to stored as separate file from the HTML file. Image are usually either GIF file (*.gif) ,PNG(*.png) or JPG File (*.jpg).
In the HTML file, an image element <IMG> image indicate that an image should be display at the end at that end
eg.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="IMG_20200308_074017.jpg" style="width: 300px; height: 400px;">
<img src="https://images.pexels.com/photos/1839963/pexels-photo-1839963.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="width: 300px; height: 400px;">
</body>
</html>
Comments
Post a Comment