Scribd
Upload
30 views

HTML Tutorial Notes1

Uploaded by

dolo2000
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
30 views

HTML Tutorial Notes1

Uploaded by

dolo2000
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 27
1. HTML—OVERVIEW HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages. + Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the link available on a webpage is called Hypertext. ‘+ As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark-up" a text document with tags that tell a Web browser how to structure it to display. Originally, HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers, Now, HTML is being widely used to format web pages with the help of different tags available in HTML language. Basic HTML Document In its simplest form, following is an example of an HTML document: This is document title

Document content goes here.....

Either you can use Try it option available at the top right corner of the code box to check the result of this HTML code, or let's save it in an HTML file test.htm using your favorite text editor. Finally open it using a web browser like Internet Explorer or Google Chrome, or Firefox etc. It must show the following output: 16 HTML e900 1/fses maha /Ovsizapytest htm | eva This is a heading Document coment goes here... Tiss document ute? \@)_MaeilaFitoxstire Page x Qreyase HTML Tags As told earlier, HTML is a markup language and makes use of various tags to format the content. These tags are enclosed within angle braces . Except few tags, most of the tags have their corresponding closing tags. For example, has its closing tag and tag has its closing tag tag etc. Above example of HTML document uses the following tags Tag Description This tag defines the document type and HTML version <body> <hi> This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>...</head> and document body which is represented by <body>...</body> tags. This tag represents the document's header which can keep other HTML tags like <title>, <link> etc, The <title> tag is used inside the <head> tag to mention the document title, This tag represents the document's body which keeps other HTML tags like <hi>, <div>, <p> etc. This tag represents the heading. 7 & tutorialspoint HTML <p> This tag represents a paragraph To learn HTML, you will need to study various tags and understand how they behave, while formatting a textual document. Learning HTML is simple as users have to learn the usage of different tags in order to format the text or images to make a beautiful webpage World Wide Web Consortium (W3C) recommends to use lowercase tags starting from HTML 4, HTML Document Structure A typical HTML document will have the following structure: Docunent declaration tag <html> <head> Document header related tags </head> <body> Document body related tags </body> </html> We will study all the header and body tags in subsequent chapters, but for now let's see what is document declaration tag The <!DOCTYPE> Declaration The <IDOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document, Current version of HTML is 5 and it makes use of the following declaration <IDOCTYPE html> There are many other declaration types which can be used in HTML document depending on what version of HTML is being used. We will see more details on this while discussing <I!DOCTYPE...> tag along with other HTML tags. & tutorialspoint 18 2. HTML-— BASIC TAGS Heading Tags Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading. Example <IDOCTYPE html> <html> <head> <titlesHeading Exanple This is heading 4 this is heading 6¢/n6> This will produce the following result: 19 This is heading 1 This is heading 2 This is heading 3 This is heading 4 Thi heading $ ‘This is heading 6 Paragraph Tag HTML ‘The

tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening

and a closing

tag as shown below in the example: Example <1DOCTYPE html> This will produce the following result: Here is a first paragraph of text. Here is a second paragraph of text. Here is a third paragraph of text. & tutorialsp! 20 HTML Line Break Tag Whenever you use the
element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them, The
tag has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use
it is not valid in XHTML, Example You delivered your assignment on time.
Thanks
Mahnaz

| This will produce the following result: ello ] You delivered your assignment on tine. Thanks Mahnaz | Centering Content You can use
tag to put any content in the center of the page or any table cell. Example chtmi> | & tutorialspoint 2 HTML
This will produce the following result: This text is not in the center. This text is in the center, Horizontal Lines Horizontal lines are used to visually break-up sections of a document. The
tag creates a line from the current position in the document to the right margin and breaks the line accordingly. For example, you may want to give a line between two paragraphs as in the given example below: Example
& tutorialspoint 22 HTML produce the following result: ‘This is paragraph one and should be on top This is paragraph two and should be at bottom Again
tag is an example of the empty element, where you do not need opening and closing tags, as there is nothing to go in between them The
element has a space between the characters hr and the forward slash. If you omit this space, older browsers will have trouble rendering the horizontal line, while if you miss the forward slash character and just use
it is not valid in XHTML Preserve Formatting Sometimes, you want your text to follow the exact format of how it is written in the HTML document. In these cases, you can use the preformatted tag 
.

Any text between the opening 
 tag and the closing 
 tag will preserve the
formatting of the source document.

Example

 








function testFunction( strText ){
alert (strText)
3





 

 

This will produce the following result:
function testFunction( strText ){

& tutorialspoint

23HTML

alert (strText)

Try using the same code without keeping it inside 
...
 tags

Nonbreaking Spaces

Suppose you want to use the phrase "12 Angry Men." Here, you would not want a browser to
split the "12, Angry" and "Men" across two lines:

 

 

‘An example of this technique appears in the movie “12 Angry Men.

 

In cases, where you do not want the client browser to break text, you should use a
nonbreaking space entity &bsp; instead of a normal space. For example, when coding the
"12 Angry Men” in a paragraph, you should use something similar to the following code:

Example

 



 




Nonbreaking Spaces Fxample






An example of this technique appears in the movie "12&bsp;Angry Men. "





 

 

243. HTML— ELEMENT!

 

An HTML element is defined by a starting tag, If the element contains other content, it ends
with a closing tag, where the element name is preceded by a forward slash as shown below
with few tags:

Start Tag Content End Tag

 This is paragraph content. 


 This is heading content. 

 is division content. 


 




So here 
....
 is an HTML element, 
...
 is another HTML element. There
are some HTML elements which don't need to be closed, such as , 
 and

 elements. These are known as void elements.

 

HTML documents consists of a tree of these elements and they specify how HTML documents
should be built, and what kind of content should be placed in what part of an HTML document.

HTML Tag vs. Element

‘An HTML element is defined by a starting tag. If the element contains other content, it ends
with a closing tag.

 

For example, 
 is starting tag of a paragraph and 
 is closing tag of the same
paragraph but 
This is paragraph
 is a paragraph element.

Nested HTML Elements

It is very much allowed to keep one HTML element inside another HTML element:

 

Example

 




 

 

25HTML

 



 






 headings/ht>
 paragraph





 

This will display the following result:

 

This is italic heading

This is underlined paragraph

 

 

 

 

264. HTML—ATTRIBUTES

 

We have seen few HTML tags and their usage like heading tags 
, 
, paragraph tag

 and other tags. We used them so far in their simplest form, but most of the HTML tags
can also have attributes, which are extra bits of information.

An attribute is used to define the characteristics of an HTML element and is placed inside the
element's opening tag. All attributes are made up of two parts: a name and a value:

+ The name is the property you want to set, For example, the paragraph 
 element
in the example carries an attribute whose name is align, which you can use to indicate
the alignment of paragraph on the page.

The value is what you want the value of the property to be set and always put within
quotations. The below example shows three possible values of align attribute: left,
center and right.

Attribute names and attribute values are case-insensitive. However, the World Wide Web
Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4
recommendation,

Example

 







 

‘left">This is left aligned


 

‘center">This is center aligned

right">This is right aligned


 



 

This

 

display the following result:

 

This is left aligned

 

 

This is center aligned

 

27HTML

This is right aligned

Core Attributes

The four core attributes that can be used on the majority of HTML elements (although not all)
are

 

. Id
+ Title
Class
Style

The Id Attribute

The id attribute of an HTML tag can be used to uniquely identify any element within an HTML
page. There are two primary reasons that you might want to use an id attribute on an
element:

 

+ Ifan element carries an id attribute as a unique identifier, it Is possible to identify just
that element and its content.

‘If you have two elements of the same name within a Web page (or style sheet), you
can use the id attribute to distinguish between elements that have the same name.

We will discuss style sheet in separate tutorial. For now, let's use the id attribute to distinguish
between two paragraph elements as shown below.

Example

 


This para explains what is HTML


 


This para explains what is Cascading Style Sheet


 

 

The title Attribute

The title attribute gives a suggested title for the element. They syntax for the title attribute
is similar as explained for id attribute:

The behavior of this attribute will depend upon the element that carries it, although it is often
displayed as a tooltip when cursor comes over the element or while the element is loading.

Example

 


htm»

 

 |

& tutorialspoint

 

28HTML

 












 

This will produce the following result:

 

 

Titled Heading Tag Example

 

Now try to bring your cursor over "Titled Heading Tag Example" and you will see that whatever
title you used in your code is coming out as a tooltip of the cursor.

The class Attribute

The class attribute is used to associate an element with a style sheet, and specifies the class
of element, You will learn more about the use of the class attribute when you will learn
Cascading Style Sheet (CSS). So for now you can avoid it.

The value of the attribute may also be a space-separated list of class names. For example:

 

class"classNane classNane2 classNane3"

 

The style Attribute

The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.

 

<1D0CTYPE hemi>




the style attribute






Some text...






 

 

This will produce the following result:

& tutorialspoint

29HTML

 

Some text.

 

 

At this point of time, we are not learning CSS, so just let's proceed without bothering much
about CSS. Here, you need to understand what are HTML attributes and how they can be
used while formatting content.

Intemationalization Attributes
There are three internationalization attributes, which are available for most (although not all)
XHTML elements.

 

+ dir
+ lang
+ xml:lang
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

 











This is how TE 5 renders right-to-left directed text.




 

 

This will produce the following result:

& tutorialspoint

30HTML

 

This is how IE 5 renders right-to-left directed text.

 

 

When dir attribute is used within the  tag, it determines how text will be presented
within the entire document. When used within another tag, it controls the text's direction for
just the content of that tag.

The lang Attribute

The lang attribute allows you to indicate the main language used in a document, but this
attribute was kept in HTML only for backwards compatibility with earlier versions of HTML.
This attribute has been replaced by the xml:lang attribute in new XHTML documents.

The values of the /ang attribute are ISO-639 standard two-character language codes. Check
HTML Lanquage Codes: ISO 639 for a complete list of language codes.

Example

 

<1DOCTYPE htnl>









This page is using English Language




 

 

The xml:lang Attribute

‘The xml:lang attribute is the XHTML replacement for the /ang attribute, The value of
thexml:/ang attribute should be an IS0-639 country code as mentioned in previous section.

 

Generic Attributes

Here's a table of some other attributes that are readily usable with many of the HTML tags.

 

Options Function

align right, left, center Horizontally aligns tags

& tutorialspoint

31valign

bgcolor

background

class

width

height

title

top, middle, bottom

numeric, hexidecimal, RGB

values

URL

User Defined

User Defined

Numeric Value

Numeric Value

User Defined

HTML

Vertically aligns tags within an HTML
element.

Places a background color behind an
element

Places a background image behind an
element

Names an element for use with Cascading
Style Sheets,

Classifies an element for use with Cascading
Style Sheets,

Specifies the width of tables, Images, or
table cells,

Specifies the height of tables, images, or
table cells.

"Pop-up" title of the elements,

We will see related examples as we will proceed to study other HTML tags. For a complete list
of HTML Tags and related attributes please check reference to HTML Tags List.

325. HTML—FORMATTING

 

If you use a word processor, you must be familiar with the ability to make text bold, italicized,
or underlined; these are just three of the ten options available to indicate how text can appear
in HTML and XHTML.

Bold Text

Anything that appears wit!

 

 

... element, is displayed in bold as shown below:

Example



 










bold typeface. 



 

This will produce the following result:

 

‘The following word uses a bold typeface.

 

Italic Text

Anything that appears within ... element is displayed in italicized as shown below:

 

Example

 







 

 

 

tutorialspHTML

 


 typeface. 




 |

 

This will produce the following result:

 

 

 

Underlined Text

Anything that appears within ... element, is displayed with underline as shown
below:

 

Example

 

<1DOCTYPE html>











The following word uses @  typeface. 





 

 

This will produce the following result:
The following word uses an underlined typeface.

Strike Text

Anything that appears within ... element is displayed with strikethrough,
which is a thin line through the text as shown below

 

 

Example

 


htm»

 |

& tutorialspointHTML

 

ctitlerstrike Text Exanplec/titles










 

 

Tr

 

will produce the following result:

The following word uses a strikethrough typeface.

Monospaced Font

The content of a ... element is written in monospaced font. Most of the fonts are
known as variable-width fonts because different letters are of different widths (for example,
the letter 'm' is wider than the letter ''). In a monospaced font, however, each letter has the
same width.

 

Example

 

<1DOCTYPE html>




Monospaced Font Example






the following word uses a monospacedc/tt> typeface. 





This will produce the following result:

 

The following word uses a monospaced typeface.

 

Superscript Text
The content of a ... 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.

& tutorialspoint

35HTML

Example

 






Superscript Text Example






The following word uses @ superscript typeface. 




 |

 

This will produce the following result:

 

 

The following word uses a ©" typeface. |

 

Subscript Text

The content of a ... 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

 

<1DOCTYPE html>




subseript Text Exanplec/title>

</head>

<body>

<p>the following word uses a <sub>subscript</sub> typeface.</p>
</body>

</html>

 

 

This will produce the following result:

The following word uses a subscip: typeface.

& tutorialspoint

36Inserted Text

HTML

 

Anything that appears within <ins>...</ins> element is displayed as inserted text.

Example

 

<1DOCTYPE html>
<html>

<head>

<titlerInserted Text Exanplec/title>

</head>

<body>

<p>I want to drink <del>colac/del> <ins>winec/ins></p>
</body>

</btml>

 

 

This will produce the following result:

I want to drink cole wine

 

Deleted Text

 

Anything that appears within <del>...</del> element, is displayed as deleted text.

Example

 

<IDOCTYPE html»
<html>

<head>

<titlerbeleted Text Exanple






I want to drink colac/del> winec/ins>





 

 

This

 

produce the following result:

& tutorialsp!

 

37HTML

I want to drink eeta wine

Larger Text

The content of the ... element is displayed one font size larger than the rest of
the text surrounding it as shown below:

 

   

Example

 














The following word uses a big typeface.




 |

 

This will produce the following result:

 

The following word uses a big typeface.

 

Smaller Text

The content of the ... element is displayed one font size smaller than the
rest of the text surrounding It as shown belo\

 

 

Example

 

<1DOCTYPE html>




snaller Text Exanple






the following word uses a snall typeface.



& tutorialspointHTML

 



 

This will produce the following result:

 

 

The following word uses a snati typeface.

 

 

Grouping Content

‘The 
 and  elements allow you to group together several elements to create
sections or subsections of a page.

 

For example, you might want to put alll of the footnotes on a page within a 
 element to
indicate that all of the elements within that 
 element relate to the footnotes. You might
then attach a style to this 
 element so that they appear using a special set of style
rules.

Example

 









 

index. htm

 

about/contact_us.htn" >CONTACT |
ABOUT






Content Articles










 

 

This will produce the following result:

& tutorialspoint

39HTML

 

HOME | CONTACT | ABOUT

Actual content goes here..

‘The  clement, 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  element as follows

 

Example

 

<1DOCTYPE htnl>


span Tag Exanple



span tag and the div tag alongwith CSS





 

 

This will produce the following result:
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.

406. HTML— PHRASE TAGS

 

The phrase tags have been desicolgned for specific purposes, though they are displayed in a
similar way as other basic tags like , , 
, and , you have seen in previous
chapter. This chapter will take you through all the important phrase tags, so let's start seeing
them one by one.

Emphasized Text
Anything that appears within ... element is displayed as emphasized text.

Example

 

<{DOCTYPE htnl>





tnphasized Text Exanple






The following word uses a enphasized typeface.





 

 

 

This will produce the following resul
The following word uses an emphasized typeface.

 

Marked Text

Anything that appears with-in ... element, is displayed as marked with
yellow ink.

 

Example

 







 

 

 

41HTML

 




The following word has been marked with yellow




 

This will produce the following result:

The following word has been marked with yellow.

Strong Text

Anything that appears within ... element is displayed as important text.

 

Example

 






strong Text Exanple






the following word uses a strong typeface.





 

This will produce the following result:
The following word uses a strong typeface.
Text Abbreviation

You can abbreviate a text by putting it inside opening  and closing  tags. If
present, the title attribute must contain this full description and nothing else.

 

Example

 

<1DOCTYPE html> ]



 

 |

& tutorialspoint

 

42
You might also like