Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
72 views27 pages

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
72 views27 pages

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: Codestin Search App

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 Codestin Search App 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> Codestin Search App 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 Codestin Search App 
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 Codestin Search App

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 Codestin Search App ‘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 Codestin Search App

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 Codestin Search App 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 Codestin Search App 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> Codestin Search App

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 Codestin Search App

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> Codestin Search App

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 Codestin Search App

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 Codestin Search App 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>





Codestin Search App






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

 





Codestin Search App






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