Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
39 views

HTML Tutorial Notes1

Uploaded by

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

HTML Tutorial Notes1

Uploaded by

dolo2000
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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>...</div> </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 </div> </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> </div> </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> </div> </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=""> <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