Scribd
Upload
28 views12 pages

Short Note For All G-12

HTML is a markup language that defines the structure and layout of a web page. It uses tags to tell browsers how to render headings, paragraphs, lists, tables and other elements. Some key points: - HTML documents have a head and body - the head contains meta information while the body holds visible content - Common tags include <h1>-<h6> for headings, <p> for paragraphs, <br> for line breaks, and <hr> for horizontal rules - Attributes specify additional properties for tags, like bgcolor for the <body> tag - Character styles are set with tags like <b> for bold, <i> for italic, and <sub> and <sup>

Uploaded by

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

Short Note For All G-12

HTML is a markup language that defines the structure and layout of a web page. It uses tags to tell browsers how to render headings, paragraphs, lists, tables and other elements. Some key points: - HTML documents have a head and body - the head contains meta information while the body holds visible content - Common tags include <h1>-<h6> for headings, <p> for paragraphs, <br> for line breaks, and <hr> for horizontal rules - Attributes specify additional properties for tags, like bgcolor for the <body> tag - Character styles are set with tags like <b> for bold, <i> for italic, and <sub> and <sup>

Uploaded by

samuel asefa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

HTML

By ASNE K.
HTML (Hyper Text Markup Language)
 is a markup language (markup -instructions for layout and style). is used to tell a Web browser
where the heading is for a Web page,
what is a paragraph,
what is part of a table and so on, so it can structure your document and render it properly.
Syntax:
<element name> Content here </element name>
Open tag Close tag
It is recommended to use lowercase in all elements since required for HTML documents.

The structure of an HTML element


<html>
<head>
② <title> Title here </title> ③
① </head>
<body>
Web page content here ④
</body>
</html>
 Tags
① <html> . . . </html> Contains the whole page
② <head> . . . </head> The head of the page. contains information about the page which is not displayed
③ <title> . . . </title> Description of the page
④ <body> . . . </body> The body of the page, main content. the information seen in the main browser window

 Structure of A page
 HTML documents are contained between the opening <html> and closing </html> called root element
 Inside the root element the document is divided in to two
 The <head> element, which contains information about the document such as a title or a link to a style sheet
 The <body> element, which contains the real content of the document that you see.

 Simple page
<html>
<head>Title here
<title> my first page </title>Web page content here
</head>
<body>
WELCOME TO MY FIRST WEB PAGE
</body>
</html>
 Attributes used with <BODY
 BGCOLOR: used to set the background color for the document
Example: <BODY BGCOLOR="yellow">
Your document text goes here.
</BODY>
 TEXT: used to set the color of the text of the document
Example: <BODY TEXT="red">
Document text changed to red color
</BODY>
 MARGINS: set the left hand/right hand margin of the document
 LEFTMARGIN: set the left hand margin of the document
Example: <BODY LEFTMARGIN="60">
This document is indented 60 pixels from the left hand side of the page.
</BODY>
 TOPMARGIN: set the left hand margin of the document
Example: <BODY TOPMARGIN="60">
This document is indented 60 pixels from the top of the page.
</BODY>
By ASNE K.
 BACKGROUND: It is used to point to an image file (the files with an extension .gif, .jpeg) that will be used as the
background of the document. The image file will be tiled across the document.
Example: <BODY BACKGROUND="filename.gif">
Your document text goes here
</BODY>

 Container and Empty Tags


 All HTML tags are enclosed in angle brackets ‘<’ and ‘>’ i.e. Opening Tag: <HTML> and closing tag: </HTML> same as
opening tag except a / (slash) mark. Tags are not case-sensitive i.e. there is no difference in small and capital letters in tags.
There are two types of tags:
1. Container Tags: Tags which have both the opening and closing i.e. <TAG> and </TAG> are called container tags. They
hold the text and other HTML tags in between the tags. The <HTML>, <HEAD>, <TITLE> and <BODY> tags are all
container tags.
<TAG> this is a container tag. It holds both the text and HTML tag </TAG>
2. Empty Tags: Tags, which have only opening and no ending, are called empty tags. The <HR>, which is used to draw
Horizontal, rule across the width of the document, and line break <BR> tags are empty tags.

 FORMATTING WEB PAGE


 HTML tags used for formatting a web page are:
 SECTION HEADING: <H1>.............<H6>
 HTML has six header tags <H1>, <H2>...........<H6> used to specify section headings. Text with header tags is displayed in
larger and bolder fonts than the normal body text by a web browser. Every header leaves a blank line above and below it when
displayed in browser.
 Use the align attribute. Left , center, right .
 Some peculiarities about the web browser on viewing HTML document text:-
 Browsers ignore extra space within HTML document
 Browsers ignore any additional space you type, and compress the text as if the space did not exist. For Example: You
can have text "My First Page” in HTML document but in browser it display, "My First Page“.
 Browsers ignore your extra line and paragraph breaks
 Generally you press enter when you want to create line and paragraph breaks, but they won’t show up when you view
the document in browser.

 Heading Tag
Example
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
OUTPUT ☞
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6

In order to control your paragraph and line breaks, <P> and <BR> tags are used.
 Using paragraph tag: <P>
 This tag <P> indicates a paragraph, used to separate two paragraphs with a blank line.
Example:
By ASNE K.
<P> Welcome to the world of HTML </P>
<P> First paragraph.
Text of First paragraph goes here </P>

 Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p>
and a closing </p> tag
Example
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
OUTPUT ☞
Here is a first paragraph of text.
Here is a second paragraph of text.
Here is a third paragraph of text.

 Using Line Break Tag: <BR>


 The empty tag <BR> is used, where the text needs to start from a new line and not continue on the same line. To get every
sentence on a new line, it is necessary to use a line break.
Example:
<BODY>
National Institute of Open Schooling <BR>
Sabian Secondary School <BR> Dire Dawa
</BODY>

 Line Break Tag


Example
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment on time.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
OUTPUT ☞
Hello

You delivered your assignment on time.

Thanks

Mahnaz

 Using Preformatted Text Tag: <PRE>


 <PRE> tag can be used, where it requires total control over spacing and line breaks such as typing a poem. Browser preserves
your space and line break in the text written inside the tag.
Example:
<PRE>
National Institute of Open Schooling

By ASNE K.
Sabian Secondary School
Dire Dawa
</PRE>

 Using Horizontal Rule Tag: <HR>


An empty tag <HR> basically used to draw lines and horizontal rules. It can be used to separate two sections of text.
Example:
<BODY>
Your horizontal rule goes here. <HR>
The rest of the text goes here.
</BODY>

 Horizontal Rule Tag


Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
OUTPUT ☞
This is paragraph one and should be on top

This is paragraph two and should be at bottom

 <HR> accepts following attributes:


 SIZE: Determines the thickness of the horizontal rule. The value is given as a pixel value.
 WIDTH: Specifies an exact width of HR in pixels, or a relative width as percentage of the document width.
 ALIGN: Set the alignment of the rule to LEFT, RIGHT and
 CENTER. It is applicable if it is not equal to width of the page.
 <HR> attributes: cont..
 NOSHADE: If a solid bar is required, this attribute is used; it specifies that the horizontal rule should not be shaded at all.
 COLOR: Set the color of the Horizontal rule.
Example of <HR> with its attribute:
<HR SIZE=''3" WIDTH=''50%'‘ALIGN=''CENTER'' NOSHADE COLOR="BLUE">

 Character Formatting Tags


 The character formatting tags are used to specify how a particular text should be displayed on the screen to distinguish certain
characters within the document.
 The most common character formatting tags are:
 Boldface : <B>: displays text in BOLD
Example: Welcome to the <B> Internet World </B>
OUTPUT ☞ Welcome to the Internet World
 Italics : <I>: displays text in Italic
Example: Welcome to the <I> Internet World </I>
OUTPUT ☞ Welcome to the Internet World
 Subscript <SUB>: displays text in Subscript
 Superscript <SUP>: displays text in Superscript
 Small <SMALL>: displays text in smaller font as compared to normal font
 Big <BIG>: displays text in larger font as compared to normal font
 Bold Text
Anything that appears within <b>...</b> element, is displayed in bold as shown below:
Example
By ASNE K.
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>
OUTPUT ☞
The following word uses a bold typeface

 Italic Text
Anything that appears within <i>...</i> element is displayed in italicized as shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>
OUTPUT ☞
The following word uses an italicized typeface.

 Underlined Text
Eample
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>
OUTPUT ☞
The following word uses an underlined typeface.

 Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.
Example
<!DOCTYPE html>
<html>
<head>
<title>Centering Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
OUTPUT ☞
This text is not in the center.
This text is in the center
By ASNE K.
 Strike Text Tag
Example
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>
OUTPUT ☞
The following word uses a strikethrough typeface.

 Monospaced Font
Example
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>
OUTPUT ☞
The following word uses a monospaced typeface

 Superscript Text
The content of a <sup>...</sup> element is written in superscript; the font size used is the
same size as the characters surrounding it but is displayed half a character's height above
the other characters.
Example
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>
OUTPUT ☞
The following word uses a superscript typeface.

 Subscript Text
The content of a <sub>...</sub> element is written in subscript; the font size used is the same as the characters surrounding it, but is
displayed half a character's height beneath the other characters.
Example
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>
OUTPUT ☞
The following word uses a subscript typeface
By ASNE K.
 Inserted Text
Anything that appears within <ins>...</ins> element is displayed as inserted text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
OUTPUT ☞
I want to drink cola wine

 Deleted Text
Anything that appears within <del>...</del> element, is displayed as deleted text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
OUTPUT ☞
I want to drink cola wine

 Larger Text
The content of the <big>...</big> element is displayed one font size larger than the rest of the text surrounding it as shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>
OUTPUT ☞
The following word uses a big typeface.

 Smaller Text
The content of the <small>...</small> element is displayed one font size smaller than the rest of the text surrounding it as shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>
OUTPUT ☞
The following word uses a small typeface.

By ASNE K.
 The dir Attribute
The dir attribute allows you to indicate to the browser about the direction in which the text should flow. The dir attribute can take one of
two values, as you can see in the table that follows:
Value Meaning
ltr Left to right (the default value)
rtl Right to left (for languages such as Hebrew or Arabic that are read right to left)
Example
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
</html>
OUTPUT ☞
This is how IE 5 renders right-to-left directed text.

 Grouping Content
The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page.
For example, you might want to put all of the footnotes on a page within a <div> element to indicate that all of the elements within that
<div> element relate to the footnotes.
You might then attach a style to this <div> element so that they appear using a special set of style rules.
Example
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id="menu" align="middle" >
<a href="/index.htm">HOME</a> |
<a href="/about/contact_us.htm">CONTACT</a> |
<a href="/about/index.htm">ABOUT</a>
</div>
<div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>
OUTPUT ☞
HOME | CONTACT | ABOUT

CONTENT ARTICLES

Actual content goes here.....

 The <span> element


span element on the other hand, can be used to group inline elements only. So, if
you have a part of a sentence or paragraph which you want to group together, you could use the <span> element as follows
Example
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style="color:green">span tag</span> and the <span
By ASNE K.
style="color:red">div tag</span> alongwith CSS</p>
</body>
</html>
OUTPUT ☞
This is the example of span tag and the div tag along with CSS
✍ These tags are commonly used with CSS to allow you to attach a style to a section of a page.

 Font Colors and Size:<FONT


 By using <FONT> Tag one can specify the colors, size of the text.
Example: <FONT> Your text goes here </FONT> Attributes of <FONT> are:
 COLOR: Sets the color of the text that will appear on the screen. It can be set by giving the value as #rr0000 for red (in RGB
hexadecimal format), or by name.
Example: <FONT COLOR="RED"> Your text goes here </FONT>
 SIZE: Sets the size of the text, takes value between 1 and 7, default is 3. Size can also be set relative to default size
for example; SIZE=+X, where X is any integer value and it will add with the default size.
Example: <FONT SIZE=5> Font Size changes to 5 </FONT>
<FONT SIZE=+2> Font Size changes to 5 i.e. default size (3)
±2</FONT>
 FACE: Sets the normal font type, provided it is installed on the user’s machine.
Example: <FONT FACE="ARIAL"> the text will be displayed in Arial</FONT>

 Comments
 You can put comments between any tags in your HTML documents. Comments use the following syntax:
 Syntax: <!-- comment goes here -->
<!-- This is a comment -->
<!-- This is a multiple-line comment that ends here. -->

 Lists
HTML Supports several ways of arranging items in lists.
You can create three types of lists :
 Unordered lists:- which are like lists of bullet points
 Ordered lists:- which use a sequence of numbers or letters instead of bullet points
 Definition lists:- which allow you to specify a term and its definition
 Unordered lists
An unordered list starts with in <UL> followed by <LI> (List Item) tag.
syntax:
<ul>
<li> . . . </li>
<li> . . . </li>
</ul>
Example : <UL>
<LI> Apple </LI>
<LI> Mango </LI>
<LI> Orange </LI>
</UL>
Attributes: type is disc, circle, or square
 Ordered lists
Ordered list starts with in <OL> followed by <LI> (List Item) tag.
syntax:
<ol>
<li> . . . </li>
<li> . . . </li>
</ol>
Example : <OL>
<LI> Apple </LI>
<LI> Mango </LI>
<LI> Orange </LI>
</OL>

By ASNE K.
 Attributes of <OL> tag:
 TYPE: allows marking list items with different types. By default the list Item markers are set to numbers 1,2,3… so on.
 START: used for lists that need to start at values other than 1. START always specified in default numbers, and is completed
based on TYPE before display, For example, If START =5 it would display either an ‘E’, ‘e’, ‘V’, ‘v’, or ‘5’ based an TYPE
attribute.
Example : <OL TYPE=“A” START=3>
<LI> Apple </LI>
<LI> Mango </LI>
<LI> Orange </LI>
</OL>

 Definition lists
 A special kind of list for providing terms followed by a short text definition and description of them.
Example : <dl>
<dt> student name </dt>
<dd> mulualem alemu </dd>
<dd> alemu mekonen </dd>
<dd> solomon ayele </dd>
<dt> instructures name </dt>
<dd>abebeb alem </dd>
<dd>taye endalew</dd>
<dd>almaze kebebech</dd>
</dl>

 Adding Images In Web page


 Images can be placed in a web page by using <IMG> tag.
 It is an empty tag (only start tag, no end tag) and is written as:
<IMG SRC = image_URL>
SRC – Source of the image file
image_URL – represents the image file with its location.
Example: <IMG SRC=file:///C:/Comlogo.GIF>
This SRC attribute is mandatory for the <IMG> tag

 Other attributes used with <IMG> are: -


 ALIGN: used to set the alignment of the text adjacent to the image. The values could be: top, middle, bottom, left, right
Example align="right“ By default, the text is aligned with the bottom of the image
 ALT: to specify a text alternative for the image in case the browser cannot display.
Example: <IMG SRC=Comlogo.GIF ALT = “company Logo">
 HEIGHT and WIDTH: Height and Width of an image can be controlled by using the HEIGHT and WIDTH attributes in
the <IMG> tag as follows: Example: <IMG SRC= Comlogo.GIF HEIGHT=320 WIDTH=240>
 BORDER: - specifies the width of the border around the image in pixels. By default image displays with a thin border.
Example: <IMG SRC=Comlogo.GIF BORDER=3>
 HSPACE and VSPACE: White space around an image can be provided by using HSPACE (Horizontal Space) and
VSPACE (Vertical Space) attributes of the <IMG> tag. These attributes provide the space in pixels.
Example: <IMG SRC=Comlogo.GIF VSPACE=30 HSPACE=25>

 Links
 A link is specified using the anchor <a> element.
 Anything between the opening <a> tag and the closing </a> tag becomes part of the link a user can click in a browser.
 To link to another document, the opening <a> tag must carry an attribute called href, whose value is the page you are linking to.
<body>
Go to the <a href=“first.html">first page </a>
</body>
 The file first.html should be in the same folder

 Linking to a website
 to link to a different site you need to write the URL between the <a> and </a> tags - source anchor,
<body>
You can also <a href=http://www.facebook.com/> facebook</a>?
</body>
 You can include title attribute to links – when the mouse is over the link additional information could be delivered to the user.
By ASNE K.
<body>
<a href="http://www.facebook.com/" title=“search the Web with face book">Facebook</a>
is a very popular social networking.
</body>

 Using an image as a link


 put the img element in the anchor element:
<a href="http://www.ethiopianairline.com"><img src=“et.gif"/></a>
 Most browsers display linked text as blue and underlined, and linked images with a blue border.
 Visited links generally display in purple.
 We can change the color of the links by using the following attribute in the body tag or CSS.
Link=unvisited link
Alink= selected link
Vlink= visited link

 Absolute and Relative URLs


 No two files on the Internet share the same URL
 An absolute URL uniquely identify a particular file on the Internet.
http://www.exampleNewsSite.com/Entertainment/Film/index.htm
 A relative URL indicates where the resource is in relation to the current page.
 If you are at the index page for the entertainment section you can link to film index page in the following way:
Film/index.htm the browser changes the relative URLs into full absolute URLs
 Linking to a specific part of a page
 If you have a long Web page, you might want to link to a specific part of that page.
 The destination anchor allows the page author to mark specific points in a page that a source link can point to.
Example
<a name="top"></a>
<a href="#middle">middle</a>
<a href="#bottom">bottom</a>
 This link text jumps to the section named with HREF on click. The # symbol before the section name is must.
<a name=“middle"></a>
The NAME attribute is used to identify a section with a name. It is a unique identifier within the document for the anchor.
<a name=“bottom"></a>
<a href="#top">Top</a><a href="#middle">middle</a>
 One can also jump to a specific section of different document specifying the path on HREF attribute.
Example:
 Within the same document: <A HREF="#section_name“>
 Same folder, but different document: <AHREF="document. html#section_name“>
 Different folder, different document: <A HREF="folder/ document. html#section_name“>
 A different server: <A HREF="http://www.nios.ac.in/foldername/document.html
#section_name>

By ASNE K.

You might also like